/* =====================================================================
   e-KSP — tambahan kepada ui.css (yang dikongsi dengan ../mockup).
   Diasingkan supaya ui.css kekal sama dengan mockup dan boleh disegerak.
   ===================================================================== */

/* Pautan langkah dalam stepper — .st asalnya <div> dalam mockup. */
.stepper a.st { text-decoration: none; }
.stepper a.st:hover { border-color: var(--brand); color: var(--brand); }

/* Penanda langkah yang MENGANDUNGI medan wajib (Langkah 1 & 2).
   Asterisk kecil sahaja — sama makna dengan `*` pada medan — kerana langkah
   itu bercampur ruangan wajib & pilihan, jadi melabel keseluruhannya
   "WAJIB" tidak tepat. */
.stepper a.st .st-bintang {
  color: var(--danger, #d33);
  font-weight: 800;
  margin-left: 2px;
}

/* Medan "Umur" — dikira automatik daripada tarikh lahir. `readonly` supaya
   ia berbentuk input, tetapi teks dikelabukan sedikit + latar bertona lembut
   supaya pengguna faham nilainya DIISI AUTOMATIK, bukan untuk ditaip. */
.umur-input {
  cursor: default;
  color: var(--muted);
  background: var(--panel2, #f5f3fb);
  font-style: italic;
}
.umur-input::placeholder { color: var(--muted); font-style: italic; }

/* Nota kaki — kecil, condong, kelabu; menandakan ia keterangan sokongan
   (nota kaki), bukan label atau nilai medan. */
.nota-kaki {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.35;
}

/* Teks panduan medan lebih HALUS daripada label (soalan): ui.css menetapkan
   13px (lebih besar daripada label 12px) sehingga ia nampak seperti
   sebahagian soalan. Kecilkan supaya jelas ia nota bantuan sahaja. */
.fld-help { font-size: 11px; line-height: 1.35; opacity: .9; }

/* Kad tajuk borang biografi: nama & umur anak sebagai "info-chip" berikon,
   butang cetak ditolak ke kanan. */
.bio-kepala {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bio-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bio-kepala > .btn { margin-left: auto; }
.info-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--panel2, #f6f4fb);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 9px 14px 9px 11px;
}
.info-chip-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--line2);
}
.info-chip .ic-label { font-size: 11px; color: var(--muted); line-height: 1.2; }
.info-chip .ic-value { font-size: 16px; font-weight: 800; line-height: 1.25; }

/* Heatmap analisis penilaian: setiap soalan satu baris, warna jawapan
   ibu bapa (IB) & terapis (TP). Mudah dibaca berbanding radar padat. */
.hm-petunjuk { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
.hm-petunjuk span { display: inline-flex; align-items: center; gap: 6px; }
.heatmap { display: flex; flex-direction: column; }
.hm-domain {
  font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--brand); margin: 12px 0 4px;
}
.hm-baris {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 5px 8px; border-radius: 8px;
}
.hm-baris:hover { background: var(--panel2, #f6f4fb); }
.hm-baris.hm-beza { background: #fff9ee; box-shadow: inset 3px 0 0 #d98a00; }
.hm-teks {
  font-size: 12.5px; line-height: 1.35; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-pasangan { display: flex; gap: 12px; flex: 0 0 auto; }
.hm-kump { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); font-weight: 700; }
.hm-sel {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  font-size: 11.5px; font-weight: 800; color: #fff; font-style: normal;
}
.hm-ada { background: #1a9d5a; }
.hm-sedang { background: #d98a00; }
.hm-tiada { background: #d64545; }
.hm-kosong { background: #c9cdd6; color: #fff; }

/* Timeline proses — Rekod log aktiviti sesi. Garisan menegak + titik warna
   ikut jenis tindakan; setiap peristiwa satu nod. */
.jejak-masa { list-style: none; margin: 14px 0 0; padding: 0; }
.jejak-masa .jm-item { position: relative; padding: 0 0 20px 34px; }
.jejak-masa .jm-item::before {
  content: ""; position: absolute; left: 10px; top: 6px; bottom: -2px;
  width: 2px; background: var(--line2);
}
.jejak-masa .jm-item:last-child { padding-bottom: 2px; }
.jejak-masa .jm-item:last-child::before { display: none; }
.jejak-masa .jm-dot {
  position: absolute; left: 4px; top: 4px; width: 15px; height: 15px;
  border-radius: 50%; border: 3px solid #fff;
}
.jejak-masa .jm-atas { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.jejak-masa .jm-tindakan { font-size: 14px; }
.jejak-masa .jm-masa { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.jejak-masa .jm-oleh { font-size: 12px; color: var(--muted); margin-top: 2px; display: inline-flex; align-items: center; gap: 5px; }
.jejak-masa .jm-butiran { font-size: 12.5px; margin-top: 4px; line-height: 1.4; }

/* Garis masa status dalam modal "Sejarah Status" (dikumpul ikut sesi). */
.status-sejarah .ss-sesi + .ss-sesi { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line2); }
.status-sejarah .ss-tajuk { font-size: 13px; color: var(--muted); display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.status-sejarah .ss-tajuk b { color: var(--ink); }
.status-sejarah .ss-tarikh { font-variant-numeric: tabular-nums; }
.status-sejarah .jejak-status { margin-top: 10px; }

/* Sepanduk keputusan sesi selesai (Lihat Senarai Semak) — chop "Sesi selesai"
   yang jelas + keputusan penilaian terapis. */
.kep-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px; border-left: 4px solid #1a9d5a; background: #f2fbf6;
}
.kep-banner .kb-chop {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; color: #157a46; font-size: 14px;
}
.kep-banner .kb-kep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kep-banner .kb-label { font-size: 12px; color: var(--muted); }
.kep-banner .kb-badge { font-size: 13px; padding: 4px 12px; }

/* Keputusan dalam jadual pesakit (bila sesi terkini selesai). */
.kep-jadual { display: block; margin-top: 3px; }

/* Radar + senarai rujukan bersebelahan: carta di kiri, senarai di kanan. */
.radar-wrap { display: flex; gap: 18px; align-items: flex-start; }
.radar-wrap .rw-carta { flex: 1 1 55%; min-width: 0; }
.radar-wrap .rw-senarai { flex: 1 1 45%; min-width: 0; max-height: 340px; overflow-y: auto; }
@media (max-width: 1100px) { .radar-wrap { flex-direction: column; } .radar-wrap .rw-senarai { max-height: none; } }

/* Senarai rujukan nombor paksi radar — supaya terapis tahu nombor 1,2,3…
   merujuk soalan mana tanpa perlu hover. Gaya summary SAMA dengan
   "Lihat sebagai jadual" (.carta-jadual). */
.radar-rujukan > summary {
  cursor: pointer; font-size: 12.5px; color: var(--brand);
  list-style: none; padding: 4px 0;
}
.radar-rujukan > summary::-webkit-details-marker { display: none; }
.radar-rujukan > summary::before { content: "▸ "; }
.radar-rujukan[open] > summary::before { content: "▾ "; }
.radar-rujukan .rr-band {
  font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--brand); margin: 8px 0 2px;
}
.radar-rujukan ol {
  margin: 2px 0 0; padding-left: 24px; font-size: 11.5px; line-height: 1.4; color: var(--ink, #1d2733);
}
.radar-rujukan li { margin-bottom: 3px; break-inside: avoid; }

/* Dua kolum: susur masa kumpulan umur (kiri) + analisis penilaian radar
   (kanan) pada kad Kemaskini Senarai Semak. Bertindan pada skrin sempit. */
.dua-kolum { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.dua-kolum .dk-sel { min-width: 0; }
.dua-kolum .dk-sel h3 { margin-top: 0; }
@media (max-width: 860px) { .dua-kolum { grid-template-columns: 1fr; gap: 18px; } }

/* Skala menegak kumpulan umur (thermometer) — Kemaskini Senarai Semak.
   Kumpulan lebih tua di atas; kronologi = titik rujukan; naik = hijau,
   turun = jingga. Setiap baris kongsi tulang (spine) menegak yang sama. */
.skala { display: flex; flex-direction: column; margin: 6px 0 10px; }
.skala-baris { display: flex; align-items: center; min-height: 40px; }
.skala .sb-label {
  flex: 0 0 148px; text-align: right; padding-right: 14px;
  font-weight: 700; font-size: 13px; color: var(--ink, #1d2733);
}
.skala .sb-track {
  position: relative; flex: 1; display: flex; align-items: center; gap: 10px;
  border-left: 3px solid var(--line2); padding: 8px 0 8px 18px; min-height: 40px;
}
.skala .sb-dot {
  position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--line2);
  border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line2);
}
.skala .sb-bar { height: 15px; border-radius: 8px; max-width: 220px; min-width: 22px; }
.skala .sb-tag { font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.skala .sb-peratus { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.skala-naik  .sb-bar { background: #1a9d5a; }
.skala-naik  .sb-dot { background: #1a9d5a; box-shadow: 0 0 0 1.5px #1a9d5a; }
.skala-naik  .sb-tag { color: #157a46; }
.skala-turun .sb-bar { background: #d98a00; }
.skala-turun .sb-dot { background: #d98a00; box-shadow: 0 0 0 1.5px #d98a00; }
.skala-turun .sb-tag { color: #a86a00; }
/* Kronologi = titik rujukan: tulang & titik berwarna jenama, tiada bar warna. */
.skala-krono .sb-track { border-left-color: var(--brand); }
.skala-krono .sb-dot { background: var(--brand); box-shadow: 0 0 0 1.5px var(--brand); width: 14px; height: 14px; left: -9px; }
.skala-krono .sb-bar { display: none; }
.skala-krono .sb-tag { color: var(--brand); }

.skala-rumus { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; margin: 2px 0 0; }
.skala-rumus .sr-naik { color: #157a46; }
.skala-rumus .sr-turun { color: #a86a00; }
@media (max-width: 560px) {
  .bio-info { width: 100%; }
  .info-chip { flex: 1 1 auto; }
  .bio-kepala > .btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* Kotak "Lain-lain (nyatakan)" bagi chip — diikat secara visual kepada chip
   "Lain-lain": diinden + garis aksen jenama + caption, supaya jelas ia milik
   pilihan itu, bukan input umum di bawah senarai chip. */
.chip-lain-wrap {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 3px solid var(--brand);
  max-width: 460px;
}
.chip-lain-tajuk {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.chip-lain-wrap .chip-lain { margin-top: 0; max-width: 100%; }

/*
 * Paparan penjaga (role-ibu) guna input BESAR (.input-lg) untuk medan utama,
 * tetapi kotak "Nyatakan pilihan Lain-lain" (.chip-lain) mewarisi .input yang
 * kecil — jadi ia kelihatan tak sekata. Samakan saiznya dengan .input-lg di
 * sini supaya semua kotak input dalam borang penjaga sama tinggi & saiz teks.
 */
.role-ibu .chip-lain {
  font-size: 16px;
  padding: 13px 14px;
  min-height: 50px;
  border-radius: 11px;
  border-width: 1.5px;
}

/* Butang wajah: dijadikan <button type=submit> supaya wizard berfungsi
   tanpa JavaScript. Buang gaya butang lalai penyemak imbas. */
.facegrid .facebtn {
  font-family: inherit;
  text-align: center;
  position: relative;
}

/* Baris semakan jawapan. Gaya pautan bergaris hanya untuk pautan biasa —
   BUKAN butang, supaya butang "Ubah" kekal dengan border penuhnya. */
.valrow a:not(.btn) { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line2); }
.valrow a:not(.btn):hover { color: var(--brand); border-bottom-color: var(--brand); }
.semak-baris { align-items: flex-start; }
.semak-baris .semak-soalan { line-height: 1.45; }
.semak-baris .pv { align-self: center; flex-wrap: wrap; justify-content: flex-end; }
.semak-baris .semak-ubah { flex: 0 0 auto; }
.semak-contoh { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

/* Togol teks besar untuk ibubapa (kebolehcapaian) */
body.bigtext { font-size: 118%; }
body.bigtext .wizq { font-size: 24px; }
body.bigtext .input-lg,
body.bigtext .btn-xl { font-size: 19px; }

.a11y { display: flex; gap: 6px; align-items: center; }
.a11y button {
  font-size: 12px; padding: 7px 12px; border-radius: 9px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  font-family: inherit;
}
.a11y button:hover { border-color: var(--brand); color: var(--brand); }

/* Butang dilumpuhkan (cth. hantar sebelum semua soalan dijawab) */
.btn-xl[disabled], .btn[disabled] { cursor: not-allowed; }

/* =====================================================================
   Carta — SVG dijana di pelayan (lihat app/Helpers/carta_helper.php)
   ===================================================================== */
/* `max-width` ditetapkan sebaris oleh carta_helper.php mengikut viewBox
   masing-masing, supaya carta tidak pernah dibesarkan melebihi saiz
   rekaannya — sebelum ini pada 1200px teks label membesar ke 22px. */
/* Carta dijajarkan KIRI, sejajar dengan tajuk dan teks di atasnya.
   Berpusat, ia terapung bebas daripada perenggan yang menerangkannya. */
.carta { width: 100%; height: auto; display: block; margin-inline: 0; }
.carta-kosong { font-size: 13.5px; color: var(--muted); margin: 0; }

/* Penanda membesar sedikit apabila dihover/difokus supaya pembaca nampak
   ia bertindak balas. */
.carta [data-tip] { cursor: default; }
.carta circle[data-tip]:hover,
.carta circle[data-tip]:focus,
.carta path[data-tip]:hover,
.carta path[data-tip]:focus { outline: none; filter: brightness(1.08); }

/* Legenda: kunci berwarna di sebelah teks; teks sendiri kekal ink biasa —
   warna siri tidak pernah dipakai oleh teks. */
.carta-legenda {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 10px; font-size: 12px; color: var(--muted);
}
.carta-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.carta-legenda .ck { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.carta-legenda .ck-konteks { background: #c3c2b7; }

/* Kembar "paparan jadual" — setiap carta mesti ada, supaya tiada nilai
   terkunci di sebalik hover sahaja. */
.carta-jadual { margin-top: 12px; }
.carta-jadual > summary {
  cursor: pointer; font-size: 12.5px; color: var(--brand);
  padding: 4px 0; list-style: none;
}
.carta-jadual > summary::-webkit-details-marker { display: none; }
.carta-jadual > summary::before { content: "▸ "; }
.carta-jadual[open] > summary::before { content: "▾ "; }
/* "Buka untuk lihat " hilang bila details sudah dibuka. */
details[open] > summary .dt-pra { display: none; }
.carta-jadual table { margin-top: 8px; }
.carta-jadual td, .carta-jadual th { font-variant-numeric: tabular-nums; }

.carta-legenda .ck-blok { width: 12px; height: 12px; border-radius: 3px; }

/* ---------------------------------------------------------------------
   Jalur domain (heatmap status)
   Warna status TIDAK boleh berdiri sendiri (hijau/merah ΔE 4.1 di bawah
   deuteranopia) — setiap sel membawa glif, dan setiap glif ada label
   dalam legenda.
   --------------------------------------------------------------------- */
.jalur-bungkus { overflow-x: auto; }
.jalur { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 13px; }
.jalur th { font-weight: 600; color: var(--muted); font-size: 11.5px; padding: 4px 6px; text-align: center; }
.jalur th[scope="row"] { text-align: right; white-space: nowrap; color: var(--ink); font-size: 12.5px; }
.jalur thead .jt { display: block; font-variant-numeric: tabular-nums; }
.jalur thead .jb { display: block; font-weight: 400; font-size: 10.5px; color: var(--faint); }
.jalur thead .jr { color: #d03b3b; }

.jalur td {
  text-align: center; padding: 9px 6px; border-radius: 6px;
  font-size: 15px; font-weight: 700; cursor: default; min-width: 46px;
}
.jalur td:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.sel-lulus { background: #e7f6e7; color: #0ca30c; }
.sel-rujuk { background: #fbe9e9; color: #d03b3b; }
.sel-tb    { background: var(--panel2); color: var(--faint); }
.sel-belum { background: #f3f1e9; color: #8a5a00; }

.jg {
  width: 20px; height: 20px; border-radius: 5px; display: inline-grid;
  place-items: center; font-size: 12px; font-weight: 700; font-style: normal;
}

/* Teks untuk pembaca skrin sahaja — status tidak pernah warna sahaja */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   RESPONSIF MUDAH ALIH
   ui.css sudah meruntuhkan grid pada 880/760/560px, tetapi tiga perkara
   masih memecahkan paparan telefon: jadual yang lebih lebar daripada
   skrin, sasaran sentuh di bawah 44px, dan input di bawah 16px (Safari
   iOS auto-zum apabila difokus). Diperbaiki di sini.
   ===================================================================== */

/* Jadual: skrol mendatar DALAM bekasnya sendiri, supaya halaman tidak
   pernah bergerak ke tepi. Balut setiap <table> dengan .tblwrap.
   `.carta-jadual` ialah <details>, jadi ia menjadi bekas skrol sendiri. */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.carta-jadual { overflow-x: auto; }
.tblwrap > table, .carta-jadual > table { min-width: 100%; }

/* `contain: paint` WAJIB, bukan hiasan. Tanpanya Chrome membiarkan limpahan
   jadual di dalam bekas `overflow-x:auto` merebak ke <html>, jadi seluruh
   halaman boleh diseret ke tepi walaupun bekas itu sendiri sudah menyekat
   dengan betul. Diukur pada kakitangan/pesakit/1: 487px lwn viewport 373px. */
.tblwrap, .carta-jadual, .jalur-bungkus { contain: paint; }

/* Petunjuk visual bahawa ada lagi lajur di sebelah kanan */
.tblwrap { background:
  linear-gradient(to right, var(--panel) 30%, rgba(255,255,255,0)),
  linear-gradient(to left,  var(--panel) 30%, rgba(255,255,255,0)) 100% 0,
  radial-gradient(farthest-side at 0 50%, rgba(20,40,80,.13), transparent),
  radial-gradient(farthest-side at 100% 50%, rgba(20,40,80,.13), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Peraturan SENTUHAN — diikat kepada jenis peranti, bukan lebar skrin.
   Tablet 768px ialah peranti sentuh tetapi lebih lebar daripada 760px, jadi
   `max-width:760px` sahaja meninggalkannya dengan sasaran 33–38px. `pointer:
   coarse` menangkap semua peranti sentuh tanpa mengira lebar; had lebar
   dikekalkan sebagai sandaran untuk pelayar lama yang tidak menyokongnya.
   `.98` bukan taip salah: pada devicePixelRatio pecahan (zum pelayar bukan
   100%), `max-width:1024px` gagal padan pada viewport 1024px yang tepat —
   iPad landskap terlepas. Diukur, bukan diandaikan. */
@media (max-width: 1024.98px), (pointer: coarse) {
  /* Sasaran sentuh: garis panduan 44px */
  .nav a,
  .a11y button,
  .stepper .st,
  .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .nav a { padding: 10px 14px; }

  /* Input 16px — di bawah nilai ini Safari iOS/iPadOS mengezum apabila difokus */
  .input, select.input, textarea.input, .input-lg { font-size: 16px; }
}

/* Peraturan RUANG — ini memang bergantung pada lebar sebenar */
@media (max-width: 760px) {
  /* Rapatkan jidar supaya lebar berguna bertambah ~20px */
  .wrap { padding: 14px 12px; }

  /* Sel jadual lebih rapat supaya lebih banyak lajur muat */
  th, td { padding: 9px 8px; }

  /* Tooltip tidak boleh melebihi skrin */
  .tip::after { width: min(240px, 74vw); }
}

@media (max-width: 560px) {
  /* Padding kad 18px setiap sisi memakan 36px daripada lebar carta. Pada
     320px itu menolak skala carta dari 0.75x ke 0.71x — kecil, tetapi ia
     lebar yang paling mahal pada peranti paling sempit. */
  .card { padding: 15px 13px; }

  /* minmax(290px) melimpah pada skrin 320px */
  .gal { grid-template-columns: 1fr; }

  /* Dua butang besar bersebelahan terlalu sempit di bawah 560px */
  .wiznav { flex-direction: column-reverse; }
  .btn-xl { padding: 15px 18px; font-size: 17px; }

  .stepfoot { flex-direction: column-reverse; }
  .stepfoot .btn, .stepfoot .btn-xl { width: 100%; justify-content: center; }
}

/* Cetakan: jangan sekali-kali memotong jadual */
@media print {
  .tblwrap, .carta-jadual, .jalur-bungkus {
    overflow: visible !important; contain: none !important; background: none !important;
  }

  /* Cetak bersih untuk halaman aplikasi (cth. Kemaskini Senarai Semak):
     buang kromium app, breadcrumb, butang & panel bantuan. */
  .apptop, aside.sisi, .sisi-kaki, .jejak, .pageintro,
  .bio-alat, .btn, .no-print {
    display: none !important;
  }
  .rangka { display: block !important; }
  .rangka-utama { padding: 0 !important; max-width: none !important; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; border: 1px solid #d8d8e2; }

  /* Susun atur cetak untuk Lihat Senarai Semak: kolum bertindan, carta &
     senarai penuh lebar, radar guna imej statik (SVG ApexCharts tak cetak). */
  .dua-kolum { display: block !important; }
  .radar-wrap { display: block !important; }
  .radar-wrap .rw-carta, .radar-wrap .rw-senarai { max-height: none !important; overflow: visible !important; }
  /* Sembunyi radar hidup HANYA jika imej cetak berjaya dijana. */
  .radar-wrap:has(.radar-cetak) #cartaRadar { display: none !important; }
  .radar-cetak { display: block !important; max-width: 100%; margin: 4px 0; }
  .radar-cetak img, .radar-cetak svg { max-width: 100% !important; height: auto; }
  svg.carta { max-width: 100% !important; height: auto; }
  .radar-rujukan[open] > summary, .carta-jadual[open] > summary { color: #1d2733; }
}
/* Imej radar statik: tersembunyi pada skrin, hanya untuk cetak. */
.radar-cetak { display: none; }

/* Tooltip ApexCharts (radar analisis penilaian) — benarkan teks membalut
   supaya soalan penuh kelihatan, bukan dipotong oleh nowrap lalai. */
.apexcharts-tooltip.apexcharts-theme-light { white-space: normal; max-width: 250px; }

/* Tooltip carta — latar putih, teks hitam (sama gaya dengan halaman utama). */
#carta-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: #fff; color: #1d2733; font-size: 12.5px; line-height: 1.45;
  padding: 7px 10px; border-radius: 8px; max-width: 260px;
  border: 1px solid #e0e4ec;
  box-shadow: 0 6px 20px rgba(20, 30, 50, .16);
  opacity: 0; transition: opacity .1s;
}
#carta-tip.show { opacity: 1; }

/* ================================================================
   SKRIN AUTH (log masuk, daftar, lupa/set semula kata laluan)
   ----------------------------------------------------------------
   Susun atur dua panel: panel jenama di kiri, borang di kanan.
   Sebelum ini borang terapung dalam lajur 440px di tengah skrin
   kosong — kelihatan seperti lakaran, bukan sistem klinikal.

   Panel kiri hilang di bawah 900px dan digantikan tajuk ringkas,
   supaya borang mendapat keseluruhan skrin pada telefon.
   ================================================================ */
.authshell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* --- panel jenama --- */
.authbrand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 46px 48px;
  color: #fff;
  background: linear-gradient(150deg, #1a73c2 0%, #1668b0 45%, #0e9488 100%);
}
/* bulatan lembut — kedalaman tanpa imej */
.authbrand::before,
.authbrand::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .07); pointer-events: none;
}
.authbrand::before { width: 420px; height: 420px; top: -150px; right: -140px; }
.authbrand::after  { width: 300px; height: 300px; bottom: -120px; left: -90px; }

.authbrand > * { position: relative; z-index: 1; }

.authbrand .ab-lock { display: flex; align-items: center; gap: 13px; }
.authbrand .ab-lock .eksp-mark {
  filter: drop-shadow(0 2px 6px rgba(6, 30, 60, .3));
}
.authbrand .ab-name { font-size: 17px; font-weight: 800; letter-spacing: .01em; }
.authbrand .ab-org  { font-size: 12.5px; color: rgba(255, 255, 255, .78); margin-top: 1px; }

.authbrand h2 {
  font-size: 30px; line-height: 1.25; font-weight: 800;
  margin: 0 0 14px; max-width: 15em;
}
.authbrand .ab-lead {
  font-size: 14.5px; line-height: 1.65;
  color: rgba(255, 255, 255, .86); max-width: 34em;
}


.authbrand .ab-foot {
  font-size: 12px; line-height: 1.6;
  color: rgba(255, 255, 255, .68);
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 16px;
}

/* --- panel borang --- */
.authmain {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; background: var(--bg);
}
.authcard { width: 100%; max-width: 424px; }
/* Borang pendaftaran (jemputan) lebih panjang — beri sedikit lebih lebar,
   tanpa menjejaskan halaman log masuk yang ringkas. */
.authcard:has(.kad-daftar) { max-width: 500px; }

/* tajuk ringkas — hanya kelihatan bila panel jenama disembunyikan */
.authmini { display: none; align-items: center; gap: 11px; margin-bottom: 22px; }
.authmini .am-name { font-size: 15.5px; font-weight: 800; }
.authmini .am-org  { font-size: 12px; color: var(--muted); }

.authcard .card { padding: 26px 24px; }
.authcard .card h3 { font-size: 20px; margin-bottom: 5px; }
.authcard .card .sub { font-size: 13px; margin-bottom: 20px; }
.authcard .fld { font-size: 13px; font-weight: 600; }
.authcard .input { padding: 11px 13px; font-size: 14.5px; }
.authcard .btn { padding: 12px 18px; font-size: 14.5px; }

.authnote {
  margin-top: 16px; font-size: 12.5px; line-height: 1.6;
  color: var(--muted); text-align: center;
}
.authlinks {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; display: flex; flex-direction: column; gap: 8px;
}

@media (max-width: 900px) {
  .authshell { grid-template-columns: 1fr; }
  .authbrand { display: none; }
  .authmini  { display: flex; }
  .authmain  { padding: 32px 20px; align-items: flex-start; }
}
@media (max-height: 700px) {
  .authbrand { justify-content: center; gap: 22px; }
  .authbrand h2 { font-size: 25px; }
}

/* Butang tunjuk/sorok kata laluan (disuntik oleh assets/app.js) */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 44px; }

.pw-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: 0; border-radius: 7px;
  color: var(--muted); cursor: pointer;
}
.pw-eye:hover { color: var(--brand); background: rgba(26, 115, 194, .08); }
.pw-eye:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Ikon bertukar mengikut keadaan */
.pw-eye .i-tutup { display: none; }
.pw-eye.on .i-buka { display: none; }
.pw-eye.on .i-tutup { display: block; }
.pw-eye.on { color: var(--brand); }

/* Sorok pendedah kata laluan bawaan Edge/IE — jika tidak, ada dua ikon */
.pw-wrap .input::-ms-reveal,
.pw-wrap .input::-ms-clear { display: none; }

/* ================================================================
   RANGKA APLIKASI — topbar, breadcrumb, tajuk halaman
   ================================================================ */

/* Jenama kekal sama pada setiap halaman */
.apptop .brand {
  display: flex; align-items: center; gap: 11px;
  color: inherit; text-decoration: none;
}
.apptop .brand > div { display: flex; flex-direction: column; line-height: 1.25; }
.brand-nama { font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.brand-org  { font-size: 11.5px; color: var(--muted); }
.apptop .brand:hover .brand-nama { color: var(--brand); }

/* Blok pengguna — dipisahkan daripada nav supaya "Log keluar" tidak
   lagi kelihatan seperti satu lagi item navigasi dan senang tersalah klik. */
.usermenu { display: flex; align-items: center; gap: 8px; }

/* Tiada bingkai di sekeliling blok pengguna — avatar sudah cukup
   memisahkannya, dan satu lagi kotak dalam header menambah kekusutan. */
.ubox { display: flex; align-items: center; gap: 9px; }
.uava {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  font-size: 12.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}
.uinfo { display: flex; flex-direction: column; line-height: 1.3; }
.unama { font-size: 12.5px; font-weight: 700; max-width: 15ch; overflow: hidden;
         text-overflow: ellipsis; white-space: nowrap; }
.uinfo .rolechip { font-size: 10px; padding: 0 5px; align-self: flex-start; }

.ukeluar {
  font-size: 12.5px; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: none; color: var(--muted);
}
.ukeluar:hover { border-color: #f3c6c2; background: var(--tiada-bg); color: var(--tiada); }

/* `.btn-teks` dibuang bersama butang saiz teks dalam navigasi sisi.
   Toggle itu kini tinggal dalam halaman profil dan menggunakan `.btn sec`
   seperti mana-mana butang sekunder lain, jadi tiada kelas sendiri
   diperlukan. Tiada paparan lain merujuknya. */

/* Breadcrumb — halaman dalam kini ada jalan pulang */
/* Container header halaman: breadcrumb + tajuk dalam satu bar putih. */
.halaman-kepala {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 18px; margin: 2px 0 18px;
  box-shadow: 0 1px 2px rgba(20, 40, 80, .05);
}

/* Breadcrumb kini di dalam .halaman-kepala — tanpa kotak sendiri. */
.jejak {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); margin: 0 0 6px;
}
.jejak a { color: var(--muted); font-weight: 500; text-decoration: none; transition: color .12s; }
.jejak a:hover { color: var(--brand); }
.jejak svg.jsep { color: var(--line2); flex-shrink: 0; vertical-align: middle; }
.jejak [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* Tajuk halaman sebenar dalam kandungan */
.tajuk-halaman { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.01em; }

@media (max-width: 760px) {
  .apptop-dalam { gap: 10px; }
  .usermenu { width: 100%; justify-content: space-between; }
  .brand-org { display: none; }
  .tajuk-halaman { font-size: 20px; }
}

/* Mod teks besar (butang A+) — dikekalkan merentas halaman */
body.bigtext { font-size: 17.5px; }
body.bigtext .card h3 { font-size: 17px; }
body.bigtext .input, body.bigtext .btn { font-size: 16px; }
body.bigtext .tajuk-halaman { font-size: 26px; }

/* Alat jadual — kotak carian & susunan lajur (dipasang oleh app.js) */
.jadual-alat { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.jadual-alat .input { max-width: 280px; }
/* Kiraan baris ditolak ke hujung kanan; gaya pil dikongsi di atas. */
.jadual-kira { margin-left: auto; }

/* Pautan-butang kecil pada kepala kad (cth "Lihat semua"): pil bergaris
   (ghost) untuk membezakannya dari pil terisi ".t-tarikh" di sebelahnya. */
.t-pautan {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; line-height: 1.6;
  color: var(--brand); text-decoration: none; white-space: nowrap;
  padding: 2px 11px; border: 1px solid var(--line); border-radius: 999px;
}
.t-pautan:hover { border-color: var(--brand); background: #f4f0fc; }

/* Pagination. */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; }
.pager .pg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--ink);
  text-decoration: none; font-size: 13px;
}
.pager .pg:hover { border-color: var(--brand); }
.pager .pg.kini { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.pager .pg.lumpuh { opacity: .45; pointer-events: none; }
.pager .pg-jeda { display: inline-flex; align-items: center; padding: 0 4px; color: var(--faint); }

/* Susun atur bar senarai (gaya rujukan): carian di baris atas; tapis (kiri)
   + kiraan & bilangan paparan (kanan) di baris bawah. */
/* Selaras dengan bar carian auto (.jadual-alat) pada Pelajar Saya &
   Pengurusan Pengguna: input padat (maks 280px), bukan melebar penuh. */
.senarai-cari { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.senarai-cari .input { flex: 1 1 auto; min-width: 200px; max-width: 280px; }
.senarai-cari .btn { flex: none; }
.senarai-tapis {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 16px; flex-wrap: wrap; margin: 0 0 14px;
}
.senarai-tapis .st-kiri, .senarai-tapis .st-kanan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.senarai-tapis .jadual-kira { margin-left: 0; }

/* Tajuk boleh-susun (klik-tajuk): pautan MENGISI seluruh sel supaya klik di
   mana-mana dalam tajuk berfungsi (bukan pada teks sahaja). */
th.boleh-susun { padding: 0; }
th.boleh-susun a {
  display: block; padding: 10px 12px;
  color: inherit; text-decoration: none;
}
th.boleh-susun:hover a { color: var(--brand); }

/* Badge status senarai pesakit sebagai pil bulat berwarna (gaya rujukan). */
.sel-status .badge { border-radius: 999px; padding: 3px 11px; font-size: 11px; }
.b-kosong { background: #eef1f5; color: #6b7684; }

/* Menu "Tindakan" (dropdown) pada hujung setiap baris pesakit. */
.menu-tindakan { position: relative; display: inline-block; text-align: left; }
.menu-tindakan > summary {
  list-style: none; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.menu-tindakan > summary::-webkit-details-marker { display: none; }
.menu-tindakan[open] > summary .mt-caret { transform: rotate(180deg); }
.menu-tindakan .mt-caret { display: inline-block; transition: transform .15s ease; font-size: 10px; }
.menu-tindakan .mt-menu {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 40;
  min-width: 246px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20, 40, 80, .16);
  display: flex; flex-direction: column; gap: 1px;
}
.menu-tindakan .mt-menu a,
.menu-tindakan .mt-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 11px; border: 0; border-radius: 8px;
  background: none; font-family: inherit; font-size: 13px; text-align: left;
  color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.menu-tindakan .mt-menu a:hover,
.menu-tindakan .mt-menu button:hover { background: #f1eef7; color: var(--brand); }
.menu-tindakan .mt-menu .mt-pisah { height: 1px; margin: 4px 6px; background: var(--line); }
.menu-tindakan .mt-menu form { margin: 0; }
.menu-tindakan .mt-menu button.mt-danger { color: #b3261e; }
.menu-tindakan .mt-menu button.mt-danger:hover { background: #fbe9e7; color: #b3261e; }
.menu-tindakan .mt-menu .mt-nota { display: block; padding: 6px 11px; font-size: 11.5px; color: var(--muted); }
/* Item tindakan yang belum tersedia (cth. laporan sebelum sesi dihantar). */
.menu-tindakan .mt-menu .mt-lumpuh {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 11px; border-radius: 8px;
  font-size: 13px; white-space: nowrap; color: var(--muted); cursor: not-allowed;
}
.menu-tindakan .mt-menu .mt-lumpuh:hover { background: none; }

/* Bar eksport bundle (bawah kotak carian / chip bilangan pesakit). */
.eksport-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.eksport-bar .eb-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); margin-right: 2px;
}

/* ---------- Halaman Laporan Pesakit ---------- */
/* Nilai wajib sejarah kesihatan dalam kad kepala. */
.lapor-medan {
  flex-basis: 100%; margin-top: 4px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 18px;
}
.lapor-medan > div { min-width: 0; }
.lapor-medan span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.lapor-medan b { font-size: 13.5px; font-weight: 600; }

/* Rumusan: status + keputusan. */
.rumus-status { display: flex; flex-wrap: wrap; gap: 22px; }
.rumus-status .rs-item { display: flex; flex-direction: column; gap: 5px; }
.rumus-status .rs-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.rumus-status .badge { align-self: flex-start; font-size: 13px; padding: 4px 12px; }

/* Rumusan domain: satu baris = nama + tanda + %, dengan bar isian tunggal. */
.rumus-domain { margin-top: 10px; display: flex; flex-direction: column; gap: 13px; }
.rd-baris { display: flex; flex-direction: column; gap: 5px; }
.rd-baris .rd-atas { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rd-baris .rd-nama { font-size: 13.5px; font-weight: 600; }
.rd-baris .rd-nilai { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; }
/* Bar isian tunggal (peratus "Sudah boleh"). */
.bar1 { display: block; height: 9px; border-radius: 5px; background: var(--line); overflow: hidden; }
.bar1 > i { display: block; height: 100%; border-radius: 5px; }
/* Kapsyen kecil bawah bar (setuju/berbeza/jumlah). */
.rd-kaki { font-size: 11.5px; color: var(--muted); margin-top: 4px; display: block; }

/* Heatmap prestasi domain x kumpulan umur. */
.heat-jadual td.heat-sel { text-align: center; vertical-align: middle; padding: 8px 10px; }
.heat-jadual .heat-num { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.heat-jadual .heat-kecil { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.heat-jadual td.heat-kosong { text-align: center; color: var(--line2); }
.heat-cap { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 2px; border: 1px solid rgba(0,0,0,.06); }

/* Kapsyen kecil bawah lencana (senarai pesakit). */
.sel-status .sel-nota, .sel-keputusan .sel-nota { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
/* Sel Keputusan terapis kosong (belum direkod). */
.sel-keputusan .sel-kosong { color: var(--muted); }

/* Catatan (ibu bapa + terapis) pada laporan. */
.catatan-blok + .catatan-blok { margin-top: 14px; }
.catatan-blok .ct-tajuk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--brand); margin-bottom: 6px; }
.catatan-blok .ct-teks { font-size: 13px; line-height: 1.55; margin: 0; white-space: pre-line; }
.catatan-blok .ct-kaki { font-size: 11px; font-style: italic; color: var(--muted); margin: 5px 0 0; line-height: 1.4; }
.catatan-blok .ct-senarai { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.catatan-blok .ct-senarai li { display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--line2); padding-left: 10px; }
.catatan-blok .ct-soalan { font-size: 12px; color: var(--muted); }
.catatan-blok .ct-nota { font-size: 13px; line-height: 1.5; }

/* Perbandingan sesi (progres). */
.banding-kep {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; margin: 0 0 12px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
}
.banding-jadual { width: 100%; }
.banding-jadual td, .banding-jadual th { font-variant-numeric: tabular-nums; }

/* Pemisah "Perincian laporan". */
.lapor-pisah {
  font-size: 15px; margin: 6px 2px 12px; padding-bottom: 6px;
  border-bottom: 2px solid var(--line); color: var(--ink);
}

/* Kemajuan ikut kumpulan umur (guna carta_skala_ibubapa). */
.lapor-band + .lapor-band { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line2); }
.lapor-band h4 { font-size: 13px; margin: 0 0 6px; color: var(--brand); }

/* Kandungan modal maklumat penjaga + sejarah status. */
.modal-pj { padding: 10px 0; border-top: 1px solid var(--line2); }
.modal-pj:first-of-type { border-top: 0; padding-top: 2px; }
.modal-pj-nama { font-size: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.modal-pj-info { font-size: 13px; color: var(--muted); margin-top: 3px; }
.modal-pj-info a { color: var(--brand); text-decoration: none; }
.modal-status { width: 100%; margin-top: 4px; }
.modal-status th { font-size: 11px; }
.modal-status td { padding: 9px 10px; }

/* Pengurusan Pengguna (halaman jemputan gabungan). */
.pu-kepala { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pu-butang { display: flex; gap: 8px; flex-wrap: wrap; }
.pu-kecil { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pu-tindak { display: flex; gap: 6px; flex-wrap: wrap; }
.pu-tindak form { margin: 0; }
.pu-opsyen { font-weight: 400; color: var(--muted); font-size: 12px; }
.pu-medan { margin-bottom: 12px; }
.pu-medan > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
/* Input pilih fail: tiada latar/border kotak (buang rupa medan teks). */
.fail-pilih { display: block; width: 100%; font-size: 13px; padding: 4px 0; background: none; border: 0; color: var(--ink); }
.fail-pilih::file-selector-button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  margin-right: 10px; padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--line2); background: #fff; color: var(--brand);
}
.fail-pilih::file-selector-button:hover { background: #f1eef7; }
.btn.kecil { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn.danger { color: #b3261e; border-color: #e6b4b0; }

/* ----------------------------------------------------------------
   Import pukal — halaman penuh (Import pukal pengguna & Upload pelajar).
   Diselaraskan dengan gaya MODAL "Import pukal pengguna" (admin/jemputan.php):
   langkah bernombor + pautan muat turun template gaya teks. Diskop di bawah
   `.import-page` supaya tidak melanggar halaman lain. Nilai sepadan dengan
   <style> dalam modal itu supaya rupa kedua-duanya SAMA.
   ---------------------------------------------------------------- */
.import-page .import-langkah { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; }
.import-page .import-langkah .il-no {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.import-page .import-langkah .il-isi { flex: 1 1 auto; min-width: 0; }
.import-page .import-langkah .il-tajuk { font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--ink); }

/* Pautan muat turun template — teks jenama + anak panah (bukan butang). */
.import-page .btn-muatturun {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--brand);
  text-decoration: none; padding: 0;
}
.import-page .btn-muatturun:hover { text-decoration: underline; }

/* Baris tindakan bawah borang import: pemisah halus di atas butang. */
.import-page .import-tindak {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------------
   Kad profil pelajar (Lihat pelajar / Profil Saya pelajar).
   ---------------------------------------------------------------- */
.kp-kad .kp-atas { display: flex; align-items: center; gap: 14px; }
.kp-avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.kp-idn .kp-nama { margin: 0 0 5px; font-size: 18px; }
.kp-lencana { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.kp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.kp-grid > div { display: flex; flex-direction: column; gap: 2px; }
.kp-l { font-size: 11.5px; color: var(--faint); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kp-v { font-size: 14px; color: var(--ink); }
/* Dalam modal: ratakan kad (buang bayang/jarak berlebihan). */
.kp-modal .card { box-shadow: none; border: 1px solid var(--line); padding: 14px; margin-top: 12px; }
.kp-modal .card:first-child { margin-top: 0; }
.kp-modal .kp-avatar { width: 46px; height: 46px; font-size: 19px; }
.kp-modal .kp-idn .kp-nama { font-size: 16px; }

/* ----------------------------------------------------------------
   Wordmark jenama e-SMiLE (SVG teks + nama penuh).
   ---------------------------------------------------------------- */
.wm { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; }
.wm-svg { display: block; width: auto; }
.wm-sub { font-size: 10.5px; font-weight: 500; color: var(--muted); line-height: 1.3; letter-spacing: .01em; }
.wm-sub.putih { color: rgba(255, 255, 255, .82); }

/* Modal lebar untuk kandungan penuh (maklumat + sejarah kesihatan). */
.modal.modal-lebar { max-width: 880px; }
.modal .modal-isi { min-height: 60px; }
/* Bar alat modal: butang di kiri, tutup ditolak ke kanan. */
.modal-alat { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.modal-alat .mclose { margin-left: auto; float: none; }
/* Kandungan cetak (.lap) dalam modal: buang chrome kad berganda. */
.modal .modal-isi .lap {
  max-width: none; margin: 0; padding: 0 2px; box-shadow: none; border-radius: 0;
}
/* Supaya menu tidak dipotong oleh kotak jadual bila dibuka: matikan
   overflow DAN `contain: paint` (kedua-duanya memotong limpahan menu). */
.tblwrap:has(.menu-tindakan[open]) { overflow: visible; contain: none; }
.jadual-kosong { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }

th.boleh-susun { cursor: pointer; user-select: none; position: relative; }
th.boleh-susun:hover { color: var(--brand); }
th.boleh-susun:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Anak panah susun INLINE selepas teks tajuk supaya ia rapat dengan label
   (bukan terapung di hujung kanan lajur yang lebar). */
th.boleh-susun a::after { content: "↕"; margin-left: 6px; font-size: 11px; opacity: .4; }
th.susun-naik  a::after { content: "↑"; opacity: 1; color: var(--brand); }
th.susun-turun a::after { content: "↓"; opacity: 1; color: var(--brand); }

/* Jadual isih-pihak-klien (app.js): tajuk teks biasa tanpa <a> dalam sel,
   jadi panah diletak terus pada <th> supaya ikonnya muncul sama macam jadual
   pesakit. */
th.boleh-susun:not(:has(a))::after { content: "↕"; margin-left: 6px; font-size: 11px; opacity: .4; }
th.susun-naik:not(:has(a))::after { content: "↑"; opacity: 1; color: var(--brand); }
th.susun-turun:not(:has(a))::after { content: "↓"; opacity: 1; color: var(--brand); }

/* Keadaan kosong — beritahu pengguna apa yang boleh dibuat seterusnya */
.kosong { text-align: center; padding: 26px 18px; }
.kosong .k-ic { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.kosong .k-tajuk { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.kosong .k-teks { font-size: 13.5px; color: var(--muted); max-width: 46ch; margin: 0 auto 14px; line-height: 1.6; }

/* Tab tapisan (senarai temu janji) */
.tapisan { display: flex; gap: 6px; flex-wrap: wrap; }
.tapisan-tab {
  font-size: 13px; padding: 7px 13px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.tapisan-tab:hover { border-color: #bcd5f0; color: var(--brand); }
.tapisan-tab.on { background: #eaf2fb; border-color: #bcd5f0; color: var(--brand); font-weight: 700; }

/* Tindakan dalam sel jadual — borang POST yang kelihatan seperti pautan.
   POST dan bukan pautan kerana ia mengubah data; GET tidak sepatutnya. */
.baris-tindakan { display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: center; }
.baris-tindakan form { display: inline; }
.pautan-btn {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line2); color: var(--brand);
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 40, 80, .05);
  transition: background .12s, border-color .12s, color .12s;
}
.pautan-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.pautan-btn.bahaya { color: var(--tiada); border-color: #f3c6c2; }
.pautan-btn.bahaya:hover { background: var(--tiada); border-color: var(--tiada); color: #fff; }

/* ================================================================
   HEADER JALUR PENUH
   Header perlu permukaannya sendiri, jika tidak navigasi lebur ke
   dalam kandungan dan pengguna tidak dapat melihat di mana ia berakhir.
   ================================================================ */
.apptop {
  background: var(--panel);
  border-bottom: 1px solid var(--line2);
  box-shadow: 0 1px 3px rgba(20, 40, 80, .05);
  margin-bottom: 22px;
}
.apptop-dalam {
  max-width: 1100px; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: stretch; gap: 20px; flex-wrap: wrap;
}
/* .wrap membawa padding atasnya sendiri; header sudah memberi jarak */
.apptop + .wrap { padding-top: 0; }

.apptop .brand,
.apptop .usermenu { padding: 11px 0; }

/*
 * Nav sebagai TAB bergaris bawah, bukan butang dalam bekas.
 *
 * Versi sebelum ini membungkus pautan dalam kotak berbingkai bergaya
 * "segmented control". Corak itu untuk suis pilihan, bukan navigasi —
 * ia menambah dua bingkai bertindih dan kelihatan berat.
 *
 * Pautan kini setinggi header, dan garis aktif duduk TEPAT atas sempadan
 * bawah header (margin-bottom:-1px menariknya menutup sempadan 1px itu).
 */
.apptop .nav {
  display: flex; align-items: stretch; gap: 2px;
  background: none; border: 0; padding: 0;
}
.apptop .nav a {
  display: flex; align-items: center;
  padding: 0 14px; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; font-size: 13.5px; color: var(--muted); white-space: nowrap;
}
.apptop .nav a:hover { background: none; color: var(--ink); border-bottom-color: var(--line2); }
.apptop .nav a.on { color: var(--brand); font-weight: 700; border-bottom-color: var(--brand); }

/*
 * Lencana bilangan pada item navigasi.
 *
 * Bulat, bukan segi empat: bentuk bulat dibaca sebagai "pemberitahuan"
 * manakala segi empat kecil dibaca sebagai label. min-width menjaga bentuk
 * bulat pada nombor satu digit.
 */
.navlen {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}
/* Lencana real-time disembunyikan bila 0 (atribut `hidden` perlu diperkuat
   kerana `.navlen` menetapkan display sendiri). */
.navlen[hidden] { display: none; }

/* Teks khusus pembaca skrin — kekal dalam susun atur, tidak kelihatan. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.apptop .usermenu { margin-left: auto; }

@media (max-width: 900px) {
  .apptop-dalam { padding: 0 16px; gap: 12px; }
  .apptop .nav { width: 100%; order: 3; overflow-x: auto; border-top: 1px solid var(--line); }
  .apptop .nav a { padding: 11px 12px; margin-bottom: 0; }
  .apptop .usermenu { margin-left: auto; }
}

/* Kad temu janji untuk ibu bapa — "bila" didahulukan, kerana itu yang
   mereka datang untuk cari. Kad, bukan baris jadual: ibu bapa membaca
   satu atau dua temu janji, bukan mengimbas senarai panjang. */
.tj-kad {
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--radius); padding: 15px 17px; background: var(--panel2);
}
.tj-bila { font-size: 16.5px; font-weight: 800; color: var(--brand); margin-bottom: 3px; }
.tj-nama { font-size: 14.5px; font-weight: 700; }
.tj-meta { font-size: 13px; color: var(--muted); margin-top: 5px;
           display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tj-nota { font-size: 13px; color: var(--muted); margin: 9px 0 0;
           padding-top: 9px; border-top: 1px dashed var(--line2); }

/* Petak temu janji ringkas pada kad anak (halaman utama ibu bapa) */
.tj-ringkas {
  display: flex; gap: 10px; align-items: flex-start;
  background: #eaf2fb; border: 1px solid #bcd5f0; border-radius: 10px;
  padding: 10px 12px; margin: 10px 0 12px; font-size: 13.5px; line-height: 1.5;
}
.tj-ringkas .tj-ic { font-size: 16px; line-height: 1.2; }

/* Kad pintas pada papan pemuka admin */
.kad-pintas {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); color: inherit;
}
.kad-pintas:hover { border-color: #bcd5f0; box-shadow: 0 2px 6px rgba(20,40,80,.10); }
.kad-pintas .kp-ic { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.kad-pintas .kp-tajuk { font-size: 15px; font-weight: 800; }
.kad-pintas:hover .kp-tajuk { color: var(--brand); }
.kad-pintas .kp-teks { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Kotak persetujuan kajian pada borang pendaftaran */
.persetujuan {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 13px; margin-bottom: 18px;
  font-size: 13px; line-height: 1.6; color: var(--muted); cursor: pointer;
}
.persetujuan input { margin-top: 2px; flex: none; }
.persetujuan:hover { border-color: #bcd5f0; }

/* ================================================================
   .note — pembetulan
   ----------------------------------------------------------------
   `.note` dalam ui.css direka sebagai NOTA KAKI: ia membawa
   border-top, margin-top:24px dan padding-top:14px supaya terpisah
   daripada kandungan di atasnya.

   Tetapi ia digunakan meluas sebagai petunjuk kecil di bawah medan
   borang. Dalam kes itu penulis menambah `style="margin-top:5px"`,
   yang mengatasi margin TETAPI bukan border — jadi satu garis
   tergantung muncul di bawah setiap petunjuk.

   Di sini `.note` dijadikan petunjuk sebaris (tiada garis), dan
   nota kaki sebenar menggunakan `.note-kaki`. ui.css tidak disentuh
   kerana ia dikongsi dengan folder mockup/.
   ================================================================ */
.note {
  margin-top: 6px;
  border-top: 0;
  padding-top: 0;
  line-height: 1.55;
}

/* Nota kaki sebenar — terpisah daripada kandungan di atasnya */
.note-kaki {
  font-size: 12px; color: var(--muted); line-height: 1.55;
  margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px;
}

/* ----------------------------------------------------------------
   Peralihan bahagian dalam wizard pemerhatian

   Nama peringkat ("Satu peringkat lebih muda") dibawa oleh <b> dan
   julat umur mengekor sebagai maklumat kedua. Susunan itu penting:
   ibu bapa perlu tahu KEDUDUKAN bahagian dahulu, kerana itu yang
   memberi makna kepada julat umur yang mengikutinya.
   ---------------------------------------------------------------- */
.wiz-bahagian {
  font-size: 12.5px; color: var(--muted); margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.wiz-bahagian b { color: var(--brand); font-size: 14px; }
.wiz-bahagian .wb-julat { font-size: 12.5px; }

/* Sebab bahagian ini muncul. Dipapar pada soalan pertama sahaja. */
.wiz-sebab {
  background: #f7f9fc;
  border: 1px solid #cddcee;
  border-left: 3px solid var(--brand);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #234b74;
  margin-bottom: 16px;
}

/* Turun satu peringkat ialah pergerakan yang paling mudah disalah baca
   sebagai berita buruk. Ia diberi warna yang menenangkan dan bukan
   warna amaran, kerana ia memang bukan amaran. */
.wiz-sebab.turun {
  background: #f2f8f4;
  border-color: #cfe6d8;
  border-left-color: var(--ada);
  color: #24603f;
}

/* Jejak bahagian: apa yang sudah dilalui. Tiada jumlah keseluruhan,
   kerana sistem sendiri belum tahu berapa banyak lagi yang akan ada. */
.wiz-jejak {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center; margin-top: 16px;
}

.wiz-jejak .wj {
  font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line2);
  color: var(--muted);
}

.wiz-jejak .wj.on {
  background: var(--brand); border-color: var(--brand);
  color: #fff; font-weight: 700;
}

/* Syarat kata laluan — satu baris, panduan sebelum menaip.
   TIADA contoh kata laluan dipapar: apa-apa contoh yang ditunjukkan kepada
   setiap pendaftar akan digunakan oleh sebahagian mereka, dan menjadi
   tekaan pertama bagi sesiapa yang membaca halaman ini. */
.pw-syarat {
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
  margin: -6px 0 15px;
}
.pw-syarat b { color: var(--ink); }

/* Kad peranan pada halaman awam: hanya kad ibu bapa boleh diklik.
   Kad kakitangan & admin bersifat maklumat sahaja — kesan hover pada
   sesuatu yang tidak boleh diklik ialah janji palsu kepada pengguna. */
div.rolecard:hover { transform: none; box-shadow: var(--shadow); }
.rolecard .rolechip { margin-top: 12px; }

/* Tiga langkah pada borang pendaftaran.
   Komponen .flow direka untuk lajur lebar; dalam kad auth yang sempit ia
   terputus dan meninggalkan anak panah tergantung di tengah. */
.daftar-langkah{list-style:none;counter-reset:dl;margin:0 0 20px;padding:14px 16px;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px}
.daftar-langkah li{counter-increment:dl;display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:var(--ink);padding:5px 0}
.daftar-langkah li::before{content:counter(dl);flex-shrink:0;width:22px;height:22px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:700;
  display:grid;place-items:center}

/* Syarat kata laluan duduk antara label dan medannya. */
.fld + .pw-syarat{margin:-2px 0 7px}

/* Senarai semak kata laluan langsung (✓ / ✕ semasa menaip). */
.pw-cek { list-style: none; margin: 7px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pw-cek li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); transition: color .12s; }
.pw-cek li .pw-ic {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; background: var(--line); color: var(--muted);
  transition: background .12s, color .12s;
}
.pw-cek li .pw-ic::before { content: '\2715'; }
.pw-cek li.ok { color: var(--ink); }
.pw-cek li.ok .pw-ic { background: #d8f0df; color: #1f7a3d; }
.pw-cek li.ok .pw-ic::before { content: '\2713'; }

/* Butang papar/sembunyi kata laluan (mata) — dipasang oleh app.js. */
.pw-bungkus { position: relative; display: block; }
.pw-bungkus > .input { width: 100%; padding-right: 42px; }
.pw-mata {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px;
  background: none; cursor: pointer; font-size: 16px; line-height: 1; opacity: .55;
}
.pw-mata:hover, .pw-mata.on { opacity: 1; background: #f1eef7; }

/* Nota amaran ringkas bawah borang kata laluan. */
.pw-nota { font-size: 12.5px; color: #b3261e; margin: 0 0 10px; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Butang pengesahan memusnahkan (merah pejal). */
.btn.btn-bahaya { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn.btn-bahaya:hover { background: #97170f; border-color: #97170f; box-shadow: 0 2px 8px rgba(179,38,30,.25); }
.modal.modal-sahkan { max-width: 440px; }

/* Senarai pilih pesakit (modal Tambah pesakit seliaan). */
.tp-senarai { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.tp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.tp-item:hover { background: #f1eef7; }
.tp-item input { flex: 0 0 auto; }

/* Medan telefon dengan awalan +60. */
.tel-grup { display: flex; align-items: stretch; }
.tel-grup .tel-prefiks {
  display: inline-flex; align-items: center; padding: 0 12px;
  background: var(--panel2); border: 1px solid var(--line2); border-right: 0;
  border-radius: 10px 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.tel-grup .tel-input { border-radius: 0 10px 10px 0; }

/* Ralat medan borang (cth e-mel sudah wujud) — sempadan merah + teks di bawah. */
.input.ralat { border-color: var(--tiada); box-shadow: 0 0 0 2px rgba(179,38,30,.12); }
.fld-ralat { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--tiada); }
/* Banner ralat umum dalam modal (bukan toast). */
.modal-ralat { margin: 0 0 12px; padding: 9px 12px; border-radius: 9px; background: #fbe9e7; border: 1px solid #f3c6c2; color: #b3261e; font-size: 13px; font-weight: 600; }
/* Kad tindakan disembunyikan oleh carian/pagination Pemberitahuan — `.tindakan-kad`
   menetapkan display:flex sendiri, jadi atribut `hidden` perlu diperkuat. */
.tindakan-kad[hidden] { display: none; }

/* =====================================================================
   NAVIGASI SISI
   Sidebar pada skrin lebar, laci pada skrin sempit, daripada SATU set
   pautan. Salinan kedua untuk telefon ialah perkara kedua yang perlu
   diselaraskan, dan ia tidak akan kekal selaras.
   ===================================================================== */

body.ada-sisi { background: var(--bg); }

.rangka { display: flex; min-height: 100vh; }

.sisi {
  width: 224px; flex: 0 0 224px; background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40;
}

.sisi-jenama {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 14px 13px; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.sisi-jenama b { font-size: 14px; display: block; letter-spacing: -.2px; }
.sisi-jenama .siapa {
  font-size: 9.5px; color: var(--muted); display: block;
  letter-spacing: .06em; text-transform: uppercase; margin-top: 1px;
}

.sisi nav { padding: 10px 8px; flex: 1 0 auto; }
.sisi nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px; margin-bottom: 2px;
  font-size: 13px; color: var(--ink); text-decoration: none; position: relative;
}
.sisi nav a:hover { background: var(--panel2); }

/* Warna lembut dengan penanda tepi, bukan blok pekat.
   Entri yang anda sedang berada padanya ialah yang paling KURANG
   memerlukan penegasan: anda sudah nampak di mana anda berada. Blok pekat
   pada entri yang muncul di setiap skrin menjadikan sidebar kelihatan
   gelap sepanjang masa. */
.sisi nav a.on {
  background: var(--panel2); color: var(--brand); font-weight: 700;
}
.sisi nav a.on::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.sisi nav a .nav-label { flex: 1 1 auto; }
.sisi nav a .nav-ikon { flex: 0 0 17px; opacity: .8; }
.sisi nav a.on .nav-ikon { opacity: 1; }

.sisi-kaki { border-top: 1px solid var(--line); padding: 10px 8px; }

/* Baris identiti ialah PAPARAN, bukan pautan.

   Ia pernah dijadikan pautan ke profil, dengan hover dan anak panah.
   Pemilik projek melaporkan tidak perasan ia boleh diklik. Blok nama
   dan e-mel kelihatan seperti label identiti kerana memang itulah
   rupanya di setiap aplikasi lain, dan penanda kecil tidak mengatasi
   jangkaan itu. Pautan yang perlu ditemui membawa namanya sendiri —
   lihat "Profil saya" dalam .kaki-tindakan. */
.sisi-kaki .siapa-baris {
  display: flex; align-items: center; gap: 9px; padding: 2px 6px 10px;
}
.sisi-kaki .nm {
  font-size: 11.5px; line-height: 1.3; flex: 1 1 auto; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sisi-kaki .nm span {
  display: block; font-size: 10px; color: var(--muted); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis;
}
/* Peranan pengguna: dibezakan daripada e-mel dengan warna jenama. */
.sisi-kaki .nm .peranan-sisi {
  color: var(--brand); font-weight: 600; font-size: 10.5px;
}

.kaki-tindakan { display: grid; gap: 6px; }
.kaki-tindakan .keluar {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink); font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 10px; cursor: pointer; text-align: left; text-decoration: none;
}
.kaki-tindakan .keluar:hover { background: var(--line); }
/* "Profil saya" disorot bila halaman profil sedang dibuka. */
.kaki-tindakan .keluar.aktif {
  background: #eaf2fb; border-color: #bcd5f0; color: var(--brand); font-weight: 700;
}
.kaki-tindakan .keluar.aktif:hover { background: #e0edfb; }

.rangka-utama { flex: 1 1 auto; min-width: 0; }

/* ----------------------------------------------------------------
   Lebar kandungan

   Kandungan bermula sebaik sahaja selepas sidebar, bukan terapung di
   tengah ruang yang tinggal.

   Had 1080px yang asal terlalu ketat. Pada monitor 2133px yang
   sebenarnya digunakan, ia berhenti pada 61% skrin dan meninggalkan
   829px kosong di sebelah kanan, sementara jadual pesakit enam lajur
   berhimpit dalam bahagian kiri. Ia dilaporkan sebagai "macam separuh
   sahaja", yang tepat.

   Had itu wujud untuk menjaga panjang baris teks. Tetapi panjang baris
   ialah masalah bagi PERENGGAN, bukan bagi jadual, dan halaman
   kakitangan serta admin hampir keseluruhannya jadual. Jadi hadnya
   dinaikkan di sini dan panjang baris dijaga pada elemen teks itu
   sendiri (lihat .teks-baca di bawah) — di tempat masalah itu
   sebenarnya berada.

   Had atas dikekalkan supaya monitor ultra-lebar tidak meregangkan
   jadual sehingga mata hilang jejak baris.
   ---------------------------------------------------------------- */
.rangka-utama .wrap { max-width: 1560px; margin: 0; padding: 22px 26px 40px; }

/* ----------------------------------------------------------------
   Lebar: KANDUNGAN memenuhi, BORANG tidak

   Ini garis yang sepatutnya ditarik dari awal, dan saya salah pada
   kedua-dua belahnya sebelum sampai ke sini.

   Kandungan — teks, jadual, carta, papan pemuka — MEMENUHI lebar
   bahagiannya. Teks yang berhenti separuh jalan kelihatan seperti
   halaman yang terpotong, dan itu masalah yang lebih besar daripada
   baris yang panjang. `.teks-baca` tidak lagi menghadkan apa-apa.

   Borang TIDAK. Kotak input selebar 1200px untuk sebuah nama bukan
   lebih baik daripada kotak selebar 500px; ia lebih teruk, kerana
   mata mesti merentasi keseluruhan baris untuk mengesahkan apa yang
   ditaip. Halaman yang tujuannya ialah menaip mendapat ukuran yang
   selesa.

   Ujian yang membezakannya: adakah lebar tambahan MEMBAWA sesuatu?
   Satu lajur jadual lagi, ya. Satu kotak nama yang lebih panjang,
   tidak.

   `biografi/borang` sengaja TIDAK menerima kelas ini: 26 medan
   merentas 13 baris grid dua dan tiga lajur benar-benar menggunakan
   ruang itu.
   ---------------------------------------------------------------- */
.teks-baca { max-width: none; }

.kad-borang { max-width: 640px; }

/* TIADA had lebar pada perenggan.
   Sepanduk, nota kad dan perenggan mengisi lebar bahagiannya, sama
   seperti jadual dan grid di sebelahnya. Lihat nota `.teks-baca`. */

.bar-tel { display: none; }

/* --- skrin sempit: sidebar menjadi laci ----------------------------- */
@media (max-width: 900px) {
  .rangka { display: block; }

  .bar-tel {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 50;
    background: var(--panel); border-bottom: 1px solid var(--line);
    padding: 8px 12px;
  }
  .bar-tel .di-mana { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
  .bar-tel .di-mana .apl {
    display: block; font-size: 9px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
  }
  .bar-tel .di-mana b {
    display: block; font-size: 14px; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* 42px, bukan 32. Ini satu-satunya jalan masuk ke navigasi pada
     telefon, dan sasaran sentuh yang lebih kecil daripada hujung jari
     bermakna orang tersilap tekan. */
  .burger {
    background: none; border: 1px solid var(--line); border-radius: 10px;
    width: 42px; height: 42px; display: grid; place-items: center;
    cursor: pointer; color: var(--ink); position: relative; flex: 0 0 42px;
  }
  .burger .titik { position: absolute; top: -5px; right: -5px; }

  .ava-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    border-radius: 50%; flex: 0 0 auto;
  }

  .sisi {
    position: fixed; inset: 0 auto 0 0; height: 100dvh; width: 262px;
    transform: translateX(-100%); transition: transform .18s ease;
    pointer-events: none; box-shadow: 0 0 40px rgba(20,40,80,.18);
  }
  .sisi[data-buka="true"] { transform: none; pointer-events: auto; }

  .tabir {
    display: none; position: fixed; inset: 0; z-index: 39;
    background: rgba(15, 23, 42, .45);
  }
  .tabir[data-buka="true"] { display: block; }

  .rangka-utama .wrap { padding: 16px 14px 34px; }
}

@media (prefers-reduced-motion: reduce) { .sisi { transition: none; } }

/* ================================================================
   Wajib vs pilihan
   ================================================================
   Borang biografi mempunyai 36 ruangan dan hanya DUA yang benar-benar
   diperlukan. Sebelum ini tiada apa-apa di skrin yang mengatakan
   demikian, jadi ibu bapa membacanya sebagai 36 ruangan wajib dan
   berasa tertekan sebelum menaip apa-apa.

   Dua penanda sahaja, bukan satu label pada setiap ruangan:
   bintang pada yang diperlukan, dan SATU ayat di kepala setiap
   langkah untuk yang selebihnya. Menandakan 34 ruangan "(pilihan)"
   hanya menambah 34 perkara lagi untuk dibaca.
   ---------------------------------------------------------------- */
.wajib {
  color: #c0392b;
  font-weight: 700;
  margin-left: 2px;
}

.wajib-kunci {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 14px;
}

.wajib-kunci .wajib { margin-left: 0; }

/* Kad butiran (penjaga/e-mel/telefon/umur) pada dashboard penjaga. */
.kad-butir { display: grid; gap: 6px 14px; margin: 2px 0 4px; font-size: 13.5px; }
.kad-butir > div {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px dashed var(--line); padding-bottom: 5px;
}
.kad-butir > div:last-child { border-bottom: 0; }
.kad-butir span { color: var(--muted); flex: 0 0 auto; }
.kad-butir b { text-align: right; word-break: break-word; }

/* Sub-seksyen berlabel dalam kad anak (Bahasa, Pendengaran & penglihatan). */
.kad-seksyen { margin: 8px 0 4px; }
.kad-seksyen .ks-tajuk {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 4px;
}
.kad-seksyen .kad-butir { margin: 0; }

/* Keputusan saringan pada kad: keputusan pencapaian + cadangan terapis. */
.kad-keputusan {
  margin: 10px 0 2px; padding: 10px 12px;
  background: #f6fbfa; border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: 0 9px 9px 0;
}
.kad-keputusan .kk-tajuk {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 6px;
}
.kad-keputusan .kk-baris {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13.5px; padding: 3px 0;
}
.kad-keputusan .kk-baris span { color: var(--muted); flex: 0 0 auto; }
.kad-keputusan .kk-baris b { text-align: right; word-break: break-word; }
.kad-keputusan .kk-catatan {
  margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--ink); white-space: pre-line;
}
.kad-keputusan .kk-nota { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

/* Amaran lembut (cth: sejarah kesihatan belum lengkap). Teks guna warna ink
   biasa supaya jelas dibaca; latar/ikon jingga memberi isyarat amaran. */
.amaran-lembut {
  display: flex; gap: 9px; align-items: flex-start;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 9px;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.55;
  color: var(--ink); font-weight: 700;
}
.amaran-lembut b { color: var(--ink); }
:root:not([data-theme="light"]) .amaran-lembut,
:root[data-theme="dark"] .amaran-lembut {
  background: rgba(251, 146, 60, .12); border-color: rgba(251, 146, 60, .35);
}

/* Kepala kad anak: nama kiri, chip status kanan (searis). */
.kad-anak-kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.kad-anak-kepala h3 { margin: 0; }
.kad-anak-kepala .badge { flex: 0 0 auto; }

/* Kepala langkah: memberitahu apa yang diperlukan SEBELUM ruangan. */
.langkah-nota {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #f2f8f4;
  border: 1px solid #cfe6d8;
  border-left: 3px solid var(--ada);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #24603f;
  margin-bottom: 18px;
}

.langkah-nota.perlu {
  background: #f7f9fc;
  border-color: #cddcee;
  border-left-color: var(--brand);
  color: #234b74;
}

.langkah-nota .ln-ic { flex: 0 0 auto; font-size: 15px; line-height: 1.4; }

/* Ruangan susulan yang hanya masuk akal selepas jawapan "Ya".
   Disembunyikan sehingga relevan supaya kiraan ruangan yang dilihat
   ibu bapa bermula lebih rendah. */
.susulan[hidden] { display: none; }

.susulan {
  /* Garis aksen jenama — sama dengan kotak "Lain-lain" (.chip-lain-wrap)
     supaya kedua-dua kotak "muncul bila dipilih" konsisten. */
  border-left: 3px solid var(--brand);
  padding-left: 12px;
  margin-top: 14px;
}

/* Baris tindakan langkah: "langkau" mesti kelihatan sebagai jalan
   keluar yang sah, bukan sebagai kegagalan. */
.langkah-langkau {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
}

.langkah-langkau button {
  background: none;
  border: 0;
  padding: 4px 8px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}

.langkah-langkau button:hover { color: var(--brand); }

/* ================================================================
   Papan ibubapa: satu tindakan seterusnya
   ================================================================
   Kad anak dahulunya berakhir dengan empat butang bersaiz sama.
   Tiada satu pun daripadanya mengatakan yang mana perlu dibuat
   sekarang, jadi ibu bapa membuat keputusan kecil yang sama setiap
   kali mereka membuka halaman.

   Sekarang satu tindakan mendapat berat penuh, dan selebihnya
   menjadi pautan teks. Susunan visual itu ialah nasihat: buat yang
   ini, yang lain sedia bila anda perlukannya.
   ---------------------------------------------------------------- */
.langkah-anak {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.langkah-anak .la-nota {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 9px 0 0;
}

/* Menunggu ialah keadaan yang sah. Ia diberi warna menunggu, bukan
   warna ralat, dan tiada butang mati diletakkan di sebelahnya. */
.langkah-anak.menunggu .la-nota {
  background: var(--sedang-bg);
  border: 1px solid #f0dcae;
  border-radius: 9px;
  padding: 10px 12px;
  color: #8a5a00;
  margin-top: 0;
}

.pautan-sokongan {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  font-size: 13px;
}
/* Butang "Sejarah status" & "Permintaan Penilaian Semula" berbaris sama
   dengan pautan sokongan yang lain. */
.pautan-sokongan form { margin: 0; }

/* Pautan sokongan sebagai butang sekunder: putih dengan ikon, jelas boleh
   diklik, tetapi kekal sekunder supaya butang tindakan utama (.btn-xl)
   menonjol. Ikon mewarisi warna teks (currentColor), jadi ia bertukar
   biru bersama teks pada hover. */
.pautan-sokongan a,
.pautan-sokongan button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px;
  background: #fff; border: 1px solid var(--line2);
  color: var(--ink); text-decoration: none; font-weight: 600;
  font-family: inherit; font-size: 13px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 40, 80, .04);
  transition: background .12s, border-color .12s, color .12s;
}
.pautan-sokongan a:hover,
.pautan-sokongan button:hover { background: #f2f8fe; border-color: var(--brand); color: var(--brand); }
.pautan-sokongan a svg,
.pautan-sokongan button svg { flex-shrink: 0; }

/* Tindakan yang belum tersedia (cth. laporan sebelum sesi dihantar, atau
   permintaan yang sedang diproses) — kelihatan mati, tidak boleh diklik. */
.pautan-sokongan .ps-lumpuh {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px;
  background: #f6f7f9; border: 1px solid var(--line2);
  color: var(--muted); font-weight: 600; cursor: not-allowed;
}
.pautan-sokongan .ps-lumpuh svg { flex-shrink: 0; opacity: .7; }

.la-sokong {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 10px 0 0;
}

/* ================================================================
   Baris tindakan borang
   ================================================================
   `.aksi` sudah digunakan dalam borang retrospektif tetapi TIDAK
   pernah ditakrif dalam mana-mana stylesheet, jadi butang di dalamnya
   hanya mengalir sebagai teks sebaris tanpa jarak. Ia ditakrif di
   sini sekali, bukan digantikan pada setiap tapak panggilan.
   ---------------------------------------------------------------- */
.aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

/* ================================================================
   Profil: baris status akaun
   ================================================================
   Dua gerbang, dua baris. Ia dipisahkan kerana ia memang dua perkara
   berlainan: mengklik pautan e-mel membuktikan alamat, dan tiada
   pautan yang boleh menggantikan semakan kakitangan.
   ---------------------------------------------------------------- */
.status-baris {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.status-baris:first-of-type { border-top: 0; padding-top: 4px; }

.status-baris .badge { flex: 0 0 auto; margin-top: 1px; }

.status-baris b { display: block; font-size: 13.5px; }

.status-baris span:not(.badge) {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 2px;
}

/* ================================================================
   Ikon dalam badan halaman
   ================================================================
   Navigasi sisi membawa SVG yang tajam sementara badan halaman
   membawa emoji, dan kedua-duanya kelihatan bersebelahan pada setiap
   skrin kakitangan dan admin. Emoji dilukis berbeza pada setiap
   sistem: roda gigi ⚙️ dipapar sebagai glif kelabu yang pelik pada
   mesin ujian, sementara ikon navigasi di sebelahnya tajam.

   Emoji kekal pada skrin ibu bapa, di mana ia KANDUNGAN dan bukan
   hiasan: wajah dalam wizard ialah soalannya.
   ---------------------------------------------------------------- */

/* Penanda banner. `.pageintro` menetapkan warna teksnya sendiri
   mengikut peranan, dan `currentColor` mewarisinya, jadi ikon
   sentiasa sepadan dengan bannernya tanpa peraturan per-peranan.

   TIADA `font-size: 0` di sini. Versi pertama menetapkannya untuk
   membuang jurang baseline, dan ia MEMADAM setiap penanda emoji yang
   masih tinggal — termasuk tanda ✅ pada sepanduk "Selamat kembali"
   dalam susun atur yang dikongsi, dan setiap penanda pada skrin ibu
   bapa. Peraturan yang menyasarkan ikon baharu memusnahkan yang lama
   kerana kedua-duanya berkongsi kelas yang sama. Jurang itu
   diselesaikan pada <svg> sahaja. */
.pageintro .pi-ic {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.pageintro .pi-ic > svg { display: block; opacity: .85; }

/* Tajuk kad: ikon duduk pada garis dasar teks, bukan melayang. */
.ic-tajuk {
  vertical-align: -2px;
  margin-right: 3px;
  color: var(--brand);
}

h3 .ic-tajuk { flex: 0 0 auto; }

/* Keadaan kosong. Ikon garisan besar tanpa isian: keadaan kosong
   sepatutnya tenang, dan emoji berwarna menjadikannya isyarat. */
.kosong .k-ic { color: var(--line2); }

/* Hanya kotak yang membawa SVG menjadi flex. Penanda emoji pada skrin
   ibu bapa kekal sebagai teks berpusat seperti sebelum ini. */
.kosong .k-ic:has(> svg) { display: flex; justify-content: center; margin-bottom: 12px; }

.kosong .k-ic .ic-kosong { stroke-width: 1.5; }

/* Jubin pintasan admin. */
.kad-pintas .kp-ic {
  display: flex;
  color: var(--brand);
  margin-bottom: 8px;
}

/* Ikon dalam butang dan pautan sebaris. */
.ic-btn {
  vertical-align: -2px;
  margin-right: 2px;
  flex: 0 0 auto;
}

.badge .ic-btn { vertical-align: -1px; }

/* ================================================================
   Papan admin: perlu perhatian
   ================================================================
   Kiraan memberitahu keadaan; senarai ini memberitahu apa yang perlu
   dibuat. Setiap baris membawa jalan keluarnya sendiri, atau mengaku
   dengan jelas bahawa tiada satu pun wujud.
   ---------------------------------------------------------------- */
.perhatian { list-style: none; margin: 0; padding: 0; }

.perhatian li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.55;
}

.perhatian li:first-child { border-top: 0; padding-top: 2px; }
.perhatian li > span:first-of-type { flex: 1 1 auto; }
.perhatian .ph-ic { flex: 0 0 auto; margin-top: 1px; }

/* Boleh diselesaikan hari ini. */
.perhatian .ph-kini .ph-ic { color: var(--tiada); }

/* Bergantung pada pihak luar. Warna yang lebih senyap, kerana
   memberikannya warna amaran bermakna papan ini kelihatan cemas
   secara kekal atas sesuatu yang admin tidak boleh selesaikan. */
.perhatian .ph-menunggu .ph-ic { color: var(--muted); }

.perhatian a {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.perhatian .ph-luar {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .perhatian li { flex-wrap: wrap; }
  .perhatian a, .perhatian .ph-luar { margin-left: 28px; }
}

/* ================================================================
   Jadual kemahiran: lebar lajur
   ================================================================
   Lajur "Kemahiran" dahulunya `min-width: 220px` dan tiga lajur
   selebihnya lebar tetap, jadi setiap piksel tambahan pergi kepada
   lajur pertama. Selepas kandungan dinaikkan kepada 1560px itu
   bermakna teks kemahiran menduduki ~640px dan jawapan ibu bapa
   duduk 400px jauh di sebelah kanan, dengan ruang kosong di
   antaranya. Terapis membaca kemahiran, kemudian matanya perlu
   merentasi jurang itu untuk setiap baris.

   `table-layout: fixed` menjadikan lebar boleh diramal, dan lajur
   Catatan yang mendapat baki ruang — ia satu-satunya lajur di sini
   yang seseorang benar-benar menaip ke dalamnya.
   ---------------------------------------------------------------- */
.skilltable { table-layout: fixed; }

.skilltable th:first-child { width: 34%; }
.skilltable .kol-jawapan { width: 118px; }
/* Cukup lebar untuk "— setuju dengan ibubapa —" tanpa dipotong.
   Pilihan lalai itu ialah pilihan yang paling kerap dibiarkan, jadi
   ia mesti boleh dibaca sepenuhnya. */
.skilltable .kol-nilai { width: 252px; }
/* Lajur keempat tiada lebar: ia mengambil baki. */

/* ------------------------------------------------------------------
   Jadual data BACA SAHAJA, contohnya pada halaman Kutipan Data.
   Lebar tetap di atas ditala untuk EMPAT lajur skrin semakan. Jadual
   lapan lajur yang mewarisinya menjumlahkan lebih daripada 100% dan
   lajurnya bertindih: tajuk "Rujukan" dan "Sesi" bercantum menjadi satu
   perkataan yang tidak bermakna. Jadual ini tidak mengandungi medan
   input, jadi tiada apa yang perlu dilindungi daripada perubahan lebar.
   ------------------------------------------------------------------ */
.skilltable.jadual-data { table-layout: auto; }
.skilltable.jadual-data th:first-child { width: auto; }
.skilltable.jadual-data th, .skilltable.jadual-data td { white-space: nowrap; }
.skilltable.jadual-data th:first-child,
.skilltable.jadual-data td:first-child { white-space: normal; }

.skilltable td, .skilltable th { vertical-align: top; }
.skilltable td.sk { word-break: break-word; }

/* Baris kumpulan domain menggunakan gaya `.cat` yang sudah wujud
   dalam ui.css.

   TIADA `position: sticky` di sini. Percubaan pertama menetapkannya
   supaya nama domain kekal kelihatan semasa menatal, tetapi `.tblwrap`
   membawa `overflow-x: auto`, dan `overflow-x` yang bukan `visible`
   menjadikan paksi Y `auto` juga. Itu menjadikan `.tblwrap` bekas
   penatalannya sendiri, jadi `top: 0` merujuk kepada bekas itu dan
   bukan viewport — dan bekas itu tidak pernah menatal secara menegak.
   Peraturan itu tidak akan pernah aktif. CSS mati yang kelihatan
   berfungsi lebih teruk daripada tiada CSS. */

@media (max-width: 1100px) {
  .skilltable { table-layout: auto; }
  .skilltable th:first-child { width: auto; min-width: 220px; }
}

/* ================================================================
   Jalur langkah sebagai STATUS, bukan navigasi
   ================================================================
   `.stepper` dalam borang biografi ialah navigasi: setiap langkah
   satu pautan. Di sini ketiga-tiga langkah berlaku pada halaman yang
   sama, jadi tiada apa untuk dipautkan — jalur ini melaporkan sejauh
   mana kerja itu telah sampai.

   Kursor dan keadaan hover ditanggalkan supaya tiada apa yang
   menjanjikan klik yang tidak akan berlaku.
   ---------------------------------------------------------------- */
.stepper-status { margin-bottom: 16px; }

.stepper-status .st { cursor: default; }
.stepper-status .st:hover { border-color: var(--line2); color: var(--muted); }
.stepper-status .st.on:hover { border-color: var(--brand); color: var(--brand); }
.stepper-status .st.done:hover { color: var(--muted); }

/* ================================================================
   Bar tindakan melekat (skrin semakan)
   ================================================================
   Semakan berlaku dengan ibu bapa duduk di sebelah terapis. Dua band
   sahaja sudah menjadikan halaman itu 3.3 skrin, dan aliran boleh
   membuka lima band. Menyimpan tidak sepatutnya bermakna menatal
   melalui keseluruhannya dengan seseorang sedang menunggu.
   ---------------------------------------------------------------- */
.bar-tindakan {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  position: sticky;
  bottom: 12px;
  z-index: 20;
  /* Legap: kandungan menatal DI BAWAHNYA, jadi latar lut sinar akan
     menjadikan teks bertindih dan tidak boleh dibaca. */
  background: var(--panel);
  box-shadow: 0 -2px 16px rgba(20, 40, 80, .1), var(--shadow);
}

/* Pada skrin pendek bar melekat memakan terlalu banyak ruang yang
   tinggal, jadi ia kembali mengalir bersama halaman. */
@media (max-height: 560px) {
  .bar-tindakan { position: static; box-shadow: var(--shadow); }
}

/* ================================================================
   Tajuk bahagian dan kaki halaman
   ================================================================
   `.section-title` ialah 12px, kelabu, huruf besar, dengan jarak
   huruf. Bentuk itu ialah bentuk KAPSYEN. Diletak di atas kad putih
   besar pada latar yang hampir putih, ia hilang: dilaporkan sebagai
   "nampak dull sikit dan agak tenggelam", yang tepat.

   Ia menandakan bahagian utama halaman, jadi ia diberi bentuk TAJUK:
   lebih besar, warna dakwat penuh, dan garis yang merentasi lebar
   kandungan supaya sempadan bahagian itu kelihatan. Huruf besar
   dikekalkan kerana ia yang membezakannya daripada tajuk kad `h3`
   di bawahnya.
   ---------------------------------------------------------------- */
.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .08em;
  margin: 28px 0 12px;
}

/* Garis mengambil baki lebar, jadi bahagian itu membentang penuh
   walaupun tajuknya pendek. */
.section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line2);
}

/* TIADA peraturan `:first-of-type` di sini. Percubaan pertama
   menetapkan jarak atas yang lebih kecil untuk bahagian pertama, tetapi
   `.section-title` ialah <div> dan `:first-of-type` padan dengan <div>
   PERTAMA dalam induknya — yang hampir selalu `.pageintro`, bukan tajuk
   bahagian. Peraturan itu hampir tidak pernah padan dengan apa yang
   namanya cadangkan. */

/* ----------------------------------------------------------------
   Kaki halaman

   Nota penafian dihadkan kepada 78ch supaya baris boleh dibaca, yang
   betul untuk TEKS. Tetapi tanpa bekas, blok sempit itu duduk seorang
   diri di bawah kad selebar penuh dan kelihatan seperti halaman
   terpotong separuh.

   Jadi bekasnya membentang penuh dan teks di dalamnya kekal sempit:
   sempadan kelihatan, panjang baris tidak berubah.
   ---------------------------------------------------------------- */
.kaki-halaman {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line2);
}

.kaki-halaman .teks-baca { margin: 0; }

/* ================================================================
   Rekod pesakit: cara menghubungi keluarga
   ================================================================
   Nombor telefon dikutip sebagai WAJIB semasa pendaftaran kerana
   klinik menghubungi ibu bapa untuk menetapkan temu janji, tetapi
   rekod pesakit tidak pernah menunjukkannya. Mengumpulkan data
   wajib dan kemudian menyembunyikannya daripada orang yang
   memerlukannya ialah kos tanpa faedah.
   ---------------------------------------------------------------- */
.penjaga {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.pj-nama { font-size: 13.5px; font-weight: 700; }
.pj-nama .badge { margin-left: 5px; font-weight: 600; }

.pj-hubung {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.pj-tiada { color: var(--tiada); }

/* ================================================================
   Senarai pemberitahuan ibu bapa
   ================================================================
   Setiap baris dahulunya membawa lima atribut `style` sebaris, jadi
   pembezaan "baharu" tidak boleh melangkaui satu lencana. Ibu bapa
   yang membuka halaman ini mahu tahu apa yang baharu semasa
   mengimbas, bukan selepas membaca setiap tajuk.
   ---------------------------------------------------------------- */
.pbrt { list-style: none; margin: 0; padding: 0; }

.pbrt li {
  display: flex;
  gap: 12px;
  padding: 14px 12px;
  /* Sempadan pada bahagian ATAS, kecuali yang pertama: tiada garis
     tergantung di bawah item terakhir. */
  border-top: 1px solid var(--line);
  border-radius: 9px;
}

.pbrt li:first-child { border-top: 0; }

/* Belum dibaca: keseluruhan baris, bukan lencana sahaja. */
.pbrt li.baharu { background: var(--panel2); }
.pbrt li.baharu b { color: var(--ink); }

.pbrt .pb-ic { font-size: 21px; line-height: 1.1; flex: 0 0 auto; }
.pbrt .pb-isi { flex: 1 1 auto; min-width: 0; }

.pbrt .pb-kepala {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}

.pbrt .pb-masa {
  font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap;
}

.pbrt .pb-mesej { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.pbrt .pb-pautan { font-size: 13.5px; display: inline-block; margin-top: 4px; }

/* ================================================================
   Laporan: rumusan & perincian
   ================================================================
   Laporan dahulunya melaporkan satu band. FSK meminta rumusan DAN
   perincian (mesyuarat 28 Ogos 2026): satu untuk dibaca sekali
   pandang, satu lagi untuk disemak semula.
   ---------------------------------------------------------------- */
.lap-rumusan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 14px;
  margin-top: 8px;
}

.lap-rumusan > div {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
}

.lap-rumusan span { display: block; font-size: 10.5px; color: var(--muted); }
.lap-rumusan b { font-size: 16px; }

/* Seksyen "Keputusan terapis" pada laporan akhir — keputusan rujukan,
   cadangan & catatan yang telah disemak terapis. */
.lap-keputusan {
  border-left: 4px solid var(--brand);
  padding-left: 14px;
  background: #f6fbfa;
  border-radius: 0 8px 8px 0;
}
.lap-keputusan .lap-kep-baris {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 4px;
}
.lap-keputusan .lap-kep-label { font-size: 13px; color: var(--muted); }
.lap-keputusan .lap-kep-blok { margin-top: 8px; font-size: 13.5px; }
.lap-keputusan .lap-kep-teks { white-space: pre-line; margin-top: 2px; }

.lap-bhg-tajuk {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--brand);
  margin: 14px 0 6px;
}

.lap-bhg-tajuk span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}

.lap-perinci { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.lap-perinci th, .lap-perinci td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  vertical-align: top;
}
.lap-perinci thead th { font-weight: 700; color: var(--ink); background: var(--panel2); }
.lap-perinci .k-jwp { width: 22%; white-space: nowrap; }
.lap-perinci td i { color: var(--muted); font-size: 10.5px; }

/* ------------------------------------------------------------------
   Lockup logo UKM rasmi + nama klinik (rujukan HPKK).
   Dua varian: .ukm-putih (teks putih, latar gelap) dan .ukm-gelap
   (teks gelap, latar cerah). Partial: susunatur/_ukm.php.
   ------------------------------------------------------------------ */
.ukm-lock { display: inline-flex; align-items: center; gap: 10px; }
.ukm-lock .ukm-logo { height: 34px; width: auto; display: block; flex-shrink: 0; }
.ukm-lock .ukm-teks {
  font-size: 12.5px; line-height: 1.25; font-weight: 600; letter-spacing: .01em;
  padding-left: 10px; border-left: 1px solid var(--line2); max-width: 14em;
}
.ukm-lock.ukm-gelap .ukm-teks { color: var(--ink); border-left-color: var(--line2); }
.ukm-lock.ukm-putih .ukm-teks { color: rgba(255, 255, 255, .92); border-left-color: rgba(255, 255, 255, .38); }

/* Lockup dalam footer panel jenama auth */
.authbrand .ab-foot .ab-foot-teks { margin: 14px 0 0; }

/* Lockup di sebelah kanan header (halaman utama belum log masuk) */
.apptop-ukm { margin-left: auto; display: flex; align-items: center; }
/* Logo UKM sedikit lebih besar pada header awam — TIDAK terlalu besar kerana
   ia PNG (pecah/kabur bila diregang melebihi resolusi asalnya). */
.apptop-ukm .ukm-logo { height: 42px; }
.apptop-ukm .ukm-teks { font-size: 13px; max-width: 15em; }

@media (max-width: 520px) {
  .ukm-lock .ukm-logo { height: 28px; }
  .ukm-lock .ukm-teks { font-size: 11px; max-width: 11em; }
  .apptop-ukm .ukm-logo { height: 32px; }
  .apptop-ukm .ukm-teks { font-size: 11px; max-width: 11em; }
}

/* ------------------------------------------------------------------
   Garis masa sejarah penghantaran (rujukan timeline PTPK, dibina semula
   dalam gaya FSK tanpa CDN). Titik diwarnakan ikut status; item teratas
   ialah kedudukan semasa ibu bapa.
   ------------------------------------------------------------------ */
.garis-masa { position: relative; margin-top: 10px; }
.gm-item { position: relative; padding: 0 0 20px 28px; }
.gm-item:last-child { padding-bottom: 2px; }
/* garis menegak yang menyambung titik */
.gm-item::before {
  content: ""; position: absolute; left: 6px; top: 15px; bottom: -3px;
  width: 2px; background: var(--line);
}
.gm-item:last-child::before { display: none; }
/* titik status */
.gm-titik {
  position: absolute; left: 0; top: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--faint);
  border: 2px solid var(--panel); box-shadow: 0 0 0 2px var(--line2);
}
.gm-titik.t-ada     { background: var(--ada);     box-shadow: 0 0 0 2px #b8e0cb; }
.gm-titik.t-sedang  { background: var(--sedang);  box-shadow: 0 0 0 2px #f0dca8; }
.gm-titik.t-info    { background: var(--brand);   box-shadow: 0 0 0 2px #bcd5f0; }
.gm-titik.t-pending { background: var(--pending); box-shadow: 0 0 0 2px #e6d3f8; }
.gm-tajuk {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  align-items: baseline; justify-content: space-between;
}
.gm-tajuk b { font-size: 14px; }
.gm-tarikh { font-size: 12px; color: var(--muted); white-space: nowrap; }
.gm-baris { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gm-kini {
  font-size: 11.5px; font-weight: 700; color: var(--brand);
  background: #eaf2fb; border: 1px solid #bcd5f0;
  padding: 2px 9px; border-radius: 999px;
}

/* ------------------------------------------------------------------
   Butang tindakan sekunder yang konsisten. Menggantikan pautan
   teks-sebaris lama ("Semak →", "Sahkan sekarang →", "Buka →") yang
   kelihatan seperti teks biasa dan lapuk. Putih berjidar; isi biru pada
   hover. Ikon (jika ada) mewarisi warna teks.
   ------------------------------------------------------------------ */
.tgt a,
.pbrt .pb-pautan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line2); color: var(--brand);
  font-size: 12.5px; font-weight: 700; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 40, 80, .05);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.tgt a:hover,
.pbrt .pb-pautan:hover {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 2px 8px rgba(26, 115, 194, .25);
}

/* Hiasan hero halaman utama (SVG sebaris di sebelah kanan banner). */
.welcome-art {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 214px; height: 160px; pointer-events: none;
}
@media (min-width: 760px) { .welcome { padding-right: 244px; } }
@media (max-width: 759px) { .welcome-art { display: none; } }

/* Butang Log masuk hero: putih, timbul (shadow) supaya pengguna perasan. */
.btn-masuk-hero {
  background: #fff; color: var(--brand); border-color: #fff;
  font-weight: 700; padding: 12px 24px; font-size: 15px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .20);
}
.btn-masuk-hero:hover {
  background: #fff; color: var(--brand);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .26); transform: translateY(-1px);
}

/* ===================================================================
   Dashboard gaya PTPK: seksyen tindakan + kad KPI berikon warna.
   =================================================================== */

/* Baris atas dashboard: "Perlu perhatian" + "Log semasa" bersebelahan,
   jatuh ke satu lajur pada skrin sempit. */
.dash-atas {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; align-items: start; margin-bottom: 14px;
}
.dash-atas > .card { margin: 0; }
@media (max-width: 900px) { .dash-atas { grid-template-columns: 1fr; } }

/* Kepala seksyen tindakan (tajuk + tarikh) */
.tindakan-kepala {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.tindakan-kepala h3 { margin: 0; }
/* Teks info kecil pada kepala kad (tarikh, kiraan) sebagai pil lavender,
   dijajar ke hujung kanan. Gaya dikongsi dengan .jadual-kira. */
.tindakan-kepala .t-tarikh,
.jadual-kira {
  font-size: 12px; font-weight: 600; line-height: 1.6;
  color: #5b3ea8; background: #eee9fb;
  padding: 2px 11px; border-radius: 999px; white-space: nowrap;
}

/* Panel "Log semasa": senarai ringkas siapa buat apa, bila. */
.log-senarai { list-style: none; margin: 0; padding: 0; }
.log-baris {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line2);
}
.log-baris:first-child { border-top: 0; padding-top: 0; }
.log-ic { color: var(--brand); flex: none; display: inline-flex; margin-top: 1px; }
.log-teks { flex: 1; font-size: 13px; line-height: 1.4; }
.log-teks b { font-weight: 700; }
.log-masa { flex: none; font-size: 11.5px; color: var(--faint); white-space: nowrap; margin-top: 1px; }

/* Penunjuk "langsung" pada panel Log semasa (kemas kini automatik). */
.log-langsung {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #2f9e63;
  text-transform: uppercase; letter-spacing: .04em;
}
.log-langsung::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2f9e63;
  animation: langsung-denyut 2s infinite;
}
@keyframes langsung-denyut {
  0%   { box-shadow: 0 0 0 0 rgba(47,158,99,.45); }
  70%  { box-shadow: 0 0 0 6px rgba(47,158,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,158,99,0); }
}
.log-langsung.kilas { color: #1f7a3d; }
@media (prefers-reduced-motion: reduce) { .log-langsung::before { animation: none; } }

/* Kad tindakan boleh-klik (satu perkara yang menunggu) */
.tindakan-kad {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; margin-bottom: 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 12px; background: #f6f9fe;
  text-decoration: none; color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease;
}
.tindakan-kad:last-child { margin-bottom: 0; }
/* Hover hanya untuk baris boleh-klik (anchor), bukan baris maklumat ".luar". */
a.tindakan-kad:hover { background: #eef4fc; border-color: var(--brand); color: var(--ink); }
.tindakan-kad .tk-ic { color: var(--brand); flex: none; display: inline-flex; }
.tindakan-kad .tk-teks { flex: 1; font-size: 13.5px; line-height: 1.35; }
.tindakan-kad .tk-aksi {
  flex: none; font-size: 12.5px; font-weight: 700; color: var(--brand);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
/* Perkara yang menunggu pihak luar: bukan boleh-klik, nada lebih senyap */
.tindakan-kad.luar { border-left-color: var(--faint); background: var(--panel); cursor: default; }
.tindakan-kad.luar .tk-ic { color: var(--muted); }
.tindakan-kad .tk-luar { flex: none; font-size: 12px; color: var(--faint); white-space: nowrap; }

/* Keadaan lega — tiada tindakan menunggu */
.tindakan-lega {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border-radius: 12px;
  background: #f0f8f3; border: 1px solid #d6eade;
}
.tindakan-lega .tl-ic { color: #2f9e63; flex: none; display: inline-flex; }
.tindakan-lega .tl-tajuk { font-weight: 700; }
.tindakan-lega .tl-teks { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* Grid kad KPI */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: 14px;
}
.kpi-kad {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 124px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px; text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 40, 80, .04);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* Hanya kad yang boleh diklik (anchor) yang mengangkat/menyerlah bila hover;
   kad statistik biasa (div) tidak, supaya tiada isyarat klik yang palsu. */
a.kpi-kad { cursor: pointer; }
a.kpi-kad:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 5px 16px rgba(20, 40, 80, .1); color: var(--ink); }
div.kpi-kad { cursor: default; }
.kpi-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 9px;
}
.kpi-ic.biru   { background: #e8effa; color: #14458c; }
.kpi-ic.sian   { background: #e1f3fa; color: #0077a3; }
.kpi-ic.kuning { background: #fdf5dd; color: #9a7a08; }
.kpi-ic.hijau  { background: #e6f5ec; color: #1f7a4a; }
.kpi-ic.ungu   { background: #eee9fb; color: #5b3ea8; }
.kpi-ic.merah  { background: #fdecec; color: #c0392b; }
.kpi-nilai { font-size: 27px; font-weight: 800; line-height: 1.05; color: var(--ink); }
.kpi-label { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
/* Nota ditolak ke bawah supaya semua kad sejajar walau ada/tiada nota. */
.kpi-sub   { font-size: 11px; color: var(--faint); margin-top: auto; padding-top: 6px; }

/* Grid carta dashboard: dua lajur, jatuh ke satu lajur pada skrin kecil. */
.carta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px; margin-top: 14px;
}
.carta-grid .card { margin: 0; }

/* Caption "Tertinggi" bawah tajuk carta: titik warna + teks. Boleh
   menyenaraikan lebih daripada satu item apabila nilai tertinggi seri. */
.carta-nota {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  font-size: 12px; color: var(--muted); margin: -2px 0 8px;
}
.carta-nota b { color: var(--ink); font-weight: 700; }
.carta-nota .nota-item { display: inline-flex; align-items: center; gap: 6px; }
.carta-nota .titik { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Sapaan kecil di bawah tajuk "Halaman Utama". */
.halaman-sapa { font-size: 13px; color: var(--muted); margin: 5px 0 0; }