/* ROW Watch — design system matched to the PLN UPT Palangkaraya "Hotspot Watch"
   app (D:\Learn\AI1\hotspot-watch-cloudflare), so the two internal tools read as
   one product family. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');

:root {
  --ink: #16233b;
  --muted: #6b7c93;
  --line: #e3e8f0;
  --paper: #f5f7fa;
  --card: #ffffff;
  --teal: #00438b;
  --coral: #ff7a1a;
  --blue-strong: #00438b;
  --blue-soft: #eaf2fb;
  --blue-dark: #081d43;
  --critical: #e5484d;
  --warning: #f5a623;
  --warning-ink: #8a5a05;
  --moderate: #2f7cd6;
  --safe: #21a366;

  /* ROW-specific severity tiers (KONDISI FINAL / LIDAR classification) */
  --row-aman: var(--safe);
  --row-waspada: var(--warning);
  --row-bahaya1: var(--warning);
  --row-bahaya2: #e0672b;
  --row-kritis: #b0182f;
  --row-kosong: #94a3b8;

  /* categorical palette for non-severity breakdowns (vegetation, petugas, ULTG) */
  --series-1: var(--blue-strong);
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: var(--safe);
  --series-7: #4a3aa7;
  --series-8: var(--critical);
}

* { box-sizing: border-box; }
body { margin: 0; padding-bottom: 72px; color: var(--ink); background: var(--paper); font-family: Manrope, sans-serif; }
a { color: var(--blue-strong); }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
button, select, input { font: inherit; }

/* ---------- Layout ---------- */
.layout { display: flex; align-items: flex-start; min-height: 100vh; }

.sidebar {
  width: 224px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, var(--blue-strong), var(--blue-dark));
  padding: 20px 14px;
  transition: width .18s ease, padding .18s ease;
}
.sidebar.collapsed { width: 60px; padding: 20px 8px; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0 0 14px; }
.sidebar.collapsed .sidebar-brand > div { display: none; }
.sidebar.collapsed .sidebar-link { justify-content: center; padding: 9px 0; }
.sidebar.collapsed .sidebar-link span { display: none; }
.sidebar-toggle {
  display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 0 12px;
  padding: 6px 0; border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  background: rgba(255,255,255,.05); color: #b9cdec; cursor: pointer;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar-toggle svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform .18s ease; }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 16px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); }
.sidebar-mark { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; font-size: 20px; }
.sidebar-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar-brand strong { display: block; color: #fff; font-size: 14px; }
.sidebar-brand small { display: block; color: #a9c1e6; font-size: 11px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; color: #b9cdec; text-decoration: none; font: 600 13px Manrope, sans-serif; }
.sidebar-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 3px 0 0 var(--coral); }

.app-shell { position: relative; flex: 1; min-width: 0; max-width: 1240px; margin: auto; padding: 22px 26px 26px; }
.app-shell-fluid { max-width: none; }

@media (max-width: 760px) {
  .layout { display: block; }
  .sidebar { position: static; width: 100%; height: auto; display: flex; align-items: center; gap: 14px; padding: 14px 16px; overflow-x: auto; }
  .sidebar-brand { border-bottom: 0; padding: 0; margin: 0; flex-shrink: 0; }
  .sidebar-brand > div { display: none; }
  .sidebar-nav { flex-direction: row; }
  .sidebar-link span { display: none; }
  .sidebar-toggle { display: none; }
  .app-shell { padding: 16px 14px; }
  body { padding-bottom: 108px; }
  .global-bottom-bar-info { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 14px; }
  .global-bottom-bar-brand { padding: 6px 14px; gap: 8px; }
  .global-bottom-bar-tagline { display: none; }
}

/* ---------- Masthead / hero ---------- */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.brand-wrap, .utility-right { display: flex; align-items: center; gap: 14px; }
.danantara-logo, .pln-logo { display: flex; align-items: center; }
.danantara-logo { height: 26px; }
.pln-logo { height: 34px; }
.danantara-logo img, .pln-logo img { height: 100%; width: auto; max-width: 150px; display: block; object-fit: contain; }
.source-status { font: 500 11px 'DM Mono', monospace; color: var(--muted); }
.source-status i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--coral); }
.source-status.success i { background: var(--safe); }
.source-status.loading i { background: var(--warning); animation: pulse 1s infinite; }
.source-status.error i, .source-status.fallback i { background: var(--warning); }
@keyframes pulse { 50% { opacity: .35; } }

.hero { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 32px 0 24px; flex-wrap: wrap; }
.eyebrow { margin: 0 0 8px; color: var(--teal); text-transform: uppercase; font: 500 11px 'DM Mono', monospace; letter-spacing: .3px; }
.hero h1 { max-width: 700px; margin: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.5px; text-transform: uppercase; font-weight: 800; }
.lede { max-width: 560px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.hero-rule { min-width: 140px; padding: 14px 0 0 18px; border-left: 2px solid var(--coral); }
.hero-rule span { display: block; color: var(--muted); font: 500 10px 'DM Mono', monospace; text-transform: uppercase; }
.hero-rule strong { display: block; margin: 4px 0 6px; color: var(--teal); font: 500 26px 'DM Mono', monospace; }

@media (max-width: 760px) {
  .hero { display: block; padding: 26px 0 20px; }
  .hero-rule { margin-top: 24px; padding-left: 0; border-left: 0; border-top: 2px solid var(--coral); padding-top: 12px; }
}

/* ---------- Controls (filters) ---------- */
.controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.control-small { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.control-small label { color: var(--muted); text-transform: uppercase; letter-spacing: .3px; font: 700 10px 'DM Mono', monospace; }
.control-small select, .control-small input {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; outline: 0;
  background: #fbfcfe; color: var(--ink); font: 500 13px 'DM Mono', monospace;
}
.control-small select:focus, .control-small input:focus { border-color: var(--blue-strong); box-shadow: 0 0 0 3px rgba(0,67,139,.12); }
@media (max-width: 760px) { .controls { grid-template-columns: 1fr; } }

/* ---------- Report banner (dashboard top section) ---------- */
/* Update Banner styling to match hotspot-watch */
.report-banner { 
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; 
  background: linear-gradient(135deg, var(--blue-strong) 0%, var(--blue-dark) 100%); 
  color: #fff; padding: 24px 26px 22px; border-radius: 14px; margin: 16px 0; 
}
.report-banner h1 { margin: 0; font-size: clamp(22px, 3vw, 32px); line-height: 1.2; letter-spacing: -.5px; text-transform: uppercase; font-weight: 800; }
.report-banner h1 em { color: #ffc38a; font-style: normal; }
.banner-sub { margin: 10px 0 5px; font-size: 13px; color: #dfeefd; max-width: 720px; line-height: 1.5; }
.banner-meta { margin: 0; font: 600 12px 'DM Mono', monospace; color: #bcd4f2; text-transform: uppercase; letter-spacing: .4px; }
.banner-illustration { flex-shrink: 0; align-self: stretch; max-width: 100px; min-height: 70px; }
.banner-logo-mark { width: 100%; height: 100%; object-fit: contain; object-position: right center; display: block; }
@media (max-width: 760px) { .banner-illustration { display: none; } }

/* ---------- Stat row (colored KPI cards) ---------- */
.stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0 0 16px; }
.stat-card { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 11px; text-align: left; background: #fff; }
.stat-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.stat-icon { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; font-size: 11px; }
.stat-card .stat-label { display: block; font: 700 9px 'DM Mono', monospace; letter-spacing: .3px; }
.stat-card strong { display: block; font-size: 22px; font-weight: 800; margin-bottom: 1px; line-height: 1; }
.stat-card small { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .3px; }
.stat-bar { margin-top: 7px; height: 4px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.stat-bar-fill { display: block; height: 100%; width: 0%; border-radius: 999px; }
.stat-card.total { border-color: var(--line); background: var(--blue-soft); }
.stat-card.total .stat-label, .stat-card.total strong { color: var(--teal); }
.stat-card.total .stat-icon { background: rgba(255,255,255,.6); color: var(--teal); }
.stat-card.critical { border-color: #f6c8ca; background: #fdecec; }
.stat-card.critical .stat-label, .stat-card.critical strong { color: var(--critical); }
.stat-card.critical .stat-icon { background: rgba(255,255,255,.6); color: var(--critical); }
.stat-card.critical .stat-bar-fill { background: var(--critical); }
.stat-card.warning { border-color: #f9dfab; background: #fff4e0; }
.stat-card.warning .stat-label, .stat-card.warning strong { color: var(--warning-ink); }
.stat-card.warning .stat-icon { background: rgba(255,255,255,.6); color: var(--warning-ink); }
.stat-card.warning .stat-bar-fill { background: var(--warning); }
.stat-card.moderate { border-color: #c4dbf5; background: #eaf2fb; }
.stat-card.moderate .stat-label, .stat-card.moderate strong { color: var(--moderate); }
.stat-card.moderate .stat-icon { background: rgba(255,255,255,.6); color: var(--moderate); }
.stat-card.moderate .stat-bar-fill { background: var(--moderate); }
.stat-card.safe { border-color: #bfe6cf; background: #e8f7ef; }
.stat-card.safe .stat-label, .stat-card.safe strong { color: var(--safe); }
.stat-card.safe .stat-icon { background: rgba(255,255,255,.6); color: var(--safe); }
.stat-card.safe .stat-bar-fill { background: var(--safe); }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 18px 0; }
.kpi-card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.kpi-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 19px; }
.kpi-icon-danger { background: #fde3e3; }
.kpi-icon-pending { background: #fef1cf; }
.kpi-icon-info { background: var(--blue-soft); }
.kpi-icon-good { background: #e5f7ec; }
.kpi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-label { color: var(--muted); text-transform: uppercase; letter-spacing: .3px; font: 700 9.5px 'DM Mono', monospace; }
.kpi-value { color: var(--teal); font: 700 20px 'DM Mono', monospace; line-height: 1.15; }
.kpi-note { color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.kpi-note.warn { color: var(--warning-ink); }
.kpi-note.good { color: var(--safe); }
@media (max-width: 760px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Chart cards / grid ---------- */
.chart-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(16,24,40,.04); margin: 0; }
.chart-card h2 { margin: 0 0 14px; font-size: 15px; color: var(--ink); }
.chart-card-sub { margin: -10px 0 14px; color: var(--muted); font-size: 11.5px; }
.chart-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.grid-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.section { margin: 16px 0; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Donut ---------- */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-wrap svg { width: 168px; height: 168px; flex-shrink: 0; }
.donut-center-label { font-family: 'DM Mono', monospace; font-weight: 700; fill: var(--ink); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 160px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; color: var(--ink); font: 500 11.5px 'DM Mono', monospace; }
.donut-legend .legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend .legend-count { margin-left: auto; color: var(--muted); }
.donut-legend-empty { color: var(--muted); }

/* ---------- Bar group / bar list ---------- */
.bar-group-title { font: 700 10.5px 'DM Mono', monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 56px; align-items: center; gap: 10px; margin-bottom: 8px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-label { font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { position: relative; height: 16px; background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0%; border-radius: 3px; min-width: 3px; }
.bar-value { text-align: right; font: 700 12px 'DM Mono', monospace; color: var(--ink); white-space: nowrap; }

/* The source records only the latest LiDAR status/date. H-7 therefore
   distinguishes recently refreshed rows from older rows without implying
   historical status changes that are not available in the sheet. */
.lidar-bar-row { position: relative; cursor: help; }
.lidar-h7-tip { position: absolute; z-index: 5; left: 160px; right: 56px; bottom: calc(100% + 5px); display: none; padding: 7px 9px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 10.5px 'DM Mono', monospace; line-height: 1.35; box-shadow: 0 4px 14px rgba(16,24,40,.18); }
.lidar-bar-row:hover .lidar-h7-tip, .lidar-bar-row:focus .lidar-h7-tip { display: block; }

/* Position values are operational phrases rather than category codes. */
.row-position .bar-row { grid-template-columns: 200px 1fr 56px; }
.row-position .bar-label { overflow: visible; white-space: normal; line-height: 1.25; }

/* ---------- Trend list (long free-text labels, e.g. PGP - Kendala's Trending Kendala — see .bar-label above for why this isn't RW.barList) ---------- */
.trend-list { display: flex; flex-direction: column; gap: 10px; }
.trend-item-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.trend-item-text { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.trend-item-count { font: 700 12px 'DM Mono', monospace; color: var(--ink); white-space: nowrap; flex: none; }
.trend-item-bar { margin-top: 4px; height: 6px; background: #fff; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.trend-item-bar-fill { display: block; height: 100%; border-radius: 2px; }

/* ---------- Status pills ---------- */
.status-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; font: 700 10px 'DM Mono', monospace; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.status-pill.row-aman { color: #fff; background: var(--row-aman); }
.status-pill.row-waspada { color: var(--warning-ink); background: var(--row-waspada); }
.status-pill.row-bahaya1 { color: var(--warning-ink); background: var(--row-bahaya1); }
.status-pill.row-bahaya2 { color: #fff; background: var(--row-bahaya2); }
.status-pill.row-kritis { color: #fff; background: var(--row-kritis); }
.status-pill.row-kosong { color: #fff; background: var(--row-kosong); }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; min-width: 640px; }
table.data-table th { padding: 12px 11px 9px; color: var(--muted); text-align: left; text-transform: uppercase; letter-spacing: .3px; font: 700 10.5px 'DM Mono', monospace; border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; }
table.data-table td { padding: 10px 11px; border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; white-space: nowrap; }
table.data-table tbody tr:hover { background: #f4f8fc; }
table.data-table td.num { font: 500 12px 'DM Mono', monospace; text-align: right; }

/* ---------- Collapsible detail groups (compact table) ---------- */
/* Cloned from hotspot-watch's Target Inspeksi table (tower-dashboard.html,
   .target-ultg-*/.target-table): a group is collapsed by default so a long,
   many-row breakdown stays short until a section is actually opened, and
   the table itself uses tight padding/line-height so many rows fit on
   screen at once. */
.detail-ultg-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); font: 700 12.5px Manrope, sans-serif; color: var(--ink); }
.detail-ultg-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.detail-ultg-heading-count { color: var(--muted); font: 500 11px 'DM Mono', monospace; }

.collapsible-group { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 8px; overflow: hidden; }
.collapsible-group:last-child { margin-bottom: 0; }
.collapsible-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: var(--blue-soft); color: var(--blue-strong); font: 700 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .3px; text-align: left; cursor: pointer; appearance: none; }
.collapsible-head:hover { background: #dde9fb; }
.collapsible-head-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collapsible-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.collapsible-count { color: var(--ink); font-weight: 700; white-space: nowrap; }
.collapsible-chevron { width: 13px; height: 13px; flex-shrink: 0; transition: transform .15s ease; }
.collapsible-head[aria-expanded="true"] .collapsible-chevron { transform: rotate(180deg); }
.collapsible-body { border-top: 1px solid var(--line); }

.compact-table { width: 100%; table-layout: auto; border-collapse: collapse; }
.compact-table th { padding: 5px 7px 4px; color: var(--muted); text-align: left; text-transform: uppercase; letter-spacing: .2px; font: 700 9px 'DM Mono', monospace; }
.compact-table td { padding: 4px 7px; border-top: 1px solid var(--line); font-size: 11px; vertical-align: middle; line-height: 1.3; }
.compact-table tbody tr:first-child td { border-top: 0; }
.compact-table tbody tr:hover { background: #f4f8fc; }
.compact-table td.num { font: 500 10.5px 'DM Mono', monospace; text-align: right; }
.compact-table th.mid, .compact-table td.mid { text-align: center; }
.compact-table td.mid { font: 500 10.5px 'DM Mono', monospace; }
.compact-table td.num, .compact-table th.num { text-align: right; }
.row-detail-table { min-width: 980px; table-layout: fixed; }
.row-detail-table .sirkit-col { width: 23%; }
.row-detail-table .span-col { width: 7%; }
.row-detail-table .aman-col { width: 9%; }
.row-detail-table .waspada-col { width: 10%; }
.row-detail-table .kritis-col { width: 17%; }
.row-detail-table .priority-col { width: 5%; }
.row-detail-table .tidak-aman-col { width: 14%; }
.row-detail-table th { vertical-align: middle; }
.row-detail-table thead th:not(:first-child) { text-align: center; }
.row-detail-table thead th.num { text-align: right; }
.row-detail-table thead tr:first-child th { padding-top: 8px; padding-bottom: 3px; }
.row-detail-table thead tr:last-child th { padding-top: 3px; padding-bottom: 7px; border-top: 1px solid var(--line); }
.row-detail-table .risk-cell, .row-detail-table .priority-cell { text-align: center; font: 700 10.5px 'DM Mono', monospace; white-space: nowrap; vertical-align: middle; }
.row-detail-table .risk-cell small { display: block; margin-top: 2px; color: var(--muted); font: 500 9.5px 'DM Mono', monospace; }
.row-detail-table th.risk-safe { color: var(--row-aman); }
.row-detail-table th.risk-warning { color: #b56f00; }
.row-detail-table th.risk-critical { color: var(--row-kritis); }
.row-detail-table th.risk-critical small { display: block; color: var(--muted); font-weight: 500; }
.row-detail-table th.risk-not-safe { color: var(--ink); }
.row-detail-table .risk-group-head { text-align: center; letter-spacing: .45px; }
.row-detail-table .priority-head, .row-detail-table .priority-cell { text-align: center; color: var(--muted); }
.row-detail-table .priority-cell { font-weight: 600; }
.priority-ultg-group { margin-top: 10px; }
.priority-ultg-group:first-of-type { margin-top: 12px; }
.priority-table-controls { display: grid; grid-template-columns: minmax(230px, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--line); background: #f8fbff; }
.priority-table-controls .row-analysis-filter { grid-template-columns: auto minmax(0, 1fr); }
.priority-filter-types { display: flex; align-items: center; gap: 8px; }
.priority-filter-types > span { color: var(--blue-strong); font: 700 9.5px 'DM Mono', monospace; letter-spacing: .35px; text-transform: uppercase; }
.priority-filter-choices { display: flex; gap: 5px; }
.priority-filter-choice { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font: 700 10px 'DM Mono', monospace; cursor: pointer; }
.priority-filter-choice:has(input:checked) { border-color: var(--blue-strong); background: var(--blue-soft); color: var(--blue-strong); }
.priority-filter-choice input { accent-color: var(--blue-strong); }
.priority-export-btn { min-height: 34px; padding: 0 11px; border: 1px solid var(--blue-strong); border-radius: 8px; background: var(--blue-strong); color: #fff; font: 800 10px 'DM Mono', monospace; letter-spacing: .2px; cursor: pointer; white-space: nowrap; }
.priority-export-btn:hover { background: #003f7f; }
.priority-export-btn span { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 999px; background: #ffffff2b; }
.priority-span-table { min-width: 760px; }
.row-analysis-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(90deg, #f8fbff, #fff); }
.row-analysis-toolbar strong { display: block; color: var(--ink); font: 800 12px Manrope, sans-serif; }
.row-analysis-toolbar span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.row-analysis-toolbar-primary { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(300px, 1.25fr) auto; gap: 16px; padding: 10px 14px; }
.row-analysis-intro { min-width: 0; }
.row-analysis-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; }
.row-analysis-filter > span, .row-analysis-mode > span { margin: 0; color: var(--blue-strong); font: 700 9.5px 'DM Mono', monospace; letter-spacing: .35px; text-transform: uppercase; }
.row-analysis-filter select { width: 100%; min-height: 36px; padding: 0 32px 0 10px; border: 1px solid #bfd0e6; border-radius: 8px; background: #fff; color: var(--ink); font: 700 11px 'DM Mono', monospace; outline: none; }
.row-analysis-filter select:focus { border-color: var(--blue-strong); box-shadow: 0 0 0 3px #005baa1c; }
.row-analysis-mode { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.row-analysis-mode > span { flex-shrink: 0; }
.row-ultg-chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.row-ultg-chart { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdff; }
.row-ultg-chart-title { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 9px; color: var(--blue-strong); font-size: 10.5px; }
.row-ultg-chart-title span { flex-shrink: 0; color: var(--muted); font: 600 9.5px 'DM Mono', monospace; }
.row-ultg-chart .bar-row { grid-template-columns: minmax(55px, .8fr) minmax(42px, 1.3fr) auto; gap: 5px; margin: 5px 0; }
.row-ultg-chart .bar-label, .row-ultg-chart .bar-value { font-size: 9.5px; }
.row-mini-donut-row { justify-content: space-evenly; }
.row-mini-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; color: var(--muted); font-size: 10.5px; }
.row-mini-legend span { display: inline-flex; align-items: center; gap: 5px; }
.row-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.row-legend-dot.aman { background: var(--row-aman); }
.row-legend-dot.waspada { background: var(--row-waspada); }
.row-legend-dot.kritis { background: var(--row-kritis); }
.compact-table th.narrow, .compact-table td.narrow { width: 70px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .compact-table th { padding: 4px 5px 3px; font-size: 8.5px; }
  .compact-table td { padding: 3px 5px; font-size: 10.5px; }
}

/* Mobile ROW detail: retain the audit-grade breakdown without cramming it
   into unreadable cards. Horizontal motion is intentional; the circuit stays
   visible as the contextual anchor while the risk/priorities are compared. */
@media (max-width: 700px) {
  .chart-card { padding: 14px; border-radius: 12px; }
  .chart-card h2 { font-size: 14px; }
  .chart-card-sub { font-size: 11px; line-height: 1.45; }
  .table-wrap { margin: 0 -2px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #b8c6d8 transparent; }
  .row-detail-table { min-width: 820px; }
  .row-detail-table .sirkit-col { width: 180px; }
  .row-detail-table .span-col { width: 58px; }
  .row-detail-table .aman-col { width: 74px; }
  .row-detail-table .waspada-col { width: 82px; }
  .row-detail-table .kritis-col { width: 130px; }
  .row-detail-table .priority-col { width: 56px; }
  .row-detail-table .tidak-aman-col { width: 92px; }
  .row-detail-table th { font-size: 8px; letter-spacing: .15px; }
  .row-detail-table td { padding-top: 7px; padding-bottom: 7px; font-size: 10.5px; }
  .row-detail-table .risk-cell, .row-detail-table .priority-cell { font-size: 10px; }
  .row-detail-table .risk-cell small { font-size: 9px; }
  .row-detail-table thead tr:first-child th:first-child,
  .row-detail-table tbody td:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); box-shadow: 8px 0 12px -12px rgba(8,29,67,.55); }
  .row-detail-table thead tr:first-child th:first-child { z-index: 4; background: var(--card); }
  .collapsible-head { min-height: 44px; padding: 9px 10px; }
  .collapsible-head-label { font-size: 10.5px; }
  .collapsible-head-right { gap: 6px; }
  .collapsible-count { font-size: 9.5px; }
  .collapsible-count { max-width: 116px; overflow: hidden; text-overflow: ellipsis; }
  .row-analysis-toolbar { align-items: flex-start; flex-direction: column; padding: 11px 12px; }
  .row-analysis-toolbar .view-toggle { width: 100%; }
  .row-analysis-toolbar .view-toggle-btn { flex: 1; min-height: 36px; padding: 7px 8px; font-size: 10px; }
  .row-analysis-toolbar-primary { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .priority-table-controls { grid-template-columns: 1fr; gap: 9px; }
  .priority-filter-types { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .priority-filter-choices { display: grid; grid-template-columns: repeat(4, 1fr); }
  .priority-filter-choice { justify-content: center; min-height: 34px; }
  .priority-export-btn { width: 100%; min-height: 38px; }
  .row-analysis-filter { grid-template-columns: 38px minmax(0, 1fr); width: 100%; }
  .row-analysis-filter select { min-height: 38px; font-size: 10.5px; }
  .row-analysis-mode { display: grid; grid-template-columns: 1fr; gap: 5px; width: 100%; }
  .row-ultg-chart-grid { grid-template-columns: 1fr; gap: 8px; }
  .row-ultg-chart { padding: 9px; }
  .row-ultg-chart .bar-row { grid-template-columns: minmax(68px, .85fr) minmax(58px, 1.35fr) auto; }
  .row-mini-donut-row { gap: 16px 10px; }
  .mini-donut-item { min-width: 88px; font-size: 10px; }
  .mini-donut-item .donut-wrap svg { width: 94px; height: 94px; }
}

/* ---------- Segmented view toggle (cloned from hotspot-watch's Report
   Charts .view-toggle/-btn) ---------- */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.view-toggle-btn { padding: 7px 12px; border: 0; background: #fff; color: var(--muted); font: 700 10.5px 'DM Mono', monospace; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; }
.view-toggle-btn.active { background: var(--blue-strong); color: #fff; }
.view-toggle-btn:not(.active):hover { background: var(--blue-soft); color: var(--blue-strong); }

/* ---------- Performa PGP page ---------- */
.pgp-page h1, .pgp-page h2, .pgp-page h3 { font-weight: 800; }
.pgp-performa-page .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.pgp-pentanahan-page .stat-row, .pgp-lingkungan-page .stat-row, .pgp-kendala-page .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.pgp-page .stat-card { min-height: 96px; padding: 12px 14px; }
.pgp-analysis-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, .75fr) minmax(215px, 1fr) minmax(175px, .8fr) auto;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.pgp-analysis-toolbar:not(.has-month) { grid-template-columns: minmax(190px, .85fr) minmax(240px, 1fr) auto; }
.pgp-analysis-toolbar .row-analysis-intro strong { font-size: 12.5px; }
.pgp-analysis-toolbar .row-analysis-intro span { font-size: 10.5px; }
.pgp-analysis-modes { display: grid; grid-template-columns: auto auto; align-items: center; gap: 10px; }
.pgp-analysis-modes .row-analysis-mode { gap: 6px; }
.pgp-analysis-modes .view-toggle-btn { padding: 7px 9px; }
.pgp-page .chart-card-sub { font-weight: 700; }
.pgp-page .compact-table th, .pgp-page .data-table th { font-weight: 800; }
.pgp-page .detail-ultg-heading { font-weight: 800; }
/* Small multiple of donuts (one per ULTG) sharing one legend below them,
   instead of each donut carrying its own — see the "Per ULTG" view of
   Sebaran Performa PGP. */
.mini-donut-row { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 12px 8px; }
.mini-donut-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 108px; }
.mini-donut-item .donut-wrap svg { width: 108px; height: 108px; }

@media (max-width: 1080px) {
  .pgp-analysis-toolbar, .pgp-analysis-toolbar:not(.has-month) { grid-template-columns: minmax(180px, 1fr) minmax(210px, 1fr) auto; }
  .pgp-analysis-toolbar .row-analysis-intro { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .pgp-page .stat-row { grid-template-columns: 1fr; gap: 8px; }
  .pgp-page .stat-card { min-height: 0; }
  .pgp-analysis-toolbar, .pgp-analysis-toolbar:not(.has-month) { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .pgp-analysis-toolbar .row-analysis-intro { grid-column: auto; }
  .pgp-analysis-toolbar .row-analysis-filter { grid-template-columns: 52px minmax(0, 1fr); }
  .pgp-analysis-modes { grid-template-columns: 1fr; gap: 8px; }
  .pgp-analysis-modes .row-analysis-mode { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; }
  .pgp-analysis-modes .view-toggle { width: 100%; }
  .pgp-analysis-modes .view-toggle-btn { flex: 1; min-height: 36px; }
}

/* Click-to-copy PGP phone number — same pattern as hotspot-watch's
   .tower-copy-btn (click copies via navigator.clipboard, hover reveals the
   value via its title tooltip, a brief "Tersalin ✓" swap confirms the
   copy). See the delegated click handler in app-pgp.js. */
.pgp-copy-btn { display: inline; border: 0; background: none; padding: 0; margin: 0; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.pgp-copy-btn:hover { color: var(--blue-strong); text-decoration: underline; }
.pgp-copy-btn.copied { color: var(--safe); }
.pgp-copy-btn:disabled { color: inherit; cursor: default; }
.pgp-copy-btn:disabled:hover { color: inherit; text-decoration: none; }
.mini-donut-item-label { font: 700 11px Manrope, sans-serif; color: var(--ink); text-align: center; }

/* PGP - Kendala's "Daftar Tower" cell — hovering the tower list reveals a
   "Lihat Kendala" hint button; clicking it opens .kendala-popover (built/
   positioned in app-pgp-kendala.js) with that PGP's specific obstacle-
   description breakdown. */
.tower-list-wrap { position: relative; }
.tower-kendala-hint { display: none; margin-left: 8px; border: 0; background: var(--blue-strong); color: #fff; font: 700 10.5px Manrope, sans-serif; padding: 2px 8px; border-radius: 10px; cursor: pointer; vertical-align: middle; white-space: nowrap; }
.tower-list-wrap:hover .tower-kendala-hint, .tower-list-wrap:focus-within .tower-kendala-hint { display: inline-block; }
.kendala-popover { position: absolute; z-index: 40; max-width: 360px; min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 12px 14px; }
.kendala-popover-head { font: 700 11.5px Manrope, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.kendala-popover-tower-label { font: 700 11px 'DM Mono', monospace; color: var(--blue-strong); margin: 10px 0 4px; }
.kendala-popover-tower-label:first-of-type { margin-top: 0; }
.kendala-popover-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.kendala-popover-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; }
.kendala-popover-text { color: var(--ink); line-height: 1.3; }
.kendala-popover-count { font: 700 11.5px 'DM Mono', monospace; color: var(--muted); white-space: nowrap; flex: none; }

/* "Kolom" column-visibility dropdown — cloned from hotspot-watch's
   inspection-report Target Inspeksi table (.column-toggle*). */
.column-toggle { position: relative; }
.column-toggle-btn { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; color: var(--ink); font: 700 12px Manrope, sans-serif; cursor: pointer; }
.column-toggle-btn:hover { background: var(--blue-soft); }
.column-toggle-btn svg { width: 12px; height: 12px; transition: transform .15s ease; }
.column-toggle[data-open="true"] .column-toggle-btn svg { transform: rotate(180deg); }
.column-toggle-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 10px 24px rgba(8,29,67,.16); }
.column-toggle-panel[hidden] { display: none; }
.column-toggle-option { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; color: var(--ink); font: 500 12px 'DM Mono', monospace; cursor: pointer; }
.column-toggle-option:hover { background: var(--paper); }
.column-toggle-option input { margin: 0; accent-color: var(--blue-strong); }

/* ---------- Mood emoji ---------- */
.mood { font-size: 15px; }

/* ---------- Map toggle chips (page 3) ---------- */
.toggle-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: 600 11px 'DM Mono', monospace; color: var(--ink); -webkit-user-select: none; user-select: none; }
.toggle-chip input { margin: 0; accent-color: var(--teal); cursor: pointer; }
.toggle-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.empty-note { color: var(--muted); font-size: 12.5px; padding: 20px; text-align: center; }

/* ---------- Global bottom bar ---------- */
/* Persistent fixed footer injected by nav.js on every page, matching the
   sister Hotspot Watch app (D:\Learn\AI1\hotspot-watch-cloudflare\nav.js). */
.global-bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; flex-direction: column; box-shadow: 0 -2px 10px rgba(8,29,67,.12); }
.global-bottom-bar-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 22px; background: var(--card); border-top: 1px solid var(--line); color: var(--muted); font: 500 11px 'DM Mono', monospace; }
.global-bottom-bar-info strong { color: var(--ink); }
.global-bottom-bar-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 22px; background: linear-gradient(90deg, var(--blue-dark), var(--blue-strong)); color: #eaf3ff; font: 600 11px 'DM Mono', monospace; }
.global-bottom-bar-social { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.global-bottom-bar-follow { text-transform: uppercase; letter-spacing: .4px; opacity: .85; }
.global-bottom-bar-icons { display: flex; align-items: center; gap: 8px; }
.global-bottom-bar-icons svg { width: 15px; height: 15px; opacity: .92; }
.global-bottom-bar-org { display: flex; align-items: center; gap: 7px; font-weight: 700; white-space: nowrap; }
.global-bottom-bar-org img { width: 16px; height: 16px; border-radius: 3px; }
.global-bottom-bar-tagline { opacity: .85; white-space: nowrap; }