/* ════════════════════════════════════════════════════════════════════
   MAIC — Styles mobiles partagés (couche 2)
   À inclure sur toutes les pages métier APRÈS maic-tokens.css.
   Toutes les règles sont sous @media (max-width: 820px) pour ne JAMAIS
   affecter l'affichage desktop.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  /* ── Espace en bas pour la barre de navigation mobile ── */
  body { padding-bottom: 64px !important; }

  /* ── Topbar : masquer les boutons modules (remplacés par la bottom nav) ── */
  .topbar-modules { display: none !important; }
  .topbar-vsep { display: none !important; }

  /* La topbar reste mais devient compacte */
  .maic-topbar,
  .maic-topbar-tall {
    padding: 8px 12px !important;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 52px;
  }
  .maic-topbar-brand { font-size: 15px; }
  .maic-topbar-sub { font-size: 12px; }

  /* La barre de recherche dans la topbar passe pleine largeur sous le titre */
  #search-slot {
    order: 99;
    width: 100% !important;
    flex-basis: 100% !important;
  }
  #search-slot .maic-search-bar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* ── Contenu principal : padding réduit ── */
  .page-body,
  .page-content,
  main.page-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── Toolbars : empiler / wrapper ── */
  .toolbar,
  .filters,
  .page-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .toolbar .search-wrap,
  .filters .search-wrap {
    flex-basis: 100% !important;
    max-width: none !important;
  }

  /* ── KPI / stat rows : 2 colonnes au lieu de 4 ── */
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Boutons : cibles tactiles plus grandes ── */
  .btn,
  button.btn,
  .maic-btn {
    min-height: 40px;
    padding-top: 9px; padding-bottom: 9px;
  }

  /* ── Modales : plein écran (ou presque) sur mobile ── */
  .modal-card,
  .modal-content,
  .maic-modal-card {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    height: auto;
    min-height: 100vh;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-overlay,
  .maic-modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  /* Les boutons d'action de modale collent en bas, accessibles au pouce */
  .modal-footer,
  .maic-modal-footer {
    position: sticky; bottom: 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* ── Tableaux larges : permettre le scroll horizontal ── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ── Grilles de formulaire : empiler ── */
  .form-row.col2,
  .form-row.col3,
  .form-row.row2 {
    grid-template-columns: 1fr !important;
  }

  /* ── Inputs : taille de police 16px pour éviter le zoom auto iOS ── */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="date"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── Très petit écran (téléphones étroits) ── */
@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr 1fr !important; }
  .maic-topbar-sub { display: none; }  /* gagner de la place */
}