/* Emergency mobile fix for IRED dashboard map */

/* Force proper height on mobile devices */
@media screen and (max-width: 768px) {
    /* Reset problematic styles */
    body, html {
        height: 100%;
        overflow-x: hidden;
    }
    
    .dashboard-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }
    
    .dashboard-header {
        flex-shrink: 0;
        padding: 0.5rem !important; /* Reduce header padding */
    }
    
    .dashboard-header h1 {
        font-size: 1.2rem !important; /* Smaller title */
    }
    
    .quick-filters {
        flex-shrink: 0;
        max-height: 40px !important; /* Collapsed by default */
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    
    /* Override when shown via JavaScript */
    .quick-filters[style*="position: fixed"] {
        display: block !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
    }
    
    .quick-filters.expanded {
        max-height: 300px !important; /* Expanded height */
    }
    
    .quick-filters h3 {
        cursor: pointer !important;
        background: rgba(220, 38, 38, 0.1) !important;
        padding: 8px !important;
        margin: 0 !important;
        border-radius: 4px !important;
    }
    
    .quick-filters h3::after {
        content: " ▼" !important;
        float: right !important;
    }
    
    .quick-filters.expanded h3::after {
        content: " ▲" !important;
    }
    
    .dashboard-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
    
    .sidebar {
        display: none; /* Hide sidebar on mobile to give more space to map */
    }
    
    .map-container {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 0 !important;
        position: relative !important;
    }
    
    .map-header {
        flex-shrink: 0;
        padding: 0.5rem !important; /* Reduce map header padding */
    }
    
    .map-header h2 {
        font-size: 1rem !important; /* Smaller map title */
        margin: 0 !important;
    }
    
    .map-controls {
        display: none !important; /* Hide map controls on mobile */
    }
    
    #disaster-map,
    .disaster-map {
        flex: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 300px !important;
        position: relative !important;
        z-index: 1 !important;
        background: #f0f0f0 !important; /* Light background to see if container is visible */
    }
    
    /* Ensure Leaflet container fills the space */
    #disaster-map .leaflet-container,
    .disaster-map .leaflet-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Hide legend on small mobile */
    .legend {
        display: none;
    }
    
    /* Add floating controls button */
    .mobile-controls-toggle {
        position: fixed;
        top: 15px;
        right: 15px;
        background: #dc2626;
        color: white;
        border: 2px solid white;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        z-index: 10000;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        animation: pulse-filter 2s infinite;
    }
    
    @keyframes pulse-filter {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    
    /* When filters are shown */
    .mobile-filters-visible .quick-filters {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        z-index: 9999;
        max-height: 50vh;
        overflow-y: auto;
    }
}

/* Extra small devices */
@media screen and (max-width: 480px) {
    .map-header h2 {
        font-size: 1.2rem;
    }
    
    .map-controls {
        font-size: 0.8rem;
    }
    
    .header-actions {
        display: none; /* Hide header buttons on very small screens */
    }
    
    #disaster-map,
    .disaster-map {
        min-height: 250px !important;
    }
}