/* ============================================================
   mobile-gerant.css — ADAPTATION MOBILE DES BRIQUES GÉRANT (v5.502)
   Chantier de nuit demandé par Mika : toutes les briques du gérant
   lisibles sur téléphone, comme l'app de Paula.
   Règles du chantier : tout est scopé body.mob-hub (le bureau ne
   change pas d'un pixel) ; un préfixe de classes par brique.
   ============================================================ */


/* ================= BRIQUE : salaires+stc ================= */
/* ============================================================
   Salaires + Solde de tout compte — adaptation TÉLÉPHONE gérant
   (préfixe salm-, scope body.mob-hub — le rendu ordinateur ne change pas)
   ============================================================ */

/* --- Barres du haut : tout passe à la ligne proprement --- */
body.mob-hub .salm-top { flex-wrap: wrap; row-gap: 8px; }
body.mob-hub .salm-top > .salm-nav,
body.mob-hub .salm-top > .week-block.salm-nav { margin-left: 0 !important; flex: 1 0 100%; min-width: 0; }
body.mob-hub .salm-top .week-nav { flex-wrap: wrap; row-gap: 6px; }
body.mob-hub .salm-top .seg { margin-left: 0 !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.mob-hub .salm-top .check { margin-left: 0 !important; flex: 1 0 100%; }

/* --- Vue Salaires : cartes par salarié (remplacent le tableau à 8 colonnes) --- */
body.mob-hub .salm-liste { display: flex; flex-direction: column; gap: 12px; }
body.mob-hub .salm-carte { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
body.mob-hub .salm-carte__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; min-width: 0; }
body.mob-hub .salm-carte__hd .cell-emp { min-width: 0; }
body.mob-hub .salm-carte__hd .cell-emp__name { white-space: normal; }
body.mob-hub .salm-grille { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 13px; align-items: baseline; }
body.mob-hub .salm-grille > span { color: var(--text-3, #6b7280); }
body.mob-hub .salm-grille > b { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
body.mob-hub .salm-grille .pastille { font-size: 11px; }
/* Carte Total équipe : légèrement teintée pour se distinguer */
body.mob-hub .salm-carte--total { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
body.mob-hub .salm-carte--total .salm-carte__hd { font-size: 14px; }

/* --- Tableaux restés en table (URSSAF, STC, Cumuls, Variable, Mois en cours) :
       défilement horizontal INTERNE au doigt, jamais la page --- */
body.mob-hub .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
body.mob-hub .table-wrap .table { min-width: 560px; }
/* Inputs de primes (Variable) : taille tactile confortable dans le tableau défilable */
body.mob-hub .table-wrap .prime-in { min-width: 76px; }

/* ================= BRIQUE : banque ================= */
/* ============================================================
   BANQUE (bqm-) — brique Banque lisible sur téléphone (gérant)
   Relevés BRED, opérations, bilan, Pilotage Tréso, CEP.
   Tout est scopé body.mob-hub : le rendu ordinateur ne bouge pas.
   ============================================================ */

/* --- Barre du haut : titre + boutons (dossier, MAJ, importer, vider) à la ligne --- */
body.mob-hub .bqm-topbar { flex-wrap: wrap; row-gap: 6px; }
body.mob-hub .bqm-topbar .topbar__title { font-size: 15px; }
body.mob-hub .bqm-topbar .btn { font-size: 12px; padding: 5px 9px; }

/* --- KPI : 2 colonnes compactes au lieu d'une rangée qui déborde --- */
body.mob-hub .bqm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.mob-hub .bqm-kpis .pdf-kpi { min-width: 0; padding: 10px 8px; }
body.mob-hub .bqm-kpis .pdf-kpi-val { font-size: 16px; }
body.mob-hub .bqm-kpis .pdf-kpi-lab { font-size: 10.5px; }

/* --- Filtre des opérations : champ de recherche pleine largeur --- */
body.mob-hub .bqm-filtres { width: 100%; }
body.mob-hub .bqm-filtres .data-period { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; }
body.mob-hub .bqm-filtres .input { min-width: 0 !important; width: 100%; flex: 1; }

/* --- Suggestions de charges récurrentes : lignes qui se replient proprement --- */
body.mob-hub .bq-sugg__row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
body.mob-hub .bq-sugg__lib { flex: 1 1 100%; }

/* --- Pilotage Tréso : paramètres en 1 colonne, cartes de projection empilées --- */
body.mob-hub .bqm-params { grid-template-columns: 1fr; gap: 8px; }
body.mob-hub .bqm-proj { grid-template-columns: 1fr; gap: 8px; }
body.mob-hub .bqm-proj .bq-proj-card { padding: 12px 14px; }
body.mob-hub .bqm-proj .bq-proj-card__v { font-size: 20px; }

/* --- Entête « 🧭 Pilotage » : contrôles (‹ › ↩️ 📊 📈) qui passent à la ligne sans déborder --- */
body.mob-hub .bqm-pilhead { row-gap: 6px; }
body.mob-hub .bqm-pilhead .bq-in-head { font-size: 12px; padding: 4px 6px; }
body.mob-hub .bqm-pilhead .bq-pil-hint[style*="margin-left:auto"] { margin-left: 0 !important; flex-basis: 100%; }

/* --- Grille de pilotage + tableaux CEP : cellules resserrées (défilement au doigt via .table-wrap) --- */
body.mob-hub .bq-pil { font-size: 12.5px; }
body.mob-hub .bq-pil .bq-in-cell { width: 92px; max-width: 92px; font-size: 12px; padding: 4px 6px; }
body.mob-hub .bq-pil .bq-in-sem { width: 84px; }
body.mob-hub .bq-pil .bq-in-pct { font-size: 12px; }
body.mob-hub .bq-cep { font-size: 12px; }
body.mob-hub .bq-cep .bq-cep-lib { min-width: 150px; }

/* --- Formulaire « ajouter un récurrent » : champs sur 2 colonnes pleine largeur --- */
body.mob-hub .bqm-recadd .input, body.mob-hub .bqm-recadd .btn { flex: 1 1 46%; max-width: none !important; min-width: 0; }
body.mob-hub .bqm-recadd #bq-nr-lib { flex: 1 1 100%; }

/* --- Confort : notes et intro un peu plus petites, graphiques moins hauts --- */
body.mob-hub .page .bq-note { font-size: 12px; }
body.mob-hub .page .bq-empty__txt { font-size: 14px; }

/* ================= BRIQUE : data ================= */
/* ==================== DATA / COMPARATIFS — mobile gérant (préfixe datm-) ====================
   Tout est scopé body.mob-hub .datm : la classe « datm » est posée sur les .page de js/data.js
   uniquement (hub Data + sous-applications). Le bureau et le briefing ne sont pas touchés. */

/* --- Défilement horizontal interne au doigt, jamais la page --- */
body.mob-hub .datm .table-wrap,
body.mob-hub .datm .bf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
body.mob-hub .datm .table-wrap > .table,
body.mob-hub .datm .bf-scroll > .table { min-width: max-content; }
body.mob-hub .datm .bf-table { font-size: 12px; }
body.mob-hub .datm .bf-table th, body.mob-hub .datm .bf-table td { padding: 5px 8px; white-space: nowrap; }
body.mob-hub .datm .data-grid td { max-width: 150px; }

/* --- Barre d'outils / filtres : retour à la ligne propre --- */
body.mob-hub .datm .data-toolbar { gap: 8px; row-gap: 8px; }
body.mob-hub .datm .data-toolbar .btn { flex: 0 0 auto; }
body.mob-hub .datm .data-period { flex-wrap: wrap; font-size: 12px; gap: 6px; min-width: 0; max-width: 100%; }
body.mob-hub .datm .data-period select { min-width: 0; max-width: 100%; flex: 1 1 auto; }
body.mob-hub .datm .data-period .input { max-width: 100%; }
body.mob-hub .datm .data-toolbar input[type="search"] { min-width: 0 !important; flex: 1 1 120px; width: auto; }
body.mob-hub .datm .data-toolbar input[type="date"] { max-width: 128px; }
body.mob-hub .datm .data-meta { font-size: 11px; flex-basis: 100%; }

/* --- Bandeau reporting --- */
body.mob-hub .datm .data-report-head { padding: 10px 12px; border-radius: 12px; }
body.mob-hub .datm .data-report-title { font-size: 15px; }
body.mob-hub .datm .data-report-sub { font-size: 11px; }

/* --- Rangées de cartes KPI / Top-Flop (bf2-top est une grille 2 colonnes sur bureau) :
       en flex qui replie, les petites cartes (min-width inline 110-240px) se posent 2 par ligne --- */
body.mob-hub .datm .bf2-top { display: flex; flex-wrap: wrap; }
body.mob-hub .datm .bf2-top > * { min-width: 0; }
body.mob-hub .datm .bf2-card { min-width: calc(50% - 8px) !important; }
body.mob-hub .datm .bf2-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* --- Hub : tuiles des sous-applications sur 2 colonnes --- */
body.mob-hub .datm .data-grid-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
body.mob-hub .datm .data-intro { font-size: 12.5px; }
body.mob-hub .datm .data-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* --- Sélecteur de colonnes : 2 colonnes au lieu d'une grille large --- */
body.mob-hub .datm .data-col-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 10px; }

/* --- Geomarketing codes postaux : carte au-dessus, tableau dessous --- */
body.mob-hub .datm .cp-split { grid-template-columns: 1fr !important; gap: 12px; }
body.mob-hub .datm .cp-split > * { min-width: 0; }
body.mob-hub .datm .cp-table-wrap { min-width: 0; }
body.mob-hub .datm #cp-map { height: 300px !important; }
body.mob-hub .datm .cp-legend { flex-wrap: wrap; gap: 6px; font-size: 11px; }

/* --- Vues PDF (contrôle de gestion, avoirs…) : KPI et graphiques qui replient --- */
body.mob-hub .datm .pdf-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
body.mob-hub .datm .pdf-kpi { flex: 1 1 calc(50% - 8px); min-width: 0; }
body.mob-hub .datm .cdg-charts { display: flex; flex-wrap: wrap; gap: 10px; }
body.mob-hub .datm .cdg-chart-card { flex: 1 1 100%; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.mob-hub .datm .pdf-iframe { max-width: 100%; }

/* --- Comparatifs Provins / Région / France : barres qui ne débordent pas --- */
body.mob-hub .datm .cmp-row { flex-wrap: wrap; }
body.mob-hub .datm .cmp-lbl { font-size: 11px; }

/* --- Garde-fou général de la brique : rien ne pousse la page en largeur --- */
body.mob-hub .datm { overflow-x: clip; }
body.mob-hub .datm .card { max-width: 100%; }

/* ================= BRIQUE : rh ================= */
/* ===================== RH HUB — mobile gérant (rhm-) ===================== */
/* Grille des tuiles RH (accueil du hub) : 1 colonne pleine largeur */
body.mob-hub .rh-grid { grid-template-columns: 1fr !important; display: grid; gap: 10px; }
body.mob-hub .rh-tile { width: 100%; min-width: 0; }
body.mob-hub .rh-tile__d { white-space: normal; }

/* Formulaire « Nouvel avertissement » : champs empilés en 1 colonne */
body.mob-hub .rh-form { display: grid; grid-template-columns: 1fr !important; gap: 10px; }
body.mob-hub .rh-form .field { grid-column: 1 / -1 !important; min-width: 0; }
body.mob-hub .rh-form .input, body.mob-hub .rh-form .select { width: 100%; max-width: 100%; }

/* Cartes convention : recherche pleine largeur, cartes sans débordement */
body.mob-hub #cc-search { max-width: 100% !important; }
body.mob-hub .rh-cc-card { min-width: 0; overflow: hidden; }
body.mob-hub .rh-cc-card .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sécurité : tout table-wrap du hub RH défile en interne, jamais la page */
body.mob-hub .page .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
body.mob-hub .page .table-wrap > .table { min-width: 480px; }

/* Registre des avertissements : boutons d'action compacts */
body.mob-hub .page .table .btn--sm { padding: 4px 8px; font-size: 12px; }

/* Aperçu / édition de la lettre d'avertissement : plein écran mobile */
body.mob-hub .rh-lettre-ov { padding: 8px; align-items: flex-start; }
body.mob-hub .rh-lettre-card { width: 100%; max-width: 100%; max-height: calc(100vh - 16px); margin: 0 auto; display: flex; flex-direction: column; }
body.mob-hub .rh-lettre-bar { flex-wrap: wrap; gap: 6px; }
body.mob-hub .rh-lettre-print { overflow-y: auto; padding: 14px 12px; font-size: 13px; }

/* Bouton retour + titres : respiration réduite sur petit écran */
body.mob-hub .rh-back { margin-bottom: 10px !important; }

/* ================= BRIQUE : conges+absences ================= */
/* ============================================================
   Congés & Absences côté GÉRANT sur téléphone (préfixe cgm-)
   js/conges.js + js/absences.js — v mobile : cartes par demande
   ============================================================ */
/* Barre de filtres : recherche pleine largeur, sélecteurs à la ligne */
body.mob-hub .cgm-filtres { display: flex; flex-wrap: wrap; gap: 10px; }
body.mob-hub .cgm-filtres .cg-search { width: 100%; }
body.mob-hub .cgm-filtres .tri-bar { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
body.mob-hub .cgm-filtres .select { flex: 1; max-width: none !important; }

/* Liste de cartes (remplace le tableau à 6 colonnes) */
body.mob-hub .cgm-liste { display: flex; flex-direction: column; gap: 12px; }
body.mob-hub .cgm-card { background: var(--card, #fff); border: 1px solid var(--border, #e3e6ef); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(20, 24, 40, .06); }

/* En-tête de carte : avatar + identité + pastille de statut */
body.mob-hub .cgm-hd { display: flex; align-items: center; gap: 10px; }
body.mob-hub .cgm-hd__id { flex: 1; min-width: 0; }
body.mob-hub .cgm-hd__id .cell-emp__name { white-space: normal; }
body.mob-hub .cgm-hd .pastille-statut { flex-shrink: 0; white-space: nowrap; }

/* Lignes label / valeur (Type, Période, Motif) */
body.mob-hub .cgm-lignes { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: 13px; }
body.mob-hub .cgm-lignes > span { color: var(--text-3, #8a90a4); }
body.mob-hub .cgm-lignes > b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
body.mob-hub .cgm-sub { color: var(--text-3, #8a90a4); font-weight: 500; font-size: 12px; }

/* Boutons d'action (mêmes data-attributes que le tableau) */
body.mob-hub .cgm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border, #e3e6ef); }
body.mob-hub .cgm-actions .btn { flex: 1 1 auto; justify-content: center; }

/* ================= BRIQUE : reglages ================= */
/* ============================================================
   RÉGLAGES + APP ACCÈS — lisibilité téléphone (gérant)
   Préfixe rgm- · scopé body.mob-hub (aucun effet sur ordinateur)
   ============================================================ */

/* --- Sections Réglages : blocs un peu plus compacts sur petit écran --- */
body.mob-hub .rgm-page .settings-block { padding: 14px 12px; }
body.mob-hub .rgm-page .settings-block__title { font-size: 15.5px; }
body.mob-hub .rgm-page .banner { align-items: flex-start; }

/* --- Bloc « Mon entreprise » : logos au-dessus, champs en dessous --- */
body.mob-hub .rgm-entreprise { flex-direction: column; }
body.mob-hub .rgm-entreprise > div { width: 100%; }
body.mob-hub .rgm-logos { flex-wrap: wrap; justify-content: center; row-gap: 12px; }

/* --- App Accès : cartes par collaborateur / compte externe --- */
body.mob-hub .rgm-acc-liste { display: flex; flex-direction: column; gap: 10px; }
body.mob-hub .rgm-acc-carte {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e3e8f0);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(20, 30, 60, 0.06);
}
body.mob-hub .rgm-acc-carte .cell-emp { margin-bottom: 6px; flex-wrap: wrap; }
body.mob-hub .rgm-acc-carte .cell-emp .acc-apercu-btn { margin-left: auto; }

/* Ligne label / valeur dans la carte */
body.mob-hub .rgm-acc-l {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 0; border-top: 1px dashed var(--border, #e3e8f0);
  min-width: 0;
}
body.mob-hub .rgm-acc-lbl {
  flex: none; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-3, #8a93a6);
}
body.mob-hub .rgm-acc-l .select { max-width: 210px; min-width: 0; }
body.mob-hub .rgm-acc-l > span { min-width: 0; overflow-wrap: anywhere; text-align: right; }

/* Dates début/fin côte à côte, pleine largeur restante */
body.mob-hub .rgm-acc-l .acc-dates { flex-direction: row; gap: 6px; flex: 1; justify-content: flex-end; min-width: 0; }
body.mob-hub .rgm-acc-l .acc-dates input { width: auto; max-width: 150px; flex: 1; min-width: 0; }

/* Boutons d'action de la carte : passent proprement à la ligne */
body.mob-hub .rgm-acc-btns {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 10px; margin-top: 2px; border-top: 1px dashed var(--border, #e3e8f0);
}
body.mob-hub .rgm-acc-btns .field__hint { flex-basis: 100%; margin-top: -4px; }

/* --- Matrices de droits (page Accès + modales) : colonnes serrées, défilement interne au doigt --- */
body.mob-hub .rgm-page .acc-matrix th,
body.mob-hub .rgm-page .acc-matrix td,
body.mob-hub .modal .acc-matrix th,
body.mob-hub .modal .acc-matrix td { font-size: 12px; padding: 7px 6px; }
body.mob-hub .rgm-page .table-wrap,
body.mob-hub .modal .table-wrap { -webkit-overflow-scrolling: touch; }

/* ================= BRIQUE : ndf+inventaire ================= */
/* ============================================================
   NDF gérant + Prime d'inventaire — adaptation mobile (préfixe ndfm-)
   Tout est scopé body.mob-hub : zéro impact sur le bureau.
   ============================================================ */

/* ---- Notes de frais : barre d'outils + segments qui passent à la ligne ---- */
body.mob-hub .ndf-new .btn__lbl { display: none; }               /* bouton topbar compact ("Nouvelle") */
body.mob-hub .seg { display: flex; flex-wrap: wrap; gap: 6px; }  /* onglets Mes notes / Reçues sur 1-2 lignes propres */
body.mob-hub .seg .seg-btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
body.mob-hub .ndf-deps-ttl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
body.mob-hub .ndf-detail .table-wrap { -webkit-overflow-scrolling: touch; }

/* ---- Prime d'inventaire : sélecteur de mois dans la page ---- */
body.mob-hub .ndfm-inv-mois { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
body.mob-hub .ndfm-inv-mois .input { width: 100%; }

/* En-tête (montant par défaut) : la ligne réglage s'empile proprement */
body.mob-hub .ndfm-inv-entete .regle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
body.mob-hub .ndfm-inv-entete .regle-row__label { flex: 1 1 100%; }

/* ---- Cartes salariés (remplacent le tableau) ---- */
body.mob-hub .ndfm-inv-cards { display: flex; flex-direction: column; gap: 8px; }
body.mob-hub .ndfm-inv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow-sm); opacity: .72; }
body.mob-hub .ndfm-inv-card.is-on { opacity: 1; border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
body.mob-hub .ndfm-inv-card__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.mob-hub .ndfm-inv-card__who { min-width: 0; }
body.mob-hub .ndfm-inv-card__nom { font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mob-hub .ndfm-inv-card__poste { font-size: 12px; color: var(--text-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mob-hub .ndfm-inv-card__ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
body.mob-hub .ndfm-inv-card__chk { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; }
body.mob-hub .ndfm-inv-card__chk input { width: 22px; height: 22px; accent-color: var(--primary); cursor: pointer; }
body.mob-hub .ndfm-inv-card__ctrl .suffix { flex: 0 0 auto; }
body.mob-hub .ndfm-inv-card__ctrl .inv-montant { max-width: 110px; text-align: right; }

/* Bandeau total du mois */
body.mob-hub .ndfm-inv-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-2); }
body.mob-hub .ndfm-inv-total b { font-size: 16px; color: var(--primary); font-variant-numeric: tabular-nums; }

/* ================= BRIQUE : employes+tableau ================= */
/* ============================================================
   MOBILE GÉRANT — Équipe / Fiches (employes.js) + Tableau de bord (tableau.js)
   Préfixe : empm- — tout est scopé body.mob-hub (le bureau ne bouge pas).
   ============================================================ */

/* ---------- ÉQUIPE / FICHES : barre du haut (tri, boutons) ---------- */
body.mob-hub .empm-top { flex-wrap: wrap; row-gap: 8px; }
body.mob-hub .empm-top .tri-bar { margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
body.mob-hub .empm-top .tri-bar .select { max-width: 150px !important; }
body.mob-hub .empm-top .seg { margin-left: 0 !important; }
body.mob-hub .empm-top .btn { padding: 7px 10px; font-size: 12.5px; }
body.mob-hub .empm-top .btn svg { width: 14px; height: 14px; }
body.mob-hub .empm-top .topbar__spacer { flex: 0 0 0; } /* les boutons s'enchaînent au lieu d'être poussés hors écran */

/* ---------- ÉQUIPE : cartes / organigramme ---------- */
/* Les cartes passent naturellement en 1 colonne (minmax 238px) : on resserre juste les espaces. */
body.mob-hub .empm-page .emp-cards { gap: 12px; }
body.mob-hub .empm-page .orga-tier__cards { gap: 12px; }
body.mob-hub .empm-page .orga-tier__cards .emp-card { max-width: 100%; }

/* ---------- FICHE EMPLOYÉ (pop-up) : plein écran téléphone ---------- */
body.mob-hub .fiche-ov { padding: 0; }
body.mob-hub .fiche-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
body.mob-hub .fiche-modal__bar { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; border-radius: 0; }
body.mob-hub .fiche-modal__bar .btn { padding: 7px 10px; font-size: 12.5px; }
body.mob-hub .fiche-modal .page { padding: 12px 12px 22px; }
body.mob-hub .fiche-modal .fiche-head { flex-wrap: wrap; }
/* Horaires type : les lignes de plages (2 heures + pause + poste) se replient au lieu de déborder */
body.mob-hub .fiche-modal .ht-plage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.mob-hub .fiche-modal .ht-plage .select { min-width: 0; }
body.mob-hub .fiche-modal .ht2-day__head { flex-wrap: wrap; gap: 6px; }
body.mob-hub .fiche-modal .solde-grid { gap: 8px; }

/* ---------- TABLEAU DE BORD : barre du haut (période + granularité) ---------- */
body.mob-hub .empm-tb-top { flex-wrap: wrap; row-gap: 8px; justify-content: center; }
body.mob-hub .empm-tb-top .week-block { width: 100%; order: 5; }
body.mob-hub .empm-tb-top .week-nav { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
body.mob-hub .empm-tb-top .seg--gran { flex-wrap: wrap; justify-content: center; max-width: 100%; }
body.mob-hub .empm-tb-top .seg--gran .seg-btn { padding: 5px 9px; font-size: 12px; }
body.mob-hub .empm-tb-top .topbar__spacer { flex: 0 0 0; }
body.mob-hub .empm-tb-top .btn { padding: 6px 9px; font-size: 12px; }

/* ---------- TABLEAU DE BORD : KPI en 2 colonnes ---------- */
body.mob-hub .empm-tb-top + .page .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
body.mob-hub .empm-tb-top + .page .kpi { padding: 10px 10px; gap: 8px; min-width: 0; }
body.mob-hub .empm-tb-top + .page .kpi__val { font-size: 17px; }
body.mob-hub .empm-tb-top + .page .kpi__label { font-size: 10.5px; line-height: 1.25; }
body.mob-hub .empm-tb-top + .page .kpi-link { width: 100%; min-width: 0; text-align: left; }

/* ---------- TABLEAU DE BORD : bloc Frais de personnel empilé ---------- */
body.mob-hub .empm-tb-top + .page .fp-hero__body { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 14px 16px; }
body.mob-hub .empm-tb-top + .page .fp-hero__main { font-size: 24px; }
body.mob-hub .empm-tb-top + .page .fp-hero__right { align-self: center; }
body.mob-hub .empm-tb-top + .page .fp-grid { grid-template-columns: 1fr; gap: 9px; }

/* ---------- TABLEAUX (heures/coûts + suivi des CP) : défilement interne au doigt ---------- */
body.mob-hub .empm-twrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0; max-width: 100%; }
body.mob-hub .empm-twrap .table { min-width: 620px; }
body.mob-hub .empm-twrap .table th,
body.mob-hub .empm-twrap .table td { white-space: nowrap; font-size: 12.5px; padding: 8px 10px; }
body.mob-hub .empm-twrap .cell-emp__name { font-size: 12.5px; }
body.mob-hub .empm-twrap .cell-emp__mail { font-size: 10.5px; }
body.mob-hub .empm-twrap .emp-hours-bar { max-width: 90px; }

/* ---------- Suivi des congés : l'en-tête (titre + pastille + bouton) se replie ---------- */
body.mob-hub .empm-cg-hd { flex-wrap: wrap; row-gap: 6px; }
body.mob-hub .empm-cg-hd .topbar__spacer { flex: 1 1 auto; }

/* ================= FINITIONS (passe de vérification) ================= */
/* Rapports (gérant) : le sélecteur de période passe à la ligne au lieu de dépasser de 2px */
body.mob-hub .rap-periode { flex-wrap: wrap; max-width: 100%; row-gap: 6px; }
body.mob-hub .rap-periode .input { max-width: 100% !important; min-width: 0; }