:root {
  --bg: #f5f6f4; --panel: #ffffff; --panel2: #f0f2ef; --ink: #1d2421; --muted: #5f6b66; --line: #dde2de;
  --accent: #0f766e; --accent-ink: #ffffff; --accent-soft: #d8efec;
  --ok: #2f7d4f; --ok-soft: #dff1e5; --warn: #a15c07; --warn-soft: #fcefd9; --bad: #b42318; --bad-soft: #fbe3e0;
  --band: rgba(15, 118, 110, .10); --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --r: 8px; --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141917; --panel: #1c2320; --panel2: #232b28; --ink: #e6ebe8; --muted: #9aa6a0; --line: #2f3935;
    --accent: #2dd4bf; --accent-ink: #062b27; --accent-soft: #123b36;
    --ok: #5cc98a; --ok-soft: #173525; --warn: #f0b350; --warn-soft: #3a2c12; --bad: #f2786b; --bad-soft: #3d1c19;
    --band: rgba(45, 212, 191, .10); --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #141917; --panel: #1c2320; --panel2: #232b28; --ink: #e6ebe8; --muted: #9aa6a0; --line: #2f3935;
  --accent: #2dd4bf; --accent-ink: #062b27; --accent-soft: #123b36;
  --ok: #5cc98a; --ok-soft: #173525; --warn: #f0b350; --warn-soft: #3a2c12; --bad: #f2786b; --bad-soft: #3d1c19;
  --band: rgba(45, 212, 191, .10); --shadow: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 14px; }
.muted { color: var(--muted); } .kecil { font-size: 12px; } .num { font-variant-numeric: tabular-nums; text-align: right; }
.flex { display: flex; gap: 8px; align-items: center; } .flex.wrap { flex-wrap: wrap; } .ruang { flex: 1; }

/* Rangka */
.rangka { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.sisi { background: var(--panel); border-right: 1px solid var(--line); padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.jenama { padding: 4px 10px 14px; } .jenama b { display: block; font-size: 15px; } .jenama span { font-size: 12px; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.nav:hover { background: var(--panel2); } .nav.aktif { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav .ikon { width: 18px; text-align: center; opacity: .8; }
.sisi .kaki { margin-top: auto; padding: 10px; font-size: 12px; color: var(--muted); }
.utama { min-width: 0; display: flex; flex-direction: column; }
.atas { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5; }
.isi { padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; max-width: 1400px; width: 100%; }

/* Komponen asas */
.kad { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.kad > h2 { margin-bottom: 12px; } .kad .sub { margin: -8px 0 12px; color: var(--muted); font-size: 13px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.btn { border: 1px solid var(--line); background: var(--panel); padding: 7px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--accent); } .btn.utama-btn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.kecil { padding: 3px 8px; font-size: 12px; } .btn:disabled { opacity: .5; cursor: default; }
.btn.bahaya { color: var(--bad); }
input[type=text], input[type=number], input[type=search], select, textarea { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 8px; }
input[type=number] { width: 90px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.lencana { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--panel2); color: var(--muted); white-space: nowrap; border: 1px solid var(--line); }
.lencana.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.lencana.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.lencana.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.lencana.aksen { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.simpan-status { font-size: 12px; color: var(--muted); } .simpan-status.ralat { color: var(--bad); }

/* KPI */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi .kad { padding: 12px 14px; } .kpi .nilai { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
.kpi .label { font-size: 12px; color: var(--muted); } .kpi .nota { font-size: 12px; margin-top: 2px; }

/* Carta bar beban */
.carta { display: flex; flex-direction: column; gap: 3px; }
.cb { display: grid; grid-template-columns: 220px 1fr 60px; gap: 10px; align-items: center; cursor: pointer; padding: 1px 4px; border-radius: 4px; }
.cb:hover { background: var(--panel2); }
.cb .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.cb .trek { position: relative; height: 16px; }
.cb .jalur { position: absolute; top: -2px; bottom: -2px; background: var(--band); border-left: 1px dashed var(--accent); border-right: 1px dashed var(--accent); }
.cb .bar { position: absolute; left: 0; top: 2px; height: 12px; border-radius: 0 3px 3px 0; background: var(--accent); }
.cb .bar.lebih { background: var(--bad); } .cb .bar.kurang { background: var(--warn); }
.cb .had { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .55; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Jadual */
.jadual-bungkus { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; background: var(--panel2); font-weight: 600; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; z-index: 1; }
tr.klik { cursor: pointer; } tr.klik:hover td { background: var(--panel2); } tr.pilih td { background: var(--accent-soft); }
tr.redup td { opacity: .55; }
.mini { display: flex; height: 8px; width: 120px; border-radius: 2px; overflow: hidden; background: var(--panel2); }
.mini span { display: block; height: 100%; }
.peratus { display: inline-block; min-width: 46px; }

/* Laci butiran */
.laci-latar { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 20; }
.laci { position: fixed; right: 0; top: 0; bottom: 0; width: min(620px, 100vw); background: var(--panel); border-left: 1px solid var(--line); z-index: 21; display: flex; flex-direction: column; }
.laci header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.laci .badan { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.medan { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.medan label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.medan label input[type=number] { width: 100%; }
.tugas-senarai { display: flex; flex-direction: column; }
.tugas-senarai .t { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.tugas-senarai .t .u { font-size: 12px; color: var(--muted); }

/* Struktur */
.tab { display: flex; gap: 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab button { border: 0; background: none; padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--muted); }
.tab button.aktif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.unit { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.unit + .unit { margin-top: 8px; }
.unit .kepala { display: flex; gap: 10px; align-items: center; padding: 9px 12px; cursor: pointer; }
.unit .kepala:hover { background: var(--panel2); border-radius: var(--r); }
.unit .kepala .tajuk { flex: 1; min-width: 0; } .unit .kepala .tajuk b { font-weight: 600; }
.unit .anak { padding: 0 10px 10px 26px; }
.unit .lantikan { padding: 0 12px 12px; }
.unit .lantikan table td { padding: 5px 8px; font-size: 13px; }
.unit .lantikan select { max-width: 320px; }
.anak-panah { width: 14px; color: var(--muted); }

/* Import */
.langkah { display: flex; flex-direction: column; gap: 12px; }
.fail-pilih { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: center; }
.laporan li { margin: 3px 0; }
.amaran-senarai { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.amaran-senarai .a { display: flex; gap: 8px; align-items: baseline; font-size: 13px; cursor: pointer; }
.patuh { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; font-size: 13px; }
.kosong-keadaan { text-align: center; padding: 48px 16px; }

/* Pautan & penyunting */
.pautan { display: flex; flex-direction: column; gap: 2px; }
.klik-baris { cursor: pointer; } .klik-baris:hover { background: var(--panel2); }
.garis-edit { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; }
.garis-edit label { display: flex; flex-direction: column; gap: 4px; }
.garis-edit textarea { width: 100%; font-size: 13px; line-height: 1.5; resize: vertical; }
.unit.sorot { outline: 2px solid var(--accent); }

/* Pratonton buku (kertas B5 182 mm) — sentiasa terang seperti cetakan */
.buku-latar { background: var(--panel2); border-radius: var(--r); padding: 24px 12px; overflow: auto; }
.buku-kertas { background: #fff; color: #111; width: 182mm; max-width: 100%; margin: 0 auto; padding: 18mm 12mm 18mm 25mm;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); font: 11pt/1.4 Arial, sans-serif; }
.buku-kertas a { color: inherit; text-decoration: none; }
/* Kulit profesional — warna lencana: biru #0057A8, kuning #FFD400, merah #E31E24, hijau #3AB54A */
.bk-kulit { text-align: center; padding: 8mm 0 6mm; min-height: 215mm; display: flex; flex-direction: column; align-items: center; }
.bk-lencana { height: 52mm; width: auto; margin-bottom: 4mm; }
.bk-sekolah { font-size: 17pt; font-weight: 700; color: #0057A8; letter-spacing: .02em; }
.bk-alamat { font-size: 9pt; color: #5f6b66; margin: 1mm 0 5mm; }
.bk-jalur { display: flex; width: 100%; height: 2mm; } .bk-jalur.nipis { height: 1.2mm; }
.bk-jalur i { flex: 1.4; } .bk-jalur i:first-child { flex: 4; background: #0057A8; } .bk-jalur i:nth-child(2) { background: #FFD400; }
.bk-jalur i:nth-child(3) { background: #E31E24; } .bk-jalur i:nth-child(4) { background: #3AB54A; }
.bk-k1 { font-size: 32pt; font-weight: 800; color: #0057A8; margin-top: 16mm; letter-spacing: .01em; }
.bk-k2 { font-size: 13pt; font-weight: 700; letter-spacing: .12em; margin-top: 2mm; }
.bk-sesi { background: #0057A8; color: #fff; font-size: 18pt; font-weight: 700; letter-spacing: .1em; padding: 2.5mm 14mm; margin-top: 7mm; }
.bk-logo2 { width: 58mm; margin-top: auto; padding-top: 14mm; }
.bk-moto { font-style: italic; color: #5f6b66; font-size: 10pt; margin: 2mm 0 5mm; }
.bk-info { font-size: 8pt; color: #5f6b66; margin-top: 1.5mm; }
.bk-draf { color: #E31E24; font-weight: 700; font-size: 9pt; margin-top: 1mm; }
.bk-pengepala { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1.5px solid #0057A8; padding: 6mm 0 1mm; margin: 6mm 0 6mm;
  font-size: 8pt; color: #5f6b66; border-top: 1px dashed #bbb; }
.bk-pengepala img { height: 9mm; }
.bk-kandungan h2 { text-align: center; font-size: 14pt; margin-bottom: 2mm; color: #0057A8; }
.bk-kandungan .bk-jalur { margin-bottom: 4mm; }
.buku-kertas .bk-h1 { color: #0057A8; border-bottom: 1.5px solid #0057A8; padding-bottom: 1mm; } .buku-kertas .bk-h2 { color: #0057A8; }
.bk-toc { font-size: 10pt; padding: 1px 0; display: flex; align-items: baseline; } .bk-toc2 { padding-left: 6mm; } .bk-toc3 { padding-left: 12mm; color: #444; font-size: 9.5pt; }
.bk-toc1 { font-weight: 700; color: #0B2D6B; margin-top: 2.5mm; }
.bk-toc-titik { flex: 1; border-bottom: 1.5px dotted #8a96a3; margin: 0 1.5mm; min-width: 6mm; transform: translateY(-.25em); }
.bk-toc-no { min-width: 7mm; text-align: right; font-variant-numeric: tabular-nums; }
.bk-toc-kepala { text-align: right; font-size: 8pt; font-weight: 700; color: #5f6b66; margin: 1mm 0; }
.bk-toc-nota { font-size: 8.5pt; color: #5f6b66; font-style: italic; margin-top: 3mm; }
/* Tema abstrak futuristik — kulit penuh (grafik ASET.kulit, 182 × 257 mm) & hiasan penjuru (ASET.sudutAtas/Bawah) */
.bk-futur { position: relative; display: block; margin: -18mm -12mm 0 -25mm; padding: 0; min-height: 0; aspect-ratio: 182 / 257;
  background: #061638 center / cover no-repeat; color: #fff; text-align: center; overflow: hidden; }
.bk-futur > * { position: absolute; left: 6%; right: 6%; }
.bkf-lencana { top: 9.3%; height: 17.1%; } .bkf-lencana img { height: 100%; width: auto; }
.bkf-sekolah { top: 36.2%; font-size: 15pt; font-weight: 700; letter-spacing: .04em; }
.bkf-alamat { top: 40.4%; font-size: 9pt; color: #BFE6FF; }
.bkf-k1 { top: 45%; font-size: 33pt; font-weight: 800; letter-spacing: .03em; text-shadow: 0 0 6mm rgba(34,211,238,.45); }
.bkf-k2 { top: 51.6%; font-size: 11.5pt; font-weight: 700; letter-spacing: .2em; color: #7DD3FC; }
.bkf-sesi { top: 55%; left: 30%; right: 30%; border: 2px solid #22D3EE; background: #0B2D6B; font-size: 18pt; font-weight: 700; letter-spacing: .15em;
  padding: 2mm 0; box-shadow: 0 0 5mm rgba(34,211,238,.55), inset 0 0 3mm rgba(34,211,238,.35); }
.bkf-bawah { top: 74%; display: flex; flex-direction: column; align-items: center; }
.bkf-logo2 { width: 56mm; max-width: 60%; } .bkf-moto { font-style: italic; font-size: 9.5pt; color: #BFE6FF; margin-top: 1.5mm; }
.bkf-info { font-size: 8pt; color: #7DD3FC; margin-top: 3mm; } .bkf-draf { color: #FF6B6B; font-weight: 700; font-size: 9pt; margin-top: 1mm; }
.bk-bertema { position: relative; overflow: hidden; }
.bk-bertema::after { content: ''; position: absolute; left: 0; bottom: 0; width: 95mm; height: 75mm; background: var(--sudut-bawah) left bottom / 100% 100% no-repeat; pointer-events: none; }
.bk-bertema .bk-pengepala-futur { position: relative; margin-top: 0; border-top: 0; border-bottom-color: #0EA5E9; color: #0B2D6B; padding-top: 9mm; }
.bk-bertema .bk-pengepala-futur::before { content: ''; position: absolute; top: 0; right: -12mm; width: 95mm; height: 75mm; background: var(--sudut-atas) right top / 100% 100% no-repeat; pointer-events: none; }
/* pecah halaman: hujung halaman lalu (penjuru kiri bawah) | garis | permulaan halaman baharu (penjuru kanan atas) */
.bk-bertema .bk-pecah { border: 0; height: 16mm; margin: 8mm -12mm 6mm -25mm;
  background: var(--sudut-atas) right 0 top 9mm / 95mm 75mm no-repeat, var(--sudut-bawah) left 0 top -68mm / 95mm 75mm no-repeat,
    linear-gradient(90deg, transparent, #bbb 15%, #bbb 85%, transparent) center / 100% 1px no-repeat; }
.bk-bertema .bk-h1 { color: #0B2D6B; border-bottom: 3px double #0EA5E9; }
.bk-bertema .bk-jadual th { background: #DDF2FC; color: #0B2D6B; }
.bk-pecah { border: 0; border-top: 1px dashed #bbb; margin: 10mm -12mm 8mm -25mm; }
.buku-kertas h2, .buku-kertas h3, .buku-kertas h4, .buku-kertas h5, .buku-kertas h6 { font-weight: 700; margin: 2.5mm 0 1mm; }
.bk-h1 { font-size: 14pt; text-transform: uppercase; } .bk-h2 { font-size: 12pt; text-transform: uppercase; }
.bk-h3 { font-size: 11pt; text-transform: uppercase; } .bk-h4, .bk-h5 { font-size: 11pt; }
.bk-rujukan { font-style: italic; font-size: 10pt; margin: 0 0 2mm; } .bk-kapsyen { font-weight: 700; margin: 3mm 0 1mm; }
.bk-ahli { border-collapse: collapse; width: 100%; margin-bottom: 2mm; }
.bk-ahli td { border: 0; padding: 1px 3px; vertical-align: top; font-size: 11pt; }
.bk-ahli td:nth-child(1) { width: 28%; } .bk-ahli td:nth-child(2) { width: 3%; } .bk-ahli td:nth-child(4) { width: 27%; font-size: 10pt; color: #333; }
.bk-kosong { color: #999; }
.bk-gpt { font-weight: 700; margin: 1.5mm 0 .5mm; }
.bk-gp .bk-item { display: grid; grid-template-columns: 8mm 1fr; text-align: justify; margin-bottom: .3mm; }
.bk-gp .bk-sub { padding-left: 16mm; margin-bottom: .2mm; }
.bk-jadual { border-collapse: collapse; width: 100%; margin-bottom: 3mm; font-size: 10pt; }
.bk-jadual th, .bk-jadual td { border: 1px solid #888; padding: 2px 4px; position: static; background: none; color: #111; cursor: default; }
.bk-jadual th { background: #dce6f2; }

/* Pratonton surat lantikan (A4) */
.surat-kertas { background: #fff; color: #111; width: 210mm; max-width: 100%; margin: 0 auto; padding: 15mm 20mm 18mm 25mm; box-shadow: 0 1px 3px rgba(0,0,0,.2); font: 11pt/1.35 Arial, sans-serif; }
.surat-kertas p { margin: 0; }
/* Kepala surat rasmi: Jata Negara | teks rata kiri | lencana sekolah */
.sr-kepala { display: grid; grid-template-columns: 29mm 1fr 22mm; align-items: center; gap: 2mm; text-align: left; font-size: 9pt;
  border-bottom: 3px double #000; padding-bottom: 2mm; margin-bottom: 5mm; }
.sr-kepala img { height: 19mm; width: auto; } .sr-kepala img.sr-lencana { justify-self: end; height: 20mm; }
.sr-kepala .sr-kem { font-size: 12pt; font-weight: 700; }
.sr-kepala .sr-sekolah { font-size: 10pt; font-weight: 400; margin: .5mm 0 .8mm; } .sr-kepala small { font-size: 8.5pt; }
.sr-tab { display: inline-block; width: 4mm; }
.sr-jadual { font-size: 9pt; margin: 1mm 0 3mm; }
.sr-kotak { border: 1px solid #666; padding: 3mm 4mm; margin-top: 4mm; }
.sahkan-kotak { background: var(--warn-soft); color: var(--ink); border: 1px solid var(--warn); border-radius: var(--r); padding: 10px 12px; font-size: 13px; }
.sahkan-kotak b { color: var(--warn); }
.profil-logo { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.profil-logo img { height: 96px; max-width: 220px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.tambah-nama { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.tambah-nama input { min-width: 220px; flex: 1; }

/* ---- Cadangan agihan (Fasa 3) ---- */
.cd-senarai { display: flex; flex-direction: column; margin-top: 10px; }
.cd { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cd-jawatan b { font-weight: 600; }
.cd-calon { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.cd-sebab-senarai { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cd-sebab { font-size: 12px; color: var(--muted); }
.cd-sebab.ok { color: var(--ok); } .cd-sebab.warn { color: var(--warn); }
.cd-tindakan { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kpi .nota.baik { color: var(--ok); } .kpi .nota.buruk { color: var(--bad); }

@media (max-width: 860px) {
  .cd { grid-template-columns: 1fr; } .cd-calon { justify-content: flex-start; }
  .buku-kertas { padding: 10mm 6mm; }
  .rangka { grid-template-columns: 1fr; }
  .sisi { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
  .sisi .kaki, .jenama span { display: none; }
  .jenama { width: 100%; padding-bottom: 4px; }
  .nav { width: auto; padding: 6px 10px; }
  .atas { flex-wrap: wrap; }
  .isi, .atas { padding-left: 16px; padding-right: 16px; }
  .cb { grid-template-columns: 120px 1fr 48px; }
  .fail-pilih { grid-template-columns: 1fr; }
}