/* Sign-in page, restyled to match the Dashboard theme (scoped to .login-ref) */
.login-ref{ grid-template-columns:1.05fr 1fr; background:#EEF0F8; }

/* ---------- Left: brand panel ---------- */
.login-ref .auth-visual{
  position:relative; overflow:hidden; color:#fff; padding:44px 56px;
  background:
    radial-gradient(520px 320px at 12% 8%, rgba(99,140,255,.35), transparent 65%),
    radial-gradient(480px 360px at 95% 92%, rgba(14,165,233,.28), transparent 65%),
    linear-gradient(155deg, #16205A 0%, #22348A 55%, #2C4FC0 100%);
}
.login-ref .auth-visual::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size:22px 22px;
}
.login-ref .auth-visual > *{ position:relative; }

.login-ref .lv-brand{ display:flex; align-items:center; gap:12px; font-size:17px; font-weight:700; letter-spacing:.01em; }
.login-ref .lv-brand em{ font-style:normal; opacity:.6; margin:0 2px; }
.login-ref .lv-brand-chip{
  width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#fff,#DDE6FF); color:#2C3E8F; box-shadow:0 8px 18px -6px rgba(0,0,0,.45);
}
.login-ref .lv-brand-chip svg{ width:20px; height:20px; }
/* The logo's own wordmark is navy-on-transparent — a light chip behind it (instead of
   the plain circle the icon chips use) keeps it readable against this dark panel. */
.login-ref .lv-brand-chip.lv-brand-logo{ width:auto; height:auto; border-radius:12px; padding:6px 12px; }
.login-ref .lv-brand-logo img{ height:40px; width:auto; display:block; }
.login-ref .lv-brand-logo::after{ display:none; }

.login-ref .lv-stats{ display:flex; flex-direction:column; gap:12px; max-width:440px; }
.login-ref .lv-stat{
  display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
  transition:transform .2s ease, background .2s ease;
}
.login-ref .lv-stat:hover{ transform:translateX(4px); background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10)); }
.login-ref .lv-ico{
  width:38px; height:38px; flex:0 0 38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 8px 16px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.login-ref .lv-ico svg{ width:19px; height:19px; }
.login-ref .lv-green .lv-ico{ background:linear-gradient(145deg,#34D27B,#16A34A); }
.login-ref .lv-blue  .lv-ico{ background:linear-gradient(145deg,#5B93FF,#2563EB); }
.login-ref .lv-amber .lv-ico{ background:linear-gradient(145deg,#FBBF4A,#D97706); }
.login-ref .lv-body{ flex:1; min-width:0; }
.login-ref .lv-label{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:7px; }
.login-ref .lv-bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; }
.login-ref .lv-bar i{ display:block; height:100%; border-radius:99px; animation:lvGrow 1.1s cubic-bezier(.2,.8,.2,1) both; }
.login-ref .lv-green .lv-bar i{ background:linear-gradient(90deg,#34D27B,#A7F3C4); }
.login-ref .lv-blue  .lv-bar i{ background:linear-gradient(90deg,#5B93FF,#B6D0FF); }
.login-ref .lv-amber .lv-bar i{ background:linear-gradient(90deg,#FBBF4A,#FDE3A6); }
.login-ref .lv-pct{ font-size:18px; font-weight:700; letter-spacing:-.01em; }
@keyframes lvGrow{ from{ width:0 !important; } }

.login-ref .auth-visual .quote{ font-size:31px; line-height:1.2; font-weight:700; letter-spacing:-.02em; }
.login-ref .auth-visual .quote span{ color:#7FD4FF; }
.login-ref .auth-visual .subline{ color:rgba(255,255,255,.72); font-size:14px; line-height:1.6; max-width:440px; }

/* ---------- Right: sign-in card ---------- */
.login-ref .auth-form-side{ background:#EEF0F8; padding:32px; display:flex; align-items:center; justify-content:center; }
.login-ref .auth-card{
  width:100%; max-width:420px; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 14px 40px rgba(28,38,92,.16), 0 1px 3px rgba(28,38,92,.08);
}
.login-ref .lc-head{ display:flex; align-items:center; gap:14px; padding:18px 24px; background:#DDE0EE; }
.login-ref .lc-chip{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#fff,#E6EAF8); color:#2C3E8F; box-shadow:0 6px 14px -6px rgba(28,38,92,.5);
}
.login-ref .lc-chip svg{ width:20px; height:20px; }
.login-ref .auth-card h1{ margin:0; font-size:17px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:#1D2A5C; }
.login-ref .auth-card p.sub{ margin:2px 0 0; font-size:12px; color:#5F6788; }
.login-ref .lc-body{ padding:22px 24px 24px; }

.login-ref .field{ margin-bottom:14px; }
.login-ref .field label{ display:block; margin:0 0 5px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#3F4560; }
.login-ref .field input{
  width:100%; height:42px; padding:0 14px; font-size:14px; color:#151A33; background:#F6F7FC;
  border:1px solid #E1E5F2; border-radius:10px; box-shadow:none; transition:border-color .15s, background .15s, box-shadow .15s;
}
.login-ref .field input::placeholder{ color:#9AA1BC; }
.login-ref .field input:hover{ border-color:#C5CCE6; }
.login-ref .field input:focus{ outline:0; background:#fff; border-color:#3B6BF0; box-shadow:0 0 0 3px rgba(59,107,240,.15); }

.login-ref .btn-primary{
  width:100%; height:44px; margin-top:4px; border:0; border-radius:10px; font-size:14px; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(180deg,#3B6BF0,#2A55D8); color:#fff; box-shadow:0 10px 20px -8px rgba(37,84,216,.7);
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.login-ref .btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 14px 24px -10px rgba(37,84,216,.8); }

.login-ref .auth-error{ margin-bottom:14px; padding:10px 12px; border-radius:10px; font-size:13px; }
.login-ref .auth-foot{ margin-top:20px; padding-top:14px; border-top:1px solid #ECEEF6; font-size:12px; line-height:1.7; color:#7A81A0; }
.login-ref .auth-foot code{ background:#F1F2F9; color:#3F4560; }

@media (max-width:900px){
  /* No page scroll on mobile — see the height:100vh + grid-template-rows note in style.css.
     overflow:hidden here is the backstop: if anything ever did end up taller than 100vh,
     it's clipped instead of creating a scrollbar, since a one-screen login has nothing
     below the fold worth scrolling to anyway. */
  html, body{ height:100%; overflow:hidden; }
  .login-ref{ grid-template-columns:1fr; }
  /* align-items:flex-start (not the base center) so the card sits right under the logo
     bar instead of being centered in the leftover space below it, which left a big gap. */
  .login-ref .auth-form-side{ min-height:0; padding:16px 16px 20px; align-items:flex-start; }
  /* Keep only the logo visible in the stacked brand panel — the stats and quote never
     fit legibly at full mobile width (percentages overlapping their labels) and, more to
     the point, pushed the actual sign-in form below the fold. The sign-in card now comes
     right after the logo instead. */
  .login-ref .auth-visual{ padding:20px 16px; min-height:0; justify-content:flex-start; }
  .login-ref .lv-stats, .login-ref .lv-quote-block{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .login-ref .lv-bar i{ animation:none; }
  .login-ref .lv-stat, .login-ref .btn-primary{ transition:none; }
}

/* ---------- Icon visual effects ---------- */
.login-ref .lv-brand-chip, .login-ref .lv-ico, .login-ref .lc-chip{ position:relative; }
.login-ref .lv-brand-chip svg, .login-ref .lv-ico svg, .login-ref .lc-chip svg{ transition:transform .3s cubic-bezier(.2,.9,.3,1.3); filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }

/* expanding pulse ring */
.login-ref .lv-brand-chip::after, .login-ref .lv-ico::after, .login-ref .lc-chip::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 0 currentColor; opacity:.0; animation:lgRing 2.8s ease-out infinite;
}
.login-ref .lv-green .lv-ico::after{ color:rgba(52,210,123,.7); }
.login-ref .lv-blue  .lv-ico::after{ color:rgba(91,147,255,.7); animation-delay:.5s; }
.login-ref .lv-amber .lv-ico::after{ color:rgba(251,191,74,.7); animation-delay:1s; }
.login-ref .lv-brand-chip::after{ color:rgba(255,255,255,.55); }
.login-ref .lc-chip::after{ color:rgba(59,107,240,.5); }
@keyframes lgRing{ 0%{ box-shadow:0 0 0 0 currentColor; opacity:1; } 70%,100%{ box-shadow:0 0 0 12px currentColor; opacity:0; } }

/* gentle idle motion per icon */
.login-ref .lv-brand-chip svg{ animation:lgDrive 3.2s ease-in-out infinite; }
.login-ref .lv-green .lv-ico svg{ animation:lgDrive 3.2s ease-in-out infinite .4s; }
.login-ref .lv-blue  .lv-ico svg{ animation:lgCharge 2.4s ease-in-out infinite; }
.login-ref .lv-amber .lv-ico svg{ animation:lgWrench 3s ease-in-out infinite; }
.login-ref .lc-chip svg{ animation:lgLock 3.4s ease-in-out infinite; }
@keyframes lgDrive{ 0%,100%{ translate:0 0; } 50%{ translate:2px -1.5px; } }
@keyframes lgCharge{ 0%,100%{ scale:1; opacity:1; } 50%{ scale:1.14; opacity:.75; } }
@keyframes lgWrench{ 0%,100%{ rotate:0deg; } 25%{ rotate:-14deg; } 75%{ rotate:14deg; } }
@keyframes lgLock{ 0%,100%{ translate:0 0; } 45%{ translate:0 -2px; } 55%{ translate:0 -2px; } }

/* shine sweep across the round chips */
.login-ref .lv-ico, .login-ref .lc-chip, .login-ref .lv-brand-chip{ overflow:visible; }
.login-ref .lv-stat:hover .lv-ico svg, .login-ref .auth-card:hover .lc-chip svg, .login-ref .lv-brand:hover .lv-brand-chip svg{
  animation-play-state:paused; transform:scale(1.2) rotate(-8deg);
}
.login-ref .lv-stat:hover .lv-ico{ box-shadow:0 10px 20px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5), 0 0 16px rgba(255,255,255,.25); }

/* input focus: field label + card icon react */
.login-ref .field:focus-within label{ color:#2A55D8; }
.login-ref .auth-card:focus-within .lc-chip{ box-shadow:0 0 0 4px rgba(59,107,240,.18), 0 6px 14px -6px rgba(28,38,92,.5); }

@media (prefers-reduced-motion:reduce){
  .login-ref .lv-brand-chip::after, .login-ref .lv-ico::after, .login-ref .lc-chip::after{ animation:none; opacity:0; }
  .login-ref .lv-brand-chip svg, .login-ref .lv-ico svg, .login-ref .lc-chip svg{ animation:none !important; }
}

/* ---------- Progress bar + percentage effects ---------- */
.login-ref .lv-bar i{ position:relative; animation-duration:1.4s; animation-delay:.15s; }
.login-ref .lv-stat:nth-child(2) .lv-bar i{ animation-delay:.33s; }
.login-ref .lv-stat:nth-child(3) .lv-bar i{ animation-delay:.51s; }
/* moving shine across the filled part */
.login-ref .lv-bar i::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%);
  background-size:200% 100%; animation:lvShine 2.6s ease-in-out 1.8s infinite;
}
/* glowing tip */
.login-ref .lv-bar i::after{
  content:""; position:absolute; right:-1px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%;
  background:#fff; box-shadow:0 0 10px 3px rgba(255,255,255,.75); animation:lvTip 1.8s ease-in-out infinite;
}
@keyframes lvShine{ 0%{ background-position:200% 0; } 60%,100%{ background-position:-100% 0; } }
@keyframes lvTip{ 0%,100%{ opacity:.55; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }

.login-ref .lv-pct{ min-width:52px; text-align:right; font-variant-numeric:tabular-nums; text-shadow:0 2px 10px rgba(255,255,255,.25); transition:transform .25s cubic-bezier(.2,.9,.3,1.3); }
.login-ref .lv-stat:hover .lv-pct{ transform:scale(1.12); }
@media (prefers-reduced-motion:reduce){
  .login-ref .lv-bar i::before, .login-ref .lv-bar i::after{ animation:none; }
}

/* Bar width is now driven by the count-up script (in step with the percentage), so drop the CSS grow animation. */
.login-ref .lv-bar i{ animation:none !important; will-change:width; }