/* =====================================================================
   login-modern.css — centered-card sign-in (ADDITIVE & REVERSIBLE)
   ---------------------------------------------------------------------
   One card, centered on a soft gradient field. Deliberately STATIC: no
   animation layers, no backdrop-filter, no full-screen SVG. The previous
   split design animated 48 SVG paths across half the screen, which Chrome
   on the shop PCs could not raster reliably — the panel (and sometimes the
   form) rendered blank white. Nothing here repaints after load.

   Palette: professional navy + blue CTA on a slate-tinted field.
   Scoped to .login-authpage, RTL-aware (.rtl-login), responsive down to
   360px. Reversible: restore this file + the <link> in index.html.
   ===================================================================== */

.login-authpage{
  /* semantic tokens — no raw hex below this block */
  --lg-ink:#0F172A; --lg-ink2:#475569; --lg-ink3:#94A3B8;
  --lg-surface:#ffffff; --lg-field:#F8FAFC; --lg-muted:#F1F5F9; --lg-border:#E2E8F0;
  --lg-accent:#0369A1; --lg-accent-ink:#075985; --lg-accent-soft:rgba(3,105,161,.10);
  --lg-danger:#DC2626;
  --lg-radius:14px;
  --lg-mono:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Consolas,monospace;
}

/* ---- strip Bootstrap modal chrome; the page IS the backdrop ---- */
.login-authpage .login-authpage-dialog{ max-width:100%; width:100%; height:100%; margin:0; }
.login-authpage .login-authpage-content{
  height:100%; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  overflow:hidden;
  /* Solid colour first, gradients as a separate layer: if a gradient ever
     fails to raster, the page still paints a valid background instead of
     a blank white sheet. */
  background-color:#EEF2F7 !important;
  background-image:
    radial-gradient(58% 42% at 12% 6%, rgba(3,105,161,.10) 0%, transparent 62%),
    radial-gradient(48% 44% at 88% 92%, rgba(15,23,42,.08) 0%, transparent 60%) !important;
}

/* ---- scroll container + vertical centering ---- */
.login-authpage .authpage-scroll{
  height:100%; overflow-y:auto; display:flex; flex-direction:column;
  padding:clamp(1rem,4vh,2.5rem) clamp(1rem,5vw,2rem);
}
/* margin:auto (not justify-content:center) so a tall card on a short screen
   scrolls instead of being clipped at the top. */
.login-authpage .authpage-card-wrap{ margin:auto; width:100%; max-width:27rem; }

/* ---- brand above the card ---- */
.login-authpage .authpage-brand{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin-bottom:.75rem; color:var(--lg-ink);
}
.login-authpage .authpage-brand-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.2rem; height:2.2rem; border-radius:.7rem; font-size:1.05rem; color:#fff;
  background:linear-gradient(140deg,var(--lg-accent),var(--lg-ink));
}
.login-authpage .authpage-brand-logo{
  height:2.6rem; width:auto; max-width:11rem; object-fit:contain; border-radius:.5rem;
}
.login-authpage .authpage-brand-name{ font-size:1.2rem; font-weight:700; letter-spacing:-.01em; }

/* ---- the card ---- */
.login-authpage .authpage-card{
  background:var(--lg-surface); border:1px solid var(--lg-border);
  border-radius:var(--lg-radius); padding:clamp(1.1rem,3.5vw,1.55rem);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px -12px rgba(15,23,42,.16);
}
.login-authpage .authpage-heading{ margin-bottom:.85rem; text-align:center; }
.login-authpage .authpage-title{
  font-size:1.35rem; font-weight:700; letter-spacing:-.02em; margin:0 0 .25rem; color:var(--lg-ink);
}
.login-authpage .authpage-subtitle{ font-size:.9rem; color:var(--lg-ink2); margin:0; }

/* ---- fields ---- */
.login-authpage .login-field-group{ margin-bottom:.65rem; }
.login-authpage .login-label{
  display:flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600;
  color:var(--lg-ink); margin-bottom:.4rem;
}
.login-authpage .login-label i{ color:var(--lg-accent); font-size:.9rem; }

.login-authpage .input-icon-wrapper{
  position:relative; display:flex; align-items:center; background:var(--lg-field);
  border:1px solid var(--lg-border); border-radius:10px;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.login-authpage .input-icon-wrapper:focus-within{
  background:var(--lg-surface); border-color:var(--lg-accent);
  box-shadow:0 0 0 3px var(--lg-accent-soft);
}
.login-authpage .input-icon{
  position:absolute; inset-inline-start:.8rem; color:var(--lg-ink3);
  font-size:.95rem; pointer-events:none;
}
.login-authpage .login-input,
.login-authpage .input-icon-wrapper .form-control{
  /* 2.75rem = 44px: the touch-target minimum */
  height:2.75rem; background:transparent !important; border:0 !important; box-shadow:none !important;
  color:var(--lg-ink) !important; padding-inline-start:2.4rem; padding-inline-end:.9rem;
  font-size:.95rem; width:100%;
}
.login-authpage .login-input:focus{ box-shadow:none !important; }
.login-authpage .login-input::placeholder{ color:var(--lg-ink3) !important; }
.login-authpage .btn-password-toggle{
  position:absolute; inset-inline-end:.35rem; border:0; background:transparent; color:var(--lg-ink3);
  width:2.2rem; height:2.2rem; border-radius:.5rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.login-authpage .btn-password-toggle:hover{ color:var(--lg-accent); background:var(--lg-accent-soft); }

/* 2FA block (revealed only when the server asks for it) */
.login-authpage .login-secondary-card{
  padding:.85rem; border:1px dashed var(--lg-border); border-radius:12px; background:var(--lg-muted);
}
.login-authpage .login-helper-text{
  display:block; margin-top:.4rem; font-size:.75rem; color:var(--lg-ink2);
}

/* security code */
.login-authpage .login-security-card{
  padding:.7rem; background:var(--lg-muted); border:1px solid var(--lg-border); border-radius:12px;
}
.login-authpage .login-security-header{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.45rem;
}
.login-authpage .login-security-title{
  display:flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; color:var(--lg-ink);
}
.login-authpage .login-security-title i{ color:var(--lg-accent); }
.login-authpage .login-security-hint{ font-size:.7rem; color:var(--lg-ink2); text-align:end; }
.login-authpage .login-security-code-row{
  display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem;
}
.login-authpage .login-security-code-display{
  flex:1; text-align:center; padding:.5rem; border-radius:10px;
  background:var(--lg-ink); color:#fff;
  font-family:var(--lg-mono); font-size:1rem; letter-spacing:.3em; font-weight:700;
  /* the code is generated LTR; keep it LTR even in an RTL layout */
  direction:ltr; unicode-bidi:isolate;
}
.login-authpage .login-security-refresh{
  width:2.5rem; height:2.5rem; flex:0 0 auto; border:1px solid var(--lg-border); border-radius:10px;
  background:var(--lg-surface); color:var(--lg-accent-ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.login-authpage .login-security-refresh:hover{ background:var(--lg-accent-soft); border-color:var(--lg-accent); }
.login-authpage .login-security-input{
  height:2.65rem; text-align:center; letter-spacing:.2em; background:var(--lg-surface) !important;
  border:1px solid var(--lg-border) !important; border-radius:10px !important;
  color:var(--lg-ink) !important; width:100%; direction:ltr;
}
.login-authpage .login-security-input:focus{
  border-color:var(--lg-accent) !important; box-shadow:0 0 0 3px var(--lg-accent-soft) !important;
}
.login-authpage .login-security-input::placeholder{ letter-spacing:normal; color:var(--lg-ink3); }

/* remember / forgot */
.login-authpage .login-actions-row{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap;
}
/* Bootstrap's check markup is LTR-only here (float + negative margins that
   don't flip), so drive it with flexbox — correct in both directions. */
.login-authpage .login-remember{
  display:flex; align-items:center; gap:.45rem; margin:0; min-height:auto; padding:0;
}
.login-authpage .login-remember .form-check-input{
  float:none; margin:0; flex:0 0 auto; width:1.1rem !important; height:1.1rem !important;
  min-width:0 !important; min-height:0 !important; padding:0; border-radius:.3rem; cursor:pointer;
}
.login-authpage .login-remember .form-check-label{ color:var(--lg-ink2); font-size:.85rem; margin:0; cursor:pointer; }
.login-authpage .form-check-input:checked{ background-color:var(--lg-accent); border-color:var(--lg-accent); }
.login-authpage .form-check-input:focus{ border-color:var(--lg-accent); box-shadow:0 0 0 3px var(--lg-accent-soft); }
.login-authpage .login-inline-link{
  color:var(--lg-accent-ink) !important; font-weight:600; font-size:.85rem; text-decoration:none;
}
.login-authpage .login-inline-link:hover{ text-decoration:underline; }

/* primary CTA — the only filled button on the screen */
.login-authpage .btn-login{
  width:100%; height:2.95rem; margin-top:.35rem; border:0; border-radius:10px;
  color:#fff; font-weight:600; font-size:.95rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--lg-accent); transition:background-color .15s, box-shadow .15s;
}
.login-authpage .btn-login:hover{ background:var(--lg-accent-ink); }
.login-authpage .btn-login:focus-visible{ box-shadow:0 0 0 3px var(--lg-accent-soft); outline:none; }

/* advanced settings (collapsed by default) */
.login-authpage .login-advanced-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%; cursor:pointer;
  background:transparent; color:var(--lg-ink2); border:1px solid var(--lg-border); border-radius:10px;
  padding:.6rem .85rem; font-size:.82rem; font-weight:600;
}
.login-authpage .login-advanced-toggle:hover{ color:var(--lg-ink); background:var(--lg-muted); }
.login-authpage .login-system-card{
  padding:.85rem; background:var(--lg-muted); border:1px solid var(--lg-border); border-radius:12px;
}
.login-authpage .login-system-card-header{ display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem; }
.login-authpage .login-system-card-badge{
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--lg-accent-ink); background:var(--lg-accent-soft); padding:.15rem .45rem; border-radius:.4rem;
}
.login-authpage .login-system-card-caption{ color:var(--lg-ink2); font-size:.75rem; }
.login-authpage .login-system-label{ font-size:.78rem; font-weight:600; color:var(--lg-ink2); }
.login-authpage .login-system-input{ height:2.5rem; border:1px solid var(--lg-border); border-radius:10px; font-size:.85rem; }
.login-authpage .login-system-card .form-check-label{ font-size:.85rem; color:var(--lg-ink2); }

/* ---- top bar: connection pill + language ---- */
.login-authpage .authpage-topbar{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  flex-wrap:wrap; margin-bottom:.85rem;
}
.login-authpage .authpage-mode{
  display:inline-flex; align-items:center; gap:.35rem; padding:.34rem .65rem; border-radius:999px;
  font-size:.72rem; font-weight:600; color:var(--lg-ink2);
  background:var(--lg-surface); border:1px solid var(--lg-border);
}
.login-authpage .authpage-mode i{ color:var(--lg-accent); }
.login-authpage .authpage-lang .dropdown-toggle{
  display:inline-flex; align-items:center; gap:.35rem; padding:.34rem .65rem; border-radius:999px;
  font-size:.75rem; font-weight:600; color:var(--lg-ink) !important;
  background:var(--lg-surface); border:1px solid var(--lg-border);
}
.login-authpage .authpage-lang .dropdown-toggle::after{ margin-inline-start:.15rem; }
.login-authpage .authpage-lang .dropdown-menu{
  font-size:.85rem; border-color:var(--lg-border); box-shadow:0 12px 30px -12px rgba(15,23,42,.3);
}
.login-authpage .authpage-lang .dropdown-item.active,
.login-authpage .authpage-lang .dropdown-item:active{
  background:var(--lg-accent-soft); color:var(--lg-accent-ink);
}

/* ---- footer ---- */
.login-authpage .authpage-footer{ margin-top:.75rem; text-align:center; }
.login-authpage .login-footer-branding-text{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--lg-mono);
  font-size:.7rem; font-weight:600; letter-spacing:.14em; color:var(--lg-ink3);
}

/* ---- RTL: logical properties handle the rest ---- */
.login-authpage.rtl-login .authpage-scroll{ direction:rtl; }
.login-authpage.rtl-login .login-security-hint{ text-align:start; }

/* ---- small screens ---- */
@media (max-width:480px){
  .login-authpage .authpage-card{ border-radius:12px; }
  .login-authpage .authpage-title{ font-size:1.35rem; }
  /* Keep "Remember me" and "Forgot password" on one line — wrapping left them
     stacked and looking accidentally centred. They fit at this size. */
  .login-authpage .login-actions-row{ flex-wrap:nowrap; gap:.5rem; }
  .login-authpage .login-remember .form-check-label,
  .login-authpage .login-inline-link{ font-size:.8rem; }
}

/* Nothing on this screen animates, so there is nothing to reduce — the
   rule is kept so future additions inherit the intent. */
@media (prefers-reduced-motion:reduce){
  .login-authpage *{ transition:none !important; animation:none !important; }
}