/* ============================================================================
 * FlowYa Cockpit — Correctifs mobile  (refonte 2026-05-22)
 *
 * POURQUOI CE FICHIER A ÉTÉ REFAIT
 * --------------------------------
 * L'ancienne version forçait, sous 768px :
 *     .fi-sidebar { position: relative !important;
 *                   transform: translateX(0) !important;
 *                   width: min(88vw, 22rem) !important; }
 * Conséquence : la barre latérale restait DANS le flux du document, large de
 * ~88vw, et repoussait le contenu hors de l'écran  ->  cockpit inexploitable
 * sur iPhone (bug signalé par Hubert, mai 2026).
 *
 * Filament v3 gère NATIVEMENT la sidebar mobile en slide-over :
 *   - position: fixed + translateX(-100%)       -> cachée hors écran
 *   - translateX(0) à l'ouverture (hamburger)   -> overlay PAR-DESSUS le contenu
 * On ne surcharge donc plus jamais position / transform / largeur de base de
 * .fi-sidebar : on laisse Filament faire son travail.
 *
 * RÈGLE D'OR : toutes les règles ci-dessous sont bornées < 1024px
 * (= breakpoint `lg` de Filament). AUCUNE règle desktop  ->  zéro régression
 * sur l'affichage desktop.
 * ========================================================================= */

/* ── Téléphones (< 768px) : topbar minimaliste ─────────────────────────────
 * Filament topbar nav : flex h-16 gap-x-4 px-4.
 * Avec hamburger (~40px) + user-menu (~40px) + badges (flex-shrink:0) + gaps,
 * le titre (#fy-tb-title-area, flex:1) était réduit à ~4px → header illisible.
 * Solution : réduire l'espacement + ne garder que 3 éléments dans la barre. */
@media (max-width: 767.98px) {
  /* Espacement réduit — récupère ~32px sur la barre */
  header.fi-topbar nav {
    gap: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* On ne conserve que : 📥 demandes urgentes, 📅 RDV du jour, 🔔 cloche.
   * Tous les autres badges passent en display:none sur téléphone.
   * Note : la plupart sont déjà cachés si leur valeur est 0 (inline PHP style) ;
   * ces règles assurent le masquage même si la valeur est non-nulle. */
  #fy-tb-cal-classify,
  #fy-tb-missions,
  #fy-tb-msg,
  #fy-tb-pay,
  #fy-tb-arb,
  #fy-tb-leads,
  #fy-tb-tasks,
  #fy-tb-slots-req,
  #fy-tb-next,
  #fy-tb-rev,
  #fy-tb-slots {
    display: none !important;
  }

  /* Bouton ⌘K — inutile sur téléphone (pas de clavier physique) */
  #fy-cockpit-topbar-inline > button:not(#fy-notif-bell) {
    display: none !important;
  }

  /* Le conteneur de badges peut maintenant se loger sans déborder :
   * contenu résiduel ≈ 50–175px selon présence du badge 📥. */
  #fy-cockpit-topbar-inline {
    flex-shrink: 1 !important;
    max-width: none !important;
    overflow-x: visible !important;
    gap: 4px !important;
  }

  /* Le Max FAB ne doit pas masquer le contenu bas de page sur petit écran. */
  #fy-max-fab {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
  }
}

/* ── Tablettes (768px – 1023px) : badges défilables horizontalement ─────────
 * La rangée #fy-cockpit-topbar-inline contient une douzaine de pastilles
 * d'alerte. Sur tablette on la plafonne et on la rend défilable au lieu de
 * laisser la barre du haut déborder. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #fy-cockpit-topbar-inline {
    max-width: 60vw !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #fy-cockpit-topbar-inline::-webkit-scrollbar { display: none; }

  /* Le bloc titre custom garde un minimum lisible. */
  #fy-tb-title-area { min-width: 4.5rem !important; }
}

/* ── Slide-over sidebar — plafond de largeur (téléphone + tablette) ─────────
 * On agit UNIQUEMENT sur l'état ouvert (.fi-sidebar-open) et UNIQUEMENT sur
 * la largeur : ni position, ni transform. La sidebar reste un overlay natif
 * et reste hors écran tant qu'on n'a pas tapé le hamburger. */
@media (max-width: 1023.98px) {
  .fi-sidebar.fi-sidebar-open {
    width: min(20rem, 86vw) !important;
  }
}

/* ── Tables scrollables horizontalement sur mobile ──────────────────────────
 * Les tables Filament avec beaucoup de colonnes dépassent la largeur de l'écran.
 * On enveloppe dans un conteneur scrollable sans casser le layout global. */
@media (max-width: 1023.98px) {
  .fi-ta-ctn {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .fi-ta-ctn table,
  .fi-ta-table {
    min-width: 0;
  }
  /* Réduction de la densité sur petit écran */
  .fi-ta-cell {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ── Contenu principal — pleine largeur sans débordement ────────────────────
 * Sur mobile la sidebar est fixed (hors flux). Le contenu doit prendre 100%.
 * On annule toute marge/offset calculé pour le desktop. */
@media (max-width: 1023.98px) {
  .fi-main-ctn {
    margin-inline-start: 0 !important;
    inline-size: 100% !important;
    padding-inline-start: 0 !important;
    min-width: 0 !important;
  }
}

/* ── Page headers & widgets — densité réduite ───────────────────────────────
 * Filament v3 garde les paddings desktop sur mobile. On les réduit. */
@media (max-width: 767.98px) {
  /* Header de page */
  .fi-page-header {
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important;
  }
  .fi-header-heading {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
  }

  /* Sections & cards */
  .fi-section {
    border-radius: 0.75rem !important;
  }
  .fi-section-content {
    padding: 0.75rem !important;
  }

  /* Stats overview : 2 colonnes max sur téléphone */
  .fi-wi-stats-overview-stat {
    min-width: 0 !important;
  }

  /* Formulaires : réduire gap */
  .fi-fo-field-wrp {
    margin-bottom: 0.75rem !important;
  }

  /* Boutons actions dans les pages : wrap si trop large */
  .fi-actions {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .fi-btn {
    font-size: 0.8125rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
  }
}