/* ═══════════════════════════════════════════════════════════════════════════
   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;
    }
}

@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;
    }
}