/* ============================================================
   VoIP Cat Switch — Login (cohesive design system)
   Navy #002050 + medical teal #0E9AD6, Inter, motion-considered.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy-900:#001430; --navy-800:#001A45; --navy-700:#002050; --navy-600:#0A2D58; --navy-500:#143A6B;
  --teal:#0E9AD6; --teal-bright:#38BDF8; --teal-soft:#5AC8FA;
  --ink-50:#0a1120; --surface:#101a2e; --line:#26374f; --line-soft:#1c2a44;
  --ink-300:#8a97b0; --ink-400:#5d6d8a; --ink-500:#8090aa; --ink-700:#96a6c2; --ink-900:#e8eefc;
  --brand-100:#C2CEE3;
  --r-input:10px; --r-card:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-card:0 20px 48px -12px rgba(0,20,48,0.18), 0 4px 12px -6px rgba(0,20,48,0.08);
}

/* Override AdminBSB's fixed 360px .login-page body so the split fills the viewport */
html, body.login-page, body.login-page.vc-bmc{
  width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important;
}
body.login-page.vc-bmc{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100vh; background:var(--ink-50); color:var(--ink-900);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.vc-bmc *{box-sizing:border-box;}

/* ---------- split layout ---------- */
.vc-split{display:flex; flex-direction:column; min-height:100vh;}
@media (min-width:992px){ .vc-split{display:grid; grid-template-columns:1.05fr .95fr;} }

/* ============================================================
   LEFT — brand panel
   ============================================================ */
.vc-brand-panel{
  display:none; position:relative; overflow:hidden;
  padding:64px 64px;
  background:linear-gradient(158deg,#071B3D 0%, var(--navy-700) 52%, var(--navy-900) 100%);
  color:#fff;
}
@media (min-width:992px){ .vc-brand-panel{display:flex; flex-direction:column; justify-content:space-between;} }

/* fx layer: aurora + dot grid + node network */
.vc-bp-fx{position:absolute; inset:0; z-index:0; pointer-events:none;}
.vc-bp-fx::before{ /* fine dot grid */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px; opacity:.5;
}
.vc-aurora{position:absolute; border-radius:50%; filter:blur(60px); opacity:.45; will-change:transform;}
.vc-aurora-1{width:420px; height:420px; top:-120px; right:-120px;
  background:radial-gradient(circle, rgba(56,189,248,.45), rgba(56,189,248,0) 70%);
  animation:vcDrift1 22s var(--ease) infinite alternate;}
.vc-aurora-2{width:360px; height:360px; bottom:-100px; left:-80px;
  background:radial-gradient(circle, rgba(46,120,235,.3), rgba(46,120,235,0) 70%);
  animation:vcDrift2 26s var(--ease) infinite alternate;}
@keyframes vcDrift1{from{transform:translate(0,0)}to{transform:translate(-40px,50px)}}
@keyframes vcDrift2{from{transform:translate(0,0)}to{transform:translate(40px,-40px)}}
.vc-net{position:absolute; inset:0; width:100%; height:100%; opacity:.35;}
.vc-net-lines line{stroke:#5AC8FA; opacity:.12;}
.vc-net-nodes circle{fill:#38BDF8; opacity:.45;}
.vc-node-pulse{transform-origin:center; animation:vcNode 3.2s ease-in-out infinite;}
.vc-node-pulse-2{animation-delay:1s;} .vc-node-pulse-3{animation-delay:2s;}
@keyframes vcNode{0%,100%{opacity:.4; r:3.5} 50%{opacity:1; r:5}}

.vc-bp-top,.vc-bp-mid,.vc-bp-bottom{position:relative; z-index:1;}
.vc-bp-top{display:flex; align-items:center; justify-content:space-between;}
.vc-bp-brand{font-size:19px; font-weight:700; letter-spacing:-.02em;}
.vc-live{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  color:#BFF3EC; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.25);
  padding:5px 12px; border-radius:999px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.vc-live-dot{width:7px; height:7px; border-radius:50%; background:var(--teal-bright);
  box-shadow:0 0 0 0 rgba(56,189,248,.6); animation:vcPing 2s ease-out infinite;}
@keyframes vcPing{0%{box-shadow:0 0 0 0 rgba(56,189,248,.55)}70%,100%{box-shadow:0 0 0 8px rgba(56,189,248,0)}}

.vc-bp-mid{padding:24px 0;}
.vc-bp-mid h2{font-size:40px; line-height:1.15; font-weight:800; letter-spacing:-.035em; margin:0 0 20px; max-width:16ch;}
.vc-accent{background:linear-gradient(135deg, var(--teal-bright) 0%, #BAE6FD 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.vc-bp-sub{font-size:15.5px; line-height:1.65; color:rgba(226,236,248,.85); max-width:44ch; margin:0 0 32px;}
.vc-bullets{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:18px;}
.vc-bullets li{display:flex; align-items:center; gap:14px; font-size:15px; color:rgba(231,236,244,.95); font-weight:500;}
.vc-check{flex:0 0 24px; width:24px; height:24px; border-radius:7px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--teal),var(--teal-bright));
  box-shadow:0 3px 8px -2px rgba(56,189,248,.4);}
.vc-check .material-icons{font-size:15px;}

.vc-bp-bottom{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--brand-100);}
.vc-bp-host{font-variant-numeric:tabular-nums; color:rgba(194,206,227,.7); letter-spacing:.02em;}

/* ============================================================
   RIGHT — form side
   ============================================================ */
.vc-form-side{
  display:flex; align-items:center; justify-content:center; padding:32px 24px; min-height:100vh;
  background:radial-gradient(120% 90% at 50% 0%, #16233c 0%, var(--ink-50) 62%);
}
@media (min-width:992px){ .vc-form-side{min-height:auto;} }
.login-box{width:100%; max-width:404px;}
.login-box .logo{text-align:left; margin-bottom:24px;}
.login-box .logo img.vc-logo{height:36px; width:auto; filter:none; background:#fff; padding:8px 12px; border-radius:11px; box-shadow:0 2px 12px rgba(0,0,0,.35);}   /* navy logo on light — no invert */

.card{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); overflow:hidden;}
.card .body{padding:38px 36px 34px;}
.vc-form-title{margin:0 0 8px; font-size:24px; font-weight:700; letter-spacing:-.025em; color:var(--ink-900); text-align:left;}
.msg{color:var(--ink-500); font-size:14.5px; margin:0 0 28px; text-align:left; line-height:1.5;}

.vc-label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-700); margin:0 0 8px; letter-spacing:-.005em;}
.vc-label + .input-group{margin-bottom:20px;}

.input-group{display:flex; align-items:center; width:100%; background:#0a1120;
  border:1px solid var(--line); border-radius:var(--r-input); padding:0 16px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);}
.input-group:focus-within{background:#0d1524; border-color:var(--teal-bright); box-shadow:0 0 0 3px rgba(56,189,248,.2);}
.input-group .input-group-addon{background:transparent; border:none; padding:0; margin-right:11px; display:flex; align-items:center;}
.input-group .input-group-addon .material-icons{color:var(--ink-400); font-size:20px; transition:color .18s var(--ease);}
.input-group:focus-within .input-group-addon .material-icons{color:var(--teal);}
.input-group .form-line{flex:1; border:none; background:transparent; margin:0; padding:0;}
.input-group .form-line::before,.input-group .form-line::after{display:none!important;}
.input-group .form-control{border:none!important; background:transparent!important; border-radius:0!important; box-shadow:none!important; color:var(--ink-900)!important;
  font-family:inherit; font-size:14.5px; padding:12px 0!important; height:auto!important; width:100%;}
.input-group .form-control::placeholder{color:var(--ink-400);}

button.btn.bg-pink{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:28px;
  background:linear-gradient(180deg,#54c8ff,#25aef0); color:#04121f; border:none; border-radius:var(--r-input);
  font-family:inherit; font-weight:600; font-size:15px; padding:14px; letter-spacing:.01em; cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(0,32,80,.25);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);}
button.btn.bg-pink .material-icons{font-size:19px; transition:transform .2s var(--ease);}
button.btn.bg-pink:hover,button.btn.bg-pink:focus{color:#04121f; filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 12px 28px -8px rgba(0,32,80,.35);}
button.btn.bg-pink:hover .material-icons{transform:translateX(3px);}
button.btn.bg-pink:active{transform:translateY(0) scale(.99);}

.alert.bg-red{display:flex; align-items:center; gap:10px; background:rgba(240,97,109,.12); border:1px solid rgba(240,97,109,.32); color:#f6a6ad;
  border-radius:var(--r-input); padding:11px 14px; margin:0 0 18px; font-size:13.5px; box-shadow:none;}
.alert.bg-red .material-icons{font-size:19px; flex:0 0 auto;}

.vc-copy{margin:24px 0 0; text-align:left; font-size:12px; color:var(--ink-400); padding-left: 2px;}

/* webkit autofill — keep white bg + dark text, no blue */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,
.form-control:-webkit-autofill,.form-control:-webkit-autofill:hover,.form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink-900)!important;
  -webkit-box-shadow:0 0 0 1000px #0a1120 inset!important;
  caret-color:var(--ink-900)!important; transition:background-color 5000s ease-in-out 0s!important;}

/* ============================================================
   Motion — staggered entrance
   ============================================================ */
.vc-up{opacity:0; transform:translateY(14px); animation:vcUp .7s var(--ease) forwards;}
.vc-rise{opacity:0; transform:translateY(20px) scale(.99); animation:vcUp .8s var(--ease) .1s forwards;}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}.d5{animation-delay:.4s}.d6{animation-delay:.48s}
@keyframes vcUp{to{opacity:1; transform:none;}}

@media (prefers-reduced-motion:reduce){
  .vc-up,.vc-rise{animation:none; opacity:1; transform:none;}
  .vc-aurora,.vc-node-pulse,.vc-live-dot{animation:none;}
}

/* ---- anime.js signal-packet layer (progressive enhancement) ---- */
html.vc-js .vc-net{opacity:0;}                 /* anime.js fades+draws it in; stays static (base opacity) if no-JS/reduced-motion */
.vc-route{fill:none; stroke:none;}
.vc-packet{fill:#38BDF8; opacity:0; filter:drop-shadow(0 0 5px rgba(56,189,248,.9));}
@media (prefers-reduced-motion:reduce){ html.vc-js .vc-net{opacity:.35;} .vc-packet{display:none;} }

/* ---- anime.js signal-PULSE layer v2 (overrides the dot) ---- */
.vc-net-fx{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.vc-route{fill:none; stroke:#38BDF8; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:0;
  filter:drop-shadow(0 0 4px rgba(56,189,248,.95)) drop-shadow(0 0 9px rgba(56,189,248,.55));}
.vc-packet{display:none;}
@media (prefers-reduced-motion:reduce){ html.vc-js .vc-net{opacity:.35;} .vc-net-fx{display:none;} }

.vc-circuit{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.vc-net,.vc-net-fx{display:none!important;}

/* icon fix v2 — pin the field icon absolutely so it can never collide with the value */
.input-group{position:relative !important; display:block !important; padding:0 !important;}
.input-group .input-group-addon{position:absolute !important; left:15px !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important; padding:0 !important; width:auto !important; height:auto !important; z-index:2 !important; pointer-events:none !important; background:transparent !important; border:none !important;}
.input-group .form-line{display:block !important; width:100% !important; margin:0 !important; padding:0 !important;}
.input-group .form-control{padding:13px 16px 13px 46px !important; width:100% !important;}

/* icon fix v3 — flex row, non-collapsing addon, vertically centered (supersedes v2) */
.input-group{display:flex !important; align-items:center !important; position:static !important; padding:0 16px !important;}
.input-group .input-group-addon{position:static !important; transform:none !important; flex:0 0 auto !important; width:auto !important; height:auto !important; margin:0 11px 0 0 !important; padding:0 !important; display:inline-flex !important; align-items:center !important;}
.input-group .input-group-addon .material-icons{color:#8092ad !important; font-size:20px !important; line-height:1 !important;}
.input-group:focus-within .input-group-addon .material-icons{color:var(--teal-bright) !important;}
.input-group .form-line{flex:1 1 auto !important; display:block !important; width:auto !important; margin:0 !important; padding:0 !important;}
.input-group .form-control{padding:13px 0 !important; width:100% !important;}

a.vc-bp-host{text-decoration:none; transition:color .15s var(--ease);}
a.vc-bp-host:hover{color:var(--teal-bright);}