/* ======================================================================
   BASE STYLES & RESET (Standard PT Sans Wayfinding Jakarta)
   ====================================================================== */
html, body {
    margin: 0; padding: 0;
    font-family: 'PT Sans', sans-serif;
    overflow: hidden; 
    background: #f8fafc;
    width: 100%; height: 100%;
}

/* Container utama mengunci penuh layar */
.app-container {
    position: relative;
    width: 100vw; 
    height: 100vh;
    overflow: hidden;
}

/* Peta dipaksa memenuhi seluruh background layar */
#map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Di bawah panel */
}

#map { 
    width: 100%; 
    height: 100%; 
}

/* ======================================================================
   PANEL LAYER SYSTEM (DESKTOP MELAYANG)
   ====================================================================== */
.panel-sheet {
    position: absolute;
    top: 16px;
    bottom: 16px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    min-height: 0;
}

/* Sidebar Search di Kiri Melayang */
#sidebar {
    left: 16px;
    width: 360px;
    z-index: 10;
}

/* Detail Lintasan Rute di Kanan Melayang */
#detail-panel {
    right: 16px;
    width: 380px;
    z-index: 10;
    transform: translateX(120%);
    opacity: 0;
}

/* Class pembuka panel kanan */
#detail-panel.active-panel {
    transform: translateX(0);
    opacity: 1;
}

/* Pastikan saat hidden, dia tidak mengganggu klik di peta */
#detail-panel.hidden {
    display: flex !important;
    transform: translateX(120%) !important;
    opacity: 0 !important;
}

/* State fokus panel depan/belakang secara dinamis via JS */
.panel-sheet.bring-to-front {
    z-index: 20 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}

/* Drag Handle default sembunyi di desktop */
.drag-handle {
    width: 40px; height: 5px; background-color: #cbd5e1;
    border-radius: 3px; margin: 10px auto 2px auto;
    cursor: grab; display: none; flex-shrink: 0;
}
.drag-handle:active { cursor: grabbing; }

/* ======================================================================
   RESPONSIVE DESIGN (MOBILE BOTTOM SHEETS)
   ====================================================================== */
@media (max-width: 768px) {
    .panel-sheet {
        position: absolute; 
        top: auto; 
        bottom: 0; 
        left: 0; 
        right: 0;
        width: 100% !important; 
        height: 85vh; 
        border-radius: 16px 16px 0 0;
        transform: translateY(calc(100% - 35vh)) !important; /* Intip sepertiga layar */
        box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.15);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    #sidebar { z-index: 10; }
    #detail-panel { z-index: 11; transform: translateY(100%) !important; }
    #detail-panel.active-panel { transform: translateY(calc(100% - 35vh)) !important; }
    #detail-panel.hidden { transform: translateY(100%) !important; }
    
    .drag-handle { display: block; } /* Aktif di mobile */

    .floating-geo-btn { 
        bottom: calc(35vh + 16px); 
        left: auto; 
        right: 16px; 
        transform: none; 
    }
}