/* styles-mobile.css — Responsive RAYCAST : dashboard COMPLET sur mobile.
 * Chargé en DERNIER (après styles-v5.css) → ses règles priment.
 * Problème corrigé : .app = "240px 1fr" sans media query → sidebar mangeait
 * la moitié de l'écran sur téléphone, contenu coupé + scroll horizontal.
 */

@media (max-width: 820px) {
  /* 1) Shell : on EMPILE — sidebar devient une barre horizontale en haut,
        le contenu prend toute la largeur. */
  .app { grid-template-columns: 1fr !important; }

  .sidebar {
    position: static !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none !important;
    border-bottom: 1px solid var(--raycom-border, rgba(11,27,43,0.08));
    padding: 8px 12px !important;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-logo { padding: 0 10px 0 2px !important; flex: 0 0 auto; }
  .sidebar nav { flex-direction: row !important; gap: 4px; flex: 1 1 auto; }
  .nav-item { white-space: nowrap; padding: 8px 12px; flex: 0 0 auto; }
  /* le dernier bloc de la sidebar (profil / déconnexion) reste accessible au bout de la barre */
  .sidebar > *:last-child { margin-top: 0 !important; margin-left: auto; flex: 0 0 auto; }

  /* 2) Dashboard : moins de padding latéral + colonnes empilées */
  .r5-dash { padding: 0 14px 60px !important; }
  .r5-dash-grid { grid-template-columns: 1fr !important; }
  .r5-dash-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .r5-dash-head h1 { font-size: 24px; }

  /* 3) Filet de sécurité : aucun débordement horizontal global */
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* Très petits écrans (≤ 480px) : on resserre encore */
@media (max-width: 480px) {
  .r5-dash { padding: 0 10px 50px !important; }
  .r5-dash-head h1 { font-size: 21px; }
}