/* ============================================================
   wali-style.css — Situs Wali Murid SD S Sekar Adi
   walimurid.sekaradi.com

   Disusun HP-first: satu kolom, navigasi bawah, sasaran sentuh
   besar. Tema Aurora / Fluid Glass sama dengan portal, tapi
   lebih tenang karena pembacanya orang tua, bukan petugas.

   CATATAN WARNA (hasil uji palet 23 Agustus):
   --peringatan di mode terang memakai kuning tua #8a6d00,
   BUKAN oranye #b45309 seperti portal. Oranye portal terhadap
   merah bahaya hanya berjarak ΔE 9,1 — terlalu mirip untuk
   dibedakan sekilas. Yang baru berjarak ΔE 17,6.
   Meski begitu, warna TIDAK PERNAH jadi satu-satunya penanda:
   setiap status selalu ditemani teks atau huruf H/S/I/A.
   ============================================================ */

:root{
  --bg:#eef2f8;
  --latar-lapisan:radial-gradient(1200px 600px at 50% -10%, #dbe7fb 0%, transparent 60%);
  --putih:rgba(255,255,255,.82);
  --kaca:rgba(255,255,255,.72);
  --lapis:rgba(255,255,255,.55);
  --lapis-kuat:rgba(15,23,42,.05);
  --garis:rgba(15,23,42,.10);
  --garis-tua:rgba(15,23,42,.18);
  --teks:#0f172a;
  --teks-lembut:#475569;
  --teks-samar:#64748b;
  --teal:#0e7490;
  --teal-tua:#0b5566;
  --teal-muda:#cffafe;
  --teal-garis:rgba(14,116,144,.30);
  --aksen-teks:#0b5566;
  --sukses:#15803d;      --sukses-bg:#dcfce7;   --sukses-garis:#86efac;
  --peringatan:#8a6d00;  --peringatan-bg:#fef3c7;--peringatan-garis:#fcd34d;
  --bahaya:#b91c1c;      --bahaya-bg:#fee2e2;   --bahaya-garis:#fca5a5;
  --netral:#475569;      --netral-bg:rgba(15,23,42,.06);
  --radius:12px; --radius-lg:16px; --radius-xl:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.05);
  --shadow-md:0 8px 30px rgba(15,23,42,.10);
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-h:64px;
}

:root[data-tema="gelap"], html[data-tema="auto"] :root{ }

@media (prefers-color-scheme: dark){
  :root:not([data-tema="terang"]){
    --bg:#070c15;
    --latar-lapisan:radial-gradient(1100px 560px at 50% -10%, #12233d 0%, transparent 62%);
    --putih:rgba(19,28,46,.72);
    --kaca:rgba(19,28,46,.62);
    --lapis:rgba(255,255,255,.045);
    --lapis-kuat:rgba(255,255,255,.09);
    --garis:rgba(148,180,255,.14);
    --garis-tua:rgba(148,180,255,.26);
    --teks:#e8eefc;
    --teks-lembut:#a7b6d4;
    --teks-samar:#7f90b0;
    --teal:#22d3ee;
    --teal-tua:#67e8f9;
    --teal-muda:rgba(34,211,238,.16);
    --teal-garis:rgba(34,211,238,.38);
    --aksen-teks:#7dd3fc;
    --sukses:#4ade80;      --sukses-bg:rgba(74,222,128,.14);   --sukses-garis:rgba(74,222,128,.35);
    --peringatan:#fbbf24;  --peringatan-bg:rgba(251,191,36,.14);--peringatan-garis:rgba(251,191,36,.35);
    --bahaya:#f87171;      --bahaya-bg:rgba(248,113,113,.14);  --bahaya-garis:rgba(248,113,113,.35);
    --netral:#a7b6d4;      --netral-bg:rgba(255,255,255,.07);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.30);
    --shadow-md:0 10px 34px rgba(0,0,0,.45);
  }
}

:root[data-tema="gelap"]{
  --bg:#070c15;
  --latar-lapisan:radial-gradient(1100px 560px at 50% -10%, #12233d 0%, transparent 62%);
  --putih:rgba(19,28,46,.72);
  --kaca:rgba(19,28,46,.62);
  --lapis:rgba(255,255,255,.045);
  --lapis-kuat:rgba(255,255,255,.09);
  --garis:rgba(148,180,255,.14);
  --garis-tua:rgba(148,180,255,.26);
  --teks:#e8eefc;
  --teks-lembut:#a7b6d4;
  --teks-samar:#7f90b0;
  --teal:#22d3ee;
  --teal-tua:#67e8f9;
  --teal-muda:rgba(34,211,238,.16);
  --teal-garis:rgba(34,211,238,.38);
  --aksen-teks:#7dd3fc;
  --sukses:#4ade80;      --sukses-bg:rgba(74,222,128,.14);   --sukses-garis:rgba(74,222,128,.35);
  --peringatan:#fbbf24;  --peringatan-bg:rgba(251,191,36,.14);--peringatan-garis:rgba(251,191,36,.35);
  --bahaya:#f87171;      --bahaya-bg:rgba(248,113,113,.14);  --bahaya-garis:rgba(248,113,113,.35);
  --netral:#a7b6d4;      --netral-bg:rgba(255,255,255,.07);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.30);
  --shadow-md:0 10px 34px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  background-image:var(--latar-lapisan);
  background-attachment:fixed;
  color:var(--teks);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
}
a{color:var(--aksen-teks)}

/* ---------- topbar ---------- */
.tb{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px calc(10px) 14px;
  padding-top:calc(10px + env(safe-area-inset-top, 0px));
  background:var(--kaca);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--garis);
}
.tb img{width:30px;height:30px;border-radius:8px;flex:none;object-fit:contain}
.tb .jd{font-size:14.5px;font-weight:700;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb button{
  border:1px solid var(--garis-tua); background:var(--lapis); color:var(--teks);
  width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:15px;
  display:grid;place-items:center;flex:none;font-family:inherit}

main{max-width:560px;margin:0 auto;padding:16px 14px 8px}
h1{font-size:19px;margin:0 0 3px}
h2.sec{font-size:15px;font-weight:700;margin:24px 0 10px;color:var(--teks-lembut);
  text-transform:uppercase;letter-spacing:.04em}
.hint{font-size:13px;color:var(--teks-lembut);margin:0 0 14px}

/* ---------- kartu ---------- */
.kartu{
  background:var(--putih); border:1px solid var(--garis);
  border-radius:var(--radius-lg); padding:16px 17px; margin-bottom:13px;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.kartu h3{font-size:14.5px;margin:0 0 3px}
.kartu .ket{font-size:12.5px;color:var(--teks-lembut);margin-bottom:12px}
.kosong{font-size:13px;color:var(--teks-samar);text-align:center;padding:20px 4px;line-height:1.55}

/* ---------- identitas anak ---------- */
.anak{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.anak .av{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--teal-muda);color:var(--aksen-teks);font-weight:700;font-size:16px;
  border:1px solid var(--teal-garis)}
.anak .nm{font-size:16.5px;font-weight:700;line-height:1.25}
.anak .kl{font-size:12.5px;color:var(--teks-lembut);margin-top:1px}
select.anak-pilih{
  width:100%;margin-top:12px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--garis-tua);background:var(--lapis);color:var(--teks);
  font-family:inherit;font-size:14px}

/* ---------- angka utama + meter ---------- */
.utama{text-align:center;padding:22px 17px 18px}
.utama .lbl{font-size:12px;font-weight:600;color:var(--teks-lembut);
  text-transform:uppercase;letter-spacing:.05em}
.utama .angka{font-size:54px;font-weight:800;line-height:1.05;margin:6px 0 2px;letter-spacing:-.02em}
.utama .stat{font-size:13px;font-weight:600;margin-bottom:14px}
.meter{height:9px;border-radius:99px;overflow:hidden;background:var(--lapis-kuat)}
.meter i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.baik   .angka,.baik   .stat{color:var(--sukses)}
.baik   .meter i{background:var(--sukses)}
.sedang .angka,.sedang .stat{color:var(--peringatan)}
.sedang .meter i{background:var(--peringatan)}
.kurang .angka,.kurang .stat{color:var(--bahaya)}
.kurang .meter i{background:var(--bahaya)}

/* ---------- kotak S/I/A ---------- */
.tiga{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:15px}
.empat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kk{border:1px solid var(--garis);border-radius:var(--radius);padding:11px 5px;
  text-align:center;background:var(--lapis)}
.kk .n{font-size:21px;font-weight:700;line-height:1.1}
.kk .t{font-size:10.5px;font-weight:600;color:var(--teks-lembut);margin-top:3px;
  text-transform:uppercase;letter-spacing:.04em}
.kk.s-hadir .n{color:var(--sukses)}
.kk.s-sakit .n{color:var(--peringatan)}
.kk.s-izin  .n{color:var(--netral)}
.kk.s-alfa  .n{color:var(--bahaya)}

/* ---------- lencana status ---------- */
.lb{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;
  border-radius:20px;white-space:nowrap}
.lb.ok  {background:var(--sukses-bg);   color:var(--sukses);    border:1px solid var(--sukses-garis)}
.lb.awas{background:var(--peringatan-bg);color:var(--peringatan);border:1px solid var(--peringatan-garis)}
.lb.bhy {background:var(--bahaya-bg);   color:var(--bahaya);    border:1px solid var(--bahaya-garis)}
.lb.net {background:var(--netral-bg);   color:var(--teks-lembut);border:1px solid var(--garis)}

/* ---------- baris daftar ---------- */
.br{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid var(--garis)}
.br:last-child{border-bottom:0;padding-bottom:0}
.br .ki{font-size:13.5px;line-height:1.45;min-width:0}
.br .ki b{font-weight:700}
.br .ki small{display:block;font-size:11.5px;color:var(--teks-samar);margin-top:2px;line-height:1.45}
.br .ka{flex:none;text-align:right}

/* ---------- kartu pelajaran ---------- */
.pel{border:1px solid var(--garis);border-left:3px solid var(--teal);
  border-radius:var(--radius);padding:12px 13px;margin-bottom:9px;background:var(--lapis)}
.pel .at{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pel .mp{font-weight:700;font-size:14px}
.pel .jm{font-size:11px;color:var(--teks-samar);white-space:nowrap}
.pel .lb2{font-size:10.5px;font-weight:700;color:var(--teks-lembut);
  text-transform:uppercase;letter-spacing:.04em;margin-top:8px}
.pel .is{font-size:13.5px;line-height:1.5;white-space:pre-wrap}

/* ---------- kalender kehadiran ---------- */
.kal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:12px}
.kal .hd{font-size:10px;font-weight:700;color:var(--teks-samar);text-align:center;padding-bottom:2px}
.kal .sel{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--garis);background:var(--lapis);position:relative}
.kal .sel .tg{font-size:11px;color:var(--teks-samar);position:absolute;top:3px;left:5px}
.kal .sel .st{font-size:11px;font-weight:800}
.kal .sel.kosong{border-style:dashed;opacity:.45}
.kal .sel.h{background:var(--sukses-bg);border-color:var(--sukses-garis)}
.kal .sel.h .st{color:var(--sukses)}
.kal .sel.s{background:var(--peringatan-bg);border-color:var(--peringatan-garis)}
.kal .sel.s .st{color:var(--peringatan)}
.kal .sel.i{background:var(--netral-bg)}
.kal .sel.i .st{color:var(--teks-lembut)}
.kal .sel.a{background:var(--bahaya-bg);border-color:var(--bahaya-garis)}
.kal .sel.a .st{color:var(--bahaya)}
.legenda{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--teks-lembut)}
.legenda span{display:inline-flex;align-items:center;gap:5px}
.legenda i{width:11px;height:11px;border-radius:4px;display:inline-block;border:1px solid var(--garis)}

/* ---------- kendali (pilih bulan) ---------- */
.kendali{display:flex;gap:9px;align-items:center;margin-bottom:14px}
.kendali select,.kendali input{flex:1;padding:10px 12px;border-radius:10px;
  border:1px solid var(--garis-tua);background:var(--lapis);color:var(--teks);
  font-family:inherit;font-size:14px}

/* ---------- navigasi bawah ---------- */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--kaca);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--garis);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--nav-h);text-decoration:none;color:var(--teks-samar);
  font-size:10.5px;font-weight:600}
.nav a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.nav a.on{color:var(--aksen-teks)}
.nav a.on svg{stroke-width:2.1}

/* ---------- layar login ---------- */
.masuk{max-width:400px;margin:6vh auto;padding:0 18px;text-align:center}
.masuk .logo{width:74px;height:74px;object-fit:contain;margin-bottom:14px}
.masuk h1{font-size:21px;margin-bottom:4px}
.masuk p.sub{font-size:13.5px;color:var(--teks-lembut);margin:0 0 24px}
.tombol-ms{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 16px;border-radius:12px;border:1px solid var(--garis-tua);
  background:var(--putih);color:var(--teks);font-family:inherit;
  font-size:15px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm)}
.tombol-ms:hover{border-color:var(--teal)}
.tombol-ms .kotak4{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:18px;height:18px;flex:none}
.tombol-ms .kotak4 i{display:block;border-radius:1px}
.pesan-galat{margin-top:16px;padding:12px 14px;border-radius:var(--radius);
  background:var(--bahaya-bg);color:var(--bahaya);border:1px solid var(--bahaya-garis);
  font-size:13px;text-align:left;line-height:1.5}
.masuk .kaki{margin-top:26px;font-size:12px;color:var(--teks-samar);line-height:1.6}

/* ---------- toast ---------- */
#pesan{position:fixed;bottom:calc(var(--nav-h) + 16px);left:50%;transform:translateX(-50%);
  background:var(--teks);color:var(--bg);padding:10px 18px;border-radius:11px;
  font-size:13.5px;font-weight:600;opacity:0;transition:.2s;pointer-events:none;z-index:40;
  max-width:88vw;text-align:center}
#pesan.tampil{opacity:1}

.sembunyi{display:none !important}