/* ============================================================
   style.css — dashboard public MCK (Bootstrap 5 + kustomisasi)
   Layout app-like: header, strip KPI, lalu area sidebar + peta
   yang mengisi sisa tinggi layar.
   ============================================================ */

:root {
    --brand: #0e7490;
    --brand-dark: #155e75;
    --brand-tint: #e0f2f7;
    --ink: #111827;
    --ink-secondary: #4b5563;
    --ink-muted: #6b7280;
    --surface: #f4f7fb;
    --line: #e5e7eb;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow: 0 4px 16px rgba(17, 24, 39, .08);
    --shadow-card: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .06);
    --gap-shell: 14px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background: var(--surface);
    color: var(--ink);
}

/* ---------- header ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.topbar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 40px;
    flex-shrink: 0;
}

/* Memakai logo-trim.png (1338x620), yaitu logo.png yang margin kosongnya
   sudah dipangkas, sehingga seluruh kotak terisi gambar. object-fit: contain
   menjamin logo tidak pernah terpotong. Rasio logo 2,16 : 1, jadi saat
   mengubah ukuran jaga width sekitar 2,16 kali height. */
.topbar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.topbar-title {
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.2;
    white-space: nowrap;
}

.topbar-subtitle {
    font-size: .80rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-updated {
    font-size: .72rem;
    color: var(--ink-muted);
}

@media (max-width: 575.98px) {
    .topbar-logo { width: 76px; height: 35px; }
    .topbar-updated { display: none; }
    .topbar-subtitle { white-space: normal; }
}

.btn-brand {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-active-color: #fff;
}

/* ---------- strip KPI ---------- */

/* Strip menyatu dengan latar halaman; tiap kartu memakai warna pastel
   sendiri lewat --tile-bg / --tile-line yang diset per kelas nada. */
.kpi-strip {
    padding: 14px 16px 4px;
    flex-shrink: 0;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gap-shell);
}

.kpi-tile {
    position: relative;
    overflow: hidden;
    padding: 12px clamp(10px, .9vw, 16px);
    min-height: 112px;
    min-width: 0;
    background: var(--tile-bg, #eef5fd);
    border: 1px solid var(--tile-line, #dbe8f8);
    border-radius: var(--radius-lg);
    /* Tile clickable: membuka modal drilldown (js/drilldown.js) */
    cursor: pointer;
}

.kpi-tile:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Nada warna kartu, urutannya mengikuti daftar KPI di app.js. */
.kpi-tile--biru   { --tile-bg: #eaf3fd; --tile-line: #d6e6f9; }
.kpi-tile--hijau  { --tile-bg: #ebf7f0; --tile-line: #d5ecdf; }
.kpi-tile--krem   { --tile-bg: #fdf7e7; --tile-line: #f3e6c2; }
.kpi-tile--langit { --tile-bg: #eaf5fa; --tile-line: #d4e8f3; }
.kpi-tile--nila   { --tile-bg: #edf1fc; --tile-line: #dae2f7; }
.kpi-tile--mint   { --tile-bg: #e9f7f1; --tile-line: #d0eade; }

/* Ilustrasi menempel di sudut kanan bawah dan sengaja sedikit keluar
   kotak; bagian yang lewat dipotong overflow: hidden pada .kpi-tile. */
.kpi-art {
    position: absolute;
    right: 8px;
    bottom: 6px;
    height: clamp(58px, 5.2vw, 88px);
    width: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* Lebar teks disisakan dari lebar ilustrasi supaya angka dan keterangan
   tidak pernah tertimpa gambar. Ukuran ilustrasi, angka, dan sisa ruang
   teks memakai clamp() yang skalanya seiring lebar layar, sehingga nilai
   terpanjang ("Rp 5 Milyar") tetap utuh pada layar 1200px ke atas. */
.kpi-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: calc(100% - clamp(62px, 5.6vw, 96px));
}

.kpi-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink-secondary);
    line-height: 1.2;
}

.kpi-value {
    font-size: clamp(1.08rem, 1.05vw + .285rem, 1.63rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-note {
    font-size: .72rem;
    line-height: 1.32;
    color: var(--ink-muted);
}

@media (max-width: 1200px) {
    .kpi-row { grid-template-columns: repeat(3, 1fr); }
    .kpi-art { height: 90px; }
    .kpi-value { font-size: 1.68rem; }
    .kpi-text { max-width: calc(100% - 100px); }
}

@media (max-width: 767.98px) {
    .kpi-strip { padding: 12px 12px 2px; }
    .kpi-row {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .kpi-tile { min-width: 232px; flex-shrink: 0; }
}

/* ---------- konten utama ---------- */

/* Sidebar dan peta berdiri sebagai dua kartu terpisah di atas latar
   halaman, bukan panel yang menempel penuh ke tepi layar. */
.content {
    flex: 1;
    display: flex;
    gap: var(--gap-shell);
    padding: 10px 16px 16px;
    min-height: 0;
    position: relative;
}

/* ---------- sidebar (filter + daftar lokasi) ---------- */

.sidebar {
    width: 340px;
    flex-shrink: 0;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    min-height: 0;
    overflow: hidden;
}

.sidebar-section {
    padding: 14px 16px;
}

.sidebar-section + .sidebar-section {
    border-top: 1px solid var(--line);
}

.sidebar-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
}

/* Pintasan ke daftar lengkap; selalu terlihat di dasar sidebar. */
.sidebar-footer {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.btn-outline-brand {
    --bs-btn-color: var(--brand-dark);
    --bs-btn-border-color: #cfe3ea;
    --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--brand-tint);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-tint);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-active-color: var(--brand-dark);
    --bs-btn-disabled-color: var(--ink-muted);
    --bs-btn-disabled-border-color: var(--line);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    padding: 9px 12px;
}

.sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
}

.sidebar-heading .bi {
    color: var(--brand);
    margin-right: 2px;
}

.sidebar-heading .btn-link {
    font-size: .75rem;
    text-decoration: none;
    color: var(--brand);
    font-weight: 600;
}

.form-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--ink-muted);
    margin-bottom: 4px;
}

/* input pencarian dengan ikon di dalam */
.search-wrap {
    position: relative;
}

.search-wrap .bi-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    font-size: .85rem;
    pointer-events: none;
    z-index: 5;
}

.search-wrap .form-control {
    padding-left: 34px;
    border-radius: 10px;
    font-size: .85rem;
}

/* chip status: tombol toggle, warna titik + label teks */
.status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: opacity .15s, border-color .15s, box-shadow .15s;
}

.status-chip .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Chip aktif memakai warna statusnya sendiri (--chip diisi inline oleh
   app.js dari MckUtil.STATUS), bukan warna brand, supaya indikator status
   di chip sewarna dengan pin peta dan titik pada daftar. */
.status-chip.is-active {
    border-color: var(--chip, var(--brand));
    box-shadow: 0 0 0 1px var(--chip, var(--brand)) inset;
    color: var(--ink);
}

.status-chip:not(.is-active) {
    opacity: .45;
}

/* ---------- daftar lokasi ---------- */

.mck-list {
    flex: 1;
    overflow-y: auto;
    margin: 0 -16px;
    min-height: 0;
}

.list-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
    cursor: pointer;
    transition: background .12s;
}

.list-item:hover {
    background: var(--surface);
}

.list-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.list-item-name {
    font-size: .83rem;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-item-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--ink-secondary);
    flex-shrink: 0;
}

.list-item-status .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.list-item-sub {
    font-size: .72rem;
    color: var(--ink-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-item-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.progress-track {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 999px;
}

.progress-text {
    font-size: .68rem;
    font-weight: 600;
    color: var(--ink-muted);
    min-width: 32px;
    text-align: right;
}

.list-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--ink-muted);
    font-size: .8rem;
}

.list-empty .bi {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 6px;
}

/* ---------- modal daftar lengkap (DataTables) ---------- */

#mck-table {
    font-size: .8rem;
}

#mck-table thead th {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    white-space: nowrap;
}

#mck-table .table-progress {
    min-width: 130px;
    margin-top: 0;
}

#mck-table .btn-goto {
    font-size: .7rem;
    white-space: nowrap;
}

#list-modal .dataTables_wrapper .dataTables_filter input,
#list-modal .dataTables_wrapper .dataTables_length select {
    font-size: .8rem;
}

#list-modal .dataTables_wrapper .dataTables_info,
#list-modal .dataTables_wrapper .dataTables_paginate {
    font-size: .75rem;
}

/* ---------- modal drilldown KPI (satu modal, 6 widget bergantian) ---------- */

#drill-table {
    font-size: .8rem;
}

#drill-table thead th {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    white-space: nowrap;
}

#drill-table tfoot th {
    font-size: .75rem;
    background: #f8fafc;
    border-top: 2px solid var(--line);
}

#drill-table .btn-goto,
#drill-table .btn-goto-kolaborator,
#drill-table .btn-goto-wilayah {
    font-size: .7rem;
    white-space: nowrap;
}

/* Sel status yang membawa progress pembangunan di bawah label statusnya */
.cell-status-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.cell-status-progress .table-progress {
    margin-top: 0;
}

/* Baris mandiri (kolaborator_id NULL): label "Mandiri Paljaya" */
.text-muted-italic {
    font-style: italic;
    color: var(--ink-muted);
}

/* Selisih realisasi > estimasi (over budget) */
.text-negative {
    color: #dc2626;
}

#drill-modal .dataTables_wrapper .dataTables_filter input,
#drill-modal .dataTables_wrapper .dataTables_length select {
    font-size: .8rem;
}

#drill-modal .dataTables_wrapper .dataTables_info,
#drill-modal .dataTables_wrapper .dataTables_paginate {
    font-size: .75rem;
}

.drill-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 0;
}

.drill-error {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #7f1d1d;
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .82rem;
    margin-bottom: 14px;
}

/* ---------- area peta ---------- */

.map-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

#map {
    position: absolute;
    inset: 0;
}

.mck-pin svg {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

/* Gelembung cluster sengaja memakai warna brand yang netral, bukan salah
   satu warna status, karena isinya bisa bercampur beberapa status. */
.mck-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    border: 3px solid rgba(255, 255, 255, .92);
    box-shadow: 0 2px 6px rgba(17, 24, 39, .35);
}

.map-counter {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--ink-secondary);
    box-shadow: var(--shadow);
}

.map-counter .bi {
    color: var(--brand);
    font-size: .9rem;
}

/* Pilihan layer peta: ikon di sudut kanan atas yang membuka panel daftar
   layer. Panel dibuat agar muat bertambah tanpa mengubah tata letak peta. */
.map-layers {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.map-layers-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink-secondary);
    font-size: 1.05rem;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.map-layers-btn:hover,
.map-layers-btn[aria-expanded="true"] {
    color: var(--brand);
    border-color: var(--brand);
}

.map-layers-panel {
    width: 232px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--shadow);
}

.map-layers-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    margin-bottom: 9px;
}

.map-layer-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    cursor: pointer;
}

.map-layer-item input {
    width: 15px;
    height: 15px;
    accent-color: var(--brand);
    cursor: pointer;
}

.map-layer-swatch {
    width: 16px;
    height: 4px;
    border-radius: 2px;
}

.map-layer-name {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink);
}

/* Keterangan ringkas layer (jumlah data atau status pemuatan), di baris kedua
   sejajar dengan nama layer. */
.map-layer-note {
    grid-column: 3;
    font-size: .68rem;
    color: var(--ink-secondary);
}

.map-layer-note:empty {
    display: none;
}

/* Panel atribut ruas pipa. Isinya memakai gaya popup peta (popup-header,
   popup-row) supaya tampilannya sama, hanya letaknya yang berbeda: menempel di
   sudut bawah peta dengan jarak dari tepi, dan duduk di atas baris penghitung
   serta legenda agar keduanya tidak tertutup. */
/* Bingkai putih selubung ruas terpilih. Bayangannya dibuat dengan drop-shadow
   agar mengikuti bentuk garis, bukan kotak pembatasnya. */
.ruas-sorot-casing {
    filter: drop-shadow(0 1px 3px rgba(15, 23, 42, .35));
}

/* Letak panel (left dan top) dihitung js/map.js relatif terhadap ruas yang
   diklik, jadi di sini hanya ukuran dan tampilannya. */
.ruas-panel {
    position: absolute;
    z-index: 1000;
    width: 280px;
    max-height: calc(100% - 28px);
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.ruas-panel .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: sticky;
    top: 0;
}

.ruas-panel-close {
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: .85;
}

.ruas-panel-close:hover {
    opacity: 1;
}

/* Pada layar sempit legenda memakan ruang lebih tinggi, jadi panel diangkat
   dan dilebarkan mengikuti lebar peta. */
/* Pada layar sempit panel dipersempit agar tetap menyisakan ruang peta di
   samping ruas yang sedang dipilih. */
@media (max-width: 575.98px) {
    .ruas-panel {
        width: 240px;
    }
}

/* Legenda warna status. Elemen tampilan saja, tidak mengubah data peta.
   Ditempatkan di kiri kontrol zoom/layer Leaflet (sudut kanan bawah). */
.map-legend {
    position: absolute;
    right: 66px;
    bottom: 14px;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    max-width: calc(100% - 200px);
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: var(--shadow);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--ink-secondary);
    white-space: nowrap;
}

.legend-item .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .map-legend { display: none; }
}

/* ---------- popup detail ---------- */

.custom-popup .leaflet-popup-content-wrapper {
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.custom-popup .leaflet-popup-content {
    margin: 0;
    width: 280px !important;
    font-family: inherit;
}

.popup-header {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    padding: 10px 14px;
}

.popup-body {
    padding: 8px 14px;
}

.popup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--line);
    font-size: .74rem;
}

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

.popup-label {
    color: var(--ink-muted);
    flex-shrink: 0;
}

.popup-value {
    font-weight: 600;
    color: var(--ink);
    text-align: right;
}

.popup-value .badge {
    font-size: .68rem;
    font-weight: 600;
}

.popup-photo {
    padding: 0 14px 12px;
}

.popup-photo-frame {
    position: relative;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.popup-photo-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    color: var(--ink-muted);
}

.popup-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .2s;
}

.popup-photo-frame img.is-loaded {
    opacity: 1;
}

/* ---------- loading dan error ---------- */

.loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(2px);
}

.loading-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid var(--brand-tint);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

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

.loading-text {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-secondary);
}

.error-box {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #7f1d1d;
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: .78rem;
    box-shadow: var(--shadow);
    max-width: calc(100% - 24px);
}

.is-hidden {
    display: none !important;
}

/* ---------- select2 penyesuaian kecil ---------- */

.select2-container--bootstrap-5 .select2-selection {
    font-size: .82rem;
    border-radius: 10px;
}

.select2-container--bootstrap-5 .select2-dropdown {
    font-size: .82rem;
}

/* ---------- responsif: sidebar jadi panel melayang ---------- */

.sidebar-toggle {
    position: absolute;
    top: 22px;
    left: 28px;
    z-index: 1049;
    box-shadow: var(--shadow);
    font-size: .8rem;
}

@media (max-width: 991.98px) {
    .content { padding: 8px 12px 12px; }

    .sidebar {
        position: absolute;
        top: 68px;
        left: 24px;
        right: 24px;
        width: auto;
        z-index: 1050;
        max-height: calc(100% - 84px);
        overflow-y: auto;
        box-shadow: var(--shadow);
    }

    /* Pada mode panel melayang, daftar tidak memakai flex penuh;
       tingginya dibatasi agar filter tetap terlihat. */
    .sidebar-list { flex: none; }
    .mck-list { max-height: 40vh; }
}