/* ===========================================
   srs_mobile.css — Mobile-specific overrides
   Flattened media queries, organized, tuned layout
   =========================================== */

/* ===========================================
   1. Mobile banner & root variables
   =========================================== */
@media (max-width: 768px) {
    #mode-banner {
        height: auto;
        padding: 8px;
    }
    :root {
        --banner-height: 72px;
    }
}

/* ===========================================
   2. Main layout (map + panels)
   =========================================== */
@media (max-width: 768px) {
    #main-container {
        flex-direction: column;
    }

    #map {
        flex: none;
        height: 100vh;
        width: 100%;
    }

    /* Side panel (slide-in) */
    #side-panel {
        position: fixed;
        right: -100%;
        top: 0;
        height: 100%;
        width: 80%;
        max-width: 300px;
        background-color: #f9f9f9;
        box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2);
        border-left: 1px solid #ccc;
        padding: 16px;
        box-sizing: border-box;
        overflow-y: auto;
        transition: right 0.3s ease;
        z-index: 1500;
    }
    #side-panel.open {
        right: 0;
    }
}

/* ===========================================
   3. Map controls — mobile stacked behavior
   =========================================== */
@media (max-width: 900px) {
    /* Hide by default */
    #map-controls {
        display: none !important;
    }

    /* Show stacked layout on first click (JS adds this class) */
    #map-controls.map-controls--expanded-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important;
        width: calc(50% - 20px) !important;
        position: absolute !important;
        top: 5%;
        left: 40%;
        z-index: 1400 !important;
    }

    /* Hide date presets until "Show" clicked */
    #map-controls.map-controls--expanded-mobile #date-presets {
        display: none !important;
    }

    /* When JS toggles 'show' on date presets */
    #map-controls.map-controls--expanded-mobile #date-presets.show {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
}

/* ===========================================
   4. Toggle buttons (panel toggle, timezone toggle)
   =========================================== */
@media (max-width: 768px) {
    #panel-toggle {
        display: flex !important;
        align-items: center;
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background: white;
        border: 1px solid #ccc;
        border-left: none;
        border-radius: 0 6px 6px 0;
        padding: 8px 10px;
        font-size: 14px;
        z-index: 1600;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: right 0.3s ease;
    }
    #panel-toggle.shifted {
        right: 75%;
    }
    #panel-toggle .label {
        margin-left: 6px;
        white-space: nowrap;
        transition: opacity 0.2s ease;
    }
    #panel-toggle.shifted .label {
        opacity: 0;
        pointer-events: none;
        width: 0;
        overflow: hidden;
    }

    #timezone-toggle {
        display: block !important;
        position: fixed;
        bottom: 17%;
        left: 10px;
        z-index: 1000;
        padding: 8px 12px;
        background: white;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 14px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }

    #timezone-select-container {
        display: none;
    }
    #timezone-select-container.visible {
        display: block;
        position: fixed;
        transform: translateY(-100%);
        left: 60px;
        background: white;
        padding: 10px;
        border-radius: 6px;
        font-size: 14px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        z-index: 2000;
        width: 50%;
    }

    #timezone-select {
        width: 100%;
    }
}

/* ===========================================
   5. Legend & city labels
   =========================================== */
@media (max-width: 768px) {
    #legend {
        max-width: calc(100% - 20px) !important;
        right: 8px !important;
        bottom: 12% !important;
        height: 48vw !important;
        overflow-y: auto !important;
        justify-content: flex-start;
    }

    #show-labels-container,
    #show-city-labels,
    .show-city-labels {
        position: fixed !important;
        top: calc(var(--banner-height, 72px) + 64px) !important;
        left: 10px !important;
        z-index: 1100 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        padding: 6px 8px !important;
        border-radius: 6px !important;
        border: 1px solid #ccc !important;
        display: flex !important;
        gap: 6px !important;
        align-items: center !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
        max-width: calc(100% - 40px) !important;
        white-space: nowrap !important;
    }

    .city-label .city-badge {
        width: 170px !important;
        min-height: 64px !important;
        overflow: visible !important;
        padding-bottom: 6px !important;
    }
    .city-badge .badge-header {
        font-weight: 600 !important;
    }
    .city-badge .badge-row.sun-times {
        font-size: 0.68rem !important;
        gap: 6px !important;
        padding: 4px 6px !important;
    }
    .city-badge .badge-row.sun-times > div {
        padding: 3px 6px !important;
    }
    .city-badge .badge-row.sun-times .badge-utc-offset,
    .city-badge .badge-row.sun-times .badge-text {
        max-width: 100% !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
}

/* ===========================================
   6. Sun mode / date presets layout
   =========================================== */
@media (max-width: 900px) {
    /* Stacked sunmode options in mobile-expanded mode */
    #map-controls.map-controls--expanded-mobile #sunmode-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    #map-controls.map-controls--expanded-mobile .sunmode-option {
        flex: 1 1 100% !important;
        min-width: auto !important;
        padding: 10px 12px !important;
        text-align: center !important;
        white-space: normal !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }
}

/* ===========================================
   7. Responsive tweaks (tablets / small phones)
   =========================================== */
@media (max-width: 1100px) {
    .badge-text {
        font-size: medium;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .badge-utc-offset {
        position: static;
        margin-top: 4px;
        right: auto;
        bottom: auto;
    }
}

@media (min-width: 768px) {
    .mobile-toggle {
        display: none;
    }
    #date-presets {
        display: flex !important;
        gap: 4px;
        flex-wrap: wrap;
        margin-top: 0.5em;
    }
}

@media (max-width: 767px) {
    .mobile-toggle {
        display: flex;
        align-items: center;
        gap: 0.5em;
        margin-top: 0.5em;
    }
    #date-presets {
        display: none;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 0.5em;
    }
    #date-presets.show {
        display: flex;
    }
}