:root {
        --bg-color: #111827;
        --panel-bg-color: rgba(17, 24, 39, 0.4);
        --text-color-primary: #ffffff;
        --text-color-secondary: #d1d5db;
        --text-color-tertiary: #9ca3af;
        --border-color: #374151;
        --grid-color: rgba(255, 255, 255, 0.1);
        --popup-bg: #1f2937; /* bg-gray-800 */
        /* Warna tema utama */
        --theme-color-strong: #ef4444; /* red-500 */
        --theme-color-medium: #f87171; /* red-400 */
        --indicator-low: #22c55e; /* green-500 */
        --indicator-medium: #f59e0b; /* amber-500 */
        --indicator-high: #ef4444; /* red-500 */
        --trend-line-color: rgba(255, 255, 255, 0.7);

        /* Custom colors for in-province-count based on criteria */
        --count-bg-calm: #2ECC40; /* Tenang */
        --count-bg-low: #0074D9; /* Rendah */
        --count-bg-medium: #FFDC00; /* Sedang */
        --count-bg-high: #FF851B; /* Tinggi */
        --count-bg-very-high: #FF4136; /* Sangat Tinggi */

        /* Custom colors for kecamatan-item based on criteria */
        --kecamatan-bg-calm: #2ECC40; /* Tenang */
        --kecamatan-bg-low: #0074D9; /* Rendah */
        --kecamatan-bg-medium: #FFDC00; /* Sedang */
        --kecamatan-bg-high: #FF851B; /* Tinggi */
        --kecamatan-bg-very-high: #FF4136; /* Sangat Tinggi */
    }

    body.light-theme {
        --bg-color: #f3f4f6;
        --panel-bg-color: rgba(255, 255, 255, 0.4);
        --text-color-primary: #1f2937;
        --text-color-secondary: #374151;
        --text-color-tertiary: #6b7280;
        --border-color: #d1d5db;
        --grid-color: rgba(0, 0, 0, 0.1);
        --popup-bg: #ffffff;
        --trend-line-color: rgba(0, 0, 0, 1);

        /* Custom colors for in-province-count based on criteria */
        --count-bg-calm: #2ECC40; /* Tenang */
        --count-bg-low: #0074D9; /* Rendah */
        --count-bg-medium: #FFDC00; /* Sedang */
        --count-bg-high: #FF851B; /* Tinggi */
        --count-bg-very-high: #FF4136; /* Sangat Tinggi */

        /* Custom colors for kecamatan-item based on criteria */
        --kecamatan-bg-calm: #2ECC40; /* Tenang */
        --kecamatan-bg-low: #0074D9; /* Rendah */
        --kecamatan-bg-medium: #FFDC00; /* Sedang */
        --kecamatan-bg-high: #FF851B; /* Tinggi */
        --kecamatan-bg-very-high: #FF4136; /* Sangat Tinggi */
    }

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: var(--bg-color);
        font-family: 'Inter', sans-serif;
        transition: background-color 0.5s ease;
    }
    #map {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }
    #flash-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.3);
        opacity: 0;
        pointer-events: none;
        z-index: 25;
    }
    #flash-overlay.flash {
        animation: flash-animation 0.4s ease-out;
    }
    @keyframes flash-animation {
        0% { opacity: 0; }
        50% { opacity: 0.6; }
        100% { opacity: 0; }
    }
    #info-panel, #timeline-panel, #stats-24hr-panel, #wilayah-panel {
        color: var(--text-color-primary);
    }
    #info-panel {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 20;
        background-color: var(--panel-bg-color);
        backdrop-filter: blur(10px);
        padding: 1.25rem;
        border-radius: 0.75rem;
        width: 450px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transition: all 0.5s ease;
        border: 1px solid var(--border-color);
    }
    #timeline-panel {
        position: absolute;
        bottom: 20px;
        left: 20px;
        z-index: 20;
        background-color: var(--panel-bg-color);
        backdrop-filter: blur(10px);
        padding: 1rem 1.5rem;
        border-radius: 0.75rem;
        border: 1px solid var(--border-color);
        height: 430px; /* Increased height for two charts */
        width: 450px;
        display: flex;
        flex-direction: column;
    }
    #bottom-right-container {
        position: absolute;
        bottom: 20px;
        left: 490px;
        right: 20px;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    #playback-panel {
        position: relative;
        flex-grow: 1;
        background-color: var(--panel-bg-color);
        backdrop-filter: blur(10px);
        padding: 1rem 1.5rem;
        border-radius: 0.75rem;
        border: 1px solid var(--border-color);
        height: 80px;
        display: flex;
        align-items: center;
        color: var(--text-color-primary);
    }
    #playback-panel span {
        font-size: 0.8rem;
    }
    #top-right-controls {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 30;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    #realtime-clock {
        background-color: var(--panel-bg-color);
        backdrop-filter: blur(10px);
        color: var(--text-color-primary);
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-weight: 500;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        border: 1px solid var(--border-color);
    }
    .control-btn {
        background-color: var(--panel-bg-color);
        backdrop-filter: blur(10px);
        color: var(--text-color-primary);
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: 1px solid var(--border-color);
        transition: background-color 0.2s;
        cursor: pointer;
    }
    .control-btn:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
    #connection-status {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        transition: background-color 0.5s;
    }
    .status-good { background-color: #22c55e; box-shadow: 0 0 8px #22c55e; }
    .status-delayed { background-color: #facc15; box-shadow: 0 0 8px #facc15; }
    .status-error { background-color: #ef4444; box-shadow: 0 0 8px #ef4444; animation: pulse-error 1.5s infinite; }
    @keyframes pulse-error {
        0% { opacity: 1; }
        50% { opacity: 0.3; }
        100% { opacity: 1; }
    }
    #wilayah-panel, #stats-24hr-panel {
        display: none;
        position: absolute;
        right: 20px;
        z-index: 20;
        background-color: var(--panel-bg-color);
        backdrop-filter: blur(10px);
        padding: 1rem;
        border-radius: 0.75rem;
        width: 450px;
        border: 1px solid var(--border-color);
        transition: height 0.3s ease-in-out;
    }
    #stats-24hr-panel {
        top: 80px;
    }
    #stats-24hr-panel p {
        font-size: 0.85rem;
    }
    #wilayah-panel {
        top: 300px; /* Will be adjusted by JS */
        min-height: 120px; /* Minimum height */
    }
    #kecamatan-strike-list {
        height: 150px; /* Fixed height for ticker */
        overflow: hidden;
        position: relative;
        transition: height 0.3s ease-in-out;
    }
    .ticker-content {
        position: absolute;
        width: 100%;
    }
    .kecamatan-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid var(--grid-color);
    }
    .kecamatan-item span {
        font-size: 0.9rem;
    }
    .kecamatan-item:last-child {
        border-bottom: none;
    }
    .count-box {
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: bold;
        color: #000;
        font-size: 0.85rem;
        min-width: 30px;
        text-align: center;
    }
    /* Custom classes for in-province-count background colors */
    .count-bg-calm { background-color: var(--count-bg-calm); }
    .count-bg-low { background-color: var(--count-bg-low); }
    .count-bg-medium { background-color: var(--count-bg-medium); }
    .count-bg-high { background-color: var(--count-bg-high); }
    .count-bg-very-high { background-color: var(--count-bg-very-high); }

    /* New custom classes for kecamatan-item background colors */
    .kecamatan-bg-calm { background-color: var(--kecamatan-bg-calm); }
    .kecamatan-bg-low { background-color: var(--kecamatan-bg-low); }
    .kecamatan-bg-medium { background-color: var(--kecamatan-bg-medium); }
    .kecamatan-bg-high { background-color: var(--kecamatan-bg-high); }
    .kecamatan-bg-very-high { background-color: var(--kecamatan-bg-very-high); }

    .indicator-low { background-color: var(--indicator-low); }
    .indicator-medium { background-color: var(--indicator-medium); }
    .indicator-high { background-color: var(--indicator-high); }
    #notification-container {
        position: absolute;
        bottom: 120px; /* Position above playback panel */
        right: 20px;
        z-index: 30;
        display: flex;
        flex-direction: column-reverse; /* New notifications appear at the bottom */
        align-items: flex-end;
        gap: 10px;
    }
    .notification-item {
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        width: 280px;
        border-left-width: 5px;
        opacity: 0;
        transform: translateX(100%);
        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .notification-item.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .notification-item.exiting {
        opacity: 0;
        transform: translateX(100%);
    }

    @keyframes flash-glow-animation {
        0% {
            transform: scale(0.5);
            opacity: 1;
            box-shadow: 0 0 4px 2px #fff, 0 0 8px 4px rgba(255, 0, 0, 0.7);
        }
        100% {
            transform: scale(4);
            opacity: 0;
            box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0), 0 0 20px 15px rgba(255, 0, 0, 0);
        }
    }

    .lightning-icon {
        border-radius: 50%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .lightning-dot {
        border-radius: 50%;
        transition: all 0.5s ease;
    }
    .lightning-blip {
        position: absolute;
        border-radius: 50%;
        animation: flash-glow-animation 0.7s ease-out forwards;
    }
    .leaflet-popup-content-wrapper {
        background: var(--popup-bg);
        color: var(--text-color-primary);
        border-radius: 0.5rem;
        border: 1px solid var(--border-color);
    }
    .leaflet-popup-tip {
        background: var(--popup-bg);
    }
    .sensor-icon {
        background-color: rgba(0, 255, 255, 0.7);
        border: 2px solid white;
        border-radius: 50%;
        box-shadow: 0 0 10px cyan, 0 0 5px white;
        width: 16px;
        height: 16px;
    }
    .sensor-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 6px;
        height: 6px;
        background-color: white;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    #bottom-right-container .leaflet-control-layers {
        margin: 0;
        background-color: var(--panel-bg-color);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        color: var(--text-color-primary);
    }
    #bottom-right-container .leaflet-control-layers-base label span,
    #bottom-right-container .leaflet-control-layers-overlays label span {
        color: var(--text-color-secondary);
    }
    .leaflet-bottom.leaflet-right {
        bottom: 20px;
    }
    #threat-level-container {
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-color);
    }
    #threat-level-bar-bg {
        background-color: var(--grid-color);
        border-radius: 0.25rem;
        overflow: hidden;
        height: 1.25rem;
    }
    #threat-level-bar {
        height: 100%;
        width: 0%;
        border-radius: 0.25rem;
        transition: width 0.5s ease-out, background-color 0.5s ease-out;
        text-align: center;
        line-height: 1.25rem;
        font-size: 0.75rem;
        font-weight: bold;
        color: #fff;
    }
    .blinking { animation: blink 1.5s infinite; }
    @keyframes blink {
        50% { opacity: 0.6; }
    }
    .text-primary { color: var(--text-color-primary); }
    .text-secondary { color: var(--text-color-secondary); }
    .text-tertiary { color: var(--text-color-tertiary); }