/* ==================================================================
   APLIKASI PRESENSI SEKOLAH — Stylesheet utama
   ================================================================== */
:root {
  --primary: #2f5b95;
  --primary-dark: #24466f;
  --primary-light: #e8f0fb;
  --accent: #f59e0b;
  --success: #16a34a;
  --success-bg: #e7f8ef;
  --danger: #dc2626;
  --danger-bg: #fdeaea;
  --warning: #d97706;
  --warning-bg: #fef3dd;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-500: #64748b;
  --gray-700: #334155;
  --gray-900: #0f172a;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 14px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--gray-100);
  color: var(--gray-900);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout: sidebar + content ---------- */
.app-wrap { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  background: linear-gradient(180deg, var(--primary-dark), #1b3352);
  color: #dbe6f5;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 50;
}

.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 11px; /* revisi 4.13.1: dirapatkan agar menu muat tanpa scroll */
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar .brand .logo {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 19px;
  flex: 0 0 auto;
}
/* nama sekolah panjang tidak meluber keluar sidebar (bungkus rapi) */
.sidebar .brand > div:not(.logo) { min-width: 0; }
/* Revisi 4.20 — ikon & teks sidebar DIPERBESAR (ikon 22px, teks 15px)
   namun TIDAK PERNAH melebihi lebar sidebar: label menu memakai
   ellipsis (…) satu baris + min-width:0 pada item flex. */
.sidebar .brand b { color: #fff; font-size: 16px; display: block; line-height: 1.2; }
.sidebar .brand small { font-size: 12px; opacity: .7; }

/* Revisi 4.13.1 — sidebar tanpa area scroll yang terlihat:
   (a) jarak dirapatkan sehingga 11 menu admin (role terbanyak) muat
       di tinggi viewport laptop umam (±580px ke atas);
   (b) scrollbar nav DISEMBUNYIKAN di semua browser — pada layar
       ekstrem pendek (mis. laptop DPI 150%, ponsel lanskap) menu
       tetap bisa digulir via roda mouse/sentuhan, tanpa bilah
       scroll yang tampak (pola ala Discord/Slack). */
.sidebar nav {
  flex: 1; overflow-y: auto; padding: 8px 10px 10px;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Edge/IE lama */
  overscroll-behavior: contain;   /* gulir tidak "bocor" ke halaman */
}
.sidebar nav::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari/Edge */
.sidebar nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px; margin: 2px 0;
  color: #c9d7ea; border-radius: 9px;
  font-size: 15px; text-decoration: none;
  transition: background .15s;
}
.sidebar nav a:hover { background: rgba(255,255,255,.09); text-decoration: none; }
.sidebar nav a.active { background: var(--primary); color: #fff; font-weight: 600; }
.sidebar nav a svg { width: 22px; height: 22px; flex: 0 0 auto; opacity: .9; }
/* revisi 4.20: label panjang dipotong dgn ellipsis — tidak pernah keluar sidebar */
.sidebar nav a span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sidebar .side-foot {
  padding: 11px 16px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px; opacity: .75;
}

.main { flex: 1; margin-left: 250px; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: #fff;
  padding: 12px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 0; z-index: 40;
}
.topbar h1 { font-size: 19px; font-weight: 700; }
.topbar .userbox { display: flex; align-items: center; gap: 12px; position: relative; }

/* ===== Dropdown profil pengguna (revisi 4.6) ===== */
.userbox-btn {
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; cursor: pointer;
  padding: 6px 8px; border-radius: 10px;
  min-height: 44px;
}
.userbox-btn:hover, .userbox-btn:focus-visible { background: var(--gray-100); outline: none; }
.userbox-btn .caret { width: 18px; height: 18px; color: var(--gray-500); transition: transform .18s ease; }
.userbox.buka .userbox-btn .caret { transform: rotate(180deg); }
.usermenu {
  position: absolute; right: 0; top: calc(100% + 10px);
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .18);
  min-width: 230px; width: max-content; max-width: calc(100vw - 28px);
  padding: 6px; z-index: 80;
  display: none;
}
.userbox.buka .usermenu { display: block; animation: menuMuncul .16s ease; }
@keyframes menuMuncul { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* usermenu-head lama diganti blok baru (revisi 4.20: +foto pengguna) */
/* revisi 4.43: tautan Edit Profil & tombol Keluar (Logout) kini berbagi
   aturan yang SAMA. Dulu selector hanya menyasar <a> — tombol logout
   (elemen <button>) kehilangan flex/padding/ukuran ikon 19px sehingga
   ikonnya tampak LEBIH BESAR dan rapat ke tepi (tidak simetri). */
.usermenu a,
.usermenu button.keluar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--gray-700); font-weight: 600; font-size: 14px;
  min-height: 44px; text-decoration: none;
}
.usermenu button.keluar {
  width: 100%;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; line-height: inherit; text-align: left;
}
.usermenu form { margin: 0; }
.usermenu a svg, .usermenu button.keluar svg { width: 19px; height: 19px; flex: 0 0 auto; }
.usermenu a:hover, .usermenu a:focus-visible { background: var(--gray-100); color: var(--primary); }
.usermenu a.keluar, .usermenu button.keluar { color: var(--danger); }
.usermenu a.keluar:hover, .usermenu a.keluar:focus-visible,
.usermenu button.keluar:hover, .usermenu button.keluar:focus-visible { background: #fef2f2; color: var(--danger); }

.topbar .userbox .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary);
  display: grid; place-items: center; font-weight: 700;
  overflow: hidden; /* revisi 4.20: foto profil bulat penuh */
}
/* revisi 4.20: FOTO PROFIL pengguna di avatar pojok kanan atas */
.topbar .userbox .avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.topbar .userbox .meta { text-align: right; line-height: 1.25; min-width: 0; }
.topbar .userbox .meta b {
  font-size: 13.5px; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.topbar .userbox .meta small { color: var(--gray-500); font-size: 12px; }

/* revisi 4.20 — kepala menu profil (rincian akun) dgn FOTO pengguna */
.usermenu-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--gray-200, #e2e8f0);
}
.usermenu-head .avatar-besar {
  width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
  background: var(--primary-light); color: var(--primary);
  display: grid; place-items: center; font-weight: 700; font-size: 22px;
  overflow: hidden;
}
.usermenu-head .avatar-besar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usermenu-head .identitas { min-width: 0; }
.usermenu-head .identitas b {
  display: block; font-size: 14.5px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.usermenu-head .identitas small { color: var(--gray-500); font-size: 12px; }

/* revisi 4.20 — pratinjau foto profil besar di halaman Profil Saya */
.foto-pratinjau {
  width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto;
  background: var(--primary-light); color: var(--primary);
  display: grid; place-items: center; font-weight: 700; font-size: 38px;
  overflow: hidden;
}
.foto-pratinjau img { width: 100%; height: 100%; object-fit: cover; display: block; }

.content { padding: 24px 26px 40px; max-width: 1240px; width: 100%; }

/* ---------- Komponen ---------- */
.card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--gray-200);
  padding: 20px 22px; margin-bottom: 20px;
}
.card h2 { font-size: 16.5px; margin-bottom: 4px; }
.card .sub { color: var(--gray-500); font-size: 13px; margin-bottom: 14px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.stat {
  background: #fff; border-radius: var(--radius); padding: 16px 18px;
  border: 1px solid var(--gray-200); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px;
}
.stat .num { font-size: 26px; font-weight: 800; color: var(--primary-dark); }
.stat .lbl { font-size: 12.5px; color: var(--gray-500); }
.stat.ok .num { color: var(--success); }
.stat.warn .num { color: var(--warning); }
.stat.bad .num { color: var(--danger); }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left; padding: 9px 10px;
  background: var(--gray-50); color: var(--gray-700);
  border-bottom: 2px solid var(--gray-200);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
/* Revisi 4.41: garis pembatas TIPIS antar KOLOM & antar BARIS pada semua
   tabel agar sel lebih jelas dibaca — pemisah kolom via border-right pada
   tiap sel (kolom terakhir tanpa garis agar tepi kanan tabel tetap bersih);
   pemisah baris dipertegas dari --gray-100 (nyaris tak terlihat) ke
   --gray-200. border-collapse: collapse menjaga garis tetap tipis tunggal. */
table.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
table.tbl th, table.tbl td { border-right: 1px solid var(--gray-200); }
table.tbl th:last-child, table.tbl td:last-child { border-right: none; }
table.tbl tr:hover td { background: #fbfdff; }
.table-wrap { overflow-x: auto; }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700;
}
.badge.green  { background: var(--success-bg); color: var(--success); }
.badge.red    { background: var(--danger-bg);  color: var(--danger); }
.badge.yellow { background: var(--warning-bg); color: var(--warning); }
.badge.gray   { background: var(--gray-100);   color: var(--gray-500); }
.badge.blue   { background: var(--primary-light); color: var(--primary); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 18px; border-radius: 9px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer;
  line-height: 1.25; /* revisi 4.43: <a> mewarisi 1.55 dari body, <button> memakai
                        bawaan peramban — tingginya beda & tombol tidak sejajar;
                        nilai tetap menyamakan keduanya */
  background: var(--primary); color: #fff;
  transition: filter .15s, transform .05s;
  font-family: inherit; text-decoration: none;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--gray-700); border-color: var(--gray-300); }
.btn.danger { background: var(--danger); }
.btn.success { background: var(--success); }
.btn.sm { padding: 5px 12px; font-size: 12.5px; border-radius: 7px; }
.btn.block { width: 100%; }

/* revisi 4.43: tombol aksi tabel selalu sejajar satu baris — dulu tombol
   dipisah spasi teks sehingga <a> vs <button> (baseline inline-flex berbeda)
   tidak rata & mudah turun ke baris baru saat sel sempit */
.tbl td .aksi { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

/* atribut hidden harus selalu menang atas display milik kelas (revisi 4.4) */
[hidden] { display: none !important; }

label.fld { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
label.fld span.req { color: var(--danger); }
/* Revisi 4.41: +input[type=search] — kotak Pencarian pada baris filter
   (Mata Pelajaran, Notifikasi WA, Naik Kelas, Tahun Ajaran) kini mendapat
   gaya standar yang SAMA dgn select sortasi di sebelahnya (tinggi, padding,
   border, radius, font). Sebelumnya type=search tidak tercakup selector ini
   sehingga browser merender kotaknya dgn tinggi bawaan — tampak lebih
   pendek & tidak seimbang dgn dropdown sortasi/filter. */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=time], input[type=date], input[type=month], input[type=search], select, textarea {
  width: 100%; padding: 9px 12px; margin-top: 4px;
  border: 1px solid var(--gray-300); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--gray-900);
}
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-light); border-color: var(--primary); }

/* Revisi 4.41: baris filter — kotak PENCARIAN & SORTASI/FILTER tingginya
   seragam (align-items:stretch membuat semua kotak setinggi kotak tertinggi
   di barisnya; mengatasi quirk <select> Chrome yang 2px lebih tinggi dari
   input). Selector .flex.filter-bar (spesifisitas 0-2-0) sengaja mengungguli
   .flex{align-items:center} agar tidak tergantung urutan aturan. */
.flex.filter-bar { align-items: stretch; }
.flex.filter-bar > input, .flex.filter-bar > select, .flex.filter-bar > small { margin-top: 0; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }

/* Alert / toast */
.alert { border-radius: 9px; padding: 11px 15px; font-size: 13.5px; margin: 10px 0; border: 1px solid transparent; }
.alert.ok    { background: var(--success-bg); color: #14532d; border-color: #b7e4c7; }
.alert.err   { background: var(--danger-bg);  color: #7f1d1d; border-color: #f5c2c2; }
.alert.warn  { background: var(--warning-bg); color: #78350f; border-color: #fde29d; }
.alert.info  { background: var(--primary-light); color: #1e3a5f; border-color: #c3d7f2; }

/* Modal */
.modal-bg {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 18px;
}
.modal-bg.show { display: flex; }
.modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  padding: 22px 24px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
  max-height: 92vh; overflow-y: auto;
}
.modal h3 { font-size: 17px; margin-bottom: 12px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- Halaman login ---------- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1b3352 0%, #2f5b95 55%, #3f6fb5 100%);
  padding: 20px;
}
.login-card {
  background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  width: 100%; max-width: 400px; padding: 34px 34px 28px;
}
.login-card .logo-big {
  width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--primary), #3f6fb5);
  display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: 800;
}
.login-card h1 { text-align: center; font-size: 21px; }
.login-card .sub { text-align: center; color: var(--gray-500); font-size: 13px; margin: 4px 0 22px; }
.login-card .field { margin-bottom: 14px; }
.login-card .field label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 5px; }
.login-card .demo { margin-top: 18px; font-size: 12px; color: var(--gray-500);
  background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: 9px; padding: 10px 12px; }

/* ---------- Kamera / FaceID ---------- */
.camera-box {
  position: relative; width: 100%; max-width: 640px; margin: 0 auto;
  border-radius: 14px; overflow: hidden; background: #0f172a;
  aspect-ratio: 4/3;
}
.camera-box video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.camera-box .overlay-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1);
}
.camera-box .cam-hint {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  padding: 10px; color: #cbd5e1; font-size: 13px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
}
.camera-box .cam-status {
  position: absolute; top: 10px; left: 10px; z-index: 5;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(15,23,42,.72); color: #e2e8f0;
  padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 600;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); }
.pill.live .dot { background: #22c55e; animation: pulse 1.2s infinite; }
.pill.gps .dot { background: #38bdf8; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ---------- Tombol hamburger (menu mobile) ---------- */
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-left h1 { font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-btn {
  display: none; /* hanya tampil pada layar sempit (lihat media query) */
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px; padding: 0;
  background: transparent; border: none; border-radius: 10px; cursor: pointer;
}
.menu-btn span {
  display: block; width: 22px; height: 2.5px; border-radius: 2px;
  background: var(--gray-700); transition: transform .22s, opacity .18s;
}
.menu-btn.aktif span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-btn.aktif span:nth-child(2) { opacity: 0; }
.menu-btn.aktif span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Backdrop sidebar mobile ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(15, 23, 42, .5);
  display: none;
}
.backdrop.tampil { display: block; }

/* ---------- Captcha berlapis (login offline, revisi 4.44) ---------- */
.captcha-box {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 8px; padding: 10px 12px;
}
.captcha-box img {
  display: block; border-radius: 6px;
  border: 1px solid var(--gray-200);
  background: #fff; flex: 0 0 auto;
}
.captcha-box .btn { flex: 0 0 auto; }

/* revisi 4.45: tombol teks "Ganti" diganti TOMBOL IKON REFRESH MELINGKAR —
 * lingkaran penuh 44px + ikon panah melingkar 20px, senada gaya .btn.secondary;
 * ikon murni (tanpa teks) sehingga aksesibilitas dipenuhi aria-label di HTML. */
.captcha-refresh {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  background: #fff; color: var(--gray-700);
  cursor: pointer; line-height: 1;
  font-family: inherit;
  transition: color .15s, border-color .15s, filter .15s, transform .05s;
}
.captcha-refresh svg { width: 20px; height: 20px; display: block; }
.captcha-refresh:hover { color: var(--primary); border-color: var(--primary); filter: brightness(.97); }
.captcha-refresh:active { transform: translateY(1px); }
.captcha-refresh:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.captcha-refresh.putar svg { animation: ikonPutarPenuh .6s ease; }
@keyframes ikonPutarPenuh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .captcha-refresh.putar svg { animation: none; }
}
#captchaJawab {
  text-transform: uppercase; letter-spacing: .18em;
  font-weight: 700; text-align: center;
}
.hint { font-size: 12px; color: var(--gray-500, #64748b); margin-top: 4px; }

/* Honeypot (revisi 4.44): di luar layar — manusia tidak melihat & tidak
 * mengisi; bot pengisi-form otomatis sering mengisi semua field. */
.honi {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden; visibility: hidden;
}

/* ---------- Kiosk ---------- */
.kiosk-page {
  min-height: 100vh; background: linear-gradient(160deg, #101b30, #1e3a5f 60%, #2f5b95);
  color: #e7eefb; display: flex; flex-direction: column;
  font-size: 16px;
}
.kiosk-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 26px; }
.kiosk-top .sk { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.kiosk-top .time { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kiosk-top .date { text-align: right; font-size: 13px; opacity: .8; }
.kiosk-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 20px 30px; }
.kiosk-panel { width: 100%; max-width: 900px; }
.kiosk-camera {
  position: relative; border-radius: 20px; overflow: hidden; background: #050a15;
  border: 3px solid rgba(255,255,255,.14);
}
.kiosk-camera video { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transform: scaleX(-1); }
.kiosk-camera canvas.overlay { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1); }
.kiosk-actions { display: flex; gap: 16px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.kiosk-btn {
  padding: 16px 40px; border-radius: 14px; border: none; cursor: pointer;
  font-size: 18px; font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff;
  box-shadow: 0 10px 26px rgba(245,158,11,.4);
  transition: transform .1s, filter .15s;
}
.kiosk-btn:hover { filter: brightness(1.06); }
.kiosk-btn:active { transform: scale(.98); }
.kiosk-btn:disabled { opacity: .5; cursor: wait; }
.kiosk-btn.ghost { background: rgba(255,255,255,.12); box-shadow: none; font-size: 15px; padding: 12px 26px; }

.kiosk-result {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(5,10,21,.88); backdrop-filter: blur(4px);
}
.kiosk-result.show { display: flex; }
.kiosk-result .box {
  background: #fff; color: var(--gray-900); border-radius: 20px;
  padding: 34px 44px; text-align: center; max-width: 460px; width: 92%;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.kiosk-result .box .title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.kiosk-result .box .nama { font-size: 26px; font-weight: 800; color: var(--primary); margin: 8px 0 2px; }
.kiosk-result .box .kelas { color: var(--gray-500); }
.kiosk-result .box .detail { margin-top: 14px; font-size: 15px; line-height: 1.9; }
.kiosk-result .box .emoji-icon { font-size: 52px; margin-bottom: 8px; }

/* Gerbang PIN masuk kiosk (revisi 4.2) */
.kiosk-gate { z-index: 300; }
.kiosk-gate .gate-box { max-width: 380px; }
.kiosk-gate .gate-form { margin-top: 14px; text-align: center; }
.kiosk-gate .pin-input {
  width: 100%; font-size: 26px; font-weight: 800; letter-spacing: 10px;
  text-align: center; padding: 12px 10px; border: 2px solid var(--gray-200);
  border-radius: 14px; outline: none; background: var(--gray-50);
  color: var(--gray-900);
}
.kiosk-gate .pin-input:focus { border-color: var(--primary); }
.kiosk-gate .pin-pesan { min-height: 22px; margin-top: 8px; font-size: 13.5px; color: var(--danger); font-weight: 600; }
.kiosk-gate .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 16px; }
.kiosk-gate .keypad button {
  padding: 12px 0; font-size: 20px; font-weight: 800; border-radius: 12px;
  border: 1px solid var(--gray-200); background: var(--gray-50); color: var(--gray-900);
  cursor: pointer; min-height: 48px; /* target sentuh >= 44px (tablet kiosk) */
  transition: background .12s, transform .08s;
}
.kiosk-gate .keypad button:hover { background: var(--gray-200); }
.kiosk-gate .keypad button:active { transform: scale(.96); background: var(--gray-200); }
.kiosk-result.fade { transition: opacity .25s; opacity: 0; }

/* Kiosk mobile (revisi 4.2) — header ringkas agar tidak overflow di layar sempit */
@media (max-width: 720px) {
  .kiosk-top { flex-wrap: wrap; gap: 6px 10px; padding: 12px 14px; }
  .kiosk-top .sk { font-size: 15px; }
  .kiosk-top .sk span[style*="font-size:26px"] { font-size: 18px; }
  .kiosk-top .time { font-size: 22px; margin-left: auto; }
  .kiosk-top .date { text-align: left; font-size: 12px; flex-basis: 100%; order: 3; }
  .kiosk-body { padding: 8px 12px 20px; }
  .kiosk-btn { padding: 14px 22px; font-size: 16px; }
  .kiosk-btn.ghost { font-size: 14px; padding: 12px 18px; }
  .kiosk-result .box { padding: 24px 18px; }
  .kiosk-gate .gate-box { max-width: 100%; }
}

.kiosk-disabled {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--gray-100); text-align: center; padding: 30px;
}
.kiosk-disabled .box { background:#fff; border-radius:16px; padding:40px 46px; box-shadow: var(--shadow); border:1px solid var(--gray-200); }

/* Progress bar face loading */
.face-loading { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 26px; }
.face-loading .bar { width: 260px; height: 8px; border-radius: 99px; background: var(--gray-200); overflow: hidden; }
.face-loading .bar > div { height: 100%; width: 0%; background: var(--primary); transition: width .3s; }
.face-loading small { color: var(--gray-500); }

/* Utility */
.mt-1{margin-top:8px}.mt-2{margin-top:14px}.mt-3{margin-top:20px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:14px}
.flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.muted{color:var(--gray-500);font-size:13px}
.center{text-align:center}
.hidden{display:none!important}
.tabular{font-variant-numeric:tabular-nums}

/* ==== Tab sub-laporan (revisi 4.3: Laporan Presensi 3 sub-laporan) ==== */
.tab-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; border-bottom: 2px solid var(--gray-100); }
.tab-btn {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: #fff; border: 1px solid var(--gray-200); border-bottom: none;
  border-radius: 9px 9px 0 0; padding: 10px 16px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 14px; color: var(--gray-600);
  min-height: 44px; /* target sentuh mobile */
}
.tab-btn small { font-weight: 500; font-size: 11.5px; color: var(--gray-500); }
.tab-btn:hover { color: var(--primary); background: #f8fbff; }
.tab-btn.active {
  color: var(--primary); background: var(--primary-light, #e8f1ff);
  border-color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary);
}
.tab-btn.active small { color: var(--primary); }
@media (max-width: 720px) {
  .tab-bar { gap: 6px; }
  .tab-btn { padding: 8px 12px; font-size: 13px; flex: 1 1 auto; }
  .tab-btn small { font-size: 10.5px; }
}

/* ==== Revisi 4.28: tab-bar SATU BARIS (Laporan Presensi 4 sub-menu) ====
 * Desktop: keempat tab membagi satu baris sama lebar (nowrap) sehingga
 * sub-menu terakhir tidak turun ke bawah; teks kecil boleh melipat 2 baris.
 * Mobile: tetap SATU baris yang bisa digeser (scroll horizontal). */
@media (min-width: 721px) {
  .tab-bar.satu-baris { flex-wrap: nowrap; }
  .tab-bar.satu-baris .tab-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 10px;
    align-items: stretch;
    text-align: left;
  }
  .tab-bar.satu-baris .tab-btn small { white-space: normal; overflow-wrap: break-word; }
}
@media (max-width: 720px) {
  .tab-bar.satu-baris {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  .tab-bar.satu-baris .tab-btn { flex: 0 0 auto; min-width: 150px; }
  .tab-bar.satu-baris .tab-btn small { white-space: normal; }
}

/* Revisi 4.33: chip "Sortasi cepat" v4.28 diganti dropdown "Sortasi (Peran)"
   pada form filter Laporan Presensi — rule .sortasi-bar/.sortasi-label/.chip
   dihapus karena tidak dipakai lagi. */

/* ==================================================================
   RESPONSIVE (revisi v4 — mobile friendly)
   Sidebar menjadi off-canvas dengan tombol hamburger; tidak pernah
   menghilang total seperti versi sebelumnya.
   ================================================================== */
@media (max-width: 920px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Sidebar off-canvas: keluar dari layar, muncul saat .buka */
  .menu-btn { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    will-change: transform;
    box-shadow: none;
  }
  .sidebar.buka {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
  }
  .main { margin-left: 0; }

  /* target sentuh nyaman di sidebar mobile */
  .sidebar nav a { padding: 12px; }
  .topbar { padding: 10px 14px; }
  .topbar .userbox .meta small { display: none; }
  .content { padding: 18px 14px 34px; }
}

/* Revisi 4.13.1 — viewport PENDEK (laptop DPI 125–150%, netbook, ponsel
   lanskap): seluruh sidebar dirapatkan ekstra agar menu tetap muat tanpa
   scroll. Diletakkan SETELAH blok lebar-920px di atas supaya menang
   saat keduanya berlaku sekaligus (ponsel lanskap). */
@media (max-height: 660px) {
  .sidebar .brand { padding: 10px 16px 8px; }
  .sidebar .brand .logo { width: 36px; height: 36px; border-radius: 9px; }
  .sidebar nav { padding: 6px 10px 8px; }
  .sidebar nav a { padding: 6px 12px; margin: 1px 0; font-size: 14px; }
  .sidebar nav a svg { width: 19px; height: 19px; }
  .sidebar .side-foot { padding: 8px 16px; font-size: 11.5px; }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-4.satu-kolom { grid-template-columns: 1fr; }

  /* kartu & tombol lebih lega di layar kecil */
  .card { padding: 16px 14px; }
  .btn { min-height: 44px; }
  .btn.sm { min-height: 36px; }
  /* Revisi 4.5: tombol tindakan Sakit/Izin/Alpa di modal detail sesi — target sentuh >= 40px */
  #isiDetail .btn.sm { min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
  .topbar .userbox .meta b { font-size: 12.5px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-left h1 { font-size: 16.5px; }
  .userbox-btn { gap: 8px; padding: 5px 6px; } /* revisi 4.6: dropdown profil */

  /* statistik dashboard 2 kolom (tidak 1 memanjang) */
  .grid.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 13px 14px; }
  .stat .num { font-size: 21px; }

  /* modal nyaman di ponsel */
  .modal { padding: 18px 16px; }
  .modal-bg { padding: 12px; }

  /* form baris menyusun ke bawah otomatis */
  .row > * { min-width: 100%; }

  /* kamera presensi tidak terlalu tinggi */
  .camera-box { aspect-ratio: 3/4; }

  /* tombol aksi presensi bertumpuk penuh */
  .camera-box + .mt-2.flex button { width: 100%; }

  /* tabel tetap bisa digeser horizontal */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* login card */
  .login-card { padding: 26px 20px 22px; }

  /* reCAPTCHA widget menyusut rapi */
  .g-recaptcha { transform: scale(.88); transform-origin: 0 0; }
}

@media (max-width: 400px) {
  .grid.grid-4 { grid-template-columns: 1fr 1fr; }
  .content { padding: 14px 10px 30px; }
  .topbar .userbox { gap: 8px; }
  .avatar { width: 34px; height: 34px; }
  .userbox-btn .caret { display: none; } /* revisi 4.6: hemat ruang layar sempit */
  .usermenu { min-width: 200px; }
}


/* ================================================================
 * REVISI 4.1 — ceklis hapus massal (kelola pengguna & kelola kelas)
 * Kolom ceklis: target sentuh besar (mudah di mobile), rapi di tabel.
 * ================================================================ */
.tbl td.cek,
.tbl th:first-child:has(input[type="checkbox"]) {
  text-align: center;
  vertical-align: middle;
  width: 40px;
  white-space: nowrap;
}
.tbl input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--primary, #2f5b95);
  vertical-align: middle;
}
.tbl input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .35;
}
/* area sentuh 44px di mobile tanpa memperbesar kotaknya */
@media (max-width: 720px) {
  .tbl td.cek { width: 44px; }
  .tbl td.cek input[type="checkbox"] {
    width: 22px;
    height: 22px;
    /* perbesar area sentuh dengan pseudo-elemen transparan */
    position: relative;
  }
  .tbl td.cek input[type="checkbox"]::before {
    content: "";
    position: absolute;
    inset: -12px;
  }
}
#bulkBar label, #bulkBarKelas label { cursor: pointer; }
#bulkBar input[type="checkbox"], #bulkBarKelas input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary, #2f5b95);
}


/* ================================================================
 * REVISI 4.7 — logo sekolah, favicon & brand editor (Pengaturan)
 * Logo custom (img) menggantikan kotak huruf "P" bila admin sudah
 * mengunggah logo. Rasio gambar bebas — object-fit: contain.
 * ================================================================ */

/* --- logo di sidebar (img, bukan div huruf) --- */
.sidebar .brand img.logo {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent);
  object-fit: contain; padding: 3px;
}

/* --- logo di halaman login (img) --- */
.login-card img.logo-big {
  background: linear-gradient(135deg, var(--primary), #3f6fb5);
  object-fit: contain; padding: 7px;
}

/* --- logo di header kiosk --- */
.kiosk-top .kiosk-logo {
  height: 42px; width: auto; max-width: 170px;
  border-radius: 8px; background: rgba(255,255,255,.94);
  object-fit: contain; padding: 3px;
}
@media (max-width: 720px) {
  .kiosk-top .kiosk-logo { height: 30px; max-width: 120px; }
}

/* --- editor logo & favicon di Pengaturan (admin) --- */
.brand-edit {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 12px 0; margin-top: 6px;
  border-top: 1px dashed var(--gray-300);
}
.brand-prev { flex: 0 0 auto; text-align: center; min-width: 96px; }
.brand-prev small { display: block; margin-top: 4px; font-size: 11.5px; }
.prev-box {
  width: 64px; height: 64px; border-radius: 14px;
  border: 1px solid var(--gray-300); background: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.prev-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prev-box.prev-logo span {
  width: 44px; height: 44px; border-radius: 11px;
  background: linear-gradient(135deg, var(--primary), #3f6fb5);
  color: #fff; font-weight: 800; font-size: 22px;
  display: grid; place-items: center;
}
.prev-box.prev-fav { width: 48px; height: 48px; border-radius: 10px; }
.brand-fields { flex: 1 1 auto; }
.brand-fields input[type="file"] { font-size: 13px; }
.brand-fields .row-btn { display: flex; gap: 8px; margin: 8px 0 6px; flex-wrap: wrap; }
.brand-fields .row-btn .btn { min-height: 40px; }
@media (max-width: 720px) {
  .brand-edit { flex-direction: column; gap: 10px; }
  .brand-prev { display: flex; align-items: center; gap: 10px; text-align: left; }
  .brand-prev small { margin-top: 0; }
}

/* --- editor suara kiosk kustom di Pengaturan (revisi 4.8) --- */
.suara-edit {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 12px 0; margin-top: 6px;
  border-top: 1px dashed var(--gray-300);
}
.suara-toggle { flex: 0 0 250px; }
.suara-toggle small { display: block; margin-top: 4px; font-size: 11.5px; }
.suara-fields { flex: 1 1 auto; }
.suara-fields input[type="file"] { font-size: 13px; }
.suara-fields .row-btn { display: flex; gap: 8px; margin: 8px 0 6px; flex-wrap: wrap; }
.suara-fields .row-btn .btn { min-height: 40px; }
.suara-fields .audio-prev { display: block; width: 100%; max-width: 420px; height: 36px; margin: 4px 0; }
.suara-fields small { display: block; margin-top: 2px; }
@media (max-width: 720px) {
  .suara-edit { flex-direction: column; gap: 10px; }
  .suara-toggle { flex: 1 1 auto; }
}

/* ==================================================================
 * RESTORE DATA (revisi 4.10, dipadukan ke v4.11)
 * ================================================================== */
.restore-sumber { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 10px; }
.restore-sumber label {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px;
  color: var(--gray-700); cursor: pointer; padding: 6px 4px;
  border-radius: 8px;
}
.restore-sumber label:hover { background: var(--primary-light); }
.restore-sumber input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); flex: 0 0 auto; }
#pilihBackupRestore { width: 100%; }
#berkasRestore { width: 100%; font-size: 13px; }
#konfirmasiRestore { text-align: center; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
#pratinjauRestore ul { margin: 6px 0 0 18px; }
#pratinjauRestore li { margin: 3px 0; }
@media (max-width: 720px) {
  .restore-sumber label { padding: 9px 4px; }
}

/* --- Backup & Restore (revisi 4.9) --- */
.progress-wrap { margin: 10px 0; }
.progress-bar {
  height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--gray-200, #e5e7eb); border: 1px solid var(--gray-300, #d1d5db);
}
.progress-bar > div {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--primary), #3f6fb5);
  transition: width .25s ease;
}

/* --- Paginasi daftar pengguna (revisi 4.9) --- */
.pager {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}
.pager .info { font-size: 12.5px; color: var(--gray-600, #4b5563); margin-right: auto; }
.pager .btn-hal {
  min-width: 38px; min-height: 36px; padding: 4px 10px;
  border: 1px solid var(--gray-300, #d1d5db); border-radius: 9px;
  background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 600;
  color: var(--gray-700, #374151);
}
.pager .btn-hal:hover:not(:disabled):not(.aktif) { background: var(--gray-100, #f3f4f6); }
.pager .btn-hal.aktif {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.pager .btn-hal:disabled { opacity: .45; cursor: not-allowed; }
.pager .ellipsis { padding: 0 2px; color: var(--gray-400, #9ca3af); font-weight: 700; }
@media (max-width: 560px) {
  .pager .info { width: 100%; margin-bottom: 4px; }
}

/* --- Jadwal Mengajar: dua kolom + paginasi (revisi 4.12) --- */
.jadwal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start; /* kolom yang lebih pendek tidak ikut meregang */
}
.jadwal-grid.satu-kolom { grid-template-columns: 1fr; }
.jadwal-grid .kol-jadwal { min-width: 0; } /* tabel di dalam kolom bisa discroll-x sendiri */
.jadwal-grid .kol-jadwal-judul {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gray-500, #6b7280);
  margin: 0 0 6px 2px;
}
@media (max-width: 920px) {
  /* layar sempit: dua kolom ditumpuk menjadi satu kolom penuh */
  .jadwal-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* --- Jadwal Mengajar: sortasi per KELAS (revisi 4.16) ---
   Saat daftar diurutkan per kelas, tiap kelompok kelas mendapat baris
   judul pita di dalam tabel; kelompok tidak terpotong antar kolom. */
table.tbl tr.grup-kelas > td {
  background: var(--gray-50, #f9fafb);
  border-bottom: 2px solid var(--border, #e2e8f0);
  border-top: 1px solid var(--border, #e2e8f0);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 7px 12px;
}
table.tbl tr.grup-kelas:first-of-type > td { border-top: none; }

/* --- Sortasi kolom tabel (revisi 4.13: Daftar Pengguna & Daftar Rekam Wajah) --- */
table.tbl th.th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.tbl th.th-sort:hover { color: var(--primary, #2563eb); }
table.tbl th.th-sort.aktif { color: var(--primary, #2563eb); }

/* --- Daftar Rekam Wajah (revisi 4.13): tombol badge utk membuka baris sampel --- */
.btn-tgl-sampel {
  border: none; cursor: pointer; font: inherit;
  /* tampil seperti badge green */
}
.btn-tgl-sampel:hover { filter: brightness(.94); }
table.tbl tr.baris-sampel > td { background: var(--gray-50, #f9fafb); }

/* ==================================================================
 * QR GENERATOR (revisi 4.14) — bagikan tautan presensi via kode QR
 * ================================================================== */
.preset-list { display: flex; flex-direction: column; gap: 8px; }
.preset-list label {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 10px 12px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.preset-list label:hover { border-color: var(--primary); background: #fbfdff; }
.preset-list label:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.preset-list input[type="radio"] { margin-top: 3px; accent-color: var(--primary); flex: 0 0 auto; }
.preset-list b { font-size: 14px; }

.qr-prev {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  padding: 14px; display: flex; justify-content: center;
}
.qr-prev svg { width: 100%; max-width: 340px; height: auto; display: block; }
.qr-caption { text-align: center; margin-top: 10px; font-weight: 700; }
.qr-caption .url {
  display: block; font-weight: 400; font-size: 12.5px;
  color: var(--gray-500); word-break: break-all; margin-top: 2px;
}
.list-id { margin: 6px 0 0 20px; }
.list-id li { margin: 5px 0; }

/* Cetak: hanya QR + keterangan yang keluar ke kertas (tanpa menu aplikasi).
   body.qr-page diset oleh halaman qr_generator.php ($PAGE_BODY_CLASS).
   Memakai pola visibility (tahan struktur DOM berapa pun kedalamannya). */
@media print {
  @page { margin: 10mm; }
  body.qr-page .sidebar, body.qr-page .topbar, body.qr-page .backdrop { display: none !important; }
  body.qr-page .main { margin-left: 0; }
  body.qr-page .content { padding: 0; }
  body.qr-page * { visibility: hidden; }
  body.qr-page #areaCetak, body.qr-page #areaCetak * { visibility: visible; }
  body.qr-page #areaCetak {
    position: fixed; inset: 0; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px;
  }
  body.qr-page .qr-prev { border: none; padding: 0; }
  body.qr-page .qr-prev svg { width: 68vmin; max-width: 170mm; }
  body.qr-page .qr-caption { font-size: 15px; }
  body.qr-page .qr-caption .url { font-size: 11.5px; }
}

/* ===== Revisi 4.17 — Tahun Ajaran / Naik Kelas / Alumni ===== */

/* kartu konteks TA aktif */
.ta-aktif-box {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 14px 18px;
  background: var(--primary-light, #eef2ff); border: 1px solid var(--primary, #4f6ef7);
  border-radius: 12px;
}
.ta-aktif-nama { font-size: 24px; font-weight: 800; letter-spacing: .5px; color: var(--primary, #3b5bdb); }
.ta-badge-semester { font-size: 13px; font-weight: 700; padding: 4px 12px; }

/* baris statistik mini (siswa aktif / alumni / pindah / wali) */
.stat-mini-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.stat-mini {
  flex: 1 1 130px; min-width: 120px; text-align: center;
  background: var(--gray-100, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 10px 8px;
}
.stat-mini b { display: block; font-size: 22px; line-height: 1.1; }
.stat-mini span { font-size: 12px; color: var(--gray-500, #64748b); }

/* baris TA aktif pada tabel */
.tbl tr.baris-aktif td { background: rgba(79, 110, 247, .06); }

/* label status alumni/pindah di tabel pengguna */
.badge.status-alumni  { background: #fef3c7; color: #92400e; } /* kuning tua utk alumni */
.badge.status-pindah { background: #ede9fe; color: #5b21b6; }

/* tabel pratinjau naik kelas: pilihan tujuan tidak melebar */
#nkWrap select { max-width: 190px; }

/* ====== revisi 4.18: pembatalan naik kelas + pratinjau ceklis massal ====== */
/* baris riwayat yang sudah dibatalkan: redup, tidak menggangu pembacaan */
.tbl tr.baris-batal td { opacity: .55; background: rgba(100, 116, 139, .05); }
.tbl tr.baris-batal td:nth-child(4) small { text-decoration: none; }

/* badge pembatalan merah lembut */
.badge.red { background: #fee2e2; color: #b91c1c; }

/* baris pratinjau naik kelas yang tercentang */
.tbl tr.baris-pilih td { background: rgba(34, 197, 94, .07); }

/* kontrol ceklis & paginasi pratinjau naik kelas */
.nk-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.nk-toolbar select, .nk-toolbar input[type="search"] { max-width: 190px; }
.nk-paginasi { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.nk-paginasi .pg-info { color: var(--gray-500, #64748b); }
.nk-paginasi button { min-width: 34px; }
.badge.batas-halaman { background: #e0f2fe; color: #075985; }

/* ====== revisi 4.23: paginasi Laporan Presensi Umum (Rekap & Detail Harian) ====== */
/* padanan .nk-paginasi (naik kelas v4.18) — dipakai laporan.js */
.paginasi-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px; font-size: 13px; }
.paginasi-bar .pg-info { color: var(--gray-500, #64748b); }
.paginasi-bar button { min-width: 34px; }
.paginasi-bar select { max-width: 140px; }

/* --- Revisi 4.37: chip status filter log WA (Notifikasi) --- */
.chip-st {
  display: inline-flex; gap: 6px; align-items: center;
  border: 1px solid var(--gray-300, #d1d5db); border-radius: 999px;
  background: #fff; color: var(--gray-700, #374151);
  padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.chip-st:hover { border-color: var(--primary, #2563eb); }
.chip-st.aktif { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb); font-weight: 600; }

/* --- Revisi 4.37: isi pesan lengkap log WA (buka/tutup) --- */
.pesan-penuh {
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  background: var(--gray-100, #f3f4f6); border: 1px dashed var(--gray-300, #d1d5db);
  white-space: pre-wrap; word-break: break-word; font-size: 12.5px; max-width: 420px;
}
.btn-tgl-pesan { font-size: 11.5px; padding: 2px 8px; }

/* --- Revisi 4.37: Template Pesan WA di Pengaturan --- */
.tpl-wa { margin-top: 12px; }
.tpl-wa .tpl-wa-baris { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.tpl-wa label { font-weight: 600; font-size: 13px; }
.tpl-wa-area {
  width: 100%; min-height: 150px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; white-space: pre; overflow-x: auto;
}
.tpl-wa-prev {
  margin-top: 6px; padding: 10px 12px; border-radius: 8px;
  background: #ecfdf5; border: 1px solid #a7f3d0;
  white-space: pre-wrap; word-break: break-word; font-size: 12.5px; color: #065f46;
}
.tpl-wa-prev:empty { display: none; }

/* ==================================================================
 * Revisi 4.43 — KALENDER HARI LIBUR (halaman Hari Libur)
 * Tampilan satu bulan penuh: MERAH = tanggal libur (keterangan tampil
 * di dalam sel), HIJAU = hari aktif presensi (pengaturan_presensi),
 * ABU-ABU = hari tidak aktif (tidak dihitung presensi/laporan).
 * Kolom mulai Senin; Admin/TU dapat klik sel (tandai/hapus libur).
 * ================================================================== */
.kal-judul { text-align: center; margin: 12px 0 0; font-size: 16px; }
.kal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.kal-hari-head {
  text-align: center; padding: 4px 0 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gray-500);
}
.kal-sel {
  position: relative;
  min-height: 62px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
  background: #edf1f7; /* nonaktif: abu jelas terlihat (bukan putih) */
  color: var(--gray-500);
  font-size: 13.5px; font-weight: 700;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.kal-sel.kosong { visibility: hidden; }
.kal-sel.aktif { background: var(--success-bg); border-color: #b5e6c8; color: #15803d; }
.kal-sel.libur { background: var(--danger-bg); border-color: #f3c4c4; color: var(--danger); }
.kal-sel.nonaktif { background: #edf1f7; border-color: var(--gray-300); color: var(--gray-500); }
.kal-sel.hari-ini { outline: 2px solid var(--primary); outline-offset: -2px; }
.kal-sel.bisa-klik { cursor: pointer; }
.kal-sel.bisa-klik:hover { filter: brightness(.97); border-color: var(--primary); }
.kal-sel .kal-ket {
  font-size: 10.5px; font-weight: 600; line-height: 1.25; color: var(--danger);
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kal-sel .kal-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--primary);
}
.kal-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.kal-legenda .kal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--gray-700);
}
.kal-legenda .kal-chip::before {
  content: ''; width: 13px; height: 13px; border-radius: 4px;
  border: 1px solid var(--gray-300); background: #edf1f7; flex: 0 0 auto;
}
.kal-legenda .kal-chip.c-libur::before { background: var(--danger-bg); border-color: #f3c4c4; }
.kal-legenda .kal-chip.c-aktif::before { background: var(--success-bg); border-color: #b5e6c8; }
.kal-legenda .kal-chip.c-abu::before { background: #edf1f7; border-color: var(--gray-300); }
@media (max-width: 640px) {
  .kal-grid { gap: 4px; }
  .kal-sel { min-height: 46px; padding: 4px 5px; font-size: 12px; }
  /* layar sempit: keterangan & label hanya via tooltip (title) sel */
  .kal-sel .kal-ket, .kal-sel .kal-label { display: none; }
}