/* Halaman login & OTP — Bootstrap 5.3, palet disamakan dengan dashboard (Adminator 2026) */
:root,:root[data-theme=light]{
  --bg-body:#f0f4f8; --bg-card:#fff; --bg-muted:#f1f5f9; --bg-hover:#f8fafc;
  --t-base:#1e293b; --t-muted:#64748b; --t-light:#94a3b8; --border:#e4e8ef;
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-light:#3b82f6; --primary-soft:#eff6ff; --primary-ring:rgba(37,99,235,.18);
  --brand-from:#1d4ed8; --brand-to:#3b82f6;
  --shadow-lg:0 10px 15px -3px rgba(15,23,42,.08),0 4px 6px -4px rgba(15,23,42,.05);
  --bs-primary:#2563eb; --bs-primary-rgb:37,99,235; --bs-link-color:#2563eb; --bs-link-hover-color:#1d4ed8;
  --bs-body-font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root[data-theme=dark]{
  --bg-body:#0b1120; --bg-card:#141b2d; --bg-muted:#1a2237; --bg-hover:#1c2438;
  --t-base:#f1f5f9; --t-muted:#94a3b8; --t-light:#64748b; --border:#222c42;
  --primary:#60a5fa; --primary-dark:#3b82f6; --primary-light:#93c5fd; --primary-soft:#0f2847; --primary-ring:rgba(96,165,250,.24);
  --brand-from:#1e3a8a; --brand-to:#2563eb;
  --shadow-lg:0 20px 40px -12px rgba(0,0,0,.6);
  --bs-primary:#60a5fa; --bs-primary-rgb:96,165,250; --bs-link-color:#60a5fa; --bs-link-hover-color:#93c5fd;
}
html{-webkit-text-size-adjust:100%}
.auth-body{margin:0;min-height:100vh;min-height:100dvh;color:var(--t-base);background:var(--bg-body);font-family:var(--bs-body-font-family)}

/* Latar: polos seperti dashboard; bila admin mengunggah foto latar, foto tampil dengan lapisan biru */
.auth-bg{position:fixed;inset:0;z-index:0;background:
  radial-gradient(900px 480px at 8% -8%,rgba(37,99,235,.10),transparent 60%),
  radial-gradient(800px 420px at 100% 108%,rgba(59,130,246,.10),transparent 60%),var(--bg-body)}
.auth-bg .fill{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity 1.4s ease-in-out}
.auth-bg .fill.active{opacity:1}
.has-photo .auth-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(15,23,42,.72),rgba(29,78,216,.45))}

.auth-shell{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;align-items:center;
  padding:clamp(16px,4vw,48px) 0;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* Kartu */
.auth-card{border-radius:16px;overflow:hidden;background:var(--bg-card);border:1px solid var(--border)!important;box-shadow:var(--shadow-lg)}

/* Kiri: identitas sekolah */
.auth-brand{position:relative;display:flex;flex-direction:column;gap:2rem;padding:clamp(1.75rem,4vw,3rem);color:#fff;
  background:
    radial-gradient(520px 320px at 100% 0,rgba(255,255,255,.16),transparent 65%),
    linear-gradient(155deg,var(--brand-from),var(--brand-to))}
.auth-brand::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px 24px)}
.auth-brand>*{position:relative;z-index:1}
.auth-brand-top{display:flex;align-items:center;gap:.9rem}
.auth-logo{flex:none;width:64px;height:64px;object-fit:contain;background:#fff;border-radius:14px;padding:6px;box-shadow:0 8px 20px -6px rgba(15,23,42,.45)}
.auth-logo-fallback{display:inline-flex;align-items:center;justify-content:center;font-size:2rem;color:var(--primary-dark)}
.auth-school{font-family:"Inter Tight",Inter,sans-serif;font-weight:700;font-size:1.1rem;line-height:1.25;letter-spacing:-.01em}
.auth-brand-body{flex:1}
.auth-heading{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(1.55rem,2.6vw,2.15rem);font-weight:700;line-height:1.2;margin:0 0 .85rem;letter-spacing:-.02em}
.auth-sub{color:rgba(255,255,255,.86);max-width:34ch;margin:0 0 1.5rem;line-height:1.65}
.auth-points{margin:0;display:grid;gap:.8rem}
.auth-points li{display:flex;align-items:center;gap:.8rem;color:rgba(255,255,255,.95);font-size:.93rem}
.auth-points i{flex:none;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.05rem}
.auth-brand-foot{font-size:.8rem;color:rgba(255,255,255,.75);display:grid;gap:.3rem}

/* Kanan: formulir */
.auth-form{display:flex;align-items:center;background:var(--bg-card)}
.auth-form-inner{width:100%;max-width:420px;margin:0 auto;padding:clamp(1.75rem,4vw,3rem) clamp(1.25rem,3vw,2rem)}
.auth-title{font-family:"Inter Tight",Inter,sans-serif;font-size:1.75rem;font-weight:700;margin:0 0 .25rem;letter-spacing:-.02em;color:var(--t-base)}
.auth-lead{color:var(--t-muted);margin:0 0 1.5rem}
.auth-form .form-label{font-weight:600;font-size:.86rem;margin-bottom:.35rem;color:var(--t-base)}
.auth-form .form-control,.auth-form .input-group-text,.auth-form .btn-outline-secondary{border-color:var(--border)}
.auth-form .form-control{padding:.7rem .9rem;font-size:1rem;background:var(--bg-card);color:var(--t-base)}  /* 16px: cegah zoom otomatis di iOS */
.auth-form .form-control::placeholder{color:var(--t-light)}
.auth-form .input-group-text{background:var(--bg-muted);color:var(--t-muted);padding-inline:.9rem}
.auth-form .btn-outline-secondary{color:var(--t-muted);background:var(--bg-card)}
.auth-form .btn-outline-secondary:hover{background:var(--bg-muted);color:var(--t-base);border-color:var(--border)}
.auth-form .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 .22rem var(--primary-ring);background:var(--bg-card);color:var(--t-base)}
.auth-form .btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#2563eb;--bs-btn-border-color:#2563eb;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#1d4ed8;--bs-btn-hover-border-color:#1d4ed8;
  --bs-btn-active-bg:#1d4ed8;--bs-btn-active-border-color:#1d4ed8;--bs-btn-disabled-bg:#2563eb;--bs-btn-disabled-border-color:#2563eb;
  font-weight:600;font-size:1rem;padding:.75rem 1rem;border-radius:10px;box-shadow:0 4px 10px -2px rgba(37,99,235,.4)}
.auth-form .btn:focus-visible{outline:3px solid var(--primary-ring);outline-offset:2px}
.auth-form a{color:var(--primary);text-decoration:none}.auth-form a:hover{text-decoration:underline}
.auth-form .alert-danger{border-radius:10px}
.note{font-size:.8rem;line-height:1.6;color:var(--t-muted)}
.note i{color:var(--primary)}

/* OTP & QR */
.otp-input{letter-spacing:.55rem;font-size:1.6rem!important;text-align:center;font-weight:700;padding:.6rem .5rem!important}
#qr{display:flex;justify-content:center;background:#fff;padding:12px;margin:12px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
#qr img,#qr canvas{max-width:100%;height:auto!important}

/* Tablet ke bawah: kartu bertumpuk */
@media (max-width:991.98px){
  .auth-brand{gap:1.25rem;padding:1.5rem}
  .auth-sub{max-width:none;margin-bottom:0}
  .auth-points,.auth-brand-foot{display:none}
  .auth-form-inner{max-width:480px}
}
/* HP */
@media (max-width:575.98px){
  .auth-shell{align-items:flex-start;padding:0}
  .auth-shell .container{padding:0}
  .auth-card{border-radius:0 0 16px 16px;border-width:0 0 1px!important;box-shadow:none}
  .auth-logo{width:52px;height:52px;border-radius:12px}
  .auth-heading{font-size:1.3rem;margin-bottom:.4rem}
  .auth-sub{font-size:.88rem;line-height:1.5}
  .auth-brand{padding:1.25rem 1.1rem 1.15rem;gap:.9rem}
  .auth-form-inner{padding:1.5rem 1.1rem 2rem}
  .auth-title{font-size:1.5rem}
  .otp-input{letter-spacing:.4rem;font-size:1.4rem!important}
}
@media (max-height:520px) and (orientation:landscape){.auth-shell{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.auth-bg .fill{transition:none}}