/* ============================================================
   TIEI v3 · geointel.css  (pemilik: P2 · tata letak Geo-Intel, peta, citra, deteksi, KPI)
   Semua aturan dibatasi body.geointel agar tidak bocor ke halaman lain.
   Gaya panel P3 (kasus, intel, stockpile, dossier) ada di geointel-panels.css.
   ============================================================ */

/* Atribut hidden harus menang atas display milik kelas bersama (mis. .badge-peringatan) */
body.geointel [hidden] {
    display: none !important;
}

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

/* ---------- Grid 300px 1fr 320px (§3.5). Di bawah 1400px kembali ke breakpoint style.css ---------- */
@media (min-width: 1401px) {
    body.geointel .main-grid {
        grid-template-columns: 300px 1fr 320px;
    }
}

body.geointel .main-grid {
    min-height: 0;
}

body.geointel .center-panel {
    min-height: 0;
    overflow: hidden;
}

body.geointel .left-panel,
body.geointel .right-panel {
    min-height: 0;
}

/* ---------- Header ---------- */
body.geointel .geo-select {
    min-height: 28px;
    max-width: 200px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 11px;
}

body.geointel .geo-select:hover {
    border-color: rgba(139, 148, 158, 0.6);
}

body.geointel .geo-header-tengah {
    min-width: 0;
}

body.geointel .geo-label-persona {
    margin-left: 10px;
}

body.geointel .geo-aoi-peringatan {
    cursor: pointer;
    white-space: nowrap;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.geointel .db-status-indicator.geo-db-gagal {
    color: var(--accent-amber);
    background: color-mix(in srgb, var(--accent-amber) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-amber) 35%, transparent);
}

body.geointel .load-db-btn input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

body.geointel .load-db-btn:focus-within {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ---------- Peta ---------- */
body.geointel .geo-peta-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
}

/* Latar = warna laut peta dasar vektor (TIEI.geo.basemap juga menulisnya inline); tampil sebelum tile datang dan saat luring */
body.geointel #geo-map {
    flex: 1;
    background: #0c2a43;
    z-index: 1;
}

/* Sorotan poligon terpilih: garis putih bergerak di atas cahaya oranye */
body.geointel .geo-sorot-garis {
    stroke-dasharray: 8 6;
    animation: geo-semut 1.2s linear infinite;
}

@keyframes geo-semut {
    to {
        stroke-dashoffset: -14;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.geointel .geo-sorot-garis {
        animation: none;
        stroke-dasharray: none;
    }
}

/* Status peta (memuat s00, galat) */
body.geointel .geo-peta-status {
    position: absolute;
    left: 50%;
    bottom: 56px;
    transform: translateX(-50%);
    z-index: 950;
    max-width: min(420px, 60%);
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(28, 33, 40, 0.96);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    color: var(--text-primary);
    font-size: 11px;
    text-align: center;
}

body.geointel .geo-peta-status i {
    color: var(--accent-blue);
    margin-right: 4px;
}

body.geointel .geo-peta-status.galat {
    border-color: color-mix(in srgb, var(--accent-red) 60%, transparent);
    color: var(--accent-red);
    border-radius: 8px;
}

body.geointel .geo-peta-status.galat i {
    color: inherit;
}

/* Kartu poligon terpilih di kiri bawah peta */
body.geointel .geo-pilihan {
    position: absolute;
    left: 12px;
    bottom: 14px;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(50% - 40px);
    padding: 6px 6px 6px 10px;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--accent-orange) 70%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

body.geointel .geo-pilihan-teks {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

body.geointel .geo-pilihan-teks strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-orange);
    line-height: 1.1;
}

body.geointel .geo-pilihan-teks span {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tombol kecil bersama halaman ini */
body.geointel .geo-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--accent-orange);
    background: rgba(245, 158, 11, 0.12);
    color: var(--accent-orange);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

body.geointel .geo-btn:hover {
    background: var(--accent-orange);
    color: #000;
}

body.geointel .geo-btn.sekunder {
    border-color: var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

body.geointel .geo-btn.sekunder:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

body.geointel .geo-btn.ikon {
    padding: 4px 8px;
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
}

body.geointel .geo-btn.ikon:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

/* Popup deteksi */
body.geointel .geo-popup-deteksi .badge-indikasi {
    margin-bottom: 6px;
}

body.geointel .geo-popup-aksi {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* ---------- Segmented control (sumber citra, epoch, peta dasar) ---------- */
body.geointel .geo-seg {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

body.geointel .geo-seg-btn {
    min-height: 26px;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

body.geointel .geo-seg-btn + .geo-seg-btn {
    border-left: 1px solid var(--border-color);
}

body.geointel .geo-seg-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

body.geointel .geo-seg-btn[aria-pressed="true"] {
    background: var(--accent-orange);
    color: #000;
}

body.geointel .geo-seg-kecil .geo-seg-btn {
    padding: 4px 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
}

/* ---------- Mesin waktu (#geo-citra-bar): bar lebar di atas peta, kolom kiri/kanan mengikuti swipe ---------- */
body.geointel .map-overlays-tl {
    right: 290px;
    max-width: none;
    align-items: stretch;
}

body.geointel .citra-bar.geo-citra {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    padding: 7px 12px 8px;
}

/* Keterangan kolom: "Mesin waktu · Kiri" di kiri, "Kanan" + tombol Bandingkan di kanan (QA F12: tanpa baris kepala) */
body.geointel .geo-citra-kap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 20px;
}

body.geointel .geo-citra-kap .geo-citra-tag i {
    color: var(--accent-orange);
    margin-right: 2px;
}

body.geointel .geo-citra-banding {
    min-height: 20px;
    padding: 0 8px;
}

body.geointel .geo-citra-kolom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

body.geointel .geo-citra-sisi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0 12px 0 0;
}

body.geointel .geo-citra-sisi[data-sisi="kanan"] {
    padding: 0 0 0 12px;
    border-left: 1px solid var(--border-color);
}

body.geointel .citra-bar.tunggal .geo-citra-kolom {
    grid-template-columns: minmax(0, 1fr);
}

body.geointel .citra-bar.tunggal .geo-citra-sisi[data-sisi="kiri"] {
    display: none;
}

body.geointel .citra-bar.tunggal .geo-citra-sisi[data-sisi="kanan"] {
    padding-left: 0;
    border-left: 0;
}

body.geointel .geo-citra-baris {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
}

body.geointel .geo-citra-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}

/* Basis 104px menentukan kapan kontrol turun ke baris baru; min-width auto (= min-content) mencegah
   isi (mis. tombol 2019|2026) meluap ke kolom sebelah saat sempit */
body.geointel .geo-citra-pilih {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 104px;
}

body.geointel .geo-citra-pilih .citra-play {
    width: 26px;
    height: 26px;
    font-size: 10px;
}

body.geointel .geo-citra-pilih .citra-play[aria-pressed="true"] {
    background: var(--accent-orange);
    color: #000;
}

body.geointel .geo-citra-slider {
    flex: 1 1 0;
    width: 0;
    min-width: 40px;
}

body.geointel .geo-citra-tahun {
    min-width: 30px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
}

body.geointel .geo-citra-rilis {
    flex: 1 1 0;
    width: 0;
    min-width: 100px;
    max-width: 170px;
    font-size: 10.5px;
}

body.geointel .geo-citra-info {
    min-height: 2.9em;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--text-secondary);
}

body.geointel .geo-citra-utama {
    color: var(--text-primary);
}

body.geointel .geo-citra-akuisisi {
    color: var(--text-primary);
    font-weight: 700;
}

body.geointel .geo-citra-akuisisi.kosong {
    color: var(--text-muted);
    font-weight: 400;
}

body.geointel .geo-citra-lokasi {
    color: var(--text-muted);
}

body.geointel .geo-citra-lisensi {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 9px;
    color: var(--text-muted);
    white-space: nowrap;
}

body.geointel .geo-badge-kecil {
    margin-left: 4px;
    padding: 0 6px;
    font-size: 9px;
    vertical-align: 1px;
    white-space: nowrap;
}

body.geointel .geo-citra-status {
    margin-left: 6px;
    color: var(--text-muted);
    white-space: nowrap;
}

body.geointel .geo-citra-status.gagal {
    color: var(--accent-red);
}

/* ---------- Pegangan swipe (#geo-swipe) ---------- */
body.geointel .geo-swipe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    pointer-events: none;
    outline: none;
}

body.geointel .geo-swipe-garis {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8px;
    width: 16px;
    cursor: ew-resize;
    pointer-events: auto;
    touch-action: none;
}

body.geointel .geo-swipe-garis::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 7px;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

body.geointel .geo-swipe-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--bg-card);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    cursor: ew-resize;
    pointer-events: auto;
    touch-action: none;
}

body.geointel .geo-swipe:focus-visible .geo-swipe-knob {
    outline: 2px solid var(--accent-blue);
    outline-offset: 3px;
}

body.geointel .geo-swipe.geser .geo-swipe-knob,
body.geointel .geo-swipe-knob:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

body.geointel .geo-swipe-label {
    position: absolute;
    top: calc(50% + 24px);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: rgba(13, 17, 23, 0.85);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

body.geointel .geo-swipe-label.kiri {
    right: 8px;
}

body.geointel .geo-swipe-label.kanan {
    left: 8px;
}

/* ---------- Panel Layer & Legenda (#geo-layers) ---------- */
/* Kontrol kanan bawah (zoom, skala, atribusi) digeser ke kiri panel layer supaya panel bisa setinggi peta */
/* Fase 4: naik 26 px supaya atribusi (wajib terlihat) tidak tertutup tombol tepi "▼ panel bawah / Fokus peta" */
body.geointel .geo-peta-wrap .leaflet-bottom.leaflet-right {
    right: 290px;
    bottom: 26px;
}

/* Panel layer bergeser 26 px dari tepi kanan: ruang untuk tombol tepi ▶ milik TIEI.layout */
body.geointel .layer-control {
    right: 26px;
    width: 252px;
    max-height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
}

body.geointel .layer-control-body {
    flex: 1;
    min-height: 0;
    max-height: none;
    gap: 0;
    padding: 0 8px 6px;
    overflow-y: auto;
}

body.geointel .layer-control-body.collapsed {
    flex: 0 0 0;
    padding: 0 8px;
}

body.geointel .layer-toggle-btn {
    min-width: 24px;
    min-height: 24px;
}

body.geointel .layer-checkbox.geo-lapis {
    grid-template-columns: auto 18px 1fr auto;
    gap: 7px;
    min-height: 28px;
    padding: 4px 6px;
}

body.geointel .geo-lapis .layer-name {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

body.geointel .geo-lapis-sub {
    font-size: 9px;
    color: var(--text-muted);
}

body.geointel .geo-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--w, #8b949e);
}

body.geointel .geo-swatch-poligon {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--geo-bukaan) 0 25%, var(--geo-kolong) 25% 50%, var(--geo-revegetasi) 50% 75%, var(--geo-tailing) 75%);
}

body.geointel .geo-swatch-konteks {
    display: inline-block;
    width: 16px;
    height: 12px;
    justify-self: center;
}

body.geointel .geo-swatch-konteks.aoi {
    border: 1.5px dashed #fff;
    border-radius: 2px;
}

body.geointel .geo-swatch-konteks.peti {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-red);
    border: 2px solid #fff;
}

body.geointel .geo-swatch-konteks.reklamasi {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--accent-green);
}

body.geointel .geo-swatch-konteks.iuplaut {
    border: 2px solid var(--geo-iuplaut);
    background: color-mix(in srgb, var(--geo-iuplaut) 12%, transparent);
    border-radius: 2px;
}

body.geointel .geo-swatch-konteks.kapal {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--geo-iuplaut);
    box-shadow: 7px 0 0 var(--accent-orange);
    justify-self: start;
    margin-left: 2px;
}

body.geointel .geo-swatch-konteks.admin {
    height: 0;
    border-top: 2px dashed var(--accent-orange);
}

body.geointel .geo-swatch-konteks.raster {
    border-radius: 2px;
    background: linear-gradient(90deg, var(--geo-bukaan), var(--geo-kolong), var(--geo-revegetasi), var(--geo-tailing));
    opacity: 0.85;
}

body.geointel .geo-swatch-konteks.wiup {
    border: 2px solid var(--geo-wiup, #e879f9);
    background: color-mix(in srgb, var(--geo-wiup, #e879f9) 12%, transparent);
    border-radius: 2px;
}

body.geointel .geo-swatch-konteks.tutupan {
    border-radius: 2px;
    background: linear-gradient(90deg, var(--tutupan-pemukiman, #c084fc) 0 25%, var(--tutupan-perkebunan, #a3e635) 25% 50%, var(--tutupan-hutan, #15803d) 50% 75%, var(--tutupan-air, #3b82f6) 75%);
    opacity: 0.85;
}

body.geointel .geo-swatch-konteks.laut {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--geo-laut-luar, #f87171);
    border: 2px solid #fff;
}

body.geointel .geo-sub-kapal {
    padding: 0 6px 6px 50px;
}

body.geointel .geo-dot-dalam {
    background: var(--geo-iuplaut);
}

body.geointel .geo-dot-luar {
    background: var(--accent-orange);
}

body.geointel .geo-basemap {
    margin: 4px 6px;
    width: auto;
}

body.geointel .geo-basemap .geo-seg-btn i {
    margin-right: 2px;
    font-size: 9px;
}

/* Filter skor */
body.geointel .geo-skor {
    padding: 4px 6px 6px;
}

body.geointel .geo-skor-kepala {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

body.geointel #geo-skor-nilai {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-orange);
    letter-spacing: 0;
}

/* Slider memakai gaya seragam Fase 4 dari style.css (tanpa accent-color) */
body.geointel .geo-skor-slider {
    width: 100%;
    margin: 2px 0 0;
    cursor: pointer;
}

body.geointel .geo-skor-skala {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-muted);
}

body.geointel .geo-skor-memuat {
    margin-top: 4px;
    font-size: 10px;
    color: var(--accent-blue);
}

/* Toggle kelas dengan jumlah dan ha yang ikut filter */
body.geointel .geo-kelas-daftar {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

body.geointel .geo-kelas {
    display: grid;
    grid-template-columns: auto 12px 1fr auto 58px;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
}

body.geointel .geo-kelas:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.geointel .geo-kelas input {
    accent-color: var(--accent-orange);
    cursor: pointer;
}

body.geointel .geo-kelas-nama {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
    color: var(--text-primary);
}

body.geointel .geo-kelas-nama small {
    font-size: 9px;
    color: var(--text-muted);
}

body.geointel .geo-kelas-n {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    color: var(--text-primary);
}

body.geointel .geo-kelas-ha {
    font-size: 10px;
    text-align: right;
    white-space: nowrap;
    color: var(--text-secondary);
}

body.geointel .geo-kelas.mati {
    opacity: 0.45;
}

body.geointel .geo-catatan {
    padding: 2px 6px 4px;
    font-size: 9.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

body.geointel .geo-catatan strong {
    color: var(--text-secondary);
}

/* ---------- KPI (#geo-kpi) ---------- */
body.geointel #geo-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

body.geointel .geo-kpi-aoi-nama {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

body.geointel .geo-kpi-status {
    padding: 0 6px;
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-green);
}

body.geointel .geo-kpi-periode {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-secondary);
}

body.geointel .geo-kpi-periode small {
    font-size: 10px;
    color: var(--text-muted);
}

body.geointel .geo-kpi-peringatan {
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--accent-amber) 60%, transparent);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent-amber) 9%, transparent);
}

body.geointel .geo-kpi-peringatan p {
    margin-top: 5px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--text-primary);
}

body.geointel .geo-kpi-utama {
    padding: 10px 12px;
}

body.geointel .geo-kpi-judul {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

body.geointel .geo-kpi-angka {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

body.geointel .geo-kpi-angka .kpi-value {
    margin-bottom: 0;
}

body.geointel .geo-kpi-angka .geo-kpi-ha {
    margin-left: 10px;
    font-size: 24px;
}

body.geointel .geo-kpi-satuan {
    font-size: 11px;
    color: var(--text-secondary);
}

body.geointel .geo-kpi-utama .kpi-label {
    margin-top: 6px;
    font-size: 10.5px;
}

body.geointel .geo-kpi-utama.mati,
body.geointel .geo-kpi-baris.mati {
    opacity: 0.45;
}

body.geointel .geo-kpi-tabel {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

body.geointel .geo-kpi-baris {
    display: grid;
    grid-template-columns: 12px 1fr auto 76px;
    align-items: center;
    gap: 8px;
    padding: 3px 2px;
    font-size: 11px;
    color: var(--text-primary);
}

body.geointel .geo-kpi-kelas {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.geointel .geo-kpi-n {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}

body.geointel .geo-kpi-ha2 {
    font-size: 10.5px;
    text-align: right;
    color: var(--text-secondary);
    white-space: nowrap;
}

body.geointel .geo-kpi-total {
    margin-top: 3px;
    padding-top: 5px;
    border-top: 1px solid var(--border-color);
    font-size: 10px;
    color: var(--text-muted);
}

body.geointel .geo-kpi-total strong {
    color: var(--text-primary);
}

body.geointel .geo-kpi-wiup {
    display: flex;
    gap: 9px;
    padding: 8px 10px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.02);
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--text-secondary);
}

body.geointel .geo-kpi-wiup i {
    margin-top: 2px;
    color: var(--accent-blue);
}

body.geointel .geo-kpi-wiup strong {
    display: block;
    font-size: 11px;
    color: var(--text-primary);
}

body.geointel .geo-kpi-metode p {
    margin-bottom: 4px;
    font-size: 10px;
    line-height: 1.45;
    color: var(--text-secondary);
}

body.geointel .geo-kpi-metode strong {
    color: var(--text-primary);
    font-weight: 600;
}

body.geointel .geo-kpi-lbl {
    display: inline-block;
    margin-right: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.geointel .geo-sumber {
    color: var(--text-muted);
}

/* ---------- Kartu bawah: deret waktu dan ringkasan ---------- */
body.geointel .bottom-panel .stat-card {
    min-width: 0;
    overflow: hidden;
}

body.geointel .bottom-panel .card-header {
    padding-bottom: 6px;
}

/* QA F2: kanvas tidak boleh menyusut di bawah 120 px (sebelumnya 53 px di 1366×768) */
body.geointel .geo-deret-kanvas {
    position: relative;
    flex: 1;
    min-height: 120px;
}

body.geointel .geo-deret-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: -2px;
    font-size: 9.5px;
    color: var(--text-secondary);
}

body.geointel .geo-garis-solid,
body.geointel .geo-garis-putus {
    display: inline-block;
    width: 16px;
    margin-right: 5px;
    border-top: 2px solid var(--geo-tailing);
    vertical-align: middle;
}

body.geointel .geo-garis-putus {
    border-top: 2px dashed var(--text-muted);
}

body.geointel .bottom-panel .geo-catatan {
    padding: 0;
}

body.geointel .geo-tab {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

body.geointel .geo-tab-btn {
    min-height: 22px;
    padding: 2px 8px;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

body.geointel .geo-tab-btn + .geo-tab-btn {
    border-left: 1px solid var(--border-color);
}

body.geointel .geo-tab-btn:hover {
    color: var(--text-primary);
}

body.geointel .geo-tab-btn[aria-selected="true"] {
    background: var(--accent-orange);
    color: #000;
}

body.geointel .geo-ringkas-isi {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    gap: 8px;
    overflow-y: auto;
}

body.geointel .geo-bar-daftar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.geointel .geo-bar-baris {
    display: grid;
    grid-template-columns: 112px 1fr 78px;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
}

body.geointel .geo-bar-baris.mati {
    opacity: 0.4;
}

body.geointel .geo-bar-label {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.geointel .geo-bar-trek {
    display: flex;
    gap: 2px;
    height: 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

body.geointel .geo-bar-seg {
    height: 100%;
    min-width: 2px;
    border-radius: 2px;
    background: var(--w);
}

body.geointel .geo-bar-seg.sedang {
    opacity: 0.62;
}

body.geointel .geo-bar-seg.rendah {
    background: var(--wr, var(--w));
    opacity: 0.5;
}

body.geointel .geo-bar-seg.luar {
    background-image: repeating-linear-gradient(135deg, rgba(13, 17, 23, 0.6) 0 2px, transparent 2px 5px);
}

body.geointel .geo-bar-nilai {
    text-align: right;
    white-space: nowrap;
    color: var(--text-secondary);
}

body.geointel .geo-bar-nilai strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: var(--text-primary);
}

body.geointel .geo-bar-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 9.5px;
    color: var(--text-muted);
}

body.geointel .geo-bar-legenda-kanan {
    margin-left: auto;
}

body.geointel .geo-pita {
    display: inline-block;
    width: 10px;
    height: 8px;
    margin-right: 4px;
    border-radius: 2px;
    background: #c9d1d9;
}

body.geointel .geo-pita.sedang {
    opacity: 0.62;
}

body.geointel .geo-pita.rendah {
    opacity: 0.32;
}

body.geointel .geo-pita.kelas {
    background: var(--w);
}

/* ---------- Layar lebih kecil ---------- */
@media (max-width: 1500px) {
    body.geointel .geo-label-persona {
        margin-left: 4px;
    }
}

/* QA F2: layar pendek (mis. proyektor 1366×768). Panel bawah dibuat lebih tinggi agar deret waktu terbaca,
   dan isi kartu dipadatkan */
@media (max-height: 820px) {
    body.geointel .bottom-panel {
        height: 256px;
        padding: 10px;
        gap: 10px;
    }

    body.geointel .bottom-panel .stat-card {
        padding: 10px;
        gap: 6px;
    }

    body.geointel .geo-bar-daftar {
        gap: 6px;
    }

    body.geointel .geo-citra-info {
        min-height: 0;
    }
}

/* Layar ≤1400 px: bar mesin waktu dipadatkan; label "Persona" disembunyikan supaya badge peringatan AOI muat */
@media (max-width: 1400px) {
    body.geointel .geo-label-persona {
        display: none;
    }

    body.geointel .geo-citra-info {
        min-height: 0;
        font-size: 10px;
    }

    body.geointel .geo-seg-btn {
        padding: 4px 5px;
        font-size: 9.5px;
    }

    body.geointel .geo-seg-kecil .geo-seg-btn {
        padding: 4px 7px;
        font-size: 12px;
    }

    body.geointel .geo-citra-baris {
        column-gap: 6px;
    }

    body.geointel .geo-citra-pilih {
        flex-basis: 80px;
    }
}

/* Keterangan cakupan komposit (QA F13): sisi berkomposit di luar bbox AOI */
body.geointel .geo-citra-cakupan {
    position: absolute;
    top: 130px;
    transform: translateX(-50%);
    z-index: 950;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-blue);
    border-radius: var(--radius);
    background: rgba(28, 33, 40, 0.96);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-primary);
    text-align: center;
}

body.geointel .geo-citra-cakupan > i {
    margin-right: 4px;
    color: var(--accent-blue);
}

body.geointel .geo-citra-cakupan-aksi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}

body.geointel .geo-grup-ringkas {
    margin-left: 4px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
}

body.geointel .geo-periode {
    color: var(--text-secondary);
}

/* QA F10 (opsional): ponsel/tablet sempit. style.css menumpuk kolom; peta diberi tinggi tetap dan
   panel mengapung dipersempit supaya tidak keluar dari peta */
@media (max-width: 900px) {
    body.geointel .geo-peta-wrap {
        flex: none;
        height: 72vh;
        min-height: 440px;
    }

    body.geointel .map-overlays-tl {
        left: 8px;
        right: 8px;
        top: 8px;
    }

    body.geointel .citra-bar.geo-citra {
        padding: 6px 8px;
    }

    body.geointel .geo-citra-kolom {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    body.geointel .geo-citra-sisi[data-sisi="kanan"] {
        padding: 6px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }

    body.geointel .geo-citra-info {
        font-size: 10px;
    }

    body.geointel .layer-control {
        top: auto;
        bottom: 8px;
        right: 8px;
        width: min(252px, calc(100% - 16px));
        max-height: 55%;
    }

    body.geointel .geo-peta-wrap .leaflet-bottom.leaflet-right {
        right: 0;
        bottom: 52px;
    }

    body.geointel .geo-pilihan {
        max-width: calc(100% - 24px);
        bottom: 52px;
    }

    body.geointel .bottom-panel {
        height: auto;
    }

    body.geointel .geo-deret-kanvas {
        min-height: 160px;
    }
}

/* Toast di Geo-Intel (QA F8 lanjutan). style.css menaruh toast di kiri bawah area peta (bottom 252px),
   tepat di atas kartu poligon terpilih dan atribusi citra. Di sini dinaikkan ±90 px supaya bebas dari
   .geo-pilihan dan atribusi, tetap di bawah bar mesin waktu dan di kiri panel layer. */
body.geointel:not(.wall) #toast-container {
    left: 312px;
    bottom: 340px;
    max-width: min(320px, calc(100vw - 32px));
}

@media (max-height: 820px) {
    body.geointel:not(.wall) #toast-container {
        bottom: 350px;
    }
}

@media (max-width: 1400px) {
    body.geointel:not(.wall) #toast-container {
        left: 272px;
    }
}

@media (max-width: 1200px) {
    body.geointel:not(.wall) #toast-container {
        left: 232px;
    }
}

@media (max-width: 900px) {
    body.geointel:not(.wall) #toast-container {
        left: 16px;
        bottom: 16px;
    }
}

/* ============================================================
   Fase 4 U2 (Laporan 08): filter keyakinan/peruntukan/lokasi izin, KPI direksi, popup, shell TIEI.layout
   ============================================================ */
body.geointel {
    --geo-pr-lainnya: #2dd4bf;
}

/* Toast: ikut naik setinggi footer demo (aturan tiei-layout untuk panel bawah tertutup/Mode Fokus lebih spesifik) */
body.geointel.tiei-ada-footer:not(.wall) #toast-container {
    bottom: calc(340px + var(--tiei-footer-h, 0px));
}

/* Header: tombol Mode Fokus Peta */
body.geointel .geo-btn-fokus[aria-pressed="true"] {
    color: var(--accent-orange);
    border-color: var(--accent-orange);
}

/* ---------- Filter area bukaan ---------- */
body.geointel .geo-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 6px 6px;
}

body.geointel .geo-filter-judul {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

body.geointel .geo-filter-ket {
    margin-left: auto;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent-orange);
}

body.geointel .geo-seg-penuh {
    display: flex;
    width: 100%;
}

body.geointel .geo-seg-penuh .geo-seg-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 4px;
    white-space: normal;
    line-height: 1.2;
}

body.geointel .geo-warnai {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    cursor: pointer;
}

body.geointel .geo-chip-daftar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

body.geointel .geo-chip-pr {
    gap: 5px;
    padding: 2px 8px 2px 7px;
}

body.geointel .geo-chip-pr[aria-pressed="false"] {
    opacity: 0.5;
    text-decoration: line-through;
}

body.geointel .geo-pr-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--w, #8b949e);
}

body.geointel .geo-chip-n {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

body.geointel .geo-kelas-daftar.netral .geo-swatch {
    background: var(--text-muted);
    opacity: 0.6;
}

body.geointel .geo-rincian-skor {
    margin: 2px 6px 4px;
    border-top: 1px dashed var(--border-color);
}

body.geointel .geo-rincian-skor > summary {
    padding: 5px 0 3px;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
}

body.geointel .geo-rincian-skor .geo-skor {
    padding: 2px 0 4px;
}

body.geointel .geo-rincian-skor .geo-catatan {
    padding: 2px 0 4px;
}

body.geointel #geo-skor-mentah {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

body.geointel .geo-sub-tutupan,
body.geointel .geo-sub-laut {
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 0 6px 6px 50px;
}

body.geointel .geo-tautan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent-blue);
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
}

body.geointel .geo-tautan:hover {
    text-decoration: underline;
}

/* Warna peruntukan (ikon di tooltip, popup, ringkasan, KPI) */
body.geointel .geo-pr { font-weight: 600; }
body.geointel .geo-pr-tambang { color: var(--tutupan-tambang, #fb923c); }
body.geointel .geo-pr-perkebunan { color: var(--tutupan-perkebunan, #a3e635); }
body.geointel .geo-pr-pemukiman { color: var(--tutupan-pemukiman, #c084fc); }
body.geointel .geo-pr-jalan { color: var(--tutupan-jalan, #e5e7eb); }
body.geointel .geo-pr-lainnya { color: var(--geo-pr-lainnya); }
body.geointel .geo-izin-luar { color: var(--accent-red); }
body.geointel .geo-izin-dalam { color: var(--accent-green); }

/* ---------- KPI direksi ---------- */
body.geointel .geo-kpi-judul > i {
    width: 14px;
    text-align: center;
}

body.geointel .geo-kpi-badge {
    margin-top: 6px;
}

body.geointel .geo-kpi-legal,
body.geointel .geo-kpi-laut {
    padding: 10px 12px;
}

body.geointel .geo-kpi-legal {
    border-color: color-mix(in srgb, var(--accent-red) 40%, var(--border-color));
}

body.geointel .geo-kpi-legal.mati {
    opacity: 0.45;
}

body.geointel .geo-kpi-laut .geo-kpi-judul > i {
    color: var(--geo-laut-luar, #f87171);
}

body.geointel .geo-kpi-legal .kpi-label,
body.geointel .geo-kpi-laut .kpi-label {
    margin-top: 6px;
    font-size: 10.5px;
}

body.geointel .geo-kpi-aksi {
    margin-top: 8px;
}

body.geointel .geo-kpi-laut .geo-tautan {
    margin-top: 6px;
}

body.geointel .geo-kpi-rincian {
    margin-top: 6px;
}

body.geointel .geo-kpi-rincian > summary,
body.geointel .geo-kpi-metode > summary {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
}

body.geointel .geo-kpi-rincian p {
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-secondary);
}

body.geointel .geo-kpi-metode {
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

body.geointel .geo-kpi-metode p:first-of-type {
    margin-top: 6px;
}

/* ---------- Popup area bukaan ---------- */
body.geointel .geo-popup-deteksi .geo-popup-sisip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

body.geointel .geo-popup-alasan {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--text-secondary);
}

body.geointel .geo-popup-rincian {
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-muted);
}

body.geointel .geo-popup-rincian > summary {
    cursor: pointer;
    font-weight: 600;
}

body.geointel .geo-popup-rincian p {
    margin-top: 4px;
    line-height: 1.45;
}

/* ---------- Mode Fokus Peta (TIEI.layout) ---------- */
/* Ringkasan 4 angka tampil di tengah atas peta: bar citra dan panel layer turun di bawahnya */
body.geointel.tiei-fokus .map-overlays-tl,
body.geointel.tiei-fokus .layer-control {
    top: 96px;
}

body.geointel.tiei-fokus .layer-control {
    max-height: calc(100% - 96px - var(--tiei-dock-ruang, 92px));
}

/* Kontrol kanan bawah, kartu terpilih, dan status naik di atas dock */
body.geointel.tiei-fokus .geo-peta-wrap .leaflet-bottom.leaflet-right {
    bottom: var(--tiei-dock-ruang, 92px);
}

body.geointel.tiei-fokus .geo-pilihan {
    bottom: var(--tiei-dock-ruang, 92px) !important;
}

body.geointel.tiei-fokus .geo-peta-status {
    bottom: calc(var(--tiei-dock-ruang, 92px) + 44px);
}

body.geointel .geo-lapis-ragu {
    color: var(--accent-amber);
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

/* Header Fase 4 (tab Laut + tombol Fokus peta): badge peringatan tidak boleh tergencet */
body.geointel .geo-aoi-peringatan {
    flex-shrink: 0;
}

body.geointel .geo-btn-fokus {
    flex-shrink: 0;
}

@media (max-width: 1750px) {
    body.geointel .geo-label-persona {
        display: none;
    }

    body.geointel .geo-btn-fokus span {
        display: none;
    }

    body.geointel .geo-btn-fokus {
        padding: 5px 9px;
    }

    body.geointel .geo-header-tengah .geo-select {
        max-width: 170px;
    }
}

@media (max-width: 1450px) {
    body.geointel .geo-header-tengah .geo-select {
        max-width: 150px;
    }

    body.geointel .db-status-indicator span {
        max-width: 120px;
    }
}

@media (max-width: 1500px) {
    body.geointel #geo-asof,
    body.geointel .header-right .header-divider {
        display: none;
    }
}

/* Mode Fokus: bar citra dan panel layer sudah turun di bawah ringkasan, jadi 4 angka pembuka boleh selebar peta */
body.geointel.tiei-fokus .tiei-ringkas {
    max-width: calc(100% - 32px);
}

@media (max-width: 1400px) {
    body.geointel .geo-kpi-baris {
        grid-template-columns: 12px 1fr auto 62px;
        gap: 6px;
    }
}

body.geointel .layer-checkbox.geo-lapis.mati {
    opacity: 0.55;
    cursor: not-allowed;
}

body.geointel .geo-peta-wrap.geo-ada-popup .geo-pilihan {
    display: none;
}

body.geointel .geo-kpi-catatan {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* QA D2: gambar bukti di popup tambang laut dipendekkan supaya popup muat di antara bar citra dan panel bawah */
body.geointel .leaflet-popup .geo-popup-bukti {
    max-height: 120px;
    width: 100%;
    object-fit: cover;
}

/* Revisi putaran 2: label "Dugaan …" + keyakinan (cadangan lokal bila TIEI.ui.badgeKeyakinan belum ada) */
body.geointel .geo-badge-keyakinan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

body.geointel .geo-badge-keyakinan::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

body.geointel .geo-badge-keyakinan.k-tinggi { color: var(--accent-red); border-color: color-mix(in srgb, var(--accent-red) 45%, transparent); }
body.geointel .geo-badge-keyakinan.k-sedang { color: var(--accent-amber); border-color: color-mix(in srgb, var(--accent-amber) 45%, transparent); }
body.geointel .geo-badge-keyakinan.k-rendah { color: var(--text-muted); }
body.geointel .geo-badge-keyakinan.k-filter { color: var(--accent-orange); border-color: color-mix(in srgb, var(--accent-orange) 45%, transparent); }

body.geointel .geo-dugaan {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
}