/* ==========================================================
   Absensi Madrasah – tema hijau-emas bernuansa Kemenag
   ========================================================== */
:root {
  --hijau-950: #072B1F;
  --hijau-900: #0B3D2C;
  --hijau-800: #0E4D37;
  --hijau-700: #0F6B45;
  --hijau-600: #15834F;
  --hijau-500: #1E9E63;
  --hijau-100: #D6EEDF;
  --hijau-50:  #EDF7F1;
  --emas:      #C99A2E;
  --emas-tua:  #9C7419;
  --emas-muda: #F5EAC9;
  --tinta:     #16241E;
  --abu:       #5B6A63;
  --garis:     #DDE7E1;
  --kertas:    #F4F8F5;
  --merah:     #B8392B;
  --merah-muda:#FBE7E4;
  --oranye:    #C7741C;
  --oranye-muda:#FCEFDD;
  --biru:      #1F6693;
  --biru-muda: #E2EFF7;

  --sidebar-w: 268px;
  --r-besar: 20px;
  --r: 14px;
  --r-kecil: 9px;

  --pola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C99A2E' stroke-opacity='.16'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3C/g%3E%3C/svg%3E");

  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--tinta);
  --bs-body-bg: var(--kertas);
  --bs-primary: var(--hijau-700);
  --bs-primary-rgb: 15, 107, 69;
  --bs-link-color: var(--hijau-700);
  --bs-link-hover-color: var(--hijau-900);
  --bs-border-color: var(--garis);
}

* { -webkit-tap-highlight-color: transparent; }
body { font-size: .95rem; line-height: 1.55; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; color: var(--tinta); }
:focus-visible { outline: 3px solid var(--emas); outline-offset: 2px; }

.btn { border-radius: var(--r-kecil); font-weight: 600; padding: .55rem 1.1rem; }
.btn-sm { padding: .3rem .7rem; }
.btn-primary {
  --bs-btn-bg: var(--hijau-700); --bs-btn-border-color: var(--hijau-700);
  --bs-btn-hover-bg: var(--hijau-800); --bs-btn-hover-border-color: var(--hijau-800);
  --bs-btn-active-bg: var(--hijau-900); --bs-btn-active-border-color: var(--hijau-900);
  --bs-btn-disabled-bg: var(--hijau-700); --bs-btn-disabled-border-color: var(--hijau-700);
}
.btn-outline-primary {
  --bs-btn-color: var(--hijau-700); --bs-btn-border-color: var(--hijau-100);
  --bs-btn-hover-bg: var(--hijau-50); --bs-btn-hover-color: var(--hijau-800); --bs-btn-hover-border-color: var(--hijau-500);
  --bs-btn-active-bg: var(--hijau-100); --bs-btn-active-color: var(--hijau-900);
}
.btn-emas { background: var(--emas); color: #fff; border: 0; }
.btn-emas:hover, .btn-emas:focus { background: var(--emas-tua); color: #fff; }

.form-control, .form-select { border-radius: var(--r-kecil); border-color: var(--garis); padding: .6rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--hijau-500); box-shadow: 0 0 0 .2rem rgba(30,158,99,.15); }
.form-label { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.form-text { color: var(--abu); }
.form-check-input:checked { background-color: var(--hijau-700); border-color: var(--hijau-700); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; margin-top: .1em; }
.form-check-label { font-weight: 500; }

/* ---------- Kerangka ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--hijau-900) var(--pola);
  color: #E4EFE9; display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .25s ease;
}
.sidebar::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--emas), rgba(201,154,46,.15));
}
.brand { display: flex; align-items: center; gap: .8rem; padding: 1.4rem 1.3rem 1.2rem; text-decoration: none; color: #fff; }
.brand:hover { color: #fff; }
.brand-lambang { width: 44px; height: 44px; flex-shrink: 0; }
.brand-teks strong { display: block; font-size: 1rem; line-height: 1.2; }
.brand-teks span { font-size: .78rem; color: var(--emas-muda); opacity: .85; }

.menu { flex: 1; overflow-y: auto; padding: .5rem .8rem 1rem; }
.menu-grup { font-size: .74rem; color: rgba(245,234,201,.6); margin: 1.1rem .7rem .4rem; font-weight: 600; }
.menu a, .menu .menu-nonaktif {
  display: flex; align-items: center; gap: .75rem; padding: .62rem .8rem; border-radius: var(--r-kecil);
  color: #D5E6DD; text-decoration: none; font-weight: 500; margin-bottom: 2px;
}
.menu a i, .menu .menu-nonaktif i { font-size: 1.1rem; width: 1.2rem; text-align: center; }
.menu a:hover { background: rgba(255,255,255,.07); color: #fff; }
.menu a.aktif { background: var(--hijau-700); color: #fff; box-shadow: inset 3px 0 0 var(--emas); }
.menu .menu-nonaktif { opacity: .5; cursor: default; }
.menu .menu-nonaktif small { margin-left: auto; font-size: .68rem; border: 1px solid rgba(255,255,255,.3); border-radius: 20px; padding: 0 .45rem; }

.sidebar-kaki { padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: .7rem; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--emas-muda); color: var(--hijau-900); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.sidebar-kaki .nama { font-weight: 600; color: #fff; font-size: .88rem; line-height: 1.2; }
.sidebar-kaki .peran { font-size: .76rem; color: var(--emas-muda); opacity: .8; }
.sidebar-kaki form { margin-left: auto; }
.sidebar-kaki button { background: none; border: 0; color: #D5E6DD; font-size: 1.2rem; padding: .3rem .45rem; border-radius: 8px; }
.sidebar-kaki button:hover { background: rgba(255,255,255,.08); color: #fff; }

.utama { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 1020;
  background: rgba(244,248,245,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--garis);
  padding: calc(.8rem + env(safe-area-inset-top, 0px)) 1.8rem .8rem;
  display: flex; align-items: center; gap: 1rem;
}
.topbar h1 { font-size: 1.2rem; margin: 0; }
.topbar .sub { color: var(--abu); font-size: .82rem; }
.tombol-menu { display: none; background: #fff; border: 1px solid var(--garis); border-radius: 10px; width: 40px; height: 40px; font-size: 1.3rem; color: var(--hijau-800); flex-shrink: 0; }

.konten { padding: 1.6rem 1.8rem 3rem; max-width: 1400px; width: 100%; }

.tirai { position: fixed; inset: 0; background: rgba(7,43,31,.45); z-index: 1030; opacity: 0; pointer-events: none; transition: opacity .25s; }
.nav-bawah { display: none; }

/* ---------- Komponen ---------- */
.panel { background: #fff; border: 1px solid var(--garis); border-radius: var(--r); }
.panel + .panel { margin-top: 1.4rem; }
.panel-kepala { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--garis); }
.panel-kepala h2 { font-size: 1rem; margin: 0; }
.panel-kepala .sub { color: var(--abu); font-size: .82rem; }
.panel-isi { padding: 1.2rem 1.3rem; }

.lencana { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; padding: .2rem .6rem; border-radius: 20px; white-space: nowrap; }
.lencana-H, .lencana-terkirim { background: var(--hijau-50); color: var(--hijau-700); }
.lencana-T, .lencana-antri { background: var(--oranye-muda); color: var(--oranye); }
.lencana-I { background: var(--biru-muda); color: var(--biru); }
.lencana-S { background: #EEE8F7; color: #6A4C9C; }
.lencana-A, .lencana-gagal { background: var(--merah-muda); color: var(--merah); }
.lencana-emas { background: var(--emas-muda); color: var(--emas-tua); }
.lencana-abu { background: #EEF1EF; color: var(--abu); }

.alert { border-radius: var(--r-kecil); border: 0; }
.alert-success { background: var(--hijau-50); color: var(--hijau-800); }
.alert-danger { background: var(--merah-muda); color: var(--merah); }
.alert-warning { background: var(--oranye-muda); color: #8A4E0E; }

.kosong { text-align: center; color: var(--abu); padding: 2.2rem 1rem; }
.kosong i { font-size: 2rem; color: var(--hijau-100); display: block; margin-bottom: .5rem; }

.table { --bs-table-color: var(--tinta); margin: 0; }
.table thead th { font-size: .78rem; font-weight: 600; color: var(--abu); background: var(--hijau-50); border-bottom: 0; padding: .7rem 1rem; white-space: nowrap; }
.table td { padding: .75rem 1rem; vertical-align: middle; border-color: var(--garis); }
.table-responsive { border-radius: 0 0 var(--r) var(--r); }
.pagination { --bs-pagination-active-bg: var(--hijau-700); --bs-pagination-active-border-color: var(--hijau-700); --bs-pagination-color: var(--hijau-700); margin: 0; }

/* ---------- Dashboard: bagian pembuka ---------- */
.pembuka {
  display: grid; grid-template-columns: 1.25fr 1fr;
  border-radius: var(--r-besar); overflow: hidden; margin-bottom: 1.4rem;
  background: var(--hijau-800) var(--pola); color: #fff;
}
.pembuka-waktu { padding: 1.8rem 2rem; }
.pembuka-salam { color: var(--emas-muda); font-weight: 500; margin: 0 0 .3rem; }
.pembuka-jam { font-size: clamp(2.8rem, 6vw, 4.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pembuka-jam .detik { font-size: .45em; font-weight: 600; color: var(--emas); margin-left: .15em; }
.pembuka-tanggal { margin: .9rem 0 0; font-size: 1rem; }
.pembuka-tanggal .hijriah { color: var(--emas-muda); font-size: .9rem; }
.pembuka-angka { background: rgba(7,43,31,.45); padding: 1.8rem 2rem; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(201,154,46,.35); }
.pembuka-angka .judul { color: #CFE3D8; margin: 0 0 .2rem; font-size: .9rem; }
.pembuka-angka .persen { font-size: 3.4rem; font-weight: 800; line-height: 1.05; color: #fff; }
.pembuka-angka .persen small { font-size: .45em; color: var(--emas); }
.batang { height: 8px; background: rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; margin: .8rem 0 .6rem; }
.batang span { display: block; height: 100%; background: linear-gradient(90deg, var(--emas), #E6C36A); border-radius: 8px; }
.pembuka-angka .keterangan { color: #CFE3D8; font-size: .85rem; margin: 0; }
.chip-libur { display: inline-flex; gap: .4rem; align-items: center; margin-top: 1rem; background: var(--emas); color: var(--hijau-950); font-weight: 700; font-size: .8rem; padding: .3rem .8rem; border-radius: 20px; }

.statistik { display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border: 1px solid var(--garis); border-radius: var(--r); margin-bottom: 1.4rem; }
.statistik > div { padding: 1.1rem 1.3rem; border-left: 1px solid var(--garis); }
.statistik > div:first-child { border-left: 0; }
.statistik .angka { font-size: 1.75rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.statistik .angka small { font-size: .55em; color: var(--abu); font-weight: 600; }
.statistik .nama { color: var(--abu); font-size: .83rem; display: flex; align-items: center; gap: .4rem; }
.statistik .titik { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.daftar-presensi { list-style: none; margin: 0; padding: 0; }
.daftar-presensi li { display: flex; align-items: center; gap: .9rem; padding: .75rem 1.3rem; border-bottom: 1px solid var(--garis); }
.daftar-presensi li:last-child { border-bottom: 0; }
.daftar-presensi .avatar { background: var(--hijau-50); color: var(--hijau-700); width: 36px; height: 36px; }
.daftar-presensi .avatar.guru { background: var(--emas-muda); color: var(--emas-tua); }
.daftar-presensi .siapa { flex: 1; min-width: 0; }
.daftar-presensi .siapa strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daftar-presensi .siapa span { font-size: .8rem; color: var(--abu); }
.daftar-presensi .jam { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.daftar-presensi .jam .lencana { display: block; margin-top: .2rem; }

.kelas-baris { padding: .65rem 1.3rem; }
.kelas-baris:first-child { padding-top: 1rem; }
.kelas-baris:last-child { padding-bottom: 1.1rem; }
.kelas-baris .atas { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: .35rem; font-weight: 600; }
.kelas-baris .atas span { color: var(--abu); font-variant-numeric: tabular-nums; font-weight: 500; }
.kelas-baris .batang { background: var(--hijau-50); height: 7px; margin: 0; }
.kelas-baris .batang span { background: var(--hijau-500); }

.wa-ringkas { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.wa-ringkas div strong { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.wa-ringkas div span { font-size: .8rem; color: var(--abu); }

.rekap-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.rekap-mini div { text-align: center; padding: .7rem .3rem; border-radius: var(--r-kecil); }
.rekap-mini strong { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.rekap-mini span { font-size: .75rem; }

.status-hari-ini { display: flex; gap: 1rem; flex-wrap: wrap; }
.status-hari-ini > div { flex: 1; min-width: 140px; background: var(--hijau-50); border-radius: var(--r-kecil); padding: 1rem 1.1rem; }
.status-hari-ini .label { font-size: .8rem; color: var(--abu); }
.status-hari-ini .nilai { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.identitas-anak { display: flex; align-items: center; gap: .9rem; }
.identitas-anak .avatar { width: 46px; height: 46px; font-size: 1rem; background: var(--hijau-700); color: #fff; }

/* ---------- Pengaturan ---------- */
.nav-tab-pengaturan { border-bottom: 1px solid var(--garis); gap: .3rem; padding: 0 .8rem; }
.nav-tab-pengaturan .nav-link { border: 0; color: var(--abu); font-weight: 600; padding: .85rem .6rem; margin-right: .6rem; border-bottom: 3px solid transparent; border-radius: 0; background: none; }
.nav-tab-pengaturan .nav-link.active { color: var(--hijau-700); border-bottom-color: var(--emas); background: none; }
.bagian-form + .bagian-form { border-top: 1px solid var(--garis); margin-top: 1.6rem; padding-top: 1.6rem; }
.bagian-form h3 { font-size: 1rem; margin-bottom: .25rem; }
.bagian-form > p { color: var(--abu); font-size: .86rem; margin-bottom: 1rem; max-width: 70ch; }
.pilih-hari { display: flex; flex-wrap: wrap; gap: .4rem; }
.pilih-hari input { position: absolute; opacity: 0; pointer-events: none; }
.pilih-hari label { border: 1px solid var(--garis); border-radius: 20px; padding: .35rem .9rem; cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--abu); background: #fff; }
.pilih-hari input:checked + label { background: var(--hijau-700); border-color: var(--hijau-700); color: #fff; }
.pilih-hari input:focus-visible + label { outline: 3px solid var(--emas); outline-offset: 2px; }
.variabel code { background: var(--emas-muda); color: var(--emas-tua); padding: .1rem .4rem; border-radius: 5px; font-size: .8rem; }
textarea.template { font-size: .88rem; min-height: 120px; }
.kotak-tes { background: var(--hijau-50); border-radius: var(--r-kecil); padding: 1.1rem 1.2rem; }

/* ---------- Halaman masuk ---------- */
.masuk { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.masuk-kiri { background: var(--hijau-900) var(--pola); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; position: relative; }
.masuk-kiri::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; background: var(--emas); }
.masuk-kiri .brand { padding: 0; }
.masuk-kiri h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.12; max-width: 15ch; margin: 0 0 1rem; }
.masuk-kiri p { color: #CFE3D8; max-width: 42ch; margin: 0; }
.masuk-jam { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.masuk-jam .detik { font-size: .45em; color: var(--emas); margin-left: .15em; }
.masuk-tanggal { color: var(--emas-muda); margin-top: .4rem; }
.masuk-kanan { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; background: #fff; }
.form-masuk { width: 100%; max-width: 380px; }
.form-masuk h2 { font-size: 1.5rem; margin-bottom: .3rem; }
.form-masuk > p { color: var(--abu); margin-bottom: 1.8rem; }
.form-masuk .form-control { padding: .75rem .95rem; }
.kolom-sandi { position: relative; }
.kolom-sandi .form-control { padding-right: 3rem; }
.lihat-sandi { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--abu); padding: .35rem .55rem; border-radius: 6px; }

/* ---------- Responsif ---------- */
@media (max-width: 1199.98px) {
  .statistik { grid-template-columns: repeat(3, 1fr); }
  .statistik > div:nth-child(4) { border-left: 0; }
  .statistik > div:nth-child(n+4) { border-top: 1px solid var(--garis); }
}
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  body.menu-terbuka .sidebar { transform: none; }
  body.menu-terbuka .tirai { opacity: 1; pointer-events: auto; }
  .utama { margin-left: 0; }
  .tombol-menu { display: grid; place-items: center; }
  .topbar { padding-left: 1rem; padding-right: 1rem; }
  .konten { padding: 1.1rem 1rem calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  .pembuka { grid-template-columns: 1fr; }
  .pembuka-angka { border-left: 0; border-top: 1px solid rgba(201,154,46,.35); }
  .nav-bawah {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025;
    background: #fff; border-top: 1px solid var(--garis);
    padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom, 0px));
  }
  .nav-bawah a, .nav-bawah button { flex: 1; text-align: center; color: var(--abu); text-decoration: none; font-size: .7rem; font-weight: 600; padding: .3rem 0; border-radius: 10px; background: none; border: 0; }
  .nav-bawah i { display: block; font-size: 1.25rem; margin-bottom: 1px; }
  .nav-bawah .aktif { color: var(--hijau-700); background: var(--hijau-50); }
  .masuk { grid-template-columns: 1fr; }
  .masuk-kiri { padding: calc(1.6rem + env(safe-area-inset-top, 0px)) 1.5rem 1.6rem; gap: 1.3rem; }
  .masuk-kiri::after { top: auto; left: 0; width: auto; height: 4px; }
  .masuk-kiri h1 { font-size: 1.7rem; }
  .masuk-kiri .sembunyi-hp { display: none; }
  .masuk-kanan { align-items: flex-start; padding-top: 2rem; }
}
@media (max-width: 575.98px) {
  .statistik { grid-template-columns: repeat(2, 1fr); }
  .statistik > div { border-left: 0 !important; border-top: 1px solid var(--garis); }
  .statistik > div:nth-child(-n+2) { border-top: 0; }
  .statistik > div:nth-child(even) { border-left: 1px solid var(--garis) !important; }
  .statistik > div:last-child { grid-column: span 2; }
  .pembuka-waktu, .pembuka-angka { padding: 1.4rem 1.3rem; }
  .rekap-mini { gap: .3rem; }
  .rekap-mini strong { font-size: 1.1rem; }
  .panel-kepala, .panel-isi { padding-left: 1rem; padding-right: 1rem; }
  .daftar-presensi li, .kelas-baris { padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .tirai { transition: none; } }

/* ---------- Absensi harian: pilihan status ---------- */
.pilih-status { display: inline-flex; gap: .25rem; }
.pilih-status input { position: absolute; opacity: 0; pointer-events: none; }
.pilih-status label { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border: 1px solid var(--garis); border-radius: 8px;
                      font-weight: 700; font-size: .82rem; color: var(--abu); cursor: pointer; background: #fff; user-select: none; }
.pilih-status label:hover { border-color: var(--hijau-500); }
.pilih-status input:focus-visible + label { outline: 3px solid var(--emas); outline-offset: 1px; }
.pilih-status input:checked + .s-H { background: var(--hijau-600); border-color: var(--hijau-600); color: #fff; }
.pilih-status input:checked + .s-T { background: var(--oranye); border-color: var(--oranye); color: #fff; }
.pilih-status input:checked + .s-I { background: var(--biru); border-color: var(--biru); color: #fff; }
.pilih-status input:checked + .s-S { background: #6A4C9C; border-color: #6A4C9C; color: #fff; }
.pilih-status input:checked + .s-A { background: var(--merah); border-color: var(--merah); color: #fff; }
.pilih-status input:checked + .s-kosong { background: #EEF1EF; border-color: #C9D3CE; color: var(--tinta); }

/* ---------- Lencana jumlah di menu & details ---------- */
.menu a .lencana-menu { margin-left: auto; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 20px; background: var(--emas); color: var(--hijau-950); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- Kotak pilihan: sisakan ruang untuk tanda panah ---------- */
.form-select { padding-right: 2.6rem; background-position: right .85rem center; min-width: 8rem; }
.form-select-sm { padding-right: 2.1rem; background-position: right .6rem center; min-width: 6rem; }

/* ---------- Menu samping: scrollbar tipis, hanya tampil saat disorot ---------- */
.menu { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.menu:hover, .menu:focus-within { scrollbar-color: rgba(245,234,201,.35) transparent; }
.menu::-webkit-scrollbar { width: 6px; }
.menu::-webkit-scrollbar-track { background: transparent; }
.menu::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.menu:hover::-webkit-scrollbar-thumb, .menu:focus-within::-webkit-scrollbar-thumb { background: rgba(245,234,201,.35); }
@media (max-height: 760px) and (min-width: 992px) {
  .brand { padding-top: 1rem; padding-bottom: .8rem; }
  .menu a, .menu .menu-nonaktif { padding-top: .45rem; padding-bottom: .45rem; }
  .menu-grup { margin-top: .8rem; }
}

/* ---------- Status Dinas luar (guru) ---------- */
.lencana-D { background: #DDF3F4; color: #0E6F78; }
.tabel-rekap .k-D { background: #DDF3F4; color: #0E6F78; }
.pilih-status input:checked + .s-D { background: #0E7C86; border-color: #0E7C86; color: #fff; }
.rekap-mini { grid-template-columns: repeat(auto-fit, minmax(3.4rem, 1fr)); }

/* ---------- Rekap bulanan & ringkasan kelas: rapi di HP ---------- */
.rekap-mini { grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: .5rem; }
.rekap-mini div { padding: .7rem .35rem; min-width: 0; }
.rekap-mini span { display: block; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-hari-ini > div { flex: 1 1 calc(50% - .5rem); min-width: 0; }
@media (min-width: 768px) { .status-hari-ini > div { flex: 1 1 0; min-width: 120px; } }
@media (max-width: 575.98px) {
  .rekap-mini { grid-template-columns: repeat(3, 1fr); }
  .rekap-mini strong { font-size: 1.3rem; }
  .status-hari-ini { gap: .6rem; }
  .status-hari-ini > div { padding: .8rem .9rem; }
  .status-hari-ini .nilai { font-size: 1.4rem; }
}

/* ---------- Kotak rekap bulan: 3 per baris, baris terakhir melebar, teks tidak terpotong ---------- */
.rekap-mini { display: flex; flex-wrap: wrap; gap: .5rem; }
.rekap-mini div { flex: 1 1 calc(33.333% - .34rem); min-width: 0; padding: .75rem .3rem; text-align: center; border-radius: var(--r-kecil); }
.rekap-mini strong { display: block; font-size: clamp(1.1rem, 4.2vw, 1.4rem); line-height: 1.15; }
.rekap-mini span { display: block; font-size: clamp(.68rem, 2.9vw, .8rem); line-height: 1.25; white-space: nowrap; overflow: visible; text-overflow: clip; }