/* ============================================================
   GEVA — Stabilisation responsive (QA design globale).
   Règles GLOBALES, chargées APRÈS shell.css/components.css :
   corrige à la source (design system) les débordements
   horizontaux, le confinement des tableaux, et le rendu
   responsive des boutons/actions — sans patcher page par page.
   Ne touche jamais la logique : présentation uniquement.
   ============================================================ */

/* 1) AUCUN scroll horizontal de page.
   `overflow-x:clip` sur l'élément racine borne la largeur sans créer
   de conteneur de défilement → les `position:sticky` (sidebar/topbar)
   restent intacts. Fallback `hidden` pour Safari < 16. */
html{overflow-x:hidden;overflow-x:clip;}
/* 2) Gouttière de scrollbar TOUJOURS réservée (scrollbar-gutter:stable).
   Sans ça, une page avec historique (Dashboard, Call) affiche une barre de
   défilement verticale qui mange ~15px de largeur, alors qu'une page vide (Sign)
   n'en a pas → les cartes/KPI n'ont pas la même largeur d'une page à l'autre.
   En réservant la place sur TOUTES les pages, la largeur de contenu est constante
   (cartes identiques avec ou sans historique). No-op avec scrollbars overlay. */
html{scrollbar-gutter:stable;}
.app{max-width:100%;}
.main{min-width:0;}                 /* déjà dans shell.css — réaffirmé (anti-blowout grille) */
.content{max-width:min(1240px,100%);}
.content > *{min-width:0;}           /* aucun enfant direct ne pousse la largeur */

/* 2) TABLEAUX : défilement DANS le panneau, jamais sur la page.
   Les pages portées posent <table> directement dans .panel. On remplace
   le `overflow:hidden` (qui COUPE les colonnes larges) par un défilement
   horizontal interne. Vertical masqué : un panel s'ajuste à son contenu. */
.panel{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
/* Sur desktop la table tient en 100 % (cellules qui passent à la ligne) ; quand
   elle dépasse réellement (beaucoup de colonnes, ou min-width mobile), le panel
   défile horizontalement au lieu de couper le contenu ou pousser la page. */

/* 3) TEXTE long : ne jamais élargir la cellule/carte. */
.cellmod,.entity,.li__main,.tl__c,.field{min-width:0;}
.cellmod > div,.entity .nm,.entity .sub,.li__t,.li__s,.tl__t,.tl__s,
.field .v{overflow-wrap:anywhere;}
.crumb{min-width:0;}
.crumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 4) MÉDIAS bornés (icônes/SVG/images jamais hors cadre). */
img,svg,video{max-width:100%;height:auto;}
.geva-btn svg,.ra svg,.nav__item svg,.kpi .ic svg,.geva-icon{height:auto;flex:none;}

/* 5) BOUTONS : jamais coupés, groupes d'actions responsives.
   Les barres d'actions passent à la ligne au lieu de déborder. */
.geva-btn{max-width:100%;}
.page-head__actions,.panel__head,.sec-h,.rowact,.state__actions{flex-wrap:wrap;}
.page-head__actions{row-gap:8px;}
.panel__head{row-gap:8px;}
/* .tabs : reste sur une ligne mais défile si trop d'onglets (pas de wrap moche). */
.tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{white-space:nowrap;}

/* 6) GRILLES : aucune colonne fixe ne dépasse (cartes/modules/kpis). */
.kpis,.modgrid,.mods,.modcards,.choice-grid,.splitcols{min-width:0;}
.kpi,.mod,.modrow,.geva-card,.choice{min-width:0;}

/* 7) FORMULAIRES : champs confinés, pas de largeur intrinsèque qui déborde. */
.geva-field,.geva-input,.geva-nativeselect{max-width:100%;min-width:0;}
.geva-input input,.geva-input textarea{min-width:0;}
input,select,textarea{max-width:100%;}

/* 8) MOBILE (≤700px) : actions pleinement utilisables, header compact.
   shell.css force déjà .page-head__actions{width:100%} + .geva-btn{flex:1} :
   on autorise le retour à la ligne pour éviter les boutons écrasés. */
@media (max-width:700px){
  .page-head__actions{flex-wrap:wrap;}
  .page-head__actions .geva-btn{flex:1 1 auto;min-width:max-content;}
  .panel__head{flex-wrap:wrap;align-items:flex-start;}
  .sec-h{flex-wrap:wrap;gap:6px;}
}

/* 9) Très petits écrans (≤380px) : les paires de boutons d'en-tête s'empilent. */
@media (max-width:380px){
  .page-head__actions .geva-btn{flex:1 1 100%;}
}

/* 10) COMPAT design : alignement final des rares classes historiques encore
   rendues (éditeur de lignes Facture, recherche/select du viewer Sign) sur le
   look des composants du design. Corrigé à la SOURCE plutôt qu'en éditant des
   templates à hooks JS sensibles. Complète ds-bridge.css. */
.ge-input,.ge-input--sm,
.ge-field input,.ge-field select,.ge-field textarea{
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  font:inherit;
  min-height:40px;padding:0 12px;max-width:100%;
}
.ge-input--sm{min-height:36px;font-size:14px;}
textarea.ge-input{min-height:88px;padding:10px 12px;line-height:1.5;}
.ge-tablewrap{overflow-x:auto;max-width:100%;}   /* la table facture défile dans son cadre */

/* 11) SPLIT (master + détail) : garde anti-blowout de grille — la colonne
   contenu utilise déjà minmax(0,1fr) dans shell.css ; on borne aussi les
   deux pistes et leurs enfants pour qu'un contenu large ne pousse pas la page. */
.split{min-width:0;}
.split > *{min-width:0;}
.detail{min-width:0;}

/* 12) FOCUS CLAVIER — base commune cohérente.
   Spécificité 0 via :where() → les anneaux dédiés des composants
   (.geva-btn/.geva-input/... en box-shadow) restent prioritaires. Garantit un
   indicateur visible sur les contrôles « bruts » (liens, <summary> des
   accordéons CRM, inputs/selects non habillés). Aucun JS ; outline = sans impact
   de layout. Respecte prefers-reduced-motion (pas d'animation ajoutée). */
:where(a,button,summary,[tabindex],input,select,textarea):focus-visible{
  outline:2px solid var(--color-focus);
  outline-offset:2px;
  border-radius:4px;
}