/* ============================================================
   TIEI v3 · peta.css: gaya khusus halaman Peta / Command Center (pemilik: P1)
   Dimuat setelah style.css. Token warna dari style.css :root; kelas baru berprefiks .peta-.
   ============================================================ */

/* Panel layer: kini dikelompokkan dan berlegenda, jadi lebih lebar dan lebih tinggi */
.layer-control {
    width: 252px;
}

@media (min-width: 901px) {
    .layer-control-body {
        max-height: calc(100vh - 345px);
    }

    body.wall .layer-control-body {
        max-height: calc(100vh - 110px);
    }
}

.layer-control-body {
    gap: 2px;
}

.layer-control-body .legend-group-body {
    gap: 0;
}

.layer-count small {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
}

.peta-basemap-note {
    margin: 0;
    padding: 2px 4px 4px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--text-muted);
}

.peta-basemap-note.luring {
    color: var(--accent-amber);
}

.peta-basemap-note[hidden] {
    display: none;
}

/* Swatch layer baru */
.legend-swatch.kab {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    border: 2px dashed var(--accent-orange);
    background: rgba(245, 158, 11, 0.15);
}

.legend-swatch.iuplaut {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    border: 2px solid var(--geo-iuplaut);
    background: color-mix(in srgb, var(--geo-iuplaut) 15%, transparent);
}

.legend-swatch.deteksi {
    width: 14px;
    height: 14px;
    margin: 0 2px;
    border-radius: 3px;
    border-color: rgba(255, 255, 255, 0.5);
    background: var(--geo-bukaan);
}

/* Legenda kuantitatif di bawah baris layer yang aktif */
.peta-legend {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 8px 8px 36px;
    font-size: 10px;
    color: var(--text-secondary);
}

.peta-legend[hidden] {
    display: none;
}

.peta-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
}

.peta-legend-row .num {
    margin-left: auto;
    padding-left: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.peta-legend-title {
    font-size: 9.5px;
    color: var(--text-muted);
}

.peta-legend-sub {
    margin-top: 4px;
}

.peta-legend-note {
    margin: 2px 0 0;
    font-size: 9.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

.peta-legend-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--accent-blue);
    text-decoration: none;
}

.peta-legend-link:hover,
.peta-legend-link:focus-visible {
    text-decoration: underline;
}

.peta-legend-link[hidden] {
    display: none;
}

.peta-geointel-link {
    padding: 4px 8px 6px;
}

.peta-kotak {
    flex-shrink: 0;
    width: 12px;
    height: 10px;
    border-radius: 2px;
}

/* Warna diisi inline dengan opasitas yang sama dengan isian poligon di peta */
.peta-kotak.cadangan {
    width: 18px;
    border: 1px solid rgba(245, 158, 11, 0.6);
}

.peta-garis {
    flex-shrink: 0;
    width: 18px;
    height: 0;
    border-top: 2px solid var(--geo-iuplaut);
}

.peta-garis.putus {
    border-top-style: dashed;
}

.peta-garis.aoi {
    border-top: 2px dashed var(--text-primary);
}

.peta-garis.aoi.peringatan {
    border-top-color: var(--accent-amber);
}

.peta-legend-aoi-sub {
    margin: -2px 0 2px 24px;
    font-size: 9.5px;
    color: var(--text-muted);
}

.peta-legend-aoi .badge-peringatan {
    margin-left: 4px;
    padding: 0 6px;
    font-size: 9px;
}

.peta-titik {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border-radius: 50%;
    border: 2px solid var(--accent-green);
}

.peta-titik.darat {
    background: #22c55e;
}

.peta-titik.laut {
    background: rgba(34, 197, 94, 0.15);
}

.peta-titik.ragu {
    border-style: dashed;
    background: transparent;
}

.peta-sw-peti,
.peta-sw-kluster {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0 2px;
    border-radius: 50%;
}

.peta-sw-peti {
    background: var(--accent-red);
    border: 2px solid #fff;
}

.peta-sw-kluster {
    background: rgba(248, 113, 113, 0.25);
    border: 2px dashed var(--accent-amber);
}

/* Legenda resmi GIBS berlatar putih; hanya bagian "Rain Rate" yang ditampilkan */
.peta-legend-img {
    width: 190px;
    max-width: 100%;
    height: 44px;
    padding: 2px 3px;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
}

.peta-legend-img[hidden] {
    display: none;
}

.peta-legend-img img {
    display: block;
    width: 184px;
    height: auto;
}

.peta-status-aoi {
    color: var(--accent-green);
    font-weight: 600;
}

.peta-status-aoi.belum {
    color: var(--text-muted);
}

/* Label batas AOI di peta (sudut barat laut), klik membuka Geo-Intel */
.peta-aoi-label-wrap {
    background: none;
    border: none;
}

.peta-aoi-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(230, 237, 243, 0.55);
    background: rgba(13, 17, 23, 0.88);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transform: translateY(calc(-100% - 4px));
}

.peta-aoi-label.peringatan {
    border-color: var(--accent-amber);
}

.peta-aoi-label .badge-peringatan {
    padding: 0 6px;
    font-size: 9px;
}

/* Tautan "Detail" kartu bawah: teks di layar lebar, ikon di laptop (lihat media 901–1560 px di bawah) */
.card-link .peta-link-ikon {
    display: none;
    font-size: 10px;
}

/* Laptop 1366–1536 px: kartu bawah hanya ±250 px, judul + angka + Detail tidak muat dalam satu baris
   (ambang potong ±1510 px dengan grid 280/1fr/260). Dipadatkan; judul boleh membungkus sebagai cadangan. */
@media (min-width: 901px) and (max-width: 1560px) {
    .stat-card {
        padding: 10px;
    }

    .stat-card .card-header {
        gap: 8px;
    }

    .stat-card .card-title {
        gap: 5px;
        font-size: 10px;
        line-height: 1.2;
        white-space: normal;
    }

    .stat-card .card-value {
        font-size: 13px;
    }

    /* Nama aksesibel tetap dari aria-label tautan */
    .card-link .peta-link-teks {
        display: none;
    }

    .card-link .peta-link-ikon {
        display: inline;
    }
}

/* Ponsel: kelompok tombol kanan header boleh membungkus supaya halaman tidak bisa digulir ke samping
   (baris Fokus sudah digulir di dalam wadahnya sendiri lewat overflow-x:auto dari style.css) */
@media (max-width: 600px) {
    /* Empat tab (Peta, Analitik, Geo-Intel, Laut) baru muat di 390 px tanpa ikon */
    .view-tab i {
        display: none;
    }

    .header-right {
        flex-shrink: 1;
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
    }
}

/* Titik warna tipe kapal di KPI dan grafik armada */
.peta-dot {
    font-size: 6px;
    vertical-align: middle;
}

.peta-dot.own,
.peta-c-own { color: var(--accent-green); }
.peta-dot.mitra,
.peta-c-mitra { color: var(--accent-orange); }
.peta-dot.sewa,
.peta-c-sewa { color: var(--accent-blue); }
.peta-dot.lain { color: var(--text-muted); }

.status-fill.peta-fill-sewa { background: var(--accent-blue); }
.status-fill.peta-fill-lain { background: var(--text-muted); }

/* Badge tipe di modal detail yang belum diberi gaya di style.css */
.modal-type-badge.kabupaten {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-orange);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.modal-type-badge.karyawan {
    background: rgba(167, 139, 250, 0.15);
    color: var(--accent-purple);
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.alert-title .badge-peringatan {
    margin-left: 2px;
    padding: 0 6px;
    font-size: 9px;
    vertical-align: 1px;
}

/* ============================================================
   Fase 4 (U1): layer baru, kartu produksi per tahap, modul dock, tombol Fokus peta
   ============================================================ */

/* Tombol header "Fokus peta" saat Mode Fokus aktif */
#btn-fokus[aria-pressed="true"] {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* Swatch layer Fase 4 */
.legend-swatch.wiup {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    border: 2px solid var(--geo-wiup);
    background: color-mix(in srgb, var(--geo-wiup) 12%, transparent);
}

.legend-swatch.tutupan {
    border-radius: 3px;
    border-color: rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, var(--tutupan-hutan) 0 33%, var(--tutupan-perkebunan) 33% 66%, var(--tutupan-pemukiman) 66%);
}

.legend-swatch.laut {
    background: var(--geo-laut-luar);
}

.peta-garis.wiup {
    border-top-color: var(--geo-wiup);
}

.peta-titik.laut-luar {
    border-color: #fff;
    background: var(--geo-laut-luar);
}

.peta-titik.laut-dalam {
    border-color: #fff;
    background: var(--geo-laut-dalam);
}

.peta-legend-jenis i {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
}

.peta-legend-tombol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Kartu "Produksi per tahap" (Chart.js) di panel bawah dan di jendela modul */
.card-body.peta-tahap-body {
    justify-content: flex-start;
    gap: 4px;
    min-height: 0;          /* boleh menyusut di bawah tinggi isi; grafik mengisi sisa ruang */
}

/* contain: size: tinggi kanvas Chart.js tidak ikut menentukan tinggi baris grid panel bawah (tanpa ini 247 > 240 px) */
.peta-grafik-tahap {
    position: relative;
    flex: 1;
    min-height: 70px;
    overflow: hidden;
    contain: size;
}

.peta-tahap-legenda {
    align-items: center;
    margin-top: 0;
}

.peta-tahap-legenda .tahap-legenda.ringkas {
    margin: 0;
}

.peta-tahap-catatan {
    margin: 0;
    font-size: 9.5px;
    line-height: 1.35;
    color: var(--text-muted);
}

.tiei-modul .peta-tahap-catatan {
    font-size: 11px;
}

/* KPI produksi: rincian per tahap di bawah angka besar */
.peta-kpi-tahap {
    margin-bottom: 6px;
}

.peta-kpi-tahap span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

/* Isi modul ber-render (Bukaan baru, Laut, PETI, Stok gudang) */
.peta-modul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.peta-modul-pengantar {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
}

.peta-modul-blok {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(13, 17, 23, 0.45);
}

.peta-modul-blok h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.peta-modul-angka {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.peta-modul-angka strong {
    font-family: 'Rajdhani', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.peta-modul-angka span {
    line-height: 1.35;
}

.peta-modul-dua {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.peta-modul-dua span {
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    line-height: 1.35;
}

.peta-modul-dua b {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    color: var(--text-primary);
}

.peta-modul-dua .peta-merah b,
.peta-merah {
    color: var(--accent-red);
}

.peta-modul-catatan {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
}

.peta-modul-sub {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.peta-modul-tautan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
}

.peta-modul-tautan:hover,
.peta-modul-tautan:focus-visible {
    text-decoration: underline;
}

.peta-modul-tombol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.peta-modul-daftar {
    margin: 0;
    padding-left: 16px;
    font-size: 11px;
    line-height: 1.5;
}

.peta-batang-daftar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.peta-batang-baris {
    display: grid;
    grid-template-columns: 78px 1fr 40px;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.peta-batang-baris b {
    text-align: right;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: var(--text-primary);
}

.peta-batang {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.peta-batang i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--text-muted);
}

.peta-batang i.pr-tambang { background: var(--tutupan-tambang); }
.peta-batang i.pr-perkebunan { background: var(--tutupan-perkebunan); }
.peta-batang i.pr-pemukiman { background: var(--tutupan-pemukiman); }
.peta-batang i.pr-jalan { background: var(--tutupan-jalan); }

/* Daftar kejadian kapal / laporan teratas */
.peta-kejadian {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.peta-kejadian li {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 8px;
    padding: 4px 6px 4px 8px;
    border-left: 3px solid var(--border-color);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 11px;
    line-height: 1.4;
}

.peta-kejadian li.tinggi {
    border-left-color: var(--accent-red);
}

.peta-kejadian li.sedang {
    border-left-color: var(--accent-orange);
}

.peta-kejadian time {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
}

/* Tabel stok gudang per tahap */
.peta-tabel-stok {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.peta-tabel-stok th,
.peta-tabel-stok td {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.6);
    text-align: right;
    vertical-align: top;
}

.peta-tabel-stok th[scope="row"],
.peta-tabel-stok thead th:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
}

.peta-tabel-stok td {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.peta-tabel-stok td small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
}

.peta-tabel-stok tr.peta-stok-selisih th[scope="row"] {
    color: var(--accent-amber);
}

.peta-kosong {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Header Peta (tab Laut + tombol Fokus peta): teks sekunder dibuang lebih awal supaya header tetap satu baris
   sampai breakpoint bungkus style.css (≤1536 px). "Fokus peta" tetap bertulisan selama muat. */
@media (max-width: 2100px) {
    .header-bar:has(.filter-btn) .brand span,
    .header-bar:has(.filter-btn) .help-btn:not(#btn-fokus) span {
        display: none;
    }

    .header-bar:has(.filter-btn) .help-btn:not(#btn-fokus) {
        padding: 5px 9px;
    }
}

@media (max-width: 1700px) {
    .header-bar:has(.filter-btn) #db-status-text,
    .header-bar:has(.filter-btn) .peta-teks-muat {
        display: none;
    }
}

.peta-legend-cek {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-secondary);
    cursor: pointer;
}

.peta-tahap-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
}

/* Kartu di panel bawah: catatan satu baris (teks lengkap di title); di jendela modul boleh membungkus */
.bottom-panel .peta-tahap-catatan {
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =====================================================================
   REVISI PUTARAN 2 (Laporan 08 §8): peta dasar vektor, kapal terpadu, pin Sorotan
   ===================================================================== */

/* Empat tombol peta dasar (Peta, Satelit, Laut, Gelap) dalam satu baris panel layer */
.layer-control .basemap-switch {
    gap: 3px;
}

.layer-control .basemap-btn {
    min-width: 0;
    padding: 4px 2px;
    gap: 3px;
    font-size: 10px;
}

.layer-control .basemap-btn i {
    font-size: 9px;
}

.peta-legend-badge {
    flex-wrap: wrap;
    gap: 4px;
}

/* ---------- Sorotan: saklar, daftar, pin, kartu popup ---------- */
.peta-sorotan-baris {
    display: grid;
    grid-template-columns: auto 20px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    min-height: 32px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
}

.peta-sorotan-baris:hover {
    background: rgba(255, 255, 255, 0.05);
}

.peta-sorotan-baris input {
    accent-color: var(--accent-orange);
    cursor: pointer;
}

.legend-swatch.sorotan {
    background: #f8fafc;
    color: #0d1117;
    border-color: rgba(255, 255, 255, 0.6);
}

.peta-sorotan-daftar {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 0 4px;
    padding: 0 0 0 4px;
    list-style: none;
}

.peta-sorotan-daftar.mati {
    opacity: 0.5;
}

.peta-sorotan-item {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 3px 6px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 10.5px;
    text-align: left;
    cursor: pointer;
}

.peta-sorotan-item:hover,
.peta-sorotan-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

/* Judul pin boleh dua baris (nama kapal panjang) supaya tidak terpotong */
.peta-sorotan-teks {
    min-width: 0;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Warna per jenis pin (cincin pin, nomor di daftar dan popup) */
.pin-bukaan { --pin: #f87171; }
.pin-laut { --pin: #22d3ee; }
.pin-kapal { --pin: #4ade80; }
.pin-ais { --pin: #fb923c; }
.pin-gudang { --pin: #fbbf24; }
.pin-wilayah { --pin: #c084fc; }

.peta-sorotan-no {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pin, #f8fafc);
    border-radius: 50%;
    background: #0d1117;
    color: #f8fafc;
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}

/* Pin di peta: lingkaran putih bercincin warna jenis, ikon, nomor, dan tangkai ke titik lokasi */
.peta-pin {
    position: relative;
    width: 30px;
    height: 40px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65));
}

.peta-pin-bulat {
    position: absolute;
    top: 2px;
    left: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 3px solid var(--pin, #f8fafc);
    border-radius: 50%;
    background: #f8fafc;
    color: #0d1117;
    font-size: 11px;
    box-sizing: border-box;
}

.peta-pin::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 26px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 13px solid var(--pin, #f8fafc);
}

.peta-pin-no {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border: 1px solid var(--pin, #f8fafc);
    border-radius: 8px;
    background: #0d1117;
    color: #f8fafc;
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    box-sizing: border-box;
}

/* Pin yang digeser agar tidak menutupi pin lain: tangkai disembunyikan, cincin putus-putus */
.peta-pin.geser::after {
    display: none;
}

.peta-pin.geser .peta-pin-bulat {
    border-style: dashed;
}

.peta-pin-kartu {
    min-width: 260px;
}

.peta-pin-kategori {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.peta-pin-badge {
    margin: 4px 0 6px;
}

.peta-pin-angka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 6px;
    margin: 6px 0;
}

.peta-pin-angka div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(13, 17, 23, 0.45);
}

.peta-pin-angka b {
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    line-height: 1.1;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.peta-pin-angka span {
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-muted);
}

.peta-pin-kalimat {
    margin: 4px 0 6px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.peta-pin-aksi {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-blue);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.peta-pin-aksi:hover,
.peta-pin-aksi:focus-visible {
    text-decoration: underline;
}

.peta-pin-aksi i {
    font-size: 10px;
}

/* ---------- Kapal terpadu: status sumber, sub-filter, chip di atas peta ---------- */
.peta-ais-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    margin-bottom: 3px;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.peta-ais-status strong,
.peta-ais-chip strong {
    color: var(--text-primary);
    font-weight: 700;
}

.peta-ais-ket {
    color: var(--text-muted);
}

.peta-ais-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.rekaman .peta-ais-dot {
    background: var(--accent-amber);
}

.live .peta-ais-dot {
    background: #ef4444;
    animation: peta-denyut 1.4s ease-in-out infinite;
}

.peta-ais-status.live strong,
.peta-ais-chip.live strong {
    color: #fca5a5;
}

@keyframes peta-denyut {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .live .peta-ais-dot {
        animation: none;
    }
}

.peta-kapal-filter {
    margin-top: 1px;
}

.peta-kapal-filter .num {
    margin-left: auto;
    padding-left: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Baris warna kategori: chip mini TIEI.geo.ikonKapalMini (bentuk sama dengan penanda peta) + label */
.peta-kapal-warna {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 2px 0 1px 18px;
    font-size: 9.5px;
    color: var(--text-muted);
}

.peta-kapal-warna > span {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.peta-kapal-filter .geo-kapal-mini {
    margin: -2px 0;
}

.peta-ais-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    font-size: 11px;
    color: var(--text-secondary);
    text-decoration: none;
}

.peta-ais-chip:hover,
.peta-ais-chip:focus-visible {
    border-color: var(--accent-blue);
}

.peta-ais-chip.live {
    border-color: rgba(239, 68, 68, 0.6);
}

.peta-ais-chip i {
    font-size: 9px;
    color: var(--text-muted);
}

.peta-ais-chip[hidden] {
    display: none;
}

.peta-kpi-ais {
    color: var(--text-secondary);
}

.peta-kpi-ais i {
    font-size: 9px;
    color: var(--accent-green);
}

/* Modul Laut: tiga angka kapal; kejadian sesudah jam rekaman sekarang tampil redup */
.peta-modul-tiga {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.peta-modul-tiga span {
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 10.5px;
    line-height: 1.35;
}

.peta-modul-tiga b {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    color: var(--text-primary);
}

.peta-modul-ket {
    font-size: 10px;
    color: var(--text-muted);
}

.peta-kejadian li.nanti {
    opacity: 0.5;
}

/* Popup yang isinya menggulir (peta pendek, mis. 1366×768 atau ponsel): baris tautan dan tombol aksi menempel di
   dasar popup, jadi tautan Geo-Intel / Pengawasan Laut selalu terlihat tanpa menggulir */
.leaflet-popup-content .geo-popup-tautan {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 6px 0 2px;
    background: var(--bg-card);
}

.leaflet-popup-scrolled .geo-popup-tautan {
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -6px 8px -6px rgba(0, 0, 0, 0.6);
}