/* ==== TEMA SEKOLAH (24-10-2026) ====
   Warna logo sekolah (biru tua/biru/biru langit) + palet acuan: teks #14283C, biru #0B4F8A, latar lembut #E8F5FD,
   biru langit #4DB3E6, kuning #F2B84B, hijau #1E8E5A, merah #C0392B, abu #56677A. Gaya ala shadcn/ui: netral, garis
   tipis, sudut membulat, bayangan halus. Tabler tetap; semua diatur lewat variabel --tblr-* di bawah.
   Kontras WCAG (teks di permukaan putih / gelap #132235), dihitung 24-10-2026:
     teks #14283C 15,0 · biru #0B4F8A 8,4 (putih di atasnya 8,4) · abu #56677A 5,8 (di latar #F4F9FD 5,5)
     hijau teks #187A4D 5,3 (hijau palet #1E8E5A hanya 4,1 → dipakai sebagai aksen) · merah #C0392B 5,4
     oranye #A34A06 5,9 (di lencana -lt 5,1) · biru #1A65A8 6,0 · menu samping #C9DAEA di #0B2F55 9,5
     kuning #F2B84B & biru langit #4DB3E6 (2,4) hanya latar/aksen; teks kuning = #8A5A00 (5,9), teks di atas kuning = #14283C (8,4)
     gelap: teks #E6EEF6 13,7 · abu #9AAEC2 7,0 · biru #5BB8EA 7,3 (teks gelap di atas tombolnya 8,1)
     merah #F2877B 6,5 · hijau #4CC38A 7,3 · kuning #F2B84B 9,0
   Mode gelap: mengikuti setelan perangkat, atau pilihan pengguna (tombol Tema, static/js/tema.js). */
:root, [data-bs-theme="light"] {
  --sekolah-teks: #14283C;
  --sekolah-biru: #0B4F8A;
  --sekolah-biru-logo: #1E88C8;
  --sekolah-langit: #4DB3E6;
  --sekolah-latar: #F4F9FD;
  --sekolah-latar-lembut: #E8F5FD;
  --sekolah-kuning-teks: #8A5A00;
  --sekolah-cincin: rgba(77, 179, 230, .45);

  --tblr-font-sans-serif: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --tblr-body-font-size: .9375rem;   /* Calibri lebih kecil dari Inter: 15 px setara 14 px Inter */

  /* abu kebiruan agar seluruh komponen Tabler selaras dengan palet */
  --tblr-gray-50: #F4F9FD; --tblr-gray-100: #EAF2F9; --tblr-gray-200: #DCE6F0; --tblr-gray-300: #C5D3E1;
  --tblr-gray-400: #93A5B8; --tblr-gray-500: #6B7D90; --tblr-gray-600: #56677A; --tblr-gray-700: #3A4C60;
  --tblr-gray-800: #1E3148; --tblr-gray-900: #14283C;

  --tblr-primary: #0B4F8A; --tblr-primary-rgb: 11, 79, 138; --tblr-primary-fg: #FFFFFF;
  --tblr-primary-darken: #093F6E; --tblr-primary-lt: #E3EFF9; --tblr-primary-lt-rgb: 227, 239, 249;
  --tblr-blue: #1A65A8; --tblr-blue-rgb: 26, 101, 168;
  --tblr-azure: #1F6E9C; --tblr-azure-rgb: 31, 110, 156;
  --tblr-info: #1F6E9C; --tblr-info-rgb: 31, 110, 156;
  --tblr-green: #187A4D; --tblr-green-rgb: 24, 122, 77; --tblr-success: #187A4D; --tblr-success-rgb: 24, 122, 77;
  --tblr-red: #C0392B; --tblr-red-rgb: 192, 57, 43; --tblr-danger: #C0392B; --tblr-danger-rgb: 192, 57, 43;
  --tblr-yellow: #F2B84B; --tblr-yellow-rgb: 242, 184, 75; --tblr-warning: #F2B84B; --tblr-warning-rgb: 242, 184, 75;
  --tblr-yellow-fg: #14283C; --tblr-warning-fg: #14283C;
  --tblr-orange: #A34A06; --tblr-orange-rgb: 163, 74, 6;
  --tblr-secondary: #56677A; --tblr-secondary-rgb: 86, 103, 122; --tblr-muted: #56677A; --tblr-muted-rgb: 86, 103, 122;
  --tblr-secondary-color: #56677A;

  --tblr-body-color: #14283C; --tblr-body-color-rgb: 20, 40, 60;
  --tblr-emphasis-color: #0E1E2E;
  --tblr-body-bg: var(--sekolah-latar); --tblr-body-bg-rgb: 244, 249, 253;
  --tblr-bg-surface: #FFFFFF; --tblr-bg-surface-primary: #FFFFFF;
  --tblr-bg-surface-secondary: #F4F9FD; --tblr-bg-surface-tertiary: #F7FAFD;
  --tblr-bg-forms: #FFFFFF;
  --tblr-link-color: #0B4F8A; --tblr-link-color-rgb: 11, 79, 138;
  --tblr-link-hover-color: #093F6E;
  --tblr-border-color: #DCE6F0; --tblr-border-color-translucent: rgba(20, 40, 60, .10);
  --tblr-active-bg: rgba(11, 79, 138, .06);

  --tblr-border-radius-sm: .375rem; --tblr-border-radius: .5rem; --tblr-border-radius-lg: .75rem;
  --tblr-shadow-input: 0 1px 2px rgba(20, 40, 60, .05);
  --tblr-shadow-card: 0 1px 2px rgba(20, 40, 60, .05), 0 1px 3px rgba(20, 40, 60, .04);
  --tblr-shadow-dropdown: 0 10px 24px -6px rgba(20, 40, 60, .18), 0 2px 6px rgba(20, 40, 60, .08);
  --tblr-box-shadow: 0 1px 3px rgba(20, 40, 60, .08);
  --tblr-focus-ring-color: var(--sekolah-cincin);
}

/* Mode gelap: biru malam, bukan abu hitam. Warna status dibuat lebih terang dengan teks gelap di atas tombolnya. */
[data-bs-theme="dark"] {
  --sekolah-teks: #E6EEF6;
  --sekolah-kuning-teks: #F2B84B;
  --sekolah-latar-lembut: #172A40;
  --sekolah-cincin: rgba(91, 184, 234, .45);

  --tblr-primary: #5BB8EA; --tblr-primary-rgb: 91, 184, 234; --tblr-primary-fg: #0D1826;
  --tblr-primary-darken: #7CC7EF; --tblr-primary-lt: #173452; --tblr-primary-lt-rgb: 23, 52, 82;
  --tblr-blue: #6CB2F0; --tblr-blue-rgb: 108, 178, 240;
  --tblr-azure: #6FC3EE; --tblr-azure-rgb: 111, 195, 238;
  --tblr-info: #6FC3EE; --tblr-info-rgb: 111, 195, 238; --tblr-info-fg: #0D1826;
  --tblr-green: #4CC38A; --tblr-green-rgb: 76, 195, 138; --tblr-success: #4CC38A; --tblr-success-rgb: 76, 195, 138;
  --tblr-green-fg: #0D1826; --tblr-success-fg: #0D1826;
  --tblr-red: #F2877B; --tblr-red-rgb: 242, 135, 123; --tblr-danger: #F2877B; --tblr-danger-rgb: 242, 135, 123;
  --tblr-red-fg: #0D1826; --tblr-danger-fg: #0D1826;
  --tblr-orange: #F4A261; --tblr-orange-rgb: 244, 162, 97; --tblr-orange-fg: #0D1826;
  --tblr-secondary: #9AAEC2; --tblr-secondary-rgb: 154, 174, 194; --tblr-muted: #9AAEC2; --tblr-muted-rgb: 154, 174, 194;
  --tblr-secondary-color: #9AAEC2;

  --tblr-body-color: #E6EEF6; --tblr-body-color-rgb: 230, 238, 246;
  --tblr-emphasis-color: #FFFFFF;
  --tblr-body-bg: #0D1826; --tblr-body-bg-rgb: 13, 24, 38;
  --tblr-bg-surface: #132235; --tblr-bg-surface-primary: #132235;
  --tblr-bg-surface-secondary: #0F1D2E; --tblr-bg-surface-tertiary: #172A40;
  --tblr-bg-forms: #0F1D2E;
  --tblr-link-color: #5BB8EA; --tblr-link-color-rgb: 91, 184, 234; --tblr-link-hover-color: #8CCDF1;
  --tblr-border-color: #26405C; --tblr-border-color-translucent: rgba(154, 174, 194, .16);
  --tblr-active-bg: rgba(91, 184, 234, .10);
  --tblr-shadow-input: 0 1px 2px rgba(0, 0, 0, .25);
  --tblr-shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
}

body { -webkit-font-smoothing: antialiased; }
.navbar-brand-sekolah { font-weight: 700; letter-spacing: .01em; }

/* Kartu & panel: garis tipis + bayangan halus */
.card { --tblr-card-border-color: var(--tblr-border-color); }
.card-header { background: transparent; }
.page-title { font-weight: 700; letter-spacing: -.01em; color: var(--sekolah-teks); }
.page-header { --tblr-page-header-border-color: transparent; }

/* Tombol & isian: cincin fokus jelas (garis biru + halo biru langit) */
.btn { font-weight: 500; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 .2rem var(--sekolah-cincin) !important;
  outline: 0;
}
a:focus-visible, .nav-link:focus-visible, .list-group-item-action:focus-visible {
  outline: 2px solid var(--tblr-primary); outline-offset: 2px; border-radius: var(--tblr-border-radius-sm);
}
.btn-ghost-primary:hover, .btn-ghost-secondary:hover { background: var(--tblr-active-bg); }

/* Judul tabel: huruf biasa yang terbaca, bukan kapital kecil */
.table thead th {
  text-transform: none; letter-spacing: 0; font-size: .8125rem; font-weight: 600;
  color: var(--tblr-secondary); background: var(--tblr-bg-surface-tertiary);
}
.table > :not(caption) > * > * { border-bottom-color: var(--tblr-border-color); }
.table-hover > tbody > tr:hover > * { --tblr-table-bg-state: var(--tblr-active-bg); }

/* Kuning & biru langit hanya aksen: teks kuning memakai kuning tua agar terbaca di latar terang */
.text-warning, .text-yellow { color: var(--sekolah-kuning-teks) !important; }
.bg-yellow-lt, .bg-warning-lt { color: var(--sekolah-kuning-teks) !important; }
.alert-warning .alert-title, .alert-warning .alert-heading, .alert-warning .alert-icon { color: var(--sekolah-kuning-teks); }
.bg-yellow, .bg-warning { color: #14283C !important; }
.badge { font-weight: 600; flex-shrink: 0; }  /* di baris flex (agenda di HP) lencana tidak terjepit */
.d-flex:not(.flex-column) > .badge { align-self: center; }

/* Menu samping Konsol Staf: biru tua logo, butir aktif bertanda biru langit */
.navbar-vertical[data-bs-theme="dark"] {
  --tblr-navbar-bg: #0B2F55;
  --tblr-navbar-border-color: transparent;
  --tblr-navbar-color: #C9DAEA;
  --tblr-navbar-hover-color: #FFFFFF;
  --tblr-navbar-active-color: #FFFFFF;
  --tblr-navbar-active-border-color: var(--sekolah-langit);
  --tblr-navbar-active-bg: rgba(77, 179, 230, .16);
  --tblr-disabled-color: #9FB6CF;
  background: #0B2F55;
}
:root[data-bs-theme="dark"] .navbar-vertical[data-bs-theme="dark"] {
  --tblr-navbar-bg: #0A1626; background: #0A1626; border-right: 1px solid var(--tblr-border-color);
}
.navbar-vertical .navbar-nav .nav-link { border-radius: var(--tblr-border-radius); margin: 1px .5rem; }
.navbar-vertical .navbar-nav .nav-item.active > .nav-link { background: var(--tblr-navbar-active-bg); color: #FFFFFF; font-weight: 600; }
.navbar-vertical .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, .06); }
.navbar-vertical .nav-link.btn-link { color: var(--tblr-navbar-color); font-weight: inherit; justify-content: flex-start; }
.navbar-vertical .nav-link.btn-link:hover { color: #FFFFFF; }
/* Tabler 1.4 menulis warna .btn-link langsung (biru bawaan); ikuti warna tautan tema */
.btn-link { color: var(--tblr-link-color); }
.btn-link:hover { color: var(--tblr-link-hover-color); }
/* Mode gelap: warna status terang, jadi ikon/teks di atasnya gelap (bukan putih) */
[data-bs-theme="dark"] .bg-primary.text-white { color: var(--tblr-primary-fg) !important; }
[data-bs-theme="dark"] .bg-green.text-white, [data-bs-theme="dark"] .bg-red.text-white { color: #0D1826 !important; }
/* Baris judul kelompok tabel (bg-light) tetap terbaca di mode gelap: Tabler membiarkannya terang. */
[data-bs-theme="dark"] .bg-light { background-color: var(--tblr-bg-surface-secondary, rgba(255,255,255,.06)) !important; color: var(--tblr-body-color) !important; }
/* Navbar portal: putih/permukaan dengan garis bawah tipis */
header.navbar { --tblr-navbar-border-color: var(--tblr-border-color); }

/* Cetak selalu terang walau layar sedang mode gelap */
@media print {
  :root[data-bs-theme="dark"] {
    color-scheme: light;
    --tblr-body-color: #14283C; --tblr-body-color-rgb: 20, 40, 60; --tblr-body-bg: #FFFFFF;
    --tblr-bg-surface: #FFFFFF; --tblr-bg-surface-secondary: #F4F9FD; --tblr-bg-surface-tertiary: #F7FAFD;
    --tblr-secondary: #56677A; --tblr-secondary-rgb: 86, 103, 122; --tblr-border-color: #DCE6F0;
    --tblr-primary: #0B4F8A; --tblr-primary-rgb: 11, 79, 138; --tblr-link-color: #0B4F8A;
    --tblr-red: #C0392B; --tblr-red-rgb: 192, 57, 43; --tblr-green: #187A4D; --tblr-green-rgb: 24, 122, 77;
    --sekolah-teks: #14283C; --sekolah-kuning-teks: #8A5A00;
  }
}

/* Tombol ganti tema */
.tombol-tema .ikon-gelap { display: none; }
[data-bs-theme="dark"] .tombol-tema .ikon-gelap { display: inline-block; }
[data-bs-theme="dark"] .tombol-tema .ikon-terang { display: none; }
.sel-kegiatan { background: var(--tblr-yellow-lt) !important; }
.tabel-jadwal th, .tabel-jadwal td { white-space: nowrap; font-size: .85rem; }
.tabel-jadwal .sel-isi { background: var(--tblr-primary-lt); }
.tabel-jadwal .sel-isi .judul-sel, .tabel-jadwal .bg-orange-lt .judul-sel { font-weight: 600; }
.tabel-jadwal .sel-kosong-jadwal { opacity: .6; }

/* Daftar hasil kolom pencarian siswa: harus menutupi kolom di bawahnya */
.pilih-cari .list-group { top: 100%; margin-top: 2px; max-height: 260px; overflow-y: auto; border-radius: var(--tblr-border-radius); }
.pilih-cari .list-group-item { background-color: var(--tblr-bg-surface, #fff); }
.pilih-cari .list-group:empty { display: none; }

/* Lembar cetak kode undangan */
.potongan { border: 1px dashed #888; border-radius: 8px; padding: 14px; background: #fff; color: #000; break-inside: avoid; }
.potongan .kode { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; letter-spacing: .2em; font-weight: 700; }
@media print {
  .navbar, .page-header, .alert, .jangan-cetak { display: none !important; }
  .page-body { margin: 0 !important; }
  .page-wrapper { margin-left: 0 !important; }  /* Konsol Staf: ruang menu kiri tidak ikut tercetak */
}

/* Logo sekolah di navbar dan halaman masuk */
.logo-sekolah { height: 2rem; width: auto; max-width: 8rem; object-fit: contain; vertical-align: middle; }

/* Kalender akademik per bulan */
.kalender-bulan { table-layout: fixed; min-width: 640px; }
.kalender-bulan td { height: 6.5rem; vertical-align: top; padding: .35rem; }
.kalender-bulan td.luar { background: var(--tblr-bg-surface-secondary); opacity: .55; }
.kalender-bulan td.libur .tanggal { color: var(--tblr-red); font-weight: 700; }
.kalender-bulan td.hari-ini { box-shadow: inset 0 0 0 2px var(--tblr-primary); }
.kalender-bulan .tanggal { display: flex; justify-content: space-between; align-items: center; text-decoration: none;
  color: inherit; font-weight: 600; margin-bottom: .25rem; }
.kalender-bulan a.tanggal .tambah { visibility: hidden; color: var(--tblr-primary); }
.kalender-bulan td:hover a.tanggal .tambah { visibility: visible; }
.kalender-bulan .agenda { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px; font-weight: 500; text-decoration: none; }

/* Kalender bulan di layar HP: tanpa geser samping, sel lebih kecil, agenda jadi titik berwarna */
@media (max-width: 575.98px) {
  .kalender-bulan { min-width: 0; font-size: .75rem; }
  .kalender-bulan th { padding: .25rem .1rem; }
  .kalender-bulan td { height: 3.4rem; padding: .15rem; }
  .kalender-bulan .tanggal { margin-bottom: .1rem; }
  .kalender-bulan a.tanggal .tambah { display: none; }
  .kalender-bulan .agenda { display: inline-block; width: .55rem; height: .55rem; padding: 0; margin: 0 1px; border-radius: 50%;
    font-size: 0; vertical-align: middle; }
}

/* Jadwal tampilan kotak */
.jadwal-kotak td { vertical-align: top; min-width: 7rem; padding: .35rem .45rem; }
.jadwal-kotak .sel-pelajaran { background: var(--tblr-primary-lt, #e6f0ec); }
.jadwal-kotak .sel-kegiatan, .jadwal-kotak .baris-kegiatan td:first-child { background: var(--tblr-yellow-lt, #fff7e0); }
.jadwal-kotak .sel-tugas { background: var(--tblr-orange-lt, #fff0e0); }
.jadwal-kotak .sel-tutup { background: var(--tblr-bg-surface-secondary); }
.jadwal-kotak .sel-kosong a { opacity: .35; }
.jadwal-kotak .sel-kosong:hover a { opacity: 1; }
@media (max-width: 575.98px) { .jadwal-kotak td { min-width: 5.5rem; font-size: .75rem; } }

/* Halaman Pola jam: kolom per hari; sesi yang mengikuti Umum redup, yang ditiadakan dicoret */
.pola-jam .kolom-hari { width: 15.5rem; }
.pola-jam .entri.ikut-umum input[type=time] { color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary); }
.pola-jam .entri.ditiadakan { opacity: .55; }
.pola-jam .entri.ditiadakan .fw-medium { text-decoration: line-through; }
.pola-jam input[type=time] { min-width: 0; padding-left: .3rem; padding-right: .3rem; }
/* Daftar panjang (P-7b): bilah halaman menempel di atas saat digulir; judul kolom menempel di dalam kotak gulir;
   teks panjang dipotong satu baris (lengkap lewat title / disentuh). */
.bilah-halaman { background: var(--tblr-bg-surface, #fff); }
.bilah-lekat { position: sticky; top: var(--tinggi-bilah, 0px); z-index: 5; }
.tabel-gulir { max-height: 75vh; overflow-y: auto; }
.judul-lekat thead th { position: sticky; top: 0; z-index: 2; background: var(--tblr-bg-surface-tertiary, #f6f8fb); }
.teks-potong { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom; }
.teks-potong.terbuka { white-space: normal; overflow: visible; }
@media (max-width: 767.98px) { .teks-potong { max-width: 12rem; } }
@media print { .bilah-halaman { display: none !important; } .tabel-gulir { max-height: none; overflow: visible; } }

/* Rincian kartu ringkasan (mis. per tingkat/rombel) dipotong dua baris; lengkap lewat title (penataan panel 24-10-2026) */
.rincian-ringkas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Catatan uji putaran 45: di laptop halaman muat satu layar; bagian panjang bergulir di kotaknya sendiri.
   .gulir-layar dipakai kolom samping (agenda, daftar) mulai layar lebar (>= 992 px). */
@media (min-width: 992px) {
  .gulir-layar { max-height: calc(100vh - 11rem); overflow-y: auto; }
  .kalender-bulan td { height: clamp(3.6rem, calc((100vh - 16rem) / 6), 6.5rem); }
  .kalender-wadah { max-width: 62rem; margin-inline: auto; }
  .kalender-samping { position: sticky; top: 1rem; }
}

/* Cetak kalender satu semester di satu halaman A4 (catatan uji 306) */
.lembar-a4 { background: #fff; color: #000; max-width: 210mm; margin: 0 auto; padding: 10mm; }
.kalender-semester { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm 6mm; }
.bulan-kecil { width: 100%; border-collapse: collapse; font-size: 8pt; text-align: center; }
.bulan-kecil caption { caption-side: top; font-weight: 700; color: #000; padding: 0 0 1mm; text-align: center; }
.bulan-kecil th { font-weight: 600; border-bottom: 1px solid #999; }
.bulan-kecil th.minggu { color: #C0392B; }
.bulan-kecil td { padding: .4mm 0; }
.bulan-kecil td.libur { background: #f6d5d1; color: #8e1f14; font-weight: 700; }
.bulan-kecil td.ujian { background: #fbe7c2; font-weight: 700; }
.bulan-kecil td.kegiatan { background: #d6ecfa; }
.keterangan-warna { display: flex; gap: 6mm; justify-content: center; font-size: 8pt; margin: 3mm 0; }
.keterangan-warna .kotak { display: inline-block; width: 3mm; height: 3mm; margin-right: 1mm; vertical-align: middle; }
.kotak.libur { background: #f6d5d1; } .kotak.ujian { background: #fbe7c2; } .kotak.kegiatan { background: #d6ecfa; }
.agenda-cetak { columns: 2; column-gap: 8mm; font-size: 7.5pt; line-height: 1.3; padding-left: 5mm; margin: 0; }
.agenda-cetak li { break-inside: avoid; }
.cetak-lanskap .lembar-a4 { max-width: 297mm; }
.cetak-lanskap .kalender-semester { grid-template-columns: repeat(6, 1fr); gap: 3mm 4mm; }
.cetak-lanskap .agenda-cetak { columns: 3; }
@media print {
  .kalender-cetak-body { background: #fff; }
  .kalender-cetak-body .container-xl { padding: 0; max-width: none; }
  .lembar-a4 { padding: 0; max-width: none; }
  .lembar-a4 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Jadwal satu hari di HP (catatan uji 304; static/js/jadwal_hari.js) */
@media (max-width: 767.98px) {
  .jadwal-satu-hari .sembunyi-hp { display: none; }
  .jadwal-satu-hari th, .jadwal-satu-hari td { white-space: normal; }
}

/* Beranda staf di laptop: butir "Perlu dikerjakan" dua kolom agar muat satu layar (catatan uji putaran 45) */
@media (min-width: 992px) {
  .daftar-kerja { display: grid; grid-template-columns: 1fr 1fr; }
  .daftar-kerja .list-group-item { padding-top: .5rem; padding-bottom: .5rem; border-right: 1px solid var(--tblr-border-color); }
  .daftar-kerja .list-group-item:nth-child(2n) { border-right: 0; }
}

/* Bilah atas menempel & ringkas saat digulir (catatan uji 319; static/js/bilah_atas.js, templates/_akun_menu.html) */
.bilah-atas { transition: box-shadow .15s ease; }
.navbar.bilah-atas { z-index: 1020; background: var(--tblr-bg-surface); }
.menu-akun .nama-akun { max-width: 14rem; }
@media (min-width: 992px) {
  .kepala-lekat { position: sticky; top: 0; z-index: 1010; background: var(--tblr-body-bg); }
  .bilah-ringkas .kepala-lekat { padding-top: .5rem; padding-bottom: .5rem; margin-bottom: .5rem;
    box-shadow: 0 1px 0 var(--tblr-border-color), 0 4px 12px rgba(20, 40, 60, .06); }
  .bilah-ringkas .kepala-lekat .page-pretitle { display: none; }
  .bilah-ringkas .kepala-lekat .page-title { font-size: 1rem; }
  .kalender-samping { top: calc(var(--tinggi-bilah, 0px) + 1rem); }
}
.bilah-ringkas .navbar.bilah-atas { padding-top: .25rem; padding-bottom: .25rem; box-shadow: 0 1px 0 var(--tblr-border-color), 0 4px 12px rgba(20, 40, 60, .06); }
.bilah-ringkas .bilah-atas .label-tombol { display: none; }
@media (max-width: 575.98px) {
  .bilah-atas .label-tombol { display: none; }
  .menu-akun .nama-akun { max-width: 7rem; }
  .bilah-konsol-hp .menu-akun .nama-akun, .bilah-konsol-hp .menu-akun .ti-chevron-down { display: none; }
}
@media (max-width: 991.98px) {
  aside.navbar-vertical.bilah-konsol-hp { position: sticky; top: 0; z-index: 1030; }
  .bilah-konsol-hp .menu-akun .nama-akun { max-width: 8rem; }
  /* Masukan 3-11-2026 (pilihan A): bilah atas tetap satu baris utuh (☰, merek, akun); menu terbuka DI BAWAHNYA selebar
     layar, bukan berbaris di samping merek. */
  .bilah-konsol-hp > .container-fluid { flex-wrap: wrap; }
  .bilah-konsol-hp .navbar-brand { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .bilah-konsol-hp .navbar-collapse { flex-basis: 100%; order: 9; border-top: 1px solid rgba(255, 255, 255, .1);
                                      margin-top: .5rem; }
  .bilah-konsol-hp .menu-akun .label-tombol { display: none; }
  .bilah-konsol-hp .navbar-collapse { max-height: calc(100vh - 4rem); overflow-y: auto; }
}
@media print { .bilah-atas { position: static !important; } }

/* Presensi sesi (Tahap 2, catatan uji 25-10-2026): satu baris per siswa = status | nama | catatan */
.tabel-presensi td { padding-top: .35rem; padding-bottom: .35rem; }
.tabel-presensi .nama-presensi { max-width: 14rem; }
.tabel-presensi .nama-presensi .teks-potong { max-width: 100%; }
.tabel-presensi .catatan-presensi { min-width: 7rem; }
.tabel-presensi .pilih-segmen { flex-wrap: nowrap; gap: .2rem; }
.tabel-presensi .pilih-segmen > label { min-width: 1.9rem; padding: .15rem .45rem; }
@media (max-width: 575.98px) {
  .tabel-presensi td { padding-left: .35rem; padding-right: .35rem; }
  .tabel-presensi .pilih-segmen > label { padding-left: .5rem; padding-right: .5rem; }
  .tabel-presensi .nama-presensi { max-width: 8.5rem; font-size: .8125rem; }
  .tabel-presensi .catatan-presensi { min-width: 5rem; }
}
/* T2-3b langkah Setoran (tab per jenis): laptop satu baris per siswa; HP dua baris
   (nama + predikat L/K/U + catatan, lalu surah/ayat awal sejajar surah/ayat akhir). */
.setoran-baris { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.setoran-baris .setoran-nama { flex: 0 0 13rem; min-width: 0; }
.setoran-baris .isian-surah { flex: 1 1 7rem; min-width: 0; max-width: 13rem; }
.setoran-baris .isian-ayat { flex: 0 0 3.9rem; }
.setoran-baris .isian-sd { flex: 0 0 1.6rem; }
.setoran-baris .setoran-predikat { flex: 0 0 auto; }
.setoran-baris .isian-sumber { flex: 0 0 5.6rem; }
.setoran-baris .setoran-predikat { flex-wrap: nowrap; gap: .2rem; }
/* Catatan uji 2-11-2026: laptop SATU baris per siswa (nama + isian + predikat), juga Tahsin; catatan terbuka boleh turun. */
@media (min-width: 768px) {
  .setoran-baris { flex-wrap: nowrap; }
  .setoran-baris:has(.setoran-ct[open]) { flex-wrap: wrap; }
  .setoran-baris .setoran-nama { flex: 0 1 12rem; }
  .setoran-baris .isian-surah { flex: 1 1 6rem; min-width: 4.5rem; }
}
.setoran-baris .isian-jilid { flex: 0 0 5.8rem; }
.d-contents { display: contents; }
.d-contents[hidden] { display: none; }
/* Catatan uji butir 58: tab jenis setoran terpilih berwarna tegas (oranye; hijau saat sudah ada catatan). */
.tab-setoran .nav-link.active { background: #F2B84B; border-color: #F2B84B; color: #14283C; font-weight: 600; }
.tab-setoran .nav-link.active .badge { background: #1E8E5A !important; color: #fff !important; }
.tab-setoran .nav-link:not(.active) { color: var(--tblr-secondary); }
.setoran-ct > summary { list-style: none; }
.setoran-ct > summary::-webkit-details-marker { display: none; }
.setoran-ct { display: flex; align-items: center; gap: .3rem; }
.setoran-ct[open] { flex: 1 1 10rem; }
@media (max-width: 767.98px) {
  .setoran-baris > * { order: 3; }
  .setoran-baris .setoran-nama { order: 1; flex: 1 0 calc(100% - 9.4rem); }
  .setoran-baris .setoran-predikat, .setoran-baris .setoran-ct { order: 2; }
  /* Catatan uji 3-11-2026: isian di dalam .d-contents (Iqro / Qur'an Tahsin) juga baris kedua; Tahsin: baris 1 = nama +
     pilihan Iqro/Qur'an + predikat + catatan. */
  .setoran-baris .d-contents > * { order: 3; }
  .setoran-baris .isian-sumber { order: 2; }
  .setoran-baris:has(.isian-sumber) .setoran-nama { flex-basis: calc(100% - 14.6rem); }
  .setoran-baris .setoran-ct[open] { order: 4; flex-basis: 100%; }
  .setoran-baris { gap: .25rem; }
  .setoran-baris .isian-surah { flex: 1 1 0; min-width: 3.8rem; max-width: none; }
  .setoran-baris .isian-ayat { flex: 0 0 3rem; }
  .setoran-baris .isian-sd { flex: 0 0 1.2rem; }
  .setoran-baris .isian-sumber { flex: 0 0 5rem; padding-right: 1.4rem; }
  .setoran-baris .isian-jilid { flex: 0 0 5rem; padding-right: 1.4rem; }
}
.tabel-jurnal .kolom-materi { max-width: 26rem; }
.tabel-jurnal .kolom-materi .teks-potong { max-width: 100%; }
@media (max-width: 575.98px) { .tabel-jurnal .kolom-materi { max-width: 10rem; } .tabel-jurnal td { font-size: .8125rem; } }
/* Kartu "Sesi belum terisi" (beranda guru): daftar bergulir di dalam kartunya di semua ukuran layar */
.daftar-belum-terisi { max-height: 22rem; overflow-y: auto; }
/* Layar isi sesi di laptop: daftar presensi bergulir di kartunya; jurnal di kolom kanan tanpa gulir */
@media (min-width: 992px) { .presensi-gulir { max-height: calc(100vh - 20rem); min-height: 14rem; } }

/* T2-6: kalender kehadiran bulanan di profil siswa (portal). Warna dari keadaan hari; HP tetap tujuh kolom. */
.kalender-hadir { table-layout: fixed; }
.kalender-hadir th { text-align: center; font-weight: 500; }
.kalender-hadir td { height: 3.2rem; vertical-align: top; padding: .25rem; font-size: .8rem; }
.kalender-hadir .tgl { font-weight: 600; }
.kalender-hadir .ket { display: block; font-size: .7rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .kalender-hadir .ket { display: none; } .kalender-hadir td { height: 2.4rem; } }

/* T2-7 grafik pekanan (keterisian sesi & hadir per JP), SVG dari apps/kbm/rekap.pekanan. */
.grafik-pekanan svg { width: 100%; height: auto; display: block; }
.grafik-pekanan .kisi { stroke: var(--tblr-border-color); stroke-width: 1; }
.grafik-pekanan .ambang { stroke: var(--tblr-orange); stroke-width: 1; stroke-dasharray: 4 3; }
.grafik-pekanan .sumbu { fill: var(--tblr-secondary); font-size: 10px; }
.grafik-pekanan .seri-isi { stroke: var(--tblr-primary); stroke-width: 2; }
.grafik-pekanan .seri-hadir { stroke: var(--tblr-green); stroke-width: 2; }
.grafik-pekanan .seri-hadir.redup { stroke-dasharray: 4 3; opacity: .55; }
.grafik-pekanan .titik-isi { fill: var(--tblr-primary); }
.grafik-pekanan .titik-hadir { fill: var(--tblr-green); }
.grafik-pekanan .titik-hadir.redup { fill: var(--tblr-bg-surface); stroke: var(--tblr-green); stroke-width: 1.5; opacity: .7; }
.grafik-pekanan .legenda { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 4px; }
.grafik-pekanan .legenda.seri-isi { border-color: var(--tblr-primary); }
.grafik-pekanan .legenda.seri-hadir { border-color: var(--tblr-green); }
.grafik-pekanan .legenda.seri-hadir.redup { border-top-style: dashed; opacity: .55; }
.grafik-pekanan .legenda.ambang { border-color: var(--tblr-orange); border-top-style: dashed; }
/* Garis hadir per tingkat (saran koordinator 30-10-2026): tipis, warna berbeda dari garis sekolah. */
.grafik-pekanan .seri-tingkat { stroke-width: 1.25; opacity: .85; }
.grafik-pekanan .seri-tingkat.redup { stroke-dasharray: 3 3; opacity: .45; }
.grafik-pekanan .t10 { stroke: var(--tblr-azure); fill: var(--tblr-azure); }
.grafik-pekanan .t11 { stroke: var(--tblr-purple); fill: var(--tblr-purple); }
.grafik-pekanan .t12 { stroke: var(--tblr-pink); fill: var(--tblr-pink); }
.grafik-pekanan .legenda.seri-tingkat { border-top-width: 1.5px; }
.grafik-pekanan .legenda.t10 { border-color: var(--tblr-azure); }
.grafik-pekanan .legenda.t11 { border-color: var(--tblr-purple); }
.grafik-pekanan .legenda.t12 { border-color: var(--tblr-pink); }

/* Pilihan tombol (catatan uji 1-11-2026): tombol terpisah bergaya sama dengan ceklis Aktivitas jurnal (btn-outline-primary
   kecil, sudut membulat, berjarak); pilihan aktif terisi penuh. Dipakai presensi H/S/I/A/T, jenis & asal informasi izin. */
.pilih-segmen { display: inline-flex; flex-wrap: wrap; gap: .25rem; vertical-align: middle; position: relative; }
.pilih-segmen > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pilih-segmen > label { margin: 0; padding: .2rem .6rem; min-width: 2.1rem; text-align: center; cursor: pointer; user-select: none;
  font-size: .8125rem; line-height: 1.5; white-space: nowrap; color: var(--tblr-primary); background: transparent;
  border: 1px solid var(--tblr-primary); border-radius: var(--tblr-border-radius); transition: background-color .12s, color .12s; }
.pilih-segmen > label:hover { background: var(--sekolah-latar-lembut); }
.pilih-segmen > input:checked + label { background: var(--tblr-primary); color: var(--tblr-primary-fg, #fff); }
/* Status presensi: tidak dipilih = biru seperti pilihan lain; dipilih = warna menurut artinya (H hijau, S/I kuning, A merah, T abu). */
.pilih-segmen > input:checked + label.seg-h { background: var(--tblr-success, #2fb344); border-color: var(--tblr-success, #2fb344); color: #fff; }
.pilih-segmen > input:checked + label.seg-s, .pilih-segmen > input:checked + label.seg-i { background: var(--tblr-warning, #f59f00); border-color: var(--tblr-warning, #f59f00); color: #fff; }
.pilih-segmen > input:checked + label.seg-a { background: var(--tblr-danger, #d63939); border-color: var(--tblr-danger, #d63939); color: #fff; }
.pilih-segmen > input:checked + label.seg-t { background: var(--tblr-secondary, #667382); border-color: var(--tblr-secondary, #667382); color: #fff; }
/* Predikat setoran tahfidz (catatan uji 2-11-2026): seperti status presensi; Lancar hijau, Kurang kuning, Ulang merah. */
.pilih-segmen > input:checked + label.seg-lancar { background: var(--tblr-success, #2fb344); border-color: var(--tblr-success, #2fb344); color: #fff; }
.pilih-segmen > input:checked + label.seg-kurang { background: var(--tblr-warning, #f59f00); border-color: var(--tblr-warning, #f59f00); color: #fff; }
.pilih-segmen > input:checked + label.seg-ulang { background: var(--tblr-danger, #d63939); border-color: var(--tblr-danger, #d63939); color: #fff; }
.pilih-segmen > input:checked + label.seg-b { background: var(--tblr-azure, #4299e1); border-color: var(--tblr-azure, #4299e1); color: #fff; }
.pilih-segmen > input:focus-visible + label { outline: 2px solid var(--sekolah-langit); outline-offset: 1px; }
.pilih-segmen > input:disabled + label { opacity: .55; cursor: not-allowed; }
[data-bs-theme="dark"] .pilih-segmen > label:hover { background: rgba(77, 179, 230, .14); }
@media (max-width: 575.98px) { .pilih-segmen > label { padding-left: .5rem; padding-right: .5rem; min-width: 1.9rem; } }

/* Rancangan Tahap 2 §2.3: penanda hari efektif satu kelas di kalender bulan & cetak semester (?rombel=). */
.kalender-bulan .penanda-efektif { font-size: .8rem; margin-left: .2rem; vertical-align: top; }
.bulan-kecil td.efektif { text-decoration: underline; font-weight: 600; }

/* Catatan uji 102: layar isi sesi/kegiatan di HP — kartu Presensi / Jurnal / Setoran berlipat (static/js/lipat_hp.js). */
.lipat-tombol { display: none; }
@media (max-width: 767.98px) {
  [data-lipat] > .card-header { cursor: pointer; }
  [data-lipat] .lipat-tombol { display: inline-flex; align-items: center; }
  [data-lipat] .lipat-tombol .ti { transition: transform .15s; }
  [data-lipat].terlipat .lipat-tombol .ti { transform: rotate(-90deg); }
  [data-lipat].terlipat > :not(.card-header) { display: none !important; }
  [data-lipat].terlipat { margin-bottom: .5rem !important; }
}

/* Halaman Masuk (masukan 3-11-2026): HP satu panel, laptop dua panel (sambutan biru tua + isian). */
.wadah-masuk { max-width: 30rem; }
.kartu-masuk { border-radius: 1rem; }
/* Masukan 4-11-2026: panel sambutan (logo) berlatar biru gradasi juga di HP, sama dengan laptop. */
.panel-sambutan { padding: 2rem 1.5rem 1.75rem; color: #FFFFFF;
                  background: linear-gradient(160deg, #12408C 0%, #0B4F8A 55%, #1E88C8 100%); }
.logo-masuk { height: 5rem; width: auto; max-width: 12rem; object-fit: contain; }
.ikon-masuk { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem;
              border-radius: 50%; background: rgba(255, 255, 255, .15); color: #FFFFFF; font-size: 2.5rem; }
.sapaan-masuk { color: rgba(255, 255, 255, .85); font-size: .95rem; letter-spacing: .02em; }
.judul-masuk { font-size: 1.5rem; font-weight: 700; color: #FFFFFF; }
.jargon-masuk { font-style: italic; color: rgba(255, 255, 255, .85); }
.panel-sambutan .logo-masuk { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.panel-isian { padding: 1.5rem; }
@media (min-width: 992px) {
  .wadah-masuk { max-width: 56rem; }
  .kartu-masuk { min-height: 30rem; }
  .panel-sambutan { padding: 3rem 2.5rem; }
  .panel-sambutan .judul-masuk { font-size: 2rem; }
  .panel-sambutan .logo-masuk { height: 7rem; }
  .panel-isian { padding: 2.5rem; }
}

/* Beranda portal (evaluasi 3-11-2026): pita Sekarang, sesi berjalan berdenyut, PR ringkas, akses cepat. */
.pita-sekarang { border-left: 4px solid var(--tblr-primary); }
.butir-sekarang .label-berlangsung, .butir-sekarang .label-berikutnya { display: none; }
.butir-sekarang.berlangsung .label-berlangsung { display: inline-flex; align-items: center; gap: .35rem;
  color: var(--tblr-green); font-weight: 600; font-size: .85rem; }
.butir-sekarang.berikutnya .label-berikutnya { display: inline-block; }
.butir-sekarang.berlangsung { background: var(--tblr-green-lt); border-radius: var(--tblr-border-radius); padding-left: .5rem !important;
  padding-right: .5rem !important; }
.titik-denyut { width: .6rem; height: .6rem; border-radius: 50%; background: var(--tblr-green); display: inline-block;
  box-shadow: 0 0 0 0 rgba(47, 179, 68, .6); animation: denyut 1.8s ease-out infinite; }
@keyframes denyut { 0% { box-shadow: 0 0 0 0 rgba(47, 179, 68, .6); } 70% { box-shadow: 0 0 0 .5rem rgba(47, 179, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 179, 68, 0); } }
.sedang-berlangsung { box-shadow: inset 4px 0 0 var(--tblr-green); background: var(--tblr-green-lt); }
@media (prefers-reduced-motion: reduce) { .titik-denyut { animation: none; } }
.akses-cepat { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.akses-cepat-tombol { flex-direction: column; gap: .25rem; padding: .75rem .5rem; white-space: normal; line-height: 1.2; }
.akses-cepat-tombol .ti { font-size: 1.5rem; }
[aria-expanded="true"] > .card-actions .ikon-lipat { transform: rotate(180deg); }
.ikon-lipat { transition: transform .15s; }
.butir-sekarang[hidden], [data-sekarang-kosong][hidden] { display: none !important; }
@media (max-width: 575.98px) {
  .akses-cepat { grid-template-columns: repeat(3, 1fr); }
  .akses-cepat-tombol { padding: .5rem .25rem; font-size: .75rem; }
  .akses-cepat-tombol .ti { font-size: 1.25rem; }
}

/* Panel mengambang (masukan 4-11-2026): daftar dispensasi di beranda guru dibuka sebagai dropdown di atas isi. */
.panel-mengambang { width: min(30rem, calc(100vw - 2rem)); max-height: 60vh; overflow-y: auto; }