/* =============================================================================
   ECLIPSEFAN MOBILE - LANDSCAPE & BREAKPOINTS
   =============================================================================
   Landscape mode (bottom sheet on left half), very small screens,
   tablet adjustments, touch utilities, and portrait fan slider.
   ============================================================================= */

/* =====================================================
   MOBILE PAYSAGE (hauteur < 500px et largeur >= 500px)
   Bottom-sheet sur la moitié gauche, timeline à droite
   ===================================================== */
@media (max-height: 500px) and (min-width: 500px) {

    .eclipse-calc-box,
    .skyline-control-v2,
    .weather-history-control,
    .time-control {
        max-height: 40vh;
        overflow-y: auto;
    }

    /* Bottom sheet dans la moitié gauche - glissement vertical */
    .bottom-sheet {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 50vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: white !important;
        border-radius: 0 16px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
        z-index: 1000 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        touch-action: none;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Transition désactivée pendant le drag */
    .bottom-sheet.dragging {
        transition: none !important;
    }

    /* États : glissement vertical */
    .bottom-sheet[data-state="peek"] {
        transform: translateY(calc(100vh - 60px)) !important;
        transform: translateY(calc(100dvh - 60px)) !important;
    }
    .bottom-sheet[data-state="half"] {
        transform: translateY(50vh) !important;
        transform: translateY(50dvh) !important;
    }
    .bottom-sheet[data-state="full"] {
        transform: translateY(0) !important;
    }

    /* Handle de drag - barre horizontale en haut (comme en portrait) */
    .bottom-sheet-handle {
        padding: 10px 0 6px !important;
        cursor: grab !important;
        touch-action: none;
    }
    .bottom-sheet-handle:active {
        cursor: grabbing !important;
    }
    .handle-bar {
        width: 40px !important;
        height: 4px !important;
        background: #ccc !important;
        border-radius: 2px;
        margin: 0 auto !important;
    }

    /* Header du bottom sheet */
    .bottom-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        gap: 8px;
    }

    /* Contenu */
    .bottom-sheet-content {
        overflow-y: hidden;
        overflow-x: hidden;
        padding: 0 12px 12px;
        flex: 1;
        min-height: 0;
    }
    .bottom-sheet[data-state="full"] .bottom-sheet-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Header content */
    .bs-header-content {
        flex: 1;
        min-width: 0;
    }
    .bs-header-row1 {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .bs-location-name {
        font-size: var(--text-md);
        font-weight: 600;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }
    .bs-type-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: var(--text-sm);
        font-weight: 600;
        white-space: nowrap;
    }
    .bs-type-badge.total { background: #800080; color: white; }
    .bs-type-badge.partial { background: #FFA500; color: white; }
    .bs-type-badge:empty { display: none; }
    .bs-duration { font-size: var(--text-base); font-weight: 600; color: #800080; white-space: nowrap; }
    .bs-duration:empty { display: none; }
    .bs-max-time { font-size: var(--text-base); font-weight: 500; color: #333; white-space: nowrap; }
    .bs-max-time:empty { display: none; }

    /* Cacher le toggle UTC/Local du header desktop */
    .timezone-toggle { display: none !important; }

    /* Bouton toggle UTC/Local dans le bottom sheet */
    .bs-tz-toggle {
        font-size: var(--text-xs);
        color: #fff;
        background: #4A90D9;
        border: none;
        border-radius: 4px;
        padding: 4px 10px;
        font-weight: 600;
        cursor: pointer;
        margin-left: 6px;
    }

    /* Onglets */
    .bs-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .bs-tabs::-webkit-scrollbar { display: none; }
    .bs-tab {
        flex: 1;
        padding: 10px 8px;
        border: none;
        background: transparent;
        font-size: var(--text-sm);
        font-weight: 500;
        color: #666;
        cursor: pointer;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
    }
    .bs-tab.active {
        color: #800080;
        border-bottom-color: #800080;
        font-weight: 600;
    }

    /* Contenu des onglets */
    .bs-tab-content { min-height: 100px; }
    .bs-tab-pane { display: none; padding: 4px 0; }
    .bs-tab-pane.active { display: block; }

    /* Styles pour les données */
    .bs-compact-times { display: flex; flex-direction: column; gap: 8px; }
    .bs-compact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .bs-compact-item { display: flex; align-items: baseline; gap: 6px; }
    .bs-compact-label { font-size: var(--text-base); color: #666; }
    .bs-compact-value { font-size: var(--text-base); font-weight: 600; font-family: monospace; color: #333; }

    /* Statistiques météo */
    .bs-weather-stats-section { padding: 4px 0; }
    .bs-weather-stats-title {
        font-size: var(--text-sm);
        font-weight: 600;
        color: #333;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .bs-weather-stats { background: #f9f9f9; border-radius: 8px; padding: 12px; }
    .bs-weather-stats-placeholder,
    .bs-weather-stats-loading,
    .bs-weather-stats-error { font-size: var(--text-sm); color: #888; text-align: center; padding: 8px 0; }
    .bs-weather-stat-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid #eee;
    }
    .bs-weather-stat-row:last-child { border-bottom: none; }
    .bs-weather-stat-label { font-size: var(--text-base); color: #555; }
    .bs-weather-stat-value { font-size: var(--text-base); font-weight: 600; color: #333; }
    .bs-weather-stat-value.good { color: #2e7d32; }
    .bs-weather-stat-value.medium { color: #f57c00; }
    .bs-weather-stat-value.bad { color: #c62828; }

    /* Détail par année */
    .bs-weather-years { margin-top: 12px; }
    .bs-weather-years-title { font-size: var(--text-xs); font-weight: 600; color: #666; margin-bottom: 8px; }
    .bs-weather-years-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .bs-weather-year-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #f5f5f5;
        border-radius: 6px;
        padding: 6px 4px;
    }
    .bs-weather-year-label { font-size: var(--text-xs); color: #888; }
    .bs-weather-year-value { font-size: var(--text-xs); font-weight: 600; color: #333; }
    .bs-weather-year-value.good { color: #2e7d32; }
    .bs-weather-year-value.medium { color: #f57c00; }
    .bs-weather-year-value.bad { color: #c62828; }

    /* Skyline canvas */
    .bs-skyline-canvas-container {
        width: 100%;
        overflow: hidden;
        border-radius: 8px;
        background: #f5f5f5;
    }
    .bs-skyline-canvas-container canvas {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    /* Masquer les panneaux desktop */
    .leaflet-top.leaflet-left .eclipse-calc-box,
    .leaflet-top.leaflet-left .time-control,
    .leaflet-top.leaflet-left .weather-history-control,
    .leaflet-top.leaflet-left .skyline-control-v2 {
        display: none !important;
    }

    /* Masquer le bouton géolocalisation flottant */
    .geolocate-btn {
        display: none !important;
    }

    /* === MOITIÉ GAUCHE : Search + Zoom en haut === */

    /* Search control en haut à gauche */
    div.search-control {
        position: fixed !important;
        left: 8px !important;
        right: auto !important;
        top: 8px !important;
        transform: none !important;
    }

    /* Zoom en haut à gauche, sous la recherche */
    .leaflet-top.leaflet-left {
        left: 8px !important;
        right: auto !important;
        top: 45px !important;
    }

    /* === MOITIÉ DROITE : Icônes + Timeline === */

    /* Icônes de couches centrées sur la moitié droite */
    .custom-layers-control {
        position: fixed !important;
        left: 75% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        top: auto !important;
        bottom: 20px !important;
    }

    /* Contrôles Leaflet en bas à droite (scale) */
    .leaflet-bottom.leaflet-right {
        left: auto !important;
        right: 10px !important;
        bottom: 10px !important;
    }

    /* Attribution en bas à droite */
    .leaflet-control-attribution.leaflet-control {
        position: fixed !important;
        bottom: 4px !important;
        left: auto !important;
        right: 4px !important;
        transform: none !important;
        width: auto !important;
    }

    /* =====================================================
       ONGLET FAN - PAYSAGE
       ===================================================== */
    .bs-fan-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4px 8px;
        min-height: 120px;
        width: 100%;
    }

    .bs-fan-controls-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 4px 0;
    }

    .bs-fan-ctrl-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1;
    }

    .bs-fan-ctrl-btns {
        display: flex;
        gap: 6px;
    }

    .bs-fan-ctrl-btn {
        width: 28px;
        height: 28px;
        border: 2px solid #800080;
        border-radius: 6px;
        background: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .bs-fan-ctrl-btn:active {
        transform: scale(0.95);
    }

    .bs-fan-current-time {
        font-size: var(--text-base);
        font-weight: 700;
        color: #800080;
        font-family: monospace;
        text-align: center;
    }

    .bs-fan-diagram-container {
        transform: scale(1.5);
        margin: 12px 20px;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bs-fan-safety-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
    }

    .bs-fan-safety-img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
    }

    .bs-fan-safety-text {
        font-size: var(--text-xs, 11px);
        color: #666;
        text-align: center;
        line-height: 1.2;
        font-weight: 600;
    }

    .bs-fan-slider-container {
        box-sizing: border-box;
    }

    #bs-fan-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        background: linear-gradient(to right, #ccc 0%, #800080 50%, #ccc 100%);
        border-radius: 3px;
        outline: none;
        cursor: pointer;
    }

    #bs-fan-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        background: #800080;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(128, 0, 128, 0.5);
        border: 2px solid white;
    }

    #bs-fan-slider::-moz-range-thumb {
        width: 22px;
        height: 22px;
        background: #800080;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(128, 0, 128, 0.5);
        border: 2px solid white;
    }
}

/* =====================================================
   TRÈS PETITS ÉCRANS (< 400px)
   ===================================================== */
@media (max-width: 399px) {

    .leaflet-control-geocoder {
        max-width: 120px !important;
    }

    .leaflet-control-geocoder input {
        width: 80px !important;
    }

    .eclipse-calc-box,
    .skyline-control-v2,
    .weather-history-control,
    .time-control {
        font-size: var(--text-xs);
    }
}

/* =====================================================
   TABLETTE (768px - 1024px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    .eclipse-calc-box,
    .skyline-control-v2,
    .weather-history-control,
    .time-control {
        max-width: 280px;
    }
}

/* =====================================================
   UTILITAIRES TOUCH
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Écrans tactiles - cibles plus grandes */

    .share-btn,
    .eclipsefan-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .time-control button {
        min-height: 40px;
    }

    input[type="range"] {
        height: 24px;
    }

    /* Empêcher le zoom sur double-tap des contrôles */
    .leaflet-control {
        touch-action: manipulation;
    }
}

@media (max-width: 767px) {
    /* =====================================================
       ONGLET FAN - SLIDER TIMELINE
       ===================================================== */
    .bs-fan-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 12px;
        min-height: 200px;
        width: 100%;
    }

    .bs-fan-controls-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 8px 0;
    }

    .bs-fan-ctrl-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1;
    }

    .bs-fan-ctrl-btns {
        display: flex;
        gap: 6px;
    }

    .bs-fan-ctrl-btn {
        width: 32px;
        height: 32px;
        border: 2px solid #800080;
        border-radius: 6px;
        background: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .bs-fan-current-time {
        font-size: var(--text-lg);
        font-weight: 700;
        color: #800080;
        font-family: monospace;
        text-align: center;
    }

    .bs-fan-diagram-container {
        transform: scale(1.8);
        margin: 16px 24px;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bs-fan-safety-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1;
    }

    .bs-fan-safety-img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
    }

    .bs-fan-safety-text {
        font-size: var(--text-sm, 13px);
        color: #666;
        text-align: center;
        line-height: 1.3;
        font-weight: 600;
    }

    .bs-fan-slider-container {
        box-sizing: border-box;
    }

    /* Style du slider range */
    #bs-fan-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 8px;
        background: linear-gradient(to right, #ccc 0%, #800080 50%, #ccc 100%);
        border-radius: 4px;
        outline: none;
        cursor: pointer;
    }

    #bs-fan-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 28px;
        height: 28px;
        background: #800080;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(128, 0, 128, 0.5);
        border: 3px solid white;
    }

    #bs-fan-slider::-moz-range-thumb {
        width: 28px;
        height: 28px;
        background: #800080;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(128, 0, 128, 0.5);
        border: 3px solid white;
    }

    /* Labels au-dessus du slider */
    .bs-fan-slider-labels {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    /* Heures en-dessous du slider */
    .bs-fan-slider-times {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
    }

    .bs-fan-ctrl-btn:active {
        transform: scale(0.95);
    }
}