/* ==========================================================================
   admin-mobile.css — BASE COMMUNE mobile de l'espace admin (≤ 700 px)
   Chargé après le <style> d'admin.html. Rien ici ne s'applique au-dessus de
   700 px : le rendu ordinateur reste identique.

   Classes utilitaires (posées dans les gabarits ou par admin-mobile.js) :
     html.is-mobile     posée par admin-mobile.js sous 700 px (matchMedia)
     table.m-cards      posée par admin-mobile.js : tableau rendu en fiches
     table.m-keep-table à poser dans le gabarit : tableau gardé tel quel
                        (défilement horizontal propre si besoin)
     td[data-label]     libellé de colonne recopié par admin-mobile.js
     td.m-actions       cellule d'actions (posée par admin-mobile.js)
     tr.m-head          ligne d'en-tête sans <thead> (masquée en fiches)
     .m-full            dans une fiche : cellule pleine largeur sans libellé
     .m-keep-grid       grille inline gardée telle quelle
     .m-grid-2          grille passée à 2 colonnes (petites stats)
     .m-tabs            rangée d'onglets défilante (posée par admin-mobile.js
                        sur le parent de .act-tab / .fin-tab / .aide-tab)
     .m-nowrap          rangée flex qui ne doit PAS passer à la ligne
     .m-stack           rangée flex empilée (1 élément par ligne)
     .m-hide            masqué sur mobile
     .m-tiny            bouton exclu de la hauteur tactile minimale
     .m-modal           fenêtre modale (fond) — auto pour les div fixes
                        ajoutées au <body>
   ========================================================================== */

@media (max-width: 700px) {

  /* ── Page : marges, pas de défilement horizontal ───────────────────── */
  html { overflow-x: hidden; }
  body { max-width: 100%; }
  .main { padding: 1rem 12px 2rem; min-width: 0; }
  .layout { min-width: 0; }
  .panel { min-width: 0; max-width: 100%; }
  .panel-title { font-size: 1.2rem; margin-bottom: 1rem; }
  .card { padding: 1rem .9rem; }
  .card h3 { overflow-wrap: break-word; }

  /* ── Texte : pas de coupure de mot inutile, mais rien ne déborde ───── */
  .panel { word-break: normal; overflow-wrap: break-word; }
  .panel a[href^="mailto:"], .panel a[href^="http"], .panel a[href^="tel:"] { overflow-wrap: anywhere; }

  /* ── Rangées flex inline : passent à la ligne ─────────────────────── */
  .panel [style*="display:flex"], .panel [style*="display: flex"],
  .panel [style*="display:inline-flex"],
  .m-modal [style*="display:flex"], .m-modal [style*="display: flex"] { flex-wrap: wrap; }
  .panel .m-nowrap, .m-modal .m-nowrap { flex-wrap: nowrap !important; }
  /* case à cocher + texte : la case reste à côté, le texte passe à la ligne en lui-même */
  .panel label[style*="display:flex"], .m-modal label[style*="display:flex"],
  .panel label[style*="display:inline-flex"], .m-modal label[style*="display:inline-flex"] { flex-wrap: nowrap; }
  .panel .m-stack { flex-direction: column !important; align-items: stretch !important; }
  .m-hide { display: none !important; }
  /* un élément poussé à droite (margin-left:auto) ne doit pas forcer un débordement */
  .panel [style*="white-space:nowrap"] { max-width: 100%; }

  /* ── Grilles inline → 1 colonne ────────────────────────────────────── */
  .panel [style*="grid-template-columns"]:not(.m-keep-grid):not(.dash-grid):not(.m-grid-2),
  .m-modal [style*="grid-template-columns"]:not(.m-keep-grid):not(.m-grid-2),
  .panel .row2, .m-modal .row2 { grid-template-columns: minmax(0, 1fr) !important; }
  .panel .m-grid-2, .m-modal .m-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .panel [style*="grid-column"]:not(.m-keep-grid *) { grid-column: auto !important; }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .dash-stat { padding: .9rem .5rem; }
  .dash-stat .val { font-size: 1.5rem; }

  /* ── Champs : pleine largeur, 16 px (pas de zoom iOS), hauteur tactile ─ */
  .panel select, .panel textarea,
  .panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .m-modal select, .m-modal textarea,
  .m-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  #login input, .lbox input, .rbox input, .motif-custom {
    font-size: 16px !important;
    max-width: 100%;
    min-width: 0;
  }
  .panel select,
  .panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  .m-modal select,
  .m-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) {
    min-height: 40px;
  }
  .panel textarea, .m-modal textarea { width: 100%; }
  /* un champ seul (hors rangée flex) prend toute la largeur */
  .panel select:not([style*="width"]), .m-modal select:not([style*="width"]) { width: 100%; }
  /* dans une rangée flex : partage de la ligne, jamais écrasé en simple flèche */
  .panel [style*="display:flex"] > select,
  .panel [style*="display: flex"] > select,
  .m-modal [style*="display:flex"] > select {
    flex: 1 1 150px;
    width: auto;
  }
  .panel [style*="display:flex"] > input:not([type="checkbox"]):not([type="radio"]),
  .m-modal [style*="display:flex"] > input:not([type="checkbox"]):not([type="radio"]) {
    flex-grow: 1;
    flex-basis: 150px;
    min-width: min(100%, 11rem) !important;
  }
  .panel input[type="checkbox"], .panel input[type="radio"],
  .m-modal input[type="checkbox"], .m-modal input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0; }
  .panel input[type="date"], .panel input[type="time"], .panel input[type="month"] { min-width: 0; }

  /* ── Boutons : cibles tactiles ≥ 40 px, texte qui peut passer à la ligne ─ */
  .panel button:not(.m-tiny):not(.toggle-switch *),
  .panel .btn, .panel a.btn, .panel .adh-filter-btn,
  .m-modal button:not(.m-tiny), .m-modal .btn {
    min-height: 40px;
    max-width: 100%;
    touch-action: manipulation;
  }
  .panel .btn, .panel button:not(.m-tiny), .m-modal .btn, .m-modal button:not(.m-tiny) {
    white-space: normal !important;
    line-height: 1.25;
  }
  .panel button.m-tiny, .matiere-tag button { min-height: 0; }
  .topbar button, .burger-btn { min-height: 40px; min-width: 40px; }
  .nav-item { padding-top: .8rem; padding-bottom: .8rem; }
  .adh-toolbar { gap: .45rem; }
  .adh-count { margin-left: 0; flex-basis: 100%; }

  /* ── Onglets : une rangée qui défile horizontalement ──────────────── */
  .m-tabs, .aide-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .m-tabs::-webkit-scrollbar, .aide-tabs::-webkit-scrollbar { display: none; }
  .m-tabs > *, .aide-tabs > * { flex: 0 0 auto !important; white-space: nowrap !important; margin-bottom: 0 !important; }
  .act-tab, .fin-tab, .aide-tab { min-height: 44px; }

  /* ==================================================================
     TABLEAUX → FICHES EMPILÉES (table.m-cards, posée par admin-mobile.js)
     ================================================================== */
  table.m-cards {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    border: 0;
    font-size: .88rem !important;
    background: transparent;
  }
  table.m-cards > thead, table.m-cards tr.m-head { display: none; }
  table.m-cards > tbody, table.m-cards > tfoot { display: block; }
  table.m-cards > caption { display: block; text-align: left; }
  table.m-cards > tbody > tr, table.m-cards > tfoot > tr, table.m-cards > tr {
    display: block;
    margin: 0 0 .7rem;
    padding: .25rem .85rem;
    background: #fff;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }
  table.m-cards > tbody > tr:hover > td { background: transparent; }
  table.m-cards > tbody > tr > td, table.m-cards > tbody > tr > th,
  table.m-cards > tfoot > tr > td, table.m-cards > tfoot > tr > th {
    display: flow-root;
    width: auto !important;
    max-width: none !important;
    padding: .5rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    text-align: left !important;
    white-space: normal !important;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
    min-height: 0;
  }
  table.m-cards > tbody > tr > :last-child, table.m-cards > tfoot > tr > :last-child { border-bottom: 0 !important; }
  /* libellé dans une colonne à gauche (7 rem), valeur dans la colonne de droite */
  table.m-cards > tbody > tr > [data-label]:not([data-label=""]):not(.m-full):not(.m-actions),
  table.m-cards > tfoot > tr > [data-label]:not([data-label=""]):not(.m-full):not(.m-actions) {
    position: relative;
    padding-left: 7.4rem !important;
    min-height: 2.6rem;
  }
  table.m-cards td[data-label]::before, table.m-cards th[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: .62rem;
    width: 6.8rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.3;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .02em;
    overflow-wrap: break-word;
    text-align: left;
  }
  /* sans libellé : pleine largeur */
  table.m-cards td[data-label=""]::before, table.m-cards th[data-label=""]::before,
  table.m-cards td.m-full::before { content: none; display: none; }
  table.m-cards [data-label] select { width: 100%; }
  /* cellule vide (« — » inutile ou rien) : on la masque pour alléger la fiche */
  table.m-cards > tbody > tr > td:empty { display: none; }
  /* première cellule (souvent le nom) un peu mise en avant */
  table.m-cards > tbody > tr > td:first-child { font-size: .95rem; }

  /* Cellule d'actions : boutons en ligne qui passent à la ligne */
  table.m-cards td.m-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .6rem 0 !important;
  }
  table.m-cards td.m-actions::before { content: none; display: none; }
  table.m-cards td.m-actions > div, table.m-cards td.m-actions > span {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    max-width: 100%;
  }
  table.m-cards td.m-actions button, table.m-cards td.m-actions .btn, table.m-cards td.m-actions a {
    margin: 0 !important;
    min-height: 40px;
    min-width: 40px;
    flex: 0 0 auto;
  }
  table.m-cards td.m-actions br { display: none; }
  table.m-cards select { max-width: 100%; }

  /* Conteneurs des tableaux devenus fiches : plus de cadre ni de coupe */
  .adh-table-wrap:has(> table.m-cards) { border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
  :has(> table.m-cards) { overflow-x: visible; }
  .adh-table-wrap { overflow-x: visible; }

  /* ── Petits tableaux gardés (chiffres) : défilement horizontal propre ── */
  table.m-keep-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .8rem !important;
  }
  table.m-keep-table th, table.m-keep-table td { white-space: nowrap; }

  /* ── Modales (fenêtres fixes créées en JS / statiques) ─────────────── */
  .m-modal, #resetModal, #refusModal {
    padding: 8px !important;
    align-items: flex-start !important;
    overflow-y: auto;
  }
  .m-modal > div, .m-modal > form, .rbox, .refus-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto !important;
    border-radius: 12px !important;
  }
  .m-modal > div > div { max-width: 100%; }
  .refus-actions { flex-wrap: wrap; }
  .refus-actions > button { min-height: 44px; }
  .motif-opt { min-height: 44px; }
  .rbox .row2r { grid-template-columns: 1fr; }
}