/* ==========================================================================
   KONISA — Sistem Pengurusan Keahlian · reka bentuk asas
   Palet: rose KONISA #C03858, ink #3B3437, kertas #F7F4F5
   Tema boleh diubah dari Tetapan (window.KONISA_TETAPAN.tema) — skrip
   menetapkan --rose pada :root semasa halaman dimuat.
   ========================================================================== */
:root{
  --rose:#C03858; --rose-600:#A62E4A; --rose-band:#A93350;
  --rose-soft:#F7E9ED; --rose-ink:#5C2A38;
  --ink:#3B3437; --ink-lembut:#6E6468; --ink-pudar:#8F8689;
  --kertas:#F7F4F5; --kad:#FFFFFF; --garis:#E8E1E3; --garis-lembut:#F0EAEC;
  --hijau:#0E7A3D; --kuning:#B87A0A; --merah:#B42318; --biru:#1D5FA8;
  --r:12px; --r-kecil:9px; --bayang:0 1px 2px rgba(35,20,24,.05),0 8px 24px -14px rgba(35,20,24,.22);
  --fon:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fon);color:var(--ink);background:var(--kertas);font-size:14.5px;line-height:1.55}
img{max-width:100%}
a{color:var(--rose-600);text-decoration:none}
a:hover{color:var(--rose)}
h1,h2,h3,h4{margin:0 0 10px;line-height:1.25;letter-spacing:-.01em}
h1{font-size:26px}h2{font-size:20px}h3{font-size:16.5px}
p{margin:0 0 10px}
::selection{background:var(--rose-soft)}
:focus-visible{outline:2.5px solid var(--rose);outline-offset:2px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Rangka halaman awam ---------- */
.awam{min-height:100vh;display:flex;flex-direction:column}
.awam-tajuk{background:linear-gradient(135deg,var(--rose-band),var(--rose));color:#fff;padding:14px 0}
.awam-tajuk .bekas{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.awam-jenama{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em}
.awam-jenama .lambang{width:38px;height:38px;border-radius:10px;background:#fff;color:var(--rose);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.awam-jenama small{display:block;font-weight:500;font-size:11.5px;letter-spacing:.05em;opacity:.85}
.awam-nav{display:flex;gap:6px;flex-wrap:wrap}
.awam-nav a{color:#fff;font-weight:600;font-size:13.5px;padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.28)}
.awam-nav a:hover,.awam-nav a.aktif{background:#fff;color:var(--rose-600)}
.awam-kaki{background:#2E2428;color:#CBBFC3;padding:26px 0;margin-top:auto;font-size:13px}
.awam-kaki b{color:#fff}
.bekas{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
.bekas-sempit{max-width:760px}

/* ---------- Kad + panel ---------- */
.kad{background:var(--kad);border:1px solid var(--garis);border-radius:var(--r);box-shadow:var(--bayang)}
.kad-penuh{padding:26px 28px}
.kad-tajuk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--garis-lembut);flex-wrap:wrap}
.kad-tajuk h3{margin:0}
.kad-badan{padding:20px}
.petak{background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r-kecil);padding:14px 16px}

/* ---------- Butang ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;
  font-size:13.8px;border-radius:var(--r-kecil);border:1.5px solid transparent;padding:10px 18px;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .12s;text-decoration:none;line-height:1.2}
.btn:active{transform:translateY(1px)}
.btn-utama{background:var(--rose);color:#fff}
.btn-utama:hover{background:var(--rose-600);color:#fff}
.btn-garis{border-color:var(--garis);background:#fff;color:var(--ink)}
.btn-garis:hover{border-color:var(--rose);color:var(--rose-600)}
.btn-hijau{background:var(--hijau);color:#fff}.btn-hijau:hover{background:#0A6231;color:#fff}
.btn-merah{background:var(--merah);color:#fff}.btn-merah:hover{background:#8E1C13;color:#fff}
.btn-kecil{padding:6.5px 12px;font-size:12.8px;border-radius:8px}
.btn-besar{padding:13px 24px;font-size:15px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-pautan{background:none;border:0;color:var(--rose-600);font-weight:700;cursor:pointer;padding:4px 6px;font:inherit}
.btn-pautan:hover{color:var(--rose);text-decoration:underline}

/* ---------- Borang ---------- */
.medan{margin-bottom:15px}
.medan label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.medan label .wajib{color:var(--merah)}
.medan input,.medan select,.medan textarea{width:100%;font:inherit;font-size:14.3px;color:var(--ink);
  border:1.5px solid var(--garis);border-radius:var(--r-kecil);padding:10px 13px;background:#fff;transition:border-color .15s,box-shadow .15s}
.medan input:focus,.medan select:focus,.medan textarea:focus{outline:0;border-color:var(--rose);box-shadow:0 0 0 3.5px var(--rose-soft)}
.medan textarea{min-height:96px;resize:vertical}
.medan .bantuan{font-size:12.3px;color:var(--ink-pudar);margin-top:5px}
.medan .ralat{font-size:12.6px;color:var(--merah);margin-top:5px;font-weight:600}
.medan.bermasalah input,.medan.bermasalah select,.medan.bermasalah textarea{border-color:var(--merah)}
.baris-medan{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.baris-medan-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
@media(max-width:640px){.baris-medan,.baris-medan-3{grid-template-columns:1fr}}
.semak{display:flex;align-items:flex-start;gap:9px;font-size:13.8px}
.semak input{width:auto;margin-top:2px}

/* ---------- Jadual ---------- */
.jadual-bekas{overflow-x:auto;border:1px solid var(--garis);border-radius:var(--r);background:#fff}
table.jadual{width:100%;border-collapse:collapse;font-size:13.8px}
table.jadual th{text-align:left;font-size:11.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-pudar);
  padding:11px 14px;border-bottom:1.5px solid var(--garis);background:var(--kertas);white-space:nowrap}
table.jadual td{padding:11.5px 14px;border-bottom:1px solid var(--garis-lembut);vertical-align:middle}
table.jadual tr:last-child td{border-bottom:0}
table.jadual tbody tr:hover{background:#FCFAFB}
table.jadual td .kecil{font-size:12.2px;color:var(--ink-pudar)}
.aksi-sel{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
th.boleh-susun{cursor:pointer;user-select:none;white-space:nowrap}
th.boleh-susun:hover{color:var(--rose-600)}
th.boleh-susun:focus-visible{outline:2.5px solid var(--rose);outline-offset:-2px}
.s-ind{opacity:.4;font-size:10.5px;margin-left:3px;font-weight:700}
.s-ind.s-aktif{opacity:1;color:var(--rose)}
.lambang img{width:62%;height:62%;object-fit:contain;display:block}
/* Lajur tindakan melekat di kanan supaya butang sentiasa kelihatan walau jadual lebar */
table.jadual th.sticky-kanan,table.jadual td.sticky-kanan{position:sticky;right:0;background:#fff;box-shadow:-7px 0 9px -7px rgba(35,20,24,.18)}
table.jadual th.sticky-kanan{background:var(--kertas)}
table.jadual tr:hover td.sticky-kanan{background:#FCFAFB}
td.nb,th.nb{white-space:nowrap}
/* Jadual padat — banyak lajur (cth. direktori) muat satu skrin */
table.jadual.jadual-padat th{padding:7px 7px;font-size:10.6px}
table.jadual.jadual-padat td{padding:7.5px 7px;font-size:12.7px}
table.jadual td.pecah{word-break:break-word;overflow-wrap:anywhere}
table.jadual td.nb-min{white-space:nowrap;min-width:168px}

/* ---------- Lencana / status ---------- */
.lencana{display:inline-flex;align-items:center;gap:5px;font-size:11.8px;font-weight:700;border-radius:999px;padding:3.5px 11px;letter-spacing:.01em;white-space:nowrap}
.lencana-baru{background:#FDF1DE;color:#8A5A00}
.lencana-diluluskan{background:#E3F3EA;color:var(--hijau)}
.lencana-ditolak{background:#FCE9E7;color:var(--merah)}
.lencana-aktif{background:#E3F3EA;color:var(--hijau)}
.lencana-tidak-aktif{background:#EFEAEC;color:var(--ink-lembut)}
.lencana-info{background:#E8F0F9;color:var(--biru)}
.lencana-rose{background:var(--rose-soft);color:var(--rose-600)}
.lencana-titik::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- Statistik ringkas ---------- */
.stat-baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:14px 16px}
.stat b{display:block;font-size:24px;letter-spacing:-.02em;line-height:1.15}
.stat small{color:var(--ink-pudar);font-size:12px;font-weight:600;letter-spacing:.02em}
.stat.rose b{color:var(--rose)}

/* ---------- Modal ---------- */
.modal-lapik{position:fixed;inset:0;background:rgba(30,18,22,.55);display:flex;align-items:flex-start;
  justify-content:center;padding:40px 16px;z-index:120;overflow:auto;animation:muncul .18s ease}
@keyframes muncul{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:16px;max-width:640px;width:100%;box-shadow:0 24px 60px -20px rgba(30,18,22,.5);animation:naik .2s ease}
.modal.modal-lebar{max-width:820px}
@keyframes naik{from{transform:translateY(10px);opacity:.6}to{transform:none;opacity:1}}
.modal-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--garis-lembut)}
.modal-kepala h3{margin:0;font-size:17px}
.modal-tutup{background:none;border:0;font-size:20px;line-height:1;color:var(--ink-pudar);cursor:pointer;padding:4px 8px;border-radius:8px}
.modal-tutup:hover{background:var(--kertas);color:var(--ink)}
.modal-badan{padding:20px 24px}
.modal-kaki{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--garis-lembut);flex-wrap:wrap}

/* ---------- Toast ---------- */
.toast-bekas{position:fixed;top:18px;right:18px;z-index:300;display:flex;flex-direction:column;gap:9px;max-width:400px}
.toast{background:#2C2226;color:#fff;border-radius:11px;padding:12px 16px;font-size:13.6px;font-weight:600;
  box-shadow:0 12px 30px -10px rgba(30,18,22,.55);display:flex;gap:10px;align-items:flex-start;animation:naik .22s ease}
.toast.toast-ok{background:#0E5A30}
.toast.toast-ralat{background:#8E1C13}
.toast.toast-amaran{background:#8A5A00}
.toast small{display:block;font-weight:500;opacity:.9}

/* ---------- Keadaan kosong + pemuat ---------- */
.kosong{text-align:center;padding:44px 20px;color:var(--ink-pudar)}
.kosong b{display:block;font-size:16px;color:var(--ink-lembut);margin-bottom:5px}
.pemuat{padding:34px;text-align:center;color:var(--ink-pudar);font-weight:600}
.pemuat::before{content:"";display:inline-block;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--garis);border-top-color:var(--rose);animation:pusing .8s linear infinite;margin-right:10px;vertical-align:-3px}
@keyframes pusing{to{transform:rotate(360deg)}}

/* ---------- Pager ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 4px 0;flex-wrap:wrap;font-size:13.3px;color:var(--ink-lembut)}
.pager .pager-btn{display:flex;gap:8px}

/* ---------- Shell pentadbir ---------- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sisi{background:#fff;color:var(--ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--garis)}
.sisi-jenama{padding:14px 18px 11px;border-bottom:1px solid var(--garis-lembut)}
.sisi-jenama .sisi-logo{display:block;width:100%;max-width:122px;height:auto}
.sisi-nav{padding:4px 12px 10px;flex:1}
.sisi-kumpulan{font-size:10.4px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-pudar);font-weight:800;padding:8px 10px 3px}
.sisi-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--ink-lembut);font:inherit;
  font-size:13.3px;font-weight:600;padding:6px 10px;border-radius:9px;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.sisi-item:hover{background:var(--kertas);color:var(--ink)}
.sisi-item.aktif{background:var(--rose);color:#fff}
.sisi-item .ikon{width:17px;height:17px;flex:none;display:inline-flex}
.sisi-item .ikon svg{width:17px;height:17px}
.sisi-item .kira{margin-left:auto;font-size:11.4px;font-weight:800;background:var(--kertas);border:1px solid var(--garis);border-radius:999px;padding:1px 8px;color:var(--ink-lembut)}
.sisi-item.aktif .kira{background:rgba(255,255,255,.26);border-color:transparent;color:#fff}
.sisi-kaki{padding:9px 16px;border-top:1px solid var(--garis-lembut);font-size:12px;color:var(--ink-pudar)}
.utama{min-width:0;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid var(--garis);padding:13px 26px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:60}
.topbar h1{font-size:18.5px;margin:0}
.topbar .topbar-kanan{margin-left:auto;display:flex;align-items:center;gap:12px}
.cip-pengguna{display:flex;align-items:center;gap:10px;font-size:13.3px;font-weight:700}
.cip-pengguna .bulat{width:34px;height:34px;border-radius:50%;background:var(--rose-soft);color:var(--rose-600);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.cip-pengguna small{display:block;font-weight:600;color:var(--ink-pudar);font-size:11.3px}
/* Badan utama: kandungan (lajur 2) rapat tepi sisi + feed berita SKM (lajur 3). */
.utama-badan{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:20px;padding:22px 26px 60px;align-items:start;flex:1;width:100%}
.kandungan{padding:0;max-width:none;margin:0;min-width:0}
.feed{position:sticky;top:86px;max-height:calc(100vh - 116px);overflow-y:auto;min-width:0}
.feed-kad .kad-badan{padding:4px 16px 12px}
.feed-item{display:block;padding:11px 2px;border-bottom:1px dashed var(--garis-lembut);color:var(--ink);text-decoration:none}
.feed-item:last-of-type{border-bottom:0}
.feed-item b{display:block;font-size:13.1px;line-height:1.45;font-weight:700;overflow-wrap:anywhere}
.feed-item:hover b{color:var(--rose-600)}
.feed-item .feed-meta{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:10.8px;color:var(--ink-pudar);font-weight:600}
.feed-sumber{font-size:10.2px;font-weight:800;letter-spacing:.02em;padding:2px 8px;border-radius:999px;background:var(--rose-soft);color:var(--rose-600)}
.feed-sumber.keratan{background:#EEF3FB;color:var(--biru)}
.feed-kaki{padding:11px 2px 6px;font-size:12px;border-top:1px solid var(--garis-lembut);margin-top:2px}
.burger-pentadbir{display:none}

@media(max-width:1499px){
  /* Feed SKM (lajur 3) hanya bila ruang cukup lebar — kalau tidak, jadual jadi sempit
     dan butang Tindakan terkerat. */
  .utama-badan{grid-template-columns:1fr}
  .feed{display:none}
}
@media(max-width:920px){
  .shell{grid-template-columns:1fr}
  .sisi{position:fixed;left:0;top:0;bottom:0;width:264px;z-index:150;transform:translateX(-104%);transition:transform .22s ease;height:100dvh}
  .shell.sisi-terbuka .sisi{transform:none;box-shadow:0 0 0 100vmax rgba(30,18,22,.45)}
  .burger-pentadbir{display:inline-flex}
  .utama-badan{padding:16px 14px 50px}
  .topbar{padding:11px 14px}
}
@media(max-width:640px){
  /* Topbar sempit: kekalkan satu baris tanpa limpahan mendatar */
  .topbar{gap:8px}
  .topbar h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .top-laman{display:none}
  .cip-pengguna > span:not(.bulat){display:none}
  .topbar .btn-kecil{padding:6px 10px}
}

/* ---------- Utiliti ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.flex-antara{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:18px}.mt-3{margin-top:28px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:10px}.mb-2{margin-bottom:18px}
.teks-kecil{font-size:12.6px}.teks-pudar{color:var(--ink-pudar)}.teks-lembut{color:var(--ink-lembut)}
.teks-rose{color:var(--rose-600)}.teks-hijau{color:var(--hijau)}.teks-merah{color:var(--merah)}
.teks-tebal{font-weight:800}
.pemisah{border:0;border-top:1px solid var(--garis-lembut);margin:16px 0}
.satu-baris{white-space:nowrap}
.min-0{min-width:0}
.tunjuk-sahaja{display:block}

/* ---------- Cetak ---------- */
@media print{
  .sisi,.topbar,.btn,.modal-kaki,.feed{display:none !important}
  .shell{grid-template-columns:1fr}
  .utama-badan{display:block;padding:0}
  body{background:#fff}
}

/* ---------- Borang program (pembina + paparan) ---------- */
.medan-baris{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--garis-lembut);border-radius:10px;margin-bottom:8px;background:#fff}
.medan-baris:hover{border-color:var(--garis)}
.medan-baris.mb-mati{opacity:.55}
.medan-baris .mb-info{min-width:0;flex:1}
.medan-baris .mb-info b{display:block;font-size:14px;overflow-wrap:anywhere}
.medan-baris .mb-sub{font-size:11.8px;color:var(--ink-pudar)}
.medan-baris .mb-aksi{display:flex;gap:6px;flex:none}
.medan-baris .mb-aksi .btn{padding:5px 8px}
.borang-pemisah{border-top:1px dashed var(--garis);margin:6px 0 14px;padding-top:12px}
.borang-pemisah b{display:block;font-size:15px}
.borang-pemisah span{font-size:12.6px;color:var(--ink-pudar)}
.pilih-baris{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.pilih-item{display:flex;align-items:flex-start;gap:8px;font-weight:500;font-size:14px;cursor:pointer}
.pilih-item input{width:auto !important;margin:3px 0 0;flex:none}
.pilih-setuju{background:var(--kertas);border:1px solid var(--garis-lembut);border-radius:9px;padding:10px 12px;margin-top:6px}
.label-kecil{display:block;font-weight:600;font-size:13.6px;margin-bottom:6px}
.fail-bekas{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fail-bekas input[type=file]{max-width:300px}
.jawapan-senarai{border:1px solid var(--garis-lembut);border-radius:10px;overflow:hidden}
.jawapan-baris{display:flex;justify-content:space-between;gap:14px;padding:9px 13px;border-bottom:1px solid var(--garis-lembut);font-size:13.8px}
.jawapan-baris:last-child{border-bottom:0}
.jawapan-baris span{color:var(--ink-lembut)}
.jawapan-baris b{text-align:right;overflow-wrap:anywhere}
.log-senarai{border-left:2px solid var(--rose-soft);padding-left:12px}
.log-baris{display:flex;justify-content:space-between;gap:10px;font-size:12.8px;padding:4px 0;color:var(--ink-lembut)}
.medan.ada-ralat input,.medan.ada-ralat select,.medan.ada-ralat textarea{border-color:var(--merah)}
.borang-tunjuk .medan{margin-bottom:14px}
@media(max-width:640px){.medan-baris{flex-wrap:wrap}.medan-baris .mb-aksi{margin-left:auto}}