/* ============================================================
   Hélys Collectivité — Adaptation à tous les écrans
   ------------------------------------------------------------
   Cette feuille est chargée par TOUS les modules. Un module
   ajouté plus tard devient adaptatif dès qu'il l'inclut :

     <link rel="stylesheet" href="../helys-responsive.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   Elle ne redéfinit aucune couleur ni aucun style propre à un
   module : elle corrige seulement ce qui casse sur écran étroit
   (débordements, grilles figées, tableaux trop larges, zones
   tactiles trop petites).
   ============================================================ */

/* ---------- 1. Rien ne doit déborder horizontalement ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Les images et médias ne dépassent jamais de leur conteneur. */
img, canvas, svg, video, iframe {
  max-width: 100%;
}

/* ---------- 2. Tableaux : défilement plutôt que débordement ----------
   Un tableau large casse toute la mise en page sur téléphone.
   On le laisse défiler horizontalement, seul, sans entraîner la page. */
table {
  max-width: 100%;
}

@media (max-width: 900px) {
  /* Tout tableau devient défilant, même sans conteneur dédié. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* Un conteneur déjà prévu pour cela garde son comportement. */
  [style*="overflow-x:auto"] > table,
  [style*="overflow-x: auto"] > table {
    display: table;
    white-space: normal;
  }
}

/* ---------- 3. Grilles : elles s'empilent quand la place manque ---------- */
@media (max-width: 900px) {
  .helys-grid-auto,
  .stats-grid, .stat-grid, .cards-grid, .charts-grid,
  .form-row, .form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- 4. Zones tactiles ----------
   Sur écran tactile, une cible de moins de 40 px est difficile à
   atteindre. On agrandit sans changer l'apparence sur ordinateur. */
@media (pointer: coarse) {
  button, .btn, a.btn, input[type="button"], input[type="submit"],
  select, .service-tab, .tab, .cfg-del {
    min-height: 40px;
  }
  input[type="text"], input[type="email"], input[type="date"],
  input[type="number"], input[type="password"], textarea, select {
    /* 16 px empêche le zoom automatique de Safari sur iPhone. */
    font-size: 16px;
  }
}

/* ---------- 5. Fenêtres modales ----------
   Elles doivent rester lisibles et entièrement accessibles. */
@media (max-width: 720px) {
  .modal, .modal-content, .modal-box, .modal-inner,
  .helys-modal, .modal-dialog {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    overflow-y: auto;
    margin: 2vh auto !important;
  }
  .modal-body { max-height: none !important; }
}

/* ---------- 6. Barres latérales ----------
   Une colonne fixe de 220 px ne laisse rien au contenu sur mobile :
   elle passe au-dessus, à l'horizontale. */
@media (max-width: 820px) {
  .sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .sidebar nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    padding: 4px !important;
  }
  .sidebar nav a {
    padding: 9px 12px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  .sidebar-header { width: 100%; }
  .sidebar-footer { display: none; }
  .main, .content, .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ---------- 7. En-têtes ----------
   Titre, sélecteurs et boutons s'empilent au lieu de se chevaucher. */
@media (max-width: 720px) {
  .header, .topbar, .page-header, .brand {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .header h1, .topbar h1 { font-size: 1.2em !important; }
  .whoami { margin-left: 0 !important; width: 100%; }
  .whoami select { max-width: 100%; width: 100%; }
}

/* ---------- 8. Calendriers et plannings ----------
   Sept colonnes sur un écran de téléphone : on réduit sans casser
   la structure, la grille reste lisible. */
@media (max-width: 640px) {
  .calendar-grid, .cal-grid, .week-grid {
    font-size: 11px;
  }
  .cal-cell, .day-cell {
    min-height: 60px !important;
    padding: 2px !important;
  }
  .cal-event-item, .task-item {
    font-size: 10px !important;
    padding: 1px 3px !important;
  }
  .cal-day { font-size: 11px !important; }
}

/* ---------- 9. Marges générales ----------
   On récupère l'espace perdu sur les petits écrans. */
@media (max-width: 720px) {
  .wrap, .container, .content, .main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .card, .chart-card, .form-card {
    padding: 12px !important;
  }
}

/* ---------- 10. Impression ----------
   Les mairies impriment beaucoup : on retire ce qui n'a pas de sens
   sur papier. */
@media print {
  .sidebar, .header button, .btn, .modal, .notif-panel { display: none !important; }
  body { background: #fff !important; }
  .card { break-inside: avoid; }
}