/* ==========================================================
   Patch d'affichage mobile — maquettes DigiLabel
   Chargé en dernier dans chaque maquette afin de primer sur
   ses propres styles. N'affecte rien au-dessus de 860 px.
   ========================================================== */

@media (max-width: 860px){

  html,body{overflow-x:hidden !important;-webkit-text-size-adjust:100%}

  /* --- Barres latérales : colonne fixe → bandeau horizontal défilant --- */
  .app,.admin-layout{
    flex-direction:column !important;height:auto !important;overflow:visible !important;
  }
  .sidebar,.admin-sidebar,.side{
    display:flex !important;flex-direction:row !important;align-items:center !important;
    width:100% !important;flex:none !important;height:auto !important;
    overflow-x:auto !important;overflow-y:hidden !important;
    gap:6px !important;padding:8px !important;position:static !important;
    border-right:none !important;scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar,
  .admin-sidebar::-webkit-scrollbar,
  .side::-webkit-scrollbar{display:none}

  .sidebar-nav,.sidebar > nav,.side > nav{
    display:flex !important;flex-direction:row !important;flex:1 !important;
    gap:6px !important;overflow-x:auto !important;padding:0 !important;
  }
  .nav-item,.nav-link{white-space:nowrap !important;flex:0 0 auto !important}
  .sidebar-logo,.brand-row{flex:0 0 auto !important;border-bottom:none !important;padding:4px 8px !important}
  .sidebar-user,.user-row{display:none !important}

  /* --- Zone de contenu --- */
  .main,.admin-main,.content,.container{
    overflow:visible !important;max-width:100% !important;padding:16px !important;
  }
  .wrap{padding-inline:16px !important}

  /* --- Grilles de statistiques : 4 ou 5 colonnes → 2 --- */
  .stats-grid,.kpi-grid.g4,.kpi-grid.g5,.mini-kpi-grid,.g4,.g3,.pos{
    grid-template-columns:repeat(2,1fr) !important;
  }

  /* --- Grilles de contenu : une seule colonne --- */
  .grid-2,.grid-3,.g2,.g21,.kds,.kitchen-board,.drawer-actions,
  .screen,.journal-grid,.menu-layout,.client-layout{
    grid-template-columns:1fr !important;
  }

  /* --- Tableaux : défilement horizontal plutôt qu'un débordement --- */
  table{display:block !important;width:100% !important;overflow-x:auto !important;white-space:nowrap}

  /* --- Fausses tables construites en flex --- */
  .table-head,.table-row{min-width:max-content}
  .detail-label{min-width:0 !important}

  /* --- Aperçu téléphone : tient dans l'écran --- */
  .phone{width:100% !important;max-width:320px !important;height:auto !important;min-height:600px !important}
  .phone-wrap{width:100% !important}

  /* --- Fenêtres modales, tiroirs, cartes de connexion --- */
  .modal,.login-card,.drawer{width:100% !important;max-width:94vw !important}

  /* --- Colonnes cuisine : plus de hauteur minimale imposée --- */
  .k-col{min-height:auto !important}

  /* --- Calendriers : on garde 7 colonnes, en plus compact --- */
  .cal-header,.cal-grid,.time-grid{gap:3px !important;font-size:11px !important}

  /* --- Zones tactiles confortables --- */
  .nav-item,.nav-link,.tab,.btn,button{min-height:40px}
}

@media (max-width: 480px){
  .stats-grid,.kpi-grid.g4,.kpi-grid.g5,.mini-kpi-grid,.g4,.g3,.pos{
    grid-template-columns:1fr !important;
  }
  .cal-header,.cal-grid,.time-grid{font-size:9.5px !important;gap:2px !important}
  .main,.admin-main,.content,.container{padding:12px !important}
}