/* Papan projek — struktur. Warna & fon datang drpd tema.css (token projek).
   Nilai lalai SEMUA token ada di sini supaya projek yg naik taraf kit (tema.css lama tidak ditimpa) tetap lengkap;
   tema.css dimuat SELEPAS fail ini dan hanya menimpa token yang projek mahu ubah. */
:root{--latar:#f3f5f7;--permukaan:#fff;--garis:#d9dfe5;--teks:#17212b;--teks-lembut:#5b6773;--aksen:#1d5fa8;--aksen-teks:#fff;
  --siap:#1e7b4f;--sedang:#a8660f;--tersekat:#b42318;--belum:#6b7785;
  --fon:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fon-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tv-latar:#0b1117;--tv-panel:#111a23;--tv-garis:#223140;--tv-teks:#e6edf3;--tv-lembut:#8b9aa8;--tv-aksen:#5ab0d6;
  --tv-siap:#3fb77b;--tv-sedang:#e3a33b;--tv-tersekat:#f0604d;--tv-belum:#7d8b98}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--latar);color:var(--teks);font:15px/1.55 var(--fon)}
a{color:var(--aksen)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--aksen);outline-offset:2px}
code{font-family:var(--fon-mono);font-size:.86em;background:color-mix(in srgb,var(--garis) 45%,transparent);padding:.05em .35em;border-radius:4px;overflow-wrap:anywhere}
h1{font-size:1.6rem;line-height:1.2;margin:.2rem 0 .8rem;text-wrap:balance}
h2{font-size:1.1rem;margin:0 0 .75rem}
h3{font-size:1rem;margin:1.2rem 0 .5rem}
.muted{color:var(--teks-lembut)}
.kecil{font-size:.88em}
.lead{color:var(--teks-lembut);max-width:70ch;margin:0 0 1.2rem}

.atas{background:var(--permukaan);border-bottom:1px solid var(--garis)}
.atas-dalam,.tab-dalam,.isi,.kaki-dalam{max-width:1240px;margin:0 auto;padding-inline:16px}
.atas-dalam{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.jenama{display:flex;flex-direction:column;text-decoration:none;color:var(--teks)}
.jenama .label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teks-lembut)}
.jenama strong{font-size:1.15rem}
.pengguna{display:flex;align-items:center;gap:.75rem}
.pengguna form{margin:0}
.pautan{background:none;border:0;padding:.4rem .2rem;color:var(--aksen);font:inherit;cursor:pointer;text-decoration:underline;min-height:44px}
.tab{border-top:1px solid var(--garis)}
.tab-dalam{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:thin}
.tab a{flex:0 0 auto;padding:.7rem .9rem;text-decoration:none;color:var(--teks-lembut);border-bottom:3px solid transparent;font-weight:600;white-space:nowrap}
.tab a:hover{color:var(--teks)}
.tab a[aria-current="page"]{color:var(--teks);border-bottom-color:var(--aksen)}

.isi{padding-block:1.4rem 2.5rem}
.kad{background:var(--permukaan);border:1px solid var(--garis);border-radius:10px;padding:1.1rem 1.2rem;margin:0 0 1.2rem}
.kad-amaran{border-left:4px solid var(--tersekat)}
.dua-lajur{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1.2rem;align-items:start}
.dua-lajur>.kad{margin:0}
@media (max-width:900px){.dua-lajur{grid-template-columns:minmax(0,1fr)}}

.mesej{background:var(--permukaan);border:1px dashed var(--garis);border-radius:10px;padding:1rem 1.2rem;color:var(--teks-lembut)}
.mesej-ralat{border-style:solid;border-color:var(--tersekat);color:var(--tersekat)}

.kemajuan{background:var(--permukaan);border:1px solid var(--garis);border-radius:10px;padding:1.2rem;margin:0 0 1.2rem}
.kemajuan-angka{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.kemajuan-angka b{font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.kemajuan-angka span{color:var(--teks-lembut)}
.bar{display:flex;height:12px;border-radius:6px;background:color-mix(in srgb,var(--belum) 22%,transparent);overflow:hidden;margin:.9rem 0}
.bar span{display:block;height:100%}
.bar-siap{background:var(--siap)}.bar-sedang{background:var(--sedang)}.bar-tersekat{background:var(--tersekat)}
.kiraan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:0}
.kiraan div{border-top:1px solid var(--garis);padding-top:.5rem}
.kiraan dt{font-size:.8rem;color:var(--teks-lembut)}
.kiraan dd{margin:0;font-size:1.4rem;font-variant-numeric:tabular-nums}
.kiraan dd a{text-decoration:none;color:var(--teks)}
@media (max-width:560px){.kiraan{grid-template-columns:repeat(2,minmax(0,1fr))}}

.status{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap;border:1px solid currentColor}
.status-siap{color:var(--siap)}.status-sedang{color:var(--sedang)}.status-tersekat{color:var(--tersekat)}.status-belum,.status-tidak-sah{color:var(--belum)}
.sebab{margin-top:.3rem;font-size:.86em;color:var(--tersekat)}
.jenis{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teks-lembut)}

.tapis{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.tapis a{padding:.45rem .8rem;border:1px solid var(--garis);border-radius:999px;text-decoration:none;color:var(--teks);background:var(--permukaan);min-height:44px;display:inline-flex;align-items:center;gap:.4rem}
.tapis a span{color:var(--teks-lembut);font-variant-numeric:tabular-nums}
.tapis a[aria-current="true"]{background:var(--aksen);border-color:var(--aksen);color:var(--aksen-teks)}
.tapis a[aria-current="true"] span{color:inherit}

.jadual-wrap{overflow-x:auto}
table.data,table.md{width:100%;border-collapse:collapse;background:var(--permukaan)}
table.data th,table.data td,table.md th,table.md td{text-align:left;vertical-align:top;padding:.6rem .7rem;border-bottom:1px solid var(--garis)}
table.data thead th,table.md thead th{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--teks-lembut);background:color-mix(in srgb,var(--latar) 70%,var(--permukaan))}
.nombor{font-variant-numeric:tabular-nums;white-space:nowrap}
table.data td[data-label="ID"],table.data td[data-label="ID"] code{white-space:nowrap;overflow-wrap:normal}
/* [CHANGE 2026-09-30] senarai projek (mod penyewa): nombor rata kanan + SELURUH baris boleh diklik tanpa JavaScript
   (pautan ::after meliputi baris) — kelas baharu, .nombor sedia ada TIDAK diubah (papan hidup guna utk masa/IP) */
table.data .angka{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.data tr.baris-pautan{position:relative}
table.data tr.baris-pautan a.pautan-baris::after{content:"";position:absolute;inset:0}
table.data tr.baris-pautan:hover{background:color-mix(in srgb,var(--latar) 55%,var(--permukaan))}
table.data tr.baris-pautan:focus-within{outline:2px solid currentColor;outline-offset:-2px}
@media (max-width:720px){
  table.data .angka{text-align:left}
  table.data thead{display:none}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{border:1px solid var(--garis);border-radius:10px;margin:0 0 .8rem;padding:.4rem .2rem;background:var(--permukaan)}
  table.data td{border:0;padding:.3rem .7rem}
  table.data td::before{content:attr(data-label);display:block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--teks-lembut)}
}

.senarai-ringkas{margin:0;padding-left:1.1rem}
.garis-masa{list-style:none;margin:0;padding:0}
.garis-masa li{padding:.5rem 0;border-bottom:1px solid var(--garis)}
.garis-masa time{display:block;font-size:.8rem;color:var(--teks-lembut);font-variant-numeric:tabular-nums}

.dokumen{max-width:none}
.dokumen>*{max-width:78ch}
.dokumen .jadual-wrap,.dokumen pre{max-width:none}
.dokumen pre{overflow-x:auto;background:color-mix(in srgb,var(--garis) 35%,transparent);padding:.8rem;border-radius:8px}
.dokumen pre code{background:none;padding:0}
.dokumen blockquote{margin:0 0 1rem;padding:.2rem 1rem;border-left:3px solid var(--garis);color:var(--teks-lembut)}
details.dokumen summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}

.kad-masuk{max-width:420px;margin:2rem auto}
.borang{display:grid;gap:.9rem}
.borang label{display:grid;gap:.3rem;font-weight:600;font-size:.9rem}
.borang input{font:inherit;padding:.65rem .75rem;border:1px solid var(--garis);border-radius:8px;min-height:44px;background:var(--permukaan);color:var(--teks)}
.butang{font:inherit;font-weight:700;padding:.7rem 1rem;border:0;border-radius:8px;background:var(--aksen);color:var(--aksen-teks);cursor:pointer;min-height:44px}

.kaki{border-top:1px solid var(--garis);color:var(--teks-lembut);font-size:.82rem}
.kaki-dalam{display:flex;flex-wrap:wrap;gap:1.2rem;padding-block:1rem}

/* ===== Paparan TV / pusat kawalan — saiz ikut lebar skrin supaya sama jelas di 1080p & 4K ===== */
body.tv{background:var(--tv-latar);color:var(--tv-teks);font-size:clamp(14px,1.02vw,40px);min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
.tv .bar{background:color-mix(in srgb,var(--tv-belum) 28%,transparent)}
.tv .bar-siap{background:var(--tv-siap)}.tv .bar-sedang{background:var(--tv-sedang)}.tv .bar-tersekat{background:var(--tv-tersekat)}
.tv code{background:color-mix(in srgb,var(--tv-garis) 80%,transparent);color:var(--tv-teks)}
.tv-atas{display:flex;justify-content:space-between;align-items:flex-end;gap:1em;padding:1.1em 1.6em .9em;border-bottom:1px solid var(--tv-garis)}
.tv-atas h1{font-size:2em;margin:.1em 0 0}
.tv-label{font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:var(--tv-aksen);font-weight:700}
.tv-jam{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.tv-jam b{font-family:var(--fon-mono);font-size:2.6em;line-height:1;font-variant-numeric:tabular-nums}
.tv-jam span{color:var(--tv-lembut)}
.tv-isi{padding:1.2em 1.6em}
.tv-kaki{display:flex;justify-content:space-between;gap:1em;padding:.7em 1.6em;border-top:1px solid var(--tv-garis);color:var(--tv-lembut);font-size:.85em}
.tv-panel{background:var(--tv-panel);border:1px solid var(--tv-garis);border-radius:12px;padding:1.1em 1.3em;min-width:0}
.tv-panel h2{font-size:.85em;letter-spacing:.12em;text-transform:uppercase;color:var(--tv-lembut);margin:0 0 .8em;display:flex;align-items:center;gap:.6em}
.tv-kiraan-kecil{font-family:var(--fon-mono);color:var(--tv-teks);font-size:1.2em;letter-spacing:0}
.tv-lembut{color:var(--tv-lembut)}
.tv-tenang{color:var(--tv-siap);font-size:1.3em;margin:.2em 0}
.tv-besar-mesej{font-size:1.6em;color:var(--tv-lembut);margin:0}
.tv-grid-projek{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto auto;gap:1.1em}
.tv-peratus{font-size:7em;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tv-peratus small{font-size:.4em;color:var(--tv-lembut);font-weight:600}
.tv-bar{height:.9em;border-radius:.45em;margin:.9em 0 1.1em}
.tv-kiraan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8em;margin:0}
.tv-kiraan div{border-top:1px solid var(--tv-garis);padding-top:.5em}
.tv-kiraan dt{font-size:.85em;color:var(--tv-lembut)}
.tv-kiraan dd{margin:0;font-size:2.4em;font-variant-numeric:tabular-nums;font-weight:700}
.tv-k-siap dd,.tv-k-siap b{color:var(--tv-siap)}.tv-k-sedang dd,.tv-k-sedang b{color:var(--tv-sedang)}.tv-k-tersekat dd,.tv-k-tersekat b{color:var(--tv-tersekat)}.tv-k-belum dd{color:var(--tv-belum)}
.tv-panel-tersekat{border-left:6px solid var(--tv-tersekat)}
.tv-senarai{list-style:none;margin:0;padding:0}
.tv-senarai li{padding:.55em 0;border-bottom:1px solid var(--tv-garis);display:flex;flex-wrap:wrap;gap:.2em .6em;align-items:baseline}
.tv-senarai li:last-child{border-bottom:0}
.tv-senarai small{flex-basis:100%;color:var(--tv-tersekat);font-size:.85em}
.tv-masa time{font-family:var(--fon-mono);color:var(--tv-lembut);font-size:.85em;font-variant-numeric:tabular-nums}
.tv-ringkas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1em;margin:0 0 1.1em}
.tv-ringkas div{background:var(--tv-panel);border:1px solid var(--tv-garis);border-radius:12px;padding:.8em 1.1em}
.tv-ringkas span{display:block;font-size:.8em;letter-spacing:.1em;text-transform:uppercase;color:var(--tv-lembut)}
.tv-ringkas b{font-size:2.6em;line-height:1.1;font-variant-numeric:tabular-nums}
.tv-petak-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.9em}
.tv-petak-grid.saiz-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2em}.tv-petak-grid.saiz-3 .tv-petak{font-size:1.55em;padding:1em 1.2em}
.tv-petak-grid.saiz-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:1em}.tv-petak-grid.saiz-4 .tv-petak{font-size:1.25em}
.tv-petak{background:var(--tv-panel);border:1px solid var(--tv-garis);border-left:6px solid var(--tv-garis);border-radius:10px;padding:.8em .95em;min-width:0}
.tv-petak-merah{border-left-color:var(--tv-tersekat)}.tv-petak-kuning{border-left-color:var(--tv-sedang)}.tv-petak-hijau{border-left-color:var(--tv-siap)}
.tv-petak h2{font-size:1em;margin:0 0 .4em;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.tv-petak-angka{display:flex;align-items:baseline;gap:.5em}
.tv-petak-angka b{font-size:2.3em;line-height:1;font-variant-numeric:tabular-nums}
.tv-petak-angka span{color:var(--tv-lembut);font-size:.85em}
.tv-bar-kecil{height:.5em;border-radius:.25em;margin:.55em 0}
.tv-petak-status{display:flex;flex-wrap:wrap;gap:.2em .7em;margin:0;font-size:.82em}
.tv-t-tersekat{color:var(--tv-tersekat);font-weight:700}.tv-t-sedang{color:var(--tv-sedang)}
.tv-t-masa{color:var(--tv-lembut)}.tv-t-lama{color:var(--tv-sedang)}.tv-t-lapuk{color:var(--tv-tersekat);font-weight:700}
@media (min-width:1101px){ /* skrin TV: kunci pada tinggi skrin — panel memotong kandungannya sendiri, tiada skrol */
  body.tv{height:100vh;overflow:hidden}
  .tv-isi{min-height:0;display:flex;flex-direction:column}
  .tv-grid-projek{flex:1;min-height:0;grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}
  .tv-grid-projek .tv-panel{overflow:hidden}
}
@media (max-width:1100px){body.tv{font-size:15px}.tv-grid-projek{grid-template-columns:minmax(0,1fr)}.tv-petak-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tv-ringkas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.tv-petak-grid,.tv-ringkas{grid-template-columns:repeat(2,minmax(0,1fr))}.tv-peratus{font-size:5em}.tv-kiraan{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* lebar bar kemajuan (CSP menyekat gaya sebaris) */
.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}