/* ============================================================
   TECHSWITCH — Professional two-panel login (logo colors + animation)
   Active only on body.tsw-login.
   ============================================================ */

/* hide our global header/footer on login (self-contained design) */
body.tsw-login #ts-header, body.tsw-login #ts-footer{ display:none !important; }
body.tsw-login.ts-has-header{ padding-top:0 !important; }
body.tsw-login.ts-has-footer{ padding-bottom:0 !important; }

/* Reserve left 46% for brand panel */
body.tsw-login .container{ padding-left:46% !important; box-sizing:border-box !important; }

body.tsw-login .container-block{
  min-width:0 !important; max-width:430px !important; width:100% !important;
  max-height:none !important; overflow:visible !important;
  box-shadow:none !important; background:transparent !important; padding:0 !important;
  animation: tsFormIn .6s cubic-bezier(.2,.7,.2,1) both;
}
body.tsw-login .container-logo{ display:none !important; }

body.tsw-login .auth-form{ width:100% !important; }
body.tsw-login .auth-input-wrapper, body.tsw-login .mat-mdc-form-field{ width:100% !important; }
body.tsw-login .auth-title{ text-align:left !important; font-size:26px !important; font-weight:800 !important; color:#141417 !important; margin-bottom:8px !important; }

/* red gradient sign-in button (logo colors) with pulse-on-hover */
body.tsw-login .auth-buttons{ justify-content:stretch !important; }
body.tsw-login .auth-buttons button,
body.tsw-login .auth-form button[type="submit"],
body.tsw-login .auth-form button{
  width:100% !important; height:48px !important; border-radius:12px !important;
  background:linear-gradient(135deg,#d80000,#f01414 55%,#a80000) !important; color:#fff !important;
  box-shadow:0 8px 22px rgba(216,0,0,.32) !important; font-weight:700 !important; font-size:15px !important;
  border:none !important; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease !important;
}
body.tsw-login .auth-buttons button:hover{
  transform:translateY(-2px) !important; box-shadow:0 12px 30px rgba(216,0,0,.45) !important; filter:brightness(1.06);
}
body.tsw-login .auth-buttons button[disabled]{ opacity:.6 !important; }

/* input focus -> red */
body.tsw-login .mdc-text-field--focused .mdc-notched-outline__leading,
body.tsw-login .mdc-text-field--focused .mdc-notched-outline__notch,
body.tsw-login .mdc-text-field--focused .mdc-notched-outline__trailing{
  border-color:#d80000 !important; border-width:2px !important;
}

/* ---- LEFT BRAND PANEL: animated gradient + floating logo ---- */
.tsw-brandpanel{
  position:fixed; left:0; top:0; bottom:0; width:46%;
  background:linear-gradient(135deg,#d80000 0%,#a80000 40%,#1c1c22 100%);
  background-size:200% 200%;
  animation: tsGradient 12s ease infinite;
  color:#fff; display:flex; align-items:center; justify-content:center; padding:48px; text-align:center; z-index:50; overflow:hidden;
}
/* soft moving light orbs */
.tsw-brandpanel::before{ content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 60%);
  top:-120px; left:-120px; animation: tsFloat 9s ease-in-out infinite; }
.tsw-brandpanel::after{ content:""; position:absolute; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.28),transparent 60%);
  bottom:-100px; right:-90px; animation: tsFloat 11s ease-in-out infinite reverse; }

.tsw-brandpanel .tsw-in{ position:relative; max-width:420px; animation: tsPanelIn .7s cubic-bezier(.2,.7,.2,1) both; }
.tsw-brandpanel img{ width:180px; height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.45));
  margin-bottom:20px; animation: tsFloatLogo 4.5s ease-in-out infinite; }
.tsw-brandpanel h1{ font-size:30px; font-weight:800; letter-spacing:.5px; margin:6px 0 10px; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.3); }
.tsw-brandpanel p{ font-size:15px; line-height:1.55; color:rgba(255,255,255,.9); margin:0; }
.tsw-brandpanel .tsw-tag{ display:inline-block; margin-top:22px; padding:9px 20px; border:1px solid rgba(255,255,255,.45);
  border-radius:999px; font-size:13px; letter-spacing:1.2px; text-transform:uppercase; color:#fff;
  backdrop-filter:blur(4px); transition:all .2s ease; }
.tsw-brandpanel .tsw-tag:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.tsw-powered{ margin-top:26px; font-size:12.5px; color:rgba(255,255,255,.8); letter-spacing:.3px; }
.tsw-powered b{ color:#fff; font-weight:800; }

/* ---- animations ---- */
@keyframes tsGradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes tsFloat{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,26px)} }
@keyframes tsFloatLogo{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(-1.5deg)} }
@keyframes tsPanelIn{ from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none} }
@keyframes tsFormIn{ from{opacity:0; transform:translateX(20px)} to{opacity:1; transform:none} }

@media (max-width:900px){
  body.tsw-login .container{ padding-left:0 !important; }
  .tsw-brandpanel{ position:relative; width:100%; min-height:36vh; }
}


/* ---- Headwind's own login footer (© 2026 / Cookies): move it into the RIGHT column cleanly ---- */
body.tsw-login .auth-footer,
body.tsw-login .login-footer,
body.tsw-login footer,
body.tsw-login .copyright{
  position:relative !important; left:0 !important; right:0 !important; bottom:auto !important;
  margin:22px 0 0 0 !important; padding:0 !important; text-align:left !important;
  color:#8a97a5 !important; font-size:12px !important; background:transparent !important; z-index:1 !important;
}
body.tsw-login .auth-footer a, body.tsw-login .copyright a{ color:#d80000 !important; }
/* keep the whole right-column form + footer vertically centered without overlap */
body.tsw-login .container-block{ margin:auto !important; }


/* ============================================================
   FIX: Headwind login footer text ("device management system ©...")
   was clipping at the left edge. Broad, robust targeting.
   ============================================================ */
/* Any footer-like element on the login: keep it inside the RIGHT column (past the 46% panel) */
body.tsw-login .container > *:last-child,
body.tsw-login .auth-footer,
body.tsw-login .login-footer,
body.tsw-login .copyright,
body.tsw-login .footer,
body.tsw-login footer{
  margin-left:0 !important;
  padding-left:8px !important;
  padding-right:16px !important;
  text-align:left !important;
  color:#8a97a5 !important;
  font-size:12px !important;
  box-sizing:border-box !important;
  max-width:100% !important;
  overflow-wrap:break-word !important;
  position:relative !important;
  left:0 !important; right:auto !important;
}
/* The whole app container already has padding-left:46% for the panel,
   so any footer inside it is automatically clear of the panel.
   Force it not to be pulled under the fixed panel: */
body.tsw-login .tsw-brandpanel{ z-index:40 !important; }
body.tsw-login .container{ position:relative; z-index:41; }

/* ---- particle canvas fills the brand panel ---- */
.tsw-brandpanel .tsw-particles{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.tsw-brandpanel .tsw-in{ z-index:2; }

/* 3D tilt logo transitions smoothly */
.tsw-logo3d{ transition:transform .15s ease-out; will-change:transform; }

/* typewriter title with blinking cursor */
.tsw-type{ min-height:38px; }
.tsw-type::after{ content:'|'; margin-left:2px; animation:tsCaret 1s step-end infinite; color:#fff; }
.tsw-type.tsw-type-done::after{ animation:none; opacity:0; }
@keyframes tsCaret{ 50%{opacity:0} }

/* fade-in sequence (staggered) */
.tsw-fade{ opacity:0; animation:tsFadeSeq .6s ease forwards; }
.tsw-d1{ animation-delay:1.1s; } .tsw-d2{ animation-delay:1.4s; } .tsw-d3{ animation-delay:1.7s; }
@keyframes tsFadeSeq{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }