/* =========================================================
   MADARIS MUWASHOLAH — Prototaip UI (Fasa UI-2)
   Design system: token, typografi, komponen, layout, login.
   Vanilla CSS, tiada framework. BM utama + Arab RTL (NF-02/03).
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root{
  /* jenama — hijau zamrud madrasah (selaras repo: pwa/ + rasmi.css) */
  --hijau-950:#062b19;
  --hijau-900:#0a3a24;
  --hijau-800:#0e4a2e;
  --hijau-700:#12633c;
  --hijau-600:#17814d;
  --hijau-500:#22a05f;
  --hijau-100:#e6f3ec;
  --hijau-50:#f1f8f4;
  --emas:#d9a326;
  --emas-600:#b8862b;          /* aksen garis (dulu tidak ditakrif → border jatuh ke currentColor) */
  --emas-lemah:#fbf1d8;
  --emas-50:#fdf8ec;

  /* neutral hangat */
  --tinta:#14231b;
  --tinta-2:#40514a;
  --tinta-3:#87968d;
  --tinta-lemah:#526259;
  --tinta-samad:#87968d;
  --garis:#e3e8e2;
  --garis-tebal:#cfd8d1;
  --latar:#f5f7f4;
  --putih:#FFFFFF;

  /* Gerakan (motion tokens) — transitions-dev v: dinormalkan supaya semua
     transisi UI berkongsi satu skala. Jangan tulis ms/easing ad-hoc di tempat
     lain; rujuk token ini. */
  --duration-micro:80ms;   --duration-quick:150ms;  --duration-fast:250ms;
  --duration-medium:350ms; --duration-slow:400ms;
  --ease-smooth-out:cubic-bezier(0.22,1,0.36,1);
  --ease-bounce:cubic-bezier(0.34,1.36,0.64,1);
  --scale-press:0.99;

  /* semantik (selaras rasmi.css + pwa) */
  --berjaya:#16A34A;  --berjaya-bg:#E7F6EC;  --berjaya-garis:#bfe6cb;
  --amaran:#D97706;   --amaran-bg:#FEF3E2;   --amaran-garis:#f3d9ae;
  --bahaya:#DC2626;   --bahaya-bg:#FDEBEB;   --bahaya-garis:#f6c9c9;
  --maklumat:#2563EB; --maklumat-bg:#EAF1FD; --maklumat-garis:#cfdffb;

  /* tipografi */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;

  /* radius */
  --r-xs:6px; --r-s:8px; --r-m:10px; --r-l:14px; --r-xl:18px;

  /* bayang (berlapis, bukan satu blob) */
  --bayang-s:0 1px 2px rgba(12,38,24,.06),0 1px 3px rgba(12,38,24,.05);
  --bayang-m:0 6px 18px rgba(12,38,24,.08),0 1px 3px rgba(12,38,24,.05);
  --bayang-l:0 18px 44px rgba(12,38,24,.16);
  --fokus:0 0 0 3px rgba(23,129,77,.22);
  --masa:.16s cubic-bezier(.4,0,.2,1);

  /* dimensi */
  --lebar-sisi:250px;
  --tinggi-atas:60px;
  --tinggi-nav-bawah:62px;
}

/* ---------- 2. Reset & asas ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--latar);
  background-image:radial-gradient(900px 420px at 8% -6%,rgba(23,129,77,.06),transparent 62%),
    radial-gradient(700px 380px at 100% -8%,rgba(217,163,38,.07),transparent 60%);
  background-attachment:fixed;
  color:var(--tinta);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
[dir=rtl] body{font-family:"Noto Naskh Arabic","Geeza Pro",-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:var(--hijau-700);text-decoration:none;text-underline-offset:2px}
a:hover{color:var(--hijau-800);text-decoration:underline;text-decoration-thickness:1px}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px}
.ik{flex-shrink:0;display:inline-block;vertical-align:middle}
::selection{background:rgba(23,129,77,.16);color:var(--hijau-950)}
:focus-visible{outline:2px solid var(--hijau-600);outline-offset:2px}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#cdd8d1;border-radius:999px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#b3c2b9;background-clip:content-box}

/* ---------- 3. Tipografi ---------- */
.lemah{color:var(--tinta-lemah);font-size:13px}
.samad{color:var(--tinta-samad);font-size:12.5px}
.bar-kembali{margin-bottom:10px}
.butang-kembali{display:inline-flex;align-items:center;gap:6px;min-height:34px;
  padding:6px 12px;font-size:13px;border-radius:999px}
.label-medan{display:block;font-size:13px;font-weight:600;color:var(--tinta-lemah);margin-bottom:6px}
.cip-sesi{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;
  background:var(--hijau-50);border:1px solid var(--hijau-100);color:var(--hijau-800);
  font-size:13.5px;font-weight:700}
.cip-sesi.cip-baharu{background:var(--emas-50,#fdf6e7);border-color:#f0dfbb;color:#8a6a12}

.kepala-halaman{margin-bottom:22px}
.kepala-halaman h1{font-size:23px;font-weight:800;letter-spacing:-.02em}
.kepala-halaman .lemah{margin-top:3px}

/* ---------- 4. Butang ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  border:1px solid var(--garis-tebal);background:var(--putih);color:var(--tinta);
  border-radius:var(--r-m);padding:9px 16px;font-size:14px;font-weight:600;
  min-height:40px;box-shadow:0 1px 2px rgba(12,38,24,.05);
  transition:background var(--masa),border-color var(--masa),box-shadow var(--masa),transform var(--masa);
}
.btn:hover{background:var(--hijau-50);border-color:var(--hijau-600);box-shadow:var(--bayang-s)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:focus-visible{outline:none;box-shadow:var(--fokus)}
.btn-utama{
  background:linear-gradient(180deg,var(--hijau-600),var(--hijau-700));
  border-color:var(--hijau-700);color:#fff;
  box-shadow:0 1px 2px rgba(10,58,36,.28),inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-utama:hover{background:linear-gradient(180deg,var(--hijau-500),var(--hijau-600));border-color:var(--hijau-600);color:#fff}
.btn-hantu{background:transparent;border-color:transparent;color:var(--tinta-lemah);box-shadow:none}
.btn-hantu:hover{background:var(--hijau-100);color:var(--hijau-700)}
.btn-bahaya{background:linear-gradient(180deg,#e04141,#c81f1f);border-color:#b91c1c;color:#fff}
.btn-bahaya:hover{background:linear-gradient(180deg,#d33a3a,#b91c1c);border-color:#991b1b;color:#fff}
.btn-kecil{min-height:34px;padding:6px 12px;font-size:13px}
.btn-blok{width:100%}
/* butang di atas kad hijau (kad profil dashboard) — jangan guna latar putih */
.btn-atas-hijau{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;box-shadow:none}
.btn-atas-hijau:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* ---------- 5. Kad ---------- */
.kad{
  background:var(--putih);border:1px solid var(--garis);
  border-radius:var(--r-l);box-shadow:var(--bayang-s);
}
.kad-padan{padding:18px}
.kad-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.kad-tajuk{font-size:15px;font-weight:700;letter-spacing:-.005em}

/* kad statistik */
.grid-stat{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.kad-statistik{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);
  padding:16px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--bayang-s);
  transition:box-shadow var(--masa),border-color var(--masa),transform var(--masa);
}
.kad-statistik:hover{box-shadow:var(--bayang-m);border-color:var(--garis-tebal);transform:translateY(-1px)}
.kad-statistik-ikon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(12,38,24,.04);
}
.kad-statistik-nilai{font-size:27px;font-weight:800;line-height:1.08;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kad-statistik-label{font-size:13px;color:var(--tinta-lemah);font-weight:600;margin-top:3px}
.kad-statistik-huraian{font-size:12px;color:var(--tinta-samad);margin-top:2px}
.nada-hijau{background:linear-gradient(160deg,var(--hijau-100),#d8eee0);color:var(--hijau-700)}
.nada-biru{background:linear-gradient(160deg,var(--maklumat-bg),#dbe8fb);color:var(--maklumat)}
.nada-emas{background:linear-gradient(160deg,var(--emas-lemah),#f8e8c4);color:#a06f0b}
.nada-merah{background:linear-gradient(160deg,var(--bahaya-bg),#fbdede);color:var(--bahaya)}

/* ---------- 6. Badge status (AK-17: warna + ikon + teks) ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(12,38,24,.04);
}
.st-hadir{background:var(--berjaya-bg);color:#12803c}
.st-lewat{background:var(--amaran-bg);color:#a35c05}
.st-tidak{background:var(--bahaya-bg);color:#bf2020}
.st-cuti{background:var(--maklumat-bg);color:#1d54c4}
.st-kosong{background:var(--latar);color:var(--tinta-samad)}

/* ---------- 7. Avatar (AK-15: huruf awal, warna stabil) ---------- */
.avatar{
  width:40px;height:40px;border-radius:50%;color:#fff;font-weight:700;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;user-select:none;
}
.avatar-besar{width:64px;height:64px;font-size:26px}
.avatar-kecil{width:30px;height:30px;font-size:13px}

/* ---------- 8. Form ---------- */
.medan{margin-bottom:14px}
.medan label{display:block;font-size:13px;font-weight:600;color:var(--tinta-lemah);margin-bottom:6px}
.medan input,.medan select,.medan textarea{
  width:100%;border:1px solid var(--garis-tebal);border-radius:var(--r-m);
  padding:11px 13px;font-size:15px;background:var(--putih);color:var(--tinta);
  transition:border-color var(--masa),box-shadow var(--masa),background var(--masa);
}
.medan input:hover,.medan select:hover,.medan textarea:hover{border-color:#b9c6bd}
.medan input:focus,.medan select:focus,.medan textarea:focus{
  outline:none;border-color:var(--hijau-600);box-shadow:var(--fokus);background:#fdfefd;
}
.medan input::placeholder,.medan textarea::placeholder{color:var(--tinta-3)}
.medan input[type=email],.medan input[type=text],.medan input[type=password]{direction:ltr;text-align:start}
[dir=rtl] .medan input[type=email],[dir=rtl] .medan input[type=text],[dir=rtl] .medan input[type=password]{text-align:end}
.medan-ralat{color:var(--bahaya);font-size:12.5px;margin-top:4px}

/* ---------- 9. Layout: shell ---------- */
.petak{display:flex;min-height:100dvh}

/* sidebar */
.sisi{
  width:var(--lebar-sisi);
  background:linear-gradient(180deg,var(--hijau-950) 0%,var(--hijau-900) 62%,#0c4229 100%);
  color:#fff;
  position:fixed;inset-block:0;inset-inline-start:0;z-index:40;
  display:flex;flex-direction:column;
  padding:0 0 env(safe-area-inset-bottom,0);
  box-shadow:2px 0 18px rgba(6,43,25,.18);
}
.sisi-jenama{display:flex;align-items:center;gap:10px;padding:18px 18px 16px}
.logo-tanda{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(160deg,var(--hijau-500),var(--hijau-700));
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.22);
}
.logo-teks{display:flex;flex-direction:column;min-width:0}
.logo-nama{font-weight:800;font-size:14.5px;line-height:1.2;letter-spacing:-.01em}
.logo-sub{font-size:11px;color:rgba(255,255,255,.55);line-height:1.2}
.sisi-nav{flex:1;overflow-y:auto;padding:8px 12px}
.nav-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:14px 12px 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  border:none;background:transparent;color:rgba(255,255,255,.72);
  padding:10px 12px;border-radius:var(--r-m);font-size:14px;font-weight:600;
  text-align:start;min-height:42px;margin-bottom:2px;
  position:relative;
  transition:background var(--masa),color var(--masa);
}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.aktif{
  background:linear-gradient(90deg,rgba(34,160,95,.32),rgba(34,160,95,.12));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.nav-item.aktif::before{
  content:"";position:absolute;inset-inline-start:0;top:9px;bottom:9px;width:3px;
  border-radius:999px;background:var(--emas);
}
.nav-item .ik{opacity:.9}
.nav-item.aktif .ik{opacity:1}
.sisi-kaki{padding:14px 16px;border-top:1px solid rgba(255,255,255,.1)}
.kaki-user{display:flex;align-items:center;gap:10px}
.kaki-user .avatar{background:var(--hijau-600)}
.kaki-nama{font-size:13.5px;font-weight:700;color:#fff;line-height:1.2}
.kaki-peranan{font-size:11.5px;color:rgba(255,255,255,.55)}

/* utama */
.utama{flex:1;min-width:0;margin-inline-start:var(--lebar-sisi);display:flex;flex-direction:column}
.topbar{
  height:var(--tinggi-atas);
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--garis);
  display:flex;align-items:center;gap:12px;padding:0 20px;
  position:sticky;top:0;z-index:30;
}
.topbar-tajuk{font-size:16px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.topbar-tindakan{display:flex;align-items:center;gap:6px}
.chip-peranan{
  display:inline-flex;align-items:center;font-size:12px;font-weight:700;
  background:var(--hijau-100);color:var(--hijau-700);border-radius:999px;padding:4px 11px;
  white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(23,129,77,.12);
}
.kandungan{padding:24px 24px calc(24px + var(--tinggi-nav-bawah));max-width:1180px;width:100%;margin:0 auto}

/* bottom nav (mobile) */
.nav-bawah{
  display:none;position:fixed;inset-inline:0;bottom:0;z-index:40;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px);
  border-top:1px solid var(--garis);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom,0));
  box-shadow:0 -6px 20px rgba(12,38,24,.06);
}
.nav-bawah-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:none;background:transparent;color:var(--tinta-samad);
  font-size:11px;font-weight:600;padding:6px 2px;border-radius:10px;min-width:0;
  transition:color var(--masa),background var(--masa);
}
.nav-bawah-item .ik{width:22px;height:22px}
.nav-bawah-item.aktif{color:var(--hijau-700);background:var(--hijau-50)}
.nav-bawah-item span{
  font-size:10px;line-height:1.15;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}

/* ---------- 10. Login ---------- */
.login-latar{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:28px 16px calc(28px + env(safe-area-inset-bottom,0));
  background:
    radial-gradient(1200px 520px at 50% -14%,rgba(23,129,77,.16),transparent 68%),
    radial-gradient(700px 420px at 92% 108%,rgba(217,163,38,.12),transparent 62%),
    var(--latar);
}
.login-kotak{width:100%;max-width:520px}
.login-jenama{text-align:center;margin-bottom:22px}
.login-jenama .logo-tanda{width:58px;height:58px;border-radius:16px;margin:0 auto 12px}
.login-jenama h1{font-size:23px;font-weight:800;letter-spacing:-.02em}
.login-jenama .lemah{margin-top:4px}
.login-kad{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-xl);
  box-shadow:var(--bayang-l);padding:26px;
}
@media (max-width:420px){
  .login-kad{padding:20px}
  /* 4 pil mesti muat penuh pada 390px — jangan biar "Kakitang…" terpotong */
  .pemilih-item{font-size:11.5px;letter-spacing:-.01em;padding:8px 1px}
}
.login-peranan-tajuk{font-size:13px;font-weight:700;color:var(--tinta-lemah);margin:6px 0 12px;text-align:center}
/* pemilih peranan log masuk: SATU baris 4 pil (Guru | Pelajar | Waris | Kakitangan) */
.pemilih-peranan{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  background:var(--hijau-50);border:1px solid var(--garis);
  border-radius:999px;padding:4px;margin-bottom:18px;
}
.pemilih-item{
  border:none;background:transparent;color:var(--tinta-lemah);
  font-family:inherit;font-size:12.5px;font-weight:700;
  padding:8px 2px;border-radius:999px;cursor:pointer;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--masa),color var(--masa),box-shadow var(--masa);
}
.pemilih-item:hover{color:var(--hijau-700)}
.pemilih-item.aktif{
  background:linear-gradient(180deg,var(--hijau-600),var(--hijau-700));
  color:#fff;box-shadow:0 2px 8px rgba(18,99,60,.28);
}
.nota-medan{font-size:12px;color:var(--tinta-samad);margin:10px 0 0;text-align:center}

/* Tajuk + nota dalam kad log masuk */
.login-tajuk{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px}
.login-nota{font-size:13px;color:var(--tinta-lemah);margin:0 0 18px}

/* Medan kata laluan/PIN dengan togol Tunjuk–Sembunyi */
.medan-pw{position:relative}
.medan-pw input{padding-inline-end:86px}
.pw-togol{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--hijau-700);
  font-family:inherit;font-size:12.5px;font-weight:700;
  padding:8px 10px;border-radius:8px;cursor:pointer;
}
.pw-togol:hover{background:var(--hijau-50)}
.pw-togol:focus-visible{outline:2px solid var(--hijau-600);outline-offset:1px}
@media (max-width:420px){
  .login-tajuk{font-size:18px}
  .login-kad{padding:20px 18px}
}
.grid-peranan{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kad-peranan{
  display:flex;align-items:center;gap:12px;text-align:start;
  border:1.5px solid var(--garis);background:var(--putih);border-radius:var(--r-m);
  padding:13px 14px;box-shadow:var(--bayang-s);
  transition:border-color var(--masa),background var(--masa),transform var(--masa),box-shadow var(--masa);
}
.kad-peranan:hover{border-color:var(--hijau-600);background:var(--hijau-50);box-shadow:var(--bayang-m);transform:translateY(-1px)}
.kad-peranan:active{transform:translateY(1px)}
.kad-peranan .ikon-peranan{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(160deg,var(--hijau-100),#d8eee0);color:var(--hijau-700);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.kad-peranan-nama{font-size:14px;font-weight:700;color:var(--tinta);line-height:1.2}
.kad-peranan-huraian{font-size:12px;color:var(--tinta-lemah);margin-top:2px}
.pisah{display:flex;align-items:center;gap:12px;color:var(--tinta-samad);margin:20px 0;font-size:12.5px;font-weight:600}
.pisah::before,.pisah::after{content:"";flex:1;height:1px;background:var(--garis)}
.nota-demo{text-align:center;color:var(--tinta-samad);font-size:12.5px;margin-top:18px}
.togol-bahasa-atas{position:fixed;top:14px;inset-inline-end:14px;z-index:50}

/* ---------- 11. Empty state & placeholder ---------- */
.empty-state{
  text-align:center;padding:48px 20px;color:var(--tinta-lemah);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.empty-state .ikon-bulat{
  width:60px;height:60px;border-radius:50%;background:var(--hijau-100);color:var(--hijau-700);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
.empty-state h3{font-size:16px;color:var(--tinta);font-weight:700}
.empty-state p{max-width:340px;font-size:13.5px}

/* ---------- 12. Jadual, senarai, tapisan ---------- */
.jadual-bingkai{overflow-x:auto;border-radius:var(--r-l)}
table.jadual{width:100%;border-collapse:separate;border-spacing:0;background:var(--putih);min-width:560px}
.jadual thead th{background:var(--hijau-50)}
.jadual th{
  text-align:start;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-lemah);padding:11px 12px;border-bottom:1px solid var(--garis);white-space:nowrap;
}
.jadual td{padding:12px;border-bottom:1px solid var(--garis);font-size:14px;vertical-align:middle}
.jadual tbody tr:last-child td{border-bottom:none}
.jadual tbody tr{transition:background var(--masa)}
.jadual tbody tr:hover{background:var(--hijau-50)}
.sel-nama{display:flex;align-items:center;gap:10px}
.sel-nama .nama{font-weight:600}
/* telefon: jadual menatal dalam bingkai — beri nama ruang supaya tidak 4 baris */
@media (max-width:1023px){ .jadual .sel-nama{min-width:170px} }
.tapisan{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.tapisan .cari{flex:1;min-width:180px}
.tapisan input,.tapisan select{
  border:1px solid var(--garis-tebal);border-radius:var(--r-m);padding:10px 13px;font-size:14px;
  background:var(--putih);color:var(--tinta);
  transition:border-color var(--masa),box-shadow var(--masa);
}
.tapisan input:hover,.tapisan select:hover{border-color:#b9c6bd}
.tapisan input{width:100%}
.tapisan input:focus,.tapisan select:focus{outline:none;border-color:var(--hijau-600);box-shadow:var(--fokus)}
.tapisan input::placeholder{color:var(--tinta-3)}
.pengumuman-item{padding:12px 0;border-bottom:1px solid var(--garis)}
.pengumuman-item:last-child{border-bottom:none}
.pengumuman-tajuk{font-weight:600;font-size:14px}
.pautan-kecil{font-size:13px;font-weight:600;color:var(--hijau-700);white-space:nowrap}
.ringkasan-status{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* kehadiran: pilih kitab + tick status */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:1px solid var(--garis-tebal);color:var(--tinta);background:var(--putih);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;min-height:36px;
  cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(12,38,24,.04);
  transition:background var(--masa),border-color var(--masa),color var(--masa),box-shadow var(--masa);
}
.chip:hover{border-color:var(--hijau-600);background:var(--hijau-50)}
.chip.pilih{background:linear-gradient(180deg,var(--hijau-600),var(--hijau-700));border-color:var(--hijau-700);color:#fff;box-shadow:0 2px 8px rgba(18,99,60,.22)}
.info-subjek{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--tinta-lemah);margin-top:12px}
.info-subjek strong{color:var(--tinta);font-weight:600}
.baris-kehadiran{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--garis);flex-wrap:wrap;
}
.baris-kehadiran:last-child{border-bottom:none}
.status-pilihan{display:flex;gap:5px;flex-wrap:wrap}
.btn-status{
  display:inline-flex;align-items:center;gap:4px;
  border:1.5px solid var(--garis-tebal);background:var(--putih);color:var(--tinta-lemah);
  border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;min-height:32px;
  cursor:pointer;white-space:nowrap;transition:all .1s;
}
.btn-status:hover{border-color:var(--hijau-600)}
.btn-status.aktif{border-color:transparent;color:#fff}
.btn-status.st-hadir{color:var(--berjaya)}
.btn-status.st-hadir.aktif{background:var(--berjaya);border-color:var(--berjaya);color:#fff}
.btn-status.st-lewat{color:var(--amaran)}
.btn-status.st-lewat.aktif{background:var(--amaran);border-color:var(--amaran);color:#fff}
.btn-status.st-tidak{color:var(--bahaya)}
.btn-status.st-tidak.aktif{background:var(--bahaya);border-color:var(--bahaya);color:#fff}
.btn-status.st-cuti{color:var(--maklumat)}
.btn-status.st-cuti.aktif{background:var(--maklumat);border-color:var(--maklumat);color:#fff}
.sesi-baris{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.medan input[type=date],.medan input[type=time]{direction:ltr}

/* yuran & maklumat */
.jumlah-besar{font-size:30px;font-weight:800;line-height:1.1}
.angka{font-weight:700}
.kad-tertunggak{background:var(--bahaya-bg);border:1px solid #f3c6c6}
.kad-tertunggak .jumlah-besar{color:var(--bahaya)}
.baris-info{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--garis)}
.baris-info:last-child{border-bottom:none}

/* sejarah kehadiran (mod backend): ringkasan bulan + senarai sesi —
   senarai menegak, bukan jadual lebar (mudah dibaca pada telefon) */
.ringkasan-bulan{display:flex;align-items:baseline;gap:5px;font-size:13.5px;color:var(--tinta-lemah);margin:2px 0 0}
.ringkasan-bulan strong{color:var(--tinta);font-weight:800;font-size:16px}
.senarai-sesi{display:flex;flex-direction:column}
.baris-sesi{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  text-align:start;background:none;border:none;border-bottom:1px solid var(--garis);
  padding:13px 2px;font:inherit;color:var(--tinta);cursor:pointer;
}
.baris-sesi:last-child{border-bottom:none}
.baris-sesi:hover{background:var(--hijau-50)}
.baris-sesi:active{background:var(--hijau-100)}
.baris-sesi-teks{display:flex;flex-direction:column;gap:3px;min-width:0}
.baris-sesi-tarikh{font-weight:700;font-size:14.5px}
.baris-sesi-ringkas{font-size:12.5px;color:var(--tinta-lemah)}
.grid-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.kad-menu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);
  padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;color:var(--tinta);box-shadow:var(--bayang-s);transition:border-color .12s;
}
.kad-menu:hover{border-color:var(--hijau-600)}
.kad-menu .ik{color:var(--hijau-700)}
.kad-menu .label{font-size:13px;font-weight:600;line-height:1.3}

/* ---------- 13. Responsive ---------- */
/* kolum Tindakan sentiasa kelihatan pada skrin kecil: lajur terakhir "melekat"
   di kanan sementara jadual boleh ditatal ke kiri/kanan. Tanpa ini butang
   Tambah/Ubah/Padam tersembunyi di luar skrin pada telefon. */
@media (max-width:1023px){
  .jadual th:last-child,.jadual td:last-child{
    position:sticky;right:0;background:var(--putih);
    box-shadow:-10px 0 10px -10px rgba(0,0,0,.28);
  }
  .jadual th:last-child{z-index:2}
}

@media (max-width:1023px){
  .sembunyi-mobile{display:none}
  .sisi{display:none}
  .utama{margin-inline-start:0}
  .nav-bawah{display:flex}
  .topbar{padding:0 14px}
  .kandungan{padding:18px 14px calc(18px + var(--tinggi-nav-bawah))}
  .grid-peranan{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .grid-peranan{grid-template-columns:1fr}
  /* dua lajur tetapi boleh mengecil — elak limpahan bila angka panjang (RM2400.00) */
  .grid-stat{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kad-statistik{padding:12px;gap:10px}
  .kad-statistik-ikon{width:34px;height:34px}
  .kad-statistik-nilai{font-size:20px;overflow-wrap:anywhere}
  .kad-statistik-label{font-size:11.5px}
}
@media (min-width:1024px){
  .nav-bawah{display:none}
}

/* ---------- Bar kemajuan (laporan) ---------- */
.bar{height:8px;background:var(--latar);border-radius:999px;overflow:hidden}
.bar-isi{height:100%;background:var(--hijau-600);border-radius:999px;transition:width .2s}

/* ---------- Modal borang (tambah / ubah) ---------- */
.modal-latar{display:none}
.modal-latar.buka{
  display:flex;position:fixed;inset:0;z-index:60;padding:20px;
  background:rgba(23,35,26,.55);align-items:flex-start;justify-content:center;
  overflow-y:auto;
}
.modal-kotak{
  background:var(--putih);border-radius:var(--r-l);width:100%;max-width:640px;
  margin:24px auto;box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.modal-kepala{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--garis);
}
.modal-tajuk{font-size:17px;font-weight:800}
.modal-badan{padding:18px}
.modal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px}
.modal-subtajuk{
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-samad);margin:10px 0 10px;padding-top:12px;border-top:1px solid var(--garis);
}
.modal-ralat{color:var(--bahaya);font-size:13px;font-weight:600;min-height:18px;margin-top:4px}
.modal-tindakan{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.pilih-kotak{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.pilih-satu{
  display:flex;align-items:center;gap:8px;font-size:13.5px;
  border:1px solid var(--garis-tebal);border-radius:var(--r-m);padding:8px 10px;cursor:pointer;
}
.pilih-satu:hover{border-color:var(--hijau-600);background:var(--hijau-50)}
.pilih-satu input{width:16px;height:16px;accent-color:var(--hijau-700);flex-shrink:0}
.btn-ubah{min-height:30px;padding:4px 10px;font-size:12.5px}
.sisi-tindakan{display:flex;gap:8px;margin-top:10px}
@media (max-width:700px){
  .modal-kotak{margin:0 auto}
  .modal-tindakan{flex-direction:column-reverse}
  .modal-tindakan .btn{width:100%}
}

/* ---------- Tindakan baris jadual (Ubah / Padam) ---------- */
.tindakan-baris{display:flex;gap:6px;align-items:center}
.btn-bahaya-garis{color:var(--bahaya);border-color:var(--garis-tebal)}
.btn-bahaya-garis:hover{background:var(--bahaya-bg);border-color:var(--bahaya);color:var(--bahaya)}

/* ---------- Textarea dalam medan borang ---------- */
.medan textarea{
  width:100%;border:1px solid var(--garis-tebal);border-radius:var(--r-m);
  padding:10px 12px;font-size:14px;font-family:var(--font);resize:vertical;min-height:96px;
  background:var(--putih);color:var(--tinta);
}
.medan textarea:focus{outline:none;border-color:var(--hijau-600);box-shadow:0 0 0 3px var(--hijau-100)}

/* ---------- Baris masuk markah ---------- */
.baris-markah{
  display:grid;grid-template-columns:1fr 88px 56px;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--garis);
}
.baris-markah:last-child{border-bottom:none}
.input-markah{
  width:88px;border:1px solid var(--garis-tebal);border-radius:var(--r-m);
  padding:8px 10px;font-size:14px;font-weight:700;text-align:center;font-family:var(--font);
}
.input-markah:focus{outline:none;border-color:var(--hijau-600);box-shadow:0 0 0 3px var(--hijau-100)}
@media (max-width:520px){
  .baris-markah{grid-template-columns:1fr 78px 44px;gap:8px}
  .input-markah{width:78px}
}

/* ---------- Baris jawi (nama Arab di bawah nama rumi) ---------- */
.nama-jawi{
  font-size:12px;line-height:1.6;color:var(--tinta-samad);
  direction:rtl;text-align:start;unicode-bidi:plaintext;
  font-family:"Noto Naskh Arabic","Traditional Arabic","Segoe UI",serif;
  margin-top:1px;
}
@media (min-width:1024px){ .nama-jawi{font-size:13px} }

/* ---------- Panel "Lagi" (bottom nav overflow) ---------- */
.menu-lagi{display:flex;flex-direction:column;gap:8px}
.menu-lagi-item{
  display:flex;align-items:center;gap:10px;width:100%;
  border:1px solid var(--garis-tebal);border-radius:var(--r-m);
  padding:12px 14px;font-size:14px;font-weight:600;background:var(--putih);
  color:var(--tinta);font-family:var(--font);text-align:start;cursor:pointer;
}
.menu-lagi-item:hover{background:var(--hijau-50);border-color:var(--hijau-600)}
.menu-lagi-item .ik{color:var(--hijau-700)}

/* ---------- Kehadiran v2: baris + segmen status ---------- */
.baris-khdr{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border:1px solid var(--garis);border-inline-start:4px solid transparent;
  border-radius:var(--r-m);margin-bottom:8px;background:var(--putih);cursor:pointer;
  transition:background .12s,border-color .12s;
}
.baris-khdr:hover{background:var(--hijau-50)}
.baris-khdr.fokus{border-color:var(--hijau-600);box-shadow:0 0 0 2px var(--hijau-100)}
.seg-status{display:flex;gap:6px;flex-shrink:0}
/* sebab (taip bebas) untuk lewat / tidak hadir — 5/11/2026 */
.sebab-baris{
  margin:-4px 0 12px;padding:10px 12px;border-inline-start:3px solid var(--emas-600);
  background:var(--emas-50,#fffbeb);border-radius:var(--r-m);
}
.sebab-baris[data-kod] input{
  width:100%;min-height:44px;padding:9px 11px;font-size:14px;font-family:var(--font);
  border:1px solid var(--garis-tebal);border-radius:var(--r-m);background:var(--putih);color:var(--tinta);
}
.sebab-label{display:block;font-size:12px;font-weight:700;margin-bottom:5px;color:var(--tinta-2)}
.sebab-label span{font-weight:500;opacity:.75}
.sebab-baris input::placeholder{color:var(--tinta-3,#9aa0a6)}
.sebab-baris input:focus{outline:none;border-color:var(--hijau-600);box-shadow:0 0 0 2px var(--hijau-100)}
.seg-btn{
  display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:6px 10px;
  border:1px solid var(--garis-tebal);border-radius:var(--r-m);background:var(--putih);
  color:var(--tinta-lemah);font-size:12.5px;font-weight:600;font-family:var(--font);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.seg-btn:hover{background:var(--hijau-50);border-color:var(--hijau-600)}
.seg-btn.aktif{color:#fff}
.seg-btn.st-hadir.aktif{background:var(--berjaya);border-color:var(--berjaya)}
.seg-btn.st-lewat.aktif{background:var(--amaran);border-color:var(--amaran)}
.seg-btn.st-tidak.aktif{background:var(--bahaya);border-color:var(--bahaya)}
.seg-btn.st-cuti.aktif{background:var(--maklumat);border-color:var(--maklumat)}

/* ringkasan progres */
.progress-kehadiran{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.progress-teks{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tinta-lemah);white-space:nowrap}

/* chip kiraan + titik warna */
.kira-chip{gap:6px}
.kira-chip .titik{width:8px;height:8px;border-radius:50%;display:inline-block}
.titik.st-hadir{background:var(--berjaya)}
.titik.st-lewat{background:var(--amaran)}
.titik.st-tidak{background:var(--bahaya)}
.titik.st-cuti{background:var(--maklumat)}

/* bar simpan melekat */
.bar-simpan{
  position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0 4px;margin-top:14px;background:linear-gradient(to top,var(--putih) 82%,rgba(255,255,255,0));
  border-top:1px solid var(--garis);z-index:5;
}

@media (max-width:640px){
  .baris-khdr{flex-direction:column;align-items:stretch;gap:8px}
  .seg-status{display:grid;grid-template-columns:repeat(3,1fr)}
  .seg-btn{justify-content:center;padding:8px 4px}
  .seg-btn span{display:none}
  .seg-btn{min-height:44px}
  .bar-simpan{flex-direction:column;align-items:stretch;gap:8px}
  .bar-simpan .tindakan-baris{justify-content:flex-end}
  .progress-kehadiran{flex-direction:column;align-items:flex-start;gap:6px}
  .progress-kehadiran .bar{width:100%}
}

/* kehadiran v2: susunan pada telefon + bar simpan jangan terlindung bottom nav */
@media (max-width:640px){
  .kepala-kehadiran{flex-direction:column;align-items:stretch;gap:10px}
  .kepala-kehadiran .tindakan-baris{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .kepala-kehadiran .btn{justify-content:center;min-height:42px}
  .bar-simpan{bottom:var(--tinggi-nav-bawah);background:var(--putih);padding:10px 0}
  .bar-simpan .tindakan-baris{display:grid;grid-template-columns:1fr 1.6fr;gap:8px}
  .bar-simpan .btn{justify-content:center;min-height:44px}
}

/* utiliti paparan ikut saiz skrin */
.hanya-mobile{display:none}
@media (max-width:640px){
  .hanya-mobile{display:inline}
  .sembunyi-mobile{display:none}
}

/* =========================================================
   TAMBAHAN 04/11/2026 — modul pendaftaran + kehadiran v3
   (badge draf, notis, borang berbahagian, cetak laporan)
   ========================================================= */

/* ---------- 1. Badge & notis ---------- */
.badge.st-draf{background:var(--amaran-bg);color:#9A5B00}
.badge.st-draf::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amaran);display:inline-block;margin-inline-end:5px}

.notis-amaran,.notis-berjaya{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border-radius:var(--r-m);padding:11px 14px;font-size:13.5px;line-height:1.45;
}
.notis-amaran{background:var(--amaran-bg);border:1px solid #F3D9AE;color:#7A4700}
.notis-berjaya{background:var(--berjaya-bg);border:1px solid #BFE6CB;color:#14532D}
.notis-amaran svg,.notis-berjaya svg{flex:0 0 auto}

/* ---------- 2. Kepala halaman dengan butang ---------- */
.kepala-baris{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.kepala-baris .tindakan-baris{align-items:center}

/* ---------- 3. Borang berbahagian ---------- */
.borang-seksyen{
  border:1px solid var(--garis);border-radius:var(--r-m);
  padding:14px;margin-bottom:14px;background:var(--putih);
}
.borang-seksyen-tajuk{
  display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:14px;color:var(--hijau-800);
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed var(--garis-tebal);
}
.borang-nombor{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--hijau-100);color:var(--hijau-700);
  font-size:12px;font-weight:700;flex:0 0 auto;
}
.tanda-wajib{color:var(--bahaya);font-weight:700}
.chip-pengesahan{
  display:inline-block;font-size:10.5px;font-weight:600;
  background:var(--emas-lemah);color:#8A6100;
  border-radius:999px;padding:2px 8px;letter-spacing:.2px;
}

/* ---------- 4. Skrin berjaya ---------- */
.kad-berjaya{text-align:center;padding:6px 2px 2px}
.kad-berjaya h3{margin:10px 0 4px;font-size:17px;color:var(--hijau-800)}
.ikon-berjaya{
  width:54px;height:54px;border-radius:50%;margin:0 auto;
  background:var(--berjaya-bg);color:var(--berjaya);
  display:flex;align-items:center;justify-content:center;
}
.kad-berjaya .tindakan-borang{justify-content:center;flex-wrap:wrap;margin-top:14px}
/* kod log masuk pelajar (kad pengesahan pejabat) — jelas dibaca & disalin */
.kod-log-masuk{
  display:inline-block;margin:6px 0 10px;padding:10px 18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:26px;font-weight:800;letter-spacing:4px;color:var(--hijau-800);
  background:var(--hijau-50);border:1px dashed var(--hijau-600);border-radius:var(--r-m);
}

/* ---------- 5. Bar simpan 3 butang (telefon) ---------- */
@media (max-width:640px){
  .bar-simpan.tiga .tindakan-baris{grid-template-columns:auto 1fr 1.4fr}
  .bar-simpan.tiga .btn{padding-inline:8px;font-size:13px}
}

/* ---------- 6. Cetak laporan ---------- */
.cetak-kepala{display:none}
@media print{
  .sisi,.topbar,.nav-bawah,.bar-simpan,.tapisan,.tindakan-baris,
  .kepala-halaman .btn,.cetak-hilang,button{display:none !important}
  body{background:#fff;font-size:11.5px}
  .petak{display:block}
  .utama{margin:0;padding:0}
  .kandungan{padding:0}
  .cetak-kepala{display:block;margin:0 0 14px;border-bottom:2px solid var(--hijau-700);padding-bottom:8px}
  .cetak-kepala h2{font-size:16px;color:var(--hijau-800);margin:0 0 4px}
  .cetak-kepala p{margin:0;font-size:11px}
  .kad{border:1px solid #ccc !important;box-shadow:none !important;break-inside:avoid}
  .jadual{font-size:10.5px}
  .jadual th,.jadual td{padding:6px 6px}
  .grid-stat{grid-template-columns:repeat(3,1fr);gap:8px}
  @page{margin:14mm}
}

/* ---------- Label demo (prototaip, bukan sistem hidup) ---------- */
.chip-demo{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:var(--emas-lemah);color:#8A5A00;border:1px solid var(--emas);
  font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
}
.chip-demo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--emas)}
@media (max-width:640px){ .chip-demo{padding:3px 8px;font-size:10.5px} }

/* notis kecil: skrin ini masih data contoh (mod backend) */
.nota-contoh{
  margin:0 0 12px;padding:9px 12px;border-radius:var(--r-m);font-size:12.5px;
  background:#fff8e1;border:1px solid #ffe0a3;color:#6b4d00;
}

/* Sejarah kehadiran: senarai tarikh → kelas pada hari itu */
.blok-tarikh{border-bottom:1px solid var(--garis);}
.blok-tarikh:last-child{border-bottom:none;}
.baris-tarikh{font-weight:700;}
.dalam-tarikh{padding:2px 0 8px 12px;border-inline-start:2px solid var(--hijau-100);margin:2px 0 8px 6px;}
.dalam-tarikh .baris-sesi{padding:8px 4px;}

/* =========================================================
   PENYEMPURNAAN 07/11/2026 — sentuhan akhir design system
   (tiada kelas dinamakan semula: JS views.js bergantung pada
   setiap selector di atas; seksyen ini hanya menambah)
   ========================================================= */

/* fokus papan kekunci konsisten untuk semua kawalan tersuai */
.chip:focus-visible,.seg-btn:focus-visible,.btn-status:focus-visible,
.kad-peranan:focus-visible,.pemilih-item:focus-visible,.nav-item:focus-visible,
.nav-bawah-item:focus-visible,.baris-sesi:focus-visible,
.kad-menu:focus-visible,.menu-lagi-item:focus-visible,.baris-khdr:focus-visible{
  outline:none;box-shadow:var(--fokus);
}

/* angka kewangan/markah sejajar rapi */
.angka,.jumlah-besar,.ringkasan-bulan strong,.kad-statistik-nilai{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* ikon bulat empty-state + kad menu: sedikit kedalaman */
.empty-state .ikon-bulat{
  background:linear-gradient(160deg,var(--hijau-100),#d6ece0);
  box-shadow:inset 0 0 0 1px rgba(23,129,77,.10);
}
.kad-menu{transition:border-color var(--masa),box-shadow var(--masa),transform var(--masa)}
.kad-menu:hover{box-shadow:var(--bayang-m);transform:translateY(-1px)}
.kad-menu:active{transform:translateY(0)}
.kad-menu .ik{transition:transform var(--masa)}
.kad-menu:hover .ik{transform:scale(1.06)}

/* modal: latar kabur, kotak lebih lembut */
.modal-latar.buka{background:rgba(9,32,20,.52);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-kotak{
  box-shadow:0 24px 60px rgba(6,43,25,.28),0 2px 8px rgba(6,43,25,.12);
  border:1px solid rgba(255,255,255,.6);
}
.modal-kepala{border-radius:var(--r-l) var(--r-l) 0 0;background:linear-gradient(180deg,#fbfdfb,var(--putih))}

/* bar kemajuan: isi bergradien + label */
.bar{background:#e9eee9;box-shadow:inset 0 1px 2px rgba(12,38,24,.06)}
.bar-isi{background:linear-gradient(90deg,var(--hijau-600),var(--hijau-500))}

/* notis: ikon sejajar, warna lebih lembut */
.notis-amaran{border-color:var(--amaran-garis)}
.notis-berjaya{border-color:var(--berjaya-garis)}
.kad-tertunggak{border-color:var(--bahaya-garis);background:linear-gradient(180deg,var(--bahaya-bg),#fdf4f4)}

/* jadual: sel tindakan melekat kekal legap atas baris zebra/hover */
@media (max-width:1023px){
  .jadual tbody tr:hover td:last-child{background:var(--hijau-50)}
}

/* skrol sisi dalam sidebar lebih halus di atas latar gelap */
.sisi *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);background-clip:content-box}

/* telefon: ruang bawah tambahan supaya kandungan terakhir tidak ditutup nav */
@media (max-width:1023px){
  .kandungan{padding-bottom:calc(30px + var(--tinggi-nav-bawah))}
}

/* hormati pilihan pengguna: kurang gerakan */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .kad-statistik:hover,.kad-peranan:hover,.kad-menu:hover{transform:none}
}

/* cetak: buang bayang/gradien supaya jimat dakwat */
@media print{
  body{background:#fff !important;background-image:none !important}
  .kad,.kad-statistik,.kad-menu{box-shadow:none !important}
  .badge{box-shadow:none !important;border:1px solid #ddd}
}

/* =========================================================
   SKRIN #/urus-ahli (Urus Pelajar) — 09/11/2026
   Baris ahli & baris calon guna .baris-sesi yang sama dengan
   senarai sejarah; di sini teksnya 3 baris (nama + jawi + kod),
   jadi hanya bekas ini yang ditapis ketat — jangan sentuh
   .baris-sesi lain (sejarah kehadiran, kelas lain).
   ========================================================= */
#senarai-ahli .baris-sesi,
#senarai-calon-ahli .baris-sesi{
  align-items:center;
  gap:14px;
  padding:12px 10px;
  border-inline-start:3px solid transparent;
  transition:background var(--masa),border-color var(--masa);
}
#senarai-ahli .baris-sesi{border-inline-start-color:var(--hijau-600)}
#senarai-calon-ahli .baris-sesi{border-inline-start-color:var(--emas)}
#senarai-ahli .baris-sesi:hover,
#senarai-calon-ahli .baris-sesi:hover{background:var(--hijau-50)}

/* blok teks: nama padat, jawi sejajar kiri dengan nama, kod sebagai nota */
#senarai-ahli .baris-sesi-teks,
#senarai-calon-ahli .baris-sesi-teks{flex:1 1 auto;gap:2px}
#senarai-ahli .baris-sesi-tarikh,
#senarai-calon-ahli .baris-sesi-tarikh{font-size:13.5px;line-height:1.35;letter-spacing:.005em}
#senarai-ahli .nama-jawi,
#senarai-calon-ahli .nama-jawi{text-align:left;font-size:12.5px;line-height:1.5}
#senarai-ahli .baris-sesi-ringkas,
#senarai-calon-ahli .baris-sesi-ringkas{font-size:11.5px;color:var(--tinta-3);letter-spacing:.015em}

/* butang tindakan: padat, tidak menguasai baris */
#senarai-ahli .baris-sesi > .btn,
#senarai-calon-ahli .baris-sesi > .btn{
  flex:0 0 auto;min-height:34px;padding:6px 12px;font-size:12.5px;
}

@media (max-width:420px){
  #senarai-ahli .baris-sesi,
  #senarai-calon-ahli .baris-sesi{gap:10px;padding:11px 8px}
  #senarai-ahli .baris-sesi-tarikh,
  #senarai-calon-ahli .baris-sesi-tarikh{font-size:12.5px}
  #senarai-ahli .baris-sesi > .btn,
  #senarai-calon-ahli .baris-sesi > .btn{padding:6px 9px;font-size:12px}
}

/* desktop: senarai calon boleh panjang (14+ pelajar) — hadkan tinggi,
   kekalkan carian di atas supaya tidak perlu menatal seluruh halaman */
@media (min-width:1024px){
  #senarai-calon-ahli{max-height:min(56vh,520px);overflow-y:auto;padding-inline-end:6px}
}

/* =========================================================
   TAMBAHAN 07/11/2026 — skrin Tetapan (#/tetapan)
   Satu lajur, kad bertindan, suis notifikasi.
   ========================================================= */
.tetapan-kad{margin-bottom:16px;max-width:640px}
.tetapan-kepala{display:flex;align-items:center;gap:14px;margin-top:12px}
.tetapan-nama{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px;overflow-wrap:anywhere}
.tetapan-nilai{font-weight:600;overflow-wrap:anywhere;text-align:end}
.tetapan-borang{margin-top:14px}
.tetapan-borang .medan:last-of-type{margin-bottom:16px}

/* pilihan bahasa: dua butang sebaris */
.pilihan-bahasa{display:flex;gap:10px;margin-top:10px}
.pilihan-bahasa .btn{flex:1;justify-content:center;min-height:44px}

/* suis notifikasi */
.suis-baris{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.suis-label{font-size:14px;font-weight:600;line-height:1.35}
.suis{
  width:50px;height:30px;border-radius:999px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1px solid var(--garis-tebal);background:#e6ebe7;position:relative;
  transition:background var(--masa),border-color var(--masa);
}
.suis:focus-visible{outline:none;box-shadow:var(--fokus)}
.suis-titik{
  position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(12,38,24,.28);
  transition:transform var(--masa);
}
.suis-hidup{background:var(--hijau-600);border-color:var(--hijau-700)}
.suis-hidup .suis-titik{transform:translateX(20px)}
[dir=rtl] .suis-hidup .suis-titik{transform:translateX(-20px)}

/* butang log keluar: merah lembut, satu baris penuh di bawah kad */
.btn-bahaya-garis{background:var(--bahaya-bg);border-color:var(--bahaya-garis);color:var(--bahaya)}
.btn-bahaya-garis:hover{background:#fbdcdc;border-color:var(--bahaya);color:#b91c1c}
@media (max-width:420px){
  .tetapan-nama{font-size:16px}
  .pilihan-bahasa .btn{font-size:13px}
}

/* =========================================================
   TAMBAHAN 07/11/2026 — Rekod Kehadiran Bulanan
   #/kehadiran-bulanan (jadual) + #/kehadiran-bulanan/<id> (profil)
   Reka bentuk padat: satu jadual sempit + kalendar 7 lajur.
   ========================================================= */

/* penapis bulan / carian */
.segmen{display:flex;flex-wrap:wrap;gap:8px}
.seg-btn.seg-aktif{background:var(--hijau-600);border-color:var(--hijau-700);color:#fff}
.ringkas-bulanan{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--garis);
  font-size:13.5px;font-weight:700;color:var(--tinta);letter-spacing:-.005em;
}

/* jadual bulanan: lajur angka sempit supaya muat pada telefon 390px */
table.jadual.jadual-bulanan{min-width:0;table-layout:auto}
.jadual-bulanan th,.jadual-bulanan td{padding:9px 6px;font-size:12.5px}
.jadual-bulanan th{
  font-size:10.5px;line-height:1.15;letter-spacing:.02em;text-align:center;
  white-space:normal;padding:8px 4px;
}
.jadual-bulanan th:first-child,.jadual-bulanan td:first-child{text-align:start;padding-inline-start:10px}
.jadual-bulanan td.num{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.jadual-bulanan tbody tr{cursor:pointer}
.jadual-bulanan tbody tr.bawah-ambang{background:#fffdf8}
.jadual-bulanan tbody tr.bawah-ambang:hover{background:var(--amaran-bg)}
.sel-nama-bulanan{max-width:130px}
.nama-bulanan{font-weight:700;font-size:12.5px;line-height:1.25;overflow-wrap:anywhere}
.jawi-bulanan{display:inline-block;font-size:11.5px;color:var(--tinta-lemah);line-height:1.6}
.kod-bulanan{font-size:11px;color:var(--tinta-samad);font-variant-numeric:tabular-nums;white-space:nowrap}
.lencana-perhatian{
  display:inline-flex;align-items:center;margin-top:4px;padding:1px 7px;
  background:var(--amaran-bg);border:1px solid var(--amaran-garis);color:#a35c05;
  font-size:10px;font-weight:700;border-radius:999px;white-space:nowrap;
}
.peratus-sel{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.peratus-sel.bawah{color:#b45309}

/* kepala profil + angka besar */
.profil-bulanan{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.profil-nama{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.2;overflow-wrap:anywhere}
.peratus-besar{
  margin-top:16px;font-size:42px;font-weight:800;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--hijau-700);
}
.peratus-besar.bawah{color:#b45309}
.peratus-label{font-size:12.5px;font-weight:600;color:var(--tinta-lemah);margin-top:6px}
.butiran-besar{font-size:12.5px;color:var(--tinta-lemah);margin-top:6px;line-height:1.6}

/* kalendar bulanan — Isnin..Ahad */
.kalendar-kepala{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;max-width:560px}
.kalendar-kepala span{
  text-align:center;font-size:10px;font-weight:700;color:var(--tinta-samad);
  text-transform:uppercase;letter-spacing:.02em;
}
.kalendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:560px}
.hari-kosong-sel{min-height:40px}
.hari-sel{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:40px;padding:4px 2px;font-family:var(--font);font-size:12px;font-weight:700;
  border:1px solid var(--garis);border-radius:9px;background:var(--putih);color:var(--tinta);
  cursor:pointer;transition:transform .1s,box-shadow .1s;
}
.hari-sel:disabled{cursor:default}
.hari-sel:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--bayang-s)}
.hari-sel.hari-tidak{background:var(--bahaya-bg);border-color:var(--bahaya-garis);color:#b91c1c}
.hari-sel.hari-lewat{background:var(--amaran-bg);border-color:var(--amaran-garis);color:#a35c05}
.hari-sel.hari-hadir{background:var(--berjaya-bg);border-color:var(--berjaya-garis);color:#12803c}
.hari-sel.hari-cuti{background:var(--maklumat-bg);border-color:var(--maklumat-garis);color:#1d54c4}
.hari-sel.hari-lapang{background:var(--latar);border-color:var(--garis);color:var(--tinta-3);border-style:dashed}
.hari-sel.aktif{box-shadow:0 0 0 2px var(--hijau-600) inset;border-color:var(--hijau-700)}
.hari-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.8}
.hari-legenda{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;font-size:11px;color:var(--tinta-lemah)}
.legenda-item{display:inline-flex;align-items:center;gap:5px}
.legenda-swat{width:10px;height:10px;border-radius:3px;border:1px solid var(--garis-tebal)}
.legenda-swat.hari-tidak{background:var(--bahaya-bg);border-color:var(--bahaya-garis)}
.legenda-swat.hari-lewat{background:var(--amaran-bg);border-color:var(--amaran-garis)}
.legenda-swat.hari-hadir{background:var(--berjaya-bg);border-color:var(--berjaya-garis)}
.legenda-swat.hari-cuti{background:var(--maklumat-bg);border-color:var(--maklumat-garis)}
.legenda-swat.hari-lapang{background:var(--latar);border-style:dashed}

/* panel sesi hari yang ditekan */
.panel-sesi-bulanan{margin-top:14px;padding-top:12px;border-top:1px solid var(--garis)}

@media (max-width:1023px){
  /* jadual bulanan muat 8 lajur pada telefon: jangan "lekat" lajur akhir */
  .jadual-bulanan th:last-child,.jadual-bulanan td:last-child{
    position:static;box-shadow:none;
  }
}
@media (max-width:420px){
  .jadual-bulanan th,.jadual-bulanan td{padding:7px 2px;font-size:11px}
  .jadual-bulanan th{font-size:9px}
  .jadual-bulanan th:first-child,.jadual-bulanan td:first-child{padding-inline-start:7px}
  .nama-bulanan{font-size:12px}
  .jawi-bulanan{font-size:10.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kod-bulanan{font-size:10px}
  .lencana-perhatian{font-size:9px;padding:1px 5px}
  .sel-nama-bulanan{max-width:none}
  .peratus-besar{font-size:36px;margin-top:14px}
  .hari-sel{min-height:36px;font-size:11.5px;border-radius:8px}
  .kalendar-grid,.kalendar-kepala{gap:5px}
}

/* ===== Kehadiran guru (AK-33/35/36, 8/11/2026) =====
   Satu butang besar di dashboard; senarai kitab sebagai pintu masuk menu
   Kehadiran. Tiada kad angka di kedua-dua skrin ini. */
.butang-besar{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:84px;padding:20px;font-size:19px;font-weight:700;
  border-radius:var(--r-l);letter-spacing:.2px;
}
.senarai-kitab{display:flex;flex-direction:column;gap:10px}
.baris-kitab{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  min-height:64px;padding:16px 18px;background:var(--putih);
  border:1px solid var(--garis);border-radius:var(--r-m);color:var(--tinta);
  box-shadow:var(--bayang-s);
}
.baris-kitab:hover{border-color:var(--garis-tebal);box-shadow:var(--bayang-m)}
.baris-kitab .nama{font-size:16px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.baris-kitab .badge{flex:none}

/* ===== Log masuk Google (ID-11, 9/11/2026) =====
   Butang Google mesti jelas BUKAN sama dengan butang utama hijau; ia
   dipaparkan lumpuh (dengan nota sebab) bila kredensial belum diisi. */
.pemisah-atau{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:var(--lemah,#6b7280);font-size:12px}
.pemisah-atau::before,.pemisah-atau::after{content:"";flex:1;height:1px;background:var(--garis)}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:#1f2937;border:1px solid var(--garis-tebal);
  font-weight:600;min-height:46px;text-decoration:none;
}
.btn-google:hover{background:#f8fafc;border-color:#c7d2cb;color:#1f2937}
.btn-google .g-ikon{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#f1f5f9;
  font-weight:800;font-size:13px;color:#4285F4;
}
.btn-lumpuh{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}

/* ---------- AK-37: pilih sesi (tarikh + sesi + masa) pada skrin guru ---------- */
.pilih-sesi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.pilih-sesi .medan{margin-bottom:0}
.pilih-sesi .medan:first-child{grid-column:1 / -1}
.pilih-sesi input,.pilih-sesi select{min-height:44px}
@media (min-width:640px){
  .pilih-sesi{grid-template-columns:repeat(3,1fr)}
  .pilih-sesi .medan:first-child{grid-column:auto}
}

/* ---------- AK-38: senarai sesi kitab (guru) ----------
   Keputusan reka bentuk (emil-design-eng): senarai ini dibuka berpuluh kali
   sehari, jadi ia TIADA animasi masuk; hanya maklum balas tekan 160ms
   (transform sahaja, GPU) dan hover yang digerbang kepada peranti berpenunjuk.
   Motion dihormati: prefers-reduced-motion mematikan transform. */
.bar-sesi-utama{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.bar-sesi-utama .btn{min-height:48px}
.tajuk-seksyen{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-samad);margin:20px 0 8px;
}
.senarai-sesi{display:flex;flex-direction:column;gap:8px}
.baris-sesi{
  display:flex;align-items:center;gap:14px;width:100%;text-align:start;
  padding:12px 14px;min-height:62px;cursor:pointer;color:inherit;font:inherit;
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);
  transition:transform var(--duration-quick) var(--ease-smooth-out),
             border-color var(--duration-quick) var(--ease-smooth-out);
}
.baris-sesi:active{transform:scale(var(--scale-press))}
@media (hover:hover) and (pointer:fine){
  .baris-sesi:hover{border-color:var(--garis-tebal)}
}
.masa-sesi{font-variant-numeric:tabular-nums;font-weight:700;font-size:17px;min-width:52px}
.butir-sesi{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.tarikh-sesi{font-weight:600;font-size:14px}
.baris-sesi.terkunci{opacity:.62;cursor:default}
.baris-sesi.terkunci:active{transform:none}
.ikon-kunci{color:var(--tinta-samad);display:inline-flex}
@media (prefers-reduced-motion: reduce){
  .baris-sesi{transition:none}
  .baris-sesi:active{transform:none}
}

/* ---------- Rangka (skeleton) semasa memuat — transitions-dev #14 ----------
   Rangka mengikut TINGGI baris sebenar supaya tiada lompatan susun atur, dan
   berdenyut sekali sahaja (pulse-count 1): senarai ini dibuka berpuluh kali
   sehari, jadi denyutan berterusan hanya menambah bunyi visual. */
.senarai-sesi-rangka{display:flex;flex-direction:column;gap:8px}
.rangka-baris{
  display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 14px;
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);
}
.rangka-baris > *{
  animation:rangka-denyut 1000ms ease-in-out 1;
  background:var(--garis);border-radius:8px;
}
.rangka-masa{width:44px;height:16px}
.rangka-teks{flex:1;display:flex;flex-direction:column;gap:6px}
.rangka-teks span{height:11px;display:block}
.rangka-teks span:last-child{width:45%}
@keyframes rangka-denyut{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion: reduce){
  .rangka-baris > *{animation:none}
}

/* ---------- AK-39: portal kakitangan ---------- */
.ringkas-staf{
  margin:-6px 0 18px;font-size:13.5px;color:var(--tinta-lemah);
  font-variant-numeric:tabular-nums;
}
.portal-menu{display:flex;flex-direction:column;gap:10px}
.portal-menu .btn{
  justify-content:flex-start;gap:12px;min-height:56px;text-decoration:none;
  transition:transform var(--duration-quick) var(--ease-smooth-out),
             border-color var(--duration-quick) var(--ease-smooth-out);
}
.portal-menu .btn:active{transform:scale(var(--scale-press))}
.portal-menu .btn span{font-weight:600}
@media (prefers-reduced-motion: reduce){
  .portal-menu .btn{transition:none}
  .portal-menu .btn:active{transform:none}
}