/* ==========================================================================
   assets/css/style.css
   Kustomisasi UI, Efek 3D, Slider, dan Leaflet Map
   ========================================================================== */

/* 1. Global & Typography */
body { 
    font-family: 'Inter', sans-serif; 
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* 2. Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* 3. Efek 3D untuk Tombol dan Container */
.effect-3d-pressed {
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 5px rgba(255,255,255,0.8);
}
.effect-3d-raised {
    box-shadow: 4px 4px 10px rgba(0,0,0,0.08), -2px -2px 10px rgba(255,255,255,0.9);
}
.btn-3d {
    box-shadow: 0 4px 0 #004493, 0 6px 10px rgba(0,0,0,0.15);
    transition: all 0.1s ease;
}
.btn-3d:active {
    box-shadow: 0 2px 0 #004493, 0 3px 6px rgba(0,0,0,0.15);
    transform: translateY(2px);
}

/* 4. Kustomisasi Range Slider (Time Player) */
input[type="range"] {
    -webkit-appearance: none;
    background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #0058bc; /* Warna Secondary */
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.4);
    margin-top: -6px;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: #e5eeff; /* Warna Surface Container */
    border-radius: 3px;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}

/* ==========================================================================
   5. Estetika Leaflet Map (Popup & Marker)
   ========================================================================== */

/* Menghilangkan padding bawaan Leaflet agar styling Tailwind di dalam popup berfungsi penuh */
.leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Shadow-2xl Tailwind */
}
.leaflet-popup-content {
    margin: 0;
    line-height: inherit;
    width: auto !important; /* Biarkan konten mengatur lebarnya sendiri */
}

/* Segitiga penunjuk ke arah titik api */
.leaflet-popup-tip-container {
    width: 40px;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
}
.leaflet-popup-tip {
    width: 17px;
    height: 17px;
    padding: 1px;
    margin: -10px auto 0;
    transform: rotate(45deg);
    background: white;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}

/* Lingkaran titik api kustom (jika nanti Anda ingin pakai DivIcon di Leaflet) */
.map-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.4);
}

.custom-popup .leaflet-popup-content-wrapper {
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.custom-popup .leaflet-popup-content {
    margin: 0;
}

.custom-popup .leaflet-popup-tip {
    background: white;
}

.leaflet-popup-card {
    padding: 16px;
    min-width: 220px;
    font-family: Inter, sans-serif;
}

.popup-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.popup-row {
    margin-bottom: 6px;
    color: #6b7280;
    font-size: 12px;
}

.popup-value {
    font-size: 24px;
    font-weight: 700;
    color: #dc2626;
}

.popup-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.popup-label {
    color: #6b7280;
    font-size: 12px;
}

.popup-data {
    font-weight: 600;
    color: #111827;
    text-align: right;
    font-size: 12px;
}