/* ============================================================
   FICHIER : css/responsive.css
   WINDXPLORER - MOBILE & RESPONSIVE (VERSION CONSOLIDÉE V5)
   ============================================================ */

/* =========================================
   1. REGLES GLOBALES & DESKTOP OVERRIDES
   ========================================= */

/* Par défaut (Desktop) */
.bottom-nav-bar { display: none; }
.tab-icon { display: none; } /* Icônes du menu cachées sur PC */

.ios-city {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Survol de la ligne Timeline en BLANC (Partout) */
.tf-cell.row-hover {
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 10;
}

/* Structure du menu (Timeline/Simu...) sur Bureau */
.ios-segmented { 
    display: flex; background: #f2f2f7; padding: 3px; 
    border-radius: 8px; width: fit-content; margin: 0 auto; gap: 5px; 
}
.ios-segmented button { 
    border: none; background: transparent; font-size: 0.75rem; 
    font-weight: 600; color: #666; padding: 8px 15px; 
    border-radius: 6px; cursor: pointer; display: flex; 
    align-items: center; gap: 6px; transition: all 0.2s; 
}
.ios-segmented button.active { 
    background: #d40000; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); 
}
/* =========================================
   MODE MOBILE ET RESPONSIVE (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {


    
    /* 1. Sur mobile, on GARDE le padding par défaut pour l'accueil (pour voir la recherche) */
    body { 
        overscroll-behavior-y: none; 
        background: var(--c-bg);
        padding-top: 80px; /* Même hauteur que la top-bar */
    }

    /* Quand viewer actif : cacher top-bar, reset paddings */
    body:has(#viewer.active) { padding-top: 0 !important; }
    body:has(#viewer.active) .top-bar { display: none !important; }
    body:has(#viewer.active) .app-container { padding-top: 0 !important; }
    .app-container { padding-top: 0 !important; }
    #viewer.active { padding-top: 0 !important; }

    body:has(#viewer.active) .top-bar { display: none !important; }
    #viewer.active { padding-top: 0 !important; }

    #viewer-header-global {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: var(--c-bg);
        width: 100%;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .ios-header {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
        padding: max(10px, env(safe-area-inset-top)) 10px 10px 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .ios-city { font-size: 1.4rem !important; padding-bottom: 0 !important; }
    .ios-header .header-top-row { padding: 4px 0 !important; align-items: center !important; }

    .ios-time-control { display: flex !important; justify-content: center !important; gap: 15px !important; margin-top: 5px; }
    .time-pill-group { flex: 0 1 auto !important; width: auto !important; background: #f0f2f5 !important; border: 1px solid #e5e5ea !important; border-radius: 20px !important; padding: 2px !important; }


    /* =======================================
       2. TAB BAR EN BAS (CACHE SUR HOME)
       ======================================= */
    body:not(:has(#viewer.active)) .ios-toolbar-wrapper { display: none !important; }

    .ios-toolbar-wrapper {
        position: fixed !important; bottom: 10px !important; left: 10px !important; right: 10px !important;
        display: flex !important; gap: 10px !important; z-index: 10000 !important; 
    }

    .ios-bubble {
        background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important;
        border: 1px solid rgba(0,0,0,0.1) !important; border-radius: 24px !important; padding: 5px !important; 
        box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important; display: flex !important;
    }

    .ios-bubble.home { flex: 0 0 auto !important; }
    .ios-bubble.home button { flex: 0 0 auto; padding: 6px 12px !important; }
    .ios-bubble.main { flex: 1 !important; justify-content: space-between !important; }

    .ios-bubble button {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; 
        gap: 4px; color: #999 !important; background: transparent !important; box-shadow: none !important; 
        padding: 6px !important; border: none !important; transition: all 0.2s;
    }

    .tab-icon { display: block; }
    .tab-icon svg { width: 22px; height: 22px; stroke-width: 1.5; transition: all 0.2s; }
    .tab-label { font-size: 0.55rem !important; font-weight: 600; letter-spacing: 0.2px; }
    
    .ios-bubble button.active { background-color: #d32f2f !important; color: #ffffff !important; border-radius: 18px !important; }
    .ios-bubble button.active svg { stroke: #ffffff !important; stroke-width: 2.5; }

    .main-content { padding-bottom: 100px !important; }


    /* =======================================
       3. TIMELINE (ALIGNEMENT EXACT)
       ======================================= */
    .tf-header[data-key="trend_atmos"], .tf-cell[data-key="trend_atmos"],
    .tf-header[data-key="trend_clouds"], .tf-cell[data-key="trend_clouds"] { display: none !important; }

    .trend-full-table {
        /* On adapte la grille pour faire rentrer toutes les colonnes.
           44px pour l'heure (pill lisible), météo plus large, puis 4 colonnes égales */
        grid-template-columns: 44px minmax(55px, 1fr) repeat(4, 1fr) !important; 
        column-gap: 0 !important; 
        box-sizing: border-box !important;
        border: none !important;
    }

    .tf-cell, .tf-header { 
        border-right: none !important; 
        box-sizing: border-box !important; 
        width: 100% !important;
        /* Petit padding pour que le texte rentre sur les petits écrans */
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    .tf-cell[data-key="trend_weather"] img { transform: scale(0.75); }
    .tf-cell { font-size: 0.7rem !important; }
    
    /* On force les pilules (Pills) à être plus compactes sur mobile */
    .tf-cell > div[style*="display:flex"] {
        max-width: 100% !important; 
    }


    /* =======================================
       4. PAGE SIMU & OUTILS CARTE LEAFLET
       ======================================= */
    
    /* ══════════════════════════════════════════════════════════
       LAYOUT VIEWER MOBILE — scroll natif sans position:fixed
       
       Chaîne : .main-content (scroll container) > .container > main
                > #viewer > .universal-header + .view-content.active
       
       IMPORTANT : position:fixed est impossible ici car .main-content
       est un scroll container (overflow:auto). On neutralise son scroll
       et on le reporte sur #trendviewer directement.
       ══════════════════════════════════════════════════════════ */

    /* 1. Neutraliser le scroll de .main-content quand viewer actif
          → rendre .main-content un conteneur height fixe */
    body:has(#viewer.active) .main-content {
        overflow: hidden !important;
        height: 100dvh !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    body:has(#viewer.active) .container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body:has(#viewer.active) .container > main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. #viewer : flex colonne qui remplit tout */
    body:has(#viewer.active) #viewer {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important;
        background: var(--c-bg) !important;
    }

    /* 2b. Footer et sections hors-viewer : cachés quand viewer actif */
    body:has(#viewer.active) .app-mini-footer,
    body:has(#viewer.active) .container > main > *:not(#viewer) {
        display: none !important;
    }

    /* 3. Header (lieu + date + onglets) : sticky dans le flux */
    body:has(#viewer.active) #viewer .universal-header {
        flex: 0 0 auto !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background: var(--c-bg) !important;
    }

    /* 4. Toutes les view-content : cachées */
    body:has(#viewer.active) #viewer .view-content {
        display: none !important;
    }

    /* 5. La view-content ACTIVE : prend l'espace restant */
    body:has(#viewer.active) #viewer .view-content.active {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    /* 5a. #trendviewer : scroll ici (le seul endroit qui scrolle) */
    #trendviewer.view-content.active {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        /* Les tf-headers sticky restent en haut du trendviewer (pas du viewport) */
        position: relative !important;
    }
    /* En-têtes colonnes Timeline : collants en haut du scroll */
    #trendviewer .tf-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
    }
    /* Sélecteur horaire caché sur mobile pour l'onglet Timeline */
    body:has(#trendviewer.active) #header-hour-pill-group {
        display: none !important;
    }

    /* 5b. #simuviewer : flex colonne, pas de scroll */
    #simuviewer.view-content.active {
        overflow: hidden !important;
        padding: 0 !important;
        padding-bottom: 70px !important; /* Espace navbar fixe ios-toolbar-wrapper */
    }

    /* 5c. #graphviewer : scroll vertical */
    #graphviewer.view-content.active {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    /* Mobile : cacher tout sauf la carte dans #print-wrapper
       (géré globalement — conserver uniquement les overrides mobiles spécifiques) */
    #simuviewer #simu-toolbar,
    #simuviewer #print-wrapper > div:not(#flightPlannerMapContainer):not(.controls-grid):not(#flightPlannerResult) {
        display: none !important;
    }
    /* Leaflet controls gauche : cachés sur mobile (zoom, etc. remplacés par simu-toolbar) */
    #simuviewer .leaflet-top.leaflet-left { display: block !important; }
    /* Menu outils Leaflet custom : toujours ouvert, bouton + caché */
    #simuviewer .simu-tools-toggle { display: none !important; }
    #simuviewer .ios-btn-group {
        display: flex !important;
        position: static !important;   /* dans le flux, pas absolu */
        flex-direction: column !important;
        background: rgba(0,0,0,0.72) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 12px !important;
        padding: 5px !important;
        gap: 4px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        animation: none !important;
        top: auto !important; left: auto !important;
    }
    #simuviewer .btn-ios-smart {
        color: #ffffff !important;
    }
    #simuviewer .btn-ios-smart svg {
        stroke: #ffffff !important;
    }
    #simuviewer .ios-separator {
        background: rgba(255,255,255,0.15) !important;
    }
    /* Leaflet-right : VISIBLE — contient le bouton fullscreen #btnSimuFullscreen */
    #simuviewer .leaflet-top.leaflet-right { display: block !important; }

    /* FIX DES OUTILS LEAFLET (Les bulles blanches vides) */
    .leaflet-control-container .leaflet-top.leaflet-right,
    .leaflet-top.leaflet-right .leaflet-control,
    .planner-toggle-btn /* Classe de ton bouton [+] si c'est un custom */ { 
        top: 15px !important;  /* Même hauteur que #simu-map-toast */
        right: 15px !important; /* Marge à droite propre */
        margin-top: 0 !important;
    }
    
    /* Force l'affichage et la couleur des icônes Leaflet (Zoom, GPS, etc.) */
    .leaflet-control a, .leaflet-control button {
        color: #333 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }


    /* Mise en forme du modal de réglage */
    #simu-mobile-modal-body .controls-grid {
        display: flex !important; flex-direction: column !important; gap: 15px !important; padding: 5px 0 !important;
    }
    #simu-mobile-modal-body .controls-grid > div { width: 100% !important; }
    #simu-mobile-modal-body select, #simu-mobile-modal-body input { 
        padding: 8px !important; height: 35px !important; font-size: 1rem !important; 
    }
}

/* =======================================
   SIMU — CONTRÔLES & TOAST (Bureau & Mobile)
   ======================================= */

/* controls-grid toujours masquée dans la vue Simu — accessible via le toast */
#simuviewer .controls-grid,
#simuviewer #flightPlannerResult {
    display: none !important;
}

/* Sauf à l'intérieur de la modale (toast modal) où elle est affichée */
#simu-mobile-modal .controls-grid,
#simu-mobile-modal #flightPlannerResult {
    display: flex !important;
}

/* Toast — toujours visible sur la carte */
#simu-map-toast {
    position: absolute; 
    top: 15px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75); 
    backdrop-filter: blur(10px); 
    color: white;
    padding: 8px 20px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
    font-weight: 700;
    cursor: pointer !important; /* Cliquable partout */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.1); 
    transition: all 0.2s ease;
    display: block !important;
}

/* Effet interactif au survol (PC) et au clic */
#simu-map-toast:hover {
    transform: translateX(-50%) scale(1.05);
    background: rgba(0, 0, 0, 0.9);
}
#simu-map-toast:active { 
    transform: translateX(-50%) scale(0.95); 
}

   

/* =========================================
   MODE MOBILE (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {

    body { overscroll-behavior-y: none; }
    
    body:has(#viewer.active) .top-bar { display: none !important; }
    body:has(#viewer.active) .app-container { padding-top: 0 !important; }
    #viewer.active { padding-top: 0 !important; }

    /* HEADER VIEWER : STICKY EN HAUT SANS DÉCALAGE */
    #viewer-header-global {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        margin: 0 !important;
        box-sizing: border-box !important;
        background-color: var(--c-bg) !important; /* Utilise la couleur du thème actuel */
    }

    .ios-header {
        /* On utilise rgba() avec la variable de surface pour le flou, pas un noir forcé */
       
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 0 4px 15px rgba(0,0,0,0);
        padding: max(10px, env(safe-area-inset-top)) 10px 10px 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* TAB BAR : CACHÉE SUR L'ACCUEIL */
    body:not(:has(#viewer.active)) .ios-toolbar-wrapper { display: none !important; }

   

    .ios-bubble {
        background: rgba(30, 30, 30, 0.95) !important;
        backdrop-filter: blur(25px) !important;
        border: 1px solid rgba(255,255,255,0.1) !important; 
        border-radius: 24px !important; padding: 5px !important; 
        box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important; display: flex !important;
    }

    .ios-bubble.home { flex: 0 0 auto !important; }
    .ios-bubble.home button { flex: 0 0 auto; padding: 6px 12px !important; }
    .ios-bubble.main { flex: 1 !important; justify-content: space-between !important; }

    .ios-bubble button {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; 
        gap: 4px; color: #aaa !important; background: transparent !important; box-shadow: none !important; 
        padding: 6px !important; border: none !important; transition: all 0.2s;
    }

    .tab-icon { display: block; }
    .tab-icon svg { width: 22px; height: 22px; stroke-width: 1.5; transition: all 0.2s; }
    .tab-label { font-size: 0.55rem !important; font-weight: 600; letter-spacing: 0.2px; }
    
    .ios-bubble button.active { background-color: #d32f2f !important; color: #ffffff !important; border-radius: 18px !important; }
    .ios-bubble button.active svg { stroke: #ffffff !important; stroke-width: 2.5; }

    .main-content { padding-bottom: 100px !important; }

    /* TIMELINE : ALIGNEMENT */
    .tf-header[data-key="trend_atmos"], .tf-cell[data-key="trend_atmos"],
    .tf-header[data-key="trend_clouds"], .tf-cell[data-key="trend_clouds"] { display: none !important; }

    .trend-full-table {
        grid-template-columns: 44px repeat(3, 1fr) !important; 
        column-gap: 0 !important; 
        box-sizing: border-box !important;
        border: none !important;
    }
    .tf-cell, .tf-header { 
        border-right: none !important; 
        box-sizing: border-box !important; 
        width: 100% !important;
    }

    

    /* Chaîne flex pour que la carte prenne l'espace disponible */
    #simuviewer #toolFlightPlanner,
    #simuviewer #print-wrapper {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #simuviewer #flightPlannerMapContainer {
        flex: 1 1 auto !important;
        height: 0 !important;        /* flex:1 calcule la hauteur, height:0 = base pour le calcul */
        min-height: 650px !important;
        width: 100% !important;
        margin: 0 !important;
        position: relative !important;
        border-bottom: none !important;
    }

    /* Recap météo au-dessus de la carte Simu */
    #simuviewer #weather-summary-bar {
        flex: 0 0 auto !important;
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    #simuviewer #simu-toolbar {
        display: none !important;  /* caché sur mobile, carte prend tout l'espace */
    }

    .leaflet-control-container .leaflet-top { top: 10px !important; }
    .leaflet-control-container .leaflet-left { left: 10px !important; }

    /* CACHER BOUTON SYNTHÈSE */
    /* Cacher uniquement les boutons de synthèse/impression — PAS les boutons de la toolbar simu */
    #simuviewer button[onclick*="synthese"],
    #simuviewer button[onclick*="flight"],
    button[onclick*="synthese"],
    button[onclick*="Synthese"],
    #btnVolSynthese { display: none !important; }
    /* Protection explicite des boutons toolbar simu */
    #simu-bar-plus,
    #simu-bar-fs { display: flex !important; }

    #simu-mobile-modal-body .controls-grid { display: flex !important; flex-direction: column !important; gap: 15px !important; padding: 5px 0 !important; }
    #simu-mobile-modal-body .controls-grid > div { width: 100% !important; }
    #simu-mobile-modal-body select, #simu-mobile-modal-body input { padding: 8px !important; height: 35px !important; font-size: 1rem !important; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); }
}

/* =======================================
   RETOUCHE GRAPHIQUE (GRAPH, INPUTS & NETTOYAGE)
   ======================================= */

/* 1. Onglet Graph : Boutons Rosace / Speed sur la même ligne */
#graphviewer > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 8px 10px 4px 10px !important;
    flex-shrink: 0 !important;
}
#graphviewer .btn-pill-mini {
    flex: 0 0 auto !important;
    height: 28px !important;
    font-size: 0.72rem !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
}
/* Arrondis : pilule gauche / droite */
#graphviewer .btn-pill-mini:first-of-type { border-radius: 14px 0 0 14px !important; }
#graphviewer .btn-pill-mini:last-of-type  { border-radius: 0 14px 14px 0 !important; }

/* 2. Onglet Graph : Fond Plotly 100% transparent */
.js-plotly-plot .plotly,
.js-plotly-plot .plotly div,
.js-plotly-plot .main-svg {
    background-color: transparent !important;
}
.js-plotly-plot .bg, 
.js-plotly-plot .surface, 
.js-plotly-plot .paper-bg {
    fill: transparent !important;
}

/* 3. Page Home : Inputs en Dark Mode */
html.dark input, html.dark select, html.dark textarea,
body.dark input, body.dark select, body.dark textarea,
.dark-theme input, .dark-theme select, .dark-theme textarea {
    background-color: #2c2c2e !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

/* 4. Nettoyage : Masquer le texte "Données chargées" résiduel en bas de page */
/* Si le texte n'a pas de conteneur propre, ce CSS cible les éléments orphelins connus */
#loading-status, #loading-text, .debug-messages {
    display: none !important;
}

/* =======================================
   FIX ULTRA-FORCÉ : PAGE HOME EN BLACKVIEW
   ======================================= */

/* 1. L'Input de recherche de l'accueil */
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) #cityName,
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) input[type="text"][placeholder*="Rechercher"] {
    background-color: #2c2c2e !important;
    color: #ffffff !important;
    border: 1px solid #555555 !important;
}

/* 2. Les Pilules "Récents" de l'accueil (Fond transparent, texte clair) */
/* Cible n'importe quel bouton contenu dans une div contenant "recent" dans son ID/Classe */
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) [id*="recent"] button,
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) [class*="recent"] button,
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) .recent-btn {
    background-color: transparent !important;
    color: #e0e0e0 !important;
    border: 1px solid #666666 !important;
    box-shadow: none !important;
}

/* Au survol des pilules récentes */
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) [id*="recent"] button:hover,
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) [class*="recent"] button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* 3. Le Menu déroulant des suggestions (Autocomplétion Google Maps ou Custom) */
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) .pac-container,
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) .ui-autocomplete {
    background-color: #2c2c2e !important;
    border: 1px solid #444 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
}

:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) .pac-item,
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) .ui-menu-item-wrapper {
    color: #cccccc !important;
    border-bottom: 1px solid #444444 !important;
}

/* Le texte en gras (la partie correspondante à la frappe) dans Google Places */
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) .pac-item-query {
    color: #ffffff !important;
}

:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) .pac-item:hover,
:is(.dark, .dark-theme, .dark-mode, [data-theme="dark"], body.dark) .ui-menu-item-wrapper:hover {
    background-color: #3a3a3c !important;
    color: #ffffff !important;
}


/* =======================================
   CHIPS LIEUX RÉCENTS (BLACKVIEW / DARK MODE)
   ======================================= */
:is(.dark, .dark-theme, body.dark, html.dark) .history-chip {
    background-color: transparent !important;
    color: #e0e0e0 !important; /* Police claire */
    border-color: #555555 !important; /* Bordure gris foncé */
}

:is(.dark, .dark-theme, body.dark, html.dark) .history-chip:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Léger fond au survol */
    border-color: #777777 !important;
    color: #ffffff !important;
}

:is(.dark, .dark-theme, body.dark, html.dark) .history-chip svg {
    color: #aaaaaa !important; /* Icône plus claire */
}

/* =======================================
   ONGLET HOME SEARCH : BOUTONS & WIDGETS
   ======================================= */

/* 1. Supprimer le fond des boutons GPS et Map (à côté de l'input search) */
.search-container button, 
.search-wrapper button,
#btn-gps, #btn-map, #btnHomeMap, #btnGPSMap {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--c-text) !important; /* S'adapte au mode clair/sombre */
}

/* 2. Occulter les widgets à l'ouverture (ils seront affichés via JS une fois prêts) */
#widgets-container, 
.widgets-grid {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out; /* Apparition fluide */
}

/* Classe ajoutée par JS quand les données sont là */
#widgets-container.data-ready, 
.widgets-grid.data-ready {
    opacity: 1;
    pointer-events: auto;
}

/* 3. Optionnel : Si la carte est affichée via une classe CSS sur un parent */
body:has(#homeMapContainer.active) #widgets-container {
    display: none !important;
}

/* =======================================
   ONGLET HOME SEARCH : BOUTONS GPS & MAP
   ======================================= */

/* Supprimer le fond des boutons à côté de l'input search */
#btn-gps, 
#btn-map, 
#btnHomeMap, 
#btnGPSMap,
.search-container button:not(.search-btn), 
.search-wrapper button:not(.search-btn) {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* On force la couleur pour qu'elle s'adapte au thème clair/sombre */
    color: var(--c-text) !important; 
}

/* Optionnel : un léger hover pour indiquer qu'ils sont cliquables */
#btn-gps:hover, #btn-map:hover, #btnHomeMap:hover, #btnGPSMap:hover {
    background-color: rgba(128, 128, 128, 0.1) !important;
    border-radius: 50%;
}

/* =======================================
   FIX : RESPONSIVE SIMU & FULL SCREEN MAP
   ======================================= */

/* 1. Carte Leaflet : position relative nécessaire pour le bouton Fullscreen (bureau + mobile) */
#flightPlannerMapContainer {
    position: relative !important;
    width: 100% !important;
    z-index: 1;
    overflow: hidden !important;
}

/* 2. Le mode Plein Écran de la carte */
.simu-fullscreen-btn {
    background: var(--c-surface, #ffffff);
    color: var(--c-text, #333333);
    border: none;
    border-radius: 4px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    padding: 0;
    transition: background 0.2s ease;
    margin-top: 10px !important;
    margin-right: 10px !important;
    pointer-events: auto;
}
.simu-fullscreen-btn svg { width: 18px; height: 18px; }
.simu-fullscreen-btn:hover { background: var(--c-bg, #f4f4f4); }

/* =======================================
   ANIMATION ÉTIQUETTES POI (SIMU)
   ======================================= */

/* Étiquettes POI — masquées par défaut */
#flightPlannerMapContainer .leaflet-tooltip.poi-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

/* Au déplacement de la carte (1s via JS moveend) */
#flightPlannerMapContainer.show-poi-labels .leaflet-tooltip.poi-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none; /* pas interactif pendant le flash */
}

/* Au survol du marker (indépendant, sans limite de temps) */
#flightPlannerMapContainer .leaflet-marker-icon:hover .simu-poi-marker,
#flightPlannerMapContainer .leaflet-marker-icon:hover ~ .leaflet-tooltip {
    /* Leaflet gère le hover tooltip nativement via JS — voir ci-dessous */
}

/* Overrider le comportement Leaflet : laisser les tooltips permanents
   répondre au hover même quand ils sont masqués par opacity:0 */
#flightPlannerMapContainer .leaflet-marker-pane .leaflet-marker-icon {
    pointer-events: auto !important;
}

body.has-fullscreen-map .view-content.active,
body.has-fullscreen-map .tab-content.active {
    transform: none !important;
    animation: none !important;
}

body.has-fullscreen-map main,
body.has-fullscreen-map .container,
body.has-fullscreen-map #viewer,
body.has-fullscreen-map .main-content,
body.has-fullscreen-map .app-container,
body.has-fullscreen-map .universal-header {
    overflow: visible !important;
    transform: none !important;
}
body.has-fullscreen-map .universal-header {
    z-index: 0 !important;  /* Sous la carte fullscreen */
}

#flightPlannerMapContainer.map-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 999999 !important; /* Supérieur à tout le reste */
    margin: 0 !important;
    border-radius: 0 !important;
}

/* =======================================
   FIX ULTIME : PICTO FULLSCREEN MOBILE
   ======================================= */

/* 1. On force la zone "En haut à droite" de Leaflet à toujours s'afficher */
.leaflet-top.leaflet-right {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important; /* Pour passer au-dessus des autres éléments */
}

/* 2. On s'assure que notre bouton n'hérite pas d'un display:none mobile */
#btnSimuFullscreen.simu-fullscreen-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    
    /* Réajustement des marges pour mobile au cas où */
    margin-top: 10px !important;
    margin-right: 10px !important;
    
    /* Style de base protégé */
    background: var(--c-surface, #ffffff) !important;
    border-radius: 4px !important;
}

/* 3. Hauteur par défaut (desktop) + position:relative pour overlays */
#flightPlannerMapContainer {
    position: relative !important;
    overflow: hidden !important;
    /* La hauteur est définie inline dans app.html (65vh) — ne pas écraser */
    min-height: 300px !important;
}
/* #simuviewer layout géré par flex mobile */

/* 4. En plein écran, on assure que la zone Leaflet passe vraiment par-dessus tout */
body.has-fullscreen-map .leaflet-top.leaflet-right {
    z-index: 999999 !important;
    position: fixed !important;
}
/* ═══════════════════════════════════════════════════════
   BARRE SIMU MOBILE — #simu-toolbar
   [VOL|FIN] [durée] [alt] [vario] | [⛶ fullscreen]
   Toujours visible sur mobile, cachée sur desktop
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Toolbar : toujours visible, fixe en bas de la carte */
    #simu-toolbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 10px !important;
        height: 48px !important;
        min-height: 48px !important;
        flex: 0 0 48px !important;
        background: var(--c-surface) !important;
        border-top: 1px solid var(--c-border) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Masquer simu-bar-plus si résiduel */
    #simu-bar-plus { display: none !important; }

    /* Bloc paramètres — prend l'espace disponible */
    #simu-toolbar-params {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        overflow-x: auto !important;
        min-width: 0 !important;
    }

    /* Toggle VOL / FIN */
    .stb-group {
        display: flex !important;
        flex-shrink: 0 !important;
        border: 1px solid var(--c-border) !important;
        border-radius: 5px !important;
        overflow: hidden !important;
        height: 32px !important;
    }
    .stb-mode {
        padding: 0 10px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        border: none !important;
        cursor: pointer !important;
        background: var(--c-bg, #f0f0f0) !important;
        color: var(--c-text-muted, #666) !important;
        height: 32px !important;
        letter-spacing: 0.02em !important;
    }
    .stb-mode.active {
        background: var(--c-primary, #d32f2f) !important;
        color: #fff !important;
    }

    /* Selects compacts */
    .stb-select {
        height: 32px !important;
        font-size: 0.75rem !important;
        padding: 0 4px !important;
        border: 1px solid var(--c-border) !important;
        border-radius: 5px !important;
        background: var(--c-surface) !important;
        color: var(--c-text) !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }
    .stb-input {
        height: 32px !important;
        font-size: 0.75rem !important;
        padding: 0 4px !important;
        width: 52px !important;
        border: 1px solid var(--c-border) !important;
        border-radius: 5px 0 0 5px !important;
        background: var(--c-surface) !important;
        color: var(--c-text) !important;
        flex-shrink: 0 !important;
    }

    /* Btn fullscreen — dans leaflet-right, toujours sur la carte */
    #simu-bar-fs {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        background: rgba(0,0,0,0.75) !important;
        backdrop-filter: blur(10px) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
    #simu-bar-fs:active { opacity: 0.85 !important; }
}


/* Graphviewer : le graphe Plotly prend l'espace restant */
@media (max-width: 768px) {
    #graphviewer.view-content.active {
        display: flex !important;
        flex-direction: column !important;
    }
    #graphviewer > div:first-child {
        flex: 0 0 auto !important;
    }
    #pilotGraph {
        flex: 1 1 auto !important;
        min-height: 200px !important;
        width: 100% !important;
    }
}

/* Sur desktop : cacher la toolbar mobile */
@media (min-width: 769px) {
    #simu-toolbar { display: none !important; }
}