/* ═══════════════════════════════════════════════════════════════════════════
   Océane — Règles responsive transverses (mobile ≤ 768px, tablette ≤ 900px)
   Complète layout.css (sidebar/hamburger). Les pages Systèmes et Commerce
   portent leurs classes de layout propres (sys-*, commerce-*) dans leur
   <style> local ; ici : modales, tables et formulaires communs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Conteneur générique pour table large : à poser autour des <table> profondes */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* .main-content est un flex item de .app : sans min-width:0, sa largeur
   minimale est la largeur intrinsèque de son contenu (une table large suffit
   à pousser toute la page au-delà du viewport). Autoriser le rétrécissement
   rend effectifs les conteneurs à défilement interne. */
.app > .main-content {
    min-width: 0;
}

/* Tableau de bord : bloc Finances / Peuple / Journal */
.dash-3col {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 1100px) {
    .dash-3col {
        grid-template-columns: 1fr;
    }
}

/* ═══ Arbre technologique : arbre + colonne « Budget de recherche » ═══
   La largeur disponible se déduit de la sidebar courante (--sidebar-width suit
   le repli du menu) plutôt que d'une constante de 330px. */
.tech-workspace {
    display: flex;
    flex-direction: row;
    gap: 20px;
    height: 660px;
    align-items: stretch;
    width: 100%;
    max-width: calc(100vw - var(--sidebar-width) - 70px);
    min-width: 0;
    overflow: hidden;
    margin-bottom: 20px;
}
.tech-tree-frame {
    flex: 1 1 0%;
    min-width: 0;
    height: 100%;
}
.tech-sidebar {
    width: 270px;
    flex-shrink: 0;
    height: 100%;
}

/* ═══ Formulaire de construction : catalogue + bilan des ressources ═══ */
.construction-planner-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
    gap: 18px;
    align-items: start;
}
.construction-planner-summary {
    position: sticky;
    top: 0;
    display: grid;
    gap: 12px;
    min-width: 0;
}

/* Le bilan / le budget passent SOUS le catalogue avant que leur largeur
   minimale ne le comprime jusqu'à le rendre illisible. */
@media (max-width: 900px) {
    .tech-workspace {
        flex-direction: column;
        height: auto;
        max-width: 100%;
        overflow: visible;
    }
    .tech-tree-frame {
        flex: 0 0 auto;
        width: 100%;
        height: 60vh;
        min-height: 300px;
    }
    .tech-sidebar {
        width: 100%;
        height: auto;
        max-height: 60vh;
    }

    .construction-planner-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .construction-planner-summary {
        position: static;
    }
}

@media (max-width: 768px) {

    /* ── En-tête de page : titre et actions empilés plutôt que débordement
       horizontal (le bloc .page-actions poussait la page au-delà du viewport
       sur la carte galactique). ── */
    .page-header {
        flex-wrap: wrap;
        row-gap: var(--space-3);
    }

    /* ── Carte galactique ── */
    /* L'en-tête (légende + 5 boutons) est haut sur mobile : le laisser défiler
       avec la page pour rendre tout le viewport à la carte. */
    .galaxy-header {
        position: static;
    }
    .galaxy-legend {
        flex-wrap: wrap;
    }
    /* !important : reprend la main sur le height inline (100vh - 70px) ;
       dvh évite la zone masquée par la barre du navigateur mobile. */
    .galaxy-map-page {
        height: calc(100dvh - 70px) !important;
    }

    /* ── Modales : plein écran utile, défilement interne ──
       Beaucoup de modales portent un max-width inline (425-750px) : le
       !important est nécessaire pour reprendre la main sur mobile. */
    .modal,
    .modal-overlay .modal {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 92vh;
        overflow-y: auto;
        padding: var(--space-4);
    }

    /* ── Tables de données : défilement horizontal interne plutôt que
       débordement de la page. display:block sur <table> rend le tableau
       défilable sans casser la mise en page des cellules. ── */
    .modal table,
    .page-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* ── Formulaires côte à côte → empilés ── */
    .form-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    .form-row .form-group {
        flex: 1 1 140px;
        min-width: 0;
    }

    /* Les boutons d'action longs ne doivent pas déborder */
    .btn {
        white-space: normal;
    }
}