/* ==========================================================================
   KDN — Sistem Pemantauan Media & Analitik
   Sistem reka bentuk "pusat perisikan" (command centre)

   Palet rasmi:
     Navy   #001233  #001845  #001D3D  #003566
     Emas   #C5A017  #D4AF37
     Status hijau / amber / merah / biru

   Prinsip:
     - Tema GELAP sebagai lalai (paparan operasi), tema cerah untuk cetakan
       dan pejabat terang. Kedua-duanya guna token yang sama.
     - Ketumpatan tinggi TANPA kelihatan sesak: ruang dikawal oleh skala 4px,
       hierarki dibawa oleh saiz + berat + warna, bukan oleh garis dan kotak.
     - Tiada kecerunan hiasan, tiada bayang lembut yang tebal, tiada bulatan
       besar. Ini instrumen, bukan brosur.
   ========================================================================== */

/* --- 1. Token ------------------------------------------------------------ */
:root {
  /* Jenama */
  --navy-950: #000B1F;
  --navy-900: #001233;
  --navy-850: #001845;
  --navy-800: #001D3D;
  --navy-700: #002B55;
  --navy-600: #003566;
  --navy-500: #0A4A85;

  --gold-600: #A8850F;
  --gold-500: #C5A017;
  --gold-400: #D4AF37;
  --gold-300: #E4C766;

  --ok-500: #1F9D5B;
  --ok-400: #2FBE74;
  --warn-500: #C98A0E;
  --warn-400: #E8A93C;
  --risk-500: #C6362F;
  --risk-400: #E45D55;
  --info-500: #2472C8;
  --info-400: #4C97E8;

  /* Permukaan — tema gelap (lalai) */
  --bg: #00091A;
  --bg-shell: #000F27;
  --surface: #001233;
  --surface-2: #001A40;
  --surface-3: #002250;
  --line: rgba(148, 180, 224, .16);
  --line-strong: rgba(148, 180, 224, .30);

  /* Teks */
  --ink: #EAF1FA;
  --ink-2: #A9BFDA;
  --ink-3: #7189A8;
  --ink-inv: #001233;

  /* Aksen */
  --accent: var(--gold-400);
  --accent-dim: rgba(212, 175, 55, .14);
  --focus: #6FA8E8;

  /* Bentuk */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Ruang (skala 4px) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* Bayang — sangat halus; pada latar gelap, kedalaman datang dari warna */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 6px 20px -8px rgba(0,0,0,.55);
  --shadow-3: 0 18px 48px -20px rgba(0,0,0,.7);

  /* Susun atur */
  --sidebar-w: 254px;
  --sidebar-w-collapsed: 68px;
  --header-h: 66px;
  --subheader-h: 56px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --mono: "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

[data-theme="light"] {
  --bg: #EEF2F7;
  --bg-shell: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F8FC;
  --surface-3: #EAF0F7;
  --line: rgba(0, 29, 61, .12);
  --line-strong: rgba(0, 29, 61, .24);
  --ink: #071B34;
  --ink-2: #3F5872;
  --ink-3: #6C819A;
  --ink-inv: #FFFFFF;
  --accent: var(--gold-600);
  --accent-dim: rgba(165, 133, 15, .12);
  --shadow-1: 0 1px 2px rgba(9, 30, 66, .08);
  --shadow-2: 0 6px 18px -8px rgba(9, 30, 66, .18);
  --shadow-3: 0 20px 48px -22px rgba(9, 30, 66, .28);
}

/* --- 2. Asas ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Latar operasi: grid halus + dua sorotan sejuk. Diletakkan pada ::before
   supaya ia tidak menatal bersama kandungan dan tidak menjejaskan cetakan. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 600px at 78% -12%, rgba(0, 53, 102, .55), transparent 62%),
    radial-gradient(820px 520px at 8% 104%, rgba(0, 43, 85, .40), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.014) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px) 0 0 / 44px 100%;
}
[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 600px at 78% -12%, rgba(0, 53, 102, .07), transparent 62%),
    linear-gradient(180deg, rgba(0,29,61,.03) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(0,29,61,.03) 1px, transparent 1px) 0 0 / 44px 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.011em; color: var(--ink); }
h1 { font-size: 21px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p  { margin: 0 0 var(--s3); }

a { color: var(--info-400); text-decoration: none; }
a:hover { text-decoration: underline; }
[data-theme="light"] a { color: var(--info-500); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- 3. Rangka aplikasi -------------------------------------------------- */
.app { display: flex; min-height: 100vh; position: relative; z-index: 1; }

/* 3a. Sidebar */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: width .22s var(--ease), flex-basis .22s var(--ease);
  z-index: 40;
}
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, var(--navy-850) 0%, var(--navy-900) 100%);
}

.sidebar__brand {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s4);
  height: var(--header-h);
  border-bottom: 1px solid rgba(148, 180, 224, .12);
  overflow: hidden;
}
.sidebar__crest { flex: 0 0 auto; width: 38px; height: 38px; }
.sidebar__brand-text { min-width: 0; }
.sidebar__brand-text .l1 {
  font-size: 11.5px; font-weight: 750; letter-spacing: .09em;
  color: #FFFFFF; text-transform: uppercase; white-space: nowrap;
}
.sidebar__brand-text .l2 {
  font-size: 9.5px; letter-spacing: .13em; color: var(--gold-400);
  text-transform: uppercase; white-space: nowrap; margin-top: 1px;
}

.sidebar__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--s3) 0 var(--s6); }
.nav-group { padding: var(--s4) var(--s4) var(--s1); }
.nav-group__label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  color: rgba(169, 191, 218, .55); text-transform: uppercase; white-space: nowrap;
}
.nav-item {
  display: flex; align-items: center; gap: var(--s3);
  margin: 1px var(--s2); padding: 9px var(--s3);
  border-radius: var(--r-sm);
  color: #B9CBE2; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; position: relative;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.nav-item:hover { background: rgba(255,255,255,.055); color: #FFFFFF; text-decoration: none; }
.nav-item.is-active {
  background: linear-gradient(90deg, rgba(212,175,55,.16), rgba(212,175,55,.04));
  color: #FFFFFF; font-weight: 600;
}
.nav-item.is-active::before {
  content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-400);
}
.nav-item__icon { flex: 0 0 18px; width: 18px; height: 18px; opacity: .9; }
.nav-item__badge {
  margin-left: auto; font-size: 10px; font-weight: 700;
  background: var(--risk-500); color: #fff;
  padding: 1px 6px; border-radius: var(--r-pill); line-height: 1.5;
}

.sidebar__foot {
  padding: var(--s3) var(--s4);
  border-top: 1px solid rgba(148,180,224,.12);
  font-size: 10.5px; color: rgba(169,191,218,.6); white-space: nowrap; overflow: hidden;
}

/* Runtuh */
.app.is-collapsed .sidebar { width: var(--sidebar-w-collapsed); flex-basis: var(--sidebar-w-collapsed); }
.app.is-collapsed .sidebar__brand-text,
.app.is-collapsed .nav-group__label,
.app.is-collapsed .nav-item span,
.app.is-collapsed .sidebar__foot { display: none; }
.app.is-collapsed .nav-item { justify-content: center; padding: 10px 0; }
.app.is-collapsed .sidebar__brand { justify-content: center; padding: var(--s4) 0; }

/* 3b. Kawasan utama */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* 3c. Header */
.header {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s5);
  background: rgba(0, 18, 51, .82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
[data-theme="light"] .header { background: rgba(255,255,255,.9); }

.header__toggle {
  background: none; border: 1px solid var(--line); color: var(--ink-2);
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.header__toggle:hover { border-color: var(--line-strong); color: var(--ink); }

.header__title { min-width: 0; }
.header__title .t1 {
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header__title .t2 {
  font-size: 10.5px; letter-spacing: .1em; color: var(--ink-3);
  text-transform: uppercase; white-space: nowrap;
}

.header__spacer { flex: 1; }
.header__actions { display: flex; align-items: center; gap: var(--s2); }

.icon-btn {
  position: relative;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--ink-2); display: grid; place-items: center;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn__dot {
  position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--r-pill);
  background: var(--risk-500); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--bg-shell);
}

.userchip {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s1) var(--s2) var(--s1) var(--s1);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: none; cursor: pointer; color: inherit;
  transition: border-color .14s var(--ease);
}
.userchip:hover { border-color: var(--line-strong); }
.userchip__av {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900); font-weight: 750; font-size: 12px;
  display: grid; place-items: center; letter-spacing: .02em;
}
.userchip__meta { text-align: left; line-height: 1.25; }
.userchip__meta .n { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.userchip__meta .r { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }

/* 3d. Menu jatuh */
.dropdown { position: relative; }
.dropdown__panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 250px; max-width: 380px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r); box-shadow: var(--shadow-3);
  padding: var(--s2); z-index: 60;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.dropdown.is-open .dropdown__panel { opacity: 1; transform: none; pointer-events: auto; }
.dropdown__head {
  padding: var(--s2) var(--s3); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.dropdown__item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3); border-radius: var(--r-sm);
  color: var(--ink); font-size: 13px;
}
.dropdown__item:hover { background: var(--surface-2); text-decoration: none; }
.dropdown__sep { height: 1px; background: var(--line); margin: var(--s2) 0; }

.alert-row { display: block; padding: var(--s3); border-radius: var(--r-sm); }
.alert-row:hover { background: var(--surface-2); text-decoration: none; }
.alert-row .t { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.alert-row .m { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* --- 4. Bar tempoh global ------------------------------------------------ */
.periodbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s5);
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: var(--header-h); z-index: 25;
}
[data-theme="light"] .periodbar { background: rgba(255,255,255,.92); }

.periodbar__label {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  padding-right: var(--s1);
}

.presets { display: flex; gap: 2px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r); padding: 3px; }
.preset {
  border: 0; background: none; cursor: pointer;
  padding: 6px 11px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 550; color: var(--ink-2);
  font-family: inherit; white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.preset:hover { color: var(--ink); background: var(--surface-3); }
.preset.is-active {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: var(--navy-900); font-weight: 700;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

.daterange { display: flex; align-items: center; gap: var(--s2); }
.daterange input[type="date"] {
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--r-sm);
  padding: 6px var(--s2); font-size: 12.5px; font-family: inherit;
  color-scheme: dark;
}
[data-theme="light"] .daterange input[type="date"] { color-scheme: light; }
.daterange span { color: var(--ink-3); font-size: 12px; }

.periodbar__meta {
  margin-left: auto; display: flex; align-items: center; gap: var(--s4);
  font-size: 11.5px; color: var(--ink-3);
}
.periodbar__meta b { color: var(--ink-2); font-weight: 600; }

/* --- 5. Kandungan -------------------------------------------------------- */
.content { padding: var(--s5); flex: 1; }
.page-head { display: flex; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.page-head__t { flex: 1; min-width: 240px; }
.page-head h1 { font-size: 22px; letter-spacing: -.02em; }
.page-head .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.page-head__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

.grid { display: grid; gap: var(--s4); }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
.c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
.c9 { grid-column: span 9; } .c12 { grid-column: span 12; }

/* --- 6. Panel ------------------------------------------------------------ */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--line);
}
.panel__head h2 { font-size: 13.5px; font-weight: 650; letter-spacing: -.005em; }
.panel__head .sub { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.panel__head-actions { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
.panel__body { padding: var(--s4); flex: 1; min-width: 0; }
.panel__body--flush { padding: 0; }
.panel__foot {
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-3);
}

/* --- 7. Kad KPI ---------------------------------------------------------- */
.kpi-row {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  margin-bottom: var(--s4);
}
.kpi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s4) var(--s3);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.kpi::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-500), transparent 72%);
  opacity: .75;
}
.kpi--pos::after { background: linear-gradient(90deg, var(--ok-500), transparent 72%); }
.kpi--neg::after { background: linear-gradient(90deg, var(--risk-500), transparent 72%); }
.kpi--neu::after { background: linear-gradient(90deg, var(--ink-3), transparent 72%); }
.kpi--info::after { background: linear-gradient(90deg, var(--info-500), transparent 72%); }
.kpi--warn::after { background: linear-gradient(90deg, var(--warn-500), transparent 72%); }

.kpi__label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 6px;
}
.kpi__value {
  font-size: 30px; font-weight: 700; line-height: 1.08;
  letter-spacing: -.028em; margin: var(--s2) 0 var(--s1);
  font-variant-numeric: tabular-nums;
}
.kpi__value.is-pos { color: var(--ok-400); }
.kpi__value.is-neg { color: var(--risk-400); }
.kpi__value.is-neu { color: var(--ink-2); }
.kpi__value .unit { font-size: 15px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }

.kpi__foot { display: flex; align-items: center; gap: var(--s2); font-size: 11.5px; color: var(--ink-3); }
.kpi__spark { position: absolute; right: 0; bottom: 0; width: 96px; height: 34px; opacity: .5; }

.delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: var(--r-pill);
}
.delta--up   { color: var(--ok-400);   background: rgba(47, 190, 116, .12); }
.delta--down { color: var(--risk-400); background: rgba(228, 93, 85, .12); }
.delta--flat { color: var(--ink-3);    background: rgba(113, 137, 168, .12); }
/* Untuk metrik di mana "naik" itu buruk (negatif, risiko) — warna terbalik. */
.delta.is-inverse.delta--up   { color: var(--risk-400); background: rgba(228, 93, 85, .12); }
.delta.is-inverse.delta--down { color: var(--ok-400);   background: rgba(47, 190, 116, .12); }
.delta__arrow { font-size: 10px; line-height: 1; }

/* --- 8. Carta ------------------------------------------------------------ */
.chart { width: 100%; position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart--h180 { min-height: 180px; }
.chart--h220 { min-height: 220px; }
.chart--h260 { min-height: 260px; }
.chart--h300 { min-height: 300px; }

.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
/* Legenda boleh togol — Tren Liputan berbilang siri. Kekal sepadan dengan
   legenda statik supaya reka bentuk papan pemuka tidak berubah; hanya keadaan
   'mati' yang kelihatan berbeza. */
.chart-legend__item--toggle { background: none; border: 0; padding: 2px 4px;
  border-radius: 4px; cursor: pointer; font: inherit; color: var(--ink-2); }
.chart-legend__item--toggle:hover { background: var(--surface-2, rgba(255,255,255,.06)); }
.chart-legend__item--toggle:focus-visible { outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 1px; }
.chart-legend__item--toggle.is-off { opacity: .42; text-decoration: line-through; }
.chart-legend__swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

.chart-tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--navy-950); color: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); font-size: 11.5px; line-height: 1.5;
  box-shadow: var(--shadow-3); opacity: 0; transition: opacity .1s var(--ease);
  max-width: 260px;
}
.chart-tip.is-on { opacity: 1; }
.chart-tip b { color: var(--gold-300); }
.chart-tip .k { color: var(--ink-2); }

.chart-empty {
  display: grid; place-items: center; min-height: 150px;
  color: var(--ink-3); font-size: 12.5px; text-align: center; padding: var(--s5);
}

/* --- 9. Jadual ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data th {
  text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  white-space: nowrap; background: var(--surface-2); position: sticky; top: 0;
}
table.data td {
  padding: 11px var(--s4); border-bottom: 1px solid var(--line);
  vertical-align: middle; color: var(--ink-2);
}
table.data tbody tr:hover td { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.strong { color: var(--ink); font-weight: 600; }
table.data .t-main { color: var(--ink); font-weight: 550; display: block;
  max-width: 52ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data .t-sub { font-size: 11px; color: var(--ink-3); }
table.data--compact td { padding: 8px var(--s3); }
table.data--compact th { padding: var(--s2) var(--s3); }

.rank {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--ink-2);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rank.is-top { background: var(--accent-dim); color: var(--gold-300); }

/* --- 10. Lencana, pil, bar ----------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge--pos  { color: var(--ok-400);   background: rgba(47,190,116,.12);  border-color: rgba(47,190,116,.28); }
.badge--neu  { color: var(--ink-2);    background: rgba(113,137,168,.12); border-color: rgba(113,137,168,.26); }
.badge--neg  { color: var(--risk-400); background: rgba(228,93,85,.12);   border-color: rgba(228,93,85,.28); }
.badge--warn { color: var(--warn-400); background: rgba(232,169,60,.12);  border-color: rgba(232,169,60,.30); }
.badge--info { color: var(--info-400); background: rgba(76,151,232,.12);  border-color: rgba(76,151,232,.28); }
.badge--gold { color: var(--gold-300); background: var(--accent-dim);     border-color: rgba(212,175,55,.30); }
.badge--mute { color: var(--ink-3);    background: var(--surface-2);      border-color: var(--line); }

.badge--rendah    { color: var(--ok-400);   background: rgba(47,190,116,.12);  border-color: rgba(47,190,116,.28); }
.badge--sederhana { color: var(--warn-400); background: rgba(232,169,60,.12);  border-color: rgba(232,169,60,.30); }
.badge--tinggi    { color: #FF9A5C;         background: rgba(255,154,92,.12);  border-color: rgba(255,154,92,.30); }
.badge--kritikal  { color: #fff;            background: var(--risk-500);       border-color: var(--risk-400); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot--pos { background: var(--ok-400); } .dot--neu { background: var(--ink-3); }
.dot--neg { background: var(--risk-400); } .dot--gold { background: var(--gold-400); }

/* Bar taburan tiga segmen */
.sbar { display: flex; height: 7px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); }
.sbar i { display: block; height: 100%; }
.sbar .p { background: var(--ok-500); } .sbar .n { background: var(--ink-3); }
.sbar .g { background: var(--risk-500); }
.sbar--lg { height: 11px; }

/* Bar mendatar berperingkat (share of voice) */
.hbar { display: flex; align-items: center; gap: var(--s3); }
.hbar__track { flex: 1; height: 8px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; min-width: 60px; }
.hbar__fill { height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--navy-500), var(--info-400)); }
.hbar__fill--gold { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.hbar__val { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 48px; text-align: right; }

/* Meter skor */
.meter { display: flex; align-items: center; gap: var(--s2); }
.meter__track { width: 62px; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.meter__fill { height: 100%; }
.meter__fill--rendah { background: var(--ok-500); }
.meter__fill--sederhana { background: var(--warn-500); }
.meter__fill--tinggi { background: #E8763C; }
.meter__fill--kritikal { background: var(--risk-500); }
.meter__val { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 30px; }

/* --- 11. Butang & borang ------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--ink); font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background .14s var(--ease), border-color .14s var(--ease), transform .1s var(--ease);
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; }
.btn--gold {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  border-color: var(--gold-600); color: var(--navy-900); font-weight: 700;
}
.btn--gold:hover { background: linear-gradient(180deg, var(--gold-300), var(--gold-400)); }
.btn--primary {
  background: linear-gradient(180deg, var(--navy-500), var(--navy-600));
  border-color: var(--navy-500); color: #fff;
}
.btn--primary:hover { background: linear-gradient(180deg, #0d5599, var(--navy-500)); }
.btn--ghost { background: none; border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-2); }
.btn--danger { background: var(--risk-500); border-color: var(--risk-400); color: #fff; }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--block { width: 100%; }

.field { margin-bottom: var(--s4); }
.field__label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.field__hint { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.field__error { font-size: 11.5px; color: var(--risk-400); margin-top: 5px; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; padding: 9px var(--s3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink);
  font-size: 13px; font-family: inherit;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(111, 168, 232, .16);
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 30px;
}
textarea { min-height: 92px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }

.inline-form { display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }

.filterbar {
  display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
  padding: var(--s3) var(--s4); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: var(--s4);
}
.filterbar select, .filterbar input { width: auto; min-width: 130px; }

/* --- 12. Mesej ----------------------------------------------------------- */
.msg {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 13px; margin-bottom: var(--s3);
}
.msg--success { border-color: rgba(47,190,116,.35); background: rgba(47,190,116,.09); color: var(--ok-400); }
.msg--error   { border-color: rgba(228,93,85,.35);  background: rgba(228,93,85,.09);  color: var(--risk-400); }
.msg--warning { border-color: rgba(232,169,60,.35); background: rgba(232,169,60,.09); color: var(--warn-400); }
.msg--info    { border-color: rgba(76,151,232,.35); background: rgba(76,151,232,.09); color: var(--info-400); }

.empty {
  display: grid; place-items: center; gap: var(--s2);
  padding: var(--s8) var(--s5); text-align: center;
  color: var(--ink-3); font-size: 13px;
}
.empty__title { font-size: 14px; font-weight: 600; color: var(--ink-2); }

.note-strip {
  font-size: 11px; color: var(--ink-3); line-height: 1.55;
  padding: var(--s3) var(--s4); background: var(--surface-2);
  border-left: 2px solid var(--gold-500); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* --- 13. Halaman log masuk ----------------------------------------------- */
.login {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--s5); position: relative; overflow: hidden;
  background: radial-gradient(1200px 800px at 50% -20%, var(--navy-600), var(--navy-950) 62%);
}
.login__canvas { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.login__card {
  position: relative; z-index: 2; width: 100%; max-width: 408px;
  background: rgba(0, 18, 51, .78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(212, 175, 55, .26);
  border-radius: 18px; padding: var(--s8) var(--s7) var(--s7);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);
  text-align: center;
}
.login__crestwrap { display: grid; place-items: center; margin-bottom: var(--s5); }
.login__crest { width: 92px; height: 92px; }
.login__ministry {
  font-size: 13px; font-weight: 750; letter-spacing: .17em;
  text-transform: uppercase; color: #fff;
}
.login__rule {
  width: 52px; height: 2px; margin: var(--s3) auto;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}
.login__system {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-300); font-weight: 600;
}
.login__sub { font-size: 11px; color: var(--ink-3); margin-top: 4px; letter-spacing: .04em; }
.login__form { margin-top: var(--s7); text-align: left; }
.login__foot {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid rgba(148,180,224,.14);
  font-size: 10.5px; color: var(--ink-3); line-height: 1.6;
}
.login__classification {
  display: inline-block; margin-bottom: var(--s4);
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-400); border: 1px solid rgba(212,175,55,.4);
  padding: 3px 10px; border-radius: var(--r-pill);
}

/* --- 14. Animasi jata ---------------------------------------------------- */
/* Bermaruah dengan sengaja: masuk secara pudar, apungan yang sangat perlahan,
   dan sapuan cahaya emas sekali sahaja. Tiada putaran, lantunan atau denyutan
   — jata rasmi tidak boleh dipersendakan. */
.crest { display: block; }
.crest--animate { animation: crest-in 1100ms var(--ease) both; }
.crest--float { animation: crest-in 1100ms var(--ease) both, crest-float 9s ease-in-out 1100ms infinite; }

@keyframes crest-in {
  from { opacity: 0; transform: translateY(9px) scale(.965); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes crest-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.crest-glow { position: relative; display: inline-grid; place-items: center; }
.crest-glow::before {
  content: ""; position: absolute; inset: -22%;
  background: radial-gradient(circle, rgba(212,175,55,.30), transparent 66%);
  filter: blur(14px); z-index: -1;
  animation: crest-breathe 7s ease-in-out infinite;
}
@keyframes crest-breathe {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50%      { opacity: .85; transform: scale(1.05); }
}

/* Sapuan cahaya sekali — dipotong kepada bentuk jata oleh bekas. */
.crest-sweep { position: relative; overflow: hidden; }
.crest-sweep::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  animation: crest-sweep 2200ms var(--ease) 900ms 1 both;
}
@keyframes crest-sweep { to { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .crest--animate, .crest--float { animation: none; opacity: 1; transform: none; }
  .crest-glow::before, .crest-sweep::after { animation: none; }
  .crest-sweep::after { display: none; }
}

/* --- 15. Wizard import --------------------------------------------------- */
.steps { display: flex; align-items: center; gap: 0; margin-bottom: var(--s5); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4) 0 0; }
.step__n {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--surface-3); color: var(--ink-3);
  font-size: 11.5px; font-weight: 700; border: 1px solid var(--line);
}
.step__t { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-weight: 550; }
.step.is-active .step__n { background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: var(--navy-900); border-color: var(--gold-600); }
.step.is-active .step__t { color: var(--ink); font-weight: 650; }
.step.is-done .step__n { background: rgba(47,190,116,.16); color: var(--ok-400); border-color: rgba(47,190,116,.4); }
.step.is-done .step__t { color: var(--ink-2); }
.step__line { width: 26px; height: 1px; background: var(--line); margin-right: var(--s4); }

.dropzone {
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
  padding: var(--s9) var(--s5); text-align: center; cursor: pointer;
  background: var(--surface-2); transition: border-color .16s var(--ease), background .16s var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--gold-400); background: var(--accent-dim); }
.dropzone__t { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.dropzone__s { font-size: 12.5px; color: var(--ink-3); }
.dropzone input[type="file"] { display: none; }

.maprow { display: grid; grid-template-columns: 1fr 26px 1fr; gap: var(--s3);
  align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.maprow:last-child { border-bottom: 0; }
.maprow__arrow { color: var(--ink-3); text-align: center; font-size: 13px; }
.maprow__field { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.maprow__req { color: var(--risk-400); margin-left: 3px; }
.maprow__type { font-size: 10.5px; color: var(--ink-3); }

.progress { height: 7px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.progress__fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transition: width .4s var(--ease);
}

.stat-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s3) var(--s4);
}
.stat__v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat__l { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.stat--ok .stat__v { color: var(--ok-400); }
.stat--warn .stat__v { color: var(--warn-400); }
.stat--bad .stat__v { color: var(--risk-400); }

/* --- 16. Pelbagai -------------------------------------------------------- */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); flex-wrap: wrap; }
.tab {
  padding: 9px var(--s4); font-size: 13px; font-weight: 550;
  color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink-2); text-decoration: none; }
.tab.is-active { color: var(--ink); border-bottom-color: var(--gold-400); font-weight: 650; }

.pager { display: flex; align-items: center; gap: var(--s2); justify-content: center; padding: var(--s4); }
.pager__info { font-size: 12px; color: var(--ink-3); margin: 0 var(--s3); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); font-size: 12.5px; }
.kv dt { color: var(--ink-3); white-space: nowrap; }
.kv dd { margin: 0; color: var(--ink); }

.mono { font-family: var(--mono); font-size: 11.5px; }
.num  { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 11.5px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); }
.mb3 { margin-bottom: var(--s3); } .mb4 { margin-bottom: var(--s4); }
.flex { display: flex; } .items-center { align-items: center; }
.gap2 { gap: var(--s2); } .gap3 { gap: var(--s3); } .gap4 { gap: var(--s4); }
.wrap { flex-wrap: wrap; } .ml-auto { margin-left: auto; }

.classification-strip {
  text-align: center; font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-500);
  padding: var(--s2); border-top: 1px solid var(--line);
}

/* --- 17. Responsif ------------------------------------------------------- */
@media (max-width: 1280px) {
  .c3 { grid-column: span 4; } .c4 { grid-column: span 6; }
  .c5, .c7 { grid-column: span 6; }
  .c8, .c9 { grid-column: span 12; }
}
@media (max-width: 980px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%); transition: transform .22s var(--ease);
    box-shadow: var(--shadow-3);
  }
  .app.is-mobile-open .sidebar { transform: none; }
  .app.is-collapsed .sidebar { width: var(--sidebar-w); flex-basis: var(--sidebar-w); }
  .app.is-collapsed .sidebar__brand-text,
  .app.is-collapsed .nav-group__label,
  .app.is-collapsed .nav-item span,
  .app.is-collapsed .sidebar__foot { display: revert; }
  .app.is-collapsed .nav-item { justify-content: flex-start; padding: 9px var(--s3); }
  .scrim { position: fixed; inset: 0; background: rgba(0,5,15,.6); z-index: 35; }
  .c3, .c4, .c5, .c6, .c7, .c8, .c9 { grid-column: span 12; }
  .content { padding: var(--s4); }
  .header__title .t2 { display: none; }
  .periodbar { top: var(--header-h); }
  .periodbar__meta { width: 100%; margin-left: 0; }
}
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .kpi__value { font-size: 25px; }
  .userchip__meta { display: none; }
  .presets { overflow-x: auto; max-width: 100%; }
  .page-head h1 { font-size: 19px; }
}

/* --- 18. Cetakan --------------------------------------------------------- */
@media print {
  body::before, .sidebar, .header, .periodbar, .page-head__actions,
  .panel__head-actions, .pager { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .content { padding: 0; }
}


/* ==========================================================================
   17. LAPISAN PENGGILAP — pas visual "pusat arahan"
   ==========================================================================
   Ditambah SELEPAS semua peraturan asas dengan sengaja: ia menghalusi susun
   atur yang sudah berfungsi dan bukan menulisnya semula, jadi setiap
   pelarasan di sini boleh dibaca (dan diundur) sebagai satu blok tunggal.

   Sasaran: ketumpatan papan pemuka, hierarki kad KPI, penggilap sidebar dan
   pengepala, dan proporsi carta.
   ========================================================================== */

/* --- Kanvas: kedalaman di sebalik panel -------------------------------- */
.main {
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(10, 74, 133, .30), transparent 62%),
    radial-gradient(760px 420px at 4% 0%, rgba(212, 175, 55, .055), transparent 60%);
}
.content {
  padding: var(--s5) var(--s6) var(--s8);
  max-width: 1760px;      /* skrin ultra-lebar: jangan regangkan jadual */
  width: 100%;
  margin-inline: auto;
}

/* --- Tipografi: satu skala, bukan sepuluh ------------------------------ */
.page-head { margin-bottom: var(--s4); align-items: center; }
.page-head h1 {
  font-size: 25px; font-weight: 660; letter-spacing: -.022em; line-height: 1.15;
}
.page-head .sub { font-size: 13px; color: var(--ink-2); opacity: .82; margin-top: 4px; }
.panel__head h2 { font-size: 14px; letter-spacing: -.008em; }
.panel__head .sub { font-size: 11.5px; line-height: 1.45; }

/* --- Pengepala: garis emas nipis memisahkan krom daripada kandungan ---- */
.header {
  background: linear-gradient(180deg, rgba(0, 27, 66, .93), rgba(0, 18, 51, .88));
  box-shadow: 0 1px 0 rgba(212, 175, 55, .16), 0 10px 30px -22px rgba(0, 0, 0, .9);
}
.header__title .t1 { letter-spacing: .012em; }
/* Nama + peranan MESTI bertindan menegak. Sebagai span sebaris ia dirender
   sebagai "Pegawai UKOM PEGAWAI UKOM" pada satu baris — kelihatan seperti
   teks berganda dan bukan kad pengguna. */
.userchip__meta { display: flex; flex-direction: column; gap: 1px; }

/* --- Sidebar ------------------------------------------------------------ */
.sidebar {
  background: linear-gradient(180deg, var(--navy-900) 0%, #000C22 100%);
  box-shadow: inset -1px 0 0 rgba(148, 180, 224, .10);
}
.sidebar__brand { gap: var(--s3); }
.sidebar__crest { width: 40px; height: 40px; filter: drop-shadow(0 3px 10px rgba(212,175,55,.28)); }
.sidebar__brand-text .l1 { font-size: 12.5px; letter-spacing: .1em; }
.nav-group__label { opacity: .72; }
.nav-item { font-size: 13px; padding: 8px var(--s3); }
.nav-item.is-active { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .16); }
.nav-item.is-active .nav-item__icon { opacity: 1; color: var(--gold-300); }
.sidebar__foot {
  letter-spacing: .1em; opacity: .68;
}

/* --- Bar tempoh --------------------------------------------------------- */
.periodbar { box-shadow: 0 1px 0 rgba(148, 180, 224, .08); }
.preset.is-active {
  box-shadow: 0 2px 10px -3px rgba(212, 175, 55, .55);
}

/* --- Kad KPI: satu metrik memimpin, selebihnya menyokong ---------------- */
/* Enam kad dengan berat yang sama memaksa pembaca mengimbas kesemuanya.
   Kad utama diberi dua lajur dan angka yang lebih besar supaya mata mendarat
   pada jumlah liputan dahulu, kemudian mengembara ke penyokong. */
.kpi-row {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--s3);
}
.kpi {
  padding: var(--s4) var(--s4) 13px;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.kpi:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.kpi__label { font-size: 9.5px; letter-spacing: .13em; }
.kpi__value { font-size: 30px; letter-spacing: -.03em; line-height: 1.05; }
.kpi__foot { margin-top: 7px; }

.kpi--lead {
  grid-column: span 2;
  background:
    linear-gradient(135deg, rgba(212,175,55,.10), transparent 58%),
    var(--surface);
  border-color: rgba(212, 175, 55, .26);
}
.kpi--lead .kpi__value { font-size: 44px; letter-spacing: -.035em; }
.kpi--lead .kpi__label { color: var(--gold-300); }
.kpi--lead::after { background: linear-gradient(90deg, var(--gold-400), transparent 74%); }
@media (max-width: 900px) { .kpi--lead { grid-column: span 2; } }

/* --- Panel: kepala berperingkat, badan padat --------------------------- */
.panel {
  border-radius: 12px;
  transition: border-color .16s var(--ease);
}
.panel:hover { border-color: rgba(148, 180, 224, .24); }
.panel__head {
  background: linear-gradient(180deg, rgba(255,255,255,.028), transparent);
  padding-block: 11px;
}
.panel__body { padding: var(--s3) var(--s4) var(--s4); }

/* Carta pendek (cth pecahan satu-baris) tidak sepatutnya meninggalkan lompang
   di dalam panel yang diregangkan oleh jirannya yang lebih tinggi. */
.panel__body > .chart:only-child { margin-block: auto; }
.chart-legend { margin-top: var(--s2); gap: var(--s3) var(--s4); }

/* --- Grid: ruang lebih ketat, sejajar dengan skala 4px ----------------- */
.grid { gap: var(--s3); }
.mb4 { margin-bottom: var(--s3); }

/* --- Jadual: baris lebih padat, kepala lebih tenang -------------------- */
table.data th {
  background: rgba(0, 26, 64, .55);
  font-size: 9.5px; letter-spacing: .1em;
}
table.data td { padding: 7px var(--s3); }
table.data .t-main { font-size: 12.5px; }
.rank { font-size: 10.5px; }

/* --- Bar penapis: satu baris yang tenang ------------------------------- */
.filterbar { padding: 10px var(--s3); gap: var(--s2); border-radius: var(--r); }
.filterbar select, .filterbar input { min-width: 124px; font-size: 12.5px; padding: 7px var(--s3); }

/* --- Jalur klasifikasi -------------------------------------------------- */
.classification-strip {
  letter-spacing: .18em;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.09), transparent);
}

/* --- Bar penapis: satu baris, carian mengambil ruang lebihan ------------ */
/* Sebagai flex-wrap tulen, butang "Guna" jatuh sendirian ke baris kedua
   sebaik sahaja penapis keenam ditambah. Grid menjadikan susunannya
   ditentukan: pemilih bersaiz tetap, carian mengembang, butang di hujung. */
.filterbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr)) minmax(150px, 1.6fr) auto auto;
  align-items: center;
}
.filterbar select, .filterbar input { width: 100%; min-width: 0; }
@media (max-width: 1280px) {
  .filterbar { grid-template-columns: repeat(3, 1fr) auto; }
}
@media (max-width: 760px) {
  .filterbar { grid-template-columns: 1fr 1fr; }
}

/* --- Panel yang mengandungi HANYA carta memusatkan kandungannya --------- */
/* Baris grid diregangkan kepada jiran tertingginya, jadi carta pendek (cth
   satu platform tunggal) meninggalkan lompang besar di bawahnya. */
.panel__body:has(> .chart:only-child) {
  display: flex; flex-direction: column; justify-content: center;
}

/* --- Kad KPI: label satu baris ----------------------------------------- */
/* "Sebutan Berisiko Tinggi" membalut kepada dua baris dan menjadikan satu kad
   lebih tinggi daripada yang lain, memecahkan garis dasar baris. */
.kpi__label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi { display: flex; flex-direction: column; justify-content: space-between; }

/* --- Legenda carta: jangan biarkan ia melayang jauh dari carta ---------- */
.chart svg + .chart-legend { padding-top: 2px; }

/* --- Skrin log masuk & portal: kehadiran upacara ------------------------ */
/* Ini skrin pertama yang dilihat seorang pegawai, dan satu-satunya yang
   mungkin ditayangkan semasa demonstrasi. Ia mesti terasa seperti sistem
   rasmi, bukan borang pentadbir. */
.login__card {
  padding: var(--s9) var(--s7) var(--s7);
  border-color: rgba(212, 175, 55, .34);
  box-shadow:
    0 44px 100px -34px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Rambut emas pada tepi atas kad — pengapit visual yang sama seperti jalur
   klasifikasi di bahagian bawah aplikasi. */
.login__card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, transparent, var(--gold-400) 42%,
                              var(--gold-300) 50%, var(--gold-400) 58%, transparent);
  opacity: .85;
}
.login__crest { width: 104px; height: 104px; }
.login__crestwrap { margin-bottom: var(--s6); }
.login__ministry { font-size: 14px; letter-spacing: .19em; }
.login__system { font-size: 12px; letter-spacing: .15em; }
.login__form { margin-top: var(--s6); }
.login__form .field__label { font-size: 10px; letter-spacing: .14em; }
.login__form input { padding: 11px var(--s4); font-size: 13.5px; }
.login__form .btn--gold {
  padding: 12px; font-size: 14px; letter-spacing: .03em;
  box-shadow: 0 10px 26px -12px rgba(212, 175, 55, .8);
}
.login__foot { font-size: 10px; line-height: 1.65; opacity: .9; }

/* --- Zon lepas fail ----------------------------------------------------- */
/* .dropzone ialah <label>, yang lalainya display:inline. Kotak sempadan
   sebaris membalut baris teks dan bukan blok, jadi sempadan putus-putus
   dilukis merentasi kepala panel di atasnya. */
.dropzone { display: block; padding: var(--s8) var(--s5); }
.dropzone__t { font-size: 14.5px; }

/* --- Baris KPI: pembahagian bersih pada setiap lebar desktop ------------ */
/* Enam kad dengan kad utama merentang dua lajur menjadikan TUJUH unit grid.
   Tujuh hanya membahagi dengan kemas kepada tujuh lajur, jadi auto-fit
   meninggalkan baris kedua yang berlubang pada skrin riba 1366px. Rentangan
   itu kini dihadkan kepada lebar yang benar-benar memuatkan ketujuh-tujuhnya;
   di bawah itu kad utama mengekalkan hierarkinya melalui warna emas dan skala
   taip, bukan lebar. */
.kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi--lead { grid-column: span 1; }
@media (min-width: 1560px) {
  .kpi-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .kpi--lead { grid-column: span 2; }
}
@media (max-width: 1180px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Nilai kad utama menyusut sedikit apabila ia tidak lagi merentang dua lajur,
   supaya "214" tidak melimpah keluar dari kad yang lebih sempit. */
.kpi--lead .kpi__value { font-size: 34px; }
@media (min-width: 1560px) { .kpi--lead .kpi__value { font-size: 44px; } }


/* ==========================================================================
   18. IDENTITI RASMI + HERO SENI BINA
   ==========================================================================
   Tiga peranan, tiga rawatan:

     JATA      identiti rasmi. Duduk terus pada navy — kanvas putih luar
               dibuang daripada aset, bukan disembunyikan oleh bekas. Tiada
               plat, tiada bayang, tiada rupa ikon-aplikasi.
     BANGUNAN  identiti seni bina. Hero pada skrin log masuk dan portal
               sahaja; ia tidak pernah masuk ke ruang kerja papan pemuka.
     PAPAN PEMUKA  antara muka operasi. Jenama dikecilkan kepada kunci
               sidebar supaya data yang bercakap.
   ========================================================================== */

/* --- Kunci jenama sidebar ----------------------------------------------- */
/* Baris jenama setinggi pengepala (66px) dan overflow:hidden, jadi padding
   menegak yang diwarisi memangkas bahagian atas jata. Padding menegak
   dibuang; align-items:center pada peraturan asas memusatkannya. */
.sidebar__brand { gap: 13px; padding: 0 15px; }
.sidebar__emblem {
  flex: 0 0 auto;
  height: 54px; width: auto; max-width: 70px;
  object-fit: contain;
  /* Tiada bayang jatuh: jata rasmi tidak diberi kesan hiasan. Satu penonjolan
     yang sangat halus sahaja supaya tepi gelapnya tidak hilang ke dalam navy. */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
.sidebar__brand-text { display: flex; flex-direction: column; justify-content: center; }
.sidebar__brand-text .l1 {
  font-size: 15px; font-weight: 750; letter-spacing: .16em;
  color: #FFFFFF; line-height: 1.1;
}
.sidebar__brand-text .l2 {
  font-size: 8.5px; font-weight: 600; letter-spacing: .17em;
  color: var(--gold-400); text-transform: uppercase; margin-top: 3px;
  line-height: 1.1;
}
.app.is-collapsed .sidebar__brand-text { display: none; }
.app.is-collapsed .sidebar__emblem { height: 40px; }

/* --- Susun atur pengesahan: seni bina | borang -------------------------- */
.auth { display: grid; grid-template-columns: 1.06fr .94fr; min-height: 100vh; }

.auth__visual { position: relative; overflow: hidden; background: var(--navy-950); }

/* Lakaran diskalakan melebihi bingkainya dan dijajarkan ke kiri supaya menara
   tengah kekal boleh dikenali sementara sayapnya dipangkas oleh tepi skrin —
   ia dibaca sebagai seni bina yang dilihat dari dekat dan bukan sebagai
   gambar kecil yang ditampal ke dalam kotak. */
.auth__visual-img {
  position: absolute; inset: -2% -6% -2% -14%;
  background-size: cover; background-position: 38% 46%;
  /* Ditarik ke arah sistem navy tanpa membasuh karya seni: ketepuan diredam,
     kecerahan diturunkan supaya taip putih di sebelahnya kekal dominan. */
  filter: saturate(.66) contrast(1.06) brightness(.82);
  /* Tepi larut ke dalam navy dan bukan berhenti pada garis lurus. */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,.45) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, #000 0%, #000 52%, rgba(0,0,0,.45) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
  mask-composite: intersect;
}
/* Gred navy: menyatukan lakaran ke dalam palet dan menjamin kontras pada
   jahitan ke arah panel borang. */
.auth__visual-grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,11,31,.42) 0%, rgba(0,11,31,.06) 34%,
                    rgba(0,14,38,.55) 74%, var(--navy-950) 99%),
    radial-gradient(120% 90% at 18% 26%, rgba(10,74,133,.26), transparent 62%);
}

.auth__panel {
  position: relative; display: grid; place-items: center;
  padding: var(--s8) var(--s7);
  background:
    radial-gradient(680px 520px at 62% -4%, rgba(10,74,133,.26), transparent 62%),
    linear-gradient(90deg, var(--navy-950) 0%, var(--navy-900) 26%,
                    var(--navy-900) 100%);
}
.auth__panel-inner { width: 100%; max-width: 372px; text-align: center; }

/* --- Hierarki jenama ---------------------------------------------------- */
.auth__emblem {
  height: 104px; width: auto; display: block; margin: 0 auto var(--s5);
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5));
}
.auth__ministry {
  font-size: 17px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #FFFFFF; margin: 0; line-height: 1.35;
}
.auth__rule {
  width: 46px; height: 1px; margin: var(--s4) auto;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}
.auth__wordmark {
  font-size: 10.5px; font-weight: 650; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-400);
}
.auth__system {
  margin-top: var(--s5); font-size: 12.5px; color: var(--ink-2);
  line-height: 1.55;
}
.auth__system span { display: block; font-size: 10.5px; color: var(--ink-3); }

.auth__form { margin-top: var(--s7); text-align: left; }
.auth__form .field { margin-bottom: var(--s4); }
.auth__form .field__label { font-size: 9.5px; letter-spacing: .15em; }
.auth__form input { padding: 11px var(--s4); font-size: 13.5px; }
.auth__form .btn--gold { padding: 12px; font-size: 14px; letter-spacing: .03em; }

.auth__foot {
  margin-top: var(--s7); padding-top: var(--s4);
  border-top: 1px solid rgba(148, 180, 224, .13);
  font-size: 10px; color: var(--ink-3); line-height: 1.7;
}
.auth__classif {
  display: block; margin-bottom: 7px;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-400);
}

/* --- Skrin sempit: seni bina menjadi jalur, borang mengalir di bawah ---- */
@media (max-width: 940px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: 27vh auto; }
  .auth__visual-img {
    inset: 0; background-position: 50% 44%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  }
  .auth__visual-grade {
    background: linear-gradient(180deg, rgba(0,11,31,.42) 0%,
                                rgba(0,18,51,.70) 66%, var(--navy-900) 100%);
  }
  .auth__panel { padding: var(--s6) var(--s5) var(--s8); }
  .auth__emblem { height: 84px; }
  .auth__ministry { font-size: 15px; }
}
@media (max-width: 420px) {
  .auth { grid-template-rows: 21vh auto; }
  .auth__panel-inner { max-width: 100%; }
  .auth__emblem { height: 74px; }
  .auth__ministry { font-size: 13.5px; letter-spacing: .13em; }
}

/* --- Dialog pengesahan --------------------------------------------------- */
/* <dialog> asli: pengurusan fokus, penutupan Esc dan lapisan atas datang
   daripada pelayar, jadi tiada perangkap fokus tersuai untuk salah dibuat. */
.modal {
  border: 1px solid rgba(212, 175, 55, .34);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  padding: var(--s6);
  max-width: 460px; width: calc(100% - var(--s6));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
}
.modal::backdrop { background: rgba(0, 9, 26, .72); backdrop-filter: blur(2px); }
.modal__title {
  font-size: 16px; font-weight: 680; letter-spacing: -.01em;
  margin: 0 0 var(--s3);
}
.modal__body { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.modal__actions {
  display: flex; gap: var(--s2); justify-content: flex-end;
  margin-top: var(--s6);
}

/* ===================================================================
   FASA 4–6 — kad kuota, kes krisis, borang kandungan
   Menggunakan token warna sedia ada sahaja; tiada palet baharu.
   =================================================================== */

/* Kad kuota TOR pada papan pemuka kandungan. */
.quota-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  padding: 14px 16px;
  background: var(--surface-2, rgba(255, 255, 255, .02));
  height: 100%;
}
.quota-card__label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600;
}
.quota-card__value {
  font-size: 28px; font-weight: 700; line-height: 1.1; margin-top: 6px;
  color: var(--text);
}
.quota-card__of { font-size: 15px; font-weight: 500; color: var(--text-dim); }

/* Petikan ringkas untuk lonjakan terkini pada papan krisis. */
.callout-mini {
  border-left: 3px solid var(--gold-500, #d4af37);
  padding: 8px 0 8px 12px;
}

/* Teks pra-format yang membalut — pautan bukti dan tajuk pendorong. */
.pre-wrap {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  font-family: inherit; color: var(--text-dim); line-height: 1.6;
}

/* Senarai rapat di dalam kotak mesej. */
ul.tight { margin: 6px 0 0; padding-left: 18px; }
ul.tight li { margin: 2px 0; }

/* Kotak semak sebaris dengan labelnya. */
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--gold-500, #d4af37); }

/* Ralat dan petunjuk medan borang. */
.field__err { display: block; font-size: 12px; color: var(--risk-400, #e45d55);
  margin-top: 4px; }
.field--inline { display: inline-flex; flex-direction: column; margin: 0; }

/* Utiliti jurang kecil yang digunakan oleh baris butang kes. */
.gap1 { gap: 6px; }
.items-start { align-items: flex-start; }

/* ===================================================================
   Pemilih keluarga laporan — dua kad, pilihan pertama pada skrin Jana.
   =================================================================== */
.family-choice { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.family-card {
  flex: 1 1 320px; display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-md, 10px);
  padding: 14px 16px; cursor: pointer;
  background: var(--surface-2, rgba(255, 255, 255, .02));
  transition: border-color .12s ease, background .12s ease;
}
.family-card:hover { border-color: var(--gold-500, #d4af37); }
.family-card input { margin-top: 3px; accent-color: var(--gold-500, #d4af37); }
.family-card:has(input:checked) {
  border-color: var(--gold-500, #d4af37);
  background: rgba(212, 175, 55, .07);
}
.family-card__body { display: flex; flex-direction: column; gap: 4px; }
.family-card__title { font-weight: 650; color: var(--text); }
.family-card__sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }

/* ===================================================================
   TOR 5.1.2 — penunjuk kesediaan penghantaran artikel
   =================================================================== */
.readiness { display: flex; gap: 12px; flex-wrap: wrap; }
.ready-item {
  flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--r-md, 10px); padding: 12px 14px;
  background: var(--surface-2, rgba(255, 255, 255, .02));
}
.ready-item.is-ok  { border-left-color: var(--pos-500, #2fbe74); }
.ready-item.is-bad { border-left-color: var(--risk-400, #e45d55); }
.ready-item__k {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600;
}
.ready-item__v { font-size: 15px; font-weight: 650; color: var(--text); }
.ready-item.is-ok  .ready-item__v { color: var(--pos-500, #2fbe74); }
.ready-item.is-bad .ready-item__v { color: var(--risk-400, #e45d55); }
.ready-item__h { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }

/* ===================================================================
   TOR 5.1.2 — kad cadangan topik + saluran paip
   =================================================================== */
.pipeline { display: flex; gap: 10px; flex-wrap: wrap; height: 100%; }
.pipe {
  flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-md, 10px);
  padding: 12px 14px; background: var(--surface-2, rgba(255, 255, 255, .02));
}
.pipe__k { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; }
.pipe__v { font-size: 24px; font-weight: 700; color: var(--text); }
.pipe__h { font-size: 10.5px; color: var(--text-dim); }

.reco {
  border: 1px solid var(--line); border-left: 3px solid var(--gold-500, #d4af37);
  border-radius: var(--r-md, 10px); padding: 18px 20px; margin-bottom: 16px;
  background: var(--surface-2, rgba(255, 255, 255, .02));
}
.reco.is-muted { opacity: .55; border-left-color: var(--line); }
.reco__head { display: flex; justify-content: space-between; gap: 20px;
  align-items: flex-start; flex-wrap: wrap; }
.reco__no { font-size: 10.5px; letter-spacing: .12em; color: var(--gold-500, #d4af37);
  font-weight: 700; }
.reco__title { font-size: 20px; font-weight: 700; color: var(--text);
  margin: 2px 0 6px; }
.reco__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.reco__score { text-align: right; }
.reco__score-v { display: block; font-size: 26px; font-weight: 700;
  color: var(--gold-500, #d4af37); line-height: 1; }
.reco__score-k { font-size: 10.5px; color: var(--text-dim); }

.reco__stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
.rstat { flex: 1 1 110px; border-top: 1px solid var(--line); padding-top: 8px; }
.rstat__v { display: block; font-size: 19px; font-weight: 700; color: var(--text); }
.rstat__v.is-neg { color: var(--risk-400, #e45d55); }
.rstat__v.is-pos { color: var(--pos-500, #2fbe74); }
.rstat__k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); }

.reco__meta { display: flex; gap: 22px; flex-wrap: wrap; margin: 12px 0;
  font-size: 13px; color: var(--text); }
.reco__meta-k { display: block; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); }

.reco__why { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.reco__why-h { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 650; margin-bottom: 8px; }
.reco__factors { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fac { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; min-width: 108px; }
.fac__k { font-size: 10.5px; color: var(--text-dim); }
.fac__v { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.fac--high .fac__v { color: var(--risk-400, #e45d55); }
.fac--medium .fac__v { color: var(--gold-500, #d4af37); }
.fac--low .fac__v { color: var(--text-dim); }

.reco__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }