/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FULL-WIDTH FIX — v2 (production)
   ───────────────────────────────────────────────────────────────────────
   Problem: On phones (≤768px), page content was constrained to a narrow
   column with empty space on the right instead of filling the viewport.

   Root cause: .fx-main has max-width: var(--content-max) = 1680px at base.
   The existing 1024px and 768px media queries set width:100% / max-width:100%
   on .fx-main itself, but NESTED CHILD ELEMENTS (.fx-hero, .hero-ribbon,
   .fx-section, .fx-footer .inner, .fx-page-header, .fx-hero .subtitle, etc.)
   either inherit the constraint via max-width: var(--content-max) directly
   or have their own max-width that was never overridden for mobile.

   Fix: At ≤768px, force EVERY container in the tree to width:100% +
   max-width:100% + box-sizing:border-box. Desktop (≥769px) is UNTOUCHED.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. Root: html + body fill the viewport ── */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* ── 2. App shell: single column, no sidebar grid ── */
  .fx-app, .premium-app, .ent-app, .app-shell, .dz-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas: "header" "main" !important;
  }

  /* ── 3. Main content area: full width, 16px gutters ── */
  .fx-main, .pm-main, .main-content, .dz-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ── 4. All section-level containers: full width ── */
  .fx-hero, .pm-hero, .hero, .jumbotron, .banner,
  .fx-section, .pm-section, .section,
  .hero-ribbon,
  .fx-ticker-bar,
  .fx-page-header, .pm-page-header, .page-header,
  .fx-footer, .pm-footer, .site-footer,
  .fx-card, .pm-card, .card, .panel,
  .fx-grid, .pm-grid, .grid,
  .fx-kpi-grid, .pm-kpi-grid, .kpi-grid, .stats-grid,
  .fx-feature, .feature-card,
  .fx-pricing, .pm-pricing, .pricing-card,
  .auth-card, .auth-wrap,
  .fx-modal, .pm-modal, .modal,
  .table-wrap, .fx-table, .pm-table,
  .fx-tabs, .pm-tabs, .tabs,
  .fx-form, .pm-form, .formgrid, .form-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── 5. Hero subtitle: remove the 580px max-width ── */
  .fx-hero .subtitle, .pm-hero .subtitle, .hero p,
  .fx-hero .badge, .pm-hero .badge, .hero .badge,
  .fx-hero h1, .pm-hero h1, .hero h1,
  .fx-hero h2, .pm-hero h2, .hero h2,
  .fx-hero div, .pm-hero div, .hero div {
    max-width: 100% !important;
  }

  /* ── 6. Footer inner + copyright + risk: full width ── */
  .fx-footer .inner, .pm-footer .inner, .footer-inner,
  .fx-footer .copyright, .pm-footer .copyright, .site-footer .copyright,
  .fx-footer .footer-risk, .pm-footer .footer-risk, .site-footer .footer-risk {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* ── 7. Page header: full width, stack vertically ── */
  .fx-page-header, .pm-page-header, .page-header {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-2) !important;
  }
  .fx-page-header .actions, .pm-page-header .actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* ── 8. Hero: full-width with 16px gutters ── */
  .fx-hero, .pm-hero, .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--space-5) 16px !important;
    margin: 0 0 var(--space-4) 0 !important;
    box-sizing: border-box !important;
  }

  /* ── 9. Sections: full-width with 16px gutters ── */
  .fx-section, .pm-section, .section {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--space-5) 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── 10. Hero ribbon: full-width, stack vertically ── */
  .hero-ribbon {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    margin: 0 0 var(--space-4) 0 !important;
    box-sizing: border-box !important;
  }
  .hero-ribbon .ribbon-item {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding: var(--space-3) 16px !important;
  }
  .hero-ribbon .ribbon-item:last-child { border-bottom: none !important; }

  /* ── 11. Ticker bar: full width ── */
  .fx-ticker-bar {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── 12. Header: full width, compact ── */
  .fx-header, .pm-header, .topbar, .dz-topbar, .site-header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* ── 13. Cards: full width ── */
  .fx-card, .pm-card, .card, .panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── 14. Auth card: full width ── */
  .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: var(--space-3) 0 !important;
    box-sizing: border-box !important;
  }

  /* ── 15. Any element with an inline max-width override ── */
  [style*="max-width"] {
    max-width: 100% !important;
  }

  /* ── 16. Modals: full width bottom sheet ── */
  .fx-modal, .pm-modal, .modal {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* ── 17. Tables: horizontal scroll ── */
  .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 18. Grids: single column ── */
  .fx-grid, .pm-grid, .grid {
    width: 100% !important;
    max-width: 100% !important;
  }
  .fx-grid.cols-2, .fx-grid.cols-3, .fx-grid.cols-4, .fx-grid.cols-5,
  .pm-grid.cols-2, .pm-grid.cols-3, .pm-grid.cols-4, .pm-grid.cols-5,
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5 {
    grid-template-columns: 1fr !important;
  }

  /* ── 19. KPI grid: 2 columns on mobile, 1 on very small ── */
  .fx-kpi-grid, .pm-kpi-grid, .kpi-grid, .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-2) !important;
  }
}

/* ── Very small phones (≤480px): KPI grid → 1 column ── */
@media (max-width: 480px) {
  .fx-kpi-grid, .pm-kpi-grid, .kpi-grid, .stats-grid {
    grid-template-columns: 1fr !important;
  }
}