/* Yaa Bunayya — token desain & komponen bersama.
   Identitas: merah seragam SD (warna utama), putih kapur (latar), tinta (teks), kunyit
   (aksen), kop merah solid dengan garis kunyit. Token Tailwind masih bernama lama
   (sky = warna utama sekolah, sun = kunyit, grape = superadmin); nilainya yang berubah. */

/* Font di-host sendiri (PWA harus tetap jalan tanpa akses ke Google Fonts). Lisensi OFL
   ada di samping berkasnya. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-latin-800-normal.woff2') format('woff2'); }
/* Amiri hanya untuk tulisan Arab يَا بُنَيَّ di logo/halaman masuk. */
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/amiri-arabic-700-normal.woff2') format('woff2'); }

:root {
  --color-sky: #0C7F73;
  --color-sky-dark: #085F57;
  /* Bentuk "R G B" (tanpa koma) dipakai tailwind.config.js lewat rgb(var(--x) / <alpha-value>),
     supaya kelas utilitas bg-sky/text-sky/dst ikut tema tanpa mengubah satu pun file view.
     Nilainya di-override per request oleh partials/head.php lewat TemaSekolahService — nilai
     di sini cuma fallback. */
  --color-sky-rgb: 12 127 115;
  --color-sky-dark-rgb: 8 95 87;
  --color-sun: #E3A21A;
  --color-coral: #E0583A;
  --color-grass: #2E8B57;
  --color-grape: #4B3F8F;
  --color-pink: #C2557A;
  --color-indigo: #3D4FA3;
  --color-paper: #FAF6F4;
  --color-paper-dim: #F3ECE8;
  --color-ink: #1D2133;
  --color-ink-soft: #5E6273;
  --shadow-soft: 0 10px 28px -12px rgba(29, 33, 51, 0.22);
  --shadow-card: 0 1px 2px rgba(29, 33, 51, 0.06), 0 6px 16px -10px rgba(29, 33, 51, 0.16);
}

* { -webkit-tap-highlight-color: transparent; }

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-nempel, 0px) + 12px); }

/* Header guru bertab yang menempel (pasangNavNempel di app.js): bayangan baru muncul saat
   benar-benar menempel, supaya di posisi awal tampilannya sama seperti sebelumnya. */
.nav-nempel { transition: box-shadow .2s ease; }
/* Saat menempel, pita tab jadi bilah lurus: lengkung bawah cuma pantas di posisi awal. */
.nav-nempel.is-menempel { box-shadow: 0 8px 20px -6px rgba(29, 33, 51, .28); border-radius: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--color-paper);
  color: var(--color-ink);
}

.font-display { font-family: 'Inter', system-ui, sans-serif; letter-spacing: -.01em; }

/* Visible focus ring everywhere, keyboard-first */
:focus-visible {
  outline: 3px solid var(--color-sky-dark);
  outline-offset: 2px;
  border-radius: 8px;
}


/* ---------- Kop: pita merah solid ----------
   .latar-kop = latar halaman masuk/undangan/galat: pita merah setinggi --tinggi-kop di atas,
   putih kapur di bawahnya. */
.latar-kop {
  --tinggi-kop: clamp(300px, 44vh, 420px);
  background: linear-gradient(var(--color-sky) 0 var(--tinggi-kop), var(--color-paper) var(--tinggi-kop));
}
/* Garis kunyit di bawah kop, seperti garis emas kop surat sekolah. */
.garis-kop { box-shadow: inset 0 -4px 0 var(--color-sun); }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(29, 33, 51, 0.06);
}

.card-pop {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  border-radius: 12px;
  letter-spacing: .005em;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-primary {
  background: var(--color-sky);
  color: #fff;
  box-shadow: 0 3px 0 0 var(--color-sky-dark);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { box-shadow: 0 1px 0 0 var(--color-sky-dark); transform: translateY(2px); }

.btn-secondary {
  background: #fff;
  color: var(--color-sky-dark);
  border: 2px solid var(--color-sky);
}
.btn-secondary:hover { background: rgba(var(--color-sky-rgb), .08); }

.btn-ghost {
  color: var(--color-ink-soft);
}
.btn-ghost:hover { color: var(--color-ink); }

.btn-danger-soft {
  background: #FFE7E3;
  color: #C4432F;
  padding: 6px 14px;
  font-size: .75rem;
}
.btn-danger-soft:hover { background: #FFD9D2; }
.btn-danger-soft:disabled { opacity: .5; }

/* Tombol yang sedang menunggu server (form POST, lihat kunciSubmit di app.js, atau
   tombol AJAX lewat :class). Teks asli tetap, spinner warnanya ikut currentColor jadi
   cocok di tombol sky/coral/grape/secondary tanpa varian sendiri. Opasitas lebih tinggi
   dari :disabled biasa supaya terbaca "sedang jalan", bukan "tidak bisa dipakai". */
.is-loading { cursor: progress !important; }
.is-loading:disabled { opacity: .75; }
.is-loading::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .45em;
  vertical-align: -.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }

/* Pembungkus tabel/baris yang bisa digeser + panah ‹ › (dipasang pasangPanahGeser di app.js).
   --geser-top (diisi app.js dari tinggi header tabel) menaruh panah di baris judul kolom; tabel panjang tengahnya bisa jauh di
   luar layar; default tengah-tengah (cocok untuk baris chip). */
.geser-wrap { position: relative; }
/* Tabel .month-grid: panah kiri mulai sesudah kolom nama yang menempel (+ padding kartu p-3 dan
   sela 4px). Lebar kolom nama didefinisikan SEKALI di sini dan dipakai .month-grid di bawah. */
:root { --lebar-kolom-nama: 148px; }
.geser-tabel { --geser-kiri: calc(var(--lebar-kolom-nama) + 16px); }
.geser-btn {
  position: absolute;
  top: var(--geser-top, 50%);
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0 0 3px;
  border: 2px solid rgba(29, 33, 51, 0.1);
  border-radius: 999px;
  background: #fff;
  color: var(--color-sky-dark);
  font: 700 1.25rem/1 'Inter', system-ui, sans-serif;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.geser-btn:hover { background: var(--color-sky); border-color: var(--color-sky); color: #fff; }
.geser-btn:focus-visible { outline: 2px solid var(--color-sky-dark); outline-offset: 2px; }
.geser-btn[hidden] { display: none; }
.geser-kiri { left: var(--geser-kiri, -6px); } /* tabel: sesudah kolom nama yang menempel */
.geser-kanan { right: -6px; }
/* Baris selebar layar (induknya -mx-*): panah -6px keluar dari viewport dan membuat halaman
   bisa digeser 6px ke samping. Di baris seperti itu panahnya masuk ke dalam. */
.geser-penuh > .geser-kiri { left: var(--geser-kiri, 6px); }
.geser-penuh > .geser-kanan { right: 6px; }
/* Layar sentuh: geser jari sudah alami, panah cuma memakan tempat. */
@media (hover: none), (pointer: coarse) { .geser-btn { display: none; } }

/* Huruf status di sel grid presensi (H/S/I/A), warna mengikuti palet. */
.huruf-status { font-weight: 800; }
/* Versi lebih gelap dari token palet: huruf kecil (text-xs) di atas putih butuh kontras >= 4,5:1. */
.huruf-hadir { color: #1B7F52; }
.huruf-sakit { color: #D13F32; }
.huruf-izin  { color: #4F46E5; }
.huruf-alpa  { color: #8A5A12; }

/* ---------- Habit identity colors (utility classes) ---------- */








/* ---------- Stamp button (signature interaction) ---------- */







@keyframes stamp-press {
  0%   { transform: scale(.4) rotate(-18deg); opacity: 0; }
  55%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes stamp-ring {
  0%   { opacity: .55; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  
  html { scroll-behavior: auto; }
}

/* ---------- Konfeti "anak dipanggil" (halaman jemput publik) ---------- */
@keyframes confetti-jatuh {
  0%   { transform: translateY(-20px) rotate(var(--rot-awal, 0deg)); opacity: 1; }
  100% { transform: translateY(70vh) rotate(var(--rot-akhir, 360deg)); opacity: 0; }
}



/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: .72rem;
  padding: 3px 10px;
  border-radius: 999px;
}
.badge-streak { background: #FFF1CE; color: #9A6B00; }
.badge-success { background: #E1F6EC; color: #1F7A50; }
.badge-muted { background: #F1EEF7; color: var(--color-ink-soft); }
.badge-alert { background: #FFE7E3; color: #C4432F; }

/* ---------- Avatar inisial (daftar "sudah presensi hari ini" scan ustadzah) ---------- */
.avatar-inisial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
}
.avatar-0 { background: #E0583A; } /* coral */
.avatar-1 { background: #2E8B57; } /* grass */
.avatar-2 { background: #4B3F8F; } /* grape */
.avatar-3 { background: #E3A21A; color: #3D2A00; } /* sun — teks gelap, kontras kuning terang */

/* ---------- Grid bulanan (habit x tanggal) ---------- */
.month-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
}
.month-grid th, .month-grid td {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.month-grid th {
  min-width: 30px;
  padding-top: 0;
  padding-bottom: 8px;
}
.month-grid td {
  min-width: 30px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.month-grid th:first-child, .month-grid td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  min-width: var(--lebar-kolom-nama);
  width: var(--lebar-kolom-nama);
  max-width: var(--lebar-kolom-nama);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  background-color: #fff;
  box-shadow: 3px 0 6px -2px rgba(29, 33, 51, 0.12);
}
.month-grid thead th:first-child { z-index: 6; }
.month-grid tbody tr:nth-child(even) td {
  background-color: rgba(29, 33, 51, 0.025);
}
.month-grid tbody tr:nth-child(even) td:first-child {
  background-color: #fdfcf9;
}
.month-grid .dot,
.month-grid button.dot {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  margin: 0 auto;
  background: #E5E1EF;
  border: none;
  padding: 0;
  display: block;
}


/* Sel yang bisa diketuk untuk isi ulang (maks 3 hari ke belakang) */
.month-grid button.dot {
  cursor: pointer;
  transition: transform .12s ease;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--habit-color, var(--color-sky));
}
.month-grid button.dot:hover { transform: scale(1.25); }
.month-grid button.dot:active { transform: scale(0.9); }

.month-grid button.dot:disabled,
.month-grid button.dot[aria-disabled="true"] {
  cursor: default;
  box-shadow: none;
}
.month-grid button.dot:disabled:hover,
.month-grid button.dot[aria-disabled="true"]:hover { transform: none; }






/* ---------- Libur & kegiatan (hari_khusus) di grid tanggal ----------
   Warna sama dengan hari_khusus_warna() di helper (berkas Excel/Word/PDF memakai inline style). */
.kol-libur    { --khusus-latar: #FFE1DC; --khusus-teks: #B23A2B; }
.kol-kegiatan { --khusus-latar: #DCEFFA; --khusus-teks: #1F6E99; }
th.kol-khusus {
  background-color: var(--khusus-latar);
  color: var(--khusus-teks);
  border-radius: 8px 8px 0 0;
  padding-top: 2px;
  cursor: help;
}
td.sel-gabung {
  background-color: var(--khusus-latar) !important;
  color: var(--khusus-teks);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .03em;
  text-align: center;
  vertical-align: middle;
  padding: 6px 2px;
  cursor: help;
}
.sel-gabung .teks-tegak {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  max-height: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tanda-khusus {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--khusus-latar);
  box-shadow: inset 0 0 0 1.5px var(--khusus-teks);
  vertical-align: -1px;
}

/* ---------- Kalender akademik (kalender/index.php, docs/FITUR_KALENDER.md) ----------
   Warna kategori datang dari KalenderAkademik::PALET lewat inline style (satu sumber); di sini
   hanya bentuk. Semua warna palet terang, jadi angka tetap tinta. Akhir pekan = AKHIR_PEKAN. */
.kal-sel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  max-height: 3.6rem;
  width: 100%;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid rgba(29, 33, 51, .1);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-ink);
  transition: transform .12s ease;
}
.kal-sel:active { transform: scale(.94); }
.kal-sel.is-warna { border-color: transparent; }
.kal-sel.is-pekan { background: #FFE6E1; color: #B4493B; border-color: transparent; }
.kal-sel.is-hari-ini { border: 3px solid var(--color-ink); }
.kal-sel.is-pilih { outline: 3px solid var(--color-sky-dark); outline-offset: 2px; }
.kal-sel:focus-visible { outline: 3px solid var(--color-sky-dark); outline-offset: 2px; }
.kal-titik {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-ink);
  box-shadow: 0 0 0 1.5px #fff;
}
.kal-garis {
  position: absolute;
  bottom: 6px;
  left: 32%;
  right: 32%;
  height: 3px;
  border-radius: 9999px;
  background: rgba(29, 33, 51, .5);
}
.kal-nav {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  background: var(--color-paper-dim);
  color: var(--color-ink);
}
.kal-nav:hover { background: rgba(12, 127, 115, .15); }
.kal-agenda {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .3rem 0rem;
  border-radius: 14px;
}
.kal-swatch {
  display: inline-block;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 6px;
}
.kal-swatch.kal-swatch-kecil { width: .9rem; height: .9rem; border-radius: 5px; }
.kal-swatch.is-tanpa { background: #fff; border: 1.5px dashed rgba(29, 33, 51, .5); }
.kal-swatch.is-titik { position: relative; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(29, 33, 51, .12); }
.kal-swatch.is-titik::after { content: ''; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 9999px; background: var(--color-ink); }
.kal-swatch-pilih { width: 2.25rem; height: 2.25rem; border-radius: 9999px; box-shadow: inset 0 0 0 1.5px rgba(29, 33, 51, .1); }
.peer:checked + .kal-swatch-pilih { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--color-ink); }
.peer:focus-visible + .kal-swatch-pilih { outline: 3px solid var(--color-sky-dark); outline-offset: 4px; }

/* Skeleton saat pindah bulan (halaman dimuat ulang; lihat `memuat` di kalender/index.php). */
.kal-skel {
  border-radius: 8px;
  background: rgba(29, 33, 51, .08);
  animation: kal-denyut 1.1s ease-in-out infinite;
}
.kal-skel-sel { display: block; aspect-ratio: 1; max-height: 3.6rem; border-radius: 14px; }
@keyframes kal-denyut { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .kal-skel { animation: none; } }

/* Kartu "Agenda terdekat" di beranda orang tua: lembar kalender sobek kecil. */
.lembar-agenda {
  display: block;
  height: 100%;
  /* Padding di sini, bukan di nama agenda: line-clamp memotong di tepi padding, jadi baris ke-3
     masih mengintip di dalam padding nama itu sendiri. */
  padding-bottom: 10px;
  text-align: center;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-paper);
  border: 1.5px solid rgba(29, 33, 51, .08);
  transition: transform .12s ease;
}
.lembar-agenda:active { transform: scale(.96); }
.lembar-agenda:focus-visible { outline: 3px solid var(--color-sky-dark); outline-offset: 2px; }
.lembar-pita {
  display: block;
  padding: 4px 4px 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lembar-pita.is-tanpa { background: #fff; border-bottom: 1.5px dashed rgba(29, 33, 51, .35); }

/* ---------- Kartu kehadiran orang tua (ortu/_kartu_kehadiran.php) ----------
   Bulatan penuh = catatan nyata ustadzah; lingkaran abu = belum tercatat (BUKAN alfa);
   kotak berwarna = libur/kegiatan. Hijau & oranye digelapkan dari token palet supaya
   angka tanggal putih/ink di atasnya tetap terbaca (kontras >= 4,5:1). */
.sel-hadir {
  width: 100%;
  max-width: 2.5rem;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform .12s, box-shadow .12s;
}
button.sel-hadir:active { transform: scale(.92); }
.sel-hadir:focus-visible { outline: 2px solid var(--color-sky-dark); outline-offset: 2px; }
.sel-hadir.is-pilih { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-ink); }
.hadir-hadir  { background: #1B7F52; color: #fff; }
.hadir-sakit  { background: var(--color-sun); color: var(--color-ink); }
.hadir-izin   { background: #4F46E5; color: #fff; }
.hadir-alpa   { background: var(--color-coral); color: var(--color-ink); }
.hadir-kosong { background: transparent; color: var(--color-ink-soft); box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .18); border: 0; }
.hadir-nanti  { background: transparent; color: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.hadir-luar   { background: transparent; color: rgb(0 0 0 / .18); }
/* Rekap kelas guru: hari lewat yang bukan hari KBM anak itu (tidak ikut angka "Belum"). */

.sel-hadir.hadir-libur, .sel-hadir.hadir-kegiatan,
.tanda-hadir.hadir-libur, .tanda-hadir.hadir-kegiatan { background: var(--khusus-latar); color: var(--khusus-teks); border-radius: 30%; }
/* Rekap ustadzah: titik merah di pojok tanggal saat masuk melewati batas terlambat.
   Cincin putih memisahkannya dari bulatan hijau di bawahnya. */
.sel-hadir.is-telat { position: relative; }
.sel-hadir.is-telat::after,
.tanda-telat {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: #D93B2B;
  box-shadow: 0 0 0 2px #fff;
}
.sel-hadir.is-telat::after { position: absolute; top: -1px; right: -1px; }
.tanda-telat { display: inline-block; flex-shrink: 0; }
.sel-hadir.is-pilih.hadir-kosong { box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .18), 0 0 0 2px #fff, 0 0 0 4px var(--color-ink); }
.tanda-hadir {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  flex-shrink: 0;
}
/* Kotak angka ringkasan: warna teks digelapkan dari palet (kontras >= 4,5:1 di atas latar tipis). */
.kotak-angka        { background: var(--latar); color: var(--teks); }
.kotak-angka.is-nol { background: rgb(0 0 0 / .03); color: rgb(0 0 0 / .3); }
.angka-hadir { --latar: rgb(27 127 82 / .1);  --teks: #1B7F52; }
.angka-sakit { --latar: rgb(255 201 60 / .22); --teks: #8A5A00; }
.angka-izin  { --latar: rgb(79 70 229 / .1);  --teks: #4F46E5; }
.angka-alpa  { --latar: rgb(255 111 97 / .14); --teks: #B83226; }

/* ---------- Rainbow progress arc ---------- */


/* ---------- Bottom nav (orang tua & guru, mobile) ---------- */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: #fff;
  border-top: 1px solid rgba(43,35,64,0.08);
  box-shadow: 0 -6px 20px -10px rgba(43,35,64,0.15);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Tiap menu = pil dengan jarak kecil ke tepi (sorotan aktif tidak menempel ke tetangga).
   Tinggi total ±3.6rem: masih di atas target sentuh 44px, tapi tidak memakan layar HP. */
.bottom-nav a {
  position: relative;
  margin: .3rem .2rem;
  border-radius: 14px;
  color: var(--color-ink-soft);
  transition: background-color .15s ease, color .15s ease;
}
/* Aktif = latar muda + garis di tepi atas nav. Warna teks saja terlalu samar di bawah
   sinar matahari. Kelas 'active' dipindah app.js (data-nav) begitu menu diketuk. */
.bottom-nav a.active {
  color: var(--color-sky-dark);
  background: rgb(var(--color-sky-rgb) / .14);
}
.bottom-nav a.active::before {
  content: '';
  position: absolute;
  top: -.3rem;
  left: 28%;
  right: 28%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--color-sky);
}
/* Guru memakai bottom-nav hanya di HP (sm:hidden), body-nya cuma pb-16: ruang bawah
   ditambah di sini supaya kartu terakhir tidak tertutup menu. */
@media (max-width: 639.98px) {
  body:has(> .bottom-nav) { padding-bottom: 6rem; }
}

/* ---------- Catatan harian ----------
   Elemen khas halaman catatan: kotak tulisnya digambar seperti kertas bergaris jurnal
   aslinya (bukan textarea abu-abu), supaya menulis catatan terasa seperti mengisi buku
   anak, bukan mengisi form. Tinggi baris HARUS sama dengan jarak garis, kalau tidak
   tulisannya melayang di antara garis. */




/* Catatan pihak lain (read-only). Guru diberi aksen grape, orang tua aksen sun, supaya
   sekali lihat ketahuan siapa yang menulis tanpa harus membaca labelnya. */




/* Tab tanggal catatan: hari ini & kemarin dibuat lebih lebar (paling sering dipakai),
   hari-hari sebelumnya berupa chip yang bisa digeser. Titik kecil = sudah ada catatan,
   warnanya sama dengan aksen .catatan-baca (grape = guru, sun = orang tua). */
















/* ---------- Scrollbar polish for horizontal grids ---------- */
.scroll-x::-webkit-scrollbar { height: 8px; }
.scroll-x::-webkit-scrollbar-thumb { background: #E1DCEE; border-radius: 999px; }

/* Simple fade/slide transition helper for Alpine x-transition */

@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Skeleton pindah menu ----------
   Dipasang app.js menggantikan <main> selagi halaman berikutnya belum datang. Kilaunya
   ditunda sedikit lewat fade-in supaya jeda 120 ms-nya tidak terasa seperti kedipan. */
.nav-skeleton { animation: fade-in .2s ease; }
.nav-skeleton-kartu { padding: 1.25rem; }
.nav-skeleton-kartu + .nav-skeleton-kartu { margin-top: 1.25rem; }
/* Kosong (cuma teks sr-only) sampai 5 detik berlalu; baru tampil sebagai "Sinyal lambat…". */
.nav-skeleton-pesan:not(:has(> .sr-only)) {
  margin-bottom: .75rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: .875rem;
  color: var(--color-ink-soft);
  text-align: center;
}
.nav-skeleton-garis {
  border-radius: 999px;
  background: linear-gradient(90deg, #EBE4F5 25%, #F8F4FD 50%, #EBE4F5 75%);
  background-size: 200% 100%;
  animation: nav-skeleton-kilau 1.2s ease-in-out infinite;
}
@keyframes nav-skeleton-kilau { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav-skeleton, .nav-skeleton-garis { animation: none; }
}

/* ---------- Panel superadmin ----------
   Superadmin memakai palet yang sama dengan guru; pembedanya cuma aksen grape,
   supaya jelas sedang berada di panel mana tanpa jadi bahasa visual kedua. */
.btn-grape {
  background: var(--color-grape);
  color: #fff;
  box-shadow: 0 3px 0 0 #372D6E;
}
.btn-grape:hover { background: #5A4DA3; }
.btn-grape:active { box-shadow: 0 2px 0 0 #372D6E; transform: translateY(4px) scale(0.98); }

/* Angka ringkasan superadmin: angka besar di atas pita kop. */
.angka-kop { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 2.25rem; line-height: 1; color: #fff; }

/* Pin titik sekolah di peta Presensi > Pengaturan (peta-lokasi.js, L.divIcon). */
.peta-lokasi-pin span {
  display: block;
  font-size: 28px;
  line-height: 32px;
  text-align: center;
  filter: drop-shadow(0 2px 2px rgba(29, 33, 51, .35));
}

/* ---------- Mencari lokasi (presensi guru, isiLokasi() di app.js) ----------
   Cincin sasaran berdenyut di atas latar merah sambil "mencari"; saat ketemu, pin jatuh ke
   cincin yang berubah hijau. Bilah tipis di bawah = batas 10 detik, jadi tunggunya terasa
   ada ujungnya. Semua gerak mati di prefers-reduced-motion. */
.cari-lokasi {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(29, 33, 51, .45);
  backdrop-filter: blur(2px);
  animation: fade-in .2s ease-out;
}
.cari-lokasi-kartu {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: 28px;
  padding: 1rem 1rem 1.25rem;
  text-align: center;
  box-shadow: 0 6px 0 0 rgba(29, 33, 51, .12), 0 20px 40px -12px rgba(29, 33, 51, .35);
}
.cari-lokasi-langit {
  position: relative;
  height: 150px;
  border-radius: 20px;
  overflow: hidden;
  background: rgb(var(--color-sky-rgb));
}
/* Cincin sasaran */
.cari-lokasi-cincin {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 64px;
  height: 18px;
  margin-left: -32px;
  border: 2px solid rgb(255 255 255 / .75);
  border-radius: 50%;
  animation: cari-lokasi-denyut 1.6s ease-out infinite;
}
.cari-lokasi-cincin-2 { animation-delay: .8s; }
@keyframes cari-lokasi-denyut {
  from { transform: scale(.4); opacity: 1; }
  to   { transform: scale(1.5); opacity: 0; }
}
.cari-lokasi-pin {
  position: absolute;
  left: 50%;
  bottom: 44px;
  font-size: 26px;
  line-height: 1;
  transform: translate(-50%, -110px);
  opacity: 0;
}
.cari-lokasi-judul {
  margin-top: .9rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: #1D2133;
}
.cari-lokasi-sub {
  margin-top: .15rem;
  font-size: .85rem;
  line-height: 1.35;
  color: #5E6273;
  min-height: 2.3em; /* teks berganti tanpa kartu melompat */
}
.cari-lokasi-bilah {
  margin: .85rem auto 0;
  width: 70%;
  height: 6px;
  border-radius: 999px;
  background: rgba(29, 33, 51, .08);
  overflow: hidden;
}
.cari-lokasi-bilah span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: rgb(var(--color-sky-rgb));
  transform-origin: left;
  animation: cari-lokasi-bilah linear forwards;
}
@keyframes cari-lokasi-bilah {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* Ketemu: pin jatuh ke cincin, cincin jadi hijau & diam. */
.cari-lokasi.is-ketemu .cari-lokasi-pin { animation: cari-lokasi-jatuh .45s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.cari-lokasi.is-ketemu .cari-lokasi-cincin { animation: none; transform: scale(1.1); border-color: #7FE0A8; background: rgba(127, 224, 168, .25); }
.cari-lokasi.is-ketemu .cari-lokasi-cincin-2 { display: none; }
.cari-lokasi.is-ketemu .cari-lokasi-bilah span { animation: none; background: #2E8B57; }
/* Gagal: berhenti "mencari" supaya tidak terkesan masih menunggu. */
.cari-lokasi.is-gagal .cari-lokasi-bilah span { animation-play-state: paused; background: rgba(29, 33, 51, .25); }
.cari-lokasi.is-gagal .cari-lokasi-cincin { animation: none; opacity: .45; transform: scale(1); }
.cari-lokasi.is-gagal .cari-lokasi-cincin-2 { display: none; }
@keyframes cari-lokasi-jatuh {
  from { transform: translate(-50%, -80px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cari-lokasi, .cari-lokasi-cincin { animation: none; }
  .cari-lokasi.is-ketemu .cari-lokasi-pin { animation: none; transform: translate(-50%, 0); opacity: 1; }
}

/* Kartu sandi sekali-tampil: sengaja mencolok supaya tidak terlewat,
   karena isinya tidak bisa dilihat lagi setelah halaman ditinggalkan. */
.kartu-sandi {
  background: #FFF7E0;
  border: 2px dashed var(--color-sun);
  border-radius: 20px;
}
.sandi-teks {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--color-ink);
}

/* Tombol lihat/sembunyikan kata sandi (disisipkan oleh assets/js/app.js).
   Padding kanan input ditimpa lewat sini supaya teks tidak tertimpa tombol,
   berapa pun kelas Tailwind yang dipakai halamannya. */
.sandi-wrap {
  position: relative;
  display: block;
}
.sandi-wrap .sandi-input {
  padding-right: 2.75rem;
}
.sandi-toggle {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s ease, background-color .15s ease;
}
.sandi-toggle:hover { opacity: 1; background: rgba(29, 33, 51, .06); }
.sandi-toggle:focus-visible {
  outline: 2px solid var(--color-sky);
  outline-offset: 2px;
  opacity: 1;
}

/* Ajakan "Pasang di HP" (dibuat oleh assets/js/app.js saat browser menawarkan
   install prompt).

   Dulu ini tombol bulat melayang di tengah layar dan menutupi kartu di bawahnya.
   Sekarang bentuknya bilah tipis yang menempel tepat di atas bottom-nav, punya tombol
   tutup, dan halaman diberi ruang bawah tambahan (html.ada-pasang-app) — jadi tidak ada
   konten yang tertutup, dan yang tidak berminat bisa menyingkirkannya. */
.pasang-app {
  position: fixed;
  left: max(.75rem, env(safe-area-inset-left));
  right: max(.75rem, env(safe-area-inset-right));
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 30rem;
  margin: 0 auto;
  padding: .55rem .55rem .55rem .9rem;
  border-radius: 18px;
  background: var(--color-ink);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  box-shadow: var(--shadow-soft);
}
/* Halaman orang tua punya bottom-nav ~3.6rem; bilahnya naik supaya tidak bertumpuk. */
.pasang-app.dengan-nav { bottom: calc(4.25rem + env(safe-area-inset-bottom)); }

.pasang-app .pasang-teks { flex: 1 1 auto; line-height: 1.25; }
.pasang-app .pasang-teks strong { display: block; font-family: 'Inter', system-ui, sans-serif; font-size: .95rem; }
.pasang-app .pasang-teks span { opacity: .75; font-size: .72rem; }

.pasang-app button {
  border: 0;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
}
.pasang-app .pasang-ya {
  padding: .5rem .9rem;
  border-radius: 12px;
  background: var(--color-sun);
  color: var(--color-ink);
  font-size: .82rem;
  white-space: nowrap;
}
.pasang-app .pasang-tutup {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}
.pasang-app .pasang-tutup:hover { background: rgba(255, 255, 255, .28); }
.pasang-app button:focus-visible {
  outline: 3px solid var(--color-sun);
  outline-offset: 2px;
}

/* Ruang bawah tambahan selama bilahnya tampil, supaya kartu terakhir tetap bisa dibaca. */
html.ada-pasang-app body { padding-bottom: 5.5rem; }
html.ada-pasang-app body.ada-bottom-nav { padding-bottom: 9.5rem; }

/* ---------- Presensi harian ----------
   Pil status dibuat setinggi jempol dan berjajar dalam satu baris: ustadzah memakainya
   sambil berdiri di pintu kelas, satu tangan memegang HP. Warna hanya muncul saat dipilih,
   supaya sekali lihat ketahuan anak mana yang belum diisi. */



/* Sedang dikirim: warna optimistis sudah tampil, cukup redupkan sedikit sampai server jawab. */









/* Kartu anak yang sudah diisi diredupkan sedikit — sisa kartu yang "menyala" adalah
   daftar kerja yang belum selesai. */

/* Kartu yang belum diisi diberi garis coral di kiri: saat menggulir cepat 20-30 anak,
   kartu yang masih harus dicatat langsung kelihatan tanpa membaca teks statusnya. */

/* Disorot sebentar setelah tombol "Ke yang belum" menggulir ke kartu ini. */

@keyframes presensi-sorot {
  0%, 35% { outline: 3px solid var(--color-coral); outline-offset: 2px; }
  100%    { outline: 3px solid transparent; outline-offset: 2px; }
}


/* Bar ringkasan presensi yang menempel di atas layar selama daftar anak digulir. */


/* ---------- Kartu QR anak ----------
   Dicetak lalu digunting; ukurannya dikunci dalam sentimeter supaya hasil cetak konsisten
   di printer mana pun, bukan ikut zoom layar. */
.kartu-qr {
  width: 8.5cm;
  border: 2px dashed rgba(29, 33, 51, .35);
  border-radius: 18px;
  padding: .6cm;
  text-align: center;
  break-inside: avoid;
  background: #fff;
}
.kartu-qr .qr-svg { width: 4.2cm; height: 4.2cm; display: block; margin: 0 auto .35cm; }
.kartu-qr .qr-svg { background: #fff; }
.kartu-qr .qr-svg path { fill: var(--color-ink); }
.kartu-qr .qr-nama { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 1rem; }
.kartu-qr .qr-meta { font-size: .72rem; color: var(--color-ink-soft); }

/* Kartu QR jemput: satu lembar besar buat ditempel di gerbang, bukan digunting per anak
   seperti .kartu-qr biasa — jadi ukurannya dikunci lebih besar supaya kebaca dari jarak. */






@media print {
  .tanpa-cetak { display: none !important; }
  .bottom-nav { display: none !important; }
  body { background: #fff; }
  .lembar-qr { display: flex; flex-wrap: wrap; gap: .5cm; }
  /* "Cetak kartu ini": kartuQrUstadzah.cetak() memasang kelasnya sebentar selama dialog cetak. */
  body.cetak-satu .kartu-qr:not(.dicetak) { display: none !important; }
}

/* ---------- Pemindai kartu ---------- */
.pemindai-bingkai {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #0E1116;
  aspect-ratio: 4 / 3;
}
.pemindai-bingkai video { width: 100%; height: 100%; object-fit: cover; }
.pemindai-target {
  position: absolute;
  inset: 18%;
  border: 4px solid rgba(255, 255, 255, .85);
  border-radius: 20px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .28);
}

/* ---------- Saklar pengingat ----------
   Checkbox asli disembunyikan (tetap ada untuk keyboard & pembaca layar);
   rel yang terlihat digambar dari dua span sesudahnya. Ditulis sebagai CSS
   biasa, bukan varian peer-* Tailwind, karena bulatan knob-nya adalah ANAK
   dari rel — bukan saudara sekandung input, sehingga peer-checked tidak
   pernah menjangkaunya. */









/* ---------- Halaman dokumen (Syarat, Privasi, FAQ — app/Views/info/) ----------
   Tailwind di proyek ini tidak memasang plugin typography, jadi teks panjang yang
   ditulis sebagai HTML biasa di view diberi gaya di sini, bukan class per tag. */

















/* Nomor bagian berwarna — urutannya mengikuti tujuh warna ikon kebiasaan. */


/* FAQ pakai <details> bawaan: bisa dibuka tanpa JS & tetap jalan dengan keyboard. */






/* ======================================================================
   Landing taud.my.id (portal/index.php). Semua kelas berawalan `lp-`.
   Satu aksen: --lp-aksen (biru langit yang digelapkan supaya teks putih di atasnya
   lolos kontras WCAG AA; --color-sky polos cuma ~2,3:1 dengan putih).
   Warna 7 kebiasaan (--habit-color) HANYA dipakai untuk stempel, itu identitas produk.
   Radius: wadah 24px, tombol/chip/ikon bulat pil.
   ====================================================================== */
:root { --lp-aksen: #2D74A1; }

/* Langit hanya menutupi bagian atas halaman (tinggi tetap), bukan diregangkan sepanjang
   landing: gradien .bg-sky-scene milik halaman pendek jadi keruh kalau dipakai di sini. */

/* --color-sky-rgb ditulis pakai spasi (untuk Tailwind), jadi rgba(var(..), a) tidak valid:
   bayangan transparan dibuat lewat color-mix, dengan nilai biru default sebagai cadangan. */
:root { --lp-sky-lembut: rgba(12, 127, 115, .18); --lp-sky-titik: rgba(8, 95, 87, .45); }
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --lp-aksen: color-mix(in srgb, var(--color-sky-dark) 72%, var(--color-ink));
    --lp-sky-lembut: color-mix(in srgb, var(--color-sky) 18%, transparent);
    --lp-sky-titik: color-mix(in srgb, var(--color-sky-dark) 45%, transparent);
  }
}














/* Tombol */










/* Teks */






/* Lembar jurnal di hero */




















/* Tujuh stempel */







/* Pasangan kertas vs taud */







/* Alur satu hari */






/* Tab fitur per peran */










/* Ajakan akhir */




/* Gerak: hanya kalau pengguna tidak meminta "kurangi gerakan". Muncul-saat-digulir
   baru aktif setelah .lp-js terpasang, jadi tanpa JS semuanya tetap terlihat. */
@keyframes lp-masuk { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }



/* ---------- Halaman informasi (FAQ, Syarat, Privasi): info/_atas.php, faq.php ---------- */


/* Pilihan dokumen: satu kapsul, item aktif terisi aksen */






/* Kolom cari */






/* Daftar kelompok pertanyaan (kiri di desktop, deretan chip di HP) */




/* Pertanyaan: <details> bawaan, jalan tanpa JS dan dengan keyboard */













/* ---------- Editor isi pengumuman (Tiptap; lib/editor-pengumuman.min.js) ---------- */













/* ======================================================================
   Landing: gerak hidup (portal/index.php + portal/_adegan_hari.php)
   Satu gagasan: hari berjalan. Langit adegan berganti senja > malam > pagi, stempel "dicap",
   jari memperagakan "satu tap". Keadaan tanpa animasi selalu bingkai akhir yang bermakna,
   dan seluruh gerak hanya ada di prefers-reduced-motion: no-preference.
   ====================================================================== */





/* Elemen SVG yang diputar/diskalakan berporos di tengah dirinya sendiri, bukan di pojok kanvas. */






/* Jari demo & konfeti 7/7 di lembar jurnal hero */








@keyframes lp-hanyut { from { transform: translateX(0); } to { transform: translateX(var(--jarak, 44px)); } }
@keyframes lp-cap { 0% { transform: scale(1.7) rotate(-16deg); opacity: 0; } 55% { transform: scale(.92) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes lp-cap-tinta { 0% { opacity: .6; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes lp-napas { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes lp-ledak { 0% { opacity: 1; transform: rotate(var(--sudut)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--sudut)) translateY(-84px) scale(.4); } }
@keyframes lp-muncul { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Adegan senja: notifikasi turun, HP bergetar, lonceng bergoyang */
@keyframes lp-a-notif { 0%, 10% { opacity: 0; transform: translateY(-16px) scale(.96); } 20%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes lp-a-getar { 0%, 17%, 29%, 100% { transform: none; } 19%, 23%, 27% { transform: translateX(-2px) rotate(-1.2deg); } 21%, 25% { transform: translateX(2px) rotate(1.2deg); } }
@keyframes lp-a-lonceng { 0%, 18%, 40%, 100% { transform: none; } 22%, 30% { transform: rotate(-16deg); } 26%, 34% { transform: rotate(16deg); } }
@keyframes lp-a-kelip { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes lp-a-jendela { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
/* Adegan malam: anak mengintip ikut melihat */
@keyframes lp-a-anak { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
/* Adegan pagi: matahari, awan, bendera, anak menyodorkan kartu, pindai, Hadir */
@keyframes lp-putar { to { transform: rotate(360deg); } }
@keyframes lp-a-awan { from { transform: translateX(-16px); } to { transform: translateX(22px); } }
@keyframes lp-a-bendera { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-7deg) scaleX(.9); } }
@keyframes lp-a-anak-jalan { 0% { transform: translateX(-42px); } 28%, 72% { transform: translateX(0); } 100% { transform: translateX(-42px); } }
@keyframes lp-a-pindai { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(34px); } }
@keyframes lp-a-hadir { 0%, 30% { opacity: 0; transform: translateY(8px) scale(.6); } 38%, 72% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-4px); } }




/* Kolom angka (nominal gaji): tanpa panah naik-turun, nominal diketik. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }