/* ============================================================
   FISS — responsive.css
   Ajustements mobile globaux, en complément de layout.css qui
   gère déjà : sidebar coulissante, grilles home, hamburger.
   Ce fichier couvre ce qui manquait : formulaires, modales,
   tableaux, boutons, FullCalendar.
   Charger APRÈS component.css et layout.css dans index.html :
   <link rel="stylesheet" href="css/responsive.css">
   ============================================================ */

/* ── Petites tablettes / grands téléphones ── */
@media (max-width: 640px) {
  /* Formulaires : toujours en une colonne, jamais côte à côte */
  .form-row { grid-template-columns: 1fr; }

  /* Modales : quasi plein écran, jamais de débordement horizontal —
     !important nécessaire pour ces deux classes car de nombreuses pages
     fixent une largeur en pixels directement en style="" inline (plus
     spécifique qu'une classe), ce qui sinon fait déborder l'écran sur
     mobile (ex. style="width:680px" sur un téléphone de 375px de large). */
  .modal-overlay { padding: 8px; }
  .modal, .modal-box {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 94vh;
    padding: 18px 16px;
    border-radius: 14px;
  }
  .modal-lg, .modal-box-lg { max-width: 100% !important; }
  .modal-title { font-size: 16px; }
  .modal-header { margin-bottom: 16px; }

  /* Boutons : cible tactile confortable (44px min recommandé) */
  .btn { padding: 10px 14px; font-size: 13px; }
  .btn-sm { padding: 7px 12px; }

  /* Tableaux : jamais de débordement qui casse la mise en page —
     on force un scroll horizontal contenu plutôt qu'un dépassement
     de la page entière. Enveloppez vos <table> dans <div class="table-responsive"> */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 480px; } /* garde la table lisible plutôt que tassée illisible */
  .data-table th, .data-table td { padding: 8px 10px; font-size: 12px; }

  /* Cartes utilisateur / listes : déjà flex, on empile proprement */
  .user-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .user-card > div:last-child { width: 100%; justify-content: flex-end; }

  /* Section header : titre + bouton d'action empilés au lieu de côte à côte */
  .section-header.flex { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Grilles à colonnes fixes (px ou fr) codées en dur dans certaines pages :
     empilées en une seule colonne sur mobile plutôt que tassées en 2/3
     colonnes illisibles. Ajoutez la classe "stack-mobile" à toute grille
     ou flex-row à plusieurs colonnes qui doit s'empiler sur petit écran. */
  .stack-mobile,
  .conseil-grid {
    display: block !important;
  }
  .stack-mobile > *,
  .conseil-grid > * {
    margin-bottom: 16px;
    width: 100% !important;
    position: static !important; /* neutralise les "position: sticky" en colonne */
  }
  .stack-mobile > *:last-child,
  .conseil-grid > *:last-child {
    margin-bottom: 0;
  }

  /* Topbar : masquer l'heure, réduire le logo texte */
  #topbar-date { display: none; }
  .app-topbar-logo-text { font-size: 13px; }
  .app-topbar { padding: 0 12px; gap: 8px; }

  /* KPI grids (dashboards) : 2 colonnes plutôt que 4 sur mobile */
  #gestion-kpis, .ace-stats { grid-template-columns: repeat(2, 1fr) !important; }

  /* Onglets qui débordent : scroll horizontal plutôt que retour à la ligne cassé */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .tab { white-space: nowrap; flex-shrink: 0; }
}

/* ── Très petits écrans ── */
@media (max-width: 400px) {
  .modal { padding: 14px 12px; }
  .section-title { font-size: 18px; }
  #gestion-kpis, .ace-stats { grid-template-columns: 1fr !important; }
}

/* ============================================================
   FullCalendar — mobile
   Le calendrier bascule en vue liste sur petit écran (géré côté
   JS dans emploi-du-temps.js), ici on adapte juste l'habillage.
   ============================================================ */
@media (max-width: 768px) {
  .fc .fc-toolbar { flex-direction: column; gap: 8px; align-items: stretch; }
  .fc .fc-toolbar-title { font-size: 16px; text-align: center; }
  .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
  .fc .fc-button { padding: 6px 10px; font-size: 12px; }
  .fc .fc-col-header-cell-cushion { font-size: 11px; padding: 4px 2px; }
  /* Vue liste (celle utilisée sur mobile) : lisible, texte pas écrasé */
  .fc .fc-list-event-time { font-size: 11px; }
  .fc .fc-list-day-cushion { padding: 8px 10px; font-size: 13px; }
  .fc .fc-list-table td { padding: 8px 10px; }
  /* Si jamais la vue grille reste affichée (ex: import) : éviter les événements illisibles */
  .fc .fc-timegrid-event { font-size: 10px; }
  .fc .fc-timegrid-slot-label-cushion { font-size: 10px; }
}