/* ════════════════════════════════════════════════════════════════════════ */
/*  MOBILE.CSS — Couche responsive globale design-v1                       */
/*  Stratégie : kill switch agressif sur tout grid multi-col + min-width:0 */
/*  systémique pour empêcher tout débordement horizontal sur mobile.       */
/*  Cible inline-styles React via [style*="..."] + catch-all.              */
/* ════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────── */
/*  Tablette + mobile (≤ 1024px) — légère optimisation                     */
/* ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Toutes les images, vidéos, iframes, canvas → max-width 100% */
  img, video, iframe, canvas, svg {
    max-width: 100%;
    height: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Mobile (≤ 768px) — adaptation complète                                  */
/* ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ───────── 1. Anti-overflow global ───────── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  body { font-size: 13px; }

  /* Toutes les boîtes : ne jamais dépasser le viewport */
  *, *::before, *::after {
    max-width: 100vw;
  }

  /* min-width: 0 systémique sur tout descendant de main → permet aux flex/grid items de shrink */
  main *,
  main *::before,
  main *::after {
    min-width: 0;
  }

  /* main lui-même contient et clippe */
  main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 12px !important;
  }

  /* ───────── 2. Grid catch-all : tout multi-col → 1fr ───────── */
  /* Tout style inline avec grid-template-columns devient 1-col, SAUF :
     - auto-fill/auto-fit (responsive grids volontaires)
     - patterns "icône + label" (auto X 1fr, X auto, etc.) */
  [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]):not([style*=" 14px 1fr"]):not([style*=":14px 1fr"]):not([style*=" 16px 1fr"]):not([style*=" 18px 1fr"]):not([style*=" 20px 1fr"]):not([style*=" 24px 1fr"]):not([style*=" 30px 1fr"]):not([style*=" auto 1fr"]):not([style*=":auto 1fr"]):not([style*=" 1fr auto"]):not([style*=":1fr auto"]):not([style*=" 6px 1fr auto"]):not([style*=" auto 1fr auto"]):not([style*=":auto 1fr auto"]) {
    grid-template-columns: 1fr !important;
  }

  /* ───────── 3. Topbar (header sticky 52px) ───────── */
  header[style*="height: 52px"],
  header[style*="height:52px"] {
    padding: 6px 10px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden;
  }

  /* breadcrumb / temps live cachés sur mobile */
  header > div[style*="flex: 1"] { flex: 1 1 auto; }

  /* ───────── 4. Sections / pages : padding réduit ───────── */
  div[style*="padding: 24px"]:not([role="dialog"]):not([style*="padding: 24px 24px 80px"]) {
    padding: 14px !important;
  }
  div[style*="padding: 32px"]:not([role="dialog"]) {
    padding: 16px !important;
  }
  div[style*="padding: 40px"]:not([role="dialog"]) {
    padding: 18px !important;
  }
  div[style*="padding: 48px"]:not([role="dialog"]) {
    padding: 20px !important;
  }
  /* Pages avec maxWidth + margin auto + padding-x (cas dashboard, crm, etc.) */
  div[style*="maxWidth: 1680"],
  div[style*="max-width: 1680"],
  div[style*="maxWidth: 1400"],
  div[style*="max-width: 1400"],
  div[style*="maxWidth: 1200"],
  div[style*="max-width: 1200"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 60px !important;
  }

  /* ───────── 5. Modals / drawers / overlays → fullscreen ───────── */
  div[role="dialog"],
  div[style*="position: fixed"][style*="zIndex: 100"][style*="background"],
  div[style*="position: fixed"][style*="z-index: 100"][style*="background"] {
    padding: 0 !important;
  }
  div[role="dialog"] > div,
  div[style*="position: fixed"][style*="inset: 0"][style*="zIndex"] > div:not([style*="position: absolute"]) {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Drawers latéraux (Copilot, Notifications) → 100vw */
  div[style*="position: fixed"][style*="right: 0"][style*="width: 420"]:not([style*="width: 0px"]),
  div[style*="position: fixed"][style*="right: 0"][style*="width: 360"] {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  div[style*="position: fixed"][style*="right: 0"][style*="width: 420"] > div[style*="width: 420"] {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  /* NotifPanel absolute */
  div[style*="position: absolute"][style*="right: 0"][style*="width: 360"],
  div[style*="position: absolute"][style*="right:0"][style*="width:360"] {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    right: 8px !important;
  }

  /* ───────── 6. Tableaux : scroll horizontal natif ───────── */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Wrappers de tableaux : scroll si large */
  div[style*="overflowX"]:not([style*="hidden"]),
  div[style*="overflow-x"]:not([style*="hidden"]) {
    -webkit-overflow-scrolling: touch;
  }

  /* ───────── 7. Onglets / tablists : scroll horizontal ───────── */
  nav[role="tablist"],
  div[role="tablist"],
  div[style*="display: flex"][style*="border-bottom"]:has(button) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  nav[role="tablist"]::-webkit-scrollbar,
  div[role="tablist"]::-webkit-scrollbar { display: none; }

  /* ───────── 8. Inputs / boutons : taille tactile + anti-zoom iOS ───────── */
  input[type="text"], input[type="email"], input[type="number"],
  input[type="tel"], input[type="search"], input[type="password"],
  input[type="url"], input[type="date"], input[type="datetime-local"],
  textarea, select, .fi, .fs {
    min-height: 40px !important;
    font-size: 16px !important;  /* iOS Safari anti zoom-on-focus */
    padding: 10px 12px !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  textarea { min-height: 80px !important; }

  /* Boutons : min 40px de haut sauf mini-actions explicites */
  button:not([style*="width: 22px"]):not([style*="width: 24px"]):not([style*="width: 26px"]):not([style*="width: 28px"]):not([style*="width: 32px"]):not([style*="width: 36px"]):not([style*="height: 22px"]):not([style*="height: 24px"]):not([style*="height: 26px"]):not([style*="height: 28px"]):not([style*="height: 32px"]):not([style*="height: 36px"]) {
    min-height: 40px;
  }

  /* ───────── 9. Typography : tailles réduites ───────── */
  [style*="fontSize: 40"], [style*="font-size: 40"] { font-size: 26px !important; }
  [style*="fontSize: 36"], [style*="font-size: 36"] { font-size: 24px !important; }
  [style*="fontSize: 32"], [style*="font-size: 32"] { font-size: 22px !important; }
  [style*="fontSize: 28"], [style*="font-size: 28"] { font-size: 20px !important; }
  [style*="fontSize: 24"], [style*="font-size: 24"] { font-size: 18px !important; }
  [style*="fontSize: 22"], [style*="font-size: 22"] { font-size: 17px !important; }
  [style*="fontSize: 20"], [style*="font-size: 20"] { font-size: 16px !important; }

  /* ───────── 10. Flex containers : wrap par défaut ───────── */
  /* Tout flex row sans flex-wrap explicite → wrap pour ne pas déborder */
  div[style*="display: flex"]:not([style*="flexDirection: column"]):not([style*="flex-direction: column"]):not([role="tablist"]):not([style*="overflowX"]):not([style*="overflow-x"]) {
    flex-wrap: wrap;
  }
  /* Mais garder nowrap sur les rows boutons d'actions header */
  header[style*="height: 52px"] > * {
    flex-wrap: nowrap !important;
  }

  /* ───────── 11. KPI / stats / cards : éviter overflow ───────── */
  /* KPI grids (souvent 4-col en desktop) déjà collapsées par catch-all */

  /* ───────── 12. Sidebar drawer mobile (depuis shell.jsx) ───────── */
  /* Géré directement dans shell.jsx via isMobile flag */

  /* ───────── 13. Command palette ───────── */
  div[style*="position: fixed"][style*="zIndex: 1000"] > div,
  div[style*="position: fixed"][style*="z-index: 1000"] > div {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 6vh auto !important;
  }

  /* ───────── 14. Pagination boutons ───────── */
  div[style*="display: flex"][style*="gap"]:has(> button + button + button) {
    flex-wrap: wrap;
    gap: 4px !important;
  }

  /* ───────── 15. Calendrier 7-col : garder le grid mais scroll horizontal ───────── */
  /* Le calendrier hebdomadaire/mensuel a besoin de garder ses 7 colonnes,
     sinon il devient illisible. On force juste un min-width pour permettre le scroll. */
  div[style*="grid-template-columns: repeat(7"],
  div[style*="grid-template-columns:repeat(7"] {
    grid-template-columns: repeat(7, minmax(72px, 1fr)) !important;
    overflow-x: visible !important;
  }
  /* Wrapper du calendrier doit scroller horizontalement */
  div:has(> div[style*="grid-template-columns: repeat(7"]),
  div:has(> div[style*="grid-template-columns:repeat(7"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ───────── 16. Kanban CRM (colonnes par stage) → scroll horizontal ───────── */
  div[style*="grid-template-columns: repeat("][style*="280px"],
  div[style*="grid-template-columns:repeat("][style*="280px"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ───────── 17. Toaster en bas plutôt qu'à droite sur mobile ───────── */
  div[style*="position: fixed"][style*="bottom: 24"][style*="right: 24"] {
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Très petit (≤ 480px) — réglages additionnels                            */
/* ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  main { padding: 10px !important; }

  div[style*="padding: 16px"]:not([role="dialog"]) {
    padding: 10px !important;
  }
  div[style*="padding: 14px"]:not([role="dialog"]) {
    padding: 10px !important;
  }

  /* Cards arrondis réduits */
  div[style*="border-radius: 12"] {
    border-radius: 8px !important;
  }

  /* Boutons CTA pleine largeur */
  button[style*="padding: 12px 24px"],
  button[style*="padding: 14px 28px"] {
    width: 100%;
  }

  /* Headers compactés */
  [style*="fontSize: 18"], [style*="font-size: 18"] { font-size: 15px !important; }
  [style*="fontSize: 16"], [style*="font-size: 16"] { font-size: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Notch / Safe area iPhone                                                */
/* ═══════════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    header[style*="position: sticky"],
    header[style*="position:sticky"] {
      padding-top: max(8px, env(safe-area-inset-top)) !important;
    }
    body { padding-bottom: env(safe-area-inset-bottom); }
    /* Sidebar drawer mobile : safe-area top */
    aside[style*="position: fixed"] {
      padding-top: max(18px, env(safe-area-inset-top)) !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  PWA standalone mode                                                     */
/* ═══════════════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: contain; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Tactile : pas de hover persistant                                       */
/* ═══════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  button:hover { transform: none !important; }
  .card-hover:hover { transform: none !important; }
  a:hover { text-decoration: inherit; }
}