/* ═══════════════════════════════════════════════════════════════════════════
 *  debordements_mobile.css — « QUE RIEN NE DÉBORDE » AU TÉLÉPHONE (lot 6, 10/10/2026)
 *  R-MOBILE-DEBORDEMENTS (claude/REGLES_METIER_MOBILE_SUITE2.md).
 * ───────────────────────────────────────────────────────────────────────────
 *  Les écrans qui n'ont pas (encore) leur passage au gabarit Préparation :
 *  ici, on ne change PAS leur style, on les empêche seulement de dépasser la
 *  largeur du téléphone (320 à 430 px). Trois moyens, toujours les mêmes :
 *    1. le texte revient à la ligne (au lieu de pousser l'écran) ;
 *    2. les colonnes de bureau s'empilent ;
 *    3. ce qui ne peut pas se replier (une suite de mois) défile DANS son cadre.
 *  Téléphone seulement (tout est dans le @media) : le bureau ne voit rien.
 *  Contrôle : banc/banc_debordements_mobile.mjs (chaque écran à 320 et 390 px).
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Inventaire : la rangée du haut (« SECTION · … ▾ » + scanner + compter)
        prenait la largeur de son texte le plus long (jusqu'à 426 px) et
        poussait tout l'écran ; elle prend maintenant la largeur du téléphone
        et le nom de section se coupe en « … » (mx-filtre). ── */
  .inv-space > .inv-sidebar { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .inv-main { min-width: 0; }
  /* Les lignes de l'Inventaire sont déjà des cartes (css/mobile.css) mais la règle
     générale des tableaux au téléphone (« table » : défile de côté, sans retour à
     la ligne) s'appliquait encore : un nom de client long faisait 900 px et partait
     hors de la carte, caché. Ici : la carte tient l'écran, le texte revient à la ligne.
     Les pastilles (achat, prix, réception) gardent leur nowrap à elles (inventaire.css). */
  .inv-table { overflow-x: visible; white-space: normal; }
  .inv-table tbody td { min-width: 0; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; }
  /* Quand la PREMIÈRE cellule porte le nom (Comptage : « INV-2026-008 · note »), elle passe
     en tête sur toute la largeur — la règle générale (css/mobile.css, ordre 1, flex-basis 0)
     la rejetait en fin de ligne dans une colonne de 57 px. */
  .inv-table tbody td:first-child:has(.inv-nom) { order: -1; flex: 1 1 100%; }

  /* ── Analyse DCE : la liste des analyses devient une carte par analyse
        (titre + affaire sur la première ligne, statut et date dessous). Les
        colonnes Pièces et Créée par sont déjà masquées au téléphone (dce.css). ── */
  .dce-liste { overflow-x: visible; white-space: normal; }
  .dce-liste thead { display: none; }
  .dce-liste tbody { display: block; }
  .dce-liste tr.dce-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-bottom: 1px solid var(--wood-pale); min-height: 44px; }
  .dce-liste tr.dce-ligne td { padding: 0; border: 0; background: transparent !important; }
  .dce-liste tr.dce-ligne td:first-child { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .dce-liste tr.dce-ligne td:nth-child(4) { margin-left: auto; }
  .dce-liste tr.dce-ligne:active { background: var(--wood-bg); }

  /* ── Charge de production : le tableau à 6 colonnes de bureau devient une
        carte par semaine, sur trois lignes :
          S41 · En cours ·············· 3 cmd · Statut
          12/10 – 18/10 ··············· 31,5 h / 39 h (reste …)
          ████████████░░░░ 81 %
        Les intitulés de colonnes (Semaine, Période…) n'ont plus de sens : masqués. ── */
  .plan-table .plan-thead { display: none; }
  .plan-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 4px;
    grid-template-areas: "sem nb statut" "dates charge charge" "barre barre barre";
    align-items: center; padding: 12px 14px;
  }
  .plan-row > .plan-col-sem    { grid-area: sem; width: auto; flex-wrap: wrap; min-width: 0; }
  .plan-row > .plan-col-dates  { grid-area: dates; width: auto; min-width: 0; white-space: nowrap; }
  .plan-row > .plan-col-dates .plan-presence-badge { white-space: normal; }
  .plan-row > .plan-col-nb     { grid-area: nb; width: auto; }
  .plan-row > .plan-col-nb .plan-nb-badge::before { content: 'cmd '; font-weight: 600; }
  .plan-row > .plan-col-charge { grid-area: charge; width: auto; text-align: right; }
  .plan-row > .plan-col-bar    { grid-area: barre; padding: 0; min-width: 0; }
  .plan-row > .plan-col-bar > *:first-child { flex: 1 1 auto; min-width: 0; }
  .plan-row > .plan-col-status { grid-area: statut; width: auto; white-space: nowrap; }
  /* Détail d'une semaine (jours) : libellé + barre sur une ligne, commandes dessous */
  .plan-day-row { flex-wrap: wrap; padding: 8px 14px; gap: 6px 10px; }
  .plan-day-bar { width: auto; flex: 1 1 120px; min-width: 0; }
  .plan-day-cards { flex: 1 1 100%; min-width: 0; }
  .plan-card-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

  /* ── Livraisons : la colonne des tournées prenait la largeur de son contenu
        (grille « 1fr » = au moins le contenu) ; elle est maintenant tenue à
        l'écran, et ses rangées se replient. ── */
  .livraisons-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .livraisons-grid > * { min-width: 0; }
  .m-semaine-lib { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #liv-tournees .card { min-width: 0; overflow-wrap: anywhere; }
  /* En-tête d'une tournée : chauffeur sur sa ligne ; statut + boutons dessous */
  #liv-tournees .card > div[style*="gap:10px;margin-bottom:10px"] { flex-wrap: wrap; row-gap: 6px; }
  #liv-tournees .card > div[style*="gap:10px;margin-bottom:10px"] > div:first-child { flex: 1 1 100% !important; min-width: 0; }
  #liv-tournees .card > div[style*="gap:10px;margin-bottom:10px"] > span { margin-right: auto; }
  /* Une commande de la tournée : n° + texte sur la première ligne ; itinéraire,
     commentaire, confirmer et retirer dessous, alignés sous le texte. */
  #liv-tournees .card > div[style*="gap:8px;padding:8px 10px"] { flex-wrap: wrap; row-gap: 8px; }
  #liv-tournees .card > div[style*="gap:8px;padding:8px 10px"] > div:nth-child(2) { flex: 1 1 calc(100% - 28px) !important; }
  #liv-tournees .card > div[style*="gap:8px;padding:8px 10px"] > a { margin-left: 28px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #liv-tournees .card > div[style*="gap:8px;padding:8px 10px"] > .btn-danger { margin-left: auto; }
  .meteo-tournee, .meteo-tournee > span { max-width: 100%; min-width: 0; }
  .meteo-tournee > span { flex-wrap: wrap; }

  /* ── Retraits : « Où la trouver » — un emplacement long revient à la ligne ── */
  .ret-ou-empl { white-space: normal; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }

  /* ── Analyse : « CA facturé par mois » — les mois défilent dans leur cadre
        (12 montants ne tiennent pas dans 288 px) ; js/analyse.js amène sur
        le mois le plus récent. ── */
  .analyse-bars { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; gap: 6px; padding-bottom: 4px; }
  .analyse-bar-col { flex: 1 0 56px; }
  .analyse-bar-val, .analyse-bar-label { white-space: nowrap; }

  /* ── Congés : barre d'outils — ‹ Aujourd'hui › puis la période dessous ;
        filtre puis « + Saisir une absence » en pleine largeur ── */
  .cg-nav, .cg-actions { flex-wrap: wrap; }
  .cg-nav > .btn { min-height: 44px; }
  .cg-periode { flex: 1 1 100%; margin-left: 0; text-align: center; }
  .cg-actions > * { flex: 1 1 100%; min-height: 44px; }
}