/* =====================================================================
   SIPER — Design token & reset
   ---------------------------------------------------------------------
   Arah desain: modern, bersih, lapang. Sudut membulat besar, nyaris tanpa
   bayangan, kontras dibangun dari latar hangat vs kartu putih.

   Aturan warna yang TIDAK BOLEH dilanggar:
   - --kuning-500 (#FDE910) tidak pernah dipakai sebagai warna teks di atas
     putih. Rasio kontrasnya hanya 1.3:1. Ia dipakai sebagai LATAR tombol
     aksi utama dengan teks --kuning-tinta (#3D3800) -> rasio 9.7:1.
   - Status tidak pernah dibedakan hanya lewat warna. Selalu ada kode huruf
     atau teks pendamping.
   - Sasaran sentuh minimal 44x44px.
   ===================================================================== */

:root{
  /* --- Merek: hijau logo yayasan ---------------------------------- */
  --hijau-900:#052B1A;
  --hijau-800:#064428;
  --hijau-700:#006B3E;
  --hijau-600:#00874F;          /* PRIMER — warna logo */
  --hijau-500:#12A163;
  --hijau-300:#7FCFA6;
  --hijau-200:#A9E3C6;          /* teks samar di atas hijau pekat */
  --hijau-100:#CDEBDD;
  --hijau-50:#EAF6F0;

  /* --- Aksen: kuning logo ----------------------------------------- */
  --kuning-500:#FDE910;         /* LATAR aksi utama, bukan warna teks */
  --kuning-400:#FFF04D;         /* keadaan hover */
  --kuning-100:#FFF7C2;
  --kuning-50:#FFFCE6;
  --kuning-tinta:#3D3800;       /* teks di atas kuning — kontras 9.7:1 */

  /* --- Bahaya: merah api logo ------------------------------------- */
  --merah-700:#8F1219;
  --merah-600:#C42630;
  --merah-500:#E8323C;
  --merah-100:#FBD5D8;
  --merah-50:#FDECEE;

  /* --- Warna status kehadiran (sepasang: latar lembut + teks pekat) -
     Nilai ini HARUS sama persis dengan tabel ref_status_harian di
     database, karena laporan matriks mengambil warnanya dari sana. */
  --st-hadir-bg:#EAF3DE;      --st-hadir-tx:#173404;
  --st-terlambat-bg:#FAEEDA;  --st-terlambat-tx:#412402;
  --st-dl-bg:#E6F1FB;         --st-dl-tx:#042C53;
  --st-izin-bg:#EEEDFE;       --st-izin-tx:#26215C;
  --st-sakit-bg:#FBEAF0;      --st-sakit-tx:#4B1528;
  --st-cuti-bg:#E1F5EE;       --st-cuti-tx:#04342C;
  --st-alfa-bg:#FCEBEB;       --st-alfa-tx:#501313;
  --st-libur-bg:#F1EFE8;      --st-libur-tx:#2C2C2A;

  /* Versi pekat dari warna status, untuk garis aksen kartu statistik dan
     angka besar. Bukan untuk latar luas. */
  --aksen-hadir:#00874F;
  --aksen-terlambat:#B8860B;
  --aksen-dl:#1D6FB8;
  --aksen-izin:#5B54C7;
  --aksen-sakit:#C2185B;
  --aksen-cuti:#0E8074;
  --aksen-alfa:#C42630;
  --aksen-libur:#94A39B;

  /* --- Netral: abu bersemburat hijau, bukan slate kebiruan -------- */
  --tinta-900:#0F1F17;          /* teks utama */
  --tinta-700:#2E3F36;
  --tinta-600:#4A5B51;
  --tinta-500:#6B7A71;          /* teks samar */
  --tinta-400:#94A39B;
  --tinta-300:#C3CDC7;
  --tinta-200:#E3E8E4;          /* garis */
  --tinta-100:#EFF2EE;
  --tinta-50:#F6F7F4;           /* latar halaman */
  --putih:#FFFFFF;

  /* --- Peran warna ------------------------------------------------ */
  --bg-halaman:var(--tinta-50);
  --bg-kartu:var(--putih);
  --teks-utama:var(--tinta-900);
  --teks-samar:var(--tinta-500);
  --garis:var(--tinta-200);

  /* --- Bentuk: membulat besar ------------------------------------- */
  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:24px;
  --r-2xl:28px;
  --r-pil:999px;

  /* --- Bayangan: sangat halus, hampir tidak terlihat -------------- */
  --bayang-1:0 1px 2px rgba(15,31,23,.04);
  --bayang-2:0 4px 16px rgba(15,31,23,.06);
  --bayang-3:0 12px 32px rgba(15,31,23,.10);
  --bayang-hijau:0 8px 24px rgba(0,135,79,.20);
  --bayang-kuning:0 6px 20px rgba(253,233,16,.35);

  /* --- Jarak (kelipatan 4) ---------------------------------------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:28px; --s8:32px; --s10:40px; --s12:48px;

  /* --- Huruf ------------------------------------------------------ */
  --font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --t-xs:12px; --t-sm:13px;  --t-md:15px; --t-lg:17px;
  --t-xl:21px; --t-2xl:26px; --t-3xl:34px; --t-jam:52px;

  /* --- Gerak ------------------------------------------------------ */
  --transisi:180ms cubic-bezier(.2,.8,.2,1);

  /* --- Tata letak ------------------------------------------------- */
  --sentuh-min:44px;
  --tinggi-bottomnav:74px;
  --aman-bawah:env(safe-area-inset-bottom,0px);
  --lebar-konten-maks:520px;
  --lebar-admin-maks:1440px;
}

/* =====================================================================
   RESET RINGKAS
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--t-md);
  line-height:1.55;
  color:var(--teks-utama);
  background:var(--bg-halaman);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

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

a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}

button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}

table{border-collapse:collapse;width:100%}

/* Fokus keyboard harus selalu terlihat jelas. */
:focus-visible{
  outline:3px solid var(--hijau-500);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
:focus:not(:focus-visible){outline:none}

/* Ikon sprite */
.ikon{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;
}
.ikon--sm{width:18px;height:18px}
.ikon--lg{width:26px;height:26px}

/* Hanya untuk pembaca layar */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sr-only:focus{
  position:fixed;top:var(--s3);left:var(--s3);width:auto;height:auto;
  padding:var(--s3) var(--s4);clip:auto;z-index:200;
  background:var(--tinta-900);color:var(--putih);border-radius:var(--r-md);
}

/* Hormati pengguna yang meminta gerak minimal. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Huruf lokal — satu berkas variable font (27 KB) yang memuat seluruh
   bobot 200-800. Di-host sendiri, tidak memanggil fonts.googleapis.com,
   supaya tetap tampil rapi meski internet sekolah lambat.
   Bila berkasnya hilang, fallback 'Segoe UI'/system-ui tetap membuat
   tampilan layak — aplikasi tidak menunggu font. */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('../font/PlusJakartaSans-Variable.woff2') format('woff2-variations'),
      url('../font/PlusJakartaSans-Variable.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}