@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap');

        /* CRITICAL: Ensure the body and main container take up full height for the layout to work */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
            background-color: #0F172A; /* Slate 900 */
            color: #E2E8F0; /* Slate 200 */
            overflow: hidden; /* Hide main scrollbar, content handles scrolling internally */
        }

        /* --- LOADER STYLES --- */
        #app-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #0F172A;
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 1;
            transition: opacity 0.5s ease;
        }

        .loader-dot {
            width: 12px;
            height: 12px;
            background-color: #6366F1;
            border-radius: 50%;
            margin: 0 6px;
            animation: pulse 1.5s infinite ease-in-out;
        }
        .loader-dot:nth-child(2) { animation-delay: 0.2s; }
        .loader-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes pulse {
            0%, 100% { transform: scale(0.8); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 1; }
        }

        .hidden-loader { opacity: 0; pointer-events: none; }

        #app-container { height: 100vh; display: flex; flex-direction: column; }
        #content-area { flex-grow: 1; position: relative; min-height: 0; overflow: hidden; }
        
        #map, #globe-container { width: 100%; height: 100%; z-index: 10; background-color: #0F172A; }
        #dashboard-view { overflow-y: auto; height: 100%; }
        
        /* Tabs */
        .tab-content { display: none; width: 100%; height: 100%; }
        .tab-content.active { display: block; }
        
        /* Cards & Charts */
        .card { 
            background-color: #1E293B; 
            border-radius: 0.5rem; 
            padding: 1.25rem; 
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
            border: 1px solid #334155; 
        }
        .chart-container { background-color: #1E293B; padding: 1rem; border-radius: 0.5rem; }
        #mini-map { height: calc(100%); width: 100%; background-color: #0F172A; }

        /* Leaflet Popup */
        .dark-popup .leaflet-popup-content-wrapper { background: #1F2937; color: #F9FAFB; border-radius: 8px; border: 1px solid #374151; }
        .dark-popup .leaflet-popup-tip { background: #1F2937; }
        .dark-popup b { color: #FFFFFF; font-weight: 700; } 

        /* Badges */
        .mag-badge-large { background-color: #DC2626; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-weight: 700; font-size: 1.5rem; }
        
        /* Input/Select */
        .app-control {
            border-radius: 0.375rem; border: 1px solid #4B5563; background-color: #1F2937; color: #E5E7EB;
            padding: 0.5rem 0.75rem; font-size: 0.875rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            transition: border-color 0.15s;
        }
        .app-control.marker-mode-btn { background: transparent; padding: 6px 10px; cursor: pointer; }
        .app-control.marker-mode-btn.active { background: #6366F1; color: white; border-color: #4F46E5; }
        .app-control:focus { border-color: #6366F1; outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5); }

          /* Header Utils */
          #loading-status .earthquake-count-display { font-size: 1.25rem; font-weight: 700; color: #818CF8; margin-left: 0.5rem; }

          /* Stabilize header height so toggling filters or the country banner
              doesn't change the content-area height (which would change 3D canvas
              aspect ratio). We give a responsive minimum header height. */
        /* Default compact header when filters are hidden */
        header { position: relative; min-height: 78px; transition: min-height 160ms ease; }
        /* When filters are open (desktop or mobile with visible controls) expand header
            to fit the filter UI comfortably without causing content scroll. */
        /* When filters are open, allow the header to size to its content instead of
            enforcing a large fixed min-height. This avoids large blank regions while
            still permitting the header to expand when inputs are visible. */
        header.filters-open { min-height: auto; }
        @media (min-width: 640px) { header.filters-open { min-height: auto; } }

        /* Country banner: overlay by default so it doesn't push content down
           when filters are *hidden*. When the header is expanded with filters
           visible the banner should sit in the normal flow (below the filters)
           to avoid overlapping filter controls. */
        #country-filter-status {
            position: absolute; left: 1rem; right: 1rem; bottom: 0.8rem;
            padding: 0.5rem; border-radius: 0.375rem; margin: 0; border: 1px solid; z-index: 60;
            pointer-events: none; transition: all 0.12s ease;
        }

        /* When filters are open we want the banner to appear below the filter
           controls instead of overlaying them. Make it part of the flow so the
           filter inputs are never obscured. */
        header.filters-open #country-filter-status {
            /* When filters are open we still keep the banner inside the header
               but its absolute position is calculated from JS so avoid forcing
               it into the flow which would increase header height. */
            pointer-events: auto; /* allow interactions if needed */
            margin-top: 0.25rem; bottom: auto; left: 1rem; right: 1rem; z-index: 60;
        }
        
        /* Mobile Legend */
        .mobile-legend-optimized {
            width: 100%; max-width: 95%; padding: 0.75rem; font-size: 0.75rem;
            bottom: 0.5rem; left: 50%; transform: translateX(-50%); right: auto;
        }
        /* 3D Popup Styles */
#three-popup {
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

        /* Ensure 3D canvas is clickable */
        #globe-container canvas {
            cursor: pointer;
            width: 100% !important;
            height: 100% !important;
            display: block; /* Avoid inline-block artifacts when measuring size */
            image-rendering: optimizeQuality;
        }
        /* Filter Animation - Compact on desktop */
        #filter-controls-wrapper { 
            max-height: 0; 
            overflow: hidden; 
            transition: max-height 0.5s ease-in-out; 
            padding-top: 0; 
        }
          /* Limit visible height for the filters panel so the header does not
              become excessively tall. Use internal scrolling instead of growing
              the whole header beyond reasonable size. */
          #filter-controls-wrapper.open { max-height: 12rem; padding-top: 0.5rem; overflow: auto; }
        @media (min-width: 640px) { 
            #filter-controls-wrapper { 
                /* Desktop default: visible but controlled via `.open` / `.hidden` classes */
                /* Desktop: allow a slightly larger but still reasonable height */
                max-height: 14rem; 
                overflow: auto; 
                padding-top: 0.5rem; 
                display: block; 
            }
            /* Allow hiding the filters on desktop using the `hidden` class */
            #filter-controls-wrapper.hidden { 
                max-height: 0; 
                overflow: hidden; 
                padding-top: 0; 
                display: none; 
            }
        }

        /* Improved Legend with Size Examples */
        .legend-size-examples {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0;
            padding: 0 5px;
        }
        .size-example {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 10px;
        }
        .size-circle {
            border-radius: 50%;
            margin-bottom: 2px;
        }
        
        /* Enhanced 3D Legend - Simplified */
        .legend-3d {
            background: rgba(30, 41, 59, 0.85);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(100, 116, 139, 0.3);
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        
        .legend-3d h4 {
            margin: 0 0 12px 0;
            font-size: 14px;
            font-weight: 700;
            color: #F1F5F9;
            text-align: center;
        }
        
        .legend-section {
            margin-bottom: 15px;
        }
        
        .legend-section:last-child {
            margin-bottom: 0;
        }
        
        .legend-section-title {
            font-size: 12px;
            font-weight: 600;
            color: #CBD5E1;
            margin-bottom: 8px;
            display: block;
        }
        
        .height-info {
            font-size: 11px;
            color: #94A3B8;
            text-align: center;
            margin-bottom: 10px;
            font-style: italic;
        }
        
        .depth-colors {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        /* Mobile specific tweaks to improve small-screen UX */
        @media (max-width: 639px) {
             /* Allow natural page scrolling on mobile to avoid clipped content
                 We intentionally remove the global overflow:hidden on small screens
                 so the browser can scroll the body instead of relying on internal
                 container scrolling which can lead to clipping on mobile devices. */
             html, body { overflow: auto; height: auto; }
             /* Let app container grow naturally rather than forcing 100vh which
                 may behave inconsistently on mobile browser UI (address bar). */
             #app-container { min-height: 100dvh; height: auto; }
             /* Ensure the main map and globe have a visible area on small screens
                 (parent containers now grow naturally rather than using fixed 100vh).
                 Leaflet and three.js need non-zero height to render their canvases. */
             #map, #globe-container { min-height: 55vh; height: auto; }
             /* In the dedicated Map tab we want a larger viewport so the map fills
                 more of the screen and avoids blank space below. */
             #map-view > #map { min-height: 72dvh; }
             /* If a container uses h-full and becomes zero, give it a fallback
                 min-height so it's visible on mobile. */
             .tab-content.relative.h-full { min-height: 55vh; }
             #content-area { overflow: visible; }
             .tab-content { height: auto; }
             #dashboard-view { height: auto; max-height: none; overflow-y: visible; }
            /* Ensure the dashboard mini-map has a usable height on phones */
            .compact-charts .compact-card, #mini-map-card {
                /* keep things compact but visible — give more height so the mini-map is usable */
                min-height: 200px;
            }
            #mini-map { position: relative; height: 100%; width: 100%; }

            /* Make the map legend clearly visible and centered on mobile */
            .mobile-legend-optimized {
                position: fixed; /* make it float above the map and not be clipped by containers */
                left: 8px; right: 8px; bottom: 12px; transform: none;
                width: auto; max-width: calc(100% - 16px);
                z-index: 1200; padding: 0.5rem; font-size: 0.78rem;
                border-radius: 10px;
            }

            /* Keep the legend compact: show size examples only unless explicitly expanded */
            .mobile-legend-optimized .legend-size-examples { gap: 8px; }
            .mobile-legend-optimized hr { display: none; } /* hide depth separator to save space */
            .mobile-legend-optimized .depth-colors { display: none; }

            /* Make the 3D legend compact and non-blocking on phones */
            .legend-3d {
                right: 8px; left: 8px; top: auto; bottom: 6px; max-width: calc(100% - 16px);
                max-height: 36vh; overflow-y: auto; padding: 10px; font-size: 12px;
                border-radius: 10px; box-shadow: 0 6px 12px rgba(0,0,0,0.35);
            }
            .legend-3d h4 { font-size: 13px; margin-bottom: 8px; }
            .legend-3d .legend-section { margin-bottom: 8px; }
        }

        /* Hide legends on small screens by default; toggle buttons will add .show to reveal them */
        @media (max-width: 639px) {
            #map-legend { display: none; }
            #map-legend.show { display: block; }

            #legend-3d { display: none; }
            #legend-3d.show { display: block; }

            /* Mobile floating toggle buttons */
            .mobile-legend-toggle, .mobile-3d-legend-toggle {
                position: fixed; z-index: 1300; display: inline-flex; align-items: center; justify-content: center;
                width: 44px; height: 44px; border-radius: 9999px; background: rgba(15, 23, 42, 0.9);
                color: #E2E8F0; border: 1px solid rgba(148,163,184,0.3); box-shadow: 0 6px 14px rgba(2,6,23,0.45);
                transition: transform 160ms ease, opacity 160ms ease; backdrop-filter: blur(6px);
            }
            .mobile-legend-toggle { right: 12px; bottom: 76px; z-index: 1400; }
            .mobile-3d-legend-toggle { right: 12px; bottom: 12px; z-index: 1400; }

            .mobile-legend-toggle:hover, .mobile-3d-legend-toggle:hover { transform: translateY(-3px); opacity: 0.98; }

            /* Make touch targets slightly larger and accessible */
            .mobile-legend-toggle i, .mobile-3d-legend-toggle i { pointer-events: none; }
            /* Ensure the mobile filter toggle sits above other elements for reliable taps */
            #filter-toggle-btn-mobile { z-index: 1400; position: relative; }

            /* Only show the toggles that belong to the active tab — avoid duplicates
               appearing across views because fixed elements can otherwise be visible
               while their parent content is hidden. */
            .tab-content:not(.active) .mobile-legend-toggle,
            .tab-content:not(.active) .mobile-3d-legend-toggle {
                display: none !important;
            }
            .tab-content.active .mobile-legend-toggle,
            .tab-content.active .mobile-3d-legend-toggle {
                display: inline-flex !important;
            }
        }

        /* Small screen global adjustments for a friendlier mobile look */
        @media (max-width: 639px) {
            header { padding: 0.5rem 0.6rem; }
            .compact-card { padding: 0.75rem; }
            .compact-charts { gap: 0.6rem; }
            /* make filter toggle buttons larger for touch */
            #filter-toggle-btn-mobile { padding: 0.75rem 1rem; font-size: 0.92rem; }
        }
        
        .depth-color-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .depth-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .depth-label {
            font-size: 11px;
            color: #E2E8F0;
        }
        
        .legend-note {
            font-size: 10px;
            color: #94A3B8;
            text-align: center;
            margin-top: 10px;
            font-style: italic;
        }
        
        .divider {
            height: 1px;
            background: rgba(100, 116, 139, 0.3);
            margin: 12px 0;
        }
        
        /* New Styles for Enhancements */
        .tooltip {
            position: relative;
            display: inline-block;
        }
        
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #1E293B;
            color: #E2E8F0;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1000;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
            border: 1px solid #334155;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        
        .notification {
            position: fixed;
            top: 80px; /* Below the header */
            right: 20px;
            background: #DC2626;
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 10000;
            display: flex;
            align-items: center;
            gap: 8px;
            animation: slideIn 0.3s ease-out;
            max-width: 400px;
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .notification.warning {
            background: #F59E0B;
        }
        
        .notification.info {
            background: #6366F1;
        }
        
        .three-loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(30, 41, 59, 0.9);
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            z-index: 100;
            border: 1px solid #475569;
        }
        
        .export-btn {
            background: #10B981;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: background 0.2s;
        }
        
        .export-btn:hover {
            background: #059669;
        }
        
        .keyboard-shortcut {
            background: #374151;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 11px;
            border: 1px solid #4B5563;
        }
        
        .dashboard-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #E2E8F0;
            text-align: center;
        }
        
        .settings-popup {
            position: absolute;
            top: 100%;
            right: 0;
            background: #1E293B;
            border: 1px solid #334155;
            border-radius: 8px;
            padding: 1rem;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            z-index: 1000;
            min-width: 200px;
            display: none;
        }
        
        .settings-popup.show {
            display: block;
        }
        
        .settings-btn {
            background: #6366F1;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: background 0.2s;
        }
        
        .settings-btn:hover {
            background: #4F46E5;
        }
        
        .basemap-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .basemap-option:hover {
            background: #374151;
        }
        
        .basemap-option.active {
            background: #6366F1;
        }
        
        .basemap-preview {
            width: 20px;
            height: 20px;
            border-radius: 3px;
            border: 1px solid #6B7280;
        }
        
        .basemap-dark { background: #1F2937; }
        .basemap-light { background: #F3F4F6; }
        
        /* Compact dashboard layout */
        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        
        .dashboard-actions {
            display: flex;
            gap: 0.5rem;
        }
        
        .compact-stats {
            grid-template-columns: 1fr;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        
        @media (min-width: 768px) {
            .compact-stats {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        .compact-charts {
            grid-template-columns: 1fr;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        
        @media (min-width: 1024px) {
            .compact-charts {
                grid-template-columns: repeat(3, 1fr);
            }
            /* Make sure the mini-map card matches the fixed height used for chart containers
               so all dashboard boxes line up nicely even when filters are hidden */
            .compact-charts .compact-card,
            .compact-charts .compact-chart-container {
                height: 250px; /* same height as chart containers */
                min-height: 220px; /* slightly looser on very small desktops */
            }
            /* Ensure map inside mini-map card sizes correctly */
            #mini-map-card .flex-grow { position: relative; height: 100%; }
            #mini-map-card #mini-map { position: absolute; inset: 0; height: 100%; width: 100%; }
        }
        
        .compact-card {
            padding: 1rem;
        }
        
        .compact-chart-container {
            height: 250px;
        }
        
        /* Compact filter layout */
        .compact-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }
        
        .compact-filter-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .compact-filter-label {
            font-size: 0.75rem;
            color: #94A3B8;
            white-space: nowrap;
        }
        
        .compact-select {
            min-width: 120px;
        }
        
        .compact-input {
            min-width: 150px;
        }
        
        .header-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
        
        .settings-container {
            position: relative;
        }

        /* Guide Modal Layout Improvements */
        #guide-card { max-height: calc(100vh - 48px); overflow-y: auto; }
        #guide-card .p-6 { padding: 0.75rem; }
        #guide-card h3 { font-size: 1.125rem; }
        #guide-card h4 { font-size: 0.95rem; }
        #guide-card p, #guide-card li { font-size: 0.875rem; line-height: 1.2; }
        @media (min-width: 640px) {
            #guide-card .p-6 { padding: 0.75rem 1rem; }
            #guide-card .space-y-4 { gap: 0.75rem; }
            #guide-card .space-y-4 p, #guide-card .space-y-4 li { font-size: 0.9rem; }
            /* Two-column layout for longer guide content on bigger screens */
            #guide-card .space-y-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
            #guide-card h3 { font-size: 1.25rem; }
        }