/* Dashboard Kualitas Udara (/data/dashboard-ku).
   Kiosk layout: header / filterbar / [stats | map | tables] / footer,
   fills the viewport. Colors use the app.css variables so light/dark
   themes flip automatically; header & filterbar stay dark brand bars. */

.hd-shell {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 380px;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "header  header  header"
        "filter  filter  filter"
        "left    map     right"
        "mtg     mtg     mtg"
        "footer  footer  footer";
    overflow: hidden;
    max-width: 100%;
    background: var(--bg-color);
    color: var(--text-color);
}

/* Satellite panel now lives inside hd-left as a narrow card. */
.hd-satellite-panel.hd-sat-left {
    padding: 0.7rem 0.8rem;
}
.hd-satellite-panel.hd-sat-left .hd-sat-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}
.hd-satellite-panel.hd-sat-left .hd-sat-dock-head .hd-card-label {
    margin-bottom: 0;
}

.hd-asmc-playback {
    border-color: color-mix(in srgb, #0f766e 35%, var(--border-color, #e2e8f0));
}

.hd-legend-line-asmc {
    display: inline-block;
    width: 18px;
    height: 0;
    border-top: 3px solid #0f766e;
    border-radius: 2px;
}
.hd-forecast-run-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}
.hd-forecast-run-row select {
    flex: 1;
    min-width: 0;
    font-size: 0.68rem;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg-alt);
    color: var(--text-color);
}
/* Datetime inisialisasi CAMS — kini tampil di kartu hd-update-note
   sebagai baris hd-prov-line (id elemen tidak berubah, map-forecast.js
   updateForecastInit tetap mengisi nilainya). */
#hd-forecast-init-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Ikon PM2.5/PM10 — SVG inline dengan fill currentColor sehingga
   mengikuti tema terang/gelap (img tidak mewarisi warna teks). */
.hd-btn-sat .hd-sat-icon .hd-sat-pm-icon {
    width: 20px;
    height: 14px;
}

/* Step 8: collapse panel benar-benar melebarkan peta (ganti kolom grid). */
.hd-shell.hd-left-collapsed { grid-template-columns: 2.2rem minmax(0, 1fr) 380px; }
.hd-shell.hd-right-collapsed { grid-template-columns: 300px minmax(0, 1fr) 2.2rem; }
.hd-shell.hd-left-collapsed.hd-right-collapsed { grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem; }

/* ============================================================
   HEADER
   ============================================================ */
.hd-header {
    grid-area: header;
    position: relative;
    z-index: 20; /* dropdown menu harus di atas filterbar di bawahnya */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(120deg, #0b1220 0%, #0f172a 55%, #13233d 100%);
    color: #fff;
    border-bottom: 3px solid var(--primary-color);
}

.hd-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.hd-logo-link {
    flex-shrink: 0;
    border-radius: 12px;
    transition: transform 0.12s ease;
}

.hd-logo-link:hover {
    transform: scale(1.05);
}

.hd-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    padding: 3px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    flex-shrink: 0;
}

.hd-org {
    font-size: 0.64rem;
    letter-spacing: 0.09em;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-title {
    font-size: 1.18rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-title-short {
    display: none;
}

.hd-sub {
    font-size: 0.7rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-header-right {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}

.hd-clock {
    text-align: right;
    line-height: 1.15;
    margin-right: 0.3rem;
}

.hd-clock-time {
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.hd-clock-date {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.72);
}

.hd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 10px;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #333333);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.hd-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.hd-btn:active {
    transform: scale(0.94);
}

.hd-btn svg {
    width: 19px;
    height: 19px;
}

/* ============================================================
   FILTER BAR — wilayah (polygon) + rentang tanggal
   ============================================================ */
.hd-filterbar {
    grid-area: filter;
    position: relative;
    z-index: 15; /* dropdown menu di dalamnya harus di atas peta */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.45rem 1.25rem;
    background: var(--header-bg);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    max-width: 100%;
}

.hd-filterbar-group {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.hd-filterbar-sep {
    width: 1px;
    align-self: stretch;
    background: var(--border-color, #e2e8f0);
    flex-shrink: 0;
}

/* Tombol aksi (tema, layar penuh, menu) — menempel kanan pada desktop */
.hd-mobile-map-actions {
    display: none;
}

.hd-map-overlay-controls {
    position: absolute;
    inset: 0;
    z-index: 500;
    pointer-events: none;
}

.hd-map-overlay-group {
    position: absolute;
    display: flex;
    gap: 0.35rem;
    pointer-events: auto;
}

.hd-map-overlay-zoom { top: 0.75rem; left: 0.75rem; }
.hd-map-overlay-layers { top: 0.75rem; right: 0.75rem; }

.hd-map-overlay-controls .hd-map-icon-btn {
    background: var(--header-bg, #fff);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
}

.hd-map-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--card-bg);
    color: var(--text-color);
}

.hd-map-icon-btn svg { width: 16px; height: 16px; }
.hd-map-icon-btn .hd-sensor-icon { width: 17px; height: 17px; }
.hd-map-icon-btn.is-active { color: var(--primary-color); border-color: var(--primary-color); }
.hd-map-icon-btn:disabled { opacity: .45; }

/* Tab Peta / Analisis — sakelar mode tampilan panel tengah */
.hd-tab-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--card-bg-alt, #f1f5f9);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 9px;
    flex-shrink: 0;
}

.hd-tab-btn {
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    border-radius: 7px;
    padding: 0.3rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.hd-tab-btn:hover {
    color: var(--text-color, #0f172a);
}

.hd-tab-btn.active {
    background: var(--primary-color, #1a73e8);
    color: #fff;
}

.hd-filter-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
}

.hd-filter-field select,
.hd-filter-field input {
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 7px;
    background: var(--input-bg, #ffffff);
    color: var(--text-color, #333333);
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.25;
    min-height: 32px;
}

.hd-filter-field select {
    max-width: 210px;
    cursor: pointer;
}

.hd-filter-field select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.hd-filter-field option,
.hd-filter-field optgroup {
    background: var(--input-bg, #ffffff);
    color: var(--text-color, #333333);
}

[data-theme="dark"] .hd-filter-field input {
    color-scheme: dark;
}

.hd-range-btn {
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--primary-color);
    color: #fff;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.hd-range-btn:hover {
    filter: brightness(1.15);
}
.hd-range-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    filter: none;
}

/* Step 15: date picker modern + preset chips. */
.hd-filter-field input[type="date"] {
    min-height: 34px;
    border-radius: 9px;
    padding: 0.35rem 0.6rem;
    font-variant-numeric: tabular-nums;
}
.hd-filter-field input[type="date"]:focus-visible {
    outline: 2px solid var(--primary-color, #1a73e8);
    outline-offset: 1px;
    border-color: var(--primary-color, #1a73e8);
}
.hd-filter-field input.hd-input-error {
    border-color: #ef4444;
}
.hd-range-presets {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.3rem;
    padding-bottom: 1px;
}
.hd-range-chip {
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg-alt, #f1f5f9);
    color: var(--text-muted, #64748b);
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.hd-range-chip:hover {
    border-color: var(--primary-color, #1a73e8);
    color: var(--primary-color, #1a73e8);
}

.hd-range-reset {
    background: var(--card-bg, #ffffff);
    border-color: var(--input-border, #d1d5db);
    color: var(--text-color, #333333);
}

.hd-range-reset:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    filter: none;
}

.hd-filter-error {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.72rem;
    color: #ef4444;
}

/* ============================================================
   LEFT PANEL — stat cards
   ============================================================ */
/* Step 14: toggle panel — hit area 2rem (kiosk), ikon berputar
   sesuai state, focus ring keyboard. */
.hd-panel-toggle {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.15s ease;
}
.hd-panel-toggle:hover {
    background: var(--secondary-color);
    color: var(--text-color);
}
.hd-panel-toggle:focus-visible {
    outline: 2px solid var(--primary-color, #1a73e8);
    outline-offset: 2px;
}
.hd-panel-toggle svg {
    transition: transform 0.18s ease;
}
.hd-left.hd-collapsed .hd-panel-toggle svg,
.hd-right.hd-collapsed .hd-panel-toggle svg {
    transform: rotate(180deg);
}
.hd-panel-toggle-left {
    right: auto;
    left: 0.6rem;
}

/* State terlipat: panel menyempit menjadi strip, konten disembunyikan */
.hd-left.hd-collapsed,
.hd-right.hd-collapsed {
    overflow: hidden;
    padding: 0;
    border: none;
}
.hd-left.hd-collapsed {
    grid-area: left;
    min-width: 0;
    width: 2.2rem;
}
.hd-right.hd-collapsed {
    grid-area: right;
    min-width: 0;
    width: 2.2rem;
}
.hd-left.hd-collapsed > *:not(.hd-panel-toggle),
.hd-right.hd-collapsed > *:not(.hd-panel-toggle) {
    display: none !important;
}
.hd-left.hd-collapsed .hd-panel-toggle,
.hd-right.hd-collapsed .hd-panel-toggle {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    margin: 0.4rem auto;
}

.hd-left {
    grid-area: left;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.85rem;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    background: var(--card-bg-alt);
}

.hd-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.hd-card-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
    line-height: 1.35;
}

.hd-total-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.hd-card-caption {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.hd-cert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px solid transparent;
    padding: 0.7rem 1rem;
}

.hd-cert .hd-cert-value {
    font-size: 1.55rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hd-cert-high {
    border-left-color: #ef4444;
}

.hd-cert-high .hd-cert-value {
    color: #ef4444;
}

.hd-cert-medium {
    border-left-color: #eab308;
}

.hd-cert-medium .hd-cert-value {
    color: #ca8a04;
}

.hd-cert-low {
    border-left-color: #22c55e;
}

.hd-cert-low .hd-cert-value {
    color: #16a34a;
}

/* Compact creative hero: total + 3 confidence chips in one card. */
.hd-hotspot-hero .hd-total-value {
    font-size: 2.1rem;
}
.hd-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.45rem;
}
.hd-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--card-bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.15rem 0.55rem 0.15rem 0.4rem;
    font-variant-numeric: tabular-nums;
}
.hd-hero-chip strong {
    font-size: 0.78rem;
    font-weight: 800;
}
.hd-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hd-hero-chip.hd-cert-high .hd-hero-dot { background: #ef4444; }
.hd-hero-chip.hd-cert-high strong { color: #ef4444; }
.hd-hero-chip.hd-cert-medium .hd-hero-dot { background: #eab308; }
.hd-hero-chip.hd-cert-medium strong { color: #ca8a04; }
.hd-hero-chip.hd-cert-low .hd-hero-dot { background: #22c55e; }
.hd-hero-chip.hd-cert-low strong { color: #16a34a; }

.hd-update-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.hd-attribution-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Kartu atribusi dapat diklik untuk membuka modal rincian. */
.hd-attribution-trigger {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}

.hd-attribution-trigger:hover .hd-attribution-text,
.hd-attribution-trigger:focus-visible .hd-attribution-text {
    color: var(--primary-color, #2563eb);
}

.hd-attribution-trigger:focus-visible {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

.hd-attribution-text {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ============================================================
   MODAL ATRIBUSI DATA — rincian sumber per lapisan
   ============================================================ */
.hd-attribution-modal {
    position: fixed;
    inset: 0;
    z-index: 2300;
    /* Flex + margin:auto pada kartu: terpusat saat muat, dan backdrop
       bisa di-scroll saat kartu lebih tinggi dari layar (mobile) —
       place-items:center memotong bagian atas kartu tinggi. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.5rem, 2vw, 1rem);
    overflow-y: auto;
    background: rgba(15, 23, 42, .48);
}

.hd-attribution-card-modal {
    margin: auto;
    width: min(560px, 100%);
    max-height: min(680px, calc(100dvh - 2rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    background: var(--card-bg, #fff);
    color: var(--text-color, #0f172a);
    box-shadow: 0 20px 55px rgba(15, 23, 42, .28);
}

.hd-attribution-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.hd-attribution-header h2 {
    margin: 0;
    font-size: .95rem;
}

.hd-attribution-body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .7rem .8rem;
    overflow-y: auto;
    min-height: 0;
}

.hd-attribution-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .45rem .55rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--card-bg-alt, #f8fafc);
}

.hd-attribution-source {
    font-size: .68rem;
    font-weight: 800;
    color: var(--text-color, #0f172a);
}

.hd-attribution-desc {
    font-size: .64rem;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
    overflow-wrap: anywhere;
}

.hd-attribution-footer {
    display: flex;
    justify-content: flex-end;
    padding: .6rem .8rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

@media (max-width: 575.98px) {
    .hd-attribution-card-modal { width: 100%; max-height: calc(100dvh - 1rem); border-radius: 12px; }
}

.hd-volcano-source {
    font-size: 0.64rem;
    color: var(--text-muted);
}

/* --- Legend --- */
.hd-legend {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    font-size: 0.76rem;
}

.hd-legend-sub {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0.45rem 0 0.15rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px dashed var(--border-color);
}

.hd-legend .hd-legend-sub:first-child {
    margin-top: 0;
    border-top: 0;
}

/* Satuan pada judul legend tidak di-uppercase — "µg/m³" menjadi
   "µG/M³" bila ikut text-transform induk dan menyesatkan pembaca. */
.hd-legend-sub .hd-legend-unit {
    text-transform: none;
    letter-spacing: normal;
}

.hd-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hd-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Dark mode: outline terang agar chip gelap (hitam/Berbahaya)
   tetap terlihat pada panel legenda gelap. */
[data-theme="dark"] .hd-legend-dot {
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .55);
}

/* ============================================================
   MAP
   ============================================================ */
.hd-map-wrap {
    grid-area: map;
    position: relative;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    background: #0b1220;
}

/* MapLibre is absolutely positioned inside the map grid item. Keep its own
   canvas, controls and popups clipped to this cell (especially on mobile,
   where the grid row is shorter than the old fixed map minimum height). */
.hd-map-wrap > #dashboard-maplibre {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    z-index: 1;
    background: transparent;
}

.hd-map-wrap > #dashboard-maplibre .maplibregl-canvas-container,
.hd-map-wrap > #dashboard-maplibre .maplibregl-canvas {
    max-width: 100%;
    max-height: 100%;
}

/* Legacy Leaflet canvases (forecast and wind velocity) are still the native
   renderers for these overlays. Keep only their transparent overlay panes
   above MapLibre; never stack a second opaque Leaflet basemap over it. */

/* Forecast popups are DOM overlays above MapLibre. Re-enable hit testing for
   the popup itself only; the full-size Leaflet panes remain click-through. */

.hd-map-note {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    max-width: min(90%, 32rem);
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Hide both map engines even when MapLibre finishes loading after tab selection. */
.hd-map-wrap.hd-charts-active > #dashboard-maplibre {
    display: none;
}

/* Step 13 (backup): chrome peta disembunyikan saat tab Analisis. */
.hd-map-wrap.hd-charts-active .hd-map-overlay-controls {
    display: none;
}

.hd-map-wrap.hd-charts-active .hd-satellite-panel {
    display: none;
}

/* ============================================================
   PANEL ANALISIS (tab "Analisis") — grafik hotspot historis
   ============================================================ */
.hd-charts-container {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-color, #f8fafc);
    padding: 1.25rem;
}

.hd-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.hd-chart-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    padding: 1rem 1.1rem 0.9rem;
    min-width: 0;
}

.hd-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hd-chart-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary, #0f172a);
}

.hd-chart-dl {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg-alt, #f8fafc);
    color: var(--text-muted, #64748b);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.hd-chart-dl:hover {
    border-color: var(--primary-color, #1a73e8);
    color: var(--primary-color, #1a73e8);
    background: var(--card-bg, #ffffff);
}

.hd-chart-canvas-wrap {
    position: relative;
    height: 300px;
}

.hd-charts-error {
    color: var(--text-muted, #64748b);
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.85rem;
}

/* ============================================================
   METEOGRAM — prakiraan per-jam stasiun terpilih (panel bawah)
   ============================================================ */
.hd-mtg-panel {
    grid-area: mtg;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem 1.25rem 0.65rem;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    min-height: 0;
}

.hd-mtg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.hd-mtg-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.hd-mtg-toggle {
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: .25rem .55rem;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: .7rem;
    cursor: pointer;
}

.hd-mtg-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}

.hd-mtg-hint {
    font-size: 0.66rem;
    color: var(--text-muted);
}

.hd-mtg-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1.1rem 0;
}

.hd-mtg-body {
    position: relative;
    min-height: 0;
}

/* Baris label hari + ikon cuaca di atas area grafik */
.hd-mtg-days,
.hd-mtg-icons,
.hd-mtg-seps {
    position: relative;
    height: 20px;
    margin-bottom: 2px;
}

.hd-mtg-day {
    position: absolute;
    top: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-left: 1px dashed var(--border-color);
    overflow: hidden;
    white-space: nowrap;
}

.hd-mtg-day:first-child {
    border-left-color: transparent;
}

.hd-mtg-icon {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    pointer-events: auto;
}

.hd-mtg-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hd-mtg-icon img { display: none; }

.hd-mtg-seps {
    height: 0;
    margin-bottom: 0;
}

.hd-mtg-sep {
    position: absolute;
    top: -40px; /* menembus baris hari & ikon */
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--border-color);
    pointer-events: none;
}

.hd-mtg-canvas-wrap {
    position: relative;
    height: clamp(100px, 14vh, 160px);
}

.hd-mtg-tooltip {
    position: absolute;
    z-index: 5;
    max-width: min(260px, calc(100% - 16px));
    padding: .45rem .6rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    background: rgba(15,23,42,.94);
    color: #e2e8f0;
    font-size: .68rem;
    line-height: 1.45;
    pointer-events: none;
}

.hd-mtg-tooltip-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
}

.hd-mtg-tooltip-head img { width: 24px; height: 24px; }

/* Tooltip meteogram — layout kompak, ikon cuaca di header, PM2.5 inline */
.hd-mtg-tooltip-shell {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.hd-mtg-tooltip-top {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
}

.hd-mtg-tooltip-ico {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.hd-mtg-tooltip-main {
    min-width: 0;
}

.hd-mtg-tooltip-kicker {
    font-size: .74rem;
    font-weight: 700;
    color: #fff;
}

.hd-mtg-tooltip-time {
    font-size: .62rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.hd-mtg-tooltip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem .5rem;
}

.hd-mtg-tooltip-grid span {
    display: block;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
}

.hd-mtg-tooltip-grid strong {
    font-size: .68rem;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}

.hd-mtg-tooltip-chip-row {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.hd-mtg-tooltip-chip-label {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
}

.hd-mtg-tooltip-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .08rem .45rem;
    border-radius: 999px;
    background: #334155;
    color: #e2e8f0;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.3;
}

.hd-mtg-tooltip-chip strong { color: #fff; }
.hd-mtg-tooltip-chip.cat-0 { background: #00ff00; }
.hd-mtg-tooltip-chip.cat-1 { background: #0000ff; }
.hd-mtg-tooltip-chip.cat-2,
.hd-mtg-tooltip-chip.cat-2 strong { background: #ffff00; color: #111; }
.hd-mtg-tooltip-chip.cat-3 { background: #ff0000; }
.hd-mtg-tooltip-chip.cat-4 { background: #000; border: 1px solid #f8fafc; }

.hd-mtg-tooltip-footer {
    font-size: .58rem;
    color: #94a3b8;
}

/* ============================================================
   KOTA/KABUPATEN TERDAMPAK — panel prakiraan PM2.5 (map-forecast.js)
   ============================================================ */
.hd-affected-panel { display: block; }
.hd-affected-head {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: .5rem;
}
.hd-affected-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 0;
}
.hd-affected-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
}
.hd-affected-time {
    font-size: .62rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.hd-affected-list {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-height: 0;
    overflow: visible;
}
.hd-affected-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .4rem;
    padding: .35rem .5rem;
    border-radius: 8px;
    background: var(--card-bg-alt);
    border: 1px solid var(--border-color);
    font-size: .7rem;
}
.hd-affected-item-name {
    font-weight: 600;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hd-affected-item-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.hd-affected-item-cat {
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.hd-affected-item-cat.cat-0 { background: #00ff00; color: #111; }
.hd-affected-item-cat.cat-1 { background: #0000ff; color: #fff; }
.hd-affected-item-cat.cat-2 { background: #ffff00; color: #111; }
.hd-affected-item-cat.cat-3 { background: #ff0000; color: #fff; }
.hd-affected-item-cat.cat-4 { background: #000; color: #fff; border: 1px solid #f8fafc; }
/* Step 1D/7: baris kota expandable (pola region-row hotspot). */
.hd-affected-item-main {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}
.hd-affected-item small { font-weight: 400; color: var(--text-muted); }
.hd-fc-city-row .toggle-icon {
    display: inline-block;
    font-size: .6rem;
    color: var(--text-muted);
    transition: transform .15s ease;
    flex-shrink: 0;
}
.hd-fc-city-row[aria-expanded="true"] .toggle-icon { transform: rotate(90deg); }
.hd-fc-city-detail {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .4rem .5rem .45rem 1.1rem;
    font-size: .62rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.hd-fc-city-stats { display: flex; flex-wrap: wrap; gap: .15rem .6rem; }
.hd-fc-city-stats strong { color: var(--text-color); }
.hd-fc-city-dur strong, .hd-fc-city-span strong, .hd-fc-city-peak { color: var(--text-color); }
/* Step 7: sorter + show-all toggle. */
.hd-affected-tools {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
}
.hd-affected-sort {
    flex: 1;
    min-height: 28px;
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 7px;
    background: var(--input-bg, #fff);
    color: var(--text-color);
    font-size: .66rem;
    padding: .2rem .4rem;
}
.hd-affected-all {
    border: none;
    background: none;
    color: var(--primary-color, #1a73e8);
    font-size: .64rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    padding: .2rem .1rem;
}
.hd-affected-all:hover { text-decoration: underline; }
.hd-affected-item-val {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: .62rem;
}
.hd-affected-empty {
    padding: .6rem .4rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .7rem;
}

/* ============================================================
   SIGMET POPUP KOMPAK — hero badge + stat mini (map-sigmet.js)
   ============================================================ */
/* Popup gabungan peringatan + SIGMET (map-warning.js + map-sigmet.js):
   memakai gaya popup SIGMET agar kartu kedua sumber konsisten. */
.hd-warn-combined-divider {
    border: 0;
    border-top: 1px dashed var(--border-color, #e2e8f0);
    margin: .6rem 0;
}
.hd-sigmet-pop { font-size: .68rem; }
.hd-sigmet-hero {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .35rem;
}
.hd-sigmet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 1.5rem;
    padding: 0 .4rem;
    border-radius: 8px;
    background: var(--sg, #a855f7);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
}
.hd-sigmet-title {
    font-weight: 800;
    font-size: .74rem;
    color: var(--text-color);
}
.hd-sigmet-read {
    margin: 0 0 .45rem;
    color: var(--text-muted);
    font-size: .66rem;
}
.hd-sigmet-stats {
    display: flex;
    gap: .35rem;
    margin-bottom: .45rem;
}
.hd-sigmet-stats > span {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .05rem;
    background: var(--card-bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .25rem .2rem;
    font-variant-numeric: tabular-nums;
}
.hd-sigmet-stats small {
    font-size: .56rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.hd-sigmet-stats strong { font-size: .68rem; }

/* Popup gabungan: beberapa SIGMET menumpuk di titik klik — kartu
   kedua dst. ditandai badge +N dan dipisah garis putus. */
.hd-sigmet-stack {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.hd-sigmet-divider {
    height: 0;
    margin: .35rem 0;
    border-top: 1px dashed var(--border-color, #e2e8f0);
}

.hd-sigmet-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.1rem;
    padding: 0 .3rem;
    margin-left: auto;
    border-radius: 999px;
    background: var(--card-bg-alt, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-muted, #64748b);
    font-size: .58rem;
    font-weight: 800;
}
/* Tombol raw SIGMET — ikut tema dashboard (token kartu), aksen warna
   bahaya SIGMET. Menimpa gaya oranye .popup-card .detail-btn (map.css)
   yang milik konteks peringatan cuaca, bukan SIGMET. */
.hd-sigmet-popup .hd-sigmet-raw-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: 100%;
    margin-top: .1rem;
    padding: .32rem .5rem;
    background: var(--card-bg-alt);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.hd-sigmet-popup .hd-sigmet-raw-toggle:hover {
    border-color: var(--sg, var(--primary-color, #2563eb));
    color: var(--sg, var(--primary-color, #2563eb));
    background: color-mix(in srgb, var(--sg, var(--primary-color, #2563eb)) 8%, var(--card-bg-alt));
}
.hd-sigmet-popup .hd-sigmet-raw-toggle[aria-expanded="true"] {
    border-color: var(--sg, var(--primary-color, #2563eb));
    color: var(--sg, var(--primary-color, #2563eb));
}
.hd-sigmet-popup .hd-sigmet-raw-toggle:focus-visible {
    outline: 2px solid var(--sg, var(--primary-color, #2563eb));
    outline-offset: 1px;
}
.hd-sigmet-raw {
    white-space: pre-wrap;
    font-size: .62rem;
    margin: .4rem 0 0;
    padding: .4rem .5rem;
    border-radius: 8px;
    background: var(--card-bg-alt);
    border: 1px solid var(--border-color);
    max-height: 160px;
    overflow: auto;
}

/* ============================================================
   AIRPORT POPUP KREATIF — hero + kartu METAR + PM2.5 (map-airport.js)
   ============================================================ */
.hd-ap-hero {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .15rem;
}
.hd-ap-icao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 1.7rem;
    padding: 0 .5rem;
    border-radius: 9px;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .04em;
}
.hd-ap-name { font-weight: 700; font-size: .72rem; }
.hd-ap-sub { font-size: .62rem; color: var(--text-muted); margin-bottom: .4rem; }
.hd-ap-pills { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.hd-ap-metar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .3rem;
    margin-bottom: .4rem;
}
.hd-ap-metar-grid > div {
    background: var(--card-bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: .3rem .35rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.hd-ap-metar-grid small {
    display: block;
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.hd-ap-metar-grid strong { font-size: .7rem; }
.hd-ap-pm { margin-bottom: .4rem; }
.hd-ap-pm-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: .66rem;
    font-weight: 700;
    margin-bottom: .25rem;
}
.hd-ap-pm-now {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.hd-ap-pm-bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.hd-ap-pm-bar {
    flex: 1;
    min-width: 0;
    border-radius: 3px 3px 0 0;
    background: var(--pmc, #22c55e);
    position: relative;
}
.hd-ap-pm-bar.is-now { outline: 2px solid var(--text-color); outline-offset: -1px; }
.hd-ap-pm-x {
    display: flex;
    gap: 3px;
    font-size: .53rem;
    color: var(--text-muted);
    margin-top: .15rem;
    font-variant-numeric: tabular-nums;
}
.hd-ap-pm-x > span { flex: 1; text-align: center; }
.hd-ap-foot { font-size: .6rem; color: var(--text-muted); }

/* Prakiraan cuaca per-jam + PM2.5 (pola station tooltip). */
.hd-ap-wx-title {
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin: .1rem 0 .3rem;
}
.hd-ap-wx-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .3rem;
    margin-bottom: .45rem;
}
.hd-ap-wx-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    background: var(--card-bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: .35rem .2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.hd-ap-wx-cell.is-now {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 1px var(--primary-color, #2563eb);
}
.hd-ap-wx-cell small {
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.hd-ap-wx-cell strong { font-size: .66rem; }
.hd-ap-wx-cell img { width: 26px; height: 26px; object-fit: contain; }
.hd-ap-wx-t { font-size: .8rem; font-weight: 800; }
.hd-ap-wx-d {
    font-size: .56rem;
    color: var(--text-muted);
    line-height: 1.25;
    min-height: 1.4em;
}
.hd-ap-wx-pm { font-size: .62rem; font-weight: 800; }

/* ============================================================
   KARTU TAF — periode prakiraan diterjemahkan (map-airport.js)
   ============================================================ */
.hd-ap-taf-title {
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin: .1rem 0 .3rem;
}

.hd-ap-taf-range {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.hd-ap-taf-list {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .45rem;
}

.hd-ap-taf-card {
    background: var(--card-bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: .35rem .45rem;
    font-variant-numeric: tabular-nums;
}

.hd-ap-taf-card.is-now {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 1px var(--primary-color, #2563eb);
}

.hd-ap-taf-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
    margin-bottom: .25rem;
}

.hd-ap-taf-change {
    display: inline-flex;
    align-items: center;
    padding: .08rem .45rem;
    border-radius: 999px;
    background: var(--primary-color, #2563eb);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    white-space: nowrap;
}

.hd-ap-taf-time {
    font-size: .6rem;
    color: var(--text-muted);
    text-align: right;
}

.hd-ap-taf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem .5rem;
}

.hd-ap-taf-grid > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.hd-ap-taf-grid small {
    font-size: .53rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.hd-ap-taf-grid strong {
    font-size: .66rem;
    color: var(--text-color);
    overflow-wrap: anywhere;
}

/* Raw METAR/TAF di bagian bawah popup, setelah catatan RH. */
.hd-ap-raw {
    margin-top: .3rem;
    font-size: .62rem;
    color: var(--text-muted);
}

.hd-ap-raw summary {
    cursor: pointer;
}

.hd-ap-raw pre {
    white-space: pre-wrap;
    font-size: .62rem;
    margin: .25rem 0 0;
    padding: .4rem .5rem;
    border-radius: 8px;
    background: var(--card-bg-alt);
    border: 1px solid var(--border-color);
    max-height: 140px;
    overflow: auto;
}

/* ============================================================
   BANNER PENUTUPAN AERODROME (BMKG closed.json) — map-airport.js
   ============================================================ */
.hd-ap-closure {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-bottom: .45rem;
    padding: .45rem .55rem;
    border-radius: 10px;
    border: 1px solid #fca5a5;
    background: linear-gradient(135deg, rgba(239, 68, 68, .14), rgba(239, 68, 68, .05));
}

/* Ikon banner TETAP kecil — svg tanpa aturan ukuran merender pada
   ukuran viewBox alami di dalam popup, dan map.css memaksa
   .leaflet-container svg { width: auto !important } sehingga ukuran
   eksplisit + !important diperlukan di sini. */
.hd-ap-closure svg,
.hd-ap-closure-head svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
}

.hd-ap-closure.is-scheduled {
    border-color: #fcd34d;
    background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .05));
}

.hd-ap-closure.is-lifted {
    border-color: var(--border-color, #e2e8f0);
    background: var(--card-bg-alt, #f8fafc);
    opacity: .75;
}

.hd-ap-closure-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #dc2626;
}

.hd-ap-closure.is-scheduled .hd-ap-closure-head { color: #b45309; }
.hd-ap-closure.is-lifted .hd-ap-closure-head { color: var(--text-muted, #64748b); }

.hd-ap-closure-head svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.hd-ap-closure-reason {
    font-size: .62rem;
    font-weight: 700;
    color: var(--text-color, #0f172a);
}

.hd-ap-closure-window {
    font-size: .6rem;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

/* METAR/TAF BMKG (sumber lokal) — aksen label biru. */
.hd-ap-bmkg summary {
    color: var(--primary-color, #2563eb);
    font-weight: 700;
}

.hd-ap-bmkg summary small {
    font-weight: 500;
    color: var(--text-muted, #64748b);
}

/* ============================================================
   PROVINCE POPUP — prakiraan PM2.5 (map-forecast.js)
   ============================================================ */

/* Mobile/layar kecil: popup bandara (METAR/TAF/cuaca per jam) jangan
   diperas Leaflet default 300px — pakai lebar viewport penuh minus
   margin, dan grid METAR/cuaca melipat ke 2 kolom. */
@media (max-width: 575.98px) {
    .hd-ap-metar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hd-ap-wx-row {
        grid-template-columns: repeat(2, 1fr);
    }
}
.hd-fc-prov-table .hd-fc-city-toggle { width: 1.1rem; }
.hd-fc-prov-table .hd-fc-city-row .toggle-icon {
    display: inline-block;
    font-size: .6rem;
    color: var(--text-muted);
    transition: transform .15s ease;
}
.hd-fc-prov-table .hd-fc-city-row[aria-expanded="true"] .toggle-icon { transform: rotate(90deg); }
.hd-fc-prov-table .hd-fc-city-detail-row td { background: var(--card-bg-alt); }
.hd-fc-prov-head {
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: .25rem;
}
.hd-fc-prov-time {
    font-size: .64rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: .45rem;
}
.hd-fc-prov-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .5rem;
}
.hd-fc-prov-pill {
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
/* Teks kontras per warna Perban (hijau/kuning = teks gelap) —
   konsisten dengan pill tooltip (hd-fc-tt-cat). */
.hd-fc-prov-pill.cat-0 { background: #00ff00; color: #111; }
.hd-fc-prov-pill.cat-1 { background: #0000ff; color: #fff; }
.hd-fc-prov-pill.cat-2 { background: #ffff00; color: #111; }
.hd-fc-prov-pill.cat-3 { background: #ff0000; color: #fff; }
.hd-fc-prov-pill.cat-4 { background: #000; color: #fff; border: 1px solid #f8fafc; }

/* Badge jenis wilayah (Kota/Kabupaten) — pembeda nama kota vs
   kabupaten di panel Terdampak + tabel popup provinsi. */
.hd-city-type {
    display: inline-block;
    margin-right: .25rem;
    padding: 0 .28rem;
    border-radius: 6px;
    background: var(--card-bg-alt, #e2e8f0);
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--text-muted, #64748b);
    font-size: .52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}
.hd-fc-prov-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .64rem;
}
.hd-fc-prov-table th {
    text-align: left;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
    padding: .2rem .3rem;
    border-bottom: 1px solid var(--border-color);
}
.hd-fc-prov-table td {
    padding: .25rem .3rem;
    border-bottom: 1px solid var(--border-color);
    font-variant-numeric: tabular-nums;
}
.hd-fc-prov-table tr:last-child td { border-bottom: none; }
.hd-fc-prov-table .hd-fc-prov-catdot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: .3rem;
}
.hd-fc-prov-table .hd-fc-prov-catdot.cat-0 { background: #00ff00; }
.hd-fc-prov-table .hd-fc-prov-catdot.cat-1 { background: #0000ff; }
.hd-fc-prov-table .hd-fc-prov-catdot.cat-2 { background: #ffff00; }
.hd-fc-prov-table .hd-fc-prov-catdot.cat-3 { background: #ff0000; }
.hd-fc-prov-table .hd-fc-prov-catdot.cat-4 { background: #000; border: 1px solid var(--text-color); }
.hd-fc-prov-empty {
    padding: .5rem 0;
    font-size: .66rem;
    color: var(--text-muted);
}

/* ============================================================
   RIGHT PANEL — tables
   ============================================================ */
.hd-right {
    grid-area: right;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem;
    overflow-y: auto;
    border-left: 1px solid var(--border-color);
    background: var(--card-bg-alt);
}

.hd-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.8rem;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.hd-panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.55rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.4;
}

/* Override the homepage fixed heights from map.css — panels scroll instead */
.hd-right .pm25-ranking-table,
.hd-right .hotspot-region-stats {
    max-height: none;
    overflow: visible;
    flex: none;
    min-width: 0;
}

.hd-right .table {
    font-size: 0.8rem;
    --bs-table-hover-color: var(--text-color);
}

/* Baris total & baris provinsi mengikuti tema (bukan putih kaku) */
.hd-right .hd-table-foot td {
    background-color: var(--secondary-color);
    color: var(--text-primary);
}

.hd-right .province-row td {
    background-color: var(--card-bg-alt);
}

/* Sel PM2.5: nilai di atas, kategori di bawahnya (lebih kecil) */
.hd-pm25-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.15;
}

.hd-pm25-value {
    font-weight: 700;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

.hd-pm25-cat {
    font-size: 0.58rem;
    font-weight: 600;
    padding: 0.18em 0.55em;
    letter-spacing: 0.02em;
}

/* Baris peringkat PM2.5 dapat diklik → zoom ke stasiun */
.hd-right .hd-pm25-row:hover td {
    background-color: var(--table-hover, #f1f5f9);
}

/* Indikator memuat pada kartu statistik */
.hd-loading-text {
    animation: hd-pulse 1.2s ease-in-out infinite;
}

@keyframes hd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ============================================================
   LOADING OVERLAY GANTI INISIALISASI PRKIRAAN (map-forecast.js)
   Menutupi peta saat run baru dimuat — grid run lama tidak terlihat.
   ============================================================ */
#hd-forecast-loading {
    position: absolute;
    inset: 0;
    z-index: 800; /* di atas popup Leaflet (700) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
#hd-forecast-loading.is-show {
    opacity: 1;
    pointer-events: auto;
    cursor: progress;
}
.hd-fc-loading-card {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.1rem;
    border-radius: 12px;
    background: var(--card-bg, #1e293b);
    color: var(--text-color, #e2e8f0);
    border: 1px solid var(--border-color, #334155);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
    font-size: .78rem;
    font-weight: 600;
}
.hd-fc-loading-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-color, #475569);
    border-top-color: var(--primary-color, #1a73e8);
    animation: hd-fc-spin .8s linear infinite;
}
@keyframes hd-fc-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   WEATHER INFO — bagian cuaca pada popup stasiun
   (dashboard-weather.js; popup max-width 300px dari map.css)
   ============================================================ */
.hd-wx-wrap {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color, #cbd5e1);
}

.hd-wx-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.hd-wx-loc {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--primary-color, #1a73e8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-wx-loading {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

.hd-wx-failed {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    margin: 0;
}

.hd-wx-now {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.hd-wx-now-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.hd-wx-now-main {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.hd-wx-now-temp {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}

.hd-wx-now-desc {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
}

.hd-wx-now-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.66rem;
    color: var(--text-muted, #64748b);
    text-align: right;
}

.hd-wx-days {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.hd-wx-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--card-bg-alt, #f8fafc);
    min-width: 0;
}

.hd-wx-day-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
}

.hd-wx-day-icon {
    width: 26px;
    height: 26px;
}

.hd-wx-day-temp {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
}

.hd-wx-day-desc {
    font-size: 0.58rem;
    color: var(--text-muted, #64748b);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-wx-hours-title {
    margin: 8px 0 4px;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}

.hd-wx-hours {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
}

.hd-wx-hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 2px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--card-bg-alt, #f8fafc);
    font-size: 0.58rem;
    color: var(--text-primary, #0f172a);
}

.hd-wx-hour.is-now {
    border-color: var(--accent-color, #2563eb);
}

.hd-wx-hour-label,
.hd-wx-hour-desc {
    color: var(--text-muted, #64748b);
}

.hd-wx-hour-label {
    font-size: 0.52rem;
    font-weight: 700;
}

.hd-wx-hour-icon {
    width: 22px;
    height: 22px;
}

.hd-wx-hour-desc {
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.5rem;
}

.hd-wx-hour-pm {
    font-size: 0.52rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Jarak jelas antara blok prakiraan per-jam dan kartu harian. */
.hd-wx-days {
    margin-top: 10px;
}

/* Chip PM2.5 pada kartu harian (Hari Ini/Besok/D+2). */
.hd-wx-day-pm {
    font-size: 0.52rem;
    font-weight: 700;
    white-space: nowrap;
}

.hd-map-marker {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--marker-color, #f59e0b);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

.hd-map-marker svg {
    width: 13px;
    height: 13px;
    pointer-events: none;
}

/* Bandara ditutup (aerodrome closure BMKG): marker merah + pesawat
   dicoret — menimpa warna visibility karena status tutup lebih
   penting, plus ring denyut agar mudah dikenali di peta. */
.hd-airport-marker.is-closed {
    background: #dc2626;
    animation: hd-ap-closed-pulse 2s ease-in-out infinite;
}

/* Garis coretan (path terakhir = plane-slash) dibuat tebal agar
   terbaca pada ikon 13px. */
.hd-airport-marker.is-closed svg path:last-child {
    stroke-width: 3.2;
}

@keyframes hd-ap-closed-pulse {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 0 0 0 rgba(220, 38, 38, .55);
    }
    50% {
        box-shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 0 0 6px rgba(220, 38, 38, 0);
    }
}

.hd-warning-marker {
    width: 26px;
    height: 26px;
    background: #f59e0b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.hd-warning-marker svg {
    width: 16px;
    height: 16px;
}

.hd-volcano-marker {
    width: 24px;
    height: 24px;
    background: var(--marker-color, #22c55e);
}

.hd-volcano-marker svg {
    width: 15px;
    height: 15px;
}

.hd-volcano-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    /* Flex + margin:auto pada kartu — terpusat saat muat, backdrop
       bisa di-scroll saat kartu lebih tinggi dari layar (mobile). */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.5rem, 2vw, 1rem);
    overflow-y: auto;
    background: rgba(15, 23, 42, .48);
}

.hd-volcano-card {
    margin: auto;
    width: min(680px, 100%);
    max-height: min(720px, calc(100dvh - 2rem));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    background: var(--card-bg, #fff);
    color: var(--text-color, #0f172a);
    box-shadow: 0 20px 55px rgba(15, 23, 42, .28);
}

.hd-volcano-header,
.hd-volcano-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.hd-volcano-titleblock { min-width: 0; flex: 1; }
.hd-volcano-header h2 {
    margin: 0;
    font-size: .95rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-volcano-kicker,
.hd-volcano-section-title {
    color: var(--text-muted, #64748b);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hd-volcano-kicker {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.hd-volcano-section-title { margin: .55rem 0 .3rem; }
.hd-volcano-section-title:first-child { margin-top: 0; }

.hd-volcano-content {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: .65rem;
    padding: .65rem .75rem;
    overflow-y: auto;
    min-height: 0;
}

.hd-volcano-visual {
    margin: 0;
    min-height: 170px;
    max-height: 260px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: var(--card-bg-alt, #f8fafc);
}

.hd-volcano-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 170px;
    max-height: 260px;
    object-fit: cover;
    cursor: zoom-in;
}

.hd-volcano-main { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.hd-volcano-summary,
.hd-volcano-details,
.hd-volcano-forecast { min-width: 0; }

.hd-volcano-level {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--level-color) 16%, transparent);
    color: var(--level-color);
    font-size: .62rem;
    font-weight: 800;
    white-space: nowrap;
}

.hd-volcano-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem;
}

.hd-volcano-stat {
    min-width: 0;
    padding: .3rem .4rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--card-bg-alt, #f8fafc);
    font-variant-numeric: tabular-nums;
}

.hd-volcano-stat small {
    display: block;
    color: var(--text-muted, #64748b);
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hd-volcano-stat strong {
    display: block;
    color: var(--text-color, #0f172a);
    font-size: .66rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.hd-volcano-row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .28rem 0;
    border-bottom: 1px dashed var(--border-color, #e2e8f0);
    font-size: .66rem;
}

.hd-volcano-row:last-child { border-bottom: 0; }
.hd-volcano-label { color: var(--text-muted, #64748b); flex: 0 0 auto; }
.hd-volcano-value { font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.hd-volcano-hours {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .3rem;
}

.hd-volcano-hour {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: .12rem;
    padding: .32rem .18rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--card-bg-alt, #f8fafc);
    font-size: .6rem;
    text-align: center;
}

.hd-volcano-hour.is-now {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 1px var(--primary-color, #2563eb);
}
.hd-volcano-hour small,
.hd-volcano-hour-desc { color: var(--text-muted, #64748b); }
.hd-volcano-hour small { font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.hd-volcano-hour strong { font-size: .72rem; font-variant-numeric: tabular-nums; }
.hd-volcano-hour-desc { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.hd-volcano-hour img { width: 24px; height: 24px; object-fit: contain; }
.hd-volcano-hour b { font-size: .58rem; white-space: nowrap; }
.hd-volcano-recommendation { margin: .25rem 0 0; font-size: .66rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.hd-volcano-empty,
.hd-volcano-loading { padding: .8rem; color: var(--text-muted, #64748b); font-size: .68rem; text-align: center; }
.hd-volcano-footer { border-top: 1px solid var(--border-color, #e2e8f0); border-bottom: 0; align-items: center; }

@media (max-width: 640px) {
    .hd-volcano-card { width: 100%; max-height: calc(100dvh - 1rem); border-radius: 12px; }
    .hd-volcano-content { grid-template-columns: 1fr; gap: .55rem; padding: .6rem; }
    .hd-volcano-visual,
    .hd-volcano-visual img { min-height: 130px; max-height: 170px; }
    .hd-volcano-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd-volcano-hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd-volcano-header h2 { white-space: normal; }
}

@media (max-width: 380px) {
    .hd-volcano-stats { grid-template-columns: 1fr; }
    .hd-volcano-hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   POPUP STASIUN — responsif & tampilan lebih rapi di layar kecil
   (override ringan map.css; file ini hanya dimuat di dashboard-ku)
   ============================================================ */

/* Scrollbar tipis pada konten popup yang panjang */

/* Header popup: nama stasiun menonjol dengan aksen */
.air-quality-popup .popup-header h6 {
    margin: 0 0 8px;
    padding: 0 22px 8px 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary, #0f172a);
    border-bottom: 2px solid var(--primary-color, #1a73e8);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── Layar kecil: popup lebih KECIL & ringkas ── */
@media (max-width: 575.98px) {

    .air-quality-popup .popup-header h6 {
        font-size: 0.76rem;
        margin-bottom: 5px;
        padding-bottom: 5px;
        padding-right: 18px;
    }

    /* Bagian cuaca lebih ringkas agar popup tetap kecil */
    .hd-wx-wrap {
        margin-top: 6px;
        padding-top: 5px;
    }

    .hd-wx-title {
        font-size: 0.62rem;
        margin-bottom: 4px;
    }

    .hd-wx-now {
        gap: 6px;
        margin-bottom: 5px;
    }

    .hd-wx-now-icon {
        width: 26px;
        height: 26px;
    }

    .hd-wx-now-temp {
        font-size: 0.85rem;
    }

    .hd-wx-now-desc {
        font-size: 0.62rem;
    }

    .hd-wx-now-meta {
        font-size: 0.56rem;
    }

    .hd-wx-days {
        gap: 3px;
    }

    .hd-wx-day {
        padding: 4px 2px;
        border-radius: 5px;
        gap: 2px;
    }

    .hd-wx-day-label {
        font-size: 0.52rem;
    }

    .hd-wx-day-icon {
        width: 18px;
        height: 18px;
    }

    .hd-wx-day-temp {
        font-size: 0.58rem;
    }

    .hd-wx-day-desc {
        font-size: 0.48rem;
    }
}

/* ── Dark mode popup mengikuti tema dashboard ── */

[data-theme="dark"] .air-quality-popup .popup-header h6 {
    color: var(--text-primary, #f1f5f9);
}

.hd-right::-webkit-scrollbar,
.hd-left::-webkit-scrollbar {
    width: 6px;
}

.hd-right::-webkit-scrollbar-thumb,
.hd-left::-webkit-scrollbar-thumb {
    background: var(--text-muted, #ccc);
    border-radius: 3px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.hd-footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.7rem;
    background: var(--footer-bg);
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   RESPONSIVE — tablet: kolom lebih ramping
   ============================================================ */
@media (max-width: 1399.98px) {
    .hd-shell {
        grid-template-columns: 260px minmax(0, 1fr) 330px;
    }
}

/* ============================================================
   RESPONSIVE — mobile: layout bertumpuk, stat menjadi strip
   horizontal yang bisa digeser, map 50vh.
   ============================================================ */
@media (max-width: 991.98px) {
    .hd-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 50vh auto auto auto auto;
        grid-template-areas:
            "header"
            "filter"
            "map"
            "mtg"
            "left"
            "right"
            "footer";
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .hd-map-wrap {
        min-height: 50vh;
    }

    /* Meteogram: tinggi mengikuti konten pada mobile */
    .hd-mtg-panel {
        padding: 0.5rem 0.9rem 0.6rem;
    }

    .hd-mtg-canvas-wrap {
        height: 120px;
    }

    .hd-mtg-head { align-items: flex-start; flex-direction: column; gap: .4rem; }
    .hd-mtg-actions { width: 100%; justify-content: space-between; }
    .hd-mtg-hint { font-size: .65rem; }
    .hd-mtg-canvas-wrap {
        overflow: hidden;
    }

    .hd-mtg-canvas-wrap canvas {
        display: block;
        width: 100% !important;
        min-width: 0;
    }

    /* Panel analisis: tinggi mengikuti konten pada mobile */
    .hd-charts-container {
        position: static;
        min-height: 50vh;
        padding: 0.9rem;
    }

    .hd-charts-grid {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .hd-chart-canvas-wrap {
        height: 260px;
    }

    .hd-header {
        padding: 0.5rem 0.9rem;
    }

    .hd-title {
        font-size: 0.98rem;
        white-space: normal;
    }

    .hd-sub,
    .hd-org {
        white-space: normal;
    }

    .hd-clock-time {
        font-size: 1.05rem;
    }

    .hd-clock-date {
        display: none;
    }

    .hd-filterbar {
        padding: 0.4rem 0.9rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        overflow-x: hidden;
    }

    .hd-filterbar-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

    .hd-filterbar-group[title="Filter wilayah (polygon)"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hd-filterbar-group[title="Rentang waktu data hotspot"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hd-filterbar-group[title="Rentang waktu data hotspot"] .hd-range-btn {
        width: 100%;
    }

    .hd-tab-group {
        order: 20;
        flex-basis: 100%;
        justify-content: center;
        width: 100%;
    }

    .hd-filterbar-sep {
        width: 100%;
        height: 1px;
    }

    /* Mobile: select/input memakai lebar penuh — cap sempit membuat
       teks opsi terpotong dan sulit dipilih. */
    .hd-filter-field select,
    .hd-filter-field input {
        max-width: 100%;
        width: 100%;
    }

    .hd-filter-field {
        min-width: 0;
    }

    .hd-filter-field select {
        text-overflow: ellipsis;
    }

    /* Panel hd-left/hd-right tersusun vertikal di bawah peta pada
       mobile — tombol lipat tidak berguna, sembunyikan. */
    .hd-panel-toggle {
        display: none !important;
    }

    /* Netralisasi state terlipat yang mungkin tersimpan dari desktop:
       panel selalu terbuka penuh di mobile. */
    .hd-left.hd-collapsed,
    .hd-right.hd-collapsed {
        width: auto;
        min-width: 0;
        padding: inherit;
        border: none;
        overflow: visible;
    }

    .hd-left.hd-collapsed > *:not(.hd-panel-toggle),
    .hd-right.hd-collapsed > *:not(.hd-panel-toggle) {
        display: revert !important;
    }

    /* Statistik tersusun SATU KOLOM (kartu memenuhi lebar) — grid 3
       kolom membuat teks legenda/chip terpotong di layar sempit. */
    .hd-left {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 0.6rem 0.9rem;
        overflow: visible;
    }

    .hd-left .hd-card {
        min-width: 0;
        width: 100%;
        padding: 0.55rem 0.7rem;
        overflow-wrap: anywhere;
    }

    /* Step 6: kartu lebih ringkas di layar kecil. */
    .hd-total-value {
        font-size: 1.4rem;
    }

    /* Chip kepastian hero melipat rapi pada layar sempit. */
    .hd-hero-chips {
        flex-wrap: wrap;
    }

    .hd-hero-chip {
        max-width: 100%;
    }

    /* Legend satu kolom penuh — item + rentang muat tanpa terpotong. */
    .hd-left .hd-legend {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .hd-legend-item {
        flex-wrap: wrap;
        row-gap: 0.1rem;
    }

    .hd-right {
        overflow: visible;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .hd-footer {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .hd-header {
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0.5rem 0.65rem;
    }

    .hd-brand {
        gap: 0.6rem;
        flex: 1 1 auto;
        min-width: 0;
    }

    .hd-logo {
        width: 36px;
        height: 36px;
    }

    .hd-org {
        display: none;
    }

    .hd-title {
        font-size: 0.92rem;
    }

    .hd-title-full,
    .hd-sub {
        display: none;
    }

    .hd-title-short {
        display: inline;
    }

    .hd-header-right {
        display: grid;
        grid-template-columns: repeat(2, 30px);
        align-items: flex-end;
        justify-content: center;
        gap: 0.25rem;
    }

    .hd-btn {
        width: 30px;
        height: 30px;
    }

    .hd-clock {
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 0;
    }

    .hd-clock-time {
        font-size: 0.68rem;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .hd-clock-date {
        display: none;
    }

    .hd-header-right > .hd-btn {
        grid-row: 2;
    }

    .hd-header-right > .hd-btn + .hd-btn {
        grid-column: 2;
    }

    .hd-filterbar {
        gap: 0.35rem 0.6rem;
        padding-inline: 0.6rem;
    }

    .hd-filterbar-group {
        gap: 0.35rem;
    }

    .hd-filter-field select,
    .hd-filter-field input {
        max-width: 100%;
        width: 100%;
        min-height: 30px;
        font-size: 0.7rem;
    }

    .hd-range-btn {
        padding-inline: 0.55rem;
        font-size: 0.68rem;
    }

    .hd-tab-btn {
        padding-inline: 0.55rem;
        font-size: 0.68rem;
    }

    .hd-left .hd-card {
        padding-inline: 0.5rem;
    }

    .hd-total-value {
        font-size: 1.45rem;
    }

    .hd-right {
        padding: 0.55rem;
    }

    .hd-panel {
        padding: 0.6rem;
        overflow-x: auto;
    }

    .hd-panel-title {
        font-size: 0.68rem;
    }

    .hd-footer {
        padding-inline: 0.6rem;
        font-size: 0.62rem;
    }
}

/* Step 6: layar sangat kecil (<=380px) — kartu memenuhi lebar,
   chip kepastian melipat, kontrol lapisan lebih ringkas. */
@media (max-width: 380px) {
    .hd-left {
        gap: 0.4rem;
        padding: 0.5rem 0.6rem;
    }
    .hd-total-value { font-size: 1.3rem; }
    .hd-left .hd-card { padding: 0.45rem 0.55rem; }
    .hd-satellite-panel.hd-sat-docked .hd-sat-controls {
        gap: 4px;
        padding: 4px;
    }
    .hd-btn-sat { padding: 0 7px; font-size: 0.66rem; }
}


/* ============================================================
   MODE SEDERHANA — ala bmkg.go.id/kualitas-udara/pm25
   Strip kartu stasiun + legenda kategori (ikon resmi BMKG),
   marker ikon kategori, dan modal stasiun ringkas.
   ============================================================ */
.hd-simple-strip {
    grid-area: simple;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem 0.8rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.hd-simple-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.hd-simple-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-color);
}

.hd-simple-updated {
    font-size: 0.68rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}

.hd-simple-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
}

.hd-simple-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Legenda disembunyikan pada tab Hotspot (JS: switchStripTab). */
.hd-simple-legend.is-hidden {
    display: none;
}

.hd-simple-legend-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.hd-simple-legend-text strong {
    font-size: 0.72rem;
    color: var(--text-color);
}

.hd-simple-legend-text small {
    font-size: 0.6rem;
    color: var(--text-muted, #64748b);
}

/* Ikon kategori resmi BMKG (line-art SVG). */
.aq-cat-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* Ikon Berbahaya (stroke gelap) tetap terlihat pada tema gelap. */
[data-theme="dark"] .aq-cat-icon--dark-safe {
    filter: invert(0.92) hue-rotate(180deg);
}

.hd-simple-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 0.5rem;
    overflow: visible;
    max-height: none;
    padding-bottom: 2px;
}

.hd-simple-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 4px solid var(--cat, #94a3b8);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.hd-simple-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
    border-color: var(--cat, #94a3b8);
}

.hd-simple-card:focus-visible {
    outline: 2px solid var(--cat, #1a73e8);
    outline-offset: 1px;
}

.hd-simple-card .aq-cat-icon {
    width: 22px;
    height: 22px;
}

.hd-simple-card-name {
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.85em;
}

.hd-city-forecast-label {
    color: var(--text-muted, #64748b);
    font-size: 0.62rem;
    line-height: 1.2;
}

.hd-simple-card-vals {
    display: flex;
    gap: 0.7rem;
}

.hd-simple-val {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.hd-simple-val small {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

.hd-simple-val strong {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.hd-simple-val.is-empty strong {
    color: var(--text-muted, #94a3b8);
}

.hd-simple-card-cat {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--cat-text, var(--text-color));
}

.hd-simple-skeleton {
    grid-column: 1 / -1;
    padding: 0.8rem;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
}

/* ── Shell: mode Sederhana menyembunyikan rail & filter lanjutan ── */
.hd-shell.hd-shell--simple {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 44vh) auto auto auto;
    grid-template-areas:
        "header"
        "filter"
        "map"
        "simple"
        "mtg"
        "footer";
}

.hd-shell.hd-shell--simple .hd-left,
.hd-shell.hd-shell--simple .hd-right,
.hd-shell.hd-shell--simple .hd-mtg-panel,
.hd-shell.hd-shell--simple .hd-filterbar-group,
.hd-shell.hd-shell--simple .hd-filterbar-sep,
.hd-shell.hd-shell--simple .hd-filter-error {
    display: none !important;
}

/* ── Modal stasiun (mode Sederhana) ── */
.hd-station-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}

.hd-station-modal[hidden] {
    display: none;
}

.hd-station-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(560px, 100%);
    max-height: min(88vh, 640px);
    overflow-y: auto;
    padding: 0.9rem 1rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #fff);
    color: var(--text-color);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}

.hd-station-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.hd-station-head h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.25;
}

.hd-station-meta {
    margin: 0.15rem 0 0;
    font-size: 0.68rem;
    color: var(--text-muted, #64748b);
}

.hd-station-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.hd-station-close:hover {
    background: var(--header-bg, #f1f5f9);
}

.hd-station-heroes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.hd-station-heroes-title {
    margin: 0 0 0.5rem;
    color: var(--text-color, #334155);
    font-size: 0.85rem;
    font-weight: 700;
}

.hd-warn-header h2 svg {
    color: inherit;
    stroke: currentColor;
}

.hd-station-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 4px solid var(--cat, #94a3b8);
    border-radius: 10px;
    background: color-mix(in srgb, var(--cat) 7%, transparent);
}

.hd-station-hero .aq-cat-icon {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
}

.hd-station-hero-param {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

.hd-station-hero strong {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--cat-text, var(--text-color));
}

.hd-station-hero strong small {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}

.hd-station-hero-cat {
    grid-column: 2;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--cat-text, var(--text-color));
}

.hd-station-hero.is-empty strong {
    color: var(--text-muted, #94a3b8);
}

.hd-station-bar {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.hd-station-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.hd-station-bar-title,
.hd-station-bar-panel-title {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text-color);
}

.hd-station-bar-panel-title small,
.hd-station-bar-meta {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.hd-station-bar-stack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hd-station-bar-panel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hd-station-bar-canvas-wrap {
    height: 160px;
    padding: 0.35rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: var(--card-bg, #fff);
}

.hd-station-bar-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.hd-station-bar-empty {
    padding: 1rem 0.6rem;
    text-align: center;
    font-size: 0.74rem;
    color: var(--text-muted, #64748b);
}

/* Meteogram ringkas di dalam modal — struktur .hd-mtg-* dipakai ulang. */
#hd-station-mtg .hd-mtg-canvas-wrap--compact {
    height: 190px;
}

#hd-station-mtg .hd-mtg-empty {
    padding: 1.4rem 0.6rem;
    text-align: center;
    font-size: 0.74rem;
    color: var(--text-muted, #64748b);
}

body.hd-modal-open {
    overflow: hidden;
}

/* Dark mode modal & kartu */
[data-theme="dark"] .hd-station-card {
    background: var(--card-bg, #111827);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

[data-theme="dark"] .hd-simple-card {
    background: var(--card-bg, #111827);
}

[data-theme="dark"] .hd-simple-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}

/* Responsif: mode Sederhana pada layar kecil */
@media (max-width: 991.98px) {
    .hd-shell.hd-shell--simple {
        grid-template-rows: auto auto 50vh auto auto auto;
        grid-template-areas:
            "header"
            "filter"
            "map"
            "simple"
            "mtg"
            "footer";
    }

    .hd-simple-cards {
        max-height: 34vh;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .hd-station-modal {
        align-items: flex-end;
        padding: 0;
    }

    .hd-station-card {
        width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }

    .hd-station-heroes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ── Tab strip Sederhana: Observasi Stasiun | Prakiraan Kota ── */
.hd-simple-tabs {
    display: flex;
    gap: 0.35rem;
}

.hd-simple-tab {
    padding: 0.32rem 0.75rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.hd-simple-tab:hover {
    color: var(--text-color);
    border-color: var(--text-muted, #94a3b8);
}

.hd-simple-tab.active {
    background: var(--primary-color, #1a73e8);
    border-color: var(--primary-color, #1a73e8);
    color: #fff;
}

/* ── Prakiraan kota: kelompok provinsi + kartu ── */
#hd-simple-cities {
    overflow: visible;
    max-height: none;
}

.hd-simple-cities {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.hd-city-group-title {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-color);
}

.hd-city-group-title small {
    margin-left: 0.35rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.hd-city-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 0.5rem;
}

.hd-city-params {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
}

.hd-city-param {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.hd-city-param > small {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

.hd-simple-stats {
    display: flex;
    gap: 0.55rem;
}

.hd-simple-stats span {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.hd-simple-stats small {
    font-size: 0.54rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.hd-simple-stats strong {
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--value-text-light, var(--tone, var(--text-color)));
}

[data-theme="dark"] .hd-simple-stats strong {
    color: var(--value-text-dark, var(--tone, var(--text-color)));
}


/* ── Kelompok provinsi: collapse/expand ── */
.hd-city-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.hd-city-toolbar button {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 0.62rem;
    font-weight: 700;
    cursor: pointer;
}

.hd-city-toolbar button:hover {
    color: var(--text-color);
    border-color: var(--text-muted, #94a3b8);
}

.hd-city-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.hd-city-group-toggle:hover .hd-city-group-title {
    color: var(--primary-color, #1a73e8);
}

.hd-city-chevron {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    transition: transform .15s ease;
}

.hd-city-group:not(.is-collapsed) .hd-city-chevron {
    transform: rotate(90deg);
}

.hd-city-group.is-collapsed .hd-city-group-title small {
    color: var(--text-muted, #94a3b8);
}

/* ── Tab grafik modal kota + tombol unduh ── */
.hd-city-chart-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.hd-city-chart-tab-group {
    display: flex;
    gap: 0.3rem;
}

.hd-city-chart-tabs button {
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.hd-city-chart-tab-group button.active {
    background: var(--primary-color, #1a73e8);
    border-color: var(--primary-color, #1a73e8);
    color: #fff;
}

.hd-station-head-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.hd-station-download {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
}

.hd-station-download:hover {
    background: var(--header-bg, #f1f5f9);
}

/* Responsif: TOC di atas daftar pada layar kecil */
@media (max-width: 991.98px) {
    .hd-simple-cities-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hd-city-toc {
        position: static;
        max-height: 12vh;
    }
}


/* ── Kontrol tab Prakiraan Kota: pencarian + sorter provinsi ── */
.hd-city-controls {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.hd-city-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 320px;
}

.hd-city-search input {
    width: 100%;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 999px;
    background: var(--card-bg, #fff);
    color: var(--text-color);
    font-size: 0.74rem;
}

.hd-city-search input:focus {
    outline: 2px solid var(--primary-color, #1a73e8);
    outline-offset: -1px;
}

.hd-city-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 46vh;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--card-bg, #fff);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}

.hd-city-search-results[hidden] { display: none; }

.hd-city-search-opt {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.72rem;
    text-align: left;
    cursor: pointer;
}

.hd-city-search-opt:hover {
    background: var(--header-bg, #f1f5f9);
}

.hd-city-search-opt i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .45);
}

.hd-city-search-opt span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.hd-city-search-opt small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
    color: var(--text-muted, #64748b);
    font-size: 0.62rem;
}

.hd-city-search-empty {
    padding: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    text-align: center;
}

.hd-city-sort-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-shrink: 0;
}

.hd-city-sort-field span {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

.hd-city-sort-field select {
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--card-bg, #fff);
    color: var(--text-color);
    font-size: 0.68rem;
}

.hd-city-groups {
    overflow-y: auto;
    max-height: 24vh;
}


/* ── Tab Hotspot (Sederhana): hero total + tabel wilayah ── */
.hd-hot-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--card-bg, #fff);
}

.hd-hot-total {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.hd-hot-total small {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

.hd-hot-total strong {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-color);
}

.hd-hot-range {
    font-size: 0.62rem;
    color: var(--text-muted, #64748b);
}

.hd-hot-chips {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
}

.hd-hot-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--header-bg, #f1f5f9);
    color: var(--text-color);
}

.hd-hot-chip i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.hd-hot-chip.is-high i { background: #dc2626; }
.hd-hot-chip.is-medium i { background: #f59e0b; }
.hd-hot-chip.is-low i { background: #16a34a; }

.hd-hot-region .table {
    font-size: 0.7rem;
    margin-bottom: 0;
}

.hd-hot-region .table th,
.hd-hot-region .table td {
    padding: 0.28rem 0.4rem;
}

.hd-hot-region .badge {
    font-size: 0.62rem;
}

/* ── Responsif Sederhana: ponsel potret & lanskap ── */
@media (max-width: 575.98px) {
    .hd-city-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .hd-city-search {
        max-width: 100%;
    }

    .hd-city-groups,
    #hd-simple-cities {
        max-height: none;
        overflow: visible;
    }

    .hd-simple-cards,
    .hd-city-group-grid {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    }

    .hd-simple-strip {
        padding: 0.6rem 0.7rem 0.7rem;
    }

    .hd-simple-title {
        font-size: 0.85rem;
    }

    .hd-simple-legend {
        gap: 0.25rem 0.6rem;
    }

    .aq-cat-icon {
        width: 22px;
        height: 22px;
    }
}

/* Ponsel lanskap: peta lebih pendek + strip ringkas agar semua muat. */
@media (max-height: 520px) and (orientation: landscape) {
    .hd-shell.hd-shell--simple {
        grid-template-rows: auto auto 40vh auto auto auto;
    }

    #hd-simple-cities,
    .hd-city-groups {
        max-height: 20vh;
    }

    .hd-simple-cards {
        max-height: 20vh;
    }

    .hd-hot-hero {
        padding: 0.4rem 0.6rem;
    }

    .hd-hot-total strong {
        font-size: 1.2rem;
    }
}

/* Tablet potret: strip lebih tinggi karena peta 50vh masih lega. */
@media (min-width: 576px) and (max-width: 991.98px) and (orientation: portrait) {
    #hd-simple-cities,
    .hd-city-groups,
    .hd-simple-cards {
        max-height: 34vh;
    }
}

.hd-simple-strip #hd-simple-cities,
.hd-simple-strip .hd-simple-cards,
.hd-simple-strip .hd-city-groups {
    max-height: none;
    overflow: visible;
}

.hd-simple-hotspot-panel {
    min-width: 0;
}

.hd-simple-hotspot-list {
    display: grid;
    gap: 0.6rem;
    min-width: 0;
}

.hd-fc-prov-popup .maplibregl-popup-content {
    background: var(--card-bg, #fff);
    color: var(--text-color, #0f172a);
    border-radius: 12px;
    padding: 18px 40px 14px 14px;
    max-height: min(65vh, 520px);
    overflow: auto;
}
.hd-fc-prov-popup .maplibregl-popup-close-button {
    color: inherit;
    font-size: 24px;
    width: 32px;
    height: 32px;
}