/* =============================================================================
   ECLIPSEFAN MOBILE - PORTRAIT BOTTOM SHEET (Core)
   =============================================================================
   Bottom sheet structure, handle, header, tabs, times, skyline canvas,
   and weather controls for portrait mobile (< 768px).
   ============================================================================= */

/* Bottom sheet — hidden on desktop */
@media (min-width: 768px) and (min-height: 501px) {
    .bottom-sheet,
    .geolocate-btn {
        display: none !important;
    }
}

@media (max-width: 767px) {

    /* =====================================================
       BOTTOM SHEET - Style principal
       ===================================================== */
    .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height - meilleur support mobile */
        background: white;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        z-index: 1000;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        touch-action: none;
        /* Safe area pour iPhone X+ */
        padding-bottom: env(safe-area-inset-bottom, 0);
        /* Normaliser la taille du texte entre Android et iOS */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        font-size: var(--text-md);
        line-height: 1.4;
        /* Flexbox pour que le contenu remplisse toute la hauteur */
        display: flex;
        flex-direction: column;
    }

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

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

    /* Handle de drag */
    .bottom-sheet-handle {
        padding: 12px 0 8px;
        cursor: grab;
        touch-action: none;
    }
    .bottom-sheet-handle:active {
        cursor: grabbing;
    }
    .handle-bar {
        width: 40px;
        height: 4px;
        background: #ccc;
        border-radius: 2px;
        margin: 0 auto;
    }

    /* Header du bottom sheet (toujours visible) */
    .bottom-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px 12px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        gap: 12px;
    }
    .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 sur mobile */
    .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;
        vertical-align: middle;
    }
    .bs-tz-toggle:active {
        background: #357ABD;
    }

    /* Contenu du bottom sheet */
    .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;
    }

    /* =====================================================
       DATE DE L'ÉCLIPSE
       ===================================================== */
    .bs-eclipse-date {
        text-align: center;
        padding: 8px 12px;
        font-size: var(--text-sm);
        font-weight: 600;
        color: #444;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-bottom: 1px solid #dee2e6;
        margin: 0 -12px;
    }

    /* =====================================================
       ONGLETS DU BOTTOM SHEET
       ===================================================== */
    .bs-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        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;
        transition: color 0.2s, border-color 0.2s;
    }
    .bs-tab:hover {
        color: #333;
    }
    .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;
    }
    .bs-tab-section {
        padding: 4px 0;
    }

    /* Section horaires compacte dans le bottom sheet */
    .bs-times-section {
        padding: 8px 0;
    }
    .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;
    }

    /* Checkboxes dans les onglets */
    .bs-checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: var(--text-base);
        color: #333;
        cursor: pointer;
        padding: 8px 0;
    }
    .bs-checkbox input[type="checkbox"] {
        width: 20px;
        height: 20px;
        accent-color: #800080;
    }

    /* Select dans les onglets */
    .bs-select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: var(--text-base);
        background: white;
        color: #333;
    }

    /* Boutons rapides */
    .bs-quick-btns {
        display: flex;
        gap: 8px;
    }
    .bs-quick-btn {
        flex: 1;
        padding: 10px 8px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #f5f5f5;
        font-size: var(--text-base);
        font-weight: 500;
        color: #333;
        cursor: pointer;
        transition: background 0.2s;
    }
    .bs-quick-btn:hover,
    .bs-quick-btn:active {
        background: #e0e0e0;
    }
    .bs-quick-btn.active {
        background: #800080;
        color: white;
        border-color: #800080;
    }

    /* Conteneur canvas skyline - remonter au raz des onglets */
    .bs-tab-pane[data-tab="horizon"] {
        padding-top: 0;
        margin-top: -8px;
    }
    .bs-tab-pane[data-tab="horizon"] .bs-tab-section {
        padding-top: 0;
    }
    .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%;
    }

    /* Grille de visibilité skyline */
    .bs-visibility-grid .visibility-table {
        font-size: var(--text-xs);
        width: 100%;
    }
    .bs-visibility-grid .visibility-table td {
        padding: 4px 6px;
    }

    /* =====================================================
       CONTRÔLES COUCHE SATELLITE
       ===================================================== */
    /* Header : checkbox + opacité */
    .bs-weather-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .bs-weather-header .bs-checkbox {
        flex: 1;
        padding: 8px 0;
    }
    .bs-opacity-compact {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
    .bs-opacity-compact input[type="range"] {
        width: 100px;
        height: 20px;
        margin: 0;
    }
    .bs-opacity-compact span {
        font-size: var(--text-xs);
        color: #666;
        min-width: 32px;
    }

    /* Ligne couche */
    .bs-weather-layer-row {
        margin-bottom: 10px;
    }
    .bs-weather-layer-row .bs-select-compact {
        width: 100%;
    }

    /* Ligne date/heure avec navigation */
    .bs-weather-datetime-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .bs-weather-datetime-inputs {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        justify-content: center;
    }
    .bs-weather-nav-btn {
        width: 36px;
        height: 36px;
        border: 1px solid #ddd;
        border-radius: 50%;
        background: #f5f5f5;
        font-size: var(--text-base);
        color: #666;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        flex-shrink: 0;
    }
    .bs-weather-nav-btn:hover,
    .bs-weather-nav-btn:active {
        background: #800080;
        color: white;
        border-color: #800080;
    }

    /* Contrôles génériques */
    .bs-select-compact {
        padding: 6px 8px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: var(--text-sm);
        background: white;
        color: #333;
    }
    .bs-weather-datetime-inputs input[type="date"] {
        width: auto;
        min-width: 110px;
    }

    /* Navigation temporelle (heure:minute) */
    .bs-weather-time-nav {
        display: flex;
        align-items: center;
        gap: 2px;
    }
    .bs-time-select {
        width: auto;
        min-width: 44px;
        text-align: center;
    }
    .bs-time-separator {
        font-size: var(--text-base);
        font-weight: 600;
        color: #666;
    }
    .bs-time-utc {
        font-size: var(--text-xs);
        color: #888;
        margin-left: 4px;
    }

} /* end @media (max-width: 767px) */