/* ============================================================================
   mobile.css — mise en page téléphone des écrans métier.

   Tout ce fichier vit sous @media (max-width: 768px): au-delà, il n'existe pas,
   donc l'affichage bureau ne peut pas bouger. Il est chargé en dernier dans le
   <head> pour passer devant les <style> de page, et n'emploie !important que là
   où la page pose des styles en ligne (impossible à surcharger autrement).

   Le principe: les listes sont des grilles à 7-9 colonnes taillées pour 1400px.
   À 390px elles débordaient de 700px et les colonnes de droite (assigné,
   statut, activité) étaient inatteignables. On ne les fait pas défiler
   latéralement, on les replie en cartes: identité et statut sur la première
   ligne, objet sur la deuxième, métadonnées sur la troisième.
   ========================================================================== */

@media (max-width: 768px) {

  /* ── Fond de page ──────────────────────────────────────────────────────── */

  html { -webkit-text-size-adjust: 100%; }

  /* iOS zoome sur le champ dès que la police descend sous 16px, et ne revient
     jamais tout seul. On force 16px à la saisie: c'est le seul moyen. */
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea { font-size: 16px !important; }

  /* ── En-tête de page (fil d'Ariane, titre, recherche, action) ──────────── */
  /* Ces blocs portent leurs styles en ligne (display:flex, flex:1, max-width),
     d'où les !important ci-dessous. */

  .dv-header {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .dv-header > div:first-child { flex: 1 1 100% !important; min-width: 0; }
  .dv-header .dv-search {
    flex: 1 1 100% !important;
    max-width: none !important;
  }
  .dv-header > a[href*="#new"] {
    flex: 1 1 100% !important;
    text-align: center;
    padding: 11px 14px !important;
  }
  .dv-title,
  .cl-title,
  .rs-title,
  .mg-title { font-size: 19px !important; }
  .dv-crumb,
  .cl-crumb,
  .rs-crumb,
  .mg-crumb {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* La barre d'onglets ouverts est une métaphore de bureau: sur téléphone elle
     déborde, se coupe, et la navigation passe de toute façon par le retour à la
     liste. On la retire plutôt que de la faire défiler. */
  .dv-tabbar,
  #dmTabbar { display: none !important; }

  /* ── Liste des demandes ───────────────────────────────────────────────── */

  body.dv-page .dv-container { padding: 12px 12px 80px !important; }

  body.dv-page .dv-filterbar {
    flex-wrap: wrap;
    row-gap: 8px;
    overflow: visible;
  }
  body.dv-page .dv-cfilter,
  body.dv-page .dv-msel-btn {
    min-height: 36px;
    font-size: 12.5px;
  }
  /* Le groupe « Assigné : … » réclamait 379px dans 366: il refusait de se
     serrer parce que le sélecteur a une largeur fixe. */
  body.dv-page .dv-asg-group {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }
  body.dv-page .dv-asg-group .dv-msel-btn,
  body.dv-page .dv-asg {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  /* Les libellés de colonnes n'ont plus de colonnes à nommer. */
  body.dv-page .dv-listhead { display: none !important; }
  body.dv-page .dv-listcard { overflow: hidden; }

  body.dv-page .dv-listrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    padding: 11px 12px;
  }
  /* Ligne 1: case à cocher, numéro, statut poussé à droite.
     Ligne 2: client et objet, sur toute la largeur.
     Ligne 3: assigné, date de création, dernière activité. */
  body.dv-page .dv-listrow > *:nth-child(1) { order: 1; flex: 0 0 auto; }
  body.dv-page .dv-listrow > *:nth-child(2) { order: 2; flex: 0 0 auto; }
  body.dv-page .dv-listrow > *:nth-child(6) { order: 3; margin-left: auto; flex: 0 0 auto; }
  body.dv-page .dv-listrow > *:nth-child(3) { order: 4; flex: 1 1 100%; }
  body.dv-page .dv-listrow > *:nth-child(5) { order: 5; flex: 0 1 auto; max-width: 55%; }
  body.dv-page .dv-listrow > *:nth-child(4) { order: 6; flex: 0 0 auto; }
  body.dv-page .dv-listrow > *:nth-child(7) { order: 7; flex: 0 0 auto; }

  body.dv-page .dv-listrow > *:nth-child(5),
  body.dv-page .dv-listrow > *:nth-child(4),
  body.dv-page .dv-listrow > *:nth-child(7) {
    font-size: 11.5px;
    color: var(--text-secondary, #64748b);
  }
  body.dv-page .dv-listrow > *:nth-child(4)::before,
  body.dv-page .dv-listrow > *:nth-child(7)::before {
    content: "·";
    color: var(--border-strong, #cbd5e1);
    margin-right: 7px;
  }
  body.dv-page .dv-listrow .subj { white-space: normal; font-size: 13.5px; line-height: 1.35; }
  body.dv-page .dv-listrow .sub { white-space: normal; font-size: 11.5px; }
  body.dv-page .dv-listrow .id { font-size: 13px; }
  body.dv-page .dv-listrow .tag { font-size: 11px; }
  /* Une case de 14px se rate au doigt: on garde le dessin, on élargit la zone. */
  body.dv-page .dv-listrow input[type=checkbox],
  body.cl-page .cl-listrow input[type=checkbox],
  body.rs-page .rs-listrow input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin: 0 2px;
  }

  body.dv-page .dv-footer {
    flex-wrap: wrap;
    row-gap: 6px;
    font-size: 11.5px;
  }
  body.dv-page .dv-bulkbar {
    left: 12px;
    right: 12px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* ── Détail d'une demande ─────────────────────────────────────────────── */

  body.dm-page .dm-container { padding: 12px 12px 72px !important; }

  /* Sur un écran de demande, le grand titre « Demandes », la recherche et le
     bouton de création répètent la liste et repoussent le contenu de trois
     rangées. Le fil d'Ariane suffit à situer, et le retour est juste dessous. */
  body.dm-page .dv-title,
  body.dm-page .dv-header .dv-search,
  body.dm-page .dv-header > a[href*="#new"] { display: none !important; }
  body.dm-page .dv-header { margin-bottom: 8px !important; }

  body.dm-page .dm-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    font-size: 13px;
  }

  /* L'en-tête collant faisait 427px de large dans 340px: les actions
     chevauchaient le titre et « Clôturer » sortait de l'écran. On le laisse
     passer à la ligne, et on le décolle: 200px de bandeau fixe sur 844px de
     hauteur, ce n'est pas un service rendu. */
  body.dm-page .dm-sticky {
    position: static;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }
  body.dm-page .dm-sticky .meta { flex: 1 1 100%; order: 1; }
  body.dm-page .dm-sticky .title { font-size: 16px; }
  body.dm-page .dm-sticky .info { font-size: 12px; gap: 8px; }
  body.dm-page .dm-sticky .dm-nav { order: 2; display: flex; gap: 6px; }
  body.dm-page .dm-sticky .dm-icon-btn { min-width: 40px; min-height: 40px; }
  body.dm-page .dm-sticky > button,
  body.dm-page .dm-sticky .dm-export {
    order: 3;
    flex: 1 1 auto;
    min-height: 40px;
  }
  body.dm-page .dm-sticky .dm-export > .dm-export-toggle {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }
  body.dm-page .dm-sticky > button { justify-content: center; }
  body.dm-page .dm-title-edit { min-width: 32px; min-height: 32px; opacity: 1; }

  /* Cinq onglets ne tiennent pas: on les fait défiler franchement plutôt que de
     les rogner. */
  body.dm-page .dm-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.dm-page .dm-tabs::-webkit-scrollbar { display: none; }
  body.dm-page .dm-tab { white-space: nowrap; flex: 0 0 auto; padding-bottom: 10px; }

  body.dm-page .dm-shell { grid-template-columns: 1fr; gap: 12px; }
  body.dm-page .tl-item { grid-template-columns: 28px 1fr; gap: 8px; }
  body.dm-page .tl-meta { grid-template-columns: 1fr; }
  body.dm-page .tl-meta dt { margin-top: 4px; }
  body.dm-page .dm-fmt-btn { min-width: 36px; min-height: 36px; }
  body.dm-page .dm-dd-trigger,
  body.dm-page .dm-genpill { min-height: 36px; }

  /* Sous 11px un libellé n'est plus lu, il est deviné. */
  body.dm-page .src-badge { font-size: 10.5px; }
  body.dm-page .tag,
  body.dm-page .dm-tab .count { font-size: 11px; }
  body.dm-page .tl-meta dt { font-size: 11px; }

  /* ── Listes clients et résidences ─────────────────────────────────────── */

  body.cl-page .cl-container,
  body.rs-page .rs-container { padding: 12px 12px 80px !important; }

  body.cl-page .cl-listhead,
  body.rs-page .rs-listhead { display: none !important; }

  body.cl-page .cl-listrow,
  body.rs-page .rs-listrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    padding: 11px 12px;
  }
  body.rs-page .rs-listrow { min-width: 0; }
  body.cl-page .cl-listrow > .cl-id,
  body.rs-page .rs-listrow > .rs-id { flex: 0 0 auto; font-size: 12.5px; }
  body.cl-page .cl-listrow > .cl-name,
  body.rs-page .rs-listrow > .rs-name {
    flex: 1 1 100%;
    order: 3;
    font-size: 14px;
    font-weight: 600;
  }
  body.cl-page .cl-listrow > *:not(.cl-id):not(.cl-name):not(input),
  body.rs-page .rs-listrow > *:not(.rs-id):not(.rs-name):not(input) {
    order: 4;
    flex: 0 1 auto;
    max-width: 100%;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.rs-page .rs-listrow > .rs-dovadis-ref,
  body.rs-page .rs-listrow > .rs-address { flex: 1 1 100% !important; }
  body.rs-page .rs-listrow > .rs-postal,
  body.rs-page .rs-listrow > .rs-city { color: var(--rs-slate-500); }
  body.cl-page .cl-listrow > .cl-load,
  body.rs-page .rs-listrow > .rs-load { margin-left: auto; }

  body.cl-page .cl-filters,
  body.rs-page .rs-filters { flex-wrap: wrap; row-gap: 6px; }
  body.cl-page .cl-search,
  body.rs-page .rs-search { width: 100%; }
  body.cl-page .cl-footer,
  body.rs-page .rs-footer { flex-wrap: wrap; row-gap: 6px; font-size: 11.5px; }

  /* ── Messagerie ───────────────────────────────────────────────────────── */

  body.mg-page .mg-container { padding: 12px !important; }
  body.mg-page .mg-header { flex-wrap: wrap; row-gap: 4px; }

  /* La liste occupait 38% de la hauteur et le message le reste: à 844px le
     message n'avait plus qu'un tiers d'écran utile. */
  body.mg-page .mg-shell { grid-template-rows: var(--mg-list-h, minmax(0, 32%)) 6px minmax(160px, 1fr); }

  /* L'objet se retrouvait à un mot par ligne, coincé entre les flèches et
     « Répondre ». On lui rend la largeur entière. */
  body.mg-page .mg-view .toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px 14px;
  }
  body.mg-page .mg-view .toolbar .left { flex: 1 1 100%; }
  body.mg-page .mg-view .toolbar .subj { font-size: 14.5px; line-height: 1.3; }
  body.mg-page .mg-view .toolbar > *:not(.left) { flex: 0 0 auto; min-height: 38px; }
  body.mg-page .mg-view-body { padding: 14px; }
  body.mg-page .mg-filters { flex-wrap: wrap; row-gap: 6px; }

  /* Objet et expéditeur de la liste: couper proprement plutôt que déborder.
     L'ellipse ne prend que si toute la chaîne de parents accepte de rétrécir,
     d'où les min-width: 0 sur .body, .top-row et .from-group. */
  body.mg-page .mg-item .body,
  body.mg-page .mg-item .top-row,
  body.mg-page .mg-item .from-group { min-width: 0; }
  body.mg-page .mg-item .subj,
  body.mg-page .mg-item .from {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* ── Fiches client et résidence ───────────────────────────────────────── */
  /* Même maladie que le détail d'une demande: un gabarit deux colonnes de
     1400px qui ne se replie qu'à 1200px pour la grille, pas pour l'en-tête. */

  body.cd-page .cd-container,
  body.rd-page .rd-container { padding: 12px 12px 72px !important; }

  body.cd-page .cd-header,
  body.rd-page .rd-header {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 10px;
  }
  body.cd-page .cd-header > *,
  body.rd-page .rd-header > * { min-width: 0; max-width: 100%; }

  body.cd-page .cd-tabs,
  body.rd-page .rd-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.cd-page .cd-tabs::-webkit-scrollbar,
  body.rd-page .rd-tabs::-webkit-scrollbar { display: none; }
  body.cd-page .cd-tabs > *,
  body.rd-page .rd-tabs > * { white-space: nowrap; flex: 0 0 auto; padding-bottom: 10px; }

  /* minmax(0, 1fr) et non 1fr: une piste « 1fr » ne descend pas sous la largeur
     minimale de son contenu, donc une seule adresse longue élargissait toute la
     colonne à 638px dans un écran de 366. */
  body.cd-page .cd-shell,
  body.rd-page .rd-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  body.cd-page .cd-shell > *,
  body.rd-page .rd-shell > *,
  body.cd-page .cd-card,
  body.rd-page .rd-card { min-width: 0; }
  body.cd-page .cd-card,
  body.rd-page .rd-card { padding: 14px; overflow-wrap: anywhere; }
  body.cd-page .cd-meta-pair,
  body.rd-page .rd-meta-pair { flex-wrap: wrap; row-gap: 2px; }
  body.cd-page .cd-meta-pair .cd-v,
  body.rd-page .rd-meta-pair .rd-v { text-align: left; }

  /* Quatre indicateurs sur une ligne de 366px donnent 80px chacun: illisible. */
  body.rd-page .rd-kpi-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.cd-page .cd-kpi-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.cd-page .cd-btn-primary,
  body.cd-page .cd-btn-ghost,
  body.rd-page .rd-btn-primary,
  body.rd-page .rd-btn-ghost { min-height: 38px; }
  body.cd-page .cd-drawer,
  body.rd-page .rd-drawer { width: 100vw; max-width: 100vw; }

  /* ── Tâches: bandeau de tête ──────────────────────────────────────────── */

  body.tk-page .tk-header,
  body.tk-page .tk-filters {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }
  body.tk-page .tk-header > div { flex-wrap: wrap; row-gap: 6px; }
  body.tk-page .tk-header > button { flex: 1 1 100%; justify-content: center; min-height: 38px; }
  body.tk-page .tk-header button,
  body.tk-page .tk-filters button { min-height: 34px; }
  body.tk-page .tk-filters > * { min-width: 0; max-width: 100%; }
  body.tk-page .tk-filters > .relative { flex: 1 1 100%; max-width: none; }

  /* ── Tâches (kanban) ──────────────────────────────────────────────────── */

  /* Le tableau défile déjà latéralement; on cale les colonnes sur la largeur
     de l'écran pour qu'un balayage montre exactement une colonne. */
  .kanban-board {
    padding: 0 12px 12px;
    gap: 12px;
    scroll-snap-type: x mandatory;
  }
  .kanban-col {
    min-width: 84vw;
    scroll-snap-align: start;
  }
  .kanban-card { padding: 12px; }
  .kanban-card-title { font-size: 14px; }
}
