/* ════════════════════════════════════════════════════════════════════
   VEXIOM AUTO — Correctifs responsive mobile (v11.45.136)
   Chargé APRÈS style.css et gfp-premium.css.

   Pourquoi : la plupart des écrans construisent leurs grilles en style
   inline (style="grid-template-columns:repeat(4,1fr)" …). Les media
   queries de style.css ne peuvent pas écraser un style inline sans
   !important, et .rf-body a overflow-x:hidden : tout ce qui dépasse était
   donc coupé (colonnes écrasées, tableaux et boutons invisibles).
   Ici on cible ces styles inline par sélecteur d'attribut, uniquement
   à l'intérieur de l'application (.rf-app).
   ════════════════════════════════════════════════════════════════════ */

/* ── Tablette / grand téléphone (≤ 900px) ─────────────────────────── */
@media (max-width: 900px) {
  /* Mises en page "contenu + colonne latérale" → une seule colonne */
  .rf-app [style*="grid-template-columns:2fr 1fr"],
  .rf-app [style*="grid-template-columns:2.5fr 1fr"],
  .rf-app [style*="grid-template-columns:1fr 320px"],
  .rf-app [style*="grid-template-columns:1fr 260px"],
  .rf-app [style*="grid-template-columns:200px 1fr"],
  .rf-app [style*="grid-template-columns:1.2fr 2fr 1fr"],
  .rf-app .rf-split, .rf-app .rf-two-col {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Grilles de 4 à 8 colonnes → 2 colonnes (cartes KPI, stats…) */
  .rf-app [style*="grid-template-columns:repeat(4"],
  .rf-app [style*="grid-template-columns: repeat(4"],
  .rf-app [style*="grid-template-columns:repeat(5"],
  .rf-app [style*="grid-template-columns:repeat(6"],
  .rf-app [style*="grid-template-columns:repeat(8"],
  .rf-app [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── Téléphone (≤ 768px) ──────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 3 colonnes → 2 */
  .rf-app [style*="grid-template-columns:repeat(3"],
  .rf-app [style*="grid-template-columns: repeat(3"],
  .rf-app [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Lignes de formulaire/tableau "3fr 1fr 1fr auto" → empilées */
  .rf-app [style*="grid-template-columns:3fr 1fr 1fr auto"],
  .rf-app [style*="grid-template-columns:2fr 1fr 1fr auto"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  /* Les enfants d'une grille ne doivent jamais forcer sa largeur */
  .rf-app [style*="display:grid"] > *,
  .rf-app [style*="display: grid"] > * { min-width: 0; }

  /* Grilles auto-fill avec minimum trop large pour un écran de 360px */
  .rf-app [style*="minmax(280px"],
  .rf-app [style*="minmax(300px"],
  .rf-app [style*="minmax(360px"],
  .rf-app [style*="minmax(260px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Calendriers / plannings 7 jours : on garde 7 colonnes mais on
     autorise le défilement horizontal au lieu de couper le contenu */
  .rf-app [style*="grid-template-columns:repeat(7"],
  .rf-app [style*="grid-template-columns:150px repeat(7"],
  .rf-app [style*="grid-template-columns:130px repeat(6"] {
    min-width: 640px;
  }
  .rf-app :has(> [style*="grid-template-columns:repeat(7"]):not(.rf-body):not(.rf-main),
  .rf-app :has(> [style*="grid-template-columns:150px repeat(7"]):not(.rf-body):not(.rf-main),
  .rf-app :has(> [style*="grid-template-columns:130px repeat(6"]):not(.rf-body):not(.rf-main) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Largeurs fixes inline (modales, panneaux, champs) → jamais plus
     larges que l'écran */
  .rf-app [style*="width:4"],  .rf-app [style*="width:5"],
  .rf-app [style*="width:6"],  .rf-app [style*="width:7"],
  .rf-app [style*="width:8"],  .rf-app [style*="width:9"],
  .rf-app [style*="width: 4"], .rf-app [style*="width: 5"] {
    max-width: 100% !important;
  }
  .rf-app [style*="min-width:500px"], .rf-app [style*="min-width:600px"],
  .rf-app [style*="min-width:640px"], .rf-app [style*="min-width:700px"],
  .rf-app [style*="min-width:769px"], .rf-app [style*="min-width:900px"] {
    min-width: 0 !important;
  }
  /* …sauf les tableaux, qui défilent dans leur conteneur (voir plus bas) */
  .rf-app table[style*="min-width"] { min-width: 600px !important; }

  /* Panneaux flottants (assistant IA, notifications) à 340px fixes */
  #rf-ai-panel {
    left: 8px !important; right: 8px !important;
    width: auto !important; max-width: none !important;
  }

  /* Tableaux : défilement horizontal au lieu d'être coupés par
     .rf-body{overflow-x:hidden}. Les tableaux .rf-table-responsive
     (affichage en cartes, défini dans style.css) ne sont pas touchés. */
  .rf-app .rf-card-body:has(> table),
  .rf-app .rf-table-wrap,
  .rf-app .rf-card > div:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rf-app .rf-table td, .rf-app .rf-table th { white-space: nowrap; }

  /* Médias */
  .rf-app img, .rf-app video, .rf-app canvas, .rf-app iframe { max-width: 100%; height: auto; }

  /* Barres d'actions / en-têtes en flex qui débordent → retour à la ligne */
  .rf-app .rf-header-actions,
  .rf-app .rf-card-head,
  .rf-app [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 8px;
  }
  .rf-app .rf-header-actions .rf-btn { flex: 0 0 auto; }

  /* Champs : 16px minimum pour éviter le zoom automatique d'iOS au focus */
  .rf-app input:not([type=checkbox]):not([type=radio]),
  .rf-app select, .rf-app textarea { font-size: 16px !important; max-width: 100%; }

  /* Cibles tactiles */
  .rf-app .rf-btn { min-height: 40px; }
  .rf-app .rf-btn-xs { min-height: 32px; }

  /* Longs textes (e-mails, n° de châssis, URL) qui cassent la largeur */
  .rf-app .rf-card, .rf-app .rf-card-body { overflow-wrap: anywhere; }
}

/* ── Petit téléphone (≤ 600px) ────────────────────────────────────── */
@media (max-width: 600px) {
  /* Formulaires en 2 colonnes → 1 colonne (83 occurrences dans le code) */
  .rf-app [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  .rf-app [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  .rf-app [style*="grid-template-columns:repeat(2,1fr)"]:not(.rf-kpi-grid):not([class*="kpi"]),
  .rf-app [style*="grid-template-columns:3fr 1fr 1fr auto"],
  .rf-app [style*="grid-template-columns:2fr 1fr 1fr auto"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Modales plein écran */
  .rf-app [style*="position:fixed"][style*="max-width"] > div[style*="max-width"],
  .rf-modal, .rf-modal-content, .rf-modal-box {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
  }
}