/* Tokiva Bimbel - gaya tampilan.
   Palet: nila tua sebagai dasar (warna sekolah yang tidak terbaca sebagai
   toko), emas sebagai aksen. Semua pasangan warna teks/latar sudah DIHITUNG
   terhadap WCAG AA (4,5:1), bukan dinilai dengan mata, dan angkanya dikunci
   oleh uji/uji-standar.js supaya tidak diam-diam berubah. */

:root {
  --indigo-tua:    #16255C;
  --indigo:        #2A3F8F;
  --indigo-terang: #3B54B4;
  --indigo-sisi:   #AEBBDD;   /* 7,5:1 di atas nila tua */
  --indigo-menu:   #E3E9F8;
  --indigo-lembut: #C8D2EE;   /* 6,3:1 di atas nila */

  --emas:          #F5A524;
  --emas-teks:     #3A2600;   /* 7,1:1 di atas emas */

  --latar:         #F5F6FA;
  --kertas:        #FFFFFF;
  --garis:         #DFE3EE;
  --teks:          #17203A;
  --teks-lembut:   #545E78;   /* 6,5:1 di atas putih */

  --merah:         #B3261E;
  --merah-muda:    #FBE4E2;
  --hijau-muda:    #E3F3E4;
  --hijau-tua:     #1E5B12;
  --kuning-muda:   #FDF1D6;
  --kuning-tua:    #7A5300;
  --biru-muda:     #DCEAF7;
  --biru-tua:      #14507E;
  --abu-muda:      #ECEEF5;

  --sudut:         12px;
  --bayang:        0 1px 2px rgba(22, 37, 92, .06), 0 4px 14px rgba(22, 37, 92, .07);
}

/* Atribut hidden hanya diatur stylesheet bawaan peramban, yang spesifisitasnya
   paling rendah. Tanpa !important, aturan seperti .gerbang{display:flex}
   mengalahkannya dan layar aktivasi tampil bersamaan dengan isi aplikasi. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--teks);
  background: var(--latar);
  -webkit-text-size-adjust: 100%;
}

/* height:auto wajib - atribut height pada <img> mengalahkan aspect-ratio kalau tidak. */
img { max-width: 100%; display: block; height: auto; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
p { margin: 0 0 8px; }
small { font-size: 12.5px; }

a { color: var(--indigo); }

/* ================= GERBANG LISENSI ================= */

.gerbang {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 64px);
  padding: 24px 16px;
  background: linear-gradient(160deg, #16255C 0%, #2A3F8F 60%, #3B54B4 100%);
}

.gerbang-kartu {
  width: 100%;
  max-width: 400px;
  background: var(--kertas);
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  text-align: center;
}

.gerbang-logo { margin: 0 auto 12px; border-radius: 14px; }

.gerbang-kartu h1 { font-size: 22px; margin-bottom: 6px; }

.gerbang-sub { color: var(--teks-lembut); font-size: 13.5px; margin-bottom: 18px; }

.gerbang-kartu label {
  display: block;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teks-lembut);
  margin-bottom: 5px;
}

#input-kode {
  width: 100%;
  padding: 13px 12px;
  font-size: 17px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 1px;
  text-align: center;
  border: 1.5px solid var(--garis);
  border-radius: 10px;
  margin-bottom: 12px;
}

#input-kode:focus { outline: 2px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }

.gerbang-pisah {
  position: relative;
  margin: 18px 0 14px;
  color: var(--teks-lembut);
  font-size: 12.5px;
}
.gerbang-pisah::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  border-top: 1px solid var(--garis);
}
.gerbang-pisah span { position: relative; background: var(--kertas); padding: 0 10px; }

.gerbang-kecil { font-size: 12px; color: var(--teks-lembut); margin-top: 14px; }

.pesan { font-size: 13px; padding: 9px 11px; border-radius: 9px; text-align: left; margin-bottom: 10px; }
.pesan-galat { background: var(--merah-muda); color: var(--merah); }

/* ================= CANGKANG ================= */

.bilah {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 12px;
  background: var(--indigo-tua);
  color: #FFFFFF;
}

.bilah-judul { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.bilah-judul strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bilah-sub { font-size: 11.5px; color: var(--indigo-sisi); }

.menu-toggle {
  width: 44px; height: 44px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 0 10px;
}
.menu-toggle span { display: block; height: 2px; background: #FFFFFF; border-radius: 2px; }

.lencana-demo {
  margin-left: auto;
  background: var(--emas);
  color: var(--emas-teks);
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  padding: 4px 8px; border-radius: 6px;
}

.tata { display: flex; align-items: flex-start; }

/* ---------- sisi ---------- */

.sisi {
  width: 232px; flex: 0 0 232px;
  background: var(--indigo-tua);
  color: var(--indigo-menu);
  min-height: calc(100vh - 56px);
  padding: 14px 12px 28px;
  position: sticky; top: 56px;
}

.sisi-merek { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; }
.sisi-merek img { border-radius: 8px; }
.sisi-merek strong { display: block; font-size: 14.5px; color: #FFFFFF; }
.sisi-merek small { display: block; font-size: 11px; color: var(--indigo-sisi); letter-spacing: .5px; }

/* Menu berjejer datar dengan jarak nol ke blok merek terbaca sebagai satu
   tumpukan. Judul kelompok dan jarak di bawah ini yang memisahkannya. */
.sisi-judul {
  margin: 16px 6px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--indigo-sisi);
}

/* Tombol di dalam sisi gelap menetapkan warna teksnya sendiri - kalau mewarisi
   var(--teks) yang gelap, tombolnya praktis tak terbaca (pernah 1,06:1). */
.menu-btn {
  display: block; width: 100%; text-align: left;
  min-height: 44px; padding: 10px 12px;
  margin-bottom: 6px;
  background: transparent; border: 0; border-radius: 9px;
  color: var(--indigo-menu);
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.menu-btn:hover { background: #22357A; }
.menu-btn.aktif { background: var(--indigo-terang); color: #FFFFFF; font-weight: 600; }
.sisi .btn-garis { color: var(--indigo-menu); border-color: #3A4C8F; background: transparent; }

.tirai { display: none; }

/* ---------- isi ---------- */

.isi { flex: 1 1 auto; min-width: 0; padding: 18px 18px 56px; max-width: 1080px; }

.layar-judul { font-size: 20px; margin-bottom: 14px; }

.spanduk-cabut {
  background: var(--merah-muda);
  color: var(--merah);
  border: 1px solid #F0C9C6;
  border-radius: var(--sudut);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.spanduk-cabut a { color: var(--merah); }

/* ================= KOTAK & PANEL ================= */

.kotak-form, .panel {
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--bayang);
}

.kotak-form.rapat { padding: 0 0 12px; border: 0; box-shadow: none; margin-bottom: 8px; }

.panel-kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.panel-kepala h3 { font-size: 15px; }
.hitung { font-size: 12.5px; color: var(--teks-lembut); }

.panel-bahaya { border-color: #F0C9C6; }

.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.grid-form.rapat { gap: 10px; }
.grid-form .lebar { grid-column: 1 / -1; }

.grid-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--teks-lembut);
}

input, select, textarea {
  font-family: inherit; font-size: 14.5px; color: var(--teks);
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--garis);
  border-radius: 9px;
  background: var(--kertas);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo);
}

.form-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.petunjuk { font-size: 12.5px; color: var(--teks-lembut); margin: 10px 0 0; }

/* ================= TOMBOL ================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px;
  border-radius: 9px; border: 1.5px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}

.btn-utama { background: var(--indigo); color: #FFFFFF; }        /* 9,5:1 */
.btn-utama:hover { background: var(--indigo-terang); }

.btn-garis { background: var(--kertas); color: var(--indigo); border-color: var(--indigo); }
.btn-garis:hover { background: #EEF1FA; }

.btn-teks { background: transparent; color: var(--indigo); border-color: transparent; font-weight: 500; }
.btn-teks:hover { background: #EEF1FA; }

.btn-utama-halus { background: var(--hijau-muda); color: var(--hijau-tua); }   /* 8,1:1 */
.btn-bahaya { background: var(--merah); color: #FFFFFF; }
.btn-bahaya-halus { background: var(--merah-muda); color: var(--merah); }

.btn-lebar { width: 100%; }

.btn-kecil { min-height: 44px; padding: 8px 12px; font-size: 12.5px; background: var(--abu-muda); color: var(--teks); }
.btn-kecil:hover { background: #DFE3EE; }

.btn-berkas { position: relative; overflow: hidden; }

/* ================= TAB ================= */

.tab-baris { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }

.tab {
  min-height: 44px; padding: 9px 15px;
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: 999px;
  font-family: inherit; font-size: 13.5px; color: var(--teks-lembut);
  cursor: pointer;
}
.tab.aktif { background: var(--indigo); border-color: var(--indigo); color: #FFFFFF; font-weight: 600; }

/* ================= KARTU RINGKASAN ================= */

.kartu-baris {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 16px;
}

.kartu {
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-left: 4px solid var(--garis);
  border-radius: var(--sudut);
  padding: 13px 14px;
  box-shadow: var(--bayang);
}
.kartu-judul { display: block; color: var(--teks-lembut); font-size: 12px; }
.kartu-nilai { display: block; font-size: 20px; margin: 3px 0 2px; }
.kartu-catatan { display: block; color: var(--teks-lembut); font-size: 11.5px; }
.kartu-baik { border-left-color: var(--hijau-tua); }
.kartu-awas { border-left-color: var(--merah); }

/* ================= DAFTAR ================= */

.daftar { display: flex; flex-direction: column; }

.baris {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  border-top: 1px solid var(--garis);
}
.daftar > .baris:first-child { border-top: 0; }
.baris-tebal { font-weight: 700; }

.baris-kiri { min-width: 0; flex: 1 1 auto; }

.baris-judul { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }

/* Nama dibungkus elemen sendiri supaya ellipsis tidak ikut memotong lencana
   di dalamnya ("Menunggak" jadi "Menung..."). */
.baris-nama {
  font-weight: 600; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}

.baris-sub { display: block; color: var(--teks-lembut); font-size: 12.5px; }

.baris-kanan {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end;
}

/* Dua span berurutan tanpa display:block menempel jadi satu baris:
   "Rp300.000sisa". Cacat begini tidak terlihat saat membaca kode. */
.baris-nilai { display: block; font-weight: 700; font-size: 14.5px; text-align: right; }
.baris-nilai-sub { display: block; color: var(--teks-lembut); font-size: 11.5px; text-align: right; width: 100%; }

.lencana {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}
.lencana-hijau  { background: var(--hijau-muda);  color: var(--hijau-tua); }
.lencana-merah  { background: var(--merah-muda);  color: var(--merah); }
.lencana-kuning { background: var(--kuning-muda); color: var(--kuning-tua); }
.lencana-biru   { background: var(--biru-muda);   color: var(--biru-tua); }
.lencana-abu    { background: var(--abu-muda);    color: var(--teks-lembut); }

.kosong { color: var(--teks-lembut); font-size: 13.5px; padding: 14px 2px; margin: 0; }

/* ================= ABSENSI ================= */

.baris-absen { align-items: center; }

.absen-grup { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

/* Sasaran sentuh 44px. Absensi dilakukan sambil berdiri dengan HP di satu
   tangan; tombol yang lebih kecil membuat jari sering meleset, dan yang
   meleset di sini tercatat sebagai alpa untuk anak yang sebenarnya hadir. */
.absen-btn {
  min-height: 44px; min-width: 56px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--garis);
  background: var(--kertas);
  color: var(--teks-lembut);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.absen-btn:hover { background: var(--abu-muda); }

.absen-btn.aktif { color: #FFFFFF; border-color: transparent; }
.absen-hadir.aktif { background: var(--hijau-tua); }   /* 8,1:1 */
.absen-izin.aktif  { background: var(--biru-tua); }    /* 8,4:1 */
.absen-sakit.aktif { background: var(--kuning-tua); }  /* 6,8:1 */
.absen-alpa.aktif  { background: var(--merah); }       /* 6,6:1 */

/* ================= BATANG LAPORAN ================= */

.batang-baris {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px;
  border-top: 1px solid var(--garis);
}
.batang-baris:first-child { border-top: 0; }

.batang-label { flex: 0 0 110px; font-size: 12.5px; color: var(--teks-lembut); }

.batang-jalur {
  flex: 1 1 auto; min-width: 40px;
  height: 12px; border-radius: 999px;
  background: var(--abu-muda);
  overflow: hidden;
}
/* Tanpa min-width. Batang bernilai nol harus benar-benar kosong; lebar minimum
   untuk nilai kecil diatur laporan.js dalam persen, bukan dipaksa di sini. */
.batang-isi { height: 100%; background: var(--indigo); border-radius: 999px; }

.batang-nilai { flex: 0 0 auto; font-size: 13px; font-weight: 700; text-align: right; }

/* ================= PENUNTUN ================= */

.penuntun {
  background: linear-gradient(140deg, #16255C 0%, #2A3F8F 100%);
  color: #FFFFFF;
  border-radius: var(--sudut);
  padding: 16px;
  margin-bottom: 16px;
}
.penuntun h3 { font-size: 15px; margin-bottom: 10px; color: #FFFFFF; }

.penuntun-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.penuntun-daftar li { display: flex; gap: 10px; align-items: flex-start; }
.penuntun-daftar strong { display: block; font-size: 14px; color: #FFFFFF; }
.penuntun-daftar small { display: block; color: var(--indigo-lembut); font-size: 12.5px; margin-bottom: 6px; }
.penuntun-daftar .tanda {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px;
  border-radius: 50%; border: 2px solid var(--indigo-sisi);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--indigo-tua);
}
.penuntun-daftar .selesai .tanda { background: var(--emas); border-color: var(--emas); }
.penuntun-daftar .btn-kecil { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.penuntun-daftar .btn-kecil:hover { background: rgba(255, 255, 255, .26); }

/* ================= DIALOG ================= */

.dialog-latar {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12, 20, 46, .55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}

.dialog {
  background: var(--kertas);
  width: 100%; max-width: 520px;
  max-height: 88vh;
  border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column;
}

.dialog-kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--garis);
}
.dialog-kepala h3 { font-size: 16px; }

.dialog-tutup {
  width: 44px; height: 44px;
  background: none; border: 0; font-size: 24px; line-height: 1;
  color: var(--teks-lembut); cursor: pointer;
}

.dialog-isi { padding: 14px 16px; overflow-y: auto; }
.dialog-teks { color: var(--teks-lembut); font-size: 14px; }
.dialog-blok { display: block; }
.dialog-subjudul { font-size: 13.5px; margin: 14px 0 4px; color: var(--teks-lembut); }

.dialog-kaki {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--garis);
}

.kotak-info {
  background: var(--abu-muda);
  border-radius: 10px; padding: 11px 12px; margin-top: 12px;
  font-size: 13px; color: var(--teks-lembut);
}
.kotak-info p:last-child { margin-bottom: 0; }

/* ================= PESAN SINGKAT ================= */

.roti {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 80;
  max-width: min(92vw, 420px);
  background: var(--indigo-tua); color: #FFFFFF;
  padding: 12px 16px; border-radius: 10px;
  font-size: 13.5px; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.roti-baik  { background: var(--hijau-tua); }
.roti-galat { background: var(--merah); }

/* ================= BARIS PEMBUAT =================
   Nilai warnanya sudah dihitung dan tidak boleh diubah tanpa menghitung ulang:
   latar #080b10, teks #9aa5b4 (7,9:1), nama dan nomor #ffffff (19,7:1),
   hover #ffd4da (14,7:1). */

.kaki-pembuat {
  background: #080b10;
  color: #9aa5b4;
  padding: 14px 16px;
  font-size: 12.5px;
}
.kaki-pembuat-isi {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  justify-content: center; text-align: center;
}
.kaki-pembuat b { color: #ffffff; font-weight: 700; }
.kaki-pembuat a {
  color: #ffffff; text-decoration: none; font-weight: 600;
  min-height: 44px; display: inline-flex; align-items: center;
}
.kaki-pembuat a:hover { color: #ffd4da; text-decoration: underline; }

/* ================= LAYAR KECIL ================= */

@media (max-width: 860px) {
  .sisi {
    position: fixed; top: 56px; left: 0; bottom: 0; z-index: 40;
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    overflow-y: auto;
    min-height: 0;
  }
  .sisi.buka { transform: translateX(0); }

  .tirai {
    display: block;
    position: fixed; inset: 56px 0 0; z-index: 35;
    background: rgba(12, 20, 46, .45);
  }

  .isi { padding: 14px 12px 60px; }

  .layar-judul { font-size: 18px; }

  /* Judul panel MEMBUNGKUS, bukan menumpuk.

     Versi pertama memakai flex-direction:column supaya judul sepanjang
     "Selasa, 1 September 2026" tidak pecah tiga baris. Itu memperbaiki satu
     panel dan merusak yang lain: di panel yang berisi tombol, tombolnya
     terlempar ke bawah judul dan berdiri di antara judul dan isinya - terlihat
     seperti tombol yang salah tempat. Ketahuan dari tangkapan layar HP
     sungguhan, tidak dari kode maupun dari uji jsdom.

     Dengan wrap, judul dan tombol tetap berdampingan selama muat, sementara
     teks hitungan yang panjang mengambil barisnya sendiri. */
  .panel-kepala { flex-wrap: wrap; gap: 6px 10px; }
  .panel-kepala .hitung { flex: 1 1 100%; }

  .baris { flex-direction: column; align-items: stretch; gap: 8px; }
  .baris-kanan { justify-content: flex-start; }
  .baris-nilai, .baris-nilai-sub { text-align: left; }

  /* Tetap width:100% di layar kecil. Dibiarkan width:auto, angka utama dan
     keterangannya berdiri berdampingan di dalam .baris-kanan yang flex, lalu
     terbaca sebagai dua angka tanpa hubungan: "Rp300.000 sisa Rp150.000". */
  .baris-nilai-sub { width: 100%; }

  .absen-grup { justify-content: flex-start; }
  .absen-btn { flex: 1 1 0; }

  .batang-label { flex: 0 0 88px; }

  .kartu-baris { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  .dialog { max-height: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sisi { transition: none; }
}

@media print {
  .bilah, .sisi, .tirai, .roti, .dialog-latar, .kaki-pembuat { display: none !important; }
  .isi { padding: 0; }
}