/* ==========================================================================
   2DA Gestion Stock — Couche responsive mobile (v2.61.0)
   Chargée EN DERNIER : ne modifie rien au-dessus de 1024 px.
   Trois paliers : 1024 (tablette) · 820 (tableaux en cartes) · 560 (téléphone)
   ========================================================================== */

:root {
  --m-nav-h: 62px;
  --m-safe-b: env(safe-area-inset-bottom, 0px);
}

/* Jamais de débordement horizontal (cause n°1 du « site cassé » sur mobile) */
html, body { max-width: 100%; }
body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

/* --------------------------------------------------------------------------
   1. Voile du menu latéral + barre de navigation basse (masqués sur desktop)
   -------------------------------------------------------------------------- */
.m-scrim { display: none; }
.m-nav { display: none; }

/* ==========================================================================
   TABLETTE — jusqu'à 1024 px
   ========================================================================== */
@media (max-width: 1024px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-identite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-bar { flex-wrap: wrap; gap: 10px; }
}

/* ==========================================================================
   MOBILE — jusqu'à 900 px (le menu latéral devient un tiroir)
   ========================================================================== */
@media (max-width: 900px) {

  /* ---- Tiroir de navigation ---- */
  .sidebar {
    width: min(86vw, 310px);
    padding-bottom: var(--m-safe-b);
    overscroll-behavior: contain;
    box-shadow: none;
  }
  .sidebar.open { box-shadow: 22px 0 60px rgba(15, 23, 42, .32) !important; }

  .m-scrim {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(10, 16, 40, .5);
    opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  body.m-drawer .m-scrim { opacity: 1; visibility: visible; }
  body.m-drawer { overflow: hidden; }

  /* Cibles tactiles confortables dans le menu */
  .sidebar nav a,
  .nav-group-toggle { min-height: 46px; }
  .sidebar nav .nav-submenu a { min-height: 42px; }

  /* ---- Barre supérieure collante ---- */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    margin-inline: -15px; padding-inline: 15px;
    background: var(--bg, #f2f4f9);
    box-shadow: 0 1px 0 rgba(15, 27, 60, .07);
  }
  .topbar h1 {
    font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .burger { display: block; min-width: 44px; min-height: 40px; }

  /* ---- Contenu : place pour la barre basse ---- */
  .content { padding: 0 15px calc(var(--m-nav-h) + 26px + var(--m-safe-b)); }

  /* ---- Barre de navigation basse (5 accès directs) ---- */
  .m-nav {
    display: flex; position: fixed; z-index: 46;
    left: 0; right: 0; bottom: 0;
    padding-bottom: var(--m-safe-b);
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line, #e3e7f0);
    box-shadow: 0 -6px 24px rgba(15, 27, 60, .08);
  }
  .m-nav a, .m-nav button {
    flex: 1 1 0; min-width: 0; height: var(--m-nav-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
    color: #6b7386; text-decoration: none; padding: 0 2px;
  }
  .m-nav i { font-size: 21px; line-height: 1; }
  .m-nav span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-nav .is-on { color: var(--rouge, #E63329); }
  .m-nav .is-on i { transform: translateY(-1px); }
  body.m-drawer .m-nav { pointer-events: none; opacity: .35; }

  /* ---- Formulaires ---- */
  .form-grid { grid-template-columns: 1fr; gap: 10px; }
  .form-grid > div { grid-column: auto !important; }
  .grille-identite { grid-template-columns: 1fr; }
  .filters { gap: 8px; }
  .filters > div { flex: 1 1 100%; min-width: 0; }
  input, select, textarea { font-size: 16px; min-height: 44px; }
  textarea { min-height: 84px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; }
  /* .btn / .btn-sm : cibles tactiles déjà fixées par app.css sous 760 px */

  /* ---- Barres de titre / actions ---- */
  .doc-barre, .liste-bar {
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .page-bar-actions, .liste-bar-droite { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .page-bar-actions .btn, .doc-barre > .btn { flex: 1 1 auto; }

  /* ---- Fenêtres modales ----
     app.css les transforme déjà en feuilles ancrées en bas sous 640 px
     (coins arrondis en haut, animation « ecfeuille », encoche respectée) :
     ce choix est conservé tel quel. On n'ajoute ici que le confort tactile
     et le maintien des boutons à l'écran pendant la saisie. */
  .modal-head h3 { font-size: 15.5px; line-height: 1.3; }
  .modal-x { min-width: 40px; min-height: 40px; font-size: 20px; }
  .modal-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .modal-foot { position: sticky; bottom: 0; z-index: 2; }
  .modal-foot .btn:only-child { flex: 1 1 100%; }

  /* Fenêtres flottantes secondaires (droits, étiquettes, aperçus) */
  .perm-pop, .etq-pop, .client-modal-box {
    width: calc(100vw - 20px) !important;
    max-height: 88dvh;
  }

  /* ---- Lignes de saisie d'un document ---- */
  .ligne-doc, .ligne-vente, .ligne-article { padding: 12px !important; }
  .lv-suggest { max-height: 50dvh; }
  .lv-suggest .opt { padding: 13px 14px; }

  /* ---- Palette de recherche globale ---- */
  .command-box { width: calc(100vw - 20px); max-height: 82dvh; }
}

/* ==========================================================================
   TABLEAUX EN FICHES — jusqu'à 760 px
   On NE crée PAS un second système : app.css possède déjà « .t-cards »
   (fiches, libellés via data-l, chevron .row-go, lignes de total). Il n'était
   câblé à la main que sur devis / factures / bons de livraison / portail.
   mobile.js l'applique désormais à toutes les listes ; les tableaux déjà
   marqués .t-cards dans le code ne sont jamais touchés.
   Ci-dessous : uniquement les compléments nécessaires aux tableaux convertis
   automatiquement (classe .tb-auto posée par mobile.js).
   ========================================================================== */
@media (max-width: 760px) {

  /* Les tableaux restés larges doivent pouvoir défiler : app.css met
     .table-wrap en overflow visible pour les fiches, on le rétablit ici. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap:has(> .t-cards) { overflow-x: visible; }

  /* Pas de chevron sur les listes converties automatiquement :
     on récupère les 40 px de gouttière réservés à .row-go. */
  .t-cards.tb-auto tr { padding: 12px 13px; }

  /* Cellule vide (espaces uniquement) : aucune ligne inutile dans la fiche */
  .t-cards td.tb-vide { display: none; }

  /* Cellule d'actions : les boutons passent sous les informations */
  .t-cards.tb-auto td.tb-actions {
    display: block; text-align: left;
    margin-top: 8px; padding-top: 10px;
    border-top: 1px solid #f1f3f9;
  }
  .t-cards.tb-auto td.tb-actions form { margin: 0; }
  .t-cards.tb-auto td.tb-actions .btn { margin: 3px 4px 0 0; }

  /* Les largeurs minimales posées en style inline (formulaires d'action
     dans les cellules) empêchent la fiche de se réduire : neutralisées. */
  .t-cards td form,
  .t-cards td > div,
  .t-cards td select,
  .t-cards td input { min-width: 0 !important; max-width: 100%; }

  /* Libellés longs : le couple libellé / valeur reste lisible */
  .t-cards td[data-l] { align-items: flex-start; }
  .t-cards td[data-l]::before { padding-top: 1px; }

  /* Indice de défilement pour les tableaux restés en mode large */
  .table-wrap.tb-scroll { position: relative; }
  .table-wrap.tb-scroll::after {
    content: "↔"; position: sticky; right: 4px; bottom: 4px; float: right;
    background: rgba(15, 27, 60, .72); color: #fff;
    font-size: 12px; line-height: 1; padding: 5px 8px; border-radius: 20px;
    pointer-events: none;
  }
}

/* ==========================================================================
   TÉLÉPHONE — jusqu'à 560 px
   ========================================================================== */
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .card { padding: 14px; margin-bottom: 14px; }
  .card h2 { font-size: 15px; }
  h2 { font-size: 17px; }

  /* Les fiches reprennent la pleine largeur de l'écran */
  .table-wrap { margin-inline: -14px; padding-inline: 14px; }

  /* Onglets de fiche : défilement horizontal */
  .fiche-tabs, .client-tabs, .doc-tabs {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 4px;
  }
  .fiche-tabs::-webkit-scrollbar, .client-tabs::-webkit-scrollbar { display: none; }
  .fiche-tab, .client-tab { white-space: nowrap; flex: 0 0 auto; }

  /* Boutons groupés : deux par ligne */
  .liste-bar-droite .btn, .page-bar-actions .btn { flex: 1 1 46%; }

  /* ---- Éditeur de lignes (devis, BL, facture, sortie, catalogue) ----
     Une seule colonne rendrait la saisie interminable : on garde deux colonnes
     pour les champs courts (quantité, prix, remise, sous-total) et on force les
     champs longs — désignation, détails — sur toute la largeur. La règle
     « .form-grid > div { grid-column: auto } » d'app.css est neutralisée ici. */
  .ligne-doc, .ligne-vente, .ligne-article {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
  }
  .ligne-doc > div[style*="grid-column"],
  .ligne-vente > div[style*="grid-column"],
  .ligne-article > div[style*="grid-column"],
  .ligne-doc > div:last-child,
  .ligne-vente > div:last-child,
  .ligne-article > div:last-child { grid-column: 1 / -1 !important; }
  .ligne-doc > div:last-child .btn,
  .ligne-vente > div:last-child .btn,
  .ligne-article > div:last-child .btn { width: 100%; }
  /* Le sous-total est une information de contrôle : il reste lisible. */
  .lv-sous { font-size: 15px !important; padding: 11px 12px !important; }

  /* Barre de recherche injectée au-dessus des grands tableaux */
  .table-tools { flex-wrap: wrap; gap: 8px; }
  .table-tools input { flex: 1 1 100%; }

  .app-foot { padding-bottom: 10px; font-size: 11.5px; }
  .seg { width: 100%; }
  .seg-btn { flex: 1; padding: 10px 8px; }
}

/* ==========================================================================
   Espace client (portail) — mêmes principes
   ========================================================================== */
@media (max-width: 820px) {
  .client-app .client-main { width: calc(100% - 24px); }
  .client-app .client-header-inner { gap: 8px; }
  .client-app .client-user-copy { display: none; }
  .client-app .logout-form .btn span { display: none; }
}

/* ==========================================================================
   Impression : ni tiroir, ni barre basse, ni cartes
   ========================================================================== */
@media print {
  .m-nav, .m-scrim, .burger, .sidebar { display: none !important; }
  .content { margin: 0 !important; padding: 0 !important; }
  .t-cards, .t-cards thead, .t-cards tbody, .t-cards tr, .t-cards td {
    display: revert !important;
  }
  .t-cards td[data-l]::before { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .m-scrim, .sidebar { transition: none !important; }
}

/* ==========================================================================
   Correctif v2.62.0 : sur les pages client (fond .login-box sombre),
   premium-2026.css imposait un texte marine (--txt) devenu illisible.
   On force le blanc pour le titre, le sous-texte, les labels et la saisie.
   ========================================================================== */
.client-app .login-box h1,
.client-app .login-box p,
.client-app .login-box label {
  color: #f8fafc !important;
}
.client-app .login-box .field input,
.client-app .login-box .field textarea {
  color: #f8fafc !important;
}

/* CLIENT PORTAL MOBILE OPTIMIZATION v2.53 */
@media (max-width: 760px) {
  body.client-app {
    overflow-x: hidden;
    font-size: 15px;
  }

  .client-app .client-header-inner {
    min-height: 64px;
    padding: 8px 12px;
    gap: 10px;
  }
  .client-app .client-brand { gap: 8px; min-width: 0; }
  .client-app .client-brand-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
  }
  .client-app .client-brand strong { font-size: 18px; }
  .client-app .client-brand small,
  .client-app .client-user-copy { display: none; }
  .client-app .client-header-actions { gap: 7px; }
  .client-app .client-user { padding: 0; }
  .client-app .client-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }
  .client-app .icon-button,
  .client-app .logout-form .btn {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .client-app .logout-form .btn span { display: none; }

  .client-app .client-main {
    width: 100%;
    max-width: none;
    padding: 14px 12px 96px;
  }
  .client-app .page-bar {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }
  .client-app .page-bar > div { min-width: 0; }
  .client-app .page-bar h1 { font-size: 20px; line-height: 1.2; }
  .client-app .page-bar .hint { font-size: 13px; }

  .client-app .client-entreprise-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .client-app .client-vue-select { width: 100%; min-height: 44px; }

  .client-app .client-tabs {
    position: sticky;
    top: 64px;
    z-index: 40;
    display: flex;
    width: calc(100% + 24px);
    margin-inline: -12px;
    padding: 8px 12px;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    background: rgba(248, 250, 252, .96);
    border-radius: 0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    -webkit-overflow-scrolling: touch;
  }
  .client-app .client-tabs::-webkit-scrollbar { display: none; }
  .client-app .client-tab-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 13px;
    white-space: nowrap;
    scroll-snap-align: start;
    border-radius: 11px;
  }
  .client-app .client-tab-count { min-width: 20px; }

  .client-app .grid-kpi,
  .client-app .grid-kpi.client-invoice-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
  }
  .client-app .kpi {
    min-width: 0;
    padding: 14px 12px;
    border-radius: 14px;
  }
  .client-app .kpi .kv {
    font-size: clamp(18px, 6vw, 24px);
    overflow-wrap: anywhere;
  }
  .client-app .kpi .kl { font-size: 11px; }

  .client-app .card {
    padding: 14px 12px;
    border-radius: 15px;
  }
  .client-app .table-card-head {
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }
  .client-app .table-card-head > * { min-width: 0; }
  .client-app .client-export-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .client-app .client-export-actions .btn { width: 100%; min-height: 42px; }

  .client-app .t-cards tr {
    margin-bottom: 10px;
    padding: 13px 12px !important;
    border-radius: 13px;
  }
  .client-app .t-cards td {
    gap: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .client-app .t-cards td::before {
    flex: 0 0 42%;
    max-width: 42%;
    font-size: 10px;
    line-height: 1.25;
  }
  .client-app .t-cards td .btn,
  .client-app .t-cards td form,
  .client-app .t-cards td form .btn {
    width: 100%;
  }

  .client-app .client-profil-grille,
  .client-app .quote-request-grid,
  .client-app .form-grid {
    grid-template-columns: 1fr !important;
  }
  .client-app input,
  .client-app select,
  .client-app textarea,
  .client-app button {
    font-size: 16px;
  }
  .client-app input,
  .client-app select {
    min-height: 46px;
  }
  .client-app .quote-request-actions,
  .client-app .client-modal-foot {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .client-app .quote-request-actions .btn,
  .client-app .client-modal-foot .btn { width: 100%; min-height: 46px; }

  .client-app .client-modal-box {
    width: calc(100vw - 16px) !important;
    max-width: none;
    max-height: calc(100dvh - 16px);
    margin: 8px;
    border-radius: 16px;
  }
  .client-app .client-modal-head,
  .client-app .client-modal-foot { padding: 13px 14px; }
  .client-app .client-modal-head h3 { font-size: 17px; }
  .client-app .client-modal .modal-body {
    padding: 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .client-app .client-upload-zone {
    padding: 16px 12px;
    align-items: flex-start;
  }

  .client-app .client-fab {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
  }
  .client-app .client-fab-nudge {
    right: 16px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    max-width: min(230px, calc(100vw - 32px));
  }
}

@media (max-width: 420px) {
  .client-app .client-main { padding-inline: 10px; }
  .client-app .client-tabs {
    width: calc(100% + 20px);
    margin-inline: -10px;
    padding-inline: 10px;
  }
  .client-app .grid-kpi,
  .client-app .grid-kpi.client-invoice-totals {
    grid-template-columns: 1fr !important;
  }
  .client-app .kpi {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
  }
  .client-app .kpi .kl { grid-column: 1; grid-row: 1; }
  .client-app .kpi .kv { grid-column: 1; grid-row: 2; }
  .client-app .t-cards td {
    display: grid !important;
    grid-template-columns: minmax(88px, 38%) minmax(0, 1fr);
    align-items: start;
  }
  .client-app .t-cards td::before {
    max-width: none;
    flex-basis: auto;
  }
}

/* --------------------------------------------------------------------------
   Badges de tableaux : libellés horizontaux sur toutes les pages mobiles
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .table-wrap .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: none;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.2;
  }
}