/* =============================================================================
   ld-final.css · LogiDrink · DERNIÈRE feuille chargée par /portal/index.html
   -----------------------------------------------------------------------------
   Ordre de chargement du portail (ne pas ajouter de nouvelle couche) :
     1. /assets/portal-unified.css   base (déclare @layer base, components, utilities)
     2. /portal/portal-ui-force.css  champs / modales (hors layer)
     3. /portal/portal-livreur.css   portail livreur
     4. /portal/portal-theme-fix.css thème (dans @layer base)
     5. /portal/portal-mobile.css    téléphone < 768px (dans @layer base)
     6. /portal/ld-final.css         CE FICHIER
   À SAVOIR AVANT D'AJOUTER UNE RÈGLE
   - Avec !important l'ordre des layers est inversé : un !important dans
     @layer base bat n'importe quel !important hors layer. Les couches 4 et 5
     posent leurs règles dans @layer base, donc toute correction qui doit les
     battre va dans le bloc @layer base ci-dessous, avec !important et une
     spécificité au moins égale (préfixe « html body »).
   - Les styles de composants nouveaux (sans concurrence) restent hors layer,
     en bas du fichier.
   - Toute nouvelle correction visuelle globale va ICI. Pas de nouveau fichier
     « fix », pas de <style> ajouté dans index.html.
   Sections : A débordements · B champs (dates iOS, Tom Select) · C en-têtes et
   gros boutons · D barre de raccourcis · E menu latéral · F actualiser
   ============================================================================= */

@layer base {

  /* ---------- A. Débordements ---------- */
  html body #app .main, html body #app #view { min-width: 0 !important; }
  html body #app .field, html body .overlay .field,
  html body #app .grid2 > *, html body .overlay .grid2 > *,
  html body #app .grid3 > *, html body .overlay .grid3 > * { min-width: 0 !important; }

  @media (max-width: 767.98px) {
    html, html body { overflow-x: hidden !important; }
    html body #app #view .rich-empty-top h2 { font-size: 20px !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
  }
  /* Tableaux sur PC : montants, statuts et numéros jamais coupés sur deux lignes */
  @media (min-width: 768px) {
    html body #app #view .data-table td.num,
    html body #app #view .data-table td.col-center,
    html body #app #view .data-table .badge,
    html body #app #view .data-table td > b:only-child,
    html body #app #view table td.ld-nowrap { white-space: nowrap !important; }
  }

  /* ---------- B. Champs ---------- */
  /* Dates : sur iOS le champ natif garde sa largeur intrinsèque et sort du cadre */
  html body #app input[type="date"], html body #app input[type="time"],
  html body #app input[type="datetime-local"], html body #app input[type="month"],
  html body .overlay input[type="date"], html body .overlay input[type="time"],
  html body .overlay input[type="datetime-local"], html body .overlay input[type="month"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  @supports (-webkit-touch-callout: none) {
    html body #app input[type="date"], html body #app input[type="time"],
    html body #app input[type="datetime-local"], html body #app input[type="month"],
    html body .overlay input[type="date"], html body .overlay input[type="time"],
    html body .overlay input[type="datetime-local"], html body .overlay input[type="month"] {
      -webkit-appearance: none !important;
      appearance: none !important;
      text-align: left !important;
    }
  }

  /* Recherche Tom Select (client de facture…) : un seul cadre. Les règles
     génériques « input » (hauteur tactile, bordure, padding) s'appliquaient
     aussi au champ interne : boîte dans la boîte, texte coupé, focus doublé. */
  html body #app .ts-wrapper, html body .overlay .ts-wrapper { min-width: 0 !important; }
  html body #app .ts-wrapper .ts-control,
  html body .overlay .ts-wrapper .ts-control {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 7px 34px 7px 12px !important;
    background: #fff !important;
    border: 1px solid var(--line, #e3e8ee) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  html body #app .ts-wrapper.focus .ts-control,
  html body .overlay .ts-wrapper.focus .ts-control {
    border-color: #fd7020 !important;
    box-shadow: 0 0 0 3px rgba(253, 112, 32, .16) !important;
  }
  html body #app .ts-wrapper .ts-control > input,
  html body #app .ts-wrapper .ts-control > input:focus,
  html body .overlay .ts-wrapper .ts-control > input,
  html body .overlay .ts-wrapper .ts-control > input:focus {
    flex: 1 1 60px !important;
    min-width: 60px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 15px !important;
    line-height: 24px !important;
  }
  html body #app .ts-wrapper.single .ts-control > .item,
  html body .overlay .ts-wrapper.single .ts-control > .item {
    line-height: 24px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  @media (max-width: 767.98px) {
    /* zone tactile de 44px portée par le cadre, pas par le champ interne */
    html body #app .ts-wrapper .ts-control, html body .overlay .ts-wrapper .ts-control { min-height: 44px !important; }
    /* 16px minimum : en dessous, Safari iOS zoome à chaque prise de focus */
    html body #app .ts-wrapper .ts-control > input, html body .overlay .ts-wrapper .ts-control > input { font-size: 16px !important; }
  }

  /* ---------- C. En-têtes de page et gros boutons ---------- */
  @media (max-width: 767.98px) {
    html body #app #view .page-head { flex-wrap: wrap !important; gap: 10px !important; }
    html body #app #view .page-head-actions {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow: visible !important;
      margin: 0 !important;
      padding: 0 !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
    }
    /* boutons et enveloppes (menu Exporter…) se partagent la ligne */
    html body #app #view .page-head-actions > * { flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; }
    html body #app #view .page-head-actions > :not(.btn) > .btn { width: 100% !important; }
  }
  /* Paramètres, écran étroit : les onglets restaient décalés de 80px (ancien
     « sticky ») et passaient sous la carte : impossible de changer de section. */
  @media (max-width: 1100px) {
    html body #app #view .settings-nav {
      position: static !important; top: auto !important;
      display: flex !important; flex-wrap: nowrap !important; gap: 6px !important;
      overflow-x: auto !important; overflow-y: hidden !important;
      padding: 2px 0 8px !important; margin: 0 0 4px !important;
      scrollbar-width: none;
    }
    html body #app #view .settings-nav::-webkit-scrollbar { display: none; }
    html body #app #view .settings-nav button {
      flex: 0 0 auto !important; width: auto !important; white-space: nowrap !important;
      padding: 8px 14px !important; min-height: 38px !important;
      border: 1px solid var(--line, #e3e8ee) !important; border-radius: 6px !important;
      background: #fff !important; color: #0a1628 !important; font-weight: 500 !important;
    }
    html body #app #view .settings-nav button.on {
      background: #fff4ec !important; color: #c2410c !important; border-color: #fd7020 !important; font-weight: 600 !important;
    }
  }

  /* Paramètres → Modules : les cartes débordaient à droite sur téléphone */
  html body #app #view .module-chips {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
    gap: 10px !important;
  }
  html body #app #view .module-chip { min-width: 0 !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* Scan réception MP : formulaire limité à une largeur confortable sur PC
     (la largeur du bouton caméra est réglée à la source, portal-producteur.js) */
  @media (min-width: 768px) {
    html body #app #view .xf-scan-cta + .card { max-width: 1100px !important; }
  }

  /* ---------- D. Barre de raccourcis ---------- */
  html body #ldFavBar {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  html body #ldFavBar .ld-fav-chip { flex: 0 0 auto !important; white-space: nowrap !important; }
  html body #ldFavBar .ld-fav-chip.is-active { border-color: #fd7020 !important; color: #c2410c !important; background: #fff7f1 !important; }
  @media (max-width: 767.98px) {
    html body #ldFavBar {
      padding-right: 24px !important;
      -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent) !important;
      mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent) !important;
    }
  }

  /* ---------- E. Menu latéral ---------- */
  /* Plus de pastilles de hubs : téléphone et PC partagent l'accordéon #nav */
  html body #portalSwitch.ld-hubs-desktop-off, html body #portalSwitch[hidden] { display: none !important; }
  @media (max-width: 980px) {
    html body #app #sidebar #nav { display: block !important; }
    html body #app #sidebar #nav .ld-nav-block { display: block !important; }
    html body #app #sidebar #nav .nav-grp-btn {
      display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important;
      min-height: 44px !important; padding: 10px 12px !important; border-radius: 8px !important;
    }
    html body #app #sidebar #nav .nav-grp-btn .nav-chev { margin-left: auto !important; transition: transform .18s ease; }
    html body #app #sidebar #nav .ld-nav-block.is-open > .nav-grp-btn .nav-chev { transform: rotate(180deg) !important; }
    html body #app #sidebar #nav .ld-nav-block.is-current > .nav-grp-btn { color: #c2410c !important; font-weight: 600 !important; }
    html body #app #sidebar #nav .nav-grp-items:not([hidden]) { display: block !important; padding: 2px 0 8px 22px !important; }
    html body #app #sidebar #nav .nav-grp-items[hidden] { display: none !important; }
    html body #app #sidebar #nav .nav-item-sub { display: flex !important; align-items: center !important; min-height: 42px !important; width: 100% !important; padding: 8px 12px !important; border-radius: 8px !important; }
    /* le bouton fermer ne recouvre plus le sélecteur de société (z-index 80) */
    html body #app #sidebar .sidebar-close-mobile {
      top: 31px !important; right: 6px !important; z-index: 90 !important;
      width: 40px !important; height: 40px !important; border-radius: 8px !important;
    }
    html body #app #sidebar #ldWorkspace { width: auto !important; max-width: calc(100% - 50px) !important; margin-right: 50px !important; }
  }

  /* lien interne vers une page d'un module désactivé (voir ld-final.js) */
  html body #app .ld-mod-off { display: none !important; }

  /* ---------- F. Actualiser ---------- */
  html body .topbar .ld-refresh-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  html body #app #sidebar .ld-refresh-drawer {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 8px !important; width: 100% !important; margin: 0 0 8px !important;
  }
  @media (max-width: 767.98px) {
    html body .topbar .ld-refresh-btn { display: none !important; }
  }
  @media (min-width: 768px) {
    html body #app #sidebar .ld-refresh-drawer { display: none !important; }
  }
}

/* ============ Hors layer : composants nouveaux, sans concurrence ============ */

/* pas de « tirer pour recharger » involontaire sur téléphone : le bouton
   « Actualiser l'application » du menu le remplace, avec confirmation */
@media (max-width: 767.98px) {
  html:has(#app:not(.hidden)), html:has(#app:not(.hidden)) body { overscroll-behavior-y: none; }
}
html.ld-reloading body { cursor: progress; }
html.ld-reloading #app { opacity: .55; transition: opacity .2s; pointer-events: none; }

.ts-dropdown { border-radius: 8px; box-shadow: 0 12px 32px rgba(10, 22, 40, .14); }

/* Fenêtre « Favoris & raccourcis » */
.overlay .modal.ld-favs-modal { width: min(640px, calc(100vw - 24px)); max-width: 640px; }
.ld-favs-modal .modal-body.ld-fav-editor { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ld-fav-editor .ld-fav-intro { margin: 0; font-size: 13px; line-height: 1.5; }
.ld-fav-editor .ld-fav-kb {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0;
  padding: 10px 12px; border: 1px solid var(--line, #e3e8ee); border-radius: 8px; cursor: pointer;
}
.ld-fav-editor .ld-fav-kb > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ld-fav-editor .ld-fav-kb b { font-size: 14px; }
.ld-fav-editor .ld-fav-kb small { font-size: 12px; line-height: 1.7; color: #64748b; }
.ld-fav-editor kbd {
  display: inline-block; min-width: 18px; padding: 1px 5px; text-align: center;
  font: 600 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; color: #0a1628;
  background: #f8fafc; border: 1px solid #d6dde6; border-bottom-width: 2px; border-radius: 4px;
}
.ld-fav-editor .ld-fav-kb .toggle { flex: 0 0 auto; }
.ld-fav-editor .ld-fav-count { font-size: 12px; color: #64748b; text-align: right; margin-bottom: -4px; }
.ld-fav-editor .ld-fav-count.is-over { color: #dc2626; font-weight: 600; }
.ld-fav-editor .ld-fav-scroll { max-height: min(46vh, 440px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 2px; }
.ld-fav-editor .ld-fav-grp + .ld-fav-grp { margin-top: 14px; }
.ld-fav-editor .ld-fav-grp-title { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.ld-fav-editor .ld-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.ld-fav-editor .ld-fav-pick {
  display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0;
  padding: 9px 10px; border: 1px solid var(--line, #e3e8ee); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 13.5px; line-height: 1.3; transition: border-color .15s, background-color .15s;
}
.ld-fav-editor .ld-fav-pick:hover { border-color: #cbd5e1; }
.ld-fav-editor .ld-fav-pick.on { border-color: #fd7020; background: #fff7f1; }
.ld-fav-editor .ld-fav-pick input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: #fd7020; }
.ld-fav-editor .ld-fav-lbl { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .ld-fav-editor .ld-fav-grid { grid-template-columns: 1fr; }
}

/* Confirmation « Actualiser » */
.ld-reload-modal { max-width: 440px; }
.ld-reload-modal .modal-body p { margin: 0 0 8px; line-height: 1.55; }
.ld-reload-modal .modal-body p.muted { font-size: 13px; margin: 0; }