/* ===========================================================================
   SIAPTAB — Dasar & Komponen Bersama
   Berkas: public/shared/css/dasar.css

   Memuat penyetelan ulang bawaan peramban dan komponen yang dipakai
   LEBIH DARI SATU peran: tombol, kartu, tabel, lencana, borang, pesan,
   dan keadaan kosong.

   ATURAN PEMELIHARAAN:
   Komponen yang hanya dipakai satu peran TIDAK boleh ditulis di sini.
   Letakkan di public/<peran>/css/. Berkas ini sengaja dijaga agar tidak
   membengkak, sebab setiap perubahan di sini berdampak ke semua peran.
   =========================================================================== */

/* ============================ PENYETELAN ULANG ========================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--huruf-utama);
  font-size: var(--ukuran-md);
  line-height: 1.55;
  color: var(--teks-utama);
  background: var(--latar);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--tebal-tegas);
  line-height: 1.3;
  color: var(--netral-900);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--brand-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Garis fokus WAJIB terlihat. Menghapusnya membuat aplikasi tidak dapat
   dipakai dengan papan tombol saja. */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Angka uang & nominal memakai huruf monospasi agar digit sejajar dan
   mudah dibandingkan antar baris tabel. */
.angka {
  font-family: var(--huruf-angka);
  font-variant-numeric: tabular-nums;
}

/* Hanya untuk pembaca layar. */
.khusus-pembaca-layar {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================================ IKON ================================== */
/* Ikon Lucide dipasang sebagai SVG sebaris agar tajam di layar retina dan
   tidak menambah permintaan jaringan. Ketebalan garis dijaga seragam 2. */

.ikon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.ikon-sm { width: 15px; height: 15px; }
.ikon-lg { width: 22px; height: 22px; }
.ikon-xl { width: 28px; height: 28px; }

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

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jarak-2);
  padding: 0.5rem 0.9rem;
  font-size: var(--ukuran-md);
  font-weight: var(--tebal-sedang);
  border: 1px solid transparent;
  border-radius: var(--sudut-sm);
  background: var(--netral-100);
  color: var(--teks-utama);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transisi-cepat), border-color var(--transisi-cepat);
}
.tombol:hover { background: var(--netral-200); }
.tombol:disabled { opacity: 0.55; cursor: not-allowed; }

.tombol-utama {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.tombol-utama:hover { background: var(--brand-primary-hover); }
.tombol-utama:active { background: var(--brand-primary-active); }

.tombol-garis {
  background: var(--permukaan);
  border-color: var(--garis-kuat);
}
.tombol-garis:hover { background: var(--netral-50); border-color: var(--netral-400); }

.tombol-bahaya { background: var(--bahaya); color: #fff; }
.tombol-bahaya:hover { filter: brightness(0.92); }

.tombol-sunyi { background: transparent; }
.tombol-sunyi:hover { background: var(--netral-100); }

.tombol-sm { padding: 0.35rem 0.65rem; font-size: var(--ukuran-sm); }
.tombol-lg { padding: 0.7rem 1.25rem; font-size: var(--ukuran-lg); }
.tombol-penuh { width: 100%; }

/* Keadaan memuat: teks diganti pemutar agar pengguna tahu sistem bekerja
   dan tidak menekan tombol dua kali. */
.tombol[data-memuat='1'] {
  pointer-events: none;
  position: relative;
  color: transparent;
}
.tombol[data-memuat='1']::after {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: putar 600ms linear infinite;
  color: var(--brand-on-primary);
}
.tombol-garis[data-memuat='1']::after,
.tombol-sunyi[data-memuat='1']::after { color: var(--teks-kedua); }

@keyframes putar { to { transform: rotate(360deg); } }

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

.kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--sudut-md);
  box-shadow: var(--bayang-sm);
}
.kartu-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jarak-3);
  padding: var(--jarak-4) var(--jarak-5);
  border-bottom: 1px solid var(--garis);
}
.kartu-judul {
  font-size: var(--ukuran-lg);
  font-weight: var(--tebal-tegas);
}
.kartu-isi { padding: var(--jarak-5); }
.kartu-kaki {
  padding: var(--jarak-4) var(--jarak-5);
  border-top: 1px solid var(--garis);
  background: var(--permukaan-tenggelam);
  border-radius: 0 0 var(--sudut-md) var(--sudut-md);
}

/* Kartu ringkasan angka untuk dasbor. */
.kartu-statistik { padding: var(--jarak-5); }
.kartu-statistik .label {
  font-size: var(--ukuran-xs);
  font-weight: var(--tebal-sedang);
  color: var(--teks-redup);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kartu-statistik .nilai {
  margin-top: var(--jarak-2);
  font-family: var(--huruf-angka);
  font-size: var(--ukuran-3xl);
  font-weight: var(--tebal-berat);
  line-height: 1.1;
  color: var(--netral-900);
}
.kartu-statistik .keterangan {
  margin-top: var(--jarak-1);
  font-size: var(--ukuran-xs);
  color: var(--teks-redup);
}

/* =============================== LENCANA ================================ */

.lencana {
  display: inline-flex;
  align-items: center;
  gap: var(--jarak-1);
  padding: 0.15rem 0.5rem;
  font-size: var(--ukuran-xs);
  font-weight: var(--tebal-sedang);
  border: 1px solid transparent;
  border-radius: var(--sudut-penuh);
  white-space: nowrap;
}
.lencana-netral  { background: var(--netral-100); color: var(--netral-700); border-color: var(--netral-200); }
.lencana-sukses  { background: var(--sukses-soft); color: var(--sukses); border-color: var(--sukses-border); }
.lencana-ingat   { background: var(--peringatan-soft); color: var(--peringatan); border-color: var(--peringatan-border); }
.lencana-bahaya  { background: var(--bahaya-soft); color: var(--bahaya); border-color: var(--bahaya-border); }
.lencana-info    { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }

/* Pemetaan status presensi — WAJIB dipakai seragam di semua halaman
   agar satu status tidak pernah tampil dengan dua warna berbeda. */
.status-hadir     { background: var(--sukses-soft); color: var(--sukses); border-color: var(--sukses-border); }
.status-terlambat { background: var(--peringatan-soft); color: var(--peringatan); border-color: var(--peringatan-border); }
.status-izin,
.status-sakit     { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }
.status-alpa      { background: var(--bahaya-soft); color: var(--bahaya); border-color: var(--bahaya-border); }

/* ================================ BORANG ================================ */

.bidang { margin-bottom: var(--jarak-4); }
.bidang-label {
  display: block;
  margin-bottom: var(--jarak-2);
  font-size: var(--ukuran-sm);
  font-weight: var(--tebal-sedang);
  color: var(--teks-kedua);
}
.bidang-label .wajib { color: var(--bahaya); }

.bidang-masukan,
.bidang-pilihan,
.bidang-area {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--permukaan);
  border: 1px solid var(--garis-kuat);
  border-radius: var(--sudut-sm);
  transition: border-color var(--transisi-cepat), box-shadow var(--transisi-cepat);
}
.bidang-masukan:focus,
.bidang-pilihan:focus,
.bidang-area:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--bayang-fokus);
}
.bidang-masukan::placeholder { color: var(--netral-400); }
.bidang-area { min-height: 90px; resize: vertical; }

.bidang-masukan[aria-invalid='true'],
.bidang-pilihan[aria-invalid='true'] {
  border-color: var(--bahaya);
}
.bidang-galat {
  margin-top: var(--jarak-1);
  font-size: var(--ukuran-xs);
  color: var(--bahaya);
}
.bidang-bantuan {
  margin-top: var(--jarak-1);
  font-size: var(--ukuran-xs);
  color: var(--teks-redup);
}

/* ================================ TABEL ================================= */

.tabel-bungkus {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
}
.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ukuran-sm);
}
.tabel thead th {
  position: sticky;
  top: 0;
  padding: var(--jarak-3) var(--jarak-4);
  text-align: left;
  font-size: var(--ukuran-xs);
  font-weight: var(--tebal-tegas);
  color: var(--teks-kedua);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--permukaan-tenggelam);
  border-bottom: 1px solid var(--garis);
  white-space: nowrap;
}
.tabel tbody td {
  padding: var(--jarak-3) var(--jarak-4);
  border-bottom: 1px solid var(--netral-100);
  vertical-align: middle;
}
.tabel tbody tr:hover { background: var(--netral-50); }
.tabel tbody tr:last-child td { border-bottom: none; }
.tabel .rata-kanan { text-align: right; }
.tabel .rata-tengah { text-align: center; }

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

.pesan {
  display: flex;
  align-items: flex-start;
  gap: var(--jarak-3);
  padding: var(--jarak-3) var(--jarak-4);
  border: 1px solid transparent;
  border-radius: var(--sudut-sm);
  font-size: var(--ukuran-sm);
}
.pesan-sukses { background: var(--sukses-soft); color: var(--sukses); border-color: var(--sukses-border); }
.pesan-ingat  { background: var(--peringatan-soft); color: var(--peringatan); border-color: var(--peringatan-border); }
.pesan-bahaya { background: var(--bahaya-soft); color: var(--bahaya); border-color: var(--bahaya-border); }
.pesan-info   { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }

/* Pemberitahuan sesaat yang muncul di sudut layar. */
.wadah-notif {
  position: fixed;
  top: var(--jarak-4);
  right: var(--jarak-4);
  z-index: var(--lapis-pesan);
  display: flex;
  flex-direction: column;
  gap: var(--jarak-2);
  max-width: min(380px, calc(100vw - 2rem));
}
.notif {
  display: flex;
  align-items: flex-start;
  gap: var(--jarak-3);
  padding: var(--jarak-3) var(--jarak-4);
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--netral-400);
  border-radius: var(--sudut-sm);
  box-shadow: var(--bayang-lg);
  font-size: var(--ukuran-sm);
  animation: notif-masuk var(--transisi-sedang);
}
.notif-sukses { border-left-color: var(--sukses); }
.notif-bahaya { border-left-color: var(--bahaya); }
.notif-ingat  { border-left-color: var(--peringatan); }
.notif-info   { border-left-color: var(--info); }

@keyframes notif-masuk {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================ KEADAAN KOSONG ============================ */
/* Setiap daftar/tabel yang bisa kosong WAJIB memakai blok ini, bukan
   sekadar menampilkan teks "tidak ada data" yang kaku. */

.kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jarak-3);
  padding: var(--jarak-12) var(--jarak-6);
  text-align: center;
}
.kosong-gambar {
  width: 112px;
  height: 112px;
  color: var(--brand-primary);
  opacity: 0.45;
}
.kosong-judul {
  font-size: var(--ukuran-lg);
  font-weight: var(--tebal-tegas);
  color: var(--teks-kedua);
}
.kosong-pesan {
  max-width: 420px;
  font-size: var(--ukuran-sm);
  color: var(--teks-redup);
}

/* ============================ KERANGKA MUAT ============================= */
/* Dipakai saat data sedang diambil, agar tata letak tidak melompat. */

.kerangka {
  background: linear-gradient(90deg,
    var(--netral-100) 25%, var(--netral-200) 37%, var(--netral-100) 63%);
  background-size: 400% 100%;
  border-radius: var(--sudut-sm);
  animation: kerangka-geser 1.4s ease infinite;
}
.kerangka-baris { height: 14px; margin-bottom: var(--jarak-2); }
.kerangka-baris:last-child { width: 70%; margin-bottom: 0; }

@keyframes kerangka-geser {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* ============================== MODAL & DIALOG =========================== */

.tirai {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: var(--lapis-tirai);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--jarak-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transisi-cepat);
}
.tirai.terbuka {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--permukaan);
  border-radius: var(--sudut-lg);
  box-shadow: var(--bayang-xl);
  border: 1px solid var(--garis);
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - var(--jarak-8));
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--transisi-sedang);
  z-index: var(--lapis-modal);
}
.tirai.terbuka .modal {
  transform: translateY(0) scale(1);
}

.modal-lg { max-width: 760px; }
.modal-sm { max-width: 400px; }

/* ==================== POPUP MEMUAT EKSEKUTIF (LOADING) ==================== */
.modal-memuat {
  max-width: 320px;
  background: var(--permukaan);
  border-radius: var(--sudut-xl);
  box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.28);
  border: 1px solid var(--garis);
  padding: var(--jarak-6) var(--jarak-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: modal-muncul 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Bilah shimmer aksen dinamis di kepala modal */
.modal-memuat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-border), var(--brand-primary));
  background-size: 200% 100%;
  animation: shimmer-bilah 1.8s linear infinite;
}

@keyframes shimmer-bilah {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes modal-muncul {
  from { transform: translateY(14px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.spinner-cincin {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3.5px solid var(--brand-primary-soft);
  border-top-color: var(--brand-primary);
  border-right-color: var(--brand-primary);
  animation: spinner-putar 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  margin-bottom: var(--jarak-4);
  filter: drop-shadow(0 4px 12px rgba(29, 78, 216, 0.2));
}

@keyframes spinner-putar {
  to { transform: rotate(360deg); }
}

.memuat-pesan {
  font-size: var(--ukuran-sm);
  font-weight: var(--tebal-tegas);
  color: var(--teks-utama);
  margin-bottom: var(--jarak-1);
}

.memuat-sub {
  font-size: var(--ukuran-xs);
  color: var(--teks-kedua);
  margin: 0;
}

/* Animasi Masuk Halaman Halus (Smooth Page Transition) */
@keyframes transisi-halaman-masuk {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.konten,
.auth-layar {
  animation: transisi-halaman-masuk 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .modal-memuat,
  .spinner-cincin,
  .konten,
  .auth-layar {
    animation: none !important;
  }
}

.modal-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jarak-3);
  padding: var(--jarak-4) var(--jarak-6);
  border-bottom: 1px solid var(--garis);
  flex-shrink: 0;
}
.modal-judul {
  font-size: var(--ukuran-lg);
  font-weight: var(--tebal-tegas);
  color: var(--netral-900);
  margin: 0;
}

.modal-isi {
  padding: var(--jarak-6);
  overflow-y: auto;
  flex: 1;
}

.modal-kaki {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--jarak-2);
  padding: var(--jarak-4) var(--jarak-6);
  border-top: 1px solid var(--garis);
  background: var(--netral-50);
  border-bottom-left-radius: var(--sudut-lg);
  border-bottom-right-radius: var(--sudut-lg);
  flex-shrink: 0;
}

/* ============================== PEMBANTU ================================ */

.tumpuk { display: flex; flex-direction: column; }
.baris { display: flex; align-items: center; }
.baris-sela { display: flex; align-items: center; justify-content: space-between; }
.celah-1 { gap: var(--jarak-1); }
.celah-2 { gap: var(--jarak-2); }
.celah-3 { gap: var(--jarak-3); }
.celah-4 { gap: var(--jarak-4); }
.celah-6 { gap: var(--jarak-6); }
.penuh { flex: 1 1 auto; min-width: 0; }

.teks-xs { font-size: var(--ukuran-xs); }
.teks-sm { font-size: var(--ukuran-sm); }
.teks-lg { font-size: var(--ukuran-lg); }
.teks-redup { color: var(--teks-redup); }
.teks-kedua { color: var(--teks-kedua); }
.teks-tegas { font-weight: var(--tebal-tegas); }
.teks-berat { font-weight: var(--tebal-berat); }
.teks-kanan { text-align: right; }
.teks-tengah { text-align: center; }

/* Potong teks panjang agar tidak merusak lebar tabel. */
.potong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sembunyi { display: none !important; }

/* Kisi responsif untuk kartu dasbor. */
.kisi {
  display: grid;
  gap: var(--jarak-4);
}
.kisi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kisi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------------
   TIGA TINGKAT RESPONSIF
   Lebar sedang (tablet) dan sempit (ponsel) ditangani terpisah, sebab
   perangkat yang dipakai di sekolah sangat beragam.
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kisi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kisi-2, .kisi-3, .kisi-4 { grid-template-columns: minmax(0, 1fr); }
  .kartu-isi { padding: var(--jarak-4); }
  .kartu-kepala { padding: var(--jarak-3) var(--jarak-4); }
}