/* ============================================================================
   mobile-nav.css — Tiroir de navigation mobile (correctif P0 de l'audit)
   ----------------------------------------------------------------------------
   En desktop : aucun effet (hamburger et backdrop masques).
   Sous 980px : la barre laterale devient un tiroir hors-ecran qui glisse depuis
   la gauche, avec voile (backdrop). Remplace l'ancien comportement "empile".
   Toutes les valeurs proviennent de tokens.css (aucune valeur en dur dupliquee).
   ========================================================================== */

/* Hamburger et backdrop masques par defaut (desktop). */
.app-burger { display: none; }
.app-drawer-backdrop { display: none; }

@media (max-width: 980px) {
  /* --- Hamburger dans la topbar (cible tactile >= 44px) --- */
  .app-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    margin-right: auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .app-burger:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
  }
  .app-burger svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  /* --- La barre laterale devient un tiroir hors-ecran ---
     Surcharge le comportement "empile" defini dans app.css (@media 980px).
     Meme specificite + chargement apres app.css => cette regle l'emporte. */
  body:not(.login-page):not(.public-product-page) .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--drawer-w);
    max-width: 86%;
    height: 100dvh;
    min-height: 100dvh;
    transform: translateX(-105%);
    transition: transform var(--t-drawer);
    z-index: 1001;
    overflow-y: auto;
    box-shadow: var(--sh-frame);
  }
  body:not(.login-page):not(.public-product-page) .app-frame.drawer-open .app-sidebar {
    transform: none;
  }

  /* --- Voile (backdrop) --- */
  .app-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(3, 19, 38, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-backdrop), visibility var(--t-backdrop);
    z-index: 1000;
  }
  .app-frame.drawer-open .app-drawer-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* Empeche le defilement du fond quand le tiroir est ouvert. */
  body.drawer-locked { overflow: hidden; }
}

/* ============================================================================
   Strategie responsive des tableaux : TableStrategy (desktop) -> CardStrategy
   (mobile). Meme balisage <table>. Chaque <td> porte data-label="<entete>" ;
   sous 760px, chaque ligne devient une carte et le libelle est rappele a gauche.
   Aucun defilement horizontal (exigence audit §8).
   ========================================================================== */
@media (max-width: 760px) {
  /* Masque l'entete, qu'il soit dans <thead> ou une ligne <tr><th> directe. */
  table.cards-mobile thead,
  table.cards-mobile tr:has(> th) { display: none; }

  table.cards-mobile,
  table.cards-mobile tbody { display: block; width: 100%; }

  table.cards-mobile tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    padding: 10px 14px;
    margin-bottom: 12px;
  }

  /* Cellule de base : bloc pleine largeur (ideal pour les cellules de saisie). */
  table.cards-mobile td {
    display: block;
    border: 0;
    padding: 8px 0;
    min-height: 36px; /* cible tactile confortable */
  }
  /* Cellule libellee (valeur en lecture) : libelle a gauche, valeur a droite. */
  table.cards-mobile td[data-label]:not([data-label=""]) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  table.cards-mobile tr > td + td {
    border-top: 1px solid var(--border);
  }

  /* Rappel du libelle de colonne a gauche de la valeur, uniquement si data-label
     est renseigne. Les cellules sans data-label (saisies, controles auto-explicites)
     s'affichent en pleine largeur. */
  table.cards-mobile td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    flex: 0 0 38%;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  /* Cellule vide (valeur absente) : masquee pour ne pas alourdir la carte. */
  table.cards-mobile td:empty { display: none; }

  /* La valeur / le controle s'aligne a droite ; les inputs prennent la place. */
  table.cards-mobile td > * { margin-left: auto; }
  table.cards-mobile td input,
  table.cards-mobile td select,
  table.cards-mobile td textarea { flex: 1 1 60%; min-width: 0; }

  /* Le conteneur ne defile plus horizontalement : il laisse couler les cartes. */
  .table-wrap:has(table.cards-mobile) { overflow-x: visible; }
}