/* ============================================================================
   CATHEDIS ERP — Couche mobile (téléphone / petit écran)
   ============================================================================
   Chargée APRÈS app.css, dans index.html ET dans tab-host.html (shell d'onglet).
   Trois parties :
   1. Hors media query : les éléments propres au mobile (burger, backdrop) masqués.
   2. @media (max-width: 1120px) : le SHELL (sidebar off-canvas, header compact,
      barre d'onglets). Évalué sur la largeur de la FENÊTRE (index.html) ; inerte
      dans les frames d'onglet (sidebar/header absents).
   3. @media (max-width: 860px) : les COMPOSANTS de page (formulaires, cartes,
      toolbars, modales, AG Grid, utilitaires .m-*). Dans les onglets vivants,
      chaque page vit dans une iframe → ces règles s'évaluent sur la largeur de
      l'IFRAME (= fenêtre − sidebar), pas de la fenêtre.

   POURQUOI DEUX SEUILS (1120 pour le shell, 860 pour les composants) ?
   Sans onglets, tout était à 860. Mais une iframe d'onglet a pour largeur
   « fenêtre − 240px de sidebar » : au-dessous de ~1120px de fenêtre, l'iframe
   passe sous 860 et les media queries des pages basculaient en mode mobile
   ALORS que le chrome (sidebar 240px) restait en mode bureau — rendu incohérent.
   En repliant la sidebar en tiroir dès 1120px (fenêtre), l'iframe reprend alors
   toute la largeur : « sidebar visible ⇒ fenêtre > 1120 ⇒ iframe > 860 » (bureau
   partout) et « sidebar repliée ⇒ iframe = fenêtre ⇒ seuil 860 des pages exact ».
   La marge (1120 > 1100 = 860+240) absorbe bordure + barre de défilement.

   Les pages ajoutent leurs propres règles dans leur <style> avec le breakpoint
   COMPOSANT (860px) et peuvent poser les classes utilitaires .m-* (tout en bas).
   ============================================================================ */

/* ── Éléments mobiles, masqués sur grand écran ── */
.btn-burger { display: none; }
.sidebar-backdrop { display: none; }
.msrch-btn { display: none; }   /* bouton « Chercher » : injecté partout, visible mobile seulement */

/* ════════════════════════════════════════════════════════════════════════════
   SHELL — sidebar / header / barre d'onglets. Seuil fenêtre 1120px.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1120px) {

  /* ── Shell : contenu pleine largeur, hauteur dynamique (barre d'adresse) ── */
  /* minmax(0, 1fr) et non 1fr : sans le minimum à 0, la piste grandit jusqu'au
     min-content de son contenu (un tableau/large élément non-sécable) et pousse
     .app-content au-delà du viewport → contenu rogné par le overflow:hidden du
     body. Avec min 0, la piste reste à la largeur de l'écran et le débordement
     éventuel scrolle DANS .app-content (ou son conteneur interne). */
  .app-layout {
    grid-template-columns: minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
  }
  .app-content { grid-column: 1; }

  /* ── Barre d'onglets (tabs.js) : colonne unique + version compacte ── */
  .tab-bar { grid-column: 1; padding: 4px 6px 0; }
  .tab-item { padding: 5px 6px 7px 10px; max-width: 46vw; font-size: 12px; }

  /* ── Header compact : burger + icône + titre de page + boutons icône ── */
  .app-header { padding: 0 8px; gap: 4px; }
  .app-header-logo { gap: 8px !important; }
  .app-header-logo > div { display: none; }      /* texte "Maher ERP" : icône seule */
  .app-header-logo img { height: 32px !important; width: 32px !important; }
  #topbar-title { text-align: left !important; font-size: 15px !important; padding: 0 6px !important; }
  #header-user { display: none !important; }
  .hdr-label { display: none; }
  .header-taches-badge { margin-left: 6px !important; padding: 4px 8px !important; }
  .header-taches-badge .htb-label { display: none; }                  /* boutons d'en-tête : icône seule */
  .app-header-actions { gap: 4px; }

  .btn-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 7px 12px;
    flex: 0 0 auto;
    -webkit-app-region: no-drag;
  }

  /* ── Sidebar = tiroir off-canvas sous le header ── */
  .app-sidebar {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: min(310px, 85vw);
    z-index: 950;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    overscroll-behavior: contain;
  }
  body.nav-open .app-sidebar { transform: none; }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 940;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  /* Cibles tactiles plus larges dans le menu (titres de section = boutons
     d'accordéon ; items de navigation) */
  .sidebar-section-title { padding-top: 13px; padding-bottom: 13px; }
  .sidebar-nav li a { padding: 12px 20px; font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPOSANTS DE PAGE — évalués sur la largeur de l'iframe d'onglet. Seuil 860px.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* Filet : le contenu déborde horizontalement en interne, jamais le body */
  .app-content { overflow-x: auto; padding: 12px; }

  /* ── Composants globaux ── */
  .page-header { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

  .form-row, .form-row-3 { grid-template-columns: 1fr; }

  .toolbar { gap: 8px; }
  .toolbar-search { flex: 1 1 100%; max-width: none; min-width: 0; }
  .toolbar-right { margin-left: 0; flex-wrap: wrap; width: 100%; }

  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card .stat-value { font-size: 22px; }

  .card-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .card-body { padding: 14px; }
  .card-footer { padding: 10px 14px; }

  /* Onglets (sous-onglets in-page, ex. Clients/Fournisseurs) : défilement */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { flex: 0 0 auto; white-space: nowrap; }

  /* Modales : quasi plein écran (l'!important neutralise les largeurs inline) */
  .modal {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
  }
  .modal-body { padding: 14px; }

  /* Toasts pleine largeur en haut */
  .toast-container { left: 10px; right: 10px; }
  .toast { min-width: 0; width: 100%; }

  /* Bouton « 🔍 Chercher » sous les champs de recherche « Entrée uniquement »
     (injecté par js/mobile-search.js) : pleine largeur, sous le champ. */
  .msrch-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 11px 14px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .msrch-btn:active { filter: brightness(0.9); }

  /* Champs à 16px : évite le zoom automatique iOS au focus */
  .form-input, .form-select, .form-textarea,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="date"], input[type="month"], input[type="email"],
  input[type="password"], select, textarea {
    font-size: 16px;
  }

  /* AG Grid : hauteur bornée à l'écran + padding de cellule réduit
     (le host reçoit height:620px inline pour les grandes listes) */
  .ag-erp-grid { --ag-cell-horizontal-padding: 10px; }
  .ag-theme-quartz.ag-erp-grid[style*="height"] { height: min(620px, 68dvh) !important; }

  /* ── Utilitaires posables par les pages (neutralisent les styles inline) ── */
  .m-grid-1  { grid-template-columns: 1fr !important; }
  .m-grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .m-stack   { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  .m-wrap    { flex-wrap: wrap !important; }
  .m-full    { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .m-hide    { display: none !important; }
  .m-scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
}