:root{--bg1:#f6f9fb;--bg2:#eef5fb;--card:#ffffff;--muted:#6b7280;--accent:#0d6efd}
html,body{height:100%}
body{transition:background-color .25s ease,color .25s ease;background:transparent !important}
/* make this view a true single full-bleed page */
body,html{margin:0;padding:0}
/* hide any global site chrome that may come from base templates */
header, nav, .navbar, .site-header, .topbar, .main-header, .page-header {display:none !important}
/* neutralize any container backgrounds so hero reaches edge */
.container, .container-fluid, .content, .page-body {background:transparent !important}
/* make the hero cover the full viewport and sit above any site chrome */
.login-hero{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:0;background:linear-gradient(135deg,var(--bg1),var(--bg2) 40%) !important;width:100vw;height:100vh;margin:0;z-index:9999}
.login-card{max-width:420px;width:100%;border-radius:12px;padding:2rem;background:var(--card);box-shadow:0 10px 30px rgba(2,6,23,0.18);color:#0b1220;margin:0 2rem}
.login-brand{display:flex;gap:12px;align-items:center;margin-bottom:1rem}
.login-brand img{height:44px;width:44px;object-fit:contain}
.login-title{font-weight:700;font-size:1.15rem}
.login-sub{color:var(--muted);font-size:0.9rem}
.form-icon{width:40px;display:inline-flex;align-items:center;justify-content:center;color:#6c757d}
.dark-mode{color:#e6eef8}
.dark-mode{ --bg1:#0b1220; --bg2:#0f1724; --card:#0f1318; --muted:rgba(230,238,248,0.75); }
html.dark-mode, body.dark-mode {background: linear-gradient(135deg,var(--bg1),var(--bg2)) !important}
/* ensure any light header/navbar/backdrop is neutralized on this page */
.dark-mode .navbar, .dark-mode .navbar-light, .dark-mode .bg-light, .dark-mode .bg-white, .dark-mode header, .dark-mode .site-header {background:transparent !important;color:inherit !important;border-color:rgba(255,255,255,0.06) !important}
/* full-bleed hero so no white gutters remain */
.login-hero{width:100%;margin:0}
.dark-mode .login-card{box-shadow:0 10px 30px rgba(0,0,0,0.6);color:#e6eef8}
.dark-mode input,.dark-mode .form-control{background:rgba(255,255,255,0.02);border-color:rgba(255,255,255,0.08);color:#e6eef8}
.dark-mode ::placeholder{color:rgba(230,238,248,0.5)}
.dark-mode .form-check-label,.dark-mode .login-sub{color:rgba(230,238,248,0.75)}
.dark-mode a{color:#9fc5ff}
.dark-mode .btn-primary{background:#2563eb;border-color:#1e40af}
.login-card .btn-primary{font-weight:600}
.dark-toggle{position:fixed;right:18px;top:18px;z-index:60}
/* ensure the top-left branding from base templates doesn't show through */
.brand, .navbar-brand, .site-logo {display:none !important}

/* neutralize other layout wrappers so no underlying backgrounds bleed through */
#app, .app, .wrapper, .page-wrapper, .content-wrapper, .site, .main, .page-body {background:transparent !important;background-image:none !important}
.container, .container-fluid {max-width:none !important;padding:0 !important;margin:0 !important}
.input-group-text{background:transparent;border:none}
.form-control{border-radius:8px;padding:0.75rem}
@media (max-width:520px){.login-card{padding:1.25rem}}
/* footer note inside card */
.login-note{color:var(--muted);opacity:0.95}
.login-note.small{font-size:0.85rem}
.dark-mode .login-note{color:var(--muted);opacity:0.9}
/* flash alert in card */
.login-alert{margin-bottom:1rem}
.dark-mode .login-alert.alert-danger{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-color:rgba(255,80,80,0.12);color:#ffdddd}
.dark-mode .login-alert.alert-success{background:linear-gradient(180deg,rgba(0,0,0,0.06),rgba(0,0,0,0.04));border-color:rgba(100,255,150,0.08);color:#c8ffd6}