/* ═══════════════════════════════════════════════════════════════════════════
   FISCUS TN — MOBILE OPTIMIZE (smartphones & tablettes)
   Chargé globalement APRÈS style.css / dark-mode-fix.css / shell styles.
   Objectifs :
   • Touch targets ≥ 44px (Apple HIG / Material)
   • Pas de zoom auto iOS sur les inputs (font-size ≥ 16px)
   • Tableaux scrollables horizontalement (.fx-table-scroll — voir mobile-optimize.js)
   • Grilles / stats / cartes → 1-2 colonnes selon breakpoint
   • Modals plein écran mobile, safe-areas iOS (notch / home indicator)
   • Pas de débordement horizontal (overflow-x)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── BASE GLOBALE ─────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Wrapper injecté par mobile-optimize.js autour des <table> */
.fx-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: 12px;
  scrollbar-width: thin;
}
.fx-table-scroll > table { min-width: 560px; margin: 0; }

/* ─── TABLETTE (≤ 1024px) ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Grilles génériques du projet → 2 colonnes max */
  .stats-grid, .kpi-grid, .metrics-grid,
  .dashboard-grid, .dashboard-grid-3, .dashboard-grid-4,
  .cards-grid, .modules-grid, .grid-3, .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .dashboard-grid-2 { grid-template-columns: 1fr !important; }

  /* Espacement des contenus */
  .fx-content, .page-content, .main-content > .content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ─── SMARTPHONE (≤ 720px) ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Toutes les grilles → 1 colonne */
  .stats-grid, .kpi-grid, .metrics-grid,
  .dashboard-grid, .dashboard-grid-2, .dashboard-grid-3, .dashboard-grid-4,
  .cards-grid, .modules-grid, .grid-2, .grid-3, .grid-4,
  .form-row, .form-grid, .two-cols, .three-cols,
  .simulator-layout, .sim-grid, .result-grid,
  .profile-grid, .settings-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Flex rows qui débordent → wrap */
  .toolbar, .actions-row, .filter-bar, .btn-row, .quick-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Titres et paddings compactés */
  h1, .page-title { font-size: 1.35rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.12rem !important; }
  .fx-content, .page-content { padding: 12px 12px 90px !important; }
  .card, .panel, .fx-card, .premium-card { padding: 14px !important; border-radius: 14px !important; }

  /* ── Touch targets ≥ 44px ── */
  button, .btn, .fx-btn, a.btn, [role="button"],
  input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  .fx-btn, .btn { padding-top: 10px; padding-bottom: 10px; }

  /* ── Inputs : pas de zoom auto iOS (≥ 16px) ── */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea { min-height: 88px; }
  label { font-size: 0.82rem; }

  /* ── Modals plein écran ── */
  .modal, .modal-content, .fx-modal, .dialog, .popup-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
  }
  .modal-overlay .modal, .modal-backdrop .modal-content {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
  }

  /* ── Tableaux : cellules compactées ── */
  table th, table td {
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
  }

  /* Badges / chips lisibles */
  .badge, .chip, .tag { font-size: 0.68rem !important; }

  /* Nav horizontales scrollables (onglets) */
  .tabs, .tab-bar, .nav-tabs, .pill-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .tab-bar::-webkit-scrollbar { display: none; }

  /* Footer / éléments fixes : safe-area iOS */
  .fx-bottombar, .bottom-nav, .fixed-footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Widget Mr.Fiscus : ne pas couvrir la bottom bar */
  .mrf-widget { bottom: calc(var(--fx-bottombar-h, 64px) + 14px) !important; right: 10px !important; }

  /* Charts : hauteur raisonnable */
  canvas { max-height: 300px !important; }
}

/* ─── TRÈS PETITS ÉCRANS (≤ 380px) ─────────────────────────────────────────── */
@media (max-width: 380px) {
  h1, .page-title { font-size: 1.2rem !important; }
  .fx-content, .page-content { padding: 10px 10px 90px !important; }
  .card, .panel, .fx-card { padding: 12px !important; }
}

/* ─── PAYSAGE MOBILE (hauteur réduite) ─────────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
  .fx-bottombar { display: none !important; }
  .fx-content, .page-content { padding-bottom: 24px !important; }
}

/* ─── ACCESSIBILITÉ : réduction de mouvement ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}