/* =======================
   Mobile-First Responsive Enhancements
   ======================= */

/* Extra Small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    .navbar-enhanced .navbar-brand span {
        display: none !important;
    }
    
    .navbar-enhanced .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem;
    }
    
    .sidebar-enhanced {
        height: auto;
        position: relative;
        top: 0;
        border-radius: var(--border-radius);
    }
    
    .main-content-enhanced {
        padding: 0.75rem;
    }
    
    .content-header {
        padding: 1rem 0.5rem;
        margin-bottom: 1rem;
    }
    
    .content-header h1 {
        font-size: 1.5rem;
    }
    
    .content-header p {
        font-size: 0.9rem;
    }
    
    .layout-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 250px auto;
        gap: 1rem;
        height: auto;
    }
    
    .volcano-carousel-enhanced {
        padding: 1rem;
        height: auto;
        min-height: 200px;
    }
    
    .volcano-card-enhanced {
        padding: 1rem;
    }
    
    .volcano-card-enhanced h4 {
        font-size: 1.1rem;
    }
    
    .info-item {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .carousel-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .carousel-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    /* Map specific mobile adjustments */
    #map {
        height: 250px !important;
    }
    
    .enhanced-timeline-container {
        width: 95%;
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    .enhanced-timeline {
        width: 100%;
        height: 6px;
    }
    
    .btn-timeline,
    .enhanced-arrow {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    /* Form adjustments */
    .service-selection-container,
    .parameters-container,
    .action-buttons-container {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .parameter-group-enhanced {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    
    .parameter-block-enhanced {
        padding: 1rem;
    }
    
    .parameter-block-enhanced h4 {
        font-size: 1rem;
    }
    
    .enhanced-btn {
        width: 100%;
        margin: 0.25rem 0;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Footer adjustments */
    .footer-enhanced {
        padding: 1rem 0;
    }
    
    .footer-enhanced .navbar-nav {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-enhanced .nav-item a img {
        max-width: 80px;
        height: auto;
    }
    
    /* Overlay adjustments */
    .enhanced-overlay .overlay-content {
        width: 95vw;
        height: 90vh;
        margin: 0;
    }
    
    .map-container-overlay {
        width: 100%;
        height: 70vh;
    }
    
    .datatable-container-enhanced {
        padding: 0.5rem;
        max-width: 100%;
        font-size: 0.8rem;
    }
    
    /* Info control adjustments */
    .leaflet-control.infobox {
        max-width: 200px;
        font-size: 0.8rem;
    }
    
    /* Popup adjustments */
    .leaflet-popup-content {
        font-size: 0.8rem;
    }
    
    .observation-popup h5 {
        font-size: 1rem;
    }
    
    .popup-details p {
        font-size: 0.8rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .layout-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 300px auto;
        gap: 1.5rem;
    }
    
    .volcano-carousel-enhanced {
        padding: 1.25rem;
        height: auto;
        min-height: 220px;
    }
    
    #map {
        height: 300px !important;
    }
    
    .content-header h1 {
        font-size: 1.75rem;
    }
    
    .content-header p {
        font-size: 1rem;
    }
    
    .parameter-group-enhanced {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .enhanced-btn {
        width: auto;
        min-width: 120px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .layout-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 400px 300px;
        gap: 2rem;
    }
    
    .volcano-carousel-enhanced {
        padding: 1.5rem;
        height: auto;
    }
    
    #map {
        height: 400px !important;
    }
    
    .parameter-group-enhanced {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .main-content-enhanced {
        padding: 1.5rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .layout-grid {
        grid-template-columns: 1fr 350px;
        gap: 2rem;
        height: 550px;
    }
    
    #map {
        height: 100% !important;
    }
    
    .volcano-carousel-enhanced {
        height: 100%;
    }
    
    .parameter-group-enhanced {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Extra Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .layout-grid {
        grid-template-columns: 1fr 400px;
        gap: 2.5rem;
        height: 600px;
    }
    
    .parameter-group-enhanced {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .content-header h1 {
        font-size: 2.5rem;
    }
    
    .content-header p {
        font-size: 1.2rem;
    }
}

/* =======================
   Landscape Orientation Support
   ======================= */
@media (orientation: landscape) and (max-height: 500px) {
    .content-header {
        padding: 0.5rem 0;
        margin-bottom: 1rem;
    }
    
    .content-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }
    
    .content-header p {
        font-size: 0.9rem;
        margin: 0;
    }
    
    .layout-grid {
        height: auto;
        min-height: 250px;
    }
    
    #map {
        height: 250px !important;
    }
    
    .volcano-carousel-enhanced {
        min-height: 180px;
    }
    
    .enhanced-timeline-container {
        padding: 0.75rem;
    }
    
    .navbar-enhanced {
        padding: 0.5rem 0;
    }
    
    .main-content-enhanced {
        padding-top: 1rem;
    }
}

/* =======================
   High DPI / Retina Support
   ======================= */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .navbar-enhanced .navbar-brand img,
    .footer-enhanced img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .custom-marker {
        border-width: 2px;
    }
    
    .timeline-point {
        border-width: 2px;
    }
}

/* =======================
   Dark Mode Support (if enabled)
   ======================= */
@media (prefers-color-scheme: dark) {
    :root {
        --text-light: #ffffff;
        --text-dark: #e1e1e1;
        --bg-light: #2c3e50;
        --shadow-light: 0 2px 15px rgba(0, 0, 0, 0.3);
        --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
        --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.5);
    }
    
    .remote-sensing-container {
        background: linear-gradient(135deg, #1A2A36 0%, #2c3e50 30%, #34495e 100%);
    }
    
    .card-enhanced,
    .service-selection-container,
    .parameters-container,
    .action-buttons-container,
    .url-display-container {
        background: rgba(44, 62, 80, 0.95);
        color: var(--text-light);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

/* =======================
   Print Styles
   ======================= */
@media print {
    .navbar-enhanced,
    .sidebar-enhanced,
    .footer-enhanced,
    .enhanced-timeline-container,
    .action-buttons-container {
        display: none !important;
    }
    
    .main-content-enhanced {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .layout-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
    
    #map {
        height: 400px !important;
        page-break-inside: avoid;
    }
    
    .content-header {
        text-align: left;
        page-break-after: avoid;
    }
}

/* =======================
   Focus and Accessibility Improvements
   ======================= */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .enhanced-btn,
    .carousel-btn,
    .btn-timeline {
        border: 2px solid currentColor;
    }
    
    .parameter-block-enhanced {
        border-width: 2px;
    }
    
    .navbar-enhanced .nav-link:focus,
    .sidebar-enhanced .nav-link:focus {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* =======================
   Touch Device Optimizations
   ======================= */
@media (hover: none) and (pointer: coarse) {
    .enhanced-btn,
    .carousel-btn,
    .btn-timeline,
    .enhanced-arrow {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .timeline-point {
        min-width: 24px;
        min-height: 24px;
    }
    
    /* Increase tap targets for mobile */
    .leaflet-control-zoom a {
        width: 44px;
        height: 44px;
        line-height: 44px;
    }
}

/* =======================
   Loading States for Slow Connections
   ======================= */
@media (max-width: 768px) and (-webkit-max-device-pixel-ratio: 1) {
    .map-loading .spinner-border {
        width: 2rem;
        height: 2rem;
    }
    
    .loader-enhanced .loading-text {
        font-size: 0.9rem;
    }
}