/* ============================================================
   TABSET + komponen modul domain
   RSN Johor 2040 · Dashboard Analitik
   Menggunakan token dalam tokens.css — jangan tetapkan warna mentah
   kecuali warna sektor JETP yang ditetapkan doc §11.2.
   ============================================================ */

[x-cloak]{display:none !important}

/* ── Tabset ────────────────────────────────────────────────── */
.tabset{margin-top:18px}

.tablist{
  display:flex; gap:4px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  padding:0 2px;
}

.tab{
  appearance:none; background:transparent; border:0;
  border-bottom:2px solid transparent;
  padding:10px 16px; margin-bottom:-1px;
  font:inherit; font-size:13.5px; font-weight:600;
  color:var(--ink-2); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  transition:color .15s, background .15s, border-color .15s;
}
.tab:hover{color:var(--ink); background:var(--surface-2)}
.tab:focus-visible{outline:none; box-shadow:var(--shadow-glow)}
.tab[aria-selected="true"]{
  color:var(--primary); border-bottom-color:var(--primary);
  background:var(--surface);
}
[data-theme="dark"] .tab[aria-selected="true"]{color:var(--ink)}
.tab .ic{width:15px; height:15px; flex:none}
.tab .kira{
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  padding:1px 6px; border-radius:99px;
  background:var(--surface-3); color:var(--ink-2);
}

.tabpanel{padding-top:18px}
.tabpanel:focus{outline:none}

/* ── Segmented control (pilihan jadual/mod) ────────────────── */
.seg{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.seg button{
  appearance:none; border:0; background:transparent; font:inherit;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  padding:6px 13px; border-radius:6px; cursor:pointer;
  transition:background .15s, color .15s;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{
  background:var(--surface); color:var(--primary); box-shadow:var(--shadow);
}
.seg button:focus-visible{outline:none; box-shadow:var(--shadow-glow)}

/* ── Sidebar: penanda teras + modul akan datang ────────────── */
.side-item{position:relative}
.side-teras-bar{
  position:absolute; left:0; top:7px; bottom:7px; width:3px;
  border-radius:0 3px 3px 0;
}
.side-item-nanti{opacity:.42; cursor:default}
.side-item-nanti .badge-num{
  background:transparent; border:1px solid var(--sidebar-border);
  color:var(--sidebar-section); font-size:9.5px;
}

/* ── Sidebar: kumpulan modul mengikut Teras (collapsible) ──── */
.side-nav-teras{gap:3px}
.side-teras-group{border-radius:9px; overflow:hidden}
.side-teras-group summary{list-style:none; cursor:pointer}
.side-teras-group summary::-webkit-details-marker{display:none}
.side-teras-head{
  display:flex; align-items:center; gap:9px; padding:9px 12px;
  border-radius:9px; font-size:12px; font-weight:600;
  color:var(--sidebar-text); transition:background .15s,color .15s;
}
.side-teras-head:hover{background:rgba(255,255,255,.06); color:var(--sidebar-text-hover)}
.side-teras-group[open] > .side-teras-head{color:var(--sidebar-text-hover)}
.side-teras-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--teras-c); box-shadow:0 0 0 3px color-mix(in srgb, var(--teras-c) 25%, transparent);
}
.side-teras-label{flex:1; min-width:0; white-space:normal; line-height:1.3}
.side-teras-count{
  font-size:10px; font-weight:600; color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.08); padding:1px 7px; border-radius:99px;
  font-family:'JetBrains Mono',monospace; flex-shrink:0;
}
.side-teras-chev{width:14px; height:14px; flex-shrink:0; opacity:.5; transition:transform .18s}
.side-teras-group[open] > .side-teras-head .side-teras-chev{transform:rotate(180deg)}
.side-teras-body{
  display:flex; flex-direction:column; gap:2px;
  padding:2px 6px 6px 26px;
  animation:side-teras-in .16s ease;
}
.side-teras-body .side-item{padding:8px 12px}
.side-teras-body .side-item .nm{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3}
@keyframes side-teras-in{from{opacity:0; transform:translateY(-3px)}to{opacity:1; transform:translateY(0)}}

/* ── Jadual matriks (sticky header + lajur pertama) ────────── */
.tbl-wrap{
  max-height:min(66vh,640px); overflow:auto;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface);
}
.tbl-matriks{border-collapse:separate; border-spacing:0; width:100%; font-size:12.5px}
.tbl-matriks th,.tbl-matriks td{
  padding:8px 11px; border-bottom:1px solid var(--border-2); white-space:nowrap;
}
.tbl-matriks thead th{
  position:sticky; top:0; z-index:2;
  background:var(--surface-2); color:var(--ink-2);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  text-align:right; vertical-align:bottom;
}
.tbl-matriks thead th:first-child,
.tbl-matriks tbody th{
  position:sticky; left:0; z-index:1;
  background:var(--surface); text-align:left; font-weight:600;
}
.tbl-matriks thead th:first-child{z-index:3; background:var(--surface-2)}
.tbl-matriks td{text-align:right; font-variant-numeric:tabular-nums}
.tbl-matriks tbody tr:hover td,
.tbl-matriks tbody tr:hover th{background:var(--surface-2)}
.tbl-matriks tfoot th,.tbl-matriks tfoot td{
  position:sticky; bottom:0; background:var(--surface-3);
  font-weight:700; border-top:1px solid var(--border);
}
.th-sektor{
  writing-mode:vertical-rl; transform:rotate(180deg);
  max-height:130px; padding:10px 6px !important;
}
.th-sektor .dot{
  display:inline-block; width:8px; height:8px; border-radius:2px;
  margin-bottom:6px; transform:rotate(180deg);
}

/* ── Sel Location Quotient ─────────────────────────────────── */
.lq-tinggi{background:var(--green-dim); color:var(--green); font-weight:700}
.lq-rendah{background:var(--red-dim);   color:var(--red)}
.lq-neutral{color:var(--ink-2)}
.lq-tiada{color:var(--ink-4)}

/* ── Kad GAP ───────────────────────────────────────────────── */
.gap-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.gap-kad{
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--amber);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
}
.gap-kad .kod{
  font-size:10.5px; font-weight:800; letter-spacing:.08em;
  color:var(--amber); text-transform:uppercase;
}
.gap-kad h3{margin:5px 0 9px; font-size:15px; line-height:1.35}
.gap-kad p{margin:0 0 9px; font-size:13px; line-height:1.6; color:var(--ink-2)}
.gap-kad .tindakan{
  appearance:none; border:1px solid var(--border); background:var(--surface-2);
  font:inherit; font-size:12px; font-weight:600; color:var(--primary);
  padding:6px 12px; border-radius:var(--radius-sm); cursor:pointer;
}
.gap-kad .tindakan:hover{background:var(--primary-100)}

/* ── Grid carta ────────────────────────────────────────────── */
.carta-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.carta-kad{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
}
.carta-kad h3{margin:0 0 3px; font-size:14px}
.carta-kad .nota{margin:0 0 12px; font-size:11.5px; color:var(--ink-3); line-height:1.5}
.carta-kotak{position:relative; height:300px}
.carta-kad.lebar{grid-column:1/-1}
.carta-kad.lebar .carta-kotak{height:380px}

/* ── Nota kaveat (doc §11.4) ───────────────────────────────── */
.kaveat{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--amber-dim); border:1px solid var(--amber-soft);
  border-radius:var(--radius-sm); padding:11px 14px;
  font-size:12px; line-height:1.6; color:var(--ink-2);
}
.kaveat svg{flex:none; width:15px; height:15px; color:var(--amber); margin-top:2px}

@media (prefers-reduced-motion:reduce){
  .tab,.seg button{transition:none}
}