/* ==========================================================
   MOKISMA — MAIN STYLE (Design System / UI Kit)
   Dipakai oleh SEMUA halaman: homepage, dalorealtime, stratop, transaksi
   3 font sesuai spesifikasi:
   - Barlow Condensed -> heading, tombol, nav, angka besar
   - Inter             -> paragraf/deskripsi
   - Consolas          -> label kecil/eyebrow/kode (monospace)

   DAFTAR ISI
   1. Tokens (Color Palette, Typography, Spacing)
   2. Reset & Base
   3. Navbar
   4. Page Heading (+ Filter Bar)
   5. Info Bar
   6. Card (generic — dipakai homepage utk listing dashboard)
   7. KPI Card
   8. UPB Accordion (+ Shift Panel)
   9. Section Ringkasan / Average Grid
   9F. Strategi — SOP Progress & Detail (khusus stratop.html)
   10. Footer
   11. Responsive
   12. Reduced Motion
   13. Zoom Notice Modal
   14. Hero / Landing Page (index.html)
   15. Login Page (login.html)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@400;600;700;900&family=JetBrains+Mono:wght@500;700&display=swap');

/* ================= 1. TOKENS ================= */
:root {
  /* --- Warna dasar --- */
  --color-bg: #0A0E14;         /* latar paling belakang halaman */
  --color-bg-strip: #0D1420;   /* navbar, page-heading, footer */
  --color-card: #121826;       /* kartu dashboard */
  --color-white: #FFFFFF;

  /* --- Warna teks --- */
  --color-gold: #FFC107;
  --color-muted: #90A1B9;        /* nav non-aktif, info-bar, list footer */
  --color-muted-strong: #62748E; /* paragraf/deskripsi */
  --color-danger: #FF2600;       /* label "KPI" */
  --color-meta-gold: #B27D4C;    /* teks meta di dalam progress bar (misal "9/14 ULTG TERLAKSANA") */
  --color-tag: #FFECDC;          /* tag kecil di atas foto card */
  --color-copyright: #45556C;

  /* --- Border (nuansa gold transparan, beda opacity per konteks) --- */
  --border-soft: rgba(255, 193, 7, 0.08);
  --border-medium: rgba(255, 193, 7, 0.1);
  --border-card: rgba(255, 193, 7, 0.12);
  --border-cta: rgba(255, 193, 7, 0.2);

  /* --- Status Badge / KPI Card colors --- */
  --color-ontime: #38BDF8;    /* biru muda - status ON TIME */
  --color-overtime: #FF2600;  /* merah - status OVER TIME (sama dengan --color-danger) */
  --color-success-bg: rgba(34, 197, 94, 0.14);
  --color-success-border: rgba(34, 197, 94, 0.35);
  --color-success-text: #4ADE80;

  /* --- Warna bar accordion aktif --- */
  --color-upb-active-bg: rgba(99, 153, 34, 0.12);
  --color-upb-active-border: rgba(99, 153, 34, 0.35);
  --color-upb-active-text: #A3D65C;

  /* Aksen netral -- dipakai bingkai frame chart (ECE & Abnormal Frekuensi)
     dan toggle bar-nya, supaya kedua section pakai warna yang SAMA (tidak
     lagi biru vs indigo per section). */
  --color-neutral-accent: #64748B;

  /* --- Badge "berisiko" (dipakai transaksi.html, indikator korelasi KPI) --- */
  --color-warning-bg: rgba(245, 158, 11, 0.14);
  --color-warning-border: rgba(245, 158, 11, 0.35);
  --color-warning-text: #F59E0B;

  /* Badge netral/hitam -- dipakai saat data AFPM/AFa/CF belum tersedia */
  --color-kosong-bg: rgba(0, 0, 0, 0.35);
  --color-kosong-border: rgba(255, 255, 255, 0.10);
  --color-kosong-text: #9AA4B2;

  /* --- Warna KPI PLTU (AFPM / AFA / CF) -- dipakai transaksi.html --- */
  --color-kpi-afpm: #F59E0B;
  --color-kpi-afa: #22D3EE;
  --color-kpi-cf: #34D399;

  /* --- Typography --- */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Consolas', monospace;
  --font-data: 'JetBrains Mono', monospace; /* dipakai khusus kartu monitoring transaksi (eyebrow, judul, period pill, badge, DCH) */

  /* --- Warna teks sekunder khusus kartu monitoring transaksi --- */
  --color-gauge-label: #99A1AF;
  --color-data-muted: #8B93A7;
  --color-data-white: #F4F5F7;

  /* --- Spacing scale: 4, 8, 12, 16, 20, 24, 32, 64 --- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;

  --section-px: clamp(20px, 4.5vw, 32px);
}

/* ================= 2. RESET & BASE ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: dark; /* supaya popup <select>, scrollbar, dll pakai tema gelap
    bawaan browser -- tanpa ini, dropdown Bulan/Periode/Tahun/Semester tampil
    putih terang & teksnya susah kebaca karena browser defaultnya nganggep
    halaman ini light-mode */
  scrollbar-gutter: stable; /* selalu reserve ruang scrollbar, biar lebar konten
    tidak berubah antara halaman pendek (tanpa scrollbar) vs halaman panjang
    (dengan scrollbar) -- inilah penyebab kpi-card Overview vs DALOP beda lebar */
}

body {
  background-color: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-body);
}

select {
  color-scheme: dark;
}

select option {
  background-color: var(--color-card);
  color: var(--color-white);
}

a {
  text-decoration: none;
  color: inherit;
}

/* ================= 3. NAVBAR ================= */
.navbar {
  padding: 14px var(--section-px);
  background: var(--color-bg-strip);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.navbar__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.navbar__eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gold);
}

.navbar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.7px;
  color: var(--color-white);
}

/* --- Menu: segmented pill control --- */
.navbar__menu {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.navbar__link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.navbar__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}

.navbar__link:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.05);
}

.navbar__link.is-active {
  color: #14181F;
  background: linear-gradient(135deg, #FFD34D, var(--color-gold));
  box-shadow: 0 2px 10px rgba(255, 193, 7, 0.35);
}

.navbar__link.is-active .navbar__icon {
  opacity: 1;
}

.navbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.navbar__divider {
  width: 1px;
  height: 20px;
  background: var(--color-gold);
  opacity: 0.4;
}

.navbar__avatar-wrap {
  position: relative;
  display: flex;
}

.navbar__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.7px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.navbar__avatar-wrap:hover .navbar__avatar {
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.18);
  transform: translateY(-1px);
}

/* titik status online di pojok avatar */
.navbar__avatar-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-success-text);
  border: 2px solid var(--color-bg-strip);
}

/* ================= 4. PAGE HEADING (+ FILTER BAR) ================= */
.page-heading {
  padding: 32px var(--section-px) 30px;
  background: var(--color-bg-strip);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Baris judul + filter, dipakai di halaman yang punya filter (mis. DALOP) */
.page-heading__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 14px;
}

.eyebrow__line {
  display: none;
}

.page-heading__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-muted-strong);
  margin-bottom: 10px;
}

.page-heading__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  letter-spacing: -0.9px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Highlight angka tahun di dalam judul (mis. "...LISTRIK 2026") */
.page-heading__title #yearLabel {
  color: var(--color-gold);
}

/* --- Filter Bar (komponen reusable) --- */
.filter-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-bar__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-bar__item label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.filter-bar__select {
  background: var(--color-bg-strip);
  border: 1px solid var(--border-cta);
  border-radius: 3px;
  padding: 9px 14px;
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  min-width: 140px;
}

.filter-bar__select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 1px var(--color-gold);
}

/* Varian kecil dari .filter-bar__select, dipakai utk selector bulan
   yang nempel di section-bar (mis. Overview: ECE & Frekuensi) --
   supaya tidak perlu inline style di HTML. */
.filter-bar__select--sm {
  min-width: 112px;
  padding: 6px 10px;
  font-size: 11px;
}

/* ================= 5. INFO BAR ================= */
/* Bukan navy solid, tapi tint gold tipis di atas warna dasar */
.info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px var(--section-px);
  background: rgba(255, 193, 7, 0.05);
  border-top: 0.74px solid var(--border-medium);
  font-family: var(--font-mono);
}

.info-bar__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.info-bar__label {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gold);
}

.info-bar__item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}

.info-bar__key {
  color: var(--color-muted);
}

.info-bar__value {
  color: var(--color-muted);
  font-weight: 400;
}

.info-bar__value--success {
  color: var(--color-muted);
}

.info-bar__datetime {
  font-size: 10px;
  color: var(--color-muted);
}

/* ================= 6. CARD (generic — listing dashboard di homepage) ================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 32px var(--section-px) 64px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: 0.67px solid var(--border-card);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.card__image {
  position: relative;
  height: 176px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-strip); /* fallback kalau gambar belum ada */
}

.card__meta {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.card__kpi {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.card__kpi-count {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-gold);
}

.card__kpi-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  color: var(--color-danger);
}

.card__tag {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-tag);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.card__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 8px;
}

.card__eyebrow-line {
  width: 24px;
  height: 1.5px;
  background: var(--color-gold);
  display: inline-block;
}

.card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 8px;
}

.card__desc {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 20px;
  color: var(--color-muted-strong);
  margin-bottom: 20px;
}

.card__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255, 193, 7, 0.08);
  border: 0.67px solid var(--border-cta);
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-gold);
  transition: background 0.15s ease;
}

.card__cta:hover {
  background: rgba(255, 193, 7, 0.16);
}

.card__cta-arrow {
  font-size: 1rem;
  transition: transform 0.15s ease;
}

.card__cta:hover .card__cta-arrow {
  transform: translateX(3px);
}

/* ================= 7. KPI CARD ================= */
.kpi-card {
  background: var(--color-card);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0; /* item grid/flex butuh ini eksplisit -- default min-width = auto (selebar kontennya), penyebab kartu bisa mendorong lebar grid */
}

.kpi-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.kpi-card__title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kpi-card__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Subtitle periode (Tahun / Tahun+Semester / Tahun+Bulan) di bawah judul
   kartu Ringkasan Strategi Operasi -- beda font dari title (tidak mono,
   tidak uppercase, tidak bold) supaya kontras & mudah dibaca. */
.kpi-card__subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-muted);
}

.kpi-card__badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-success-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-card__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.kpi-card__value-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--color-white);
  line-height: 1;
}

.kpi-card__value-unit {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-muted);
}

.kpi-card__desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted-strong);
  line-height: 1.6;
  margin-bottom: 16px;
}

.kpi-card__chart-wrap {
  position: relative;
  height: 160px;
  margin-bottom: 4px;
}

.kpi-card__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
  padding-top: 10px;
}

.kpi-card__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kpi-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.kpi-card__summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.kpi-card__summary span {
  color: var(--color-muted);
}

.kpi-card__summary strong {
  font-weight: 700;
}

/* ================= 8. UPB ACCORDION (+ SHIFT PANEL) ================= */
.upb-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px var(--section-px) 24px;
}

/* Dipakai saat .upb-accordion ditaruh di dalam .average-section (yang
   sudah punya padding sendiri) -- mis. Overview -- supaya paddingnya
   tidak dobel (dua-duanya sama-sama punya var(--section-px) kiri-kanan). */
.upb-accordion--nested {
  padding: 0;
}

.upb-bar {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  width: 100%;
  background: var(--upb-bg, rgba(255, 193, 7, 0.06));
  border: 0.74px solid var(--upb-border, rgba(255, 193, 7, 0.25));
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.upb-bar:hover {
  border-color: var(--upb-accent, var(--color-gold));
}

/* Saat expanded, tetap warna aksen yang sama, cuma background sedikit lebih terang */
.upb-bar.is-open {
  background: var(--upb-bg-open, rgba(255, 193, 7, 0.10));
  border-color: var(--upb-accent, var(--color-gold));
}

.upb-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.upb-bar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.upb-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--upb-accent, var(--color-gold));
  flex-shrink: 0;
}

.upb-bar__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--upb-accent, var(--color-gold));
}

.upb-bar__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--color-muted);
}

.upb-bar__chevron {
  font-size: 12px;
  color: var(--color-muted);
  transition: transform 0.2s ease;
}

.upb-bar.is-open .upb-bar__chevron {
  transform: rotate(180deg);
  color: var(--upb-accent, var(--color-gold));
}

/* --- Toggle "Detail Shift" di bar UPB --- */
.upb-shift-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 0.74px solid var(--upb-border, rgba(255, 193, 7, 0.35));
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--upb-accent, var(--color-gold));
  cursor: pointer;
  transition: background 0.15s ease;
}

.upb-shift-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.upb-shift-toggle__arrow {
  transition: transform 0.2s ease;
}

.upb-shift-toggle.is-open .upb-shift-toggle__arrow {
  transform: rotate(180deg);
}

/* --- Panel Shift (4 kartu heatmap, di bawah panel KPI) --- */
.shift-panel {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 0 8px;
  margin-top: 12px;
}

.shift-panel.is-open {
  display: grid;
}

.shift-card {
  background: var(--color-card);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 12px;
}

.shift-card__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 8px;
}

.shift-grid {
  display: grid;
  grid-template-columns: 22px repeat(6, 1fr);
  gap: 4px;
}

.shift-grid__cell {
  text-align: center;
  padding: 6px 0;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--color-white);
  background: #1A2130;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.shift-grid__cell--corner {
  background: transparent;
  box-shadow: none;
}

.shift-grid__cell--head {
  background: transparent;
  box-shadow: none;
  color: var(--color-white);
  font-weight: 500;
}

/* --- Grid pembungkus KPI Card di dalam 1 panel UPB --- */
.upb-panel {
  display: none;
  /* minmax(0, 1fr) -- BUKAN 1fr polos. Default track sizing grid itu
     minmax(auto, 1fr), jadi kalau ada konten yang lebar (mis. badge dengan
     angka ekstrem "AVG -382.02%"), kolom itu bisa dipaksa lebih lebar dari
     kolom lain & bikin layout melebar/scroll horizontal. minmax(0, 1fr)
     bikin semua kolom tetap sama rata berapa pun panjang kontennya. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 0 8px;
}

.upb-panel.is-open {
  display: grid;
}

/* Versi "Rata-Rata Keseluruhan PB" yang sekarang dibungkus .monitor-card
   (bukan .upb-accordion pill lagi) -- body panel butuh padding penuh
   20px, sama seperti .monitor-card .chart-grid, supaya kontennya tidak
   nempel ke border card. Di-scope pakai ID biar TIDAK ikut mengubah
   .upb-panel di halaman lain (DALOP/stratop) yang masih pakai bentuk
   pill/accordion aslinya. */
#reportAvgGrid.upb-panel {
  padding: 20px;
}

/* Header collapsible "Rata-Rata Keseluruhan PB" sekarang reuse
   .monitor-card__header (border+background kotak, sama seperti card
   Abnormal Frekuensi/Monitoring AFPM), tapi tetap bisa diklik utk
   collapse/expand (lihat setupReportAccordion() di overview-script.js).
   Chevron-nya reuse class .upb-bar__chevron apa adanya, cuma rotasinya
   sekarang di-trigger dari .monitor-card__header.is-open (bukan lagi
   .upb-bar.is-open). */
.monitor-card__header[data-upb-toggle] {
  cursor: pointer;
  transition: background 0.15s ease;
}

.monitor-card__header[data-upb-toggle]:hover {
  background: rgba(255, 193, 7, 0.06);
}

.monitor-card__header[data-upb-toggle] .upb-bar__chevron {
  transition: transform 0.2s ease;
}

.monitor-card__header.is-open .upb-bar__chevron {
  transform: rotate(180deg);
  color: var(--color-gold);
}

@media (max-width: 1300px) {
  .shift-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .shift-panel {
    grid-template-columns: 1fr;
  }
}

/* ================= 9. SECTION RINGKASAN / AVERAGE GRID ================= */
.average-section {
  padding: 6px var(--section-px) 32px;
}

.average-section .eyebrow {
  margin-bottom: 8px;
}

/* Label kicker khusus section Ringkasan -- sengaja tidak pakai pola
   pill+dot dari .eyebrow (itu polanya kebanyakan dipakai di template
   dashboard AI-generated). Di sini pakai garis aksen kiri tipis +
   huruf kapital berjarak, kesannya lebih seperti label dokumen/laporan
   yang dirancang manual. */
.section-kicker {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-gold);
  line-height: 1;
  margin: 0 0 2px;
}

.average-section__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1;
  margin-bottom: 8px;
}

.average-section__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-muted-strong);
  max-width: 640px;
  margin-bottom: 20px;
}

.average-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Kartu di section ini dikasih border sedikit lebih terang, biar terasa "highlight"
   sebagai ringkasan akhir halaman, beda tipis dari kartu per-UPB di accordion */
.average-grid .kpi-card {
  border-color: var(--border-cta);
}

/* ================= 9B. SECTION HEADER BAR (generic) =================
   Bar judul section dengan dot + label, dipakai di halaman yang punya
   beberapa blok chart/laporan berurutan (mis. Overview). Beda dari
   .upb-bar: ini statis, tidak collapsible. */
.section-bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  width: 100%;
  background: rgba(255, 193, 7, 0.06);
  border: 0.74px solid rgba(255, 193, 7, 0.25);
  border-radius: 6px;
  margin-bottom: 16px;
}

.section-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}

.section-bar__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gold);
}

.section-bar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-bar__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--color-muted);
}

/* Blok pembungkus 1 section laporan (header bar + grid di bawahnya).
   Gap antar container besar (average-section, report-block) diatur murni
   lewat padding-top 16px di sini -- persis nilai yang dipakai
   .antibo-section di halaman strategi (bagian 9G) buat jarak ke container
   sebelumnya, supaya gapnya sama persis dengan referensi. */
.report-block {
  padding: 16px var(--section-px) 0;
}

/* Jarak 16px antara container terakhir (mis. Monitoring AFPM, AFa, dan CF
   PLTU IPP) dengan footer -- hanya kena section terakhir di dalam <main>
   supaya gap antar container lain (yang sudah diatur lewat padding-top
   .report-block) tidak ikut berubah. */
main > .report-block:last-of-type {
  padding-bottom: 16px;
}

/* ================= 9C. SEGMENTED TOGGLE (Button) =================
   Toggle 2 pilihan (mis. "Bulanan / Tahunan"), dipakai di kanan section-bar */
.segmented-toggle {
  display: flex;
  background: var(--color-card);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  overflow: hidden;
}

/* Wrapper filter-bar__item yang nempel di section-bar (tanpa label,
   jadi tidak butuh gap vertikal bawaan) -- pengganti inline style="margin:0" */
.filter-bar__item--inline {
  margin: 0;
}

.segmented-toggle__btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.segmented-toggle__btn:hover:not(.is-active) {
  color: var(--color-white);
}

.segmented-toggle__btn.is-active {
  background: var(--toggle-accent, var(--color-neutral-accent));
  color: var(--color-white);
  font-weight: 700;
}

/* ================= 9D. CHART CONTAINER (line-chart-card) =================
   Kartu chart garis (beda dari .kpi-card yang pakai bar chart): dipakai
   utk chart realisasi vs rencana, frekuensi, dsb. */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.chart-grid--single {
  grid-template-columns: 1fr;
}

/* ================= 9D-2. ABNORMAL FREKUENSI (kartu Bulanan + Semester) ================= */
.chart-grid--frekuensi {
  grid-template-columns: 1.35fr 1fr;
  align-items: stretch;
}

@media (max-width: 900px) {
  .chart-grid--frekuensi {
    grid-template-columns: 1fr;
  }
}

.frekuensi-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 4px;
}

.frekuensi-card__main {
  min-width: 0;
}

.frekuensi-shift-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.frekuensi-shift-box {
  background: rgba(52, 211, 153, 0.07);
  border: 0.67px solid rgba(52, 211, 153, 0.19);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  min-width: 62px;
}

.frekuensi-shift-box__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.frekuensi-shift-box__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}

.frekuensi-semester-card {
  justify-content: flex-start;
}

.frekuensi-semester-card .shift-grid--semester {
  margin-top: 12px;
  flex: 1;
}

.shift-grid--semester {
  /* Kolom label sedikit dilebarin (26px -> 34px) supaya label 2 baris
     "AVG / Perbulan" muat, kolom bulan (1fr) otomatis nyesuain -- lebar
     kontainer besar TIDAK berubah. */
  grid-template-columns: 34px repeat(6, 1fr);
  gap: 5px;
}

.shift-grid--semester .shift-grid__cell {
  /* Box diperkecil (padding & font) supaya baris tambahan "AVG Perbulan"
     tetap muat dalam tinggi kartu yang sama, tidak menambah tinggi
     kontainer. */
  padding: 8px 3px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.shift-grid--semester .shift-grid__cell--head {
  font-size: 9.5px;
  color: var(--color-muted);
  letter-spacing: -0.2px;
}

/* Label baris "AVG Perbulan" -- 2 kata, jadi khusus utk cell ini boleh
   wrap 2 baris (default cell lain tetap nowrap krn cuma 1 huruf/kata).
   Style-nya sengaja TIDAK dibedakan dari baris shift (A-E) di bawahnya. */
.shift-grid--semester .shift-grid__cell--avg-label {
  white-space: normal;
  line-height: 1.15;
  font-size: 8px;
}

.line-chart-card {
  background: var(--color-card);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ================= 9E. CHART FRAME (wrapper) =================
   Bingkai TUNGGAL yang menyatukan section-bar (header + toggle) dengan
   chart-grid di bawahnya, jadi satu kotak/frame yang saling terhubung.
   Warna bingkai mengikuti --frame-accent (disamakan dgn --toggle-accent
   milik toggle di section itu). Kartu chart individual TETAP pakai
   border netral bawaan (.line-chart-card di atas), tidak ikut warna. */
.chart-frame {
  border: 1px solid var(--frame-accent, var(--color-neutral-accent));
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-card);
}

.chart-frame .section-bar {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

.chart-frame .chart-grid {
  padding: 20px;
}

/* Dipakai saat chart-grid (ECE & Abnormal Frekuensi) dipindah ke dalam
   .monitor-card, supaya modelnya sama persis dgn kartu Transaksi
   (section-bar__left + monitor-card__filters di header, body full padding). */
.monitor-card .chart-grid {
  padding: 20px;
}

/* Gap vertikal antar blok di dalam card Monitoring PLTU dirapatkan jadi
   16px: dari grid 4 kartu PLTU (.monitor-grid) ke grid Curtailment PLTB
   (Sidrap & Tolo), dari situ ke grafik Susut, dan dari grafik Susut ke
   grid ECE (Poso & Malea) di bawahnya -- termasuk gap antar 2 kartu ECE
   itu sendiri, disamakan dgn gap kartu laporan (.average-grid). Selector
   di-scope pakai sibling combinator supaya TIDAK ikut mengubah grid
   Abnormal Frekuensi yang juga pakai .chart-grid. */
.monitor-grid + .curtailment-grid {
  padding-top: 16px;
}

.curtailment-grid + .chart-grid--single {
  padding-top: 16px;
}

.monitor-card .chart-grid--single {
  padding-bottom: 0;
}

.chart-grid--single + .chart-grid {
  padding-top: 16px;
  gap: 16px;
}

.line-chart-card__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.line-chart-card__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  color: var(--color-success-text);
  margin-bottom: 12px;
  line-height: 1;
}

.line-chart-card__sub-label {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  margin-bottom: 2px;
}

.line-chart-card__sub-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-white);
  margin-bottom: 16px;
}

.line-chart-card__chart-wrap {
  position: relative;
  height: 220px;
  margin-bottom: 12px;
}

.line-chart-card__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
}

.line-chart-card__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ================= 9D-3. SUSUT HARIAN & WBP LOGSHEET, 30 HARI =================
   "Rata-Rata Susut" TIDAK lagi mengambang di atas area plot -- ditaruh
   sejajar judul kartu (kanan atas, di luar canvas) lewat
   .line-chart-card__header-row. Ini supaya kotaknya benar-benar naik
   ke atas dan tidak akan pernah tabrakan dengan bar/label apa pun di
   dalam chart, termasuk saat hari beban tertinggi jatuh dekat sisi
   kanan grafik. Beban (WBP) tertinggi cukup dibedakan lewat warna bar
   gold + label "TERTINGGI" di atas barnya, tanpa overlay box lagi. */
.susut-chart-wrap {
  overflow: visible;
}

.line-chart-card__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.line-chart-card__header-row .line-chart-card__title {
  margin: 0;
}

.susut-chart-overlay-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

.susut-chart-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 7px 13px;
  border-radius: 8px;
  background: rgba(10, 14, 22, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid var(--border-card);
  flex-shrink: 0;
}

.susut-chart-overlay--avg {
  background: rgba(45, 212, 191, 0.10);
  border-color: rgba(45, 212, 191, 0.35);
}

/* Target Susut Bulanan (kolom BP, BARU) -- box kembar di sebelah kiri
   Rata-Rata Susut, CSS dasar sama (.susut-chart-overlay) tapi warna
   dibedakan jadi amber/oranye supaya kebaca sebagai "target", bukan
   "hasil realisasi". */
.susut-chart-overlay--target {
  background: rgba(251, 146, 60, 0.10);
  border-color: rgba(251, 146, 60, 0.35);
}

.susut-chart-overlay--target .susut-chart-overlay__value {
  color: #FB923C;
}

.susut-chart-overlay__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.susut-chart-overlay__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  color: #2DD4BF;
}

.susut-chart-overlay__sub {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-muted-strong);
}

@media (max-width: 640px) {
  .susut-chart-overlay-group {
    flex-wrap: wrap;
  }

  .susut-chart-overlay {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }
}

.line-chart-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Placeholder saat chart belum ada datanya */
.chart-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--border-card);
  border-radius: 8px;
  color: var(--color-muted);
  text-align: center;
  padding: 16px;
}

.chart-empty-state__icon {
  font-size: 20px;
  opacity: 0.6;
}

.chart-empty-state__text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
}

@media (max-width: 900px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= 9EA. RINGKASAN STRATEGI (khusus overview.html) =================
   Grid 9 kpi-card ringkas di dalam .monitor-card "Ringkasan Strategi
   Operasi" (sebelumnya 8 kartu/4 kolom, sekarang 3x3 sejak "Uji House
   Load" ditambahkan -- 3 kolom dipilih supaya baris terakhir tidak
   jomplang/ganjil, lihat urutan & pengelompokan kartu di
   renderStrategiSummary() pada overview-script.js). Sengaja reuse
   .kpi-card apa adanya (header+badge, value+unit, desc) TANPA
   chart-wrap/legend/summary -- card jadi lebih pendek karena di sini cuma
   butuh satu angka + status per indikator, bukan tren bulanan. */
.strategi-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px;
}

.strategi-summary-grid .kpi-card {
  padding: 16px;
  /* Fill kartu di grid Strategi di-override khusus jadi #181F2B (beda
     sedikit dari --color-card global #121826/#12151F yang dipakai kartu
     lain di halaman), sesuai request -- override di sini supaya TIDAK
     mengubah warna kartu section lain (Laporan 5 Menit, dsb) yang masih
     pakai var(--color-card) apa adanya. */
  background: #181F2B;
  /* Frame dipertebal khusus di grid Strategi (dari 1px default .kpi-card
     jadi 2.5px) supaya warna border per-kartu (iconColor+opacity, inline
     lewat strategiSummaryCardTemplate()) lebih kebaca sebagai pembeda
     kategori -- bukan cuma garis tipis nyaris ga kelihatan. */
  border-width: 2.5px;
}

/* Header (title "SOP" + subtitle "Thn 2026") sekarang 2 baris -- default
   margin-bottom 16px (dihitung dulu waktu header masih 1 baris) bikin gap
   ke angka Progress kelihatan kebesaran dibanding gap Progress -> label
   caption di bawahnya. Dikecilkan supaya seimbang. */
.strategi-summary-grid .kpi-card__header {
  margin-bottom: 14px;
}

.strategi-summary-grid .kpi-card__value {
  margin-bottom: 16px;
}

.strategi-summary-grid .kpi-card__value-number {
  font-size: 1.8rem;
}

.strategi-summary-grid .kpi-card__desc {
  margin-bottom: 0;
  margin-top: 0;
}

/* Label kecil "Progress Pertahun/Persemester/Perbulan" dirapatkan ke teks
   "X / Y item selesai" di bawahnya (jadi keduanya kebaca sebagai 1 grup
   keterangan), sementara jarak ke angka Progress di ATASNYA dilebarkan
   lewat margin-bottom .kpi-card__value di atas. */
.strategi-summary-grid .kpi-card__progress-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2px;
}

/* Judul kartu (SOP, Senam PMT, dst) dibuat putih khusus di section
   Ringkasan Strategi Operasi -- section kpi-card lain (mis. Laporan 5
   Menit) tetap pakai warna default (--color-muted) dari .kpi-card__title
   di atas, tidak ikut berubah. */
.strategi-summary-grid .kpi-card__title {
  color: #FFFFFF;
}

/* Subtitle periode ikut font mono yang sama dengan judul (bukan lagi
   --font-display), tapi warna & ukuran tetap seperti semula (muted,
   12px, tidak uppercase/bold) supaya masih kebeda dari judul. */
.strategi-summary-grid .kpi-card__subtitle {
  font-family: var(--font-mono);
}

/* 3 kolom (9 kartu) butuh lebar per-kartu lebih besar drpd dulu (waktu 4
   kolom), jadi turun ke 2 kolom sedikit lebih lebar drpd breakpoint lama
   (900px, bukan 1100px) -- di atas 900px 3 kolom masih cukup lega. */
@media (max-width: 900px) {
  .strategi-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .strategi-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Modifier warna badge (.kpi-card__badge dasarnya cuma varian hijau/
   "AVG --%" dari DALOP) -- ditambah 2 varian baru: warning (kuning, utk
   status "Proses") & danger (merah, utk status "Kritis"/"Belum Realisasi"),
   token warna dari yg sudah ada di TOKENS (--color-warning-*, --color-overtime). --- */
.kpi-card__badge--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.kpi-card__badge--danger {
  background: rgba(255, 38, 0, 0.1);
  border-color: rgba(255, 38, 0, 0.35);
  color: var(--color-overtime);
}

/* Icon kategori di "Ringkasan Strategi Operasi" -- menggantikan badge bulat
   status (✓/!/✕). Tiap kartu punya icon outline (gaya sama dgn navbar__icon)
   berwarna sesuai kategorinya (lihat STRATEGI_SUMMARY_DUMMY di
   overview-script.js utk mapping icon/warna per kartu). Tanpa background/
   border bulat -- icon polos mengambang di kanan atas kartu. */
.kpi-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex-shrink: 0;
}

.kpi-card__icon svg {
  width: 100%;
  height: 100%;
}

/* ================= 9F. STRATEGI — SOP PROGRESS & DETAIL =================
   Dipakai KHUSUS oleh halaman stratop.html (STRATEGI). Semua warna/font
   ditarik dari token di bagian 1 (TOKENS) — tidak ada warna baru di luar
   --color-gold/--color-card/--color-muted dkk, supaya tetap satu keluarga
   visual dengan DALOP & Beranda. Header accordion detail SENGAJA memakai
   ulang .upb-bar / .upb-panel apa adanya (lihat markup di stratop.html),
   jadi section ini cuma menambah bagian yang belum ada: progress-bar
   berlabel, grid avatar per unit, dan ringkasan donut per UPT. */

/* Dua kartu (SOP + heatmap) sejajar dalam satu baris, sesuai referensi
   Figma. Di layar sempit turun jadi satu kolom (stack). */
.sop-two-col {
  padding: 24px var(--section-px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}

@media (max-width: 1100px) {
  .sop-two-col {
    grid-template-columns: 1fr;
  }
}


/* --- Kartu pembungkus daftar progress bar (per kategori: SOP, Uji Rutin, dst).
   Judul section + tombol "Lihat Detail" SEKARANG ADA DI DALAM kartu yang
   sama ini (bukan section-bar terpisah di luar) --- */
.sop-progress-card {
  background: var(--color-card);
  border: 0.85px solid var(--border-card);
  border-radius: 10px;
  overflow: hidden;
  container-type: inline-size;
  container-name: sop-card;
}

.sop-progress-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: var(--color-bg-strip);
  border-bottom: 0.75px solid rgba(255, 193, 7, 0.1);
}

.section-bar__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-gold);
  margin-right: 8px;
}

.sop-progress-card__header .section-bar__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-white);
}

.sop-progress-card__year {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}

/* Header kolom statis (NO / ITEM / PROGRESS / STATUS / SELESAI / BELUM
   SELESAI) -- markup tetap di HTML karena labelnya tidak pernah berubah,
   hanya isi barisnya yang di-generate JS. Grid-nya WAJIB identik dengan
   .sop-progress-row di bawah supaya kolom-kolomnya sejajar. */
.sop-table-head {
  display: grid;
  grid-template-columns: 30px minmax(90px, 1fr) minmax(70px, 170px) 108px 90px 92px;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 0.75px solid rgba(255, 255, 255, 0.05);
}

.sop-th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sop-th--selesai,
.sop-th--belum {
  text-align: right;
}

/* --- Baris tabel "01 SOP": NO | ITEM | PROGRESS | STATUS | SELESAI | BELUM SELESAI ---
   Grid kolom HARUS sama dengan .sop-table-head di atas. */
.sop-progress-row {
  display: grid;
  grid-template-columns: 30px minmax(90px, 1fr) minmax(70px, 170px) 108px 90px 92px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 0.75px solid rgba(255, 255, 255, 0.04);
}

.sop-progress-row:last-child {
  border-bottom: none;
}

.sop-progress-no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted-strong);
}

.sop-progress-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.3px;
  color: var(--color-white);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.sop-progress-track-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sop-progress-track {
  position: relative;
  height: 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.sop-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  border-radius: 5px;
  background: #F87171; /* default: 0% -> merah */
  transition: width 0.4s ease;
}

/* > 0% dan < 100% -> kuning */
.sop-progress-fill--zero {
  background: #F87171;
}

.sop-progress-fill--mid {
  background: #EAB308;
}

/* 100% -> hijau */
.sop-progress-fill--high {
  background: var(--color-success-text);
}

.sop-progress-percent {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-muted);
}

/* Badge STATUS -- 3 varian warna: Belum Mulai (merah), Proses (kuning),
   Selesai (hijau), konsisten dengan palet --color-success-* yang sudah ada */
.sop-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  width: fit-content;
}

.sop-status-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.sop-status-badge--belum-mulai {
  background: rgba(248, 113, 113, 0.08);
  border: 0.7px solid rgba(248, 113, 113, 0.25);
  color: #F87171;
}
.sop-status-badge--belum-mulai .sop-status-badge__dot { background: #F87171; }

.sop-status-badge--proses {
  background: rgba(234, 179, 8, 0.1);
  border: 0.7px solid rgba(234, 179, 8, 0.3);
  color: #EAB308;
}
.sop-status-badge--proses .sop-status-badge__dot { background: #EAB308; }

.sop-status-badge--selesai {
  background: var(--color-success-bg);
  border: 0.7px solid var(--color-success-border);
  color: var(--color-success-text);
}
.sop-status-badge--selesai .sop-status-badge__dot { background: var(--color-success-text); }

.sop-progress-selesai,
.sop-progress-belum {
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.sop-progress-selesai { color: var(--color-success-text); }
.sop-progress-belum { color: var(--color-muted); }

/* Teks "NIHIL" (belum ada satu pun yg selesai/belum) dibuat abu netral --
   supaya tidak "mengaku" hijau/status padahal isinya kosong. */
.sop-progress-selesai--nihil,
.sop-progress-belum--nihil {
  color: var(--color-muted);
}

/* Dulu pakai @media (max-width: 900px) berdasarkan lebar VIEWPORT -- tapi kartu
   ini bisa jadi sempit walau viewport masih lebar (mis. saat .sop-two-col
   menampilkan 2 kartu sejajar, masing2 cuma dapat ~separuh lebar layar).
   Makanya dipindah ke @container supaya breakpoint ngikutin lebar KARTU
   itu sendiri, bukan lebar halaman -- ini yang bikin teks ITEM & bar
   PROGRESS numpuk/overlap saat browser di-zoom 100% dgn 2 kartu sejajar. */
/* Dulu breakpoint ini 720px. Sekarang kolom PROGRESS punya lebar fleksibel
   (minmax(60px, 170px)) di .sop-table-head/.sop-progress-row -- jadi begitu
   kartu menyempit, yang mengecil duluan adalah BAR PROGRESS-nya, bukan
   seluruh baris yang numpuk. Susunan 1 baris (NO/ITEM/PROGRESS/STATUS/
   SELESAI/BELUM) jadi bisa dipertahankan sampai jauh lebih sempit, dan
   breakpoint stacked-card ini cuma jadi jaring pengaman di lebar yang
   benar-benar sudah tidak muat sama sekali. */
@container sop-card (max-width: 580px) {
  .sop-table-head {
    display: none; /* di layar sempit label kolom tidak muat, tiap baris jadi kartu mini */
  }

  .sop-progress-row {
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-areas:
      "no item"
      ". progress"
      ". status"
      ". selesai"
      ". belum";
    row-gap: 6px;
  }
  .sop-progress-no { grid-area: no; }
  .sop-progress-label { grid-area: item; white-space: normal; }
  .sop-progress-track-wrap { grid-area: progress; }
  .sop-status-badge { grid-area: status; }
  .sop-progress-selesai { grid-area: selesai; text-align: left; }
  .sop-progress-belum { grid-area: belum; text-align: left; }
}

/* Fallback untuk browser lama yang belum dukung container query (jarang) --
   tetap pakai breakpoint viewport lama sebagai pengaman. */
@supports not (container-type: inline-size) {
  @media (max-width: 580px) {
    .sop-table-head { display: none; }
    .sop-progress-row {
      grid-template-columns: 20px minmax(0, 1fr);
      grid-template-areas:
        "no item"
        ". progress"
        ". status"
        ". selesai"
        ". belum";
      row-gap: 6px;
    }
    .sop-progress-no { grid-area: no; }
    .sop-progress-label { grid-area: item; white-space: normal; }
    .sop-progress-track-wrap { grid-area: progress; }
    .sop-status-badge { grid-area: status; }
    .sop-progress-selesai { grid-area: selesai; text-align: left; }
    .sop-progress-belum { grid-area: belum; text-align: left; }
  }
}

/* ================================================================
   HEATMAP "TANGGAL REALISASI EVENT" — kartu terpisah, dark navy sesuai
   referensi Figma (kolom KPI di header, baris unit di kiri, sel tanggal
   di tengah, hijau=selesai / merah=belum / abu=tidak berlaku utk unit itu)
   ================================================================ */
.heatmap-card {
  background: var(--color-card);
  border: 0.85px solid var(--border-card);
  border-radius: 10px;
  overflow: hidden;
}

.heatmap-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: var(--color-bg-strip);
  border-bottom: 0.75px solid rgba(255, 193, 7, 0.1);
}

.heatmap-card__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.heatmap-card__year {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
  white-space: nowrap;
}

.heatmap-card__stats {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}

.heatmap-stat strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  margin-right: 4px;
}

.heatmap-stat--done strong { color: var(--color-gold); }
.heatmap-stat--pending strong { color: #F87171; }
.heatmap-stat--overall strong { color: var(--color-success-text); }

.heatmap-scroll {
  overflow: visible; /* tidak perlu scroll -- tabel menyesuaikan lebar kartu */
  padding: 12px 14px;
}

.heatmap-table {
  border-collapse: separate;
  border-spacing: 3px;
  width: 100%;
  table-layout: fixed; /* semua kolom KPI dibagi rata, muat tanpa scroll */
}

.heatmap-th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.1px;
  text-align: center;
  color: var(--color-gold);
  padding: 0 2px 8px;
  white-space: normal;
  line-height: 1.3;
  word-break: break-word;
}

.heatmap-th--unit {
  text-align: left;
  width: 100px;
  color: var(--color-muted-strong);
}

.heatmap-rowhead {
  text-align: left;
  padding-right: 6px;
  white-space: normal;
}

.heatmap-rowhead__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--color-white);
}

.heatmap-rowhead__ratio {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
}

.heatmap-td {
  padding: 0;
  text-align: center;
}

.heatmap-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.heatmap-cell--done {
  background: var(--color-success-bg);
  border: 0.75px solid var(--color-success-border);
  color: var(--color-success-text);
}

/* Belum terlaksana -> merah yang jelas terlihat (bukan samar) */
.heatmap-cell--pending {
  background: rgba(248, 113, 113, 0.16);
  border: 0.75px solid rgba(248, 113, 113, 0.45);
  color: #F87171;
}

.heatmap-cell--blank {
  background: rgba(255, 255, 255, 0.03);
  border: 0.75px solid rgba(255, 255, 255, 0.08);
}

.heatmap-legend {
  display: flex;
  gap: 20px;
  padding: 10px 18px;
  border-top: 0.75px solid rgba(255, 255, 255, 0.04);
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
}

.heatmap-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.heatmap-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.heatmap-legend__swatch--done { background: var(--color-success-text); }
.heatmap-legend__swatch--pending { background: #F87171; }
.heatmap-legend__swatch--blank { background: rgba(255, 255, 255, 0.15); }

@media (max-width: 900px) {
  .heatmap-card__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================= 9G. PROGRAM ANTI BO (khusus stratop.html) =================
   Section "02 Program Anti BO" -- kartu "Uji Blackstart & Line Charging"
   berisi grid KIT (pembangkit), tiap KIT punya status realisasi Semester 1
   & Semester 2 + titik kuning/putih penanda ada/tidaknya keterangan.
   Kartu DTS & Senam PMT (belum dibangun) akan menyusul di .antibo-cols. */

.antibo-section {
  padding: 16px var(--section-px) 20px;
}

/* --- Bingkai TUNGGAL "02 PROGRAM ANTI BO" -- sama pola dgn .sop-progress-card
   di section 01: header (nomor + judul + ringkasan) menyatu dgn body
   (legend + grid sub-container) dalam satu card. --- */
.antibo-progress-card {
  background: var(--color-card);
  border: 0.85px solid var(--border-card);
  border-radius: 10px;
}

.antibo-progress-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: var(--color-bg-strip);
  border-bottom: 0.75px solid rgba(255, 193, 7, 0.1);
  border-radius: 10px 10px 0 0;
}

.antibo-progress-card__header .section-bar__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-white);
}

.antibo-progress-card__stats {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}

.antibo-progress-card__body {
  padding: 18px;
}

.antibo-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.antibo-legend__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.antibo-legend__dot--ada { background: var(--color-gold); }
.antibo-legend__dot--tanpa { background: #D9D9D9; }

/* Wadah 4 sub-container (Blackstart, DTS, Senam PMT x2). Untuk saat ini
   baru Blackstart yang dirapikan -- sub-container lain menyusul dgn pola
   class yang sama (.antibo-card + modifier ukuran masing-masing). */
.antibo-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.antibo-card {
  background: rgba(255, 255, 255, 0.02);
  border: 0.75px solid var(--border-card);
  border-radius: 10px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Sub-container Blackstart -- ukuran tetap 672 x 642 px sesuai desain.
   flex-shrink:0 supaya lebarnya nggak pernah dipaksa menyusut walau
   kolom Senam di sebelah kanan sekarang ikut menggelembung (flex:1). */
.antibo-card--blackstart {
  width: 672px;
  flex: 0 0 672px;
  max-width: 100%;
  height: 642px;
}

/* Sub-container DTS -- ukuran tetap 456 x 642 px, format box & sumber
   kolom data SAMA PERSIS dgn Blackstart, 2 kolom x 10 baris = 20 box
   (GROUP 01-10 asli + 10 box kosong cadangan di akhir, lihat
   ANTIBO_DTS_TOTAL_SLOTS di stratop-script.js). Kolom Senam PMT/PMS di
   sebelah kanan (.antibo-senam-col, flex:1) otomatis memampat mengikuti
   pelebaran ini, tidak perlu diatur manual di sini. */
.antibo-card--dts {
  width: 456px;
  flex: 0 0 456px;
  max-width: 100%;
  height: 642px;
}

/* --- Sub-container "Program Uji House Load (HAR)" -- full-width, ditaruh
   paling bawah container "02 Program Anti BO" (di bawah baris
   Blackstart/DTS/Senam). Sama keluarga warna dgn .antibo-card & .heatmap-*
   (sukses = hijau, belum = merah, netral = abu-abu). --- */
.antibo-har {
  position: relative;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 0.75px solid var(--border-card);
  border-radius: 10px;
  padding: 16px;
}

/* Header judul "Uji House Load" + mini-stats (Item/Terlaksana/Overall) --
   ditaruh di atas tabel, sama pola warna judul dgn .antibo-card__title
   (gold), dipisah dari tabel oleh garis tipis (border-bottom), sama
   nuansa dgn garis pemisah kolom header tabel di bawahnya. */
.antibo-har__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 0.75px solid rgba(255, 255, 255, 0.10);
}

.antibo-har__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-gold);
}

.antibo-har__stats {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Warna per-stat disamakan dgn referensi (Terlaksana = gold, Belum
   Terlaksana = merah, Overall = hijau sukses) -- override default hijau
   dari .antibo-mini-stat strong supaya tiap angka bawa nuansa warnanya
   sendiri, bukan seragam hijau. Selector digabung dgn .antibo-har__stats
   supaya spesifisitasnya menang lawan .antibo-mini-stat strong (yg
   posisinya lebih bawah di file ini). */
.antibo-har__stats .antibo-har__stat--terlaksana strong {
  color: var(--color-gold);
}

.antibo-har__stats .antibo-har__stat--belum strong {
  color: rgb(248, 113, 113);
}

.antibo-har__stats .antibo-har__stat--overall strong {
  color: var(--color-success-text);
}

.antibo-har-scroll {
  overflow: visible;
}

.antibo-har-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Nama kolom netral (abu-abu), transparan -- cuma dipisah satu garis
   tipis dari baris data, tanpa kotak/tint warna sendiri. */
.antibo-har-table thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: left;
  padding: 0 12px 10px;
  border-bottom: 0.75px solid rgba(255, 255, 255, 0.10);
  white-space: normal;
}

/* Start HAR, End HAR, Jadwal Uji House Load, Realisasi Uji House Load,
   Keterangan -- judul kolom di-tengah-kan (isi kolomnya berupa badge/box
   yg sudah center, jadi header disamakan biar sejajar rapi). Pembangkit
   tetap rata kiri, Judul HAR dirata-kanankan (lihat blok di bawah). */
.antibo-har-table thead th:nth-child(2),
.antibo-har-table thead th:nth-child(3),
.antibo-har-table thead th:nth-child(5),
.antibo-har-table thead th:nth-child(6),
.antibo-har-table thead th:nth-child(7) {
  text-align: center;
}

/* Sel data ikut di-tengah-kan biar box tanggal/badge benar-benar sejajar
   center dgn judul kolom di atasnya (bukan cuma box-nya sendiri yg center
   secara internal, tapi posisi box dlm sel juga harus center). */
.antibo-har-table tbody tr td:nth-child(2),
.antibo-har-table tbody tr td:nth-child(3),
.antibo-har-table tbody tr td:nth-child(5),
.antibo-har-table tbody tr td:nth-child(6),
.antibo-har-table tbody tr td:nth-child(7) {
  text-align: center;
}

/* Judul HAR (kolom 4) -- teks TETAP rata kiri, tapi posisinya digeser
   ke kanan lewat indentasi (padding-left) supaya jaraknya ke kolom
   Jadwal Uji House Load lebih ideal/tidak nyisa jarak kosong lebar,
   tanpa bikin teksnya nempel rata kanan. */
.antibo-har-table thead th:nth-child(4),
.antibo-har-table tbody tr td:nth-child(4) {
  text-align: left;
  padding-left: 56px;
}

/* Lebar kolom diatur lewat <colgroup> supaya proporsional dgn isi
   konten (bukan dibagi rata oleh table-layout:fixed). Start/End HAR
   dilebarkan supaya box tanggal (min-width 150px, sudah pakai nama
   bulan lengkap) punya cukup ruang gerak & tidak nabrak kolom
   sebelahnya; Judul HAR dipersempit krn isinya cuma judul singkat,
   sisanya (Jadwal/Realisasi/Keterangan) dirapikan biar tidak nyisa
   ruang kosong besar. Total 100%. */
.antibo-har-col--kit {
  width: 15%;
}

.antibo-har-col--date {
  width: 13%;
}

.antibo-har-col--judul {
  width: 17%;
}

.antibo-har-col--date-lg {
  width: 14%;
}

.antibo-har-col--ket {
  width: 14%;
}

/* Satu garis pemisah tipis per baris -- bukan kotak/kontainer per KIT.
   Baris terakhir tanpa garis supaya rapi menyatu dgn bawah kartu. */
.antibo-har-table tbody tr {
  border-bottom: 0.75px solid rgba(255, 255, 255, 0.06);
}

.antibo-har-table tbody tr:last-child {
  border-bottom: none;
}

.antibo-har-table tbody tr td {
  background: transparent;
  padding: 14px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-white);
  white-space: normal;
  word-break: break-word;
  transition: background 0.15s ease;
}

.antibo-har-table tbody tr td:last-child {
  white-space: normal;
}

/* highlight halus saat hover -- warna latar seluruh baris, bukan kotak baru */
.antibo-har-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.antibo-har-td--kit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--color-white);
}

.antibo-har-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 150px;
  padding: 0 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

/* tanggal biasa (Start/End/Jadwal) -- netral, tidak dibandingkan ke target */
/* tanggal biasa (Start/End/Jadwal) -- dikasih tint biru supaya kontras
   jelas dari latar tabel yang gelap, bukan abu-abu samar yang menyatu */
.antibo-har-date--plain {
  background: rgba(96, 165, 250, 0.12);
  border: 0.75px solid rgba(96, 165, 250, 0.35);
  color: #93C5FD;
}

/* Realisasi sudah ada -> hijau, sama pola dgn .heatmap-cell--done */
.antibo-har-date--done {
  background: var(--color-success-bg);
  border: 0.75px solid var(--color-success-border);
  color: var(--color-success-text);
}

/* Realisasi belum ada -> merah, sama pola dgn .heatmap-cell--pending */
.antibo-har-date--pending {
  background: rgba(248, 113, 113, 0.16);
  border: 0.75px solid rgba(248, 113, 113, 0.45);
  color: #F87171;
}

.antibo-har-date--empty {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.antibo-har-ket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted-strong);
}

/* Tombol "CEK KET" -- muncul cuma kalau kolom Keterangan (L) ada isinya.
   Warna gold sama nuansa dgn titik kuning Blackstart/DTS (--color-gold),
   teks aslinya muncul lewat tooltip hover -- pakai mekanisme [data-tooltip]
   yang sama persis dgn .antibo-sem__dot, bukan style baru.
   Ukuran box (padding/radius/font-size) disamakan dgn .antibo-har-date
   supaya seragam dgn box tanggal Start/End/Jadwal/Realisasi. */
.antibo-har-ket__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 150px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255, 193, 7, 0.10);
  border: 0.75px solid rgba(255, 193, 7, 0.45);
  color: var(--color-gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.antibo-har-ket__btn:hover,
.antibo-har-ket__btn:focus-visible {
  background: rgba(255, 193, 7, 0.18);
  border-color: rgba(255, 193, 7, 0.7);
}

/* Kosong -- box "Nihil", ukuran sama persis dgn .antibo-har-ket__btn /
   box tanggal, cuma warnanya netral abu-abu (bukan gold) supaya jelas
   beda status dari CEK KET. */
.antibo-har-ket__nihil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 150px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.75px solid rgba(255, 255, 255, 0.16);
  color: var(--color-muted-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-sizing: border-box;
}

.antibo-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.antibo-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Label periode ("Tahun 2026 Sem 1") -- pengganti toggle Sem 1/Sem 2 per
   kartu di header Senam PMT/PMS, Rekap Gangguan Sistem, & Pelaporan
   Kinerja Defense Scheme -- sekarang semester dikontrol SATU selector di
   filter-bar halaman (sama pola dgn dalorealtime.html), jadi tiap kartu
   cukup menampilkan periode yang lagi aktif, bukan tombol toggle lagi. */
.antibo-card__period,
.review-card__period {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
  white-space: nowrap;
}

.antibo-card__mini-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.antibo-mini-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}

.antibo-mini-stat strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-success-text);
}

/* Dibiarkan flex:1 (bukan overflow-y:auto lagi) -- sekarang 30 box (208 x 43 px,
   3 kolom x 10 baris) memang dihitung supaya PAS masuk tinggi 642 px kartu
   tanpa perlu scroll sama sekali. Kalau nanti jumlah KIT bertambah lagi
   melebihi 30, overflow-y:auto tinggal diaktifkan lagi di sini. */
.antibo-grid-scroll {
  flex: 1;
  min-height: 0;
}

/* Grid KIT -- diisi kolom demi kolom (bukan baris demi baris) supaya
   urutannya persis seperti desain: kolom 1 & 2 = KIT asli, kolom
   sisanya = kartu kosong cadangan. Ukuran box FIXED 208 x 43 px (sesuai
   acuan desain) -- 3 kolom x 10 baris x (208+8 gap) & (43+16 gap) dihitung
   supaya pas persis mengisi kartu 672 x 642 px, tanpa scroll. */
.antibo-grid {
  display: grid;
  grid-template-columns: repeat(3, 208px);
  grid-auto-columns: 208px;
  grid-auto-flow: column;
  grid-template-rows: repeat(10, 43px);
  column-gap: 8px;
  row-gap: 16px;
  justify-content: center;
}

/* HARUS ditulis SETELAH .antibo-grid di atas -- specificity-nya sama-sama
   1 class, jadi urutan di file yang menentukan siapa menang. Ditaruh
   sebelum .antibo-grid pernah bikin DTS ikut kepakai 3 kolom milik
   Blackstart & kontennya kegeser keluar kartu (ketimpa justify-content:
   center). Kalau nanti nambah modifier grid lain, taruh juga di SINI,
   bukan di atas .antibo-grid.
   DTS = 2 kolom x 10 baris (20 box: GROUP asli + cadangan) -- baris &
   flow-nya (grid-auto-flow: column, grid-template-rows: repeat(10,43px))
   ikut warisan dari .antibo-grid, cuma jumlah kolomnya beda dgn
   Blackstart (3 kolom). */
.antibo-grid--dts {
  grid-template-columns: repeat(2, 208px);
}

/* Box compact: nama unit (kiri) + dua kolom semester (label + pill + dot)
   sejajar dalam SATU baris horizontal, bukan ditumpuk -- ini yang bikin
   tingginya cukup 43 px. */
.antibo-cell {
  width: 208px;
  height: 43px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 0.75px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.antibo-cell--spare {
  background: rgba(255, 255, 255, 0.025);
  border-style: dashed;
}

.antibo-cell__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.05;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  color: var(--color-white);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.antibo-cell__semesters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

.antibo-sem {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.antibo-sem__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 7.5px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
  white-space: nowrap;
}

.antibo-sem__row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.antibo-sem__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  flex-shrink: 0;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

.antibo-sem__pill--done {
  background: var(--color-success-bg);
  border: 0.75px solid var(--color-success-border);
  color: var(--color-success-text);
}

.antibo-sem__pill--pending {
  background: rgba(248, 113, 113, 0.08);
  border: 0.75px solid rgba(248, 113, 113, 0.2);
  color: rgba(248, 113, 113, 0.4);
}

.antibo-sem__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.antibo-sem__dot--ada { background: var(--color-gold); }
.antibo-sem__dot--tanpa { background: #D9D9D9; }

/* Tooltip kustom pengganti native [title] -- kotak "keterangan" (mis. hover
   titik kuning di KIT Blackstart/DTS) dulu pakai title bawaan browser,
   yang lebarnya otomatis melebar mengikuti panjang teks dan tidak bisa
   diatur lewat CSS. Sekarang pakai data-tooltip + ::after supaya lebar
   kotak dibatasi (max-width) dan teks panjang membungkus ke bawah,
   bukan melebar ke samping. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 60;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 208px;
  white-space: normal;
  overflow-wrap: break-word;
  background: #0B1220;
  border: 0.75px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 9px 11px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ================= Kartu Senam PMT & Senam PMS =================
   Ditumpuk vertikal dalam satu kolom (tinggi total 642 px, menyamai
   kolom Blackstart/DTS di sebelahnya) -- masing-masing kartu ambil flex:1
   (jadi otomatis (642 - gap)/2 tanpa perlu dihitung manual). Beda dari
   Blackstart/DTS (grid box KIT), kartu ini isinya ringkasan Rencana /
   Terlaksana / Belum Terlaksana per semester, dgn toggle Sem 1 / Sem 2. */
.antibo-senam-col {
  flex: 1 1 260px;
  min-width: 260px;
  max-width: 100%;
  height: 642px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.antibo-card--senam {
  flex: 1;
  min-height: 0;
}

/* Toggle Sem 1 / Sem 2 -- dua tombol kecil, yang aktif diberi latar emas.
   Klik cuma switch tampilan (data kedua semester sudah dibawa sekaligus
   dari fetch, lihat renderSenamCard() di stratop-script.js), jadi tidak
   perlu fetch ulang / reload apapun. */
.antibo-senam-toggle {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.antibo-senam-toggle__btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
  background: transparent;
  border: 0.75px solid var(--border-card);
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.antibo-senam-toggle__btn:hover {
  border-color: var(--color-gold);
  color: var(--color-white);
}

.antibo-senam-toggle__btn.is-active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #1A1400;
}

.antibo-senam-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

/* Angka persentase Terlaksana -- HIGHLIGHT UTAMA kartu, besar & di tengah.
   Rencana/Terlaksana/Belum jadi info sekunder di .antibo-senam-footer. */
.antibo-senam-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.antibo-senam-hero__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  color: var(--color-success-text);
  text-shadow: 0 0 20px rgba(34, 197, 94, 0.28);
}

.antibo-senam-hero__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}

/* Bar tipis nunjukin persentase Terlaksana semester yang lagi aktif --
   panjangnya (width) diisi lewat JS, lihat paintSenamCard(). */
.antibo-senam-bar-track {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.antibo-senam-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--color-success-text);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.45);
  transition: width 0.25s ease;
}

/* Info sekunder: Rencana / Terlaksana / Belum -- angka kecil berdampingan,
   sengaja diredam (bukan hijau/merah mencolok) supaya fokus mata tetap ke
   persentase besar di .antibo-senam-hero. */
.antibo-senam-footer {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
  flex-shrink: 0;
}

.antibo-senam-footer__item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-left: 6px;
}

.antibo-senam-footer__item:not(:first-child) {
  border-left: 0.75px solid rgba(255, 255, 255, 0.08);
}

.antibo-senam-footer__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
  white-space: nowrap;
}

.antibo-senam-footer__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--color-white);
}

.antibo-senam-footer__item--done .antibo-senam-footer__value {
  color: var(--color-success-text);
}

.antibo-senam-footer__item--pending .antibo-senam-footer__value {
  color: rgba(248, 113, 113, 0.85);
}

@media (max-width: 720px) {
  .antibo-progress-card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .antibo-card--blackstart {
    width: 100%;
    height: 560px;
  }

  .antibo-card--dts {
    width: 100%;
    height: 420px;
  }

  .antibo-senam-col {
    width: 100%;
    height: auto;
  }

  .antibo-card--senam {
    flex: none;
  }
}

/* ================= SECTION 03 & 04: REVIEW DEFENSE SCHEME +
   REKAP GANGGUAN SISTEM -- dua kartu TERPISAH (bukan sub-container di
   dalam "02 Program Anti BO"), diletakkan di bawahnya & bersebelahan.
   Style header/toggle-nya sengaja dipakai ulang dari .section-bar__*
   & .antibo-senam-toggle* yang sudah ada supaya konsisten dgn section
   01/02, tanpa duplikasi definisi. ================= */
.review-row-section {
  padding: 0 var(--section-px) 40px;
}

.review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.review-card {
  flex: 1 1 320px;
  min-width: 280px;
  background: var(--color-card);
  border: 0.85px solid var(--border-card);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: var(--color-bg-strip);
  border-bottom: 0.75px solid rgba(255, 193, 7, 0.1);
}

.review-card__header .section-bar__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-white);
}

.review-card__body {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* --- 03: Review Defense Scheme -- angka progress "X/4" di tengah body,
   di atas timeline, warna hijau (pola sama dgn .pelaporan-ds-avg kartu
   05) -- menggantikan chip "X/4 Terlaksana" yang tadinya di header. --- */
.defense-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 4px;
}

.defense-progress__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: var(--color-success-text);
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.25);
}

.defense-progress__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--color-muted-strong);
  margin: 0;
}

/* --- 03: Review Defense Scheme -- KONSEP BARU: "roadmap" horizontal.
   Garis progres + 4 titik triwulan, bukan lagi ring gauge + daftar.
   Titik yang sudah terlaksana terisi penuh & terhubung garis progres
   gold->hijau; titik BERIKUTNYA yang belum terlaksana dapat cincin
   berdenyut halus (penanda "ini yang ditunggu"); sisanya outline pudar. --- */
.defense-timeline {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Ruang kosong di atas baris node -- WAJIB, supaya puncak gelombang
     sinus (yg naik lebih tinggi dari lingkaran node itu sendiri) tidak
     kepotong oleh overflow:hidden di .review-card. */
  padding-top: 56px;
  /* Ruang kosong di BAWAH label + tanggal -- WAJIB juga, sekarang lembah
     gelombang turun sampai melewati baris tanggal (bukan cuma sampai
     bawah lingkaran node), jadi butuh ekstra napas di bawah supaya
     lembahnya juga tidak kepotong. */
  padding-bottom: 30px;
}

.defense-timeline__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.defense-timeline__wave-bg,
.defense-timeline__wave-fill {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
}

.defense-timeline__wave-bg {
  stroke: rgba(255, 255, 255, 0.08);
}

.defense-timeline__wave-fill {
  stroke: url(#defenseWaveGradient);
  filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.35));
  transition: stroke-dashoffset 0.5s ease;
}

.defense-nodes {
  position: relative;
  display: flex;
}

.defense-node {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.defense-node__dot {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.defense-node__dot svg {
  width: 18px;
  height: 18px;
}

.defense-node--done .defense-node__dot {
  background: var(--color-success-bg);
  border: 1.5px solid var(--color-success-text);
  color: var(--color-success-text);
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.3);
}

.defense-node--pending .defense-node__dot {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  color: var(--color-muted-strong);
}

.defense-node--current .defense-node__dot {
  background: rgba(255, 193, 7, 0.1);
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold);
}

.defense-node--current .defense-node__dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 193, 7, 0.4);
  animation: defense-pulse 2.2s ease-out infinite;
}

@keyframes defense-pulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.defense-node__quarter {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}

.defense-node__date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-white);
}

.defense-node--pending .defense-node__date {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  font-style: italic;
  color: var(--color-muted-strong);
}

.defense-node--current .defense-node__date {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10.5px;
  font-style: normal;
  color: var(--color-gold);
}

/* Node ke-2 & ke-4 (Triwulan 2 & Triwulan 4) jatuh di LEMBAH gelombang
   (gelombang melengkung ke bawah persis di posisi node ini), jadi label
   "TRIWULAN X" + tanggal yang tadinya di bawah lingkaran ikut kepotong
   garis. Dipindah ke ATAS lingkaran khusus utk 2 node ini -- di atas
   lingkaran node ini justru kosong (gelombang naik cuma di node ganjil),
   jadi aman dari garis. */
.defense-nodes > .defense-node:nth-child(2) .defense-node__dot,
.defense-nodes > .defense-node:nth-child(4) .defense-node__dot {
  order: 1; /* dipindah ke urutan paling akhir (bawah) -- quarter & date (order default 0) jadi tampil di atasnya */
}

/* --- 04: Rekap Gangguan Sistem -- desain PERSIS SAMA dgn kartu 05
   Pelaporan Kinerja Defense Scheme DALAM SEGALA HAL: hero rata-rata warna
   hijau, LINE CHART 6 bulan + garis target putus-putus, warna titik/label
   ikut perbandingan ke target (hijau >=100%, kuning/oranye <100%), &
   legend identik. --- */
.gangguan-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 20px;
}

.gangguan-hero__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: var(--color-success-text);
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.25);
}

.gangguan-hero__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--color-muted-strong);
}

.gangguan-chart-wrap {
  position: relative;
  height: 230px;
  margin-bottom: 4px;
}

/* Legend di bawah chart -- identik dgn .pelaporan-ds-legend kartu 05: hijau
   (sesuai/di bawah target), oranye (di atas target), lingkaran putus-putus
   kosong (belum ada data). */
.gangguan-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 0.75px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}

.gangguan-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.gangguan-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.gangguan-legend__dot--ok {
  background: var(--color-success-text);
}

.gangguan-legend__dot--over {
  background: var(--color-warning-text);
}

.gangguan-legend__dot--empty {
  background: transparent;
  border: 1.5px dashed var(--color-muted-strong);
}

/* --- 05: Pelaporan Kinerja Defense Scheme -- toggle Sem 1/Sem 2 (tombolnya
   reuse .antibo-senam-toggle, sama kayak kartu 04) + LINE CHART 6 bulan.
   ".pelaporan-ds-avg" = angka rata-rata besar di atas chart (pola sama
   dgn .gangguan-hero, cuma warnanya hijau bukan gold, krn KPI ini murni
   persentase, bukan jumlah kejadian), diikuti 1 baris caption ringkas
   ("Rata-rata semester terpilih · N bulan di atas target 100%") yang
   menggantikan label kecil terpisah sebelumnya. Chart-wrap ukurannya
   sedikit lebih tinggi dari versi bar chart supaya ada ruang label
   persentase di atas tiap titik. --- */
.pelaporan-ds-avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 20px;
}

.pelaporan-ds-avg__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: var(--color-success-text);
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.25);
}

.pelaporan-ds-avg__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--color-muted-strong);
  margin: 0;
}

.pelaporan-ds-avg__caption strong {
  font-weight: 700;
  color: var(--color-warning-text);
}

.pelaporan-ds-chart-wrap {
  position: relative;
  height: 230px;
  margin-bottom: 4px;
}

/* Legend di bawah chart -- 3 penanda: hijau (sesuai/di bawah target),
   oranye (di atas target), lingkaran putus-putus (belum ada data). */
.pelaporan-ds-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 0.75px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}

.pelaporan-ds-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pelaporan-ds-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.pelaporan-ds-legend__dot--ok {
  background: var(--color-success-text);
}

.pelaporan-ds-legend__dot--over {
  background: var(--color-warning-text);
}

.pelaporan-ds-legend__dot--empty {
  background: transparent;
  border: 1.5px dashed var(--color-muted-strong);
}

@media (max-width: 720px) {
  .review-card {
    flex: 1 1 100%;
  }
}

@media (max-width: 420px) {
  .defense-node__dot {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .defense-node__date,
  .defense-node--pending .defense-node__date,
  .defense-node--current .defense-node__date {
    font-size: 9.5px;
  }

  .gangguan-hero__value {
    font-size: 32px;
  }

  .gangguan-chart-wrap {
    height: 200px;
  }

  .gangguan-legend {
    gap: 10px 14px;
    font-size: 8.5px;
  }

  .defense-progress__value {
    font-size: 32px;
  }

  .pelaporan-ds-avg__value {
    font-size: 32px;
  }

  .pelaporan-ds-avg__caption {
    font-size: 10px;
  }

  .pelaporan-ds-chart-wrap {
    height: 200px;
  }

  .pelaporan-ds-legend {
    gap: 10px 14px;
    font-size: 8.5px;
  }
}


/* --- Responsive khusus section STRATEGI --- */
@media (max-width: 560px) {
  .sop-progress-meta {
    display: none; /* sembunyikan "X/14 ULTG TERLAKSANA" di layar sempit, sisakan % saja */
  }
}

/* ================= 9H. TRANSAKSI — MONITORING AFPM/AFA/CF PLTU IPP =================
   Dipakai KHUSUS oleh halaman transaksi.html. Pola bingkai luar (nomor +
   label + body) sengaja meniru .sop-progress-card dari STRATEGI supaya
   konsisten satu keluarga visual, tapi diberi nama class sendiri (.monitor-*)
   karena isinya beda (grid 4 kartu PLTU, bukan tabel progress). Warna KPI
   (AFPM/AFA/CF) & badge korelasi ditarik dari token di bagian 1. */

.monitor-card {
  background: var(--color-card);
  /* Stroke putih soft/transparan -- BEDA dari --border-card (kuning tipis)
     yang masih dipakai kartu-kartu KECIL di dalamnya (.pltu-card,
     .line-chart-card, dst). Ini SENGAJA khusus utk kontainer BESAR
     .monitor-card saja. */
  border: 0.85px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 var(--section-px) 24px;
}

.monitor-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: var(--color-bg-strip);
  border-bottom: 0.75px solid rgba(255, 255, 255, 0.18);
}

.monitor-card__header .section-bar__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-white);
}

.monitor-card__meta {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
}

.monitor-card__filters {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.monitor-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}

.monitor-filter label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

.monitor-filter__select {
  background: rgba(255, 193, 7, 0.06);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--color-white);
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3px;
  cursor: pointer;
}

.monitor-filter__select:focus {
  outline: none;
  border-color: var(--color-gold);
}

/* ================= 9I. CUSTOM MONTH DROPDOWN (ECE & Abnormal Frekuensi) =================
   Select bulan asli (<select>) diganti tampilan kustom (trigger button +
   menu) supaya arah buka SELALU ke bawah -- tidak ikut default browser
   yang bisa membuka ke atas kalau ruang di bawah viewport mepet. Posisi
   menu dihitung via JS (position: fixed, dipasang relatif ke trigger),
   jadi tidak ikut kepotong overflow:hidden milik .monitor-card. Select
   asli tetap ada (disembunyikan) supaya logic JS (value/change event)
   yang sudah ada tidak perlu diubah. */
.custom-select {
  position: relative;
}

.custom-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.custom-select__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.custom-select__trigger[aria-expanded="true"] .custom-select__chevron {
  transform: rotate(180deg);
}

.custom-select__menu {
  position: fixed;
  z-index: 200;
  background: var(--color-card);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
  display: none;
}

.custom-select__menu.is-open {
  display: block;
}

.custom-select__option {
  padding: 8px 12px;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--color-white);
  cursor: pointer;
  white-space: nowrap;
}

.custom-select__option:hover {
  background: rgba(255, 193, 7, 0.10);
}

.custom-select__option.is-active {
  color: var(--color-gold);
  font-weight: 700;
  background: rgba(255, 193, 7, 0.06);
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 20px 0;
}

@media (max-width: 1300px) {
  .monitor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .monitor-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Kartu per PLTU --- */
.pltu-card {
  display: flex;
  flex-direction: column;
  /* Fill solid sesuai referensi (kembali ke tone flat, bukan gradient). */
  background: #13171F;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 18px;
  min-width: 0;
}

.pltu-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.pltu-card__header > *:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.pltu-card__eyebrow {
  display: block;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-data-muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pltu-card__title {
  display: block;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-data-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pltu-card__period {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 4px 9px;
  background: rgba(255, 193, 7, 0.06);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--color-data-muted);
  white-space: nowrap;
}

.pltu-card__period svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  stroke: var(--color-muted);
}

/* --- Gauge (AFPM / AFA / CF) --- */
.pltu-card__gauges {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.gauge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.gauge-item__ring {
  position: relative;
  width: 96px;
  height: 96px;
}

.gauge-item__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gauge-item__ring .gauge-track {
  stroke: rgba(255, 255, 255, 0.06);
}

.gauge-item__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}

.gauge-item__value span {
  font-size: 10px;
  font-weight: 600;
  align-self: center;
}

.gauge-item__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.275px;
  color: var(--color-gauge-label);
}

.gauge-item__unit {
  font-family: var(--font-data);
  font-weight: 400;
  font-size: 10px;
  color: var(--color-data-muted);
}

/* --- Badge korelasi (indikator potensi DCH NIHIL) --- */
.corr-badge {
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  margin-bottom: 16px;
}

.corr-badge--risiko {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.corr-badge--kosong {
  background: var(--color-kosong-bg);
  border-color: var(--color-kosong-border);
}

.corr-badge--kosong .corr-badge__dot {
  background: var(--color-kosong-text);
}

.corr-badge--kosong .corr-badge__status {
  color: var(--color-kosong-text);
}

.corr-badge__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.corr-badge__left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.corr-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success-text);
  flex-shrink: 0;
}

.corr-badge--risiko .corr-badge__dot {
  background: var(--color-warning-text);
}

.corr-badge__label {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 11px;
  color: var(--color-data-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corr-badge__status {
  flex-shrink: 0;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 11px;
  color: var(--color-success-text);
}

.corr-badge--risiko .corr-badge__status {
  color: var(--color-warning-text);
}

.corr-badge__desc {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--color-muted-strong);
  padding-left: 15px;
}

/* --- DCH --- */
.pltu-card__divider {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
}

.pltu-card__dch-label {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-data-muted);
  margin-bottom: 6px;
}

.pltu-card__dch-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.pltu-card__dch-value strong {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--color-data-white);
}

.pltu-card__dch-value span {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 11px;
  color: var(--color-data-muted);
}

.pltu-card__dch-value--nihil strong {
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--color-muted-strong);
}

.pltu-card__dch-value--kosong strong {
  font-size: 13px;
  letter-spacing: 0.3px;
  font-weight: 600;
  color: var(--color-muted-strong);
}

.pltu-card__dch-caption {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--color-muted-strong);
}

/* ---------- Sub-section: Capaian dalam Semester (masih dalam container 01) ---------- */
.sem-section {
  margin: 28px 24px 24px;
  padding-top: 22px;
  border-top: 0.75px solid var(--border-card);
}

.sem-section__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-muted-strong);
  margin-bottom: 16px;
}

.sem-section__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}

.sem-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sem-card {
  background: var(--color-bg-strip);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 18px 22px;
}

.sem-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px; /* jarak judul box -> grafik (sebelumnya 20px) */
}

.sem-card__title-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.sem-card__title {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-data-white);
}

.sem-card__legend {
  display: flex;
  gap: 14px;
}

.sem-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--color-data-muted);
}

.sem-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

.sem-dot--afpm { background: var(--color-kpi-afpm); }
.sem-dot--afa  { background: var(--color-kpi-afa); }
.sem-dot--cf   { background: var(--color-kpi-cf); }

.sem-card__period {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-data-muted);
  white-space: nowrap;
}

.sem-card__body {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.sem-chart {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.sem-month-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4px;
}

.sem-month-group + .sem-month-group {
  border-left: 1px solid rgba(255, 255, 255, 0.055);
}

/* Tinggi area batang: bar maksimum 100px + label nilai (~18px) + ~10px
   ruang kosong di atas. Sebelumnya 112px -> label nilai batang ~100%
   (mis. 99.89) menembus keluar ke atas, mepet judul box. */
.sem-bars-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 130px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.32); /* garis sumbu X */
}

.sem-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
}

.sem-bar-value {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sem-bar-value--afpm { color: var(--color-kpi-afpm); }
.sem-bar-value--afa  { color: var(--color-kpi-afa); }
.sem-bar-value--cf   { color: var(--color-kpi-cf); }

.sem-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
}

.sem-bar--afpm { background: linear-gradient(180deg, #FBBF53, var(--color-kpi-afpm)); }
.sem-bar--afa  { background: linear-gradient(180deg, #5CE3F4, var(--color-kpi-afa)); }
.sem-bar--cf   { background: linear-gradient(180deg, #5EE8B4, var(--color-kpi-cf)); }

/* Tinggi label dibuat SAMA (2 baris) untuk bulan yang sudah maupun belum
   ada realisasi, teks rata tengah & mulai dari atas -> garis dasar batang
   dan posisi label antar bulan jadi sejajar. */
.sem-month-label {
  margin-top: 8px;
  width: 100%;
  min-height: 3em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--color-data-muted);
  text-transform: uppercase;
}

/* Bulan yang sudah ada realisasi: "Data Realisasi" + rentang tanggal
   (mis. 01-16 Sep 2026), bukan huruf kapital semua. */
.sem-month-label--realisasi {
  text-transform: none;
  letter-spacing: 0.02em;
}

.sem-dch {
  width: 224px;
  flex-shrink: 0;
  margin-left: 22px;
  padding-left: 22px;
  border-left: 1px solid var(--border-card);
}

.sem-dch__title {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 600;
  color: var(--color-kpi-afa);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.sem-dch__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sem-dch__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--font-data);
  font-size: 10.5px;
}

.sem-dch__month {
  color: var(--color-data-muted);
  font-weight: 600;
  letter-spacing: 0.4px;
}

.sem-dch__val {
  color: var(--color-data-white);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sem-dch__unit {
  color: var(--color-data-muted);
  font-size: 9px;
  font-weight: 500;
  margin-left: 2px;
}

.sem-dch__val--nihil {
  color: var(--color-muted-strong);
  font-style: italic;
  font-weight: 500;
}

@media (max-width: 900px) {
  .sem-card__body {
    flex-direction: column;
  }

  .sem-dch {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border-card);
    margin-top: 16px;
    padding-top: 16px;
  }

  .sem-bars-row {
    height: 130px; /* bar tetap setinggi nilai (maks 100px), jadi tidak boleh lebih pendek */
  }
}

/* ================= 9b. SECTION 02: CURTAILMENT PLTB ================= */
.curtailment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 20px 0;
}

.curtailment-card {
  background: var(--color-bg-strip);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 18px 22px 16px;
}

.curtailment-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.curtailment-card__title {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-data-white);
}

.curtailment-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 193, 7, 0.06);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--color-data-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.curtailment-card__toggle:hover {
  border-color: var(--color-gold);
  color: var(--color-white);
}

.curtailment-card__toggle svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  transition: transform 0.2s ease;
}

.curtailment-card__toggle.is-open svg {
  transform: rotate(180deg);
}

.curtailment-card__highlight-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.curtailment-card__highlight {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 3px;
  padding: 13px 18px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
}

.curtailment-card__highlight-label {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-data-muted);
}

/* Judul "Sisa Durasi Curtailment": kuning + bold */
.curtailment-card__highlight-label--gold {
  color: var(--color-gold);
  font-weight: 700;
}

.curtailment-card__highlight-value {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.5px;
  color: var(--color-data-white);
  font-variant-numeric: tabular-nums;
}

.curtailment-card__highlight-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-data-muted);
}

.curtailment-card__highlight-caption {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--color-muted-strong);
}

.curtailment-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.curtailment-detail.is-open {
  max-height: 600px;
}

.curtailment-detail__inner {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--border-card);
}

.curtailment-table {
  width: 100%;
  border-collapse: collapse;
}

.curtailment-table th {
  text-align: left;
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-data-muted);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--border-card);
  white-space: nowrap;
}

.curtailment-table td {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--color-data-white);
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

.curtailment-table tr:last-child td {
  border-bottom: none;
}

.curtailment-table td:nth-child(3) {
  color: var(--color-warning-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.curtailment-table td:last-child {
  color: var(--color-data-muted);
  white-space: normal;
  min-width: 140px;
}

@media (max-width: 900px) {
  .curtailment-grid {
    grid-template-columns: 1fr;
  }

  .curtailment-card__highlight-group {
    flex-direction: column;
  }

  .curtailment-card__highlight {
    width: 100%;
  }

  .curtailment-table {
    display: block;
    overflow-x: auto;
  }
}

/* ================= 10. FOOTER ================= */
.footer {
  background: var(--color-bg-strip);
  border-top: 0.67px solid var(--border-card);
  padding: 16px var(--section-px) 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.footer__brand-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.footer__logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.footer__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--color-gold);
}

.footer__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.7px;
  color: var(--color-white);
}

.footer__desc {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 20px;
  color: var(--color-muted-strong);
  max-width: 380px;
}

.footer__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 16px;
}

.footer__heading-line {
  width: 24px;
  height: 1.5px;
  background: var(--color-gold);
  display: inline-block;
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__column a,
.footer__column p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  transition: color 0.15s ease;
}

.footer__column a:hover {
  color: var(--color-gold);
}

/* Kolom Kontak pakai ukuran teks lebih kecil (12px), sesuai spesifikasi */
.footer__column:last-child p {
  font-size: 12px;
}

.footer__bottom {
  padding: 24px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-copyright);
}

/* ================= 11. RESPONSIVE ================= */
@media (max-width: 1300px) {
  .average-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upb-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 700px) {
  .average-grid {
    grid-template-columns: 1fr;
  }

  .upb-panel {
    grid-template-columns: 1fr;
  }

  .page-heading__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 900px) {
  .navbar__inner {
    flex-wrap: wrap;
  }

  .navbar__menu {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .navbar__menu::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 640px) {
  .navbar {
    gap: 12px;
  }

  .navbar__link span {
    display: none;
  }

  .navbar__link {
    padding: 9px 12px;
  }

  .navbar__icon {
    width: 17px;
    height: 17px;
  }

  .info-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================= 12. REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card__cta,
  .card__cta-arrow,
  .navbar__link {
    transition: none;
  }
}

/* ================= 13. ZOOM NOTICE MODAL ================= */
.zoom-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.zoom-modal.is-open {
  display: flex;
}

.zoom-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 14, 0.72);
  backdrop-filter: blur(3px);
}

.zoom-modal__box {
  position: relative;
  width: min(380px, 90vw);
  background: var(--color-card);
  border: 1px solid var(--border-cta);
  border-radius: 16px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: zoomModalIn 0.25s ease;
}

@keyframes zoomModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.zoom-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.zoom-modal__icon svg {
  width: 40px;
  height: 40px;
  color: var(--color-gold);
}

.zoom-modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--color-white);
  margin-bottom: 10px;
}

.zoom-modal__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 18px;
}

.zoom-modal__desc strong {
  color: var(--color-gold);
  font-weight: 600;
}

.zoom-modal__desc kbd {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.zoom-modal__check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 18px;
  cursor: pointer;
}

.zoom-modal__check input {
  accent-color: var(--color-gold);
  width: 14px;
  height: 14px;
}

.zoom-modal__btn {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFD34D, var(--color-gold));
  color: #14181F;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zoom-modal__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 193, 7, 0.35);
}

/* ================= 14. HERO / LANDING PAGE (index.html) =================
   Gerbang masuk sebelum login -- satu section penuh 1 layar (min-height:
   100vh) dengan foto latar jaringan transmisi (hero-bg.png), 2 lapis
   overlay gelap (flat + gradient diagonal) supaya teks kiri tetap gampang
   dibaca sementara detail foto (menara SUTT/turbin) di sisi kanan tetap
   terlihat.
   Eyebrow "PT PLN (PERSERO)" sengaja dibuat override gaya awal (garis +
   teks polos, tanpa pill/badge) khusus di hero -- .eyebrow versi pill di
   section 4 (Page Heading) tetap dipakai apa adanya di halaman dashboard. */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh; /* viewport unit yang lebih akurat di mobile (address bar) */
  display: flex;
  flex-direction: column;
}

/* --- Layer 1: foto latar --- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('hero-bg.png');
  background-size: cover;
  background-position: center 42%;
}

/* --- Layer 2: overlay gelap flat, dasar kontras buat seluruh section --- */
.hero__overlay-dark {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(6, 9, 14, 0.5);
}

/* --- Layer 3: overlay gradient diagonal, gelap pekat di kiri (area teks)
   dan memudar ke kanan supaya siluet menara/turbin di foto tetap "muncul" --- */
.hero__overlay-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    rgba(8, 11, 17, 0.97) 0%,
    rgba(8, 11, 17, 0.88) 28%,
    rgba(8, 11, 17, 0.42) 58%,
    rgba(8, 11, 17, 0.08) 84%
  );
}

/* --- Konten utama hero --- */
.hero__content {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
  padding: 0 var(--section-px);
}

/* Override .eyebrow (section 4) balik ke gaya awal khusus di hero --
   garis lurus + teks polos, tanpa background/border pill */
.hero__content .eyebrow {
  display: flex;
  align-items: center;
  gap: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 18px;
  font-size: 15px;
  letter-spacing: 2.4px;
}

.hero__content .eyebrow__line {
  display: none;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.text-gold {
  color: var(--color-gold);
  text-shadow: 0 0 36px rgba(255, 193, 7, 0.35);
}

.hero__divider {
  width: 72px;
  height: 3px;
  border-radius: 3px;
  margin: 26px 0 22px;
  background: linear-gradient(90deg, var(--color-gold), rgba(255, 193, 7, 0));
}

.hero__subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 17px);
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.72);
  max-width: 420px;
  margin-bottom: 36px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Animasi masuk: satu momen fade-up yang beruntun (bukan efek acak
   di banyak tempat), tiap child hero__content punya delay bertahap --- */
.hero__content > * {
  animation: heroFadeUp 0.7s ease both;
}

.hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.hero__content > *:nth-child(2) { animation-delay: 0.15s; }
.hero__content > *:nth-child(3) { animation-delay: 0.28s; }
.hero__content > *:nth-child(4) { animation-delay: 0.36s; }
.hero__content > *:nth-child(5) { animation-delay: 0.46s; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Tombol (dipakai navbar "Masuk" + 2 CTA hero__actions) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    border-color 0.2s ease, color 0.2s ease;
}

/* CTA utama -- kuning solid, jadi fokus paling kuat di halaman */
.btn--gold {
  padding: 15px 32px;
  border-radius: 10px;
  background: var(--color-gold);
  color: #14181F;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(255, 193, 7, 0.22);
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(255, 193, 7, 0.32);
}

/* --- Footer dalam hero: bar kaca (glass) tipis di dasar layar, supaya
   tetap kebaca jelas berapa pun terangnya foto di baliknya --- */
.hero__footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px var(--section-px) 26px;
  background: rgba(6, 9, 14, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.footer__sisters {
  display: flex;
  align-items: center;
}

.footer__sister {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 24px;
}

.footer__sister:first-child {
  padding-left: 0;
}

.footer__sister + .footer__sister {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.footer__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.85);
}

.footer__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 640px) {
  .hero__divider {
    margin: 20px 0 18px;
  }

  .hero__subtitle {
    margin-bottom: 28px;
  }

  .hero__actions {
    width: 100%;
  }

  .hero__actions .btn {
    flex: 1;
  }

  .footer__sister {
    padding: 0 16px;
  }

  .footer__sister:first-child {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__content > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .btn--gold:hover {
    transform: none;
  }
}

/* ================= 15. LOGIN PAGE (login.html) =================
   Login pakai beberapa token warna & font sendiri (gold/bg/card/muted/
   font-body beda dari dashboard) -- supaya tidak bentrok dgn variabel
   nama sama punya dashboard, di-override & di-scope khusus lewat
   body[data-page="login"] (login.html pasang data-page="login" di
   tag <body>-nya). Variabel lain (--color-white, --font-display) sudah
   sama persis dgn punya dashboard jadi tidak perlu di-override. */
body[data-page="login"] {
  --color-gold: #F5C518;
  --color-bg: #05070B;
  --color-card: #12151F;
  --color-muted: rgba(255, 255, 255, 0.45);
  --font-body: 'Barlow', sans-serif;

  /* Token baru, khusus dipakai di login.html saja */
  --color-input: #171C29;
  --color-border: rgba(255, 255, 255, 0.07);
  --color-error: #F87171;

  position: relative;
  overflow-x: hidden;
}

/* Latar belakang: foto transmisi yang dibuat sangat redup, senada dengan landing page.
   Diberi animasi pan/zoom sangat pelan supaya halaman terasa hidup, bukan gambar statis. */
.login-bg {
  position: fixed;
  inset: 0;
  background-image: url('hero-bg.png');
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: 0;
  transform: scale(1.06);
  animation: loginBgDrift 26s ease-in-out infinite alternate;
}

/* Tekstur garis halus (grid) -- supaya area gelap tidak terasa polos/flat,
   tetap sangat subtle karena opacity rendah. */
.login-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.9) 0%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.9) 0%, transparent 75%);
}

/* Tekstur grain/noise halus lewat SVG fractal noise -- memberi kesan "material",
   bukan warna flat, tanpa perlu file gambar tambahan. */
.login-noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  opacity: 0.9;
  z-index: 2;
}

.login-wrap {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 20px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 36px 32px 28px;
  animation: loginCardIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 32px;
  animation: loginFadeUp 0.6s ease both 0.12s;
}

.login-card__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 16px;
}

.login-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
}

.login-card__subtitle {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: loginFadeUp 0.6s ease both 0.2s;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.field__input {
  width: 100%;
  background: var(--color-input);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-white);
  transition: border-color 0.15s ease;
}

.field__input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-gold);
}

/* Sembunyikan ikon reveal-password bawaan browser (mis. Edge) --
   sudah ada ikon mata custom (.field__toggle) di sebelahnya. */
.field__input[type="password"]::-ms-reveal,
.field__input[type="password"]::-ms-clear {
  display: none;
}

.field__password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.field__password-wrap .field__input {
  padding-right: 44px;
}

.field__toggle {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 4px;
}

.field__toggle:hover {
  color: var(--color-white);
}

.field__toggle:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.login-form__error {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-error);
  margin-top: -8px;
}

.btn-submit {
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  background: var(--color-gold);
  color: #000000;
  border: none;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.15s ease, opacity 0.15s ease;
  animation: loginFadeUp 0.6s ease both 0.28s;
}

.btn-submit:hover {
  transform: translateY(-1px);
}

.btn-submit:disabled {
  opacity: 0.85;
  cursor: not-allowed;
  transform: none;
}

.btn-submit:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* --- Spinner profesional dipakai saat proses login / prefetch data --- */
.btn-submit__spinner {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #000000;
  animation: btnSpin 0.7s linear infinite;
}

.btn-submit__label {
  display: inline-block;
}

/* Titik "..." berjalan supaya status loading terasa aktif, bukan teks statis */
.btn-submit__label.is-progress::after {
  content: '';
  display: inline-block;
  width: 1.1em;
  text-align: left;
  animation: btnDots 1.2s steps(4, end) infinite;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

@keyframes btnDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

@keyframes loginBgDrift {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}

@keyframes loginCardIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes loginFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-submit,
  .field__input {
    transition: none;
  }

  .login-bg,
  .login-card,
  .login-card__header,
  .login-form,
  .btn-submit {
    animation: none;
  }

  .btn-submit__spinner {
    animation: none;
  }

  .btn-submit__label.is-progress::after {
    animation: none;
    content: '...';
  }
}