/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FULL-WIDTH FIX — v3 (production, deep-audit corrected)
   ───────────────────────────────────────────────────────────────────────
   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 (v8.4 deep audit): The sidebar element (.fx-sidebar) is
   STILL rendered in the DOM on pages that include components/sidebar.html.
   Even though the grid-template was changed to 1fr + "header" "main",
   the sidebar element has `grid-area: sidebar` which references a named
   area that no longer exists. CSS Grid creates an IMPLICIT grid track
   for this orphaned element, consuming horizontal space (sidebar width
   = 248px). On a 375px viewport, this leaves only ~127px for main
   content, or causes the sidebar to create a phantom right-side column.

   Additionally, the `.fx-main` element has `max-width: var(--content-max)`
   = 1680px — this was previously overridden, but NESTED CHILD ELEMENTS
   (.fx-hero, .hero-ribbon, .fx-section, .fx-footer .inner, etc.) have
   their own max-width constraints that were never overridden for mobile.

   FIX (v3):
   1. HIDE the sidebar element entirely on mobile (display: none) — it's
      a drawer pattern, not needed in the grid flow.
   2. Force EVERY container in the tree to width:100% + max-width:100%.
   3. 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;
  }

  /* ── 2a. SIDEBAR: HIDE entirely on mobile (drawer pattern) ── */
  /* This is the KEY fix — the sidebar element was still in the DOM,
     creating an implicit grid track that consumed horizontal space. */
  .fx-sidebar, .pm-sidebar, .sidebar, .dz-sidebar,
  .fx-app > .fx-sidebar, .fx-app > .pm-sidebar,
  .premium-app > .fx-sidebar, .premium-app > .pm-sidebar {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  /* When the sidebar is toggled open on mobile (via sb-open class),
     show it as an overlay drawer, NOT in the grid flow. */
  .fx-app.sb-open .fx-sidebar,
  .fx-app.sb-open .pm-sidebar,
  .premium-app.sb-open .fx-sidebar,
  .premium-app.sb-open .pm-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    max-width: 80vw !important;
    z-index: 9999 !important;
    visibility: visible !important;
  }

  /* ── 2b. 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 + 2-column layout ── */
  .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;
  }
  /* v8.7.1: Footer = 2 columns on mobile (not 1) */
  .fx-footer .inner, .pm-footer .inner, .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-4) var(--space-5) !important;
  }
  .fx-footer .footer-brand-col, .pm-footer .footer-brand-col {
    grid-column: 1 / -1 !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;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PAPER TRADING RESPONSIVE GRID — v8.4 FINAL Phase 2B (corrected)
   ───────────────────────────────────────────────────────────────────────
   ROOT CAUSE: The KPI grid uses minmax(180px, 1fr) with auto-fit.
   On a 1366px laptop with sidebar (248px), the available content width
   is 1118px. 6 cards × 180px + 5 gaps × 12px = 1140px > 1118px →
   horizontal overflow of 22px, causing the entire page to scroll.

   FIX: Use a SMALLER minimum as viewport decreases. The key insight is
   that minmax() minimum must SHRINK (not grow) as available width
   decreases, so auto-fit can drop cards to the next row instead of
   forcing overflow.

   Math (sidebar = 248px, gap = 12px):
   1920px → 1672px available → 6×140+60=900 ✓ (plenty of room)
   1680px → 1432px available → 6×140+60=900 ✓
   1440px → 1192px available → 6×140+60=900 ✓
   1366px → 1118px available → 6×140+60=900 ✓ (was 1140 with 180px min!)
   1280px → 1032px available → 5×140+48=748 ✓ (auto-fit drops to 5)
   1024px → 776px available  → 5×120+48=648 ✓
   ═══════════════════════════════════════════════════════════════════════ */

/* ── All desktop widths: use 140px minimum so 6 cards always fit ── */
.fx-kpi-grid, .pm-kpi-grid, .kpi-grid, .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

/* ── Tablet (≤1024px): stack two-column grids ── */
@media (max-width: 1024px) {
  .fx-kpi-grid, .pm-kpi-grid, .kpi-grid, .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  }
  .fx-grid.cols-2, .pm-grid.cols-2, .grid.cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Mobile (≤768px): KPI grid → 2 columns ── */
@media (max-width: 768px) {
  .fx-kpi-grid, .pm-kpi-grid, .kpi-grid, .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .fx-grid, .pm-grid, .grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .fx-kpi-grid, .pm-kpi-grid, .kpi-grid, .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Prevent any card or value from forcing overflow ── */
.fx-kpi, .pm-kpi, .kpi, .stat-card {
  min-width: 0 !important;
  overflow: hidden !important;
}
.fx-kpi .value, .pm-kpi .value, .kpi-value {
  word-break: break-all !important;
  overflow-wrap: break-word !important;
}

/* ── Tables scroll inside their own container ── */
.table-wrap, .fx-table-wrap, .pm-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}


/* ═══════════════════════════════════════════════════════════════════════
   MAIN CONTENT FULL-WIDTH — v8.4 FINAL
   ───────────────────────────────────────────────────────────────────────
   ROOT CAUSE: Neither html, body, nor .fx-app have width:100%. A
   display:grid container without explicit width can fail to fill the
   viewport on some browsers, leaving empty space on the right.

   FIX: Force width:100% on every element in the chain from html → body
   → .fx-app → .fx-main. This ensures the dark content area fills the
   entire viewport width at ALL screen sizes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Force full-width at ALL screen sizes (not just mobile) ── */
html {
  width: 100% !important;
  max-width: 100% !important;
}

body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fx-app, .premium-app, .ent-app, .app-shell, .dz-shell {
  width: 100% !important;
  max-width: 100% !important;
}

.fx-main, .pm-main, .main-content, .dz-content {
  width: 100% !important;
  max-width: 100% !important;
}