/* ==========================================================================
   HiClass UI — lapisan perbaikan (dimuat SETELAH hiclass.css)
   1. Token warna netral + aksen pink
   2. Topbar & navigasi berkelompok (desktop) + bottom nav (HP)
   3. Halaman lebar penuh (.wrap-lebar) + leger nilai ramping
   4. Cetak: anti terpotong, A4/F4, muat 1 halaman, tanda tangan opsional
   5. Prototipe tampilan baru (.ui-baru): Dashboard & Leger Nilai
   ========================================================================== */

:root {
  --ui-bg: #F8F7F8;
  --ui-surface: #FFFFFF;
  --ui-ink: #2B2A2E;
  --ui-ink-2: #645E66;
  --ui-line: #E6E3E6;
  --ui-line-2: #EFEDEF;
  --ui-accent: #C45C8A;
  --ui-accent-hover: #A84470;
  --ui-accent-soft: #FDF2F6;
  --ui-radius: 12px;
}

/* ---------- 2. Topbar & navigasi ---------- */
.topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--ui-line);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
}

.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
}

.topbar .brand { font-size: 1.55rem; color: var(--ui-accent); }

.nav-grup { display: flex; align-items: center; gap: 0.15rem; }

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.8rem;
  border-radius: 9px;
  color: var(--ui-ink-2);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.nav-item:hover { background: var(--ui-line-2); color: var(--ui-ink); text-decoration: none; }
summary.nav-item::-webkit-details-marker { display: none; }
summary.nav-item::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 0.15rem; opacity: 0.6; }

.nav-item.is-aktif,
.nav-drop.is-aktif > summary.nav-item { color: var(--ui-accent); background: var(--ui-accent-soft); }

.nav-drop { position: relative; }
.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: 0 12px 30px rgba(43, 42, 46, 0.12);
  padding: 0.35rem;
  display: grid;
}
.nav-drop-kanan .nav-menu { left: auto; right: 0; }
.nav-menu a { padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--ui-ink); font-weight: 600; text-decoration: none; }
.nav-menu a:hover { background: var(--ui-line-2); text-decoration: none; }
.nav-menu a.nav-sekunder { font-weight: 500; color: var(--ui-muted, #64748b); border-top: 1px solid var(--ui-line-2); border-radius: 0 0 8px 8px; margin-top: .2rem; }
.nav-keluar { color: #B42318 !important; }

/* Bottom nav (HP) */
.bottomnav { display: none; }

@media (max-width: 760px) {
  .sudah-login .nav-grup { display: none; }
  .sudah-login { padding-bottom: 68px; }
  .bottomnav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-line);
    padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom));
  }
  .bottomnav > a,
  .bottomnav summary {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ui-ink-2);
    text-decoration: none;
    padding: 0.3rem 0;
    cursor: pointer;
    list-style: none;
  }
  .bottomnav summary::-webkit-details-marker { display: none; }
  .bottomnav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .bottomnav .is-aktif, .bottomnav .is-aktif > summary { color: var(--ui-accent); }
  .bottom-lain { position: relative; }
  .bottom-menu {
    position: absolute;
    right: 0.25rem;
    bottom: calc(100% + 8px);
    width: 210px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: 0 -8px 30px rgba(43, 42, 46, 0.14);
    padding: 0.35rem;
    display: grid;
  }
  .bottom-menu a { padding: 0.65rem 0.8rem; border-radius: 8px; color: var(--ui-ink); font-weight: 600; text-decoration: none; }
  /* bilah Simpan absen tetap di atas bottom nav */
  .sudah-login .absen-savebar { bottom: 64px; }
}

/* ---------- 3. Halaman lebar penuh + leger ramping ---------- */
body.wrap-lebar .wrap { width: calc(100% - 2rem); max-width: none; }

table.leger th,
table.leger td { padding: 0.25rem 0.2rem; font-size: 0.8rem; }
table.leger thead th { font-size: 0.72rem; }
table.leger tbody td:not(.sticky-no):not(.sticky-nama) { width: 40px; min-width: 38px; }
table.leger .sticky-no { min-width: 0; width: 34px; }
table.leger .sticky-nama { left: 34px; min-width: 150px; width: 180px; max-width: 180px; }
table.leger .col-hasil { min-width: 44px; }

@media (min-width: 1024px) {
  body.wrap-lebar table.leger { width: 100%; }
}

/* ---------- 4. Cetak ---------- */
.cetak-kontrol {
  display: grid;
  gap: 0.6rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 0.8rem 1rem;
  margin: 0.75rem 0 1rem;
}
.cetak-tombol { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cetak-opsi { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center; }
.cetak-opsi label.check { font-weight: 600; font-size: 0.92rem; color: var(--ui-ink); }
.cetak-opsi .sub-opsi { font-weight: 500; color: var(--ui-ink-2); }
.cetak-opsi .mati { opacity: 0.45; }
.cetak-pemisah { width: 1px; height: 1.2rem; background: var(--ui-line); }
.cetak-catatan { margin: 0; }

/* Tanda tangan: dua kolom, guru selalu di kanan */
.ttd-blok { gap: 3rem; }
.ttd-blok > div { min-width: 60mm; }
.ttd-guru { margin-left: auto; }
.ttd-ruang { height: 18mm; }
.print-area.tanpa-ttd .ttd-blok,
.print-area.tanpa-ttd-kepsek .ttd-kepsek,
.print-area.tanpa-ttd-guru .ttd-guru { display: none !important; }

@media print {
  .topbar, .bottomnav, .cetak-kontrol { display: none !important; }
  body, body.wrap-lebar { padding: 0 !important; }
  body.wrap-lebar .wrap, .wrap { width: 100% !important; max-width: none !important; margin: 0 !important; }

  /* Lepas semua gaya layar yang membuat tabel melebar */
  .print-area .tw,
  .print-area .matrix-wrap,
  .print-area .leger-wrap { overflow: visible !important; border: 0 !important; }

  .print-area table:not(.nilai-meta) {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
  }

  .print-area table:not(.nilai-meta) th,
  .print-area table:not(.nilai-meta) td {
    position: static !important;
    left: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: 7pt !important;
    line-height: 1.15 !important;
    padding: 1px 2px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    border: 0.4pt solid #333 !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .print-area thead th {
    font-size: 6.5pt !important;
    font-weight: 700;
    background: #eee !important;
    overflow-wrap: normal !important;
    word-break: keep-all;
    hyphens: manual;
  }
  .print-area .nilai-meta td { border: 0 !important; padding: 0 4px !important; font-size: 9pt !important; text-align: left; }

  /* Lebar kolom tetap: No 6mm, Nama 42mm, sisanya dibagi rata */
  .laporan-nilai thead tr:first-child th:nth-child(1),
  .laporan-table thead tr:first-child th:nth-child(1),
  .matrix thead tr:first-child th:nth-child(1) { width: auto; }
  .laporan-nilai thead tr:first-child th:nth-child(2),
  .laporan-table thead tr:first-child th:nth-child(2) { width: 42mm !important; }
  .laporan-nilai .g-rap { width: 9mm !important; }
  .laporan-nilai .g-uas, .laporan-nilai .g-tot { width: 15mm !important; font-size: 6pt !important; }
  .laporan-nilai td.nama, .print-area td.sk { text-align: left !important; }

  /* Tabel panjang: header diulang, baris & TTD tidak terbelah */
  .print-area thead { display: table-header-group; }
  .print-area tfoot { display: table-footer-group; }
  .print-area tr, .ttd-blok { break-inside: avoid; page-break-inside: avoid; }

  .ttd-blok { margin-top: 5mm !important; font-size: 9pt; }
  .ttd-ruang { height: 15mm; }

  /* Muat 1 halaman: perkecil seluruh area cetak */
  .print-area.muat-1 { zoom: 0.82; }
  .print-area.muat-1 .ttd-ruang { height: 12mm; }
  .print-area.muat-1 .ttd-blok { margin-top: 3mm !important; }
}

/* ---------- 5. Prototipe tampilan baru (.ui-baru) ---------- */
html:has(body.ui-baru),
body.ui-baru { background: var(--ui-bg) !important; color: var(--ui-ink); }

.ui-baru a { color: var(--ui-accent-hover); }
.ui-baru .page-title { color: var(--ui-ink); font-size: clamp(1.45rem, 3.5vw, 1.9rem); margin: 1.1rem 0 0.25rem; }
.ui-baru .muted, .ui-baru .hint { color: var(--ui-ink-2); }
.ui-baru .panel {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  box-shadow: none;
  border-radius: var(--ui-radius);
  padding: 1rem 1.1rem;
}
.ui-baru .panel-title { color: var(--ui-ink); font-size: 1.1rem; margin: 0; }
.ui-baru .btn { padding: 0.6rem 1.05rem; border-radius: 10px; font-size: 0.93rem; }
.ui-baru .btn-primary { background: var(--ui-accent); color: #fff; border: 1px solid var(--ui-accent); }
.ui-baru .btn-primary:hover { background: var(--ui-accent-hover); }
.ui-baru .btn-ghost,
.ui-baru .btn-small { background: var(--ui-surface); color: var(--ui-ink); border: 1px solid #D9D5D9; }
.ui-baru .btn-ghost:hover,
.ui-baru .btn-small:hover { background: var(--ui-line-2); color: var(--ui-ink); }
.ui-baru .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.ui-baru .site-footer { color: var(--ui-ink-2); }

/* Tabel UI standar */
.tabel-ui { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabel-ui th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ui-ink-2); font-weight: 700; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--ui-line); background: #FBFAFB; }
.tabel-ui td { padding: 0.6rem; border-bottom: 1px solid var(--ui-line-2); vertical-align: middle; }
.tabel-ui tr:last-child td { border-bottom: 0; }
.tabel-ui .jam { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.tabel-ui .aksi { text-align: right; white-space: nowrap; }
.tabel-ui tr.is-selesai td { color: var(--ui-ink-2); }
.tabel-ui tr.is-berlangsung td:first-child { box-shadow: inset 3px 0 0 var(--ui-accent); }

.titik { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--mapel, #999); margin-right: 0.4rem; vertical-align: middle; }
.status-teks { font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--ui-line-2); color: var(--ui-ink-2); white-space: nowrap; }
.status-teks.st-berlangsung { background: var(--ui-accent); color: #fff; }
.status-teks.st-berikutnya { background: var(--ui-accent-soft); color: var(--ui-accent-hover); }
.absen-lengkap { color: #1F7A45; font-weight: 700; }

/* Dashboard */
.dash-atas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.5rem 1rem; }
.dash-tanggal { margin: 1.1rem 0 0; font-weight: 700; color: var(--ui-ink-2); font-size: 0.9rem; }
.ringkas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 1rem 0; }
.ringkas-item { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 0.7rem 0.9rem; }
.ringkas-item b { display: block; font-size: 1.45rem; line-height: 1.1; color: var(--ui-ink); }
.ringkas-item span { font-size: 0.82rem; color: var(--ui-ink-2); font-weight: 600; }
.ringkas-item.perlu b { color: #B54708; }
@media (max-width: 640px) { .ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.blok-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.dash-section { margin-bottom: 1rem; }
.tabel-scroll { overflow-x: auto; }

.chip-ringkas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-ringkas a { font-size: 0.85rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 8px; border: 1px solid var(--ui-line); background: #FFFAF2; color: #93370D; text-decoration: none; }
.chip-ringkas a.kosong { background: #F7F7F7; color: var(--ui-ink-2); }

.minggu td.hari { font-weight: 700; width: 6.5rem; white-space: nowrap; }
.minggu tr.is-today td { background: var(--ui-accent-soft); }
.slot { display: inline-flex; align-items: center; gap: 0.15rem; margin: 0.1rem 0.9rem 0.1rem 0; white-space: nowrap; font-size: 0.88rem; }
.slot .jam { color: var(--ui-ink-2); font-weight: 600; margin-right: 0.25rem; }

.pintasan { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-weight: 600; font-size: 0.92rem; margin: 0.25rem 0 1.5rem; }
.pintasan span { color: var(--ui-ink-2); }

/* Leger nilai (ui-baru) */
.ui-baru .rumus { background: var(--ui-surface); border: 1px solid var(--ui-line); border-style: solid; color: var(--ui-ink-2); }
.ui-baru .leger-wrap { border-color: var(--ui-line); border-radius: var(--ui-radius); }
.ui-baru table.leger th, .ui-baru table.leger td { border-color: var(--ui-line-2); }
.ui-baru table.leger thead th { background: #FBFAFB; color: var(--ui-ink); }
.ui-baru table.leger th.g-f { background: #FAF4F7; }
.ui-baru table.leger th.g-u { background: #FBF6EE; }
.ui-baru table.leger th.g-s { background: #F2F6F9; }
.ui-baru table.leger th.sub-head { color: var(--ui-ink-2); }
.ui-baru thead .sticky-no, .ui-baru thead .sticky-nama { background: #FBFAFB; }
.ui-baru table.leger td.kosong { background: #FFFFFF; }
.ui-baru table.leger td.rendah { background: #FEF0EF; color: #B42318; }
.ui-baru table.leger .col-hasil { background: #F6F5F6; color: var(--ui-ink); }
.ui-baru table.leger .col-hadir { min-width: 52px; background: #F2F7F4; color: #166534; font-weight: 600; text-align: center; }
.ui-baru .kol-link { color: var(--ui-accent-hover); }
.ui-baru table.leger tbody tr:hover td { background: #FCFBFC; }
.ui-baru table.leger tbody tr:hover td.rendah { background: #FEF0EF; }
.leger-aksi { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin: 0.6rem 0; }

/* Hanya tampil di HP */
.hp-saja { display: none; }
@media (max-width: 760px) { .hp-saja { display: block; } }

/* Menu atas: abu, hanya menu aktif yang pink (menang atas .ui-baru a) */
.topbar .nav-item { color: var(--ui-ink-2); }
.topbar .nav-item.is-aktif,
.topbar .nav-drop.is-aktif > summary.nav-item { color: var(--ui-accent); }
.topbar .brand { color: var(--ui-accent); }

/* Murid keluar / pindah */
.keluar-drop{position:relative;display:inline-block}
.keluar-drop>summary{list-style:none;cursor:pointer}
.keluar-drop>summary::-webkit-details-marker{display:none}
.keluar-drop[open]>.keluar-form{position:absolute;right:0;z-index:30;min-width:260px;background:#fff;border:1px solid var(--ui-line,#E6E3E6);border-radius:10px;padding:.75rem;box-shadow:0 8px 24px rgba(0,0,0,.12);text-align:left}
tr.baris-keluar td{color:#7a737c;background:#faf9fa}
td.cell.K,td.sel-keluar{color:#b9b3bb;background:#f3f1f3}
.ket-keluar{display:block;font-size:.78em;color:#a0466f;font-style:italic}
.laporan-table td.ket{font-size:.85em;line-height:1.3}
.laporan-table .g-ket{min-width:200px}
@media print{
  .laporan-table th.g-ket{width:48mm !important}
  .laporan-table th.g-bln{width:8mm !important}
  .laporan-table td.ket{font-size:6.5pt}
  tr.baris-keluar td{background:#f3f1f3 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* NISN selalu tampil di layar; disembunyikan HANYA saat dicetak bila "Tampilkan NISN" tidak dicentang */
@media print { .print-area.tanpa-nisn .c-nisn { display: none !important; } }
.print-area.tanpa-hadir .c-hadir { display: none !important; }

/* Matriks bulanan saat cetak: lebar per kolom dari <colgroup>, garis tegas, tanpa warna */
@media print {
  .print-area .matrix col { width: var(--w); }
  .print-area table.matrix th,
  .print-area table.matrix td {
    border: 0.5pt solid #333 !important;
    padding: 1.5pt 1pt !important;
    font-size: 6.5pt !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip;
    vertical-align: middle !important;
    text-align: center !important;
    background: #fff !important;
    font-weight: 400 !important;
  }
  .print-area table.matrix thead th { background: #eee !important; font-weight: 700 !important; border-bottom: 0.5pt solid #333 !important; }
  .print-area table.matrix .dh small { font-size: 5pt !important; font-weight: 400; color: #333 !important; }
  .print-area table.matrix td.sk { text-align: left !important; }
  .print-area table.matrix td.c-nama { white-space: normal !important; overflow-wrap: anywhere; }
  .print-area table.matrix td.off, .print-area table.matrix .dh.off { background: #e6e6e6 !important; }
  .print-area table.matrix td.A { font-weight: 700 !important; }
  .print-area table.matrix .ket-keluar { font-size: 5.5pt; color: #333 !important; }
  .print-area table.matrix .sum-row td { font-weight: 700 !important; }
}

/* Area Murid: pesan cek data lebih jelas */
.cek-card .flash-err-inline { display: block; margin-top: .5rem !important; padding: .65rem .8rem; border-radius: 10px; background: #fde8ee; color: #a3123f; font-weight: 600; line-height: 1.4; }

/* Matriks: No & L/P rata tengah (layar & cetak); tanggal yang belum lewat diredupkan */
.matrix td.c-tengah { text-align: center; }
.matrix th.dh.nanti { opacity: .55; }
@media print {
  .print-area table.matrix td.c-tengah { text-align: center !important; }
}

/* Catatan kecil penjelas fungsi / singkatan */
.info-kecil { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0 .85rem; padding: .5rem .7rem; font-size: .78rem; line-height: 1.5; color: #645E66; background: #FBFAFB; border: 1px solid #ECE8EC; border-radius: 10px; }
.info-kecil b { color: #2B2A2E; }
.info-i { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: .1rem; border-radius: 50%; background: #C45C8A; color: #fff; font: 700 .7rem/1.05rem Georgia, serif; text-align: center; font-style: italic; }
.info-sep { color: #C9C3C9; }
.info-kecil .k { font-weight: 700; color: #2B2A2E; }
.sop-ta { display: block; }
.sop-ta summary { cursor: pointer; display: flex; gap: .5rem; align-items: center; list-style: none; }
.sop-ta summary::-webkit-details-marker { display: none; }
.sop-ta ol { margin: .5rem 0 .2rem 1.6rem; padding: 0; }
.sop-ta li { margin: .2rem 0; }
@media print { .info-kecil { display: none !important; } }

/* Naik kelas: daftar centang murid */
.naik-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .2rem .8rem; max-height: 18rem; overflow: auto; padding: .5rem .6rem; border: 1px solid #ECE8EC; border-radius: 10px; background: #fff; font-size: .9rem; }

/* Mode arsip (tahun ajaran lama / kelas nonaktif): hanya-baca */
.arsip-banner { margin: .6rem 0 .9rem; padding: .55rem .8rem; border-radius: 10px; background: #F2F6F9; border: 1px solid #D8E3EC; color: #2F4A60; font-size: .88rem; font-weight: 600; }
@media print { .arsip-banner { display: none !important; } }

/* Jadwal bermasa berlaku */
.jadwal-mode { border: 1px solid var(--ui-line-2, #ECE8EC); border-radius: 10px; padding: .5rem .75rem; grid-column: 1 / -1; }
.jadwal-mode legend { font-weight: 700; font-size: .85rem; padding: 0 .3rem; }
.jadwal-mode .check { display: flex; gap: .5rem; align-items: flex-start; margin: .25rem 0; font-size: .85rem; }
.jadwal-item.is-akan { opacity: .75; border-style: dashed; }
.jadwal-henti { display: inline-block; position: relative; }
.jadwal-henti > summary { list-style: none; cursor: pointer; }
.jadwal-henti > summary::-webkit-details-marker { display: none; }
.jadwal-henti[open] form { position: absolute; right: 0; z-index: 20; background: #fff; border: 1px solid #ECE8EC; border-radius: 10px; padding: .6rem; width: 16rem; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.jadwal-henti form label { display: block; font-size: .8rem; margin-bottom: .4rem; }
/* Perawatan data */
.periksa-tabel td { vertical-align: top; }
.periksa-contoh { margin: .3rem 0 .3rem 1.1rem; padding: 0; font-size: .8rem; }
.periksa-ok td:first-child { color: #64748b; }
.gabung-item { padding: .5rem 0; border-top: 1px solid #F1EEF1; }
.gabung-item:first-of-type { border-top: 0; }
.libur-bentrok { background: #FFFBEB; }
.matrix th.dh.tambahan { background: #F0F7FF; }
.catatan-libur { font-size: .78rem; color: #645E66; margin: .5rem 0 0; }
.tab-pilih { display: flex; gap: .4rem; margin: .4rem 0 .2rem; }
.tab-pilih a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid #ECE8EC; text-decoration: none; color: inherit; font-weight: 600; font-size: .88rem; }
.tab-pilih a.is-aktif { background: #2B2A2E; color: #fff; border-color: #2B2A2E; }
.jurnal-table td { vertical-align: top; }
.jurnal-table tr.baris-batal td { color: #6b7280; background: #F7F7F8; }
.peringatan-list { margin: 0; padding: 0; list-style: none; }
.peringatan-list li { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; padding: .4rem 0; border-top: 1px solid #F1EEF1; font-size: .9rem; }
.peringatan-list li:first-child { border-top: 0; }

/* Area Murid: masuk sementara dengan nama + kelas */
.cek-atau { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .6rem; color: #8a8290; font-size: .8rem; }
.cek-atau::before, .cek-atau::after { content: ""; flex: 1; border-top: 1px dashed #E6DDE3; }

/* L/P sekali klik di daftar murid */
.lp-cepat { display: inline-flex; gap: .2rem; }
.lp-cepat.sibuk { opacity: .5; pointer-events: none; }
.lp-btn { min-width: 1.9rem; padding: .2rem .45rem; border: 1px solid #E6DDE3; border-radius: 7px; background: #fff; color: #8a8290; font-weight: 700; font-size: .8rem; cursor: pointer; }
.lp-btn.on[data-jk="L"] { background: #E7F0FF; border-color: #9DBBF0; color: #1F4FA3; }
.lp-btn.on[data-jk="P"] { background: #FDE8F1; border-color: #EBA6C4; color: #A3245B; }

/* Pantauan rapor & Tugas saya hari ini */
.pantau-bar { width: 6rem; height: .45rem; border-radius: 99px; background: #EFEAEE; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: .3rem; }
.pantau-bar span { display: block; height: 100%; background: #C45C8A; }
.tugas-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.tugas-list li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem .7rem; border: 1px solid #F0E9EE; border-radius: 10px; background: #FFFCFD; }
.tugas-list li.beres { opacity: .65; }
.tugas-list .tugas-ikon { width: 1.4rem; text-align: center; }
.tugas-list .tugas-teks { flex: 1; }

/* Blok yang hanya muncul saat dicetak (mis. Catatan wali kelas: layar = form, cetak = tabel) */
.hanya-cetak { display: none; }
@media print { .hanya-cetak { display: block !important; } }
.lp-pilih { width: auto; min-width: 3.2rem; padding: .2rem .35rem; border: 1px solid transparent; border-radius: 7px; background: transparent; font-weight: 700; color: #555; cursor: pointer; }
.lp-pilih:hover, .lp-pilih:focus { border-color: #E6DDE3; background: #fff; }
.lp-pilih.tersimpan { border-color: #86c59c; background: #EEF8F1; }

/* Keterangan opsional S/I/A di layar absen */
.absen-ket { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .1rem 0 .25rem 2.6rem; }
.absen-ket[hidden] { display: none; }
.ket-chip { border: 1px solid #E6DDE3; background: #fff; border-radius: 99px; padding: .15rem .55rem; font-size: .75rem; color: #645E66; cursor: pointer; }
.ket-chip.on { background: #FDE8F1; border-color: #EBA6C4; color: #A3245B; font-weight: 700; }
.absen-ket input[type=text] { flex: 1 1 10rem; min-width: 8rem; padding: .25rem .5rem; font-size: .8rem; border-radius: 8px; }
.sel-ket { position: relative; }
.sel-ket::after { content: ""; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: #7A4B00; }
.ket-kaki { margin-top: .7rem; font-size: .8rem; }
.ket-kaki ol { margin: .2rem 0 0 1.2rem; padding: 0; columns: 2; column-gap: 2rem; }
@media print { .print-area.tanpa-ket .ket-kaki, .print-area.tanpa-ket .ket-rinci { display: none !important; } }
.ket-rinci { font-size: .82em; color: #645E66; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.ket-kaki li { overflow-wrap: anywhere; }
.ket-kaki .ket-st { font-weight: 700; }

/* Kelas wali */
.kelas-wali-form { margin-top: .35rem; }
.kelas-wali-form select { font-size: .8rem; padding: .15rem .3rem; max-width: 100%; }
.btn-wa { background: #1F9D55; color: #fff; border-color: #1F9D55; }
.btn-wa:hover { background: #18804A; color: #fff; }
.rekap-wali td.c, .rekap-wali th.c { text-align: center; }
.rekap-wali td.merah { color: #B42318; font-weight: 700; }
.rekap-wali th { white-space: nowrap; }
table.sepekan { border-collapse: collapse; width: 100%; font-size: .85rem; }
table.sepekan th, table.sepekan td { border-bottom: 1px solid #EEE7EC; padding: .25rem .3rem; text-align: center; vertical-align: top; }
table.sepekan th { background: #FBFAFB; font-size: .75rem; }
table.sepekan th small { display: block; font-weight: 400; color: #8A8290; }
table.sepekan .sp-no { width: 2.2rem; color: #8A8290; }
table.sepekan .sp-nama { text-align: left; min-width: 10rem; white-space: nowrap; position: sticky; left: 0; background: #fff; z-index: 1; }
table.sepekan th.sp-nama { background: #FBFAFB; }
table.sepekan .sp-libur { background: #F3F1F3; color: #A39AA8; }
table.sepekan .sp-off { color: #8A8290; }
table.sepekan .sp-sel select { width: 3.1rem; padding: .2rem .15rem; font-weight: 700; text-align: center; border-radius: 6px; }
table.sepekan .sp-sel input { display: block; width: 5.6rem; margin: .2rem auto 0; font-size: .72rem; padding: .15rem .25rem; }
table.sepekan .sp-sel input[hidden] { display: none; }
table.sepekan .st-H select { background: #E8F6EE; }
table.sepekan .st-S select { background: #FFF4DB; }
table.sepekan .st-I select { background: #E7F0FD; }
table.sepekan .st-A select { background: #FDE8E8; }
table.rapor-wali td.kiri { text-align: left; white-space: normal; }

/* Libur & kegiatan sekolah */
.banner-libur { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 14px; margin: 0 0 .8rem; background: #FFF4DB; border: 1px solid #F3D48B; color: #5B4300; }
.banner-libur.banner-nonkbm, .banner-libur.banner-kegiatan { background: #E7F0FD; border-color: #B9D2F5; color: #12396E; }
.banner-libur small { display: block; font-size: .82rem; opacity: .85; margin-top: .1rem; }
.banner-ikon { font-size: 1.2rem; line-height: 1.2; }
.dash-libur-baris { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; margin: 0 0 1rem; }
.libur-mendatang { font-size: .85rem; padding-top: .35rem; }
.libur-cepat { width: 100%; max-width: 560px; }
.libur-cepat > summary { list-style: none; cursor: pointer; display: inline-flex; }
.libur-cepat > summary::-webkit-details-marker { display: none; }
.libur-cepat[open] > summary { margin-bottom: .6rem; }
.libur-cepat-form { background: #fff; border: 1px solid #E6E3E6; border-radius: 14px; padding: .9rem 1rem; display: grid; gap: .6rem; }
.lc-mode, .lc-cakupan { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
.lc-mode legend, .lc-cakupan legend { font-weight: 700; font-size: .85rem; margin-bottom: .3rem; }
.lc-pilih { display: flex; gap: .55rem; align-items: flex-start; border: 1px solid #E6E3E6; border-radius: 12px; padding: .55rem .7rem; cursor: pointer; }
.lc-pilih:has(input:checked) { border-color: #C45C8A; background: #FDF2F6; }
.lc-pilih input { width: auto; flex: none; margin: .2rem 0 0; }
.lc-pilih > span { text-align: left; }
.lc-pilih small { display: block; font-size: .8rem; color: #645E66; font-weight: 400; }
.lc-baris { display: grid; gap: .25rem; font-weight: 600; font-size: .88rem; }
.lc-tgl { display: flex; gap: .6rem; flex-wrap: wrap; }
.lc-tgl label { display: grid; gap: .2rem; font-size: .85rem; font-weight: 600; }
.lc-kelas { display: inline-flex; flex-wrap: wrap; gap: .25rem .8rem; }

/* Menu guru 5 pilar */
.nav-menu .nav-sorot { font-weight: 700; color: var(--ui-accent); }
.bottom-menu .bottom-grup { display: block; padding: .55rem .9rem .15rem; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A8290; }