/* ═══════════ SGC TABLET SPLIT — Layout tablette dédié (Phase 4) ═══════════
   Scopé body.dev-tablet.shell-on → n'affecte QUE la tablette quand la coquille
   est active. Distinct du téléphone (barre d'onglets) ET du bureau (intact).
   Deux régimes selon la largeur :
   • < 1024px (pliables type Z Fold déplié, iPad mini / portrait) : 2 COLONNES =
     sidebar VERTICAL LABELLISÉ à gauche + contenu pleine largeur. Le détail
     (bâtiment / ressource) s'ouvre en feuille overlay plein écran (chemin coarse
     natif de sgc-responsive.css) → le centre garde toute sa largeur.
   • ≥ 1024px (iPad paysage, grand pliable) : 3 COLONNES = sidebar + contenu +
     panneau détail DOCKÉ (vrai split-view master-détail).
   ───────────────────────────────────────────────────────────────────────── */

/* La zone principale devient une grille : rail fixe à gauche, contenu à droite. */
body.dev-tablet.shell-on .main-layout {
  display: grid !important;
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: start;
}

/* ── FIX scroll iPad (régression v5.3) ──
   .main-layout passe en grid + align-items:start MAIS conserve overflow:hidden +
   height:100% (base sgc-layout.css l.613). En grid, la colonne contenu n'est plus
   bornée par flex:1 → .center-content prend une hauteur auto, la chaîne
   height:100% / overflow-y:auto de .sec-full / .planet-section devient INERTE, et
   .main-layout (overflow:hidden) clippe le dépassement = PAGE FIGÉE (impossible de
   scroller infra & toutes les sections). Parade : borner la colonne contenu à la
   hauteur du viewport sous la topbar (56px) → son scroll interne refonctionne. */
body.dev-tablet.shell-on .center-content {
  height: calc(100vh - 56px);
  min-height: 0;
}

/* Rail latéral : colonne 1, pleine hauteur, vertical, collant sous la topbar. */
body.dev-tablet.shell-on .left-nav {
  grid-column: 1;
  grid-row: 1 / 9999;
  position: sticky;
  top: 56px;
  align-self: stretch;
  height: calc(100vh - 56px);
  width: 208px !important;
  max-width: 208px !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-right: 1px solid rgba(120,170,255,0.18);
}

/* Tout le reste (barre planète, contenu, sections plein écran) → colonne 2. */
body.dev-tablet.shell-on .main-layout > :not(.left-nav):not(.mnav-overlay) {
  grid-column: 2;
}

/* ── Rail = vrai sidebar LABELLISÉ (façon iPad) ──
   La media-query legacy @media (max-width:1023px) de sgc-layout.css transforme
   .left-nav en barre HORIZONTALE icône-seule : elle masque les libellés
   (.lnav-lbl { display:none }), les en-têtes/séparateurs, et CENTRE les icônes
   (justify-content:center). Comme on re-bascule ce rail en COLONNE de 208px, ces
   règles laissaient une colonne large remplie d'icônes minuscules centrées dans
   le vide → illisible, on ne sait pas ce qu'on touche. On rétablit donc le texte,
   les en-têtes de section et l'alignement à gauche : navigation claire. */
body.dev-tablet.shell-on .left-nav .lnav-items { flex-direction: column; }
body.dev-tablet.shell-on .left-nav .lnav-item {
  width: 100%;
  min-height: 44px;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 9px 14px !important;
}
body.dev-tablet.shell-on .left-nav .lnav-lbl {
  display: inline !important;
  font-size: 13px !important;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.dev-tablet.shell-on .left-nav .lnav-ico {
  margin: 0 !important;
  width: 26px !important;
  height: 26px !important;
  font-size: 15px !important;
  flex-shrink: 0;
}
body.dev-tablet.shell-on .left-nav .lnav-header { display: block !important; }
body.dev-tablet.shell-on .left-nav .lnav-div,
body.dev-tablet.shell-on .left-nav .lnav-sep { display: block !important; }

/* Masque le tiroir tablette legacy (slide-in) quand le split est actif :
   les deux ne doivent jamais coexister. */
body.dev-tablet.shell-on .tablet-drawer-toggle,
body.dev-tablet.shell-on .tablet-drawer-backdrop { display: none !important; }

/* ═══ ≥1024px : vrai split-view 3 colonnes (master-détail DOCKÉ) ═══
   Au lieu du tiroir slide-in (legacy), le panneau planète / fiche bâtiment est
   une 3ᵉ colonne toujours visible. Override du position:fixed + translateX(100%)
   imposé par sgc-tablet.css (≥1024). En DESSOUS de 1024 (pliables, petites
   tablettes) ce bloc ne s'applique pas : le détail reste une feuille overlay
   plein écran (chemin coarse natif) et le centre conserve toute sa largeur. */
@media (min-width: 1024px) {
  body.dev-tablet.shell-on[data-section="overview"] .main-layout,
  body.dev-tablet.shell-on[data-section="infra"] .main-layout {
    grid-template-columns: 208px minmax(0, 1fr) 296px;
  }
  body.dev-tablet.shell-on[data-section="overview"] #rightPanel,
  body.dev-tablet.shell-on[data-section="infra"] #rightPanel {
    position: static !important;
    transform: none !important;
    display: flex !important;
    grid-column: 3;
    grid-row: 1 / 9999;
    width: 296px !important;
    max-width: 296px !important;
    height: auto;
    max-height: calc(100vh - 56px);
    align-self: stretch;
    border-left: 1px solid rgba(120,170,255,0.18);
    box-shadow: none !important;
  }

  /* ── Détail docké : showBldDetail/showResDetail/showUnitDetail ajoutent la
     classe `rp-mobile-open` + un backdrop plein écran + body.overflow:hidden
     (branche overlay déclenchée par `pointer:coarse`, TOUJOURS vrai sur iPad). En
     split-view le panneau est docké en colonne 3 → on neutralise les fuites de
     l'overlay : (1) pas de voile (il assombrissait ET bloquait les clics du rail +
     du contenu), (2) le panneau scrolle si le détail est long, (3) le bouton
     d'action reste DANS la colonne au lieu de s'étaler pleine largeur en bas
     d'écran (position:fixed hérité de l'overlay).
     ⚠ Ces neutralisations valent UNIQUEMENT quand le panneau est docké (≥1024).
     En 2 colonnes (<1024) on VEUT le voile + le bouton fixe de l'overlay. ── */
  body.dev-tablet.shell-on .rp-backdrop { display: none !important; }
  body.dev-tablet.shell-on #rpBldDetail {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.dev-tablet.shell-on .right-panel.rp-mobile-open .rp-upgrade-btn {
    position: sticky !important;
    bottom: 0;
    left: auto; right: auto;
    width: auto !important;
    margin: 10px 0 0 !important;
    z-index: 5;
  }
}

/* ═══════════ FIX iPad/tablette — QA terrain 03/06 ═══════════
   Lot de correctifs d'affichage remontés sur iPad réel (paysage + portrait),
   chacun reproduit puis validé au navigateur en émulation iPad. Scopés tablette
   → bureau et téléphone intacts.
   ───────────────────────────────────────────────────────────────────────── */

/* (1) Fil d'Ariane masqué sur la coquille tablette — comme sur téléphone
   (sgc-shell.css). Il s'affichait (26px) PAR-DESSUS le haut du rail et du
   contenu (calés sur top:56px = hauteur de la topbar seule) → 1er item de nav +
   haut de section rognés ("affichage pas totalement visible", item du haut
   coupé). Le rail labellisé porte déjà le contexte de navigation. */
body.dev-tablet.shell-on #breadcrumbBar { display: none !important; }

/* (2) Bouton « Annuler » des files (construction / recherche / entraînement)
   tronqué : au split-view le centre est étroit (3 slots ~209px) et le bouton
   (~108px) débordait du slot puis était coupé par .og-slot{overflow:hidden}.
   On laisse l'en-tête passer le bouton à la ligne → toujours visible/cliquable. */
body.dev-tablet .og-slot-hdr { flex-wrap: wrap; row-gap: 8px; }
body.dev-tablet .og-cancel-btn { flex-shrink: 0; }

/* (3) Panneau RESSOURCES (docké ~296px) : les très gros nombres (milliards)
   écrasaient la colonne du taux → le débit "+x xxx/h" se cassait sur 2 lignes et
   la valeur partait en colonne lettre-par-lettre (overflow-wrap:anywhere).
   On garde le taux sur une ligne et on pose la valeur sur SA propre ligne pleine
   largeur (alignée à droite) → tout lisible, plus aucun retour vertical. */
body.dev-tablet #rightPanel .rp-rate { white-space: nowrap; }
body.dev-tablet #rightPanel .rp-res-val { white-space: nowrap; overflow-wrap: normal; }
body.dev-tablet #rightPanel .rp-res-right {
  flex: 1 0 100%;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
}

/* (4) Astria Porta — la liste des destinations était écrasée à ~130px (les
   en-têtes de filtres mangeaient la colonne) → la DERNIÈRE adresse, collée au
   bas, était difficile à sélectionner. On masque l'astuce de palier sur tablette
   (info non essentielle, conservée sur bureau) → la liste double de hauteur, et
   un léger padding bas dégage le dernier item du bord. */
body.dev-tablet .gate-tier-hint { display: none; }
body.dev-tablet #planetList,
body.dev-tablet #pegasusPlanetList,
body.dev-tablet #explorePlanetList { padding-bottom: 10px; }

/* (5) Marge basse du scroller principal (vue d'ensemble / infra / recherche)
   pour que la dernière rangée de cartes (bouton Construire/Améliorer) dégage le
   bord bas et reste confortablement atteignable au doigt. */
body.dev-tablet.shell-on .planet-section { padding-bottom: 24px; }