/* =============================================================================
   Magic — Corrections responsive mobile/tablette
   Chargé APRÈS tailwind.css + magic-*.css. Tous les overrides sont scopés sous
   des media queries (desktop ≥1024px = INCHANGÉ). Objectif : navigation cohérente
   + suppression des débordements (modales, tableaux, grilles, champs, toasts).
   ============================================================================= */

/* ----------------------------------------------------------------------------
   A. NAVIGATION — sous 1024px : comportement hamburger UNIFORME.
   Avant : 768–1024px affichait un rail d'icônes 72px EN PLUS du hamburger
   (redondant) ; <768px masquait tout. On unifie : sous 1024px la sidebar n'est
   visible que via le hamburger (drawer plein 260px), le contenu prend toute la
   largeur. Le hamburger est déjà `lg:hidden` (visible <1024).
   ---------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* Masquer le rail 72px ET le calque de fond décoratif (sidebar.jpg) : ce dernier
     n'était caché qu'<768px → en paysage (768–1024) il réapparaissait comme un
     « menu de gauche vide » de 260px par-dessus le contenu. */
  .sidebar:not(.is-open) { display: none !important; }
  .layer-sidebar-bg { display: none !important; }

  .sidebar.is-open {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 260px !important;
    max-width: 85vw;
    z-index: 1000 !important;   /* au-dessus de tout (topbar, calques, overlay) */
    pointer-events: auto !important;
    overflow-y: auto;
  }
  /* Drawer ouvert : ANNULER les masquages « rail tablette » (768–1024px) qui cachaient
     les liens (ils portent .text-sm → masqués), leurs labels, les sous-titres de section
     et le sélecteur de tenant. Sans ça, le drawer s'ouvrait quasi vide en paysage. */
  .sidebar.is-open .sidebar-link,
  .sidebar.is-open nav a {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0.6rem 1rem !important;
  }
  /* Ré-afficher le span icône+label en FLEX (sa valeur Tailwind d'origine : flex items-center
     gap-2.5). PAS inline : le SVG est display:block (preflight Tailwind) → dans un span inline
     il casse la ligne (icône au-dessus, label en dessous). On exclut le badge. */
  .sidebar.is-open .sidebar-link span:not(.sidebar-badge),
  .sidebar.is-open nav a span:not(.sidebar-badge) { display: flex !important; align-items: center; gap: 0.625rem; }
  .sidebar.is-open .section-subtitle { display: block !important; }
  .sidebar.is-open .form-select,
  .sidebar.is-open .form-input { display: block !important; }
  .main-content { margin-left: 0 !important; }

  .sidebar-overlay { display: none; }
  .sidebar-overlay.is-open {
    display: block !important;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 999 !important;
  }
}

/* ----------------------------------------------------------------------------
   A-bis. CHEVAUCHEMENT 1024px — la règle « rail tablette » compilée
   (@media min-width:768 and max-width:1024) est INCLUSIVE à 1024px et masque la nav
   (liens en .text-sm), alors que le desktop (≥1024) affiche la sidebar pleine et masque
   le hamburger → à 1024px pile : sidebar sans liens ni hamburger = piège. On force
   l'état desktop complet dès 1024px.
   ---------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .sidebar { width: 260px !important; min-width: 260px !important; }
  .sidebar .sidebar-link,
  .sidebar nav a { display: flex !important; justify-content: flex-start !important; }
  .sidebar .sidebar-link span:not(.sidebar-badge),
  .sidebar nav a span:not(.sidebar-badge) { display: flex !important; align-items: center; gap: 0.625rem; }
  .sidebar .section-subtitle { display: block !important; }
}

/* ----------------------------------------------------------------------------
   B1. MODALES — neutralise les hauteurs/largeurs en dur inline (height:85vh,
   max-width:52rem) qui débordent sur petit écran.
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .modal-overlay { padding: 8px !important; align-items: flex-start !important; }
  .modal-box, .modal-box-lg {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: 92vh !important;
    margin: 8px auto !important;
    padding: 1.1rem !important;
    overflow-y: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   B2. FORMULAIRES — champs en largeur fluide ; barres d'outils qui reviennent
   à la ligne (corrige les rangées de selects en largeur px fixe qui débordent).
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .ac-config-bar, .ac-card-actions, .filters, .toolbar, .flex.flex-wrap { flex-wrap: wrap !important; }
  .ac-config-bar > select,
  .ac-config-bar > .form-select,
  .ac-config-bar > input { flex: 1 1 140px; min-width: 120px; max-width: 100% !important; width: auto !important; }
  .form-input, .form-select, textarea { max-width: 100% !important; }
}

/* ----------------------------------------------------------------------------
   B3. TABLEAUX — scroll horizontal au lieu de déborder la page.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  table.data-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ----------------------------------------------------------------------------
   B4. GRILLES — réduire le nombre de colonnes sur smartphone.
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 400px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr !important; }
}

/* ----------------------------------------------------------------------------
   B5. TOASTS — ne pas déborder l'écran.
   ---------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .toast-container { left: 12px !important; right: 12px !important; bottom: 12px !important; }
  .toast { max-width: 100% !important; }
}

/* ----------------------------------------------------------------------------
   C. CONFORT — cibles tactiles + densité topbar + débordement global.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .topbar { padding: 0 0.75rem !important; }
  /* cibles tactiles : min ~40px sur les petits boutons d'action */
  .btn-xs, .btn-icon { min-height: 38px; min-width: 38px; }
  /* garde-fou anti-débordement horizontal global */
  html, body { max-width: 100%; overflow-x: hidden; }
  .main-content, .card { max-width: 100%; }
}