/* ==========================================================================
   ABSEN & PENILAIAN SISWA — gaya utama
   Warna: biru · putih · aksen emas. Mobile-first. Mendukung mode gelap/terang.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --blue-50: #EFF5FF;
  --blue-100: #DBE8FE;
  --blue-200: #BFD6FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --navy: #0B2545;
  --gold: #E0A200;
  --gold-400: #F7C948;
  --gold-100: #FFF3D1;
  --green: #0E9F6E;
  --red: #DC2626;
  --orange: #F97316;
  --purple: #7C3AED;

  --bg: #EEF3FB;
  --bg-soft: #F7FAFF;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: #FFFFFF;
  --surface-2: rgba(255, 255, 255, 0.6);
  --border: rgba(13, 38, 76, 0.10);
  --border-strong: rgba(13, 38, 76, 0.18);
  --ink: #0E1B34;
  --ink-2: #33455F;
  --muted: #5D6E8A;
  --shadow: 0 10px 30px rgba(11, 37, 69, 0.10), 0 2px 8px rgba(11, 37, 69, 0.06);
  --shadow-sm: 0 4px 14px rgba(11, 37, 69, 0.08);
  --radius: 16px;
  --radius-sm: 12px;
  --sidebar-w: 252px;
  --topbar-h: 64px;
  /* Halo lembut di sekeliling kartu login (lihat .login-card) — pengganti selubung penuh. */
  --card-halo: 0 0 60px 18px rgba(255, 255, 255, 0.26);
}
[data-theme="dark"] {
  --bg: #070E1C;
  --bg-soft: #0C1626;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-solid: #101B2E;
  --surface-2: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);
  --ink: #E9F0FA;
  --ink-2: #C4D2E6;
  --muted: #9DB0CB;
  --blue-50: rgba(59, 130, 246, 0.14);
  --blue-100: rgba(59, 130, 246, 0.22);
  --gold-100: rgba(224, 162, 0, 0.16);
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --card-halo: 0 0 60px 18px rgba(0, 0, 0, 0.30);
}
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 8% -6%, rgba(37, 99, 235, 0.16), transparent 62%),
    radial-gradient(880px 460px at 102% 4%, rgba(224, 162, 0, 0.14), transparent 60%),
    radial-gradient(760px 520px at 50% 108%, rgba(29, 78, 216, 0.12), transparent 60%),
    var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}
img { max-width: 100%; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .35em; line-height: 1.22; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .7em; }
[hidden] { display: none !important; }

/* ---------- Boot ---------- */
.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; }

/* Logo PGM Papua Selatan: berkasnya JPEG berlatar PUTIH (bukan transparan), jadi
   diberi bingkai putih + sudut membulat agar terlihat rapi di atas latar berwarna
   (navbar navy / kartu kaca). object-fit contain menjaga logo tidak terpotong. */
.logo-img {
  object-fit: contain;
  background: #fff;
  border-radius: 14px;
  padding: 4px;
  box-shadow: 0 2px 10px rgba(11, 37, 69, 0.22);
}
.boot-logo { width: 92px; height: 92px; border-radius: 22px; padding: 8px; }
.boot h1 { font-size: 1.1rem; letter-spacing: .04em; }
.boot p { color: var(--muted); max-width: 320px; font-size: .86rem; }
.boot-spinner, .spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--blue-100); border-top-color: var(--blue-700);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-block { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 42px 16px; color: var(--muted); }

/* ---------- Login ---------- */
/* Halaman masuk = layar pertama yang muncul saat siswa membuka link aplikasi.
   LATAR PENUH SATU LAYAR (permintaan pemilik): dua gambar bersama-sama menutupi
   SELURUH latar — di layar lebar gambar kiri mengisi separuh kiri & gambar kanan
   separuh kanan; di layar sempit (≤900px) gambar kiri di ATAS dan kanan di BAWAH.
   Setiap gambar memakai `object-fit: cover` sehingga tidak ada bagian latar yang
   kosong (tidak ada bidang putih) walaupun rasionya berbeda dari selnya. */
.login-wrap { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 22px 16px 40px; overflow: hidden; }
/* ⚠️ WAJIB `position: fixed` + ukuran tinggi yang PASTI (100vh/100dvh), dan setiap gambar
   diletakkan ABSOLUT mengisi tepat separuhnya. Jangan memakai grid dengan baris otomatis:
   dengan baris otomatis, tinggi sel mengikuti ukuran ASLI gambar (gambar kanan jadi 1545px,
   jauh lebih tinggi dari layar) sehingga pembagian kiri/kanan tidak rapi dan latar melebihi
   layar. Jangan diubah kembali ke pola grid. */
.login-deco {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  height: 100vh; height: 100dvh;
}
.login-deco .deco {
  position: absolute; display: block; object-fit: cover;
  width: 50%; height: 100%;      /* layar lebar: kiri = separuh kiri, kanan = separuh kanan */
}
.login-deco .deco-kiri { left: 0; top: 0; object-position: center top; }
/* ⚠️ GAMBAR KANAN = potret orang: KEPALA (rambut + wajah) berada di y 4,9%–33,9% gambar.
   Dengan `object-position: center` (bawaan), `object-fit: cover` memotong bagian atas
   sebesar 11–15% pada layar laptop (mis. 1440×900, 1366×768, 1920×1080) sehingga
   KEPALA TERPOTONG (keluhan pemilik). Karena itu gambar ini WAJIB ditempel di ATAS
   (`center top`) — yang terpotong justru bagian bawah (kaki), bukan kepala.
   Jangan diganti kembali ke center/`center bottom`. */
.login-deco .deco-kanan { right: 0; top: 0; object-position: center top; }
/* ⚠️ TIDAK ADA selubung penuh di sini — pernah dipakai `radial-gradient` di tengah halaman,
   tetapi terbukti MEMUDARKAN gambar (wilayah kepala paling parah: selisih rata-rata 22
   tingkat lebih terang di 1440×900 dan sampai 40 tingkat di 1024×768) sehingga pemilik
   melihat kepalanya "kabur/kelabu". Kartu login TIDAK memerlukan selubung itu untuk
   keterbacaan: kartu sudah 82% putih di mode terang (kontras tulisan terukur 14,6:1) dan
   88% pekat di mode gelap (13,9:1) — jauh di atas syarat 4,5:1. Pemisah kartu dari foto
   memakai halo lembut `--card-halo` pada `.login-card`.
   Jangan menambahkan kembali selubung penuh tanpa mengukur kontras DAN memeriksa bahwa
   gambar kepala tidak ikut memudar (uji: test/bg-piksel.py, bagian "tidak ikut dipudarkan"). */
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; box-shadow: var(--shadow), var(--card-halo);
  backdrop-filter: blur(20px) saturate(160%);
  /* padding dirapatkan (dari 26px) supaya kartu muat di layar laptop 768px tanpa digulir
     setelah teks pembuka di halaman ini bertambah panjang (permintaan pemilik 28 Sep 2026). */
  padding: 22px 20px; text-align: left;
}
/* ⚠️ Mode gelap: kartu login dibuat PEKAT (bukan nyaris transparan seperti halaman lain).
   Latar halaman ini berupa FOTO — dengan `--surface` mode gelap (putih 5,5%) tulisan terang
   tenggelam di atas bagian gambar yang cerah (terukur kontras 2,2:1, syarat minimal 4,5:1).
   Aturan ini harus berada DI LUAR media query supaya berlaku di semua ukuran layar
   (pernah tersisip di dalam @media ≤900px sehingga HP benar tapi laptop salah).
   Jangan dihapus dan jangan dipindah ke dalam media query. */
[data-theme="dark"] .login-card { background: rgba(10, 18, 32, 0.88); }
/* Layar TEGAK (HP/tablet berdiri, tinggi ≥ lebar): latar tetap penuh, tetapi gambar
   disusun ATAS–BAWAH — potret (berisi orang) di ATAS supaya kepalanya tampak di ruang
   di atas kartu login, lanskap di bawah.
   ⚠️ Patokan pemisahnya BENTUK LAYAR (`max-aspect-ratio: 3/4` = layar tegak), BUKAN lebar saja.
   Kalau memakai lebar saja (`max-width: 900px`), jendela peramban yang lebar-tapi-pendek
   (mis. 900×600) ikut ditumpuk dan tinggi sel potret menjadi sangat pendek → DAGU/KEPALA
   ikut terpotong (pernah terjadi, terukur bagian atas terlihat hanya 31% padahal kepala
   butuh 33,9%).
   Ambang 3/4 dipilih dengan hitungan: pada tata letak bertumpuk, bagian gambar yang terlihat
   = (lebar gambar / (2 × tinggi gambar)) ÷ (lebar layar / tinggi layar) — untuk gambar potret ini
   = 0,3107 ÷ rasio layar. Supaya kepala (sampai 33,9% tinggi gambar) tetap utuh, rasio layar
   harus ≤ ±0,90; ambang 3/4 (0,75) memberi bagian terlihat ≥ 41% sehingga masih ada margin.
   Layar persegi (mis. 900×900) TIDAK bertumpuk — kalau bertumpuk, sel potret jadi 900×450 dan
   hanya 31% gambar yang terlihat sehingga DAGU terpotong (pernah terjadi). */
@media (max-aspect-ratio: 3/4) {
  .login-deco .deco { width: 100%; height: 50%; }
  .login-deco .deco-kanan { left: 0; right: 0; top: 0; }
  .login-deco .deco-kiri { left: 0; right: 0; top: 50%; }
}
.login-head { text-align: center; margin-bottom: 14px; }
.login-head img { width: 80px; height: 80px; }
.login-head .login-logo { border-radius: 20px; padding: 6px; margin-bottom: 2px; }
.login-head h1 { font-size: 1.28rem; margin-top: 8px; }
.login-head .tagline { color: var(--gold); font-weight: 600; font-size: .82rem; letter-spacing: .01em; }
.login-head .school { color: var(--muted); font-size: .8rem; margin-top: 6px; }
.demo-box { margin-top: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); }
.demo-box h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
/* ⚠️ Kotak pembuka di halaman login berisi KALIMAT penyemangat, bukan label pendek
   ("Cara masuk") seperti dulu. Gaya label lama (huruf besar semua + jarak antar huruf)
   membuat kalimat panjang sulit dibaca, jadi baris pembukanya dimatikan huruf besarnya
   dan dibuat tebal. Jangan dihapus, jangan dikembalikan ke huruf besar semua. */
.demo-box h4.login-quote { text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.demo-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.demo-btn {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-solid); color: var(--ink);
  border-radius: 10px; padding: 9px 11px; font-size: .82rem; text-align: left;
}
.demo-btn:hover { border-color: var(--blue-400); }
.demo-btn small { color: var(--muted); font-size: .72rem; }

/* ---------- Shell ---------- */
.shell { min-height: 100vh; display: flex; }
.sidebar {
  display: none; width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, var(--navy), #12305A 55%, #16386B);
  color: #EAF2FF; padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { display: flex; gap: 10px; align-items: center; padding: 4px 6px 14px; }
.sidebar .brand img { width: 40px; height: 40px; }
.sidebar .brand .brand-logo { border-radius: 11px; padding: 2px; flex: 0 0 auto; }
.sidebar .brand b { font-size: .82rem; line-height: 1.15; display: block; letter-spacing: .02em; }
.sidebar .brand span { font-size: .68rem; color: #A9C2E8; }
.nav-group { margin: 10px 0 4px; font-size: .66rem; letter-spacing: .1em; color: #8FAAD4; padding: 0 8px; text-transform: uppercase; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px;
  color: #D8E6FB; font-size: .88rem; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left;
}
.nav-item:hover { background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }
.nav-item.active { background: linear-gradient(90deg, rgba(59, 130, 246, .95), rgba(37, 99, 235, .75)); color: #fff; box-shadow: var(--shadow-sm); }
.nav-item .ico { width: 22px; text-align: center; font-size: 1rem; }
.nav-item .badge-dot { margin-left: auto; background: var(--gold-400); color: #3A2A00; font-size: .68rem; font-weight: 700; border-radius: 20px; padding: 1px 7px; }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; min-height: var(--topbar-h);
  background: color-mix(in srgb, var(--bg-soft) 82%, transparent);
  border-bottom: 1px solid var(--border); backdrop-filter: blur(16px) saturate(160%);
}
.topbar .tb-title { min-width: 0; }
.topbar .tb-title b { display: block; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .tb-title span { font-size: .74rem; color: var(--muted); }
.topbar .spacer { margin-left: auto; }
.topbar-logo { width: 36px; height: 36px; display: none; border-radius: 10px !important; padding: 2px !important; }
.content { padding: 16px 14px 96px; max-width: 1240px; width: 100%; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); font-size: .85rem; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Bottom nav (mobile) ---------- */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: grid; grid-auto-flow: column;
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  border-top: 1px solid var(--border); backdrop-filter: blur(18px);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottomnav button {
  border: 0; background: transparent; color: var(--muted); font-size: .64rem; display: flex;
  flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; cursor: pointer; border-radius: 10px;
}
.bottomnav button .ico { font-size: 1.15rem; }
.bottomnav button.active { color: var(--blue-700); font-weight: 600; }
[data-theme="dark"] .bottomnav button.active { color: var(--blue-400); }

/* ---------- Kartu & grid ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(160%); padding: 18px;
}
.card + .card, .stack > * + * { margin-top: 18px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head h3 { margin: 0; }
.card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-sub { color: var(--muted); font-size: .8rem; }
.grid { display: grid; gap: 16px; }
/* Kunci anti-overflow: anak grid/flex TIDAK boleh melebar melebihi kolomnya
   (tabel ber-min-width di dalam .table-wrap akan menggulir sendiri). */
.content, .grid, .split, .stack, .card, .main { min-width: 0; max-width: 100%; }
.grid > *, .split > *, .stack > * { min-width: 0; }
.table-wrap, .sheet-wrap, .chart-box { max-width: 100%; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid.auto-sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.section-gap { margin-top: 24px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.tight { gap: 6px; }
.spacer { margin-left: auto; }

.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px; box-shadow: var(--shadow-sm); backdrop-filter: blur(16px);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.stat .label { font-size: .76rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat .value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat .value small { font-size: .78rem; font-weight: 500; color: var(--muted); }
.stat .foot { font-size: .72rem; color: var(--muted); }
.stat.accent-blue { background: linear-gradient(150deg, var(--blue-700), var(--blue-500)); color: #fff; border-color: transparent; }
.stat.accent-blue .label, .stat.accent-blue .foot { color: rgba(255, 255, 255, .84); }
.stat.accent-gold { background: linear-gradient(150deg, #B8860B, var(--gold-400)); color: #2A1E00; border-color: transparent; }
.stat.accent-gold .label, .stat.accent-gold .foot { color: rgba(42, 30, 0, .72); }
.stat.accent-green { background: linear-gradient(150deg, #047857, #10B981); color: #fff; border-color: transparent; }
.stat.accent-green .label, .stat.accent-green .foot { color: rgba(255, 255, 255, .86); }
.stat.accent-red { background: linear-gradient(150deg, #B91C1C, #EF4444); color: #fff; border-color: transparent; }
.stat.accent-red .label, .stat.accent-red .foot { color: rgba(255, 255, 255, .88); }

.hero-absensi { background: linear-gradient(140deg, var(--navy), var(--blue-700)); color: #fff; border-radius: 20px; padding: 20px; box-shadow: var(--shadow); }
.hero-absensi h2 { color: #fff; }
.hero-absensi .muted { color: rgba(255, 255, 255, .82); }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-solid);
  color: var(--ink); font-size: .88rem; font-weight: 600; padding: 10px 14px; line-height: 1.1;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: linear-gradient(120deg, var(--blue-700), var(--blue-500)); border-color: transparent; color: #fff; }
.btn-gold { background: linear-gradient(120deg, #C99000, var(--gold-400)); border-color: transparent; color: #2A1E00; }
.btn-success { background: linear-gradient(120deg, #047857, #10B981); border-color: transparent; color: #fff; }
.btn-danger { background: linear-gradient(120deg, #B91C1C, #EF4444); border-color: transparent; color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 7px 11px; font-size: .8rem; border-radius: 10px; }
.btn-lg { padding: 16px 18px; font-size: 1rem; border-radius: 16px; }
.btn-block { width: 100%; }
.btn-absen { padding: 22px 20px; font-size: 1.05rem; border-radius: 18px; flex-direction: column; gap: 6px; min-height: 116px; }
.btn-absen .ico { font-size: 1.9rem; }
.btn-absen small { font-weight: 500; font-size: .72rem; opacity: .9; }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-width: 0; }
.field > label { font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: .7rem; color: var(--muted); }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--surface-solid); border: 1px solid var(--border-strong);
  border-radius: 11px; padding: 11px 12px; width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue-400); outline-offset: 1px; border-color: var(--blue-500); }
textarea { min-height: 78px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; }
.form-grid { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.filters { display: grid; gap: 10px; grid-template-columns: 1fr; align-items: end; margin-bottom: 14px; }
.filters .field { margin-bottom: 0; }
.search-input { position: relative; }
.search-input input { padding-left: 36px; }
.search-input::before { content: "🔍"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: .82rem; opacity: .65; }

/* ---------- Tabel ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-solid); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 560px; }
table.compact { min-width: 420px; }
th, td { padding: 10px 11px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
th { background: var(--blue-50); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); position: sticky; top: 0; z-index: 1; }
tbody tr:hover { background: var(--blue-50); }
tbody tr:last-child td { border-bottom: 0; }
td.wrap, th.wrap { white-space: normal; min-width: 160px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; }
.table-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; color: var(--muted); font-size: .8rem; }
.pagination { display: flex; gap: 6px; margin-left: auto; }

/* ---------- Badge / pita ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; background: var(--blue-50); color: var(--blue-800); border: 1px solid var(--blue-100);
}
.badge.gold { background: var(--gold-100); color: #8A6400; border-color: rgba(224, 162, 0, .3); }
.badge.green { background: rgba(16, 185, 129, .14); color: #047857; border-color: rgba(16, 185, 129, .3); }
.badge.red { background: rgba(239, 68, 68, .14); color: #B91C1C; border-color: rgba(239, 68, 68, .3); }
.badge.orange { background: rgba(249, 115, 22, .16); color: #C2410C; border-color: rgba(249, 115, 22, .3); }
.badge.gray { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.badge.purple { background: rgba(124, 58, 237, .14); color: #6D28D9; border-color: rgba(124, 58, 237, .28); }
[data-theme="dark"] .badge { color: #DCE8FA; }
[data-theme="dark"] .badge.gold { color: var(--gold-400); }
[data-theme="dark"] .badge.green { color: #6EE7B7; }
[data-theme="dark"] .badge.red { color: #FCA5A5; }
[data-theme="dark"] .badge.orange { color: #FDBA74; }
[data-theme="dark"] .badge.purple { color: #C4B5FD; }

/* ---------- Tab ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.tabs button {
  border: 1px solid var(--border); background: var(--surface-solid); color: var(--ink-2); cursor: pointer;
  border-radius: 999px; padding: 8px 14px; font-size: .84rem; white-space: nowrap; font-weight: 500;
}
.tabs button:hover { border-color: var(--blue-400); }
.tabs button.active { background: linear-gradient(120deg, var(--blue-700), var(--blue-500)); color: #fff; border-color: transparent; font-weight: 600; }

/* ---------- Avatar ---------- */
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--blue-50); border: 2px solid var(--surface-solid); box-shadow: var(--shadow-sm); flex: 0 0 auto; }
.avatar.lg { width: 84px; height: 84px; }
.avatar.xl { width: 120px; height: 120px; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person .nm { min-width: 0; }
.person .nm b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .nm span { font-size: .74rem; color: var(--muted); }

/* ---------- Foto absensi ---------- */
.photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.photo-box { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 8px; background: var(--surface-2); text-align: center; }
.photo-box img { width: 100%; border-radius: 10px; display: block; aspect-ratio: 3 / 4; object-fit: cover; background: var(--blue-50); }
.photo-box .ph-cap { font-size: .74rem; color: var(--muted); margin-top: 6px; }
.photo-box .ph-empty { aspect-ratio: 3 / 4; display: grid; place-items: center; color: var(--muted); font-size: .78rem; border-radius: 10px; background: var(--surface-solid); }

/* ---------- Kamera ---------- */
.cam-stage { position: relative; border-radius: var(--radius); overflow: hidden; background: #05101F; aspect-ratio: 3 / 4; max-height: 62vh; }
.cam-stage video, .cam-stage img, .cam-stage canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-badge { position: absolute; left: 10px; top: 10px; background: rgba(16, 185, 129, .92); color: #fff; font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; display: inline-flex; gap: 5px; align-items: center; }
.cam-badge::before { content: "●"; font-size: .6rem; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.cam-guide { position: absolute; inset: 8% 12%; border: 2px dashed rgba(255, 255, 255, .5); border-radius: 46% 46% 42% 42%; pointer-events: none; }
.cam-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cam-actions .btn { flex: 1 1 auto; }
.cam-note { font-size: .78rem; color: var(--muted); margin-top: 8px; }
.gps-line { display: flex; gap: 8px; align-items: center; font-size: .78rem; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }

/* ---------- Penilaian 5 Cinta ---------- */
.aspect-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px; background: var(--surface-solid); }
.aspect-row + .aspect-row { margin-top: 12px; }
.aspect-row h4 { font-size: .92rem; margin-bottom: 2px; }
.aspect-row .asp-desc { font-size: .74rem; color: var(--muted); margin-bottom: 9px; }
.level-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 9px; }
.level-picker button {
  cursor: pointer; border: 1.6px solid var(--border-strong); background: var(--surface-solid); color: var(--ink-2);
  border-radius: 11px; padding: 11px 6px; font-weight: 700; font-size: .8rem; letter-spacing: .02em;
}
.level-picker button small { display: block; font-weight: 500; font-size: .68rem; color: var(--muted); }
.level-picker button.on { border-color: transparent; color: #fff; box-shadow: var(--shadow-sm); }
.level-picker button.on[data-level="excellent"] { background: linear-gradient(140deg, #047857, #10B981); }
.level-picker button.on[data-level="baik"] { background: linear-gradient(140deg, var(--blue-700), var(--blue-500)); }
.level-picker button.on[data-level="cukup"] { background: linear-gradient(140deg, #B8860B, var(--gold-400)); color: #2A1E00; }
.level-picker button.on small { color: inherit; opacity: .85; }

/* ---------- Input nilai massal (spreadsheet) ---------- */
.sheet-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-solid); }
table.sheet { min-width: 720px; }
table.sheet th, table.sheet td { padding: 6px 7px; }
table.sheet input { padding: 8px 9px; font-size: .86rem; text-align: center; border-radius: 9px; }
table.sheet td.name { white-space: normal; min-width: 170px; }
table.sheet tr.dup input { border-color: var(--gold); background: var(--gold-100); }
.sheet-note { font-size: .76rem; color: var(--muted); }

/* ---------- Grafik (SVG) ---------- */
.chart-box { width: 100%; overflow: hidden; }
.chart-box svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); margin-top: 8px; }
.chart-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.progress { height: 9px; border-radius: 999px; background: var(--blue-50); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue-700), var(--blue-400)); }
.progress.gold > i { background: linear-gradient(90deg, #C99000, var(--gold-400)); }
.legend-list { display: grid; gap: 10px; }
.legend-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-size: .82rem; }
.legend-item .nm { color: var(--ink-2); }
.legend-item .val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Kalender ---------- */
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font-size: .7rem; color: var(--muted); font-weight: 600; }
.cal-cell {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-solid); padding: 6px 5px;
  min-height: 56px; font-size: .72rem; display: flex; flex-direction: column; gap: 2px; cursor: default;
}
.cal-cell .d { font-weight: 700; font-size: .82rem; }
.cal-cell .s { color: var(--muted); font-size: .66rem; }
.cal-cell.empty { background: transparent; border: 0; }
.cal-cell.off { opacity: .55; }
.cal-cell.hadir { border-color: rgba(16, 185, 129, .5); background: rgba(16, 185, 129, .1); }
.cal-cell.terlambat { border-color: rgba(249, 115, 22, .5); background: rgba(249, 115, 22, .12); }
.cal-cell.izin { border-color: rgba(59, 130, 246, .5); background: rgba(59, 130, 246, .12); }
.cal-cell.sakit { border-color: rgba(124, 58, 237, .5); background: rgba(124, 58, 237, .12); }
.cal-cell.alpa { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .12); }
.cal-cell.today { outline: 2px solid var(--gold-400); }

/* ---------- Toast / modal / konfirmasi ---------- */
.toast-wrap { position: fixed; right: 12px; bottom: 78px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 24px)); }
.toast {
  background: var(--surface-solid); border: 1px solid var(--border-strong); border-left: 4px solid var(--blue-600);
  border-radius: 12px; box-shadow: var(--shadow); padding: 11px 12px; font-size: .85rem; display: flex; gap: 9px; align-items: flex-start;
  animation: toastIn .18s ease-out;
}
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.warn { border-left-color: var(--gold); }
.toast.info { border-left-color: var(--blue-600); }
.toast b { display: block; font-size: .84rem; }
.toast .x { margin-left: auto; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(6, 15, 30, .58); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.modal {
  background: var(--surface-solid); width: 100%; max-width: 720px; border-radius: 20px 20px 0 0; max-height: 92vh;
  overflow-y: auto; box-shadow: var(--shadow); border: 1px solid var(--border);
}
.modal-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface-solid); z-index: 2; }
.modal-head h3 { margin: 0; }
.modal-head .x { margin-left: auto; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; color: var(--muted); line-height: 1; }
.modal-body { padding: 16px; }
.modal-foot { display: flex; gap: 10px; padding: 13px 16px calc(13px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface-solid); flex-wrap: wrap; }
.modal-foot .btn { flex: 1 1 auto; }
.modal.narrow { max-width: 460px; }
.modal.wide { max-width: 940px; }

/* ---------- Lain-lain ---------- */
.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty .ico { font-size: 2rem; display: block; margin-bottom: 8px; }
.split { display: grid; gap: 18px; grid-template-columns: 1fr; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: .84rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.note-box { border-left: 4px solid var(--blue-600); background: var(--blue-50); border-radius: 10px; padding: 11px 13px; font-size: .84rem; }
.note-box.gold { border-left-color: var(--gold); background: var(--gold-100); }
.note-box.green { border-left-color: var(--green); background: rgba(16, 185, 129, .1); }
.summary-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.summary-list li { display: flex; gap: 8px; font-size: .86rem; align-items: baseline; }
.summary-list li b { min-width: 96px; color: var(--ink-2); }
.txt-right { text-align: right; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.scroll-y { max-height: 340px; overflow-y: auto; }
.divider { height: 1px; background: var(--border); margin: 14px 0; border: 0; }
.pill-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface-solid); }
.pill-toggle button { border: 0; background: transparent; padding: 8px 13px; font-size: .8rem; cursor: pointer; color: var(--muted); }
.pill-toggle button.on { background: linear-gradient(120deg, var(--blue-700), var(--blue-500)); color: #fff; font-weight: 600; }
.notif-item { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-solid); }
.notif-item.unread { border-left: 4px solid var(--blue-600); background: var(--blue-50); }
.notif-item + .notif-item { margin-top: 10px; }
.notif-item .ic { font-size: 1.2rem; }
.notif-item .bd { min-width: 0; }
.notif-item .bd b { display: block; font-size: .88rem; }
.notif-item .bd span { font-size: .72rem; color: var(--muted); }

/* ---------- Responsif ---------- */
@media (min-width: 640px) {
  .content { padding: 20px 20px 40px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.two > .full, .form-grid > .full { grid-column: 1 / -1; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overlay { align-items: center; padding: 20px; }
  .modal { border-radius: 20px; }
  .modal-foot { position: static; }
}
@media (min-width: 900px) {
  .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: 1.6fr 1fr; }
  .split.even { grid-template-columns: 1fr 1fr; }
  .sidebar { display: block; }
  .bottomnav { display: none; }
  .topbar-logo { display: block; }
  .content { padding: 24px 26px 44px; }
  .toast-wrap { bottom: 22px; }
}
@media (max-width: 639px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .grid.cols-2.mini, .grid.cols-4.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat .value { font-size: 1.35rem; }
  .photo-pair { gap: 10px; }
  .kv { grid-template-columns: 112px 1fr; }
}

/* ---------- Cetak (rapor / laporan) ---------- */
@media print {
  body { background: #fff; font-size: 11.5pt; }
  .sidebar, .bottomnav, .topbar, .no-print, .toast-wrap { display: none !important; }
  .shell, .main { display: block; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 1px solid #999; background: #fff; break-inside: avoid; backdrop-filter: none; }
  .print-title { display: block !important; text-align: center; margin-bottom: 14px; }
  .print-title h1 { font-size: 15pt; }
  table { font-size: 9.5pt; min-width: 0; }
  th { background: #eee !important; position: static; }
  .grid { display: block; }
  .grid > * { margin-bottom: 12px; }
  .page-break { break-before: page; }
  a { color: #000; text-decoration: none; }
}
.print-title { display: none; }