/* ======= RESPONSIVE DESIGN GLOBALE ======= */

/* Conteneur principal pour éviter les débordements horizontaux */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* =========================================
   TABLETTES ET MOBILES (< 992px)
========================================= */
@media (max-width: 992px) {
    /* Marge globale réduite */
    /* En-tête de navigation : Empilement */
    header, .top-nav, .corp-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    
    .nav-links, .header-title {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    /* Grilles : Passage à 1 seule colonne */
    main, .container, .dashboard-grid, .site-grid, .dashboard-corp {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .modules-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Layouts scindés (ex: Opérations 3D) -> Empilés en Portrait */
    .split-layout.portrait-stack {
        flex-direction: column !important;
    }
    
    @media (orientation: portrait) {
        .split-layout {
            flex-direction: column !important;
        }
        .panel-left, .panel-right {
            width: 100% !important;
            height: auto !important;
            min-height: 50vh !important;
            position: relative !important;
        }
    }
    @media (orientation: landscape) {
        /* En mode paysage sur mobile, on garde la disposition gauche/droite mais en ajustant les tailles */
        .panel-left { width: 65% !important; }
        .panel-right { width: 35% !important; min-width: 0 !important; }
    }

    /* Conteneurs Flex (KPIs) : Empilement */
    /* Tableaux : Ajout du Scroll Horizontal (Le Swipe) */
    .table-container, .data-table, .planning-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Fluide sur iOS */
    }

    table {
        min-width: max-content;
    }

    /* Modals : Utilisation de l'espace max */
    .modal {
        width: 95% !important;
        padding: 15px !important;
        margin: 10px auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* Formulaires en ligne */
    .filters, div[style*="display: flex; gap: 15px; margin-bottom: 20px;"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Spécifique : Carnet de Santé SVG */
    .wagon-layout {
        flex-direction: column !important;
    }
    #wagonSchematic {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
    }

    /* Spécifique : Zone OCR (Gestion Flux) */
    #ocrZone {
        padding: 1.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Cartes */
    .glass-card, .site-card, .flux-column, .corp-panel, .modal-corp {
        padding: 15px !important;
    }
    
    /* Boutons génériques */
    button, .btn-link, .btn-action, .btn-data, .btn-ops, .btn-corp {
        max-width: 100%;
        text-align: center !important;
    }
    
    /* Spécifique : Réduction des marges du Dashboard Corporate */
    .dashboard-corp {
        padding: 1.5rem 1rem !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 600px) {
    .corp-header {
        position: relative;
    }

    .corp-header > * {
        width: 100%;
    }

    .corp-header .btn-corp,
    .modal-corp .btn-corp {
        width: 100%;
    }

    .modal-overlay-corp {
        padding: 1rem;
    }
}

/* =========================================
   FLUX WAGONS 3D : TELEPHONE PORTRAIT/PAYSAGE
========================================= */
.mobile-flux-orientation-gate {
    display: none;
}

@media (max-width: 768px) and (orientation: portrait) {
    body.mobile-flux-3d-page {
        min-height: 100svh;
        overflow: hidden !important;
    }

    body.mobile-flux-3d-page canvas,
    body.mobile-flux-3d-page #destinationsMap,
    body.mobile-flux-3d-page .map-section,
    body.mobile-flux-3d-page #ui-layer,
    body.mobile-flux-3d-page #langSelector,
    body.mobile-flux-3d-page #tooltip,
    body.mobile-flux-3d-page #track-priority-bar,
    body.mobile-flux-3d-page #fids-layer,
    body.mobile-flux-3d-page #pendingTrainsMapPanel,
    body.mobile-flux-3d-page #departureTrainsMapPanel,
    body.mobile-flux-3d-page #ops-hud-tabs,
    body.mobile-flux-3d-page #ops-summary-layer,
    body.mobile-flux-3d-page #daily-program-panel,
    body.mobile-flux-3d-page #weekly-program-panel,
    body.mobile-flux-3d-page #ops-layer-controls,
    body.mobile-flux-3d-page #track-detail-panel,
    body.mobile-flux-3d-page #weather-hud-widget,
    body.mobile-flux-3d-page #hud-track-legend,
    body.mobile-flux-3d-page #ticker-container,
    body.mobile-flux-map-page > .shell {
        display: none !important;
    }

    body.mobile-flux-3d-page .mobile-flux-orientation-gate {
        position: fixed;
        inset: 0;
        z-index: 2147483000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 28px;
        text-align: center;
        color: #f8fafc;
        background:
            radial-gradient(circle at 50% 20%, rgba(190, 214, 0, 0.16), transparent 34%),
            linear-gradient(180deg, #101c22 0%, #071115 100%);
    }

    .mobile-flux-orientation-icon {
        width: 86px;
        height: 86px;
        display: grid;
        place-items: center;
        border: 2px solid rgba(190, 214, 0, 0.7);
        border-radius: 18px;
        color: #bed600;
        font-size: 3rem;
        line-height: 1;
        transform: rotate(90deg);
        box-shadow: 0 0 28px rgba(190, 214, 0, 0.16);
    }

    .mobile-flux-orientation-gate p {
        max-width: 340px;
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1.45;
    }

    .mobile-flux-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 10px 16px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 8px;
        color: #101820;
        background: #bed600;
        font-weight: 800;
        text-decoration: none;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    html,
    body.mobile-flux-3d-page {
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 100svh;
        overflow: hidden !important;
    }

    body.mobile-flux-3d-page canvas {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100svh !important;
        z-index: 1 !important;
        pointer-events: auto;
    }

    body.mobile-flux-3d-page .mobile-flux-orientation-gate {
        display: none !important;
    }

    body.mobile-flux-3d-page #langSelector,
    body.mobile-flux-3d-page #ticker-container,
    body.mobile-flux-3d-page #fids-layer,
    body.mobile-flux-3d-page #pendingTrainsMapPanel,
    body.mobile-flux-3d-page #departureTrainsMapPanel,
    body.mobile-flux-3d-page #weather-hud-widget,
    body.mobile-flux-3d-page #ops-layer-controls,
    body.mobile-flux-3d-page #hud-track-legend {
        display: none !important;
    }

    body.mobile-flux-3d-page #track-priority-bar {
        top: 6px !important;
        left: 6px !important;
        right: 6px !important;
        width: auto !important;
        min-height: 36px !important;
        padding: 5px 8px !important;
        grid-template-columns: auto minmax(80px, 1fr) repeat(4, auto) !important;
        gap: 3px 8px !important;
        transform: none !important;
        font-size: 0.64rem !important;
        border-radius: 7px !important;
    }

    body.mobile-flux-3d-page .track-priority-label,
    body.mobile-flux-3d-page .track-weather-line {
        display: none !important;
    }

    body.mobile-flux-3d-page #ui-layer {
        top: 50px !important;
        left: 6px !important;
    }

    body.mobile-flux-3d-page #ui-layer .corp-panel {
        width: 148px !important;
        padding: 8px !important;
    }

    body.mobile-flux-3d-page #ui-layer h1 {
        font-size: 0.92rem !important;
        margin-bottom: 3px !important;
    }

    body.mobile-flux-3d-page #ui-layer .stats,
    body.mobile-flux-3d-page #btn-gerer-voies,
    body.mobile-flux-3d-page .ops-nav .secondary-action,
    body.mobile-flux-3d-page .ops-nav a:nth-of-type(n+6) {
        display: none !important;
    }

    body.mobile-flux-3d-page .ops-nav {
        gap: 5px !important;
        margin-top: 0 !important;
    }

    body.mobile-flux-3d-page .ops-nav .btn-corp {
        min-height: 30px !important;
        padding: 6px 7px !important;
        font-size: 0.64rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
    }

    body.mobile-flux-3d-page .menu-toggle,
    body.mobile-flux-3d-page .mobile-menu-toggle,
    body.mobile-flux-3d-page .supervision-menu-toggle,
    body.mobile-flux-3d-page .menu-toggle-btn {
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 99999 !important;
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        font-size: 1.25rem !important;
    }

    body.mobile-flux-3d-page #ops-hud-tabs,
    body.mobile-flux-3d-page #weekly-program-panel,
    body.mobile-flux-3d-page #daily-program-panel,
    body.mobile-flux-3d-page #ops-summary-layer {
        right: 6px !important;
        width: 214px !important;
    }

    body.mobile-flux-3d-page #ops-hud-tabs {
        top: 50px !important;
    }

    body.mobile-flux-3d-page #weekly-program-panel,
    body.mobile-flux-3d-page #daily-program-panel,
    body.mobile-flux-3d-page #ops-summary-layer {
        top: 88px !important;
        max-height: calc(100svh - 96px) !important;
        overflow: hidden !important;
    }

    body.mobile-flux-3d-page .ops-floating-panel > .corp-panel,
    body.mobile-flux-3d-page .ops-floating-panel > .industrial-panel {
        padding: 8px !important;
    }

    body.mobile-flux-3d-page .ops-panel-heading {
        min-height: 20px !important;
        font-size: 0.66rem !important;
    }

    body.mobile-flux-3d-page .ops-panel-body {
        margin-top: 6px !important;
    }

    body.mobile-flux-3d-page .summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    body.mobile-flux-3d-page .summary-kpi {
        padding: 5px !important;
    }

    body.mobile-flux-3d-page .summary-kpi .label {
        font-size: 0.48rem !important;
    }

    body.mobile-flux-3d-page .summary-kpi .value {
        font-size: 0.78rem !important;
    }

    body.mobile-flux-3d-page .weekly-program-list,
    body.mobile-flux-3d-page #summary-track-states {
        display: none !important;
    }

    body.mobile-flux-map-page {
        overflow-y: auto !important;
        background: #071115;
    }

    body.mobile-flux-map-page > .shell {
        width: 100% !important;
        min-height: 100svh;
        padding: 6px !important;
        display: grid !important;
        grid-template-rows: auto 1fr;
        gap: 6px !important;
    }

    body.mobile-flux-map-page header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    body.mobile-flux-map-page header h1 {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    body.mobile-flux-map-page header .meta,
    body.mobile-flux-map-page .kpis,
    body.mobile-flux-map-page .import-section,
    body.mobile-flux-map-page #programAlertsPanel,
    body.mobile-flux-map-page .grid {
        display: none !important;
    }

    body.mobile-flux-map-page .actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        overflow: hidden !important;
    }

    body.mobile-flux-map-page .actions .btn,
    body.mobile-flux-map-page .actions button {
        min-height: 30px !important;
        padding: 6px 8px !important;
        font-size: 0.62rem !important;
        white-space: nowrap !important;
    }

    body.mobile-flux-map-page .actions .future,
    body.mobile-flux-map-page #legacyFlux {
        display: none !important;
    }

    body.mobile-flux-map-page .map-section {
        min-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.mobile-flux-map-page .map-section .section-head {
        padding: 6px 8px !important;
    }

    body.mobile-flux-map-page .map-section .section-head h2 {
        font-size: 0.8rem !important;
    }

    body.mobile-flux-map-page .map-body {
        height: calc(100svh - 82px) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 148px !important;
        min-width: 0 !important;
    }

    body.mobile-flux-map-page #destinationsMap {
        height: 100% !important;
        min-height: 0 !important;
    }

    body.mobile-flux-map-page .map-side {
        min-width: 0 !important;
        max-height: 100% !important;
        padding: 8px !important;
        overflow-y: auto !important;
    }

    body.mobile-flux-map-page .map-side h3,
    body.mobile-flux-map-page .missing-destination,
    body.mobile-flux-map-page .empty {
        font-size: 0.68rem !important;
    }
}