/* ══════════════════════════════════════════════════════════
   Le Hub — mobile.css : règles responsive transverses à tous
   les modules (chargée en dernier, prend le pas sur les styles
   inline). Tokens du thème uniquement, jamais de couleur en dur.
   ══════════════════════════════════════════════════════════ */

/* ── Tablette et moins ─────────────────────────────────── */
@media (max-width: 900px) {
  /* Jamais de défilement horizontal de la page : c'est le contenu qui défile */
  #panelArea, .panel { overflow-x: hidden; }

  /* Tables : défilement horizontal interne, jamais de débordement de page */
  .panel table:not(.planning-table):not(.pe-table):not(.pl-cpt-table):not(.ic-table) {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .planning-grid, .pe-card, .ic-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Deux colonnes → une (grilles nommées des modules) */
  .pe-grid2, .ic-grid, .pia-body, .st-cols, .conges-layout, .dash-grid,
  .crm-layout, .ged-layout, .flotte-layout, .coffre-layout, .avis-layout, .sites-layout,
  .flotte-grid, .fl-grid, .ac-grid { grid-template-columns: 1fr !important; }
  .st-wrap { flex-direction: column; }
  .st-side { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .st-side-title { width: 100%; }
  .st-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }

  /* En-têtes sombres et barres d'outils : les boutons passent à la ligne */
  .panel-dark-head, .ac-toolbar, .pe-toolbar, .pia-actions, .caisse-head-actions { flex-wrap: wrap !important; }
  .panel-dark-head > div:first-child { flex-shrink: 0; }

  /* Images et signatures */
  .panel img, .panel canvas, .panel iframe { max-width: 100%; }
}

/* ── Téléphone ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Grilles définies en style inline (KPI, formulaires, cartes) : une colonne,
     sauf les grilles pensées pour le mobile */
  .panel [style*="grid-template-columns"]:not([style*="repeat(7"]):not([style*="repeat(6"]):not([style*="repeat(5"]):not([style*="repeat(auto"]):not(.pia-bes-row):not(.pl-weeks):not(.obj-day-grid):not(.hub-app-grid):not(.pe-facts):not(.pe-kpis):not(.pia-kpis):not(.ic-kpis):not(.pl-kpis):not(.st-kpis):not(.dash-stats):not(.kpi-grid) {
    grid-template-columns: 1fr !important;
  }
  /* Rangées de chiffres : deux colonnes */
  .pe-kpis, .pia-kpis, .ic-kpis, .pl-kpis, .st-kpis, .pe-facts { grid-template-columns: 1fr 1fr !important; }
  /* Rangées de boutons ou de champs en flex inline : retour à la ligne */
  .panel [style*="display:flex"]:not(.pe-item):not(.ps-row):not(.pia-step):not(.pe-row):not(.pia-mcard-head) { flex-wrap: wrap; }
  /* Champs avec largeur imposée en inline */
  .panel input[style*="width"], .panel select[style*="width"], .panel textarea[style*="width"] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .panel input[style*="min-width"], .panel select[style*="min-width"] { min-width: 0 !important; }
  .ac-input, .pe-toolbar .ac-input { min-width: 0; }

  /* Toutes les familles de modales : feuille en bas d'écran, pleine largeur */
  .modal-back, .ac-overlay, .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal, .ac-modal, .modal-box, .bc-recu-modal, .flm-modal {
    width: 100% !important; max-width: 100% !important; max-height: 92dvh !important;
    border-radius: 20px 20px 0 0 !important; padding-left: 16px !important; padding-right: 16px !important;
  }
  .ac-form-row, .fg-row { grid-template-columns: 1fr !important; }

  /* Onglets et sous-navigations : défilement horizontal sans barre */
  .pe-tabs, .admin-tabs, .cp-tabs, .ac-views, .settings-tabs-bar, .caisse-subnav, .avis-tabs, .crm-tabs, .ged-tabs {
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pe-tabs::-webkit-scrollbar, .admin-tabs::-webkit-scrollbar, .ac-views::-webkit-scrollbar { display: none; }
  .pe-tab, .ac-view-btn { flex-shrink: 0; }

  /* Bandeaux « Le Moule » des modules : plus compacts */
  .pe-head, .pia-head { padding: 16px 16px 44px !important; border-radius: .8rem !important; }
  .pe-head-title, .pia-title { font-size: 1.3rem !important; }
  .pe-kpis, .pia-kpis { margin: -28px 8px 0 !important; gap: 8px !important; }
  .pe-tab-body, .pe-toolbar, .pe-alerts { padding-left: 8px !important; padding-right: 8px !important; margin-left: 0 !important; margin-right: 0 !important; }
  .pe-card, .pia-card, .ic-card { padding: 12px !important; }

  /* Studio de com' / actions : cartes en une colonne, kanban en pile */
  .ac-kanban { grid-template-columns: 1fr !important; }
  .st-kpis { grid-template-columns: 1fr 1fr !important; }

  /* Boutons d'action inline : lisibles au doigt */
  .panel button, .panel .btn, .panel .ac-btn { min-height: 34px; }
  .panel .ac-btn { padding: .4rem .7rem; }

  /* Dock en bas : le contenu ne passe pas dessous */
  #panelArea { padding-bottom: 96px !important; }
}

/* ── Calendriers (objectifs, congés…) : 7 colonnes compactes sur téléphone ── */
@media (max-width: 640px) {
  .panel [style*="repeat(7"] { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; font-size: .74rem; }
  .panel [style*="repeat(7"] > * { min-width: 0; padding-left: 2px !important; padding-right: 2px !important; overflow: hidden; }
  .panel [style*="repeat(7"] input { padding-left: 2px !important; padding-right: 2px !important; text-align: center; font-size: 14px !important; }
}