/* ============================================================

   RISK MAP - MINIMAL CSS (No Conflicts)

   Modern, Clean, GeoJSON-Based Layout

   ============================================================ */



/* ============================================================

   1. CSS CUSTOM PROPERTIES (Design Tokens)

   ============================================================ */

:root {

    /* Typography */

    --font-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    --font-size-xs: 0.75rem;

    --font-size-sm: 0.875rem;

    --font-size-base: 1rem;

    --font-size-lg: 1.125rem;

    --font-size-xl: 1.25rem;



    /* Colors */

    --color-white: #ffffff;

    --color-gray-50: #f8fafc;

    --color-gray-100: #f1f5f9;

    --color-gray-700: #334155;

    --color-gray-900: #0f172a;



    --color-green: #22c55e;

    --color-yellow: #eab308;

    --color-red: #ef4444;

    --color-blue: #3b82f6;

    --color-primary: #3b82f6;

    /* Primary theme color (same as blue) */



    /* Spacing */

    --space-xs: 0.25rem;

    --space-sm: 0.5rem;

    --space-md: 1rem;

    --space-lg: 1.5rem;

    --space-xl: 2rem;



    /* Layout */

    --header-h: 64px;

    --border-radius: 8px;



    /* Shadows */

    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

}



/* ============================================================

   2. RESET & BASE

   ============================================================ */

*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    height: 100%;

}



body {

    margin: 0;

    padding: 0;

    font-family: var(--font-base);

    font-size: var(--font-size-base);

    line-height: 1.5;

    color: var(--color-gray-900);

    background: var(--color-gray-50);

    height: 100%;

    overflow: hidden;

}



/* ============================================================

   3. LAYOUT: Header + Map

   ============================================================ */

.header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height: var(--header-h);

    background: var(--color-white);

    border-bottom: 1px solid var(--color-gray-100);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 var(--space-lg);

    z-index: 100;

}



.header-content {

    display: flex;

    flex-direction: column;

    gap: var(--space-xs);

}



.header-title {

    font-size: var(--font-size-xl);

    font-weight: 700;

    color: var(--color-gray-900);

    margin: 0;

}



.header-subtitle {

    font-size: var(--font-size-sm);

    color: var(--color-gray-700);

    margin: 0;

}



#map {

    position: fixed;

    top: var(--header-h);

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 1;

}



/* ============================================================

   4. LEGEND PANEL (Floating UI Element)

   ============================================================ */

.legend-panel {

    position: fixed;

    bottom: var(--space-xl);

    right: var(--space-xl);

    width: 260px;

    background: rgba(255, 255, 255, 0.95);

    border: 1px solid var(--color-gray-100);

    border-radius: var(--border-radius);

    padding: var(--space-lg);

    box-shadow: var(--shadow);

    z-index: 200;

    backdrop-filter: blur(10px);

}



.legend-title {

    font-size: var(--font-size-base);

    font-weight: 600;

    margin: 0 0 var(--space-md) 0;

    color: var(--color-gray-900);

}



.legend-items {

    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

    margin-bottom: var(--space-lg);

}



.legend-item {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

}



.legend-color {

    width: 24px;

    height: 24px;

    border-radius: 4px;

    flex-shrink: 0;

}



.legend-text {

    display: flex;

    flex-direction: column;

}



.legend-label {

    font-size: var(--font-size-sm);

    font-weight: 600;

    color: var(--color-gray-900);

}



.legend-desc {

    font-size: var(--font-size-xs);

    color: var(--color-gray-700);

}



.legend-stats {

    padding-top: var(--space-md);

    border-top: 1px solid var(--color-gray-100);

    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

}



.stat-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.stat-label {

    font-size: var(--font-size-sm);

    color: var(--color-gray-700);

}



.stat-value {

    font-size: var(--font-size-lg);

    font-weight: 700;

    color: var(--color-blue);

}



/* ============================================================

   5. LOADING INDICATOR (Overlay)

   ============================================================ */

.loading-indicator {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(255, 255, 255, 0.9);

    display: none;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: var(--space-md);

    z-index: 9999;

}



.loading-indicator.show {

    display: flex;

}



.loading-spinner {

    width: 48px;

    height: 48px;

    border: 4px solid var(--color-gray-100);

    border-top-color: var(--color-blue);

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



/* ============================================================

   6. TOAST NOTIFICATION

   ============================================================ */

.toast {

    position: fixed;

    top: calc(var(--header-h) + var(--space-md));

    right: var(--space-xl);

    background: var(--color-white);

    border: 1px solid var(--color-gray-100);

    border-left: 4px solid var(--color-blue);

    padding: var(--space-md) var(--space-lg);

    border-radius: var(--border-radius);

    box-shadow: var(--shadow);

    z-index: 9998;

    transform: translateX(150%);

    transition: transform 0.3s ease;

}



.toast.show {

    transform: translateX(0);

}



/* ============================================================

   7. LEAFLET OVERRIDES (Minimal, Specific)

   ============================================================ */



/* Custom Tooltip */

.leaflet-tooltip.province-tooltip {

    background: var(--color-white);

    border: 1px solid var(--color-gray-100);

    box-shadow: var(--shadow);

    border-radius: 4px;

    font-family: var(--font-base);

    font-size: var(--font-size-sm);

    font-weight: 600;

    color: var(--color-gray-900);

    padding: 4px 8px;

}



/* Zoom Controls */

.leaflet-top.leaflet-left {

    top: calc(var(--header-h) + var(--space-md));

    left: var(--space-md);

}



.leaflet-control-zoom {

    border: 1px solid var(--color-gray-100) !important;

    box-shadow: var(--shadow) !important;

}



.leaflet-control-zoom a {

    background: var(--color-white) !important;

    color: var(--color-gray-900) !important;

}



/* ============================================================

   8. UTILITIES

   ============================================================ */

.marker-pulse {

    animation: pulse 2s ease-in-out infinite;

}



@keyframes pulse {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0.5;

    }

}



/* ============================================================

   9. RESPONSIVE (Mobile)

   ============================================================ */

@media (max-width: 640px) {

    .header {

        padding: 0 var(--space-md);

    }



    .header-title {

        font-size: var(--font-size-lg);

    }



    .legend-panel {

        bottom: 0;

        left: 0;

        right: 0;

        width: auto;

        border-radius: var(--border-radius) var(--border-radius) 0 0;

    }



    .toast {

        right: var(--space-md);

        left: var(--space-md);

    }

}





/* ============================================================

   10. GLASSMORPHISM RISK TOOLTIP

   ============================================================ */



/* Leaflet Tooltip Container Override */

.leaflet-tooltip.custom-tooltip {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding: 0 !important;

    margin: 0 !important;

}



.leaflet-tooltip.custom-tooltip::before {

    display: none !important;

    /* Remove default tooltip arrow */

}



/* Glassmorphism Tooltip */

.risk-tooltip-glass {

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(12px) saturate(180%);

    -webkit-backdrop-filter: blur(12px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 12px;

    padding: 12px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);

    font-family: var(--font-base);

    color: var(--color-gray-900);

    min-width: 220px;

}



.tooltip-header {

    font-size: var(--font-size-lg);

    font-weight: 700;

    margin-bottom: 8px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

}



.tooltip-body {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 8px;

}



.risk-indicator {

    width: 100%;

    height: 4px;

    border-radius: 2px;

    margin-bottom: 4px;

}



.risk-details,

.marker-count {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: var(--font-size-sm);

}



.risk-label,

.count-label {

    color: var(--color-gray-700);

    font-weight: 500;

}



.risk-value {

    font-weight: 700;

    font-size: var(--font-size-base);

}



.count-value {

    font-weight: 700;

    color: var(--color-blue);

    font-size: var(--font-size-base);

}



.tooltip-footer {

    padding-top: 8px;

    border-top: 1px solid rgba(0, 0, 0, 0.08);

}



.update-time {

    font-size: var(--font-size-xs);

    color: var(--color-gray-700);

    font-weight: 500;

    display: block;

    text-align: center;

}



/* ============================================================

   11. BREADCRUMB NAVIGATION

   ============================================================ */

.breadcrumb-nav {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: var(--font-size-sm);

    color: var(--color-gray-700);

}



.breadcrumb-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.breadcrumb-link {

    color: var(--color-primary);

    text-decoration: none;

    padding: 0.25rem 0.75rem;

    border-radius: 6px;

    transition: all 0.2s ease;

    font-weight: 500;

    background: rgba(59, 130, 246, 0.1);

}



.breadcrumb-link:hover {

    background: var(--color-primary);

    color: white;

    transform: translateY(-1px);

    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);

}



.breadcrumb-separator {

    color: var(--color-gray-700);

    opacity: 0.5;

}



.breadcrumb-current {

    color: var(--color-gray-900);

    font-weight: 600;

    padding: 0.25rem 0.75rem;

    background: var(--color-gray-100);

    border-radius: 6px;

}
/* ============================================================
   11. FLOATING BACK BUTTON
   ============================================================ */
.floating-back-btn {
    position: fixed;
    top: calc(var(--header-h) + var(--space-md));
    right: var(--space-lg);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-gray-100);
    font-family: var(--font-base);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.floating-back-btn:hover {
    background: var(--color-white);
    color: var(--color-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    border-color: var(--color-blue);
}

.floating-back-btn:active {
    transform: translateY(0);
}