/* ====== SholatKu — custom styles ====== */

/* Font brand: Arabic Ramadhan (lokal) */
@font-face {
  font-family: 'Arabic Ramadhan';
  src: url('/static/Arabic Ramadhan.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #16a34a;
  --font-brand: 'Arabic Ramadhan', 'El Messiri', 'Noto Kufi Arabic', Georgia, serif;
}

* { -webkit-tap-highlight-color: transparent; }

/* Islamic geometric pattern background for login */
.islamic-bg {
  background-color: #14532d;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(34,197,94,.25) 0%, transparent 45%),
    radial-gradient(circle at 75% 75%, rgba(16,185,129,.2) 0%, transparent 45%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2322c55e' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M30 0l30 30-30 30L0 30z'/%3E%3Ccircle cx='30' cy='30' r='14'/%3E%3C/g%3E%3C/svg%3E");
}

/* Smooth transitions */
.transition-all { transition: all .2s ease; }
.card { background:#fff; border-radius:1rem; box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); }

/* Split-screen authentication landing page */
.auth-page { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(25rem,.92fr); min-height:100vh; background:#f8fafc; }
.auth-visual-panel { position:relative; display:flex; min-height:100vh; overflow:hidden; color:#fff; background-color:#063b33; background-image:radial-gradient(circle at 12% 8%,rgba(52,211,153,.22),transparent 25%),radial-gradient(circle at 88% 82%,rgba(245,158,11,.12),transparent 28%),linear-gradient(135deg,rgba(3,49,43,.98),rgba(6,78,70,.95) 52%,rgba(8,105,91,.96)); }
.auth-visual-panel::before, .auth-visual-panel::after { content:""; position:absolute; pointer-events:none; }
.auth-visual-panel::before { inset:0; opacity:.28; background-image:linear-gradient(30deg,rgba(255,255,255,.13) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.13) 87.5%,rgba(255,255,255,.13)),linear-gradient(150deg,rgba(255,255,255,.13) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.13) 87.5%,rgba(255,255,255,.13)),linear-gradient(30deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)),linear-gradient(150deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)); background-position:0 0,0 0,2rem 3.5rem,2rem 3.5rem; background-size:4rem 7rem; mask-image:linear-gradient(135deg,#000,transparent 82%); }
.auth-visual-panel::after { width:28rem; height:28rem; right:-10rem; bottom:-12rem; border:1px solid rgba(255,255,255,.13); border-radius:50%; box-shadow:0 0 0 3rem rgba(255,255,255,.025),0 0 0 7rem rgba(255,255,255,.018); }
.auth-visual-content { position:relative; z-index:1; display:flex; flex-direction:column; width:100%; max-width:42rem; min-height:100vh; padding:3rem clamp(2.2rem,7vw,6rem); }
.auth-brand-lockup { display:flex; align-items:center; gap:.85rem; }
.auth-brand-mark { display:flex; align-items:center; justify-content:center; width:3.1rem; height:3.1rem; overflow:hidden; border:1px solid rgba(255,255,255,.5); border-radius:.9rem; background:#f8fafc; box-shadow:0 10px 25px rgba(0,0,0,.16); }
.brand-image { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.auth-brand-lockup h1 { color:#fff; font-family:var(--font-brand); font-size:2rem; font-weight:normal; letter-spacing:.02em; line-height:1; }.auth-brand-lockup p { margin-top:.3rem; color:#c6d8e3; font-size:.78rem; }
/* Blok hero (judul, deskripsi, fitur) berada di tengah vertikal antara logo dan footer;
   semua memakai lebar 34rem agar tepi kanannya sejajar. */
.auth-visual-content h2 { max-width:34rem; margin-top:auto; color:#fff; font-family:var(--font-brand); font-size:clamp(2.35rem,4.3vw,4rem); font-weight:normal; letter-spacing:.01em; line-height:1.12; text-wrap:balance; }.auth-visual-content h2 strong { color:#7dd3fc; font-weight:normal; }
.auth-visual-description { max-width:34rem; margin-top:1.1rem; color:#d7e3ec; font-size:.95rem; line-height:1.7; }
.auth-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; max-width:34rem; margin-top:1.75rem; margin-bottom:auto; }.auth-feature { display:flex; align-items:flex-start; gap:.6rem; min-height:4.1rem; padding:.75rem .7rem; border:1px solid rgba(255,255,255,.13); border-radius:.8rem; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); }.auth-feature > i { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:1.65rem; height:1.65rem; color:#7dd3fc; font-size:.7rem; border-radius:.5rem; background:rgba(56,189,248,.16); }.auth-feature b, .auth-feature span { display:block; }.auth-feature b { color:#f8fafc; font-size:.78rem; }.auth-feature span { margin-top:.2rem; color:#b4c6d3; font-size:.68rem; }
.auth-visual-footer { display:flex; justify-content:space-between; gap:1rem; max-width:34rem; margin-top:2rem; padding-top:1.1rem; color:#a9bfcc; font-size:.72rem; border-top:1px solid rgba(255,255,255,.1); }.auth-visual-footer i { margin-right:.25rem; color:#5eead4; }
.auth-form-panel { display:flex; align-items:center; justify-content:center; min-width:0; padding:2rem clamp(1rem,4vw,4rem); background:#f8fafc; }.auth-form-shell { width:100%; max-width:26rem; }.auth-form-shell .card { width:100%; }
/* Footer ini hanya dipakai di layar kecil; di desktop footer berada di panel hijau */
.auth-mobile-footer { display:none; flex-wrap:wrap; align-items:center; justify-content:center; gap:.3rem .9rem; margin-top:1.15rem; color:#94a3b8; font-size:.72rem; text-align:center; }
.auth-mobile-footer i { margin-right:.3rem; color:#16a34a; }

/* Brand block inside authentication cards */
.auth-card-brand { padding-bottom:1.5rem; margin-bottom:1.5rem; text-align:center; border-bottom:1px solid #f1f5f9; }
.auth-card-brand__mark { display:flex; align-items:center; justify-content:center; width:4.2rem; height:4.2rem; margin:0 auto .75rem; color:#16a34a; font-size:1.8rem; border:6px solid #fff; border-radius:1.15rem; background:#f8fafc; box-shadow:0 8px 18px rgba(15,23,42,.1), inset 0 0 0 1px #e2e8f0; }
.auth-card-brand h1 { color:#0f172a; font-size:1.65rem; font-weight:800; letter-spacing:-.035em; line-height:1.1; }
.auth-card-brand p { margin-top:.3rem; color:#64748b; font-size:.82rem; }

/* Modern public udzur card */
.udzur-card { padding:2rem; border:1px solid rgba(226,232,240,.9); box-shadow:0 24px 70px rgba(2,44,34,.22), 0 2px 8px rgba(15,23,42,.06); }
.udzur-card__header { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.udzur-card__icon { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:3.5rem; height:3.5rem; border-radius:1.1rem; color:#fff; font-size:1.35rem; background:linear-gradient(135deg,#ec4899,#db2777); box-shadow:0 10px 22px rgba(219,39,119,.22); }
.udzur-card__eyebrow { display:block; color:#db2777; font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; margin-bottom:.3rem; }
.udzur-notice { display:flex; align-items:flex-start; gap:.65rem; margin-bottom:1.5rem; padding:.8rem .9rem; color:#9d174d; font-size:.73rem; line-height:1.5; border:1px solid #fbcfe8; border-radius:.8rem; background:#fdf2f8; }
.udzur-notice i { flex:0 0 auto; margin-top:.12rem; color:#ec4899; }
.udzur-field .login-input-wrap input, .udzur-field .login-input-wrap select { appearance:none; width:100%; height:3.15rem; padding:0 3rem 0 2.85rem; color:#0f172a; font-size:.9rem; border:1px solid #dbe4ee; border-radius:.85rem; outline:none; background:#f8fafc; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.udzur-field .login-input-wrap select:focus { border-color:#f472b6; background:#fff; box-shadow:0 0 0 4px rgba(236,72,153,.12); }
.udzur-field .login-input-wrap select:disabled { color:#94a3b8; cursor:not-allowed; background:#f1f5f9; }
.udzur-select-arrow { position:absolute; right:1rem; top:50%; color:#94a3b8; font-size:.75rem; transform:translateY(-50%); pointer-events:none; }
.udzur-submit { display:flex; align-items:center; justify-content:center; gap:.65rem; width:100%; height:3.15rem; color:#fff; font-size:.9rem; font-weight:700; border:0; border-radius:.85rem; cursor:pointer; background:linear-gradient(135deg,#ec4899,#be185d); box-shadow:0 10px 22px rgba(219,39,119,.2); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.udzur-submit:hover { filter:brightness(1.05); box-shadow:0 14px 26px rgba(219,39,119,.28); transform:translateY(-1px); }
.udzur-submit:active { transform:translateY(0); }
.udzur-submit:disabled { cursor:wait; opacity:.8; transform:none; }
.udzur-admin-link { margin-top:1.25rem; padding-top:1rem; border-top:1px solid #f1f5f9; }

/* Modern admin login */
.login-card {
  overflow: hidden;
  padding: 2rem;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 70px rgba(2,44,34,.22), 0 2px 8px rgba(15,23,42,.06);
}
.login-card__header { display:flex; align-items:center; gap:1rem; margin-bottom:1.75rem; }
.login-card__icon {
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:3.5rem; height:3.5rem; border-radius:1.1rem;
  color:#fff; font-size:1.35rem;
  background:linear-gradient(135deg,#16a34a,#047857);
  box-shadow:0 10px 22px rgba(22,163,74,.25);
}
.login-card__eyebrow { display:block; color:#16a34a; font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; margin-bottom:.3rem; }
.login-card__divider { display:flex; align-items:center; gap:.75rem; color:#94a3b8; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.5rem; }
.login-card__divider::before, .login-card__divider::after { content:""; height:1px; flex:1; background:#e2e8f0; }
.login-field label { display:block; color:#334155; font-size:.82rem; font-weight:700; margin:0 0 .5rem .15rem; }
.login-input-wrap { position:relative; }
.login-input-wrap input {
  width:100%; height:3.15rem; padding:0 3rem 0 2.85rem; color:#0f172a; font-size:.9rem;
  border:1px solid #dbe4ee; border-radius:.85rem; outline:none; background:#f8fafc;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.login-input-wrap input::placeholder { color:#94a3b8; }
.login-input-wrap input:focus { border-color:#22c55e; background:#fff; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.login-input-icon { position:absolute; left:1rem; top:50%; z-index:1; color:#94a3b8; transform:translateY(-50%); pointer-events:none; transition:color .2s ease; }
.login-input-wrap:focus-within .login-input-icon { color:#16a34a; }
.login-password-toggle { position:absolute; right:.9rem; top:50%; padding:.35rem; color:#94a3b8; background:transparent; border:0; cursor:pointer; transform:translateY(-50%); transition:color .2s ease; }
.login-password-toggle:hover, .login-password-toggle:focus-visible { color:#15803d; outline:none; }
.login-submit { display:flex; align-items:center; justify-content:center; gap:.65rem; width:100%; height:3.15rem; color:#fff; font-size:.9rem; font-weight:700; border:0; border-radius:.85rem; cursor:pointer; background:linear-gradient(135deg,#16a34a,#047857); box-shadow:0 10px 22px rgba(5,150,105,.22); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.login-submit:hover { filter:brightness(1.06); box-shadow:0 14px 26px rgba(5,150,105,.3); transform:translateY(-1px); }
.login-submit:active { transform:translateY(0); }
.login-submit:disabled { cursor:wait; opacity:.8; transform:none; }
.login-hint { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1rem; padding:.75rem; color:#64748b; font-size:.72rem; border:1px solid #e2e8f0; border-radius:.75rem; background:#f8fafc; }
.login-hint i { color:#16a34a; }
.login-back-link { display:block; margin-top:1.15rem; color:#64748b; font-size:.78rem; text-align:center; cursor:pointer; transition:color .2s ease; }
.login-back-link:hover { color:#15803d; }

/* Modern admin sidebar */
.admin-layout { height:100vh; overflow:hidden; }
.admin-layout > main { height:100vh; min-height:0; overflow:hidden; }
.admin-sidebar { width:16rem; height:100vh; position:sticky; top:0; color:#cbd5e1; background:linear-gradient(180deg,#102a43 0%,#0f2940 58%,#102337 100%); border-right:1px solid rgba(148,163,184,.16); transition:width .25s ease, transform .3s ease; }
.sidebar-brand { display:flex; align-items:center; gap:.75rem; min-height:5rem; padding:1rem 1.1rem; border-bottom:1px solid rgba(226,232,240,.12); }
.sidebar-brand__mark { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:2.7rem; height:2.7rem; color:#fff; font-size:1.1rem; border-radius:.85rem; background:linear-gradient(135deg,#34d399,#0ea5e9); box-shadow:0 8px 20px rgba(14,165,233,.22); }
.sidebar-brand__copy { min-width:0; flex:1; }
.sidebar-brand__copy h1 { color:#fff; font-family:var(--font-brand); font-size:1.55rem; font-weight:normal; letter-spacing:.02em; line-height:1; }
.sidebar-brand__copy p { margin-top:.2rem; color:#8ca5bb; font-size:.68rem; }
.sidebar-collapse-btn, .desktop-sidebar-btn, .mobile-sidebar-btn { align-items:center; justify-content:center; width:2.15rem; height:2.15rem; color:#9fb5c7; border:0; border-radius:.65rem; background:transparent; cursor:pointer; transition:color .2s ease, background .2s ease; }
.sidebar-collapse-btn:hover, .desktop-sidebar-btn:hover, .mobile-sidebar-btn:hover { color:#fff; background:rgba(255,255,255,.1); }
.sidebar-nav { flex:1; padding:.9rem .75rem; overflow-y:auto; }
.sidebar-section-label { padding:0 .75rem .6rem; color:#7893aa; font-size:.63rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.nav-item { position:relative; display:flex; align-items:center; gap:.8rem; width:100%; min-height:2.75rem; padding:.65rem .75rem; color:#a9bdcd; font-size:.82rem; text-align:left; border:0; border-radius:.75rem; background:transparent; cursor:pointer; transition:color .2s ease, background .2s ease, transform .2s ease; }
.nav-item i { flex:0 0 auto; width:1.35rem; color:#7f9caf; font-size:.93rem; text-align:center; transition:color .2s ease; }
.nav-item:hover { color:#fff; background:rgba(255,255,255,.08); transform:translateX(2px); }
.nav-item.active { color:#fff; font-weight:700; background:linear-gradient(90deg,rgba(52,211,153,.23),rgba(14,165,233,.13)); box-shadow:inset 3px 0 0 #34d399; }
.nav-item.active i { color:#5eead4; }
.nav-tone-dashboard i { color:#60a5fa; }.nav-tone-absensi i { color:#34d399; }.nav-tone-rekap i { color:#fbbf24; }.nav-tone-leaderboard i { color:#fb7185; }.nav-tone-siswa i { color:#a78bfa; }.nav-tone-kelas i { color:#22d3ee; }.nav-tone-jenissholat i { color:#f59e0b; }.nav-tone-pengaturan i { color:#94a3b8; }
.sidebar-account { padding:.85rem .75rem 1rem; border-top:1px solid rgba(226,232,240,.12); }
.sidebar-account__card { display:flex; align-items:center; gap:.65rem; min-width:0; padding:.65rem .6rem; border:1px solid rgba(255,255,255,.08); border-radius:.8rem; background:rgba(255,255,255,.06); }
.sidebar-account__avatar { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:2.2rem; height:2.2rem; color:#064e3b; font-size:.8rem; font-weight:800; border-radius:.7rem; background:linear-gradient(135deg,#a7f3d0,#67e8f9); }
.sidebar-account__info { min-width:0; flex:1; }.sidebar-account__info p { overflow:hidden; color:#f8fafc; font-size:.74rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.sidebar-account__info span { display:block; margin-top:.12rem; color:#88a2b7; font-size:.65rem; text-transform:capitalize; }
.sidebar-logout { flex:0 0 auto; padding:.35rem; color:#8ca5b8; border:0; background:transparent; cursor:pointer; transition:color .2s ease; }.sidebar-logout:hover { color:#fb7185; }
.admin-topbar { box-shadow:0 1px 0 rgba(15,23,42,.02); }.desktop-sidebar-btn { color:#64748b; background:#f8fafc; }.desktop-sidebar-btn:hover { color:#0f766e; background:#ecfdf5; }
.admin-sidebar.collapsed { width:4.7rem; }
.admin-sidebar.collapsed .sidebar-brand { justify-content:center; padding-left:.75rem; padding-right:.75rem; }
.admin-sidebar.collapsed .sidebar-brand__copy, .admin-sidebar.collapsed .sidebar-section-label, .admin-sidebar.collapsed .nav-label, .admin-sidebar.collapsed .sidebar-account__info { display:none; }
.admin-sidebar.collapsed .sidebar-brand__mark { width:2.7rem; }
.admin-sidebar.collapsed .sidebar-collapse-btn { display:inline-flex; margin-left:0; }
.admin-sidebar.collapsed .sidebar-nav { padding-left:.75rem; padding-right:.75rem; }
.admin-sidebar.collapsed .nav-item { justify-content:center; padding-left:.5rem; padding-right:.5rem; }
.admin-sidebar.collapsed .nav-item i { width:auto; font-size:1rem; }
.admin-sidebar.collapsed .sidebar-account__card { justify-content:center; padding:.6rem .35rem; }.admin-sidebar.collapsed .sidebar-logout { display:none; }

/* Sidebar active */

/* Scrollbar */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#94a3b8; }

/* Toast animation */
@keyframes slideIn { from { transform:translateX(120%); opacity:0; } to { transform:translateX(0); opacity:1; } }
.toast { animation: slideIn .3s ease; }

/* Fade in */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px);} to {opacity:1; transform:translateY(0);} }
.fade-in { animation: fadeIn .3s ease; }

/* Status pill buttons */
.status-btn { transition: all .15s ease; border:2px solid transparent; }
.status-btn:active { transform: scale(.96); }
.status-btn--batal { color:#64748b; background:#fff; border-color:#e2e8f0; border-style:dashed; }
.status-btn--batal:hover:not(:disabled) { color:#e11d48; background:#fff1f2; border-color:#fecdd3; }
.logout-dialog { text-align:center; }
.logout-dialog__icon { display:flex; align-items:center; justify-content:center; width:3.5rem; height:3.5rem; margin:0 auto; color:#e11d48; font-size:1.35rem; border-radius:1.1rem; background:#fff1f2; box-shadow:0 8px 20px rgba(225,29,72,.12); }
.logout-dialog__cancel, .logout-dialog__confirm { min-height:2.9rem; transition:background .18s ease, transform .18s ease, opacity .18s ease; }
.logout-dialog__cancel:active, .logout-dialog__confirm:active { transform:scale(.97); }
.logout-dialog__confirm { border:0; background:linear-gradient(135deg,#e11d48,#be123c); box-shadow:0 8px 18px rgba(225,29,72,.2); }
.logout-dialog__confirm:hover:not(:disabled) { background:linear-gradient(135deg,#be123c,#9f1239); }
.logout-dialog__confirm:disabled { cursor:wait; opacity:.7; }

/* Konfirmasi laporan udzur (halaman publik) */
.udzur-confirm { text-align:center; }
.udzur-confirm__icon { display:flex; align-items:center; justify-content:center; width:3.5rem; height:3.5rem; margin:0 auto; color:#fff; font-size:1.3rem; border-radius:1.1rem; background:linear-gradient(135deg,#ec4899,#db2777); box-shadow:0 8px 20px rgba(219,39,119,.22); }
.udzur-confirm h3 { margin-top:1rem; color:#0f172a; font-size:1.3rem; font-weight:800; letter-spacing:-.01em; }
.udzur-confirm > p { margin-top:.4rem; color:#64748b; font-size:.85rem; line-height:1.55; }
.udzur-confirm__data { display:grid; gap:.1rem; margin-top:1.15rem; overflow:hidden; text-align:left; border:1px solid #fbcfe8; border-radius:.9rem; background:#fdf2f8; }
.udzur-confirm__data > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem .9rem; border-bottom:1px solid rgba(251,207,232,.7); }
.udzur-confirm__data > div:last-child { border-bottom:0; }
.udzur-confirm__data span { flex:0 0 auto; color:#9d174d; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.udzur-confirm__data b { min-width:0; color:#0f172a; font-size:.88rem; font-weight:700; text-align:right; }
.udzur-confirm__note { display:grid; gap:.5rem; margin-top:1rem; padding:0; text-align:left; list-style:none; }
.udzur-confirm__note li { display:flex; align-items:flex-start; gap:.5rem; color:#64748b; font-size:.76rem; line-height:1.5; }
.udzur-confirm__note i { flex:0 0 auto; margin-top:.15rem; }
.udzur-confirm__note li:first-child i { color:#0ea5e9; }
.udzur-confirm__note li:last-child i { color:#f59e0b; }
.udzur-confirm__note b { color:#334155; }
.udzur-confirm__actions { display:flex; gap:.6rem; margin-top:1.4rem; }
.udzur-confirm__cancel, .udzur-confirm__ok { flex:1; min-height:2.95rem; font-size:.9rem; font-weight:700; border-radius:.85rem; cursor:pointer; transition:background .18s ease, transform .18s ease, opacity .18s ease; }
.udzur-confirm__cancel { color:#475569; border:1px solid #cbd5e1; background:#fff; }
.udzur-confirm__cancel:hover:not(:disabled) { background:#f8fafc; }
.udzur-confirm__ok { color:#fff; border:0; background:linear-gradient(135deg,#ec4899,#be185d); box-shadow:0 8px 18px rgba(219,39,119,.22); }
.udzur-confirm__ok:hover:not(:disabled) { background:linear-gradient(135deg,#db2777,#9d174d); }
.udzur-confirm__cancel:active, .udzur-confirm__ok:active { transform:scale(.97); }
.udzur-confirm__cancel:disabled { opacity:.5; cursor:not-allowed; }
.udzur-confirm__ok:disabled { cursor:wait; opacity:.75; }

/* Loading spinner */
.spinner { border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; width:20px; height:20px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Table hover */
tbody tr:hover { background:#f8fafc; }

/* ===== Bottom navigation (mobile) ===== */
.bottom-nav { display:none; }

@media (max-width: 768px) {
  /* Di HP navigasi memakai bottom bar, sidebar geser tidak dipakai lagi */
  #sidebar, #sidebar-overlay, .mobile-sidebar-btn { display:none !important; }

  .bottom-nav {
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; align-items:stretch; gap:.15rem;
    padding:.4rem .4rem calc(.4rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
    border-top:1px solid #e2e8f0; box-shadow:0 -6px 20px rgba(15,23,42,.07);
  }
  .bottom-nav__item {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
    flex:1 1 0; min-width:0; min-height:3.4rem; padding:.4rem .15rem;
    color:#7c8da3; font-size:.63rem; font-weight:600; line-height:1.1;
    border:0; border-radius:.75rem; background:transparent; cursor:pointer;
    transition:color .18s ease, background .18s ease;
  }
  .bottom-nav__item i { font-size:1.08rem; }
  .bottom-nav__item span { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; }
  .bottom-nav__item:active { transform:scale(.95); }
  .bottom-nav__item.active { color:#15803d; background:#ecfdf5; }
  .bottom-nav__item.active i { color:#16a34a; }

  .admin-layout, .admin-layout > main { height:auto; min-height:100vh; overflow:visible; }
}

/* ===== Bottom sheet menu "Lainnya" ===== */
.sheet-overlay { position:fixed; inset:0; z-index:95; display:flex; align-items:flex-end; background:rgba(2,6,23,.5); animation:fadeIn .2s ease; }
.sheet { width:100%; padding:.75rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom)); background:#fff; border-radius:1.4rem 1.4rem 0 0; box-shadow:0 -10px 40px rgba(15,23,42,.2); animation:sheetUp .25s ease; }
@keyframes sheetUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
.sheet__handle { display:block; width:2.75rem; height:.28rem; margin:0 auto 1rem; border-radius:999px; background:#cbd5e1; }
.sheet__account { display:flex; align-items:center; gap:.7rem; padding-bottom:.9rem; margin-bottom:.9rem; border-bottom:1px solid #f1f5f9; }
.sheet__avatar { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:2.5rem; height:2.5rem; color:#064e3b; font-size:.9rem; font-weight:800; border-radius:.8rem; background:linear-gradient(135deg,#a7f3d0,#67e8f9); }
.sheet__info { min-width:0; }
.sheet__info p { overflow:hidden; color:#0f172a; font-size:.88rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.sheet__info span { display:block; margin-top:.1rem; color:#64748b; font-size:.72rem; text-transform:capitalize; }
.sheet__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.sheet__item { display:flex; align-items:center; gap:.65rem; min-height:3.1rem; padding:.7rem .8rem; color:#334155; font-size:.82rem; font-weight:600; text-align:left; border:1px solid #e9eef5; border-radius:.9rem; background:#f8fafc; cursor:pointer; transition:background .18s ease, border-color .18s ease; }
.sheet__item i { flex:0 0 auto; width:1.3rem; font-size:.95rem; text-align:center; }
.sheet__item:active { background:#eef2f7; border-color:#cbd5e1; }
.sheet__logout { display:flex; align-items:center; justify-content:center; gap:.55rem; width:100%; min-height:3rem; margin-top:.9rem; color:#e11d48; font-size:.85rem; font-weight:700; border:1px solid #fecdd3; border-radius:.9rem; background:#fff1f2; cursor:pointer; }
.sheet__logout:active { background:#ffe4e6; }

/* ===== Rekap & Laporan ===== */
.rekap-note { display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1rem; padding:.8rem 1rem; color:#92400e; font-size:.85rem; line-height:1.55; border:1px solid #fde68a; border-radius:.9rem; background:#fffbeb; }
.rekap-note i { flex:0 0 auto; margin-top:.2rem; color:#f59e0b; }
.rk-card { border:1px solid #eef2f6; }
.rk-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; padding:.8rem 1.1rem; border-bottom:1px solid #eef2f6; background:linear-gradient(90deg,#f0fdf4,#fff); }
.rk-head h3 { display:flex; align-items:center; gap:.6rem; color:#14532d; font-size:.95rem; font-weight:800; }
.rk-head__icon { display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; color:#16a34a; font-size:.8rem; border-radius:.65rem; background:#dcfce7; }
.rk-head__meta { display:flex; gap:.4rem; }
.rk-chip { padding:.22rem .6rem; color:#475569; font-size:.72rem; font-weight:600; border-radius:999px; background:#f1f5f9; }
.rk-chip--good { color:#047857; background:#d1fae5; } .rk-chip--mid { color:#b45309; background:#fef3c7; } .rk-chip--low { color:#be123c; background:#ffe4e6; }

.rekap-table { table-layout:fixed; border-collapse:collapse; }
.rk-col-no { width:3.25rem; } .rk-col-n { width:7.5rem; } .rk-col-p { width:9rem; }
.rekap-table thead th { padding:.7rem .75rem; color:#64748b; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-align:center; text-transform:uppercase; background:#f8fafc; border-bottom:1px solid #eef2f6; }
.rekap-table thead th.text-left { text-align:left; }
.rekap-table tbody td { padding:.7rem .75rem; text-align:center; vertical-align:middle; border-bottom:1px solid #f1f5f9; }
.rekap-table tbody tr:last-child td { border-bottom:0; }
.rekap-table tbody tr:nth-child(even) { background:#fcfdfe; }
.rekap-table tbody tr:hover { background:#f6fef9; }
.rekap-table .rk-no { color:#94a3b8; font-size:.78rem; font-weight:600; }
.rekap-table .rk-nama { text-align:left; }
.rk-nama__text { display:block; overflow:hidden; color:#1e293b; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.rk-nis { display:block; margin-top:.05rem; color:#94a3b8; font-size:.72rem; }
.rk-num { font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums; }
.rk-zero { color:#cbd5e1; font-weight:500; }
.rekap-persen { display:inline-block; min-width:3.4rem; padding:.2rem .55rem; font-size:.82rem; font-weight:800; font-variant-numeric:tabular-nums; border-radius:999px; background:#f1f5f9; color:#64748b; }
.rekap-persen.rk-good { color:#047857; background:#d1fae5; } .rekap-persen.rk-mid { color:#b45309; background:#fef3c7; } .rekap-persen.rk-low { color:#be123c; background:#ffe4e6; }
.rk-bar { display:block; width:4.5rem; height:.25rem; margin:.35rem auto 0; overflow:hidden; border-radius:999px; background:#eef2f6; }
.rk-bar > span { display:block; height:100%; border-radius:inherit; }
.rk-bar > .rk-good { background:#10b981; } .rk-bar > .rk-mid { background:#f59e0b; } .rk-bar > .rk-low { background:#f43f5e; }

/* ===== Peringkat modern ===== */
.rank-hero { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.3rem; color:#fff; border:0; background:linear-gradient(120deg,#15803d,#059669); box-shadow:0 10px 25px rgba(5,150,105,.16); }
.rank-hero__copy { display:flex; align-items:center; gap:.9rem; min-width:0; }
.rank-hero__icon { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:2.8rem; height:2.8rem; color:#fef3c7; font-size:1.15rem; border:1px solid rgba(255,255,255,.2); border-radius:.9rem; background:rgba(255,255,255,.13); }
.rank-hero h3 { font-size:1.08rem; font-weight:800; }.rank-hero p { margin-top:.15rem; color:#d1fae5; font-size:.78rem; }
.rank-scoring { display:flex; flex:0 0 auto; gap:.45rem; }.rank-scoring span { padding:.35rem .65rem; color:#d1fae5; font-size:.7rem; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(255,255,255,.1); }.rank-scoring b { color:#fff; }
.rank-filter { display:flex; align-items:center; gap:1rem; }
.rank-presets { display:flex; gap:.25rem; padding:.25rem; border-radius:.85rem; background:#f1f5f9; }
.rank-presets button { min-height:2.2rem; padding:.4rem .85rem; color:#64748b; font-size:.78rem; font-weight:700; border:0; border-radius:.65rem; background:transparent; cursor:pointer; transition:all .18s ease; }
.rank-presets button:hover { color:#15803d; }.rank-presets button.active { color:#15803d; background:#fff; box-shadow:0 1px 4px rgba(15,23,42,.1); }
.rank-custom { display:flex; align-items:flex-end; gap:.55rem; margin-left:auto; }.rank-custom > div { display:grid; gap:.15rem; }.rank-custom label { color:#64748b; font-size:.65rem; font-weight:700; text-transform:uppercase; }.rank-custom input { min-height:2.2rem; padding:.35rem .55rem; color:#334155; font-size:.78rem; border:1px solid #dbe3ec; border-radius:.65rem; outline:none; }.rank-custom input:focus { border-color:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.1); }.rank-custom__arrow { align-self:center; margin-top:.9rem; color:#94a3b8; }.rank-custom > button { min-height:2.2rem; padding:.4rem .8rem; color:#fff; font-size:.75rem; font-weight:700; border:0; border-radius:.65rem; background:#16a34a; cursor:pointer; }
.rank-summary { display:flex; align-items:center; justify-content:center; gap:1.25rem; margin:.1rem 0 .75rem; color:#64748b; font-size:.75rem; }.rank-summary i { margin-right:.35rem; color:#16a34a; }
.rank-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:.85rem; max-width:52rem; margin:0 auto 1.2rem; padding-top:1rem; }
.podium-card { position:relative; min-width:0; padding:1.1rem .8rem; text-align:center; border:1px solid #e9eef5; border-radius:1.25rem; background:#fff; box-shadow:0 5px 16px rgba(15,23,42,.06); }
.podium-card--1 { order:2; padding-top:1.35rem; border-color:#fde68a; background:linear-gradient(180deg,#fffbeb,#fff 48%); box-shadow:0 10px 28px rgba(245,158,11,.14); transform:translateY(-.7rem); }.podium-card--2 { order:1; background:linear-gradient(180deg,#f8fafc,#fff 48%); }.podium-card--3 { order:3; border-color:#fed7aa; background:linear-gradient(180deg,#fff7ed,#fff 48%); }
.podium-medal { position:absolute; top:.65rem; right:.7rem; display:flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:800; }.podium-card--1 .podium-medal { color:#d97706; }.podium-card--2 .podium-medal { color:#64748b; }.podium-card--3 .podium-medal { color:#c2410c; }
.rank-avatar { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:2.65rem; height:2.65rem; color:#166534; font-size:.78rem; font-weight:800; border-radius:999px; background:linear-gradient(135deg,#dcfce7,#a7f3d0); box-shadow:inset 0 0 0 2px rgba(255,255,255,.8); }.podium-card .rank-avatar { width:3.5rem; height:3.5rem; margin:0 auto .65rem; font-size:1rem; }.podium-card--1 .rank-avatar { width:4.15rem; height:4.15rem; color:#92400e; background:linear-gradient(135deg,#fef3c7,#fcd34d); }
.podium-card h4 { overflow:hidden; color:#1e293b; font-size:.9rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.podium-card > p { margin-top:.1rem; color:#94a3b8; font-size:.7rem; }.podium-card > strong { display:block; margin-top:.65rem; color:#15803d; font-size:1.55rem; line-height:1; }.podium-card--1 > strong { color:#d97706; font-size:1.8rem; }.podium-card > strong small { color:#94a3b8; font-size:.65rem; font-weight:600; }
.podium-progress { display:block; width:70%; height:.28rem; margin:.55rem auto 0; overflow:hidden; border-radius:999px; background:#eef2f6; }.podium-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#34d399,#16a34a); }.podium-card--1 .podium-progress > span { background:linear-gradient(90deg,#fcd34d,#f59e0b); }
.podium-detail { display:flex; justify-content:center; gap:.45rem; margin-top:.65rem; color:#64748b; font-size:.62rem; }.podium-detail span { white-space:nowrap; }.podium-detail i { margin-right:.18rem; }.rank-detail__jamaah i { color:#10b981; }.rank-detail__munfarid i { color:#3b82f6; }
.rank-list__head { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid #eef2f6; background:#f8fafc; }.rank-list__head h4 { color:#334155; font-size:.82rem; font-weight:800; }.rank-list__head span { color:#94a3b8; font-size:.7rem; }
.rank-row { display:grid; grid-template-columns:2rem 2.65rem minmax(9rem,1fr) minmax(12rem,1.15fr) 3.5rem; align-items:center; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid #f1f5f9; transition:background .15s ease; }.rank-row:last-child { border-bottom:0; }.rank-row:hover { background:#f8fdf9; }
.rank-number { color:#94a3b8; font-size:.8rem; font-weight:800; text-align:center; }.rank-person { min-width:0; }.rank-person h4 { overflow:hidden; color:#334155; font-size:.84rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.rank-person p { margin-top:.08rem; color:#94a3b8; font-size:.68rem; }.rank-detail { display:flex; justify-content:flex-end; gap:.8rem; color:#64748b; font-size:.68rem; }.rank-progress { display:block; height:.3rem; margin-top:.4rem; overflow:hidden; border-radius:999px; background:#eef2f6; }.rank-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#34d399,#16a34a); }.rank-points { text-align:right; }.rank-points strong { display:block; color:#16a34a; font-size:1.05rem; font-weight:900; font-variant-numeric:tabular-nums; }.rank-points span { display:block; color:#94a3b8; font-size:.62rem; }.rank-mobile-detail { display:none; }

/* ===== Backup Google Drive ===== */
.nav-tone-backup i { color:#34d399; }
.bk-btn { display:inline-flex; align-items:center; gap:.5rem; min-height:2.5rem; padding:.55rem 1rem; color:#334155; font-size:.85rem; font-weight:600; border:1px solid #e2e8f0; border-radius:.8rem; background:#f8fafc; cursor:pointer; transition:background .18s ease, border-color .18s ease; }
.bk-btn:hover:not(:disabled) { background:#ecfdf5; border-color:#bbf7d0; color:#15803d; }
.bk-btn:disabled { opacity:.45; cursor:not-allowed; }
.bk-btn i { color:#16a34a; }
.bk-btn--link { text-decoration:none; }
.backup-code { max-height:18rem; overflow:auto; margin:0; padding:1rem; color:#cbd5e1; font:12px/1.6 Consolas, 'Courier New', monospace; white-space:pre; border-radius:.9rem; background:#0f172a; }
.backup-code:focus { outline:2px solid #22c55e; outline-offset:2px; }
.backup-tree { margin:0; padding:.85rem 1rem; color:#cbd5e1; font:12px/1.7 Consolas, 'Courier New', monospace; white-space:pre; overflow-x:auto; border-radius:.8rem; background:#0f172a; }
.backup-steps { counter-reset:step; display:grid; gap:.55rem; margin:0; padding:0; list-style:none; }
.backup-steps li { counter-increment:step; position:relative; padding-left:2rem; color:#475569; font-size:.85rem; line-height:1.45; }
.backup-steps li::before { content:counter(step); position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; width:1.4rem; height:1.4rem; color:#15803d; font-size:.7rem; font-weight:800; border-radius:999px; background:#dcfce7; }
.backup-steps b { color:#0f172a; }

/* ==========================================================
   MOBILE NATIVE UI (≤768px)
   Seluruh aturan di bawah hanya berlaku di HP/tablet kecil.
   Tampilan desktop tidak terpengaruh.
   ========================================================== */

/* Elemen khusus mobile disembunyikan di desktop */
.topbar-mark, .topbar-date, .topbar-avatar, .absen-avatar, .absen-progress { display:none; }

@keyframes fadeOnly { from { opacity:0; } to { opacity:1; } }

@media (max-width: 768px) {
  body { background:#f3f5f8; overscroll-behavior-y:none; }

  /* --- App bar atas --- */
  .admin-topbar {
    gap:.7rem !important; padding:.6rem 1rem !important;
    padding-top:calc(.6rem + env(safe-area-inset-top)) !important;
    background:rgba(255,255,255,.9) !important; backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid #eceff4 !important;
  }
  .topbar-mark { display:flex; flex:0 0 auto; width:2.3rem; height:2.3rem; overflow:hidden; border-radius:.75rem; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.08), inset 0 0 0 1px #e2e8f0; }
  .topbar-titles { flex:1; min-width:0; }
  #page-title { overflow:hidden; font-size:1.06rem !important; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-date { display:block; margin-top:.08rem; color:#64748b; font-size:.72rem; }
  .topbar-date-desktop { display:none !important; }
  .topbar-avatar {
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    width:2.35rem; height:2.35rem; color:#064e3b; font-size:.9rem; font-weight:800;
    border:0; border-radius:999px; cursor:pointer;
    background:linear-gradient(135deg,#a7f3d0,#67e8f9); box-shadow:0 2px 8px rgba(14,165,233,.22);
  }
  .topbar-avatar:active { transform:scale(.94); }

  /* --- Area konten --- */
  #page-content { padding:1rem .9rem 6rem !important; overflow:visible !important; }
  #page-content:has(.fab-add) { padding-bottom:9.5rem !important; }
  #page-content:has(.save-fab) { padding-bottom:10.5rem !important; }
  #page-content .fade-in { animation-name:fadeOnly; } /* hindari transform agar elemen fixed stabil */
  #page-content .space-y-5 > * + *, #page-content .space-y-6 > * + * { margin-top:1rem !important; }
  #page-content .card { border-radius:1.15rem; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.045); }
  #page-content .card.p-5, #page-content .card.p-6 { padding:1.1rem !important; }

  /* Input 16px agar iOS tidak auto-zoom; target sentuh nyaman */
  #page-content input:not([type=checkbox]):not([type=radio]),
  #page-content select, #page-content textarea,
  .modal-panel input:not([type=checkbox]):not([type=radio]),
  .modal-panel select, .modal-panel textarea { font-size:16px !important; }
  #page-content input:not([type=checkbox]):not([type=radio]), #page-content select,
  .modal-panel form > div > input, .modal-panel form > div > select,
  .modal-panel form .grid > div > input, .modal-panel form .grid > div > select { min-height:2.85rem; border-radius:.85rem !important; }
  #page-content input[type=checkbox] { width:1.15rem !important; height:1.15rem !important; }

  /* --- Dashboard --- */
  #page-content > .fade-in > .grid.grid-cols-2 { gap:.7rem !important; }
  #page-content > .fade-in > .grid.grid-cols-2 > .card { padding:.9rem !important; }
  #page-content > .fade-in > .grid.grid-cols-2 > .card .text-2xl { font-size:1.45rem; }
  .chart-box { height:12.5rem !important; }
  .waktu-grid {
    display:flex !important; gap:.6rem !important; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -1.1rem; padding:0 1.1rem .2rem; scrollbar-width:none;
  }
  .waktu-grid::-webkit-scrollbar { display:none; }
  .waktu-card { flex:0 0 8.75rem; padding:.85rem !important; background:#f8fafc; scroll-snap-align:start; }

  /* --- Input Absensi --- */
  .absen-filter { grid-template-columns:1fr 1fr !important; gap:.75rem !important; }
  .absen-waktu { grid-column:1 / -1; }
  .waktu-seg { flex-wrap:nowrap !important; gap:.4rem !important; overflow-x:auto; margin:0 -1rem; padding:0 1rem .15rem; scrollbar-width:none; }
  .waktu-seg::-webkit-scrollbar { display:none; }
  .waktu-seg .waktu-btn { flex:0 0 auto !important; min-width:5rem !important; min-height:2.6rem; border-radius:999px !important; }
  .quick-row { flex-wrap:nowrap !important; overflow-x:auto; margin:0 -.9rem; padding:0 .9rem .1rem; scrollbar-width:none; }
  .quick-row::-webkit-scrollbar { display:none; }
  .quick-row > * { flex:0 0 auto; }
  .quick-row > button:not(.save-fab) { min-height:2.3rem; border-radius:999px !important; }
  .save-fab {
    position:fixed !important; left:.9rem; right:.9rem; z-index:55;
    bottom:calc(4.9rem + env(safe-area-inset-bottom));
    justify-content:center; min-height:3.2rem; margin:0 !important;
    font-size:.95rem !important; border-radius:1rem !important;
    box-shadow:0 10px 24px rgba(22,163,74,.35);
  }
  .absen-summary { flex-wrap:wrap; }
  .absen-progress { display:block; width:100%; height:.35rem; margin-top:.55rem; overflow:hidden; border-radius:999px; background:#e2e8f0; }
  .absen-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#22c55e,#16a34a); transition:width .3s ease; }
  .absen-row { display:block !important; padding:.85rem 1rem !important; }
  .absen-who { display:flex; align-items:center; gap:.7rem; min-width:0 !important; }
  .absen-avatar { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:2.3rem; height:2.3rem; color:#475569; font-size:.85rem; font-weight:700; border-radius:999px; }
  .absen-avatar:not([class*="bg-"]) { background:#eef2f7; }
  .absen-status { display:grid !important; grid-template-columns:repeat(4,1fr) 2.55rem; gap:.35rem !important; margin-top:.65rem; }
  .absen-status .status-btn { min-height:2.55rem; padding:.4rem .15rem !important; font-size:.7rem !important; border-radius:.75rem !important; }
  /* Di HP tombol Batal cukup ikon agar 4 status tetap lega */
  .absen-status .status-btn--batal { font-size:0 !important; }
  .absen-status .status-btn--batal i { margin:0 !important; font-size:.85rem; }

  /* --- Rekap: tabel menjadi kartu per siswa --- */
  .rekap-filter { grid-template-columns:1fr 1fr !important; }
  .rekap-filter > div:nth-child(3), .rekap-filter > div:nth-child(4) { grid-column:1 / -1; }
  .rekap-filter button { min-height:2.85rem; border-radius:.85rem !important; }
  .export-row { display:grid !important; grid-template-columns:repeat(3,1fr); }
  .export-row > span { grid-column:1 / -1; }
  .export-row button { justify-content:center; min-height:2.6rem; border-radius:.8rem !important; }
  .rekap-table thead, .rekap-table colgroup, .rekap-table .rk-no, .rk-bar { display:none; }
  .rekap-table, .rekap-table tbody { display:block; width:100%; }
  .rekap-table tr { display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; padding:.85rem 1rem; border-bottom:1px solid #f1f5f9; }
  .rekap-table tbody tr:nth-child(even) { background:transparent; }
  .rekap-table td { padding:0 !important; border:0 !important; }
  .rekap-table td.rk-nama { grid-column:1 / span 3; grid-row:1; align-self:center; font-size:.9rem; }
  .rekap-table td.rk-persen-cell { grid-column:4; grid-row:1; align-self:center; text-align:right !important; }
  .rk-head { padding:.75rem 1rem; }
  .rekap-table td[data-label] { display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.45rem .2rem !important; font-size:.95rem; border-radius:.7rem; background:#f8fafc; }
  .rekap-table td[data-label]::before { content:attr(data-label); color:#94a3b8; font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
  .rekap-persen { display:inline-block; padding:.2rem .55rem; font-size:.85rem; border-radius:999px; background:#f1f5f9; }

  /* --- Data Siswa: tabel menjadi daftar --- */
  .siswa-toolbar { display:grid !important; grid-template-columns:1fr auto; gap:.6rem !important; }
  .siswa-search { grid-column:1 / -1; min-width:0 !important; }
  .siswa-toolbar select { width:100%; }
  .siswa-toolbar > button:not(.fab-add) { min-height:2.85rem; border-radius:.85rem !important; }
  .siswa-table, .siswa-table thead, .siswa-table tbody { display:block; width:100%; }
  .siswa-table thead tr { display:flex; align-items:center; }
  .siswa-table thead th { display:none; }
  .siswa-table thead th.sw-cb { display:flex; align-items:center; gap:.55rem; width:auto !important; padding:.55rem 1rem !important; color:#64748b; font-size:.75rem; font-weight:600; letter-spacing:0; text-transform:none; }
  .siswa-table thead th.sw-cb::after { content:"Pilih semua"; }
  .siswa-table tbody tr { display:grid; grid-template-columns:1.25rem auto 1fr auto; align-items:center; column-gap:.75rem; row-gap:.15rem; padding:.8rem 1rem; }
  .siswa-table tbody td { width:auto !important; padding:0 !important; }
  .siswa-table .sw-cb { grid-column:1; grid-row:1 / 3; }
  .siswa-table .sw-no { display:none; }
  .siswa-table .sw-nama { grid-column:2 / 4; grid-row:1; font-size:.92rem; }
  .siswa-table .sw-nis { grid-column:2; grid-row:2; font-size:.74rem; }
  .siswa-table .sw-nis::before { content:"NIS "; color:#94a3b8; }
  .siswa-table .sw-jk { grid-column:3; grid-row:2; font-size:.74rem; }
  .siswa-table .sw-aksi { display:flex; grid-column:4; grid-row:1 / 3; gap:.3rem; }
  .siswa-table .sw-aksi button { display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; padding:0 !important; border-radius:.75rem; background:#f8fafc; }

  /* --- Data Kelas --- */
  .kelas-toolbar { display:grid !important; grid-template-columns:1fr 1fr; }
  .kelas-toolbar > button:not(.fab-add) { min-height:2.75rem; border-radius:.85rem !important; }
  #kelas-list .grid { gap:.75rem !important; }
  .kelas-card { padding:1rem !important; }
  .kelas-card h3 { margin-top:.55rem !important; }

  /* --- Tombol aksi melayang (FAB) --- */
  .fab-add {
    position:fixed !important; right:1rem; z-index:55;
    bottom:calc(5rem + env(safe-area-inset-bottom));
    display:inline-flex !important; align-items:center; gap:.45rem;
    min-height:3.3rem; padding:0 1.25rem !important;
    font-size:.92rem !important; border-radius:1.1rem !important;
    box-shadow:0 12px 28px rgba(22,163,74,.38);
  }
  .fab-add i { margin:0 !important; font-size:1rem; }
  .fab-add:active, .save-fab:active { transform:scale(.97); }

  /* --- Peringkat --- */
  .rank-hero { display:block; padding:1rem !important; border-radius:1.15rem !important; }
  .rank-hero__icon { width:2.5rem; height:2.5rem; }
  .rank-hero h3 { font-size:1rem; }.rank-hero p { font-size:.72rem; line-height:1.45; }
  .rank-scoring { margin-top:.75rem; }.rank-scoring span { flex:1; text-align:center; }
  .rank-filter { display:block; padding:.45rem !important; }
  .rank-presets { display:grid; grid-template-columns:repeat(4,1fr); width:100%; }
  .rank-presets button { min-width:0; padding:.45rem .25rem; font-size:.7rem; }
  .rank-custom { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin:.65rem .25rem .25rem; }
  .rank-custom__arrow { display:none; }.rank-custom > button { grid-column:1 / -1; min-height:2.6rem; }
  .rank-summary { justify-content:space-between; gap:.5rem; padding:0 .15rem; font-size:.67rem; }
  .rank-podium { gap:.4rem; margin-bottom:.7rem; padding-top:.85rem; }
  .podium-card { padding:.85rem .35rem; border-radius:1rem; }
  .podium-card--1 { padding-top:1rem; transform:translateY(-.45rem); }
  .podium-card .rank-avatar { width:2.75rem; height:2.75rem; font-size:.78rem; }
  .podium-card--1 .rank-avatar { width:3.2rem; height:3.2rem; }
  .podium-card h4 { padding:0 .15rem; font-size:.72rem; }.podium-card > p { font-size:.62rem; }
  .podium-card > strong, .podium-card--1 > strong { margin-top:.45rem; font-size:1.25rem; }
  .podium-medal { top:.45rem; right:.45rem; font-size:.58rem; }
  .podium-detail { display:grid; gap:.15rem; font-size:.56rem; }
  .rank-row { grid-template-columns:1.35rem 2.4rem minmax(0,1fr) 2.9rem; gap:.55rem; padding:.7rem .8rem; }
  .rank-avatar { width:2.4rem; height:2.4rem; font-size:.7rem; }
  .rank-number { font-size:.72rem; }.rank-person h4 { font-size:.8rem; }
  .rank-metrics { display:none; }.rank-mobile-detail { display:flex; gap:.55rem; margin-top:.25rem; color:#64748b; font-size:.58rem; }
  .rank-mobile-detail i { margin-right:.15rem; }.rank-points strong { font-size:.95rem; }

  /* --- Modal menjadi bottom sheet --- */
  .modal-overlay { align-items:flex-end !important; padding:0 !important; }
  .modal-panel {
    position:relative; max-width:none !important; max-height:92vh !important;
    padding-bottom:env(safe-area-inset-bottom);
    border-radius:1.4rem 1.4rem 0 0 !important; animation:sheetUp .25s ease !important;
  }
  .modal-panel::before { content:""; display:block; width:2.75rem; height:.28rem; margin:.65rem auto 0; border-radius:999px; background:#cbd5e1; }
  .modal-panel > .p-6 { padding:1rem 1.15rem 1.6rem !important; }
  .modal-panel form button { min-height:3rem; border-radius:.9rem !important; }

  /* --- Backup Drive --- */
  .backup-intro h3 { font-size:1.15rem; }
  .backup-stats { grid-template-columns:1fr 1fr !important; }
  .backup-stats > div:first-child { grid-column:1 / -1; }
  .backup-actions { display:grid !important; grid-template-columns:1fr 1fr; }
  .backup-actions .bk-btn { justify-content:center; min-height:2.9rem; padding:.55rem .6rem; font-size:.8rem; text-align:center; }
  .backup-code { max-height:11rem; font-size:11px; }
  #bk-url { min-height:2.9rem; }

  /* --- Toast di atas, lebar penuh --- */
  #toast-container { top:calc(.75rem + env(safe-area-inset-top)) !important; right:.75rem !important; left:.75rem; }
  #toast-container .toast { width:100%; min-width:0 !important; }
}

@media (max-width: 900px) {
  /* Hero dibuat ringkas agar form langsung terlihat tanpa scroll panjang */
  .auth-page { display:flex; flex-direction:column; min-height:100vh; background:#f1f5f9; }
  .auth-visual-panel { min-height:auto; border-radius:0 0 1.85rem 1.85rem; }
  .auth-visual-panel::after { width:20rem; height:20rem; right:-8rem; bottom:-9rem; }
  .auth-visual-content { min-height:auto; max-width:none; padding:1.6rem 1.35rem 2.6rem; }
  .auth-brand-lockup { gap:.7rem; }
  .auth-brand-mark { width:2.75rem; height:2.75rem; border-radius:.8rem; }
  .auth-brand-lockup h1 { font-size:1.62rem; }
  .auth-brand-lockup p { margin-top:.1rem; font-size:.72rem; }
  .auth-visual-content h2 { max-width:22rem; margin-top:1.1rem; font-size:clamp(1.7rem,6.4vw,2.45rem); line-height:1.08; }
  .auth-visual-description { max-width:24rem; margin-top:.6rem; font-size:.85rem; line-height:1.6; }
  .auth-feature-grid { display:none; }
  .auth-visual-footer { display:none; }            /* dipindah ke bawah form */
  .auth-mobile-footer { display:flex; }
  /* Kartu form berdiri terpisah dari hero agar tidak saling menutupi */
  .auth-form-panel { align-items:flex-start; padding:1rem 1rem 2rem; background:#f1f5f9; }
  .auth-form-shell { margin-top:0; }
}

@media (max-width: 480px) {
  .login-card, .udzur-card { padding:1.35rem; }
  .login-card__header, .udzur-card__header { align-items:flex-start; gap:.75rem; }
  .login-card__icon, .udzur-card__icon { width:3rem; height:3rem; border-radius:.9rem; font-size:1.1rem; }
  .login-card__header h2, .udzur-card__header h2 { font-size:1.35rem; }
  .auth-visual-footer { flex-direction:column; gap:.45rem; }

  /* Popup konfirmasi dirapatkan agar tidak hampir memenuhi layar kecil */
  .udzur-confirm__icon, .logout-dialog__icon { width:3rem; height:3rem; font-size:1.1rem; border-radius:.95rem; }
  .udzur-confirm h3 { margin-top:.75rem; font-size:1.15rem; }
  .udzur-confirm > p { margin-top:.3rem; font-size:.8rem; }
  .udzur-confirm__data { margin-top:.9rem; }
  .udzur-confirm__data > div { padding:.55rem .8rem; }
  .udzur-confirm__data b { font-size:.82rem; }
  .udzur-confirm__note { gap:.4rem; margin-top:.8rem; }
  .udzur-confirm__note li { font-size:.72rem; }
  .udzur-confirm__actions { margin-top:1.1rem; }
}

/* ==========================================================
   MOBILE PUBLIC NATIVE LAYOUT
   Mobile memakai struktur khusus; desktop tidak berubah.
   ========================================================== */
.auth-mobile-header, .auth-mobile-switcher { display:none; }

@media (max-width: 768px) {
  .auth-page {
    display:block;
    min-height:100vh;
    background:#f3f6f8;
  }

  /* Hero desktop tidak diperkecil; diganti header compact di bawah */
  .auth-visual-panel { display:none !important; }
  .auth-form-panel {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    min-height:100vh;
    padding:0 1rem 2rem !important;
    background:#f3f6f8 !important;
  }

  .auth-mobile-header {
    display:flex;
    align-items:center;
    gap:.75rem;
    width:calc(100% + 2rem);
    min-height:5.25rem;
    margin:0 -1rem;
    padding:1rem 1.15rem 1.15rem;
    color:#fff;
    border-radius:0 0 1.45rem 1.45rem;
    background:
      radial-gradient(circle at 90% 10%, rgba(52,211,153,.2), transparent 35%),
      linear-gradient(135deg,#064e3b,#0f766e);
    box-shadow:0 8px 22px rgba(6,78,59,.14);
  }
  .auth-mobile-header__mark {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:2.9rem;
    height:2.9rem;
    overflow:hidden;
    border:2px solid rgba(255,255,255,.8);
    border-radius:.9rem;
    background:#fff;
    box-shadow:0 5px 14px rgba(0,0,0,.14);
  }
  .auth-mobile-header__copy { min-width:0; flex:1; }
  .auth-mobile-header__copy h1 {
    overflow:hidden;
    color:#fff;
    font-family:var(--font-brand);
    font-size:1.45rem;
    font-weight:normal;
    line-height:1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .auth-mobile-header__copy p {
    overflow:hidden;
    margin-top:.25rem;
    color:#c6f6e5;
    font-size:.68rem;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .auth-mobile-header__secure {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:2rem;
    height:2rem;
    color:#a7f3d0;
    font-size:.8rem;
    border:1px solid rgba(167,243,208,.3);
    border-radius:999px;
    background:rgba(255,255,255,.1);
  }

  .auth-mobile-switcher {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.25rem;
    width:100%;
    margin:1rem 0;
    padding:.25rem;
    border:1px solid #e2e8f0;
    border-radius:.95rem;
    background:#e9eef2;
  }
  .auth-mobile-tab {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    min-height:2.65rem;
    padding:.45rem .5rem;
    color:#64748b;
    font-size:.76rem;
    font-weight:700;
    border:0;
    border-radius:.72rem;
    background:transparent;
    cursor:pointer;
    transition:color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .auth-mobile-tab i { font-size:.78rem; }
  .auth-mobile-tab.active {
    color:#166534;
    background:#fff;
    box-shadow:0 2px 7px rgba(15,23,42,.1);
  }
  .auth-mobile-tab:first-child.active { color:#be185d; }
  .auth-mobile-tab:active { transform:scale(.98); }

  .auth-form-shell {
    width:100%;
    max-width:none;
    margin:0 !important;
  }
  .auth-form-shell > .udzur-card,
  .auth-form-shell > .login-card {
    width:100%;
    padding:1.2rem !important;
    border:1px solid rgba(226,232,240,.95);
    border-radius:1.2rem;
    box-shadow:0 10px 28px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  }
  .auth-form-shell .udzur-card__header,
  .auth-form-shell .login-card__header {
    gap:.75rem;
    margin-bottom:1.2rem;
  }
  .auth-form-shell .udzur-card__icon,
  .auth-form-shell .login-card__icon {
    width:2.9rem;
    height:2.9rem;
    border-radius:.9rem;
    font-size:1.05rem;
  }
  .auth-form-shell .udzur-card__header h2,
  .auth-form-shell .login-card__header h2 {
    font-size:1.28rem !important;
    line-height:1.15;
  }
  .auth-form-shell .udzur-card__header p,
  .auth-form-shell .login-card__header p {
    margin-top:.25rem;
    font-size:.75rem;
    line-height:1.4;
  }
  .auth-form-shell .udzur-notice {
    margin-bottom:1.15rem;
    padding:.7rem .75rem;
    font-size:.7rem;
  }
  .auth-form-shell .login-field label { font-size:.78rem; }
  .auth-form-shell .login-input-wrap input,
  .auth-form-shell .login-input-wrap select {
    height:3rem;
    font-size:16px;
  }
  .auth-form-shell .udzur-submit,
  .auth-form-shell .login-submit {
    height:3.1rem;
    border-radius:.85rem;
  }
  .auth-form-shell .udzur-admin-link,
  .auth-form-shell #login-card > .login-back-link { display:none; }
  .auth-mobile-footer {
    margin-top:1.15rem;
    color:#94a3b8;
    font-size:.68rem;
  }
}

@media (max-width: 375px) {
  .auth-mobile-header { min-height:4.9rem; padding-left:1rem; padding-right:1rem; }
  .auth-mobile-header__mark { width:2.6rem; height:2.6rem; }
  .auth-mobile-header__copy h1 { font-size:1.3rem; }
  .auth-mobile-header__copy p { font-size:.62rem; }
  .auth-mobile-tab { font-size:.7rem; }
  .auth-form-shell > .udzur-card,
  .auth-form-shell > .login-card { padding:1rem !important; }
}

/* ==========================================================
   DATA SISWA DESKTOP
   ========================================================== */
@media (min-width: 769px) {
  .siswa-page { max-width:80rem; margin:0 auto; }
  .siswa-page-head { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.25rem 0 .15rem; }
  .siswa-page-title { display:flex; align-items:center; gap:.8rem; }
  .siswa-page-title__icon { display:flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem; color:#fff; font-size:1.1rem; border-radius:.9rem; background:linear-gradient(135deg,#8b5cf6,#6366f1); box-shadow:0 8px 18px rgba(99,102,241,.2); }
  .siswa-page-title h3 { color:#1e293b; font-size:1.35rem; font-weight:800; letter-spacing:-.025em; }
  .siswa-page-title p { margin-top:.2rem; color:#94a3b8; font-size:.78rem; }
  .siswa-summary { display:flex; align-items:center; gap:.5rem; }
  .siswa-summary span { display:inline-flex; align-items:center; gap:.25rem; padding:.45rem .7rem; color:#64748b; font-size:.72rem; font-weight:600; border:1px solid #e8edf3; border-radius:.75rem; background:#fff; }
  .siswa-summary b { color:#1e293b; font-size:.9rem; font-weight:800; }
  .siswa-summary__male b { color:#3b82f6; }.siswa-summary__female b { color:#ec4899; }
  .siswa-toolbar-card { padding:1rem 1.15rem .8rem; border:1px solid #e8edf3; box-shadow:0 3px 12px rgba(15,23,42,.035); }
  .siswa-toolbar { gap:.7rem !important; }
  .siswa-search input, .siswa-toolbar select { min-height:2.7rem; border-color:#dbe3ec; background:#fbfdff; }
  .siswa-search input:focus, .siswa-toolbar select:focus { border-color:#86efac; background:#fff; box-shadow:0 0 0 3px rgba(34,197,94,.1); }
  .siswa-toolbar-actions { display:flex; align-items:center; gap:.55rem; flex:0 0 auto; }
  .siswa-btn { display:inline-flex; align-items:center; justify-content:center; min-height:2.7rem; padding:.55rem .9rem; font-size:.78rem; font-weight:700; border:1px solid transparent; border-radius:.75rem; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
  .siswa-btn:active { transform:scale(.97); }
  .siswa-btn--secondary { color:#475569; border-color:#e2e8f0; background:#f8fafc; }.siswa-btn--secondary:hover { background:#f1f5f9; }
  .siswa-btn--primary { color:#fff; background:linear-gradient(135deg,#16a34a,#059669); box-shadow:0 5px 13px rgba(5,150,105,.2); }.siswa-btn--primary:hover { box-shadow:0 7px 16px rgba(5,150,105,.28); }
  .siswa-toolbar .fab-add { position:static; min-height:2.7rem; padding:.55rem .9rem !important; }
  .siswa-toolbar-hint { display:flex; align-items:center; gap:.35rem; margin-top:.65rem; padding-top:.65rem; color:#94a3b8; font-size:.68rem; border-top:1px solid #f1f5f9; }.siswa-toolbar-hint i { color:#94a3b8; }
  .siswa-class-card { border:1px solid #e8edf3; box-shadow:0 4px 14px rgba(15,23,42,.04); }
  .siswa-class-head { min-height:4.05rem; padding:.75rem 1rem !important; background:linear-gradient(90deg,#f0fdf4,#f8fffb) !important; border-bottom-color:#dcfce7 !important; }
  .siswa-class-title { display:flex; align-items:center; gap:.65rem; }
  .siswa-class-title__icon { display:flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; color:#15803d; font-size:.9rem; border-radius:.7rem; background:#dcfce7; }
  .siswa-class-title h3 { color:#166534; font-size:.95rem; font-weight:800; }
  .siswa-class-title p { margin-top:.1rem; color:#86a892; font-size:.66rem; }
  .siswa-class-counts { gap:.4rem !important; }
  .siswa-count { padding:.28rem .55rem; border-radius:999px; font-size:.68rem; font-weight:600; background:#fff; }
  .siswa-count--total { color:#475569; }.siswa-count--male { color:#2563eb; background:#eff6ff; }.siswa-count--female { color:#db2777; background:#fdf2f8; }
  .siswa-count b { font-weight:800; }
  .siswa-class-card .siswa-table thead { border-bottom:1px solid #eef2f6; }
  .siswa-class-card .siswa-table th { color:#94a3b8; font-size:.65rem; font-weight:800; letter-spacing:.08em; background:#fbfcfd; }
  .siswa-class-card .siswa-table td { height:3.15rem; vertical-align:middle; }
  .siswa-class-card .siswa-row { transition:background .16s ease; }.siswa-class-card .siswa-row:hover { background:#f8fdf9; }
  .siswa-class-card .sw-nama { color:#334155; font-weight:700; }.siswa-class-card .sw-nis { color:#64748b; font-variant-numeric:tabular-nums; }
  .siswa-action { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; padding:0 !important; border:1px solid transparent; border-radius:.6rem; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
  .siswa-action--edit { color:#64748b; }.siswa-action--edit:hover { color:#2563eb; border-color:#bfdbfe; background:#eff6ff; }
  .siswa-action--delete { color:#94a3b8; }.siswa-action--delete:hover { color:#e11d48; border-color:#fecdd3; background:#fff1f2; }
}

@media (max-width: 768px) {
  .siswa-page-head { display:block; margin-bottom:.15rem; }
  .siswa-page-title { display:flex; align-items:center; gap:.65rem; }
  .siswa-page-title__icon { display:flex; align-items:center; justify-content:center; width:2.35rem; height:2.35rem; color:#fff; font-size:.85rem; border-radius:.7rem; background:linear-gradient(135deg,#8b5cf6,#6366f1); }
  .siswa-page-title h3 { color:#1e293b; font-size:1.05rem; font-weight:800; }.siswa-page-title p { margin-top:.1rem; color:#94a3b8; font-size:.68rem; }
  .siswa-summary { display:flex; gap:.35rem; margin-top:.65rem; overflow-x:auto; scrollbar-width:none; }.siswa-summary::-webkit-scrollbar { display:none; }
  .siswa-summary span { flex:0 0 auto; padding:.3rem .55rem; color:#64748b; font-size:.64rem; border:1px solid #e8edf3; border-radius:999px; background:#fff; }.siswa-summary b { color:#1e293b; font-weight:800; }.siswa-summary__male b { color:#3b82f6; }.siswa-summary__female b { color:#ec4899; }
  .siswa-toolbar-card { padding:.8rem !important; }
  .siswa-toolbar-actions { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; width:100%; }
  .siswa-toolbar-hint { display:none; }
  .siswa-btn { min-height:2.8rem; width:100%; padding:.5rem .35rem; font-size:.72rem; border-radius:.8rem; }
  .siswa-toolbar .fab-add { position:static !important; min-height:2.8rem; padding:0 .35rem !important; box-shadow:none; }
  .siswa-class-head { min-height:3.6rem; }
  .siswa-class-title__icon { width:2rem; height:2rem; font-size:.78rem; }.siswa-class-title h3 { font-size:.85rem; }.siswa-class-title p { font-size:.6rem; }
  .siswa-class-counts { gap:.25rem !important; }.siswa-count { padding:.22rem .42rem; font-size:.6rem; }
}

/* Presisi kolom Data Siswa desktop */
@media (min-width: 769px) {
  .siswa-class-card .siswa-table { table-layout:fixed; min-width:46rem; }
  .siswa-class-card .sw-col-check { width:3.5rem; }
  .siswa-class-card .sw-col-no { width:4.25rem; }
  .siswa-class-card .sw-col-nama { width:35%; }
  .siswa-class-card .sw-col-nis { width:22%; }
  .siswa-class-card .sw-col-jk { width:14%; }
  .siswa-class-card .sw-col-aksi { width:7.5rem; }
  .siswa-class-card .siswa-table th,
  .siswa-class-card .siswa-table td { overflow:hidden; text-overflow:ellipsis; }
  .siswa-class-card .siswa-table .sw-nama { white-space:nowrap; }
  .siswa-class-card .siswa-table .sw-aksi { overflow:visible; }
}

@media (max-width: 768px) {
  .siswa-class-card .siswa-table colgroup { display:none; }
}

/* ==========================================================
   INPUT MASSAL SISWA: filter gender di pratinjau
   ========================================================== */
.bulk-step { display:inline-flex; align-items:center; justify-content:center; width:1.15rem; height:1.15rem; margin-right:.35rem; color:#fff; font-size:.62rem; font-weight:800; border-radius:999px; background:#16a34a; vertical-align:1px; }
.bulk-tip { display:flex; align-items:flex-start; gap:.5rem; padding:.65rem .8rem; color:#475569; font-size:.75rem; line-height:1.5; border:1px solid #e2e8f0; border-radius:.8rem; background:#f8fafc; }
.bulk-tip i { flex:0 0 auto; margin-top:.15rem; color:#f59e0b; }

.bulk-filter { margin-bottom:.85rem; padding:.75rem; border:1px solid #e2e8f0; border-radius:.95rem; background:#f8fafc; }
.bulk-filter__label { margin-bottom:.5rem; color:#334155; font-size:.78rem; font-weight:700; }
.bulk-filter__label i { margin-right:.35rem; color:#16a34a; }
.bulk-filter__options { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.bulk-filter__btn { display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:2.6rem; padding:.45rem .5rem; color:#64748b; font-size:.8rem; font-weight:700; border:1.5px solid #e2e8f0; border-radius:.75rem; background:#fff; cursor:pointer; transition:all .16s ease; }
.bulk-filter__btn:hover { border-color:#cbd5e1; }
.bulk-filter__btn:active { transform:scale(.98); }
.bulk-filter__btn--all.active { color:#15803d; border-color:#22c55e; background:#f0fdf4; box-shadow:0 0 0 3px rgba(34,197,94,.12); }
.bulk-filter__btn--L.active { color:#1d4ed8; border-color:#3b82f6; background:#eff6ff; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.bulk-filter__btn--P.active { color:#be185d; border-color:#ec4899; background:#fdf2f8; box-shadow:0 0 0 3px rgba(236,72,153,.12); }
.bulk-filter__btn--L i { color:#3b82f6; }.bulk-filter__btn--P i { color:#ec4899; }

.bulk-summary { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:.75rem; font-size:.75rem; }
.bulk-summary > span { display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .65rem; font-weight:600; border-radius:999px; }
.bulk-summary b { font-weight:800; }
.bulk-summary > span.hidden { display:none; }
.bulk-summary__kelas { color:#15803d; background:#f0fdf4; }
.bulk-summary__save { color:#047857; background:#d1fae5; }
.bulk-summary__skip { color:#64748b; background:#f1f5f9; }
.bulk-summary__warn { color:#b45309; background:#fef3c7; }
.bulk-summary__dup { color:#be123c; background:#ffe4e6; }
.bulk-summary__mix { margin-left:auto; color:#64748b; background:#fff; border:1px solid #e2e8f0; }

.bulk-table td { vertical-align:middle; }
.bulk-row { border-bottom:1px solid #f1f5f9; transition:opacity .16s ease, background .16s ease; }
.bulk-row--skip { background:#f8fafc; opacity:.5; }
.bulk-row--skip .bulk-nama { color:#94a3b8; text-decoration:line-through; background:transparent; }
.bulk-row--warn { background:#fffbeb; }
.bulk-row--warn .bulk-jk { border-color:#fbbf24; background:#fff; }
.bulk-row--dup { background:#fff1f2; }
.bulk-row--dup .bulk-nis { border-color:#fb7185; background:#fff1f2; }
.bulk-badge { display:inline-flex; align-items:center; gap:.25rem; padding:.18rem .5rem; font-size:.66rem; font-weight:700; white-space:nowrap; border-radius:999px; }
.bulk-badge i { font-size:.6rem; }
.bulk-badge--save { color:#047857; background:#d1fae5; }
.bulk-badge--skip { color:#64748b; background:#e2e8f0; }
.bulk-badge--nojk { color:#b45309; background:#fef3c7; }
.bulk-badge--dup { color:#be123c; background:#ffe4e6; }
#bulk-save-btn:disabled { cursor:not-allowed; opacity:.55; }

@media (max-width: 768px) {
  .bulk-filter__btn { min-height:2.75rem; padding:.4rem .2rem; font-size:.7rem; gap:.25rem; }
  .bulk-summary { font-size:.68rem; }
  .bulk-summary__mix { margin-left:0; }

  /* Di HP setiap baris pratinjau menjadi kartu kecil, bukan tabel lebar */
  .bulk-table, .bulk-table tbody { display:block; width:100%; }
  .bulk-table thead { display:none; }
  .bulk-table tr.bulk-row {
    display:grid; grid-template-columns:1.5rem 1fr 1fr 2rem; align-items:center;
    gap:.45rem; padding:.65rem .7rem;
  }
  .bulk-table tr.bulk-row > td { padding:0 !important; }
  .bulk-table tr.bulk-row > td:nth-child(1) { grid-column:1; grid-row:1; }          /* # */
  .bulk-table tr.bulk-row > td:nth-child(2) { grid-column:2 / 4; grid-row:1; }      /* Nama */
  .bulk-table tr.bulk-row > td:nth-child(6) { grid-column:4; grid-row:1; }          /* Hapus */
  .bulk-table tr.bulk-row > td:nth-child(3) { grid-column:2; grid-row:2; }          /* Gender */
  .bulk-table tr.bulk-row > td:nth-child(4) { grid-column:3; grid-row:2; }          /* NIS */
  .bulk-table tr.bulk-row > td:nth-child(5) { grid-column:2 / 4; grid-row:3; }      /* Status */
  .bulk-table .bulk-nama, .bulk-table .bulk-jk, .bulk-table .bulk-nis { width:100% !important; min-height:2.6rem; border-radius:.6rem !important; }
  .bulk-table tr.bulk-row > td:nth-child(6) button { width:2rem; height:2.6rem; }
}

/* ==========================================================
   RESET DATA — superadmin only
   ========================================================== */
.nav-tone-reset i { color:#fb7185; }
.reset-page { max-width:78rem; margin:0 auto; }
.reset-page-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.reset-eyebrow { color:#e11d48; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.reset-eyebrow i { margin-right:.35rem; }
.reset-page-head h3 { margin-top:.2rem; color:#1e293b; font-size:1.45rem; font-weight:800; letter-spacing:-.03em; }.reset-page-head p { margin-top:.2rem; color:#94a3b8; font-size:.8rem; }
.reset-head-icon { display:flex; align-items:center; justify-content:center; width:3.1rem; height:3.1rem; color:#e11d48; font-size:1.15rem; border:1px solid #fecdd3; border-radius:1rem; background:#fff1f2; }
.reset-warning { display:flex; align-items:flex-start; gap:.7rem; padding:.85rem 1rem; color:#9f1239; border:1px solid #fecdd3; border-radius:1rem; background:#fff1f2; }.reset-warning > i { margin-top:.2rem; color:#e11d48; }.reset-warning b { display:block; font-size:.82rem; }.reset-warning span { display:block; margin-top:.18rem; color:#be123c; font-size:.75rem; }
.reset-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(19rem,.8fr); align-items:start; gap:1.2rem; }.reset-main,.reset-side { display:grid; gap:1rem; }
.reset-main > .card,.reset-side > .card { border:1px solid #e8edf3; box-shadow:0 3px 12px rgba(15,23,42,.035); }
.reset-section-title { display:flex; align-items:flex-start; gap:.7rem; }.reset-section-title > span { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:1.8rem; height:1.8rem; color:#be123c; font-size:.75rem; font-weight:800; border-radius:.6rem; background:#ffe4e6; }.reset-section-title h4 { color:#1e293b; font-size:.9rem; font-weight:800; }.reset-section-title p { margin-top:.15rem; color:#94a3b8; font-size:.72rem; line-height:1.4; }
.reset-options { padding:1.1rem; }.reset-option-list { display:grid; gap:.55rem; margin-top:1rem; }.reset-option { display:flex; align-items:center; gap:.7rem; width:100%; padding:.75rem; text-align:left; border:1px solid #e2e8f0; border-radius:.85rem; background:#fff; cursor:pointer; transition:all .17s ease; }.reset-option:hover { border-color:#cbd5e1; background:#f8fafc; }.reset-option.active { border-color:#fda4af; background:#fff1f2; box-shadow:0 0 0 3px rgba(244,63,94,.08); }.reset-option__icon { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:2.3rem; height:2.3rem; font-size:.85rem; border-radius:.7rem; }.reset-option--blue .reset-option__icon { color:#2563eb; background:#eff6ff; }.reset-option--amber .reset-option__icon { color:#d97706; background:#fffbeb; }.reset-option--orange .reset-option__icon { color:#ea580c; background:#fff7ed; }.reset-option--rose .reset-option__icon { color:#e11d48; background:#fff1f2; }.reset-option__copy { min-width:0; flex:1; }.reset-option__copy b { display:block; color:#334155; font-size:.8rem; font-weight:800; }.reset-option__copy small { display:block; margin-top:.14rem; color:#94a3b8; font-size:.68rem; line-height:1.4; }.reset-option__badge { flex:0 0 auto; padding:.25rem .5rem; color:#64748b; font-size:.62rem; font-weight:700; border-radius:999px; background:#f1f5f9; }.reset-option--rose .reset-option__badge { color:#be123c; background:#ffe4e6; }.reset-option__arrow { flex:0 0 auto; color:#cbd5e1; font-size:.7rem; }.reset-option.active .reset-option__arrow { color:#e11d48; }
.reset-date-card,.reset-preview-card,.reset-backup-card { padding:1.1rem; }.reset-date-fields { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:.65rem; margin-top:1rem; }.reset-date-fields label,.reset-field { display:grid; gap:.3rem; color:#64748b; font-size:.7rem; font-weight:700; }.reset-date-fields input,.reset-field input { min-height:2.7rem; padding:.5rem .7rem; color:#334155; font-size:.82rem; border:1px solid #dbe3ec; border-radius:.75rem; outline:none; }.reset-date-fields input:focus,.reset-field input:focus { border-color:#fb7185; box-shadow:0 0 0 3px rgba(244,63,94,.1); }.reset-date-fields > span { align-self:center; margin-top:1.1rem; color:#94a3b8; }
.reset-count-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; margin-top:1rem; }.reset-count-grid > div { display:grid; grid-template-columns:auto 1fr; column-gap:.4rem; align-items:center; padding:.65rem; border:1px solid #eef2f6; border-radius:.75rem; background:#fbfdff; }.reset-count-grid i { grid-row:span 2; color:#e11d48; font-size:.85rem; }.reset-count-grid span { color:#94a3b8; font-size:.64rem; }.reset-count-grid b { color:#1e293b; font-size:1rem; }.reset-preview-total { margin-top:.75rem; color:#64748b; font-size:.72rem; }.reset-preview-total b { color:#be123c; }.reset-preview-loading,.reset-preview-error { margin-top:1rem; padding:.8rem; color:#94a3b8; font-size:.78rem; border-radius:.75rem; background:#f8fafc; }.reset-preview-error { color:#be123c; background:#fff1f2; }.reset-preview-error i { margin-right:.35rem; }
.reset-backup-card { border-color:#fde68a !important; background:#fffcf5; }.reset-backup-btn { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; min-height:3rem; margin-top:1rem; color:#fff; font-size:.82rem; font-weight:800; border:0; border-radius:.8rem; background:linear-gradient(135deg,#d97706,#b45309); box-shadow:0 7px 16px rgba(180,83,9,.2); cursor:pointer; }.reset-backup-btn:disabled { cursor:wait; opacity:.65; }.reset-backup-status { display:flex; align-items:center; gap:.4rem; margin-top:.65rem; color:#92400e; font-size:.7rem; }.reset-backup-status--ready { color:#047857; }.reset-backup-status i { flex:0 0 auto; }
.reset-danger-card { padding:1.1rem; border-color:#fecdd3 !important; background:#fffafb; }.reset-danger-card > .reset-field { margin-top:1rem; }.reset-danger-card > .reset-field b { color:#be123c; }.reset-execute { display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%; min-height:3rem; margin-top:1rem; color:#fff; font-size:.82rem; font-weight:800; border:0; border-radius:.8rem; background:linear-gradient(135deg,#e11d48,#be123c); box-shadow:0 7px 16px rgba(225,29,72,.2); cursor:pointer; }.reset-execute:disabled { cursor:not-allowed; opacity:.4; box-shadow:none; }.reset-lock-note { margin-top:.7rem; color:#94a3b8; font-size:.67rem; line-height:1.45; }.reset-lock-note i { margin-right:.3rem; color:#e11d48; }.reset-safe-card,.reset-drive-note { display:flex; align-items:flex-start; gap:.65rem; padding:1rem; }.reset-safe-card > i { color:#16a34a; font-size:1.1rem; }.reset-drive-note > i { color:#4285f4; font-size:1.1rem; }.reset-safe-card b,.reset-drive-note b { color:#334155; font-size:.78rem; }.reset-safe-card p,.reset-drive-note p { margin-top:.2rem; color:#94a3b8; font-size:.68rem; line-height:1.45; }

@media (max-width: 768px) {
  .reset-page { margin:0; }.reset-page-head h3 { font-size:1.2rem; }.reset-page-head p { font-size:.7rem; }.reset-head-icon { width:2.6rem; height:2.6rem; }
  .reset-layout { display:block; }.reset-side { margin-top:1rem; }.reset-warning { padding:.75rem; }.reset-warning b { font-size:.75rem; }.reset-warning span { font-size:.68rem; }
  .reset-option { padding:.65rem; }.reset-option__badge,.reset-option__arrow { display:none; }.reset-option__copy small { font-size:.64rem; }
  .reset-date-fields { grid-template-columns:1fr 1fr; }.reset-date-fields > span { display:none; }.reset-count-grid { grid-template-columns:repeat(2,1fr); }
  .reset-options,.reset-date-card,.reset-preview-card,.reset-backup-card,.reset-danger-card { padding:.9rem; }
}

/* ==========================================================
   RESTORE DATA — superadmin only (memakai kerangka layout Reset)
   ========================================================== */
.nav-tone-restore i { color:#2dd4bf; }
.restore-page .reset-section-title > span { color:#0f766e; background:#ccfbf1; }
.restore-eyebrow { color:#0d9488; }
.restore-head-icon { color:#0d9488; border-color:#99f6e4; background:#f0fdfa; }
.restore-info { display:flex; align-items:flex-start; gap:.7rem; padding:.85rem 1rem; color:#115e59; border:1px solid #99f6e4; border-radius:1rem; background:#f0fdfa; }
.restore-info > i { margin-top:.2rem; color:#0d9488; }.restore-info b { display:block; font-size:.82rem; }.restore-info span { display:block; margin-top:.18rem; font-size:.75rem; color:#0f766e; }
.restore-card, .restore-confirm-card { padding:1.1rem; }
.restore-drop { display:flex; flex-direction:column; align-items:center; gap:.3rem; margin-top:1rem; padding:1.4rem 1rem; text-align:center; border:2px dashed #99f6e4; border-radius:1rem; background:#f8fffd; cursor:pointer; transition:border-color .16s ease, background .16s ease; }
.restore-drop:hover, .restore-drop.dragging { border-color:#14b8a6; background:#f0fdfa; }
.restore-drop > i { color:#14b8a6; font-size:1.6rem; }
.restore-drop b { max-width:100%; overflow:hidden; color:#134e4a; font-size:.85rem; text-overflow:ellipsis; white-space:nowrap; }
.restore-drop span { color:#94a3b8; font-size:.7rem; }
.restore-file-card { margin-top:.8rem; padding:.75rem .9rem; border:1px solid #e2e8f0; border-radius:.85rem; background:#fff; }
.restore-file-row { display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; font-size:.75rem; border-bottom:1px dashed #eef2f6; }
.restore-file-row span { color:#94a3b8; }.restore-file-row b { color:#1e293b; text-align:right; }
.restore-file-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; }
.restore-file-chips span { padding:.25rem .55rem; color:#0f766e; font-size:.68rem; border-radius:999px; background:#f0fdfa; }
.restore-modes { display:grid; gap:.5rem; margin-top:1rem; }
.restore-mode { display:flex; align-items:flex-start; gap:.7rem; width:100%; padding:.8rem; text-align:left; border:1.5px solid #e2e8f0; border-radius:.85rem; background:#fff; cursor:pointer; transition:all .16s ease; }
.restore-mode > i { flex:0 0 auto; margin-top:.15rem; color:#0d9488; }
.restore-mode b { display:block; color:#334155; font-size:.82rem; }
.restore-mode b em { margin-left:.35rem; padding:.1rem .4rem; color:#0f766e; font-size:.6rem; font-style:normal; font-weight:700; border-radius:999px; background:#ccfbf1; }
.restore-mode small { display:block; margin-top:.15rem; color:#94a3b8; font-size:.7rem; line-height:1.45; }
.restore-mode.active { border-color:#14b8a6; background:#f0fdfa; box-shadow:0 0 0 3px rgba(20,184,166,.1); }
.restore-mode--timpa > i { color:#d97706; }
.restore-mode--timpa.active { border-color:#f59e0b; background:#fffbeb; box-shadow:0 0 0 3px rgba(245,158,11,.12); }
.restore-advanced-toggle { display:flex; align-items:center; gap:.4rem; width:max-content; padding:.25rem .1rem; color:#64748b; font-size:.72rem; font-weight:700; border:0; background:none; cursor:pointer; }
.restore-advanced-toggle .fa-chevron-down { font-size:.6rem; transition:transform .16s ease; }
.restore-advanced-toggle.open .fa-chevron-down { transform:rotate(180deg); }
.restore-settings { display:flex; align-items:flex-start; gap:.6rem; margin-top:.8rem; padding:.7rem .8rem; border:1px solid #e2e8f0; border-radius:.8rem; background:#f8fafc; cursor:pointer; }
.restore-settings input { margin-top:.2rem; width:1rem; height:1rem; }
.restore-settings b { display:block; color:#334155; font-size:.78rem; }.restore-settings small { display:block; margin-top:.1rem; color:#94a3b8; font-size:.68rem; }
.restore-preview-btn { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; min-height:2.85rem; margin-top:1rem; color:#0f766e; font-size:.82rem; font-weight:800; border:1.5px solid #5eead4; border-radius:.8rem; background:#f0fdfa; cursor:pointer; }
.restore-preview-btn:disabled { cursor:not-allowed; opacity:.5; }
.restore-lines { display:grid; gap:.35rem; margin-top:.9rem; padding:0; list-style:none; }
.restore-line { display:flex; align-items:center; gap:.55rem; padding:.5rem .7rem; font-size:.78rem; border-radius:.65rem; }
.restore-line i { flex:0 0 auto; width:1rem; text-align:center; font-size:.75rem; }
.restore-line--ok { color:#065f46; background:#ecfdf5; }.restore-line--ok i { color:#10b981; }
.restore-line--change { color:#92400e; background:#fffbeb; }.restore-line--change i { color:#f59e0b; }
.restore-line--skip { color:#64748b; background:#f8fafc; }.restore-line--skip i { color:#94a3b8; }
.restore-line--warn { color:#9a3412; background:#fff7ed; }.restore-line--warn i { color:#ea580c; }
.restore-nothing { margin-top:.7rem; color:#0f766e; font-size:.75rem; }.restore-nothing i { margin-right:.35rem; }
.restore-sample { margin-top:.8rem; padding:.7rem .8rem; border:1px solid #fde68a; border-radius:.8rem; background:#fffdf5; }
.restore-sample p { margin-bottom:.4rem; color:#92400e; font-size:.72rem; font-weight:700; }
.restore-sample table { width:100%; font-size:.72rem; }
.restore-sample td { padding:.3rem .2rem; color:#475569; border-top:1px solid #fef3c7; }
.restore-sample td:last-child { text-align:right; white-space:nowrap; }
.restore-sample td i { margin:0 .3rem; color:#d97706; font-size:.6rem; }
.restore-from { color:#94a3b8; text-decoration:line-through; }.restore-to { color:#b45309; font-weight:800; }
.restore-sample--warn { border-color:#fed7aa; background:#fffaf5; }
.restore-sample--warn p { color:#9a3412; }
.restore-sample--warn ul { padding-left:1rem; color:#475569; font-size:.72rem; list-style:disc; }
.restore-sample--warn small { display:block; margin-top:.4rem; color:#94a3b8; font-size:.66rem; }
.restore-confirm-card { border-color:#99f6e4 !important; background:#fbfffe; }
.restore-confirm-card > .reset-field { margin-top:1rem; }
.restore-confirm-card > .reset-field b { color:#0f766e; }
.restore-confirm-card .reset-field input:focus { border-color:#2dd4bf; box-shadow:0 0 0 3px rgba(45,212,191,.12); }
.restore-execute { display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%; min-height:3rem; margin-top:1rem; color:#fff; font-size:.82rem; font-weight:800; border:0; border-radius:.8rem; background:linear-gradient(135deg,#14b8a6,#0f766e); box-shadow:0 7px 16px rgba(15,118,110,.2); cursor:pointer; }
.restore-execute--timpa { background:linear-gradient(135deg,#f59e0b,#b45309); box-shadow:0 7px 16px rgba(180,83,9,.2); }
.restore-execute:disabled { cursor:not-allowed; opacity:.4; box-shadow:none; }

@media (max-width: 768px) {
  .restore-card, .restore-confirm-card { padding:.9rem; }
  .restore-info { padding:.75rem; }.restore-info b { font-size:.75rem; }.restore-info span { font-size:.68rem; }
  .restore-drop { padding:1.1rem .75rem; }
  .restore-sample td { display:block; padding:.15rem 0; border:0; text-align:left !important; }
  .restore-sample tr { display:block; padding:.35rem 0; border-top:1px solid #fef3c7; }
}