/* mobile-fix.css — Last-loaded mobile override for all pages */
/* Forces single-column 768px-below, no horizontal scroll, card-style tables */

@media (max-width: 768px) {
  /* ═══ KILL OVERFLOW ═══ */
  html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; }
  .app, main, section, footer, nav, .page, .page-container { overflow-x: hidden !important; max-width: 100vw !important; }

  /* ═══ ALL GRID/LAYOUT → SINGLE COLUMN ═══ */
  .main-layout, .main-grid, .page-container, .page-layout,
  .trade-layout, .spot-layout, .market-layout {
    display: flex !important; flex-direction: column !important;
    min-width: 0 !important; max-width: 100vw !important;
    width: 100% !important; gap: 12px !important;
    padding: 8px !important; margin: 8px auto !important;
  }

  .left-panel, .center-panel, .right-panel, .sidebar,
  .right-sidebar, .left-col, .right-col {
    width: 100% !important; min-width: 0 !important;
    max-width: 100% !important; flex-shrink: 0 !important;
  }

  /* ═══ KILL ALL FIXED WIDTHS ═══ */
  [style*="min-width:"], [style*="minWidth:"] { min-width: 0 !important; }
  * { min-width: 0; }

  /* ═══ NAVIGATION ═══ */
  .nav-r { flex-wrap: wrap !important; gap: 4px !important; }
  .navbar-right { flex-wrap: wrap !important; }

  /* ═══ TABLES → NO horizontal scroll ═══ */
  .order-table, .coin-table, table { min-width: 0 !important; width: 100% !important; }
  .order-table-wrap, .table-wrap { overflow-x: visible !important; }
  .order-table thead th, .order-table tbody td, thead th, td, th {
    white-space: normal !important; word-break: break-word !important;
    padding: 6px 5px !important; font-size: 11px !important;
  }

  /* ═══ COIN ROWS → CARD ═══ */
  .coin-row {
    display: flex !important; flex-direction: column !important;
    grid-template-columns: unset !important; padding: 10px 12px !important;
    gap: 4px !important; border-bottom: 1px solid var(--brd,#2d333d) !important;
    width: 100% !important;
  }
  .coin-table-header { display: none !important; }
  .coin-row .coin-price { text-align: left !important; font-size: 16px !important; font-weight: 700 !important; }
  .coin-row .coin-change { text-align: left !important; }
  .coin-row .coin-star { position: absolute !important; right: 12px !important; top: 10px !important; }

  /* ═══ MULTI-COL → SINGLE ═══ */
  .quick-actions, .features, .footer-links, .product-grid,
  .grid-2col, .grid-3col { grid-template-columns: 1fr !important; }

  /* ═══ FULL-WIDTH CARDS ═══ */
  .card, .market-card, .sidebar-card, .action-card, .feature-card,
  .product-card, .spot-trade, .bottom-panel {
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }

  /* ═══ FULL-WIDTH BUTTONS ═══ */
  button, .btn, .btn-blue, .btn-outline, .st-submit-btn, .ct-submit-btn {
    width: 100% !important; max-width: 100% !important;
  }

  /* ═══ INPUTS FULL-WIDTH ═══ */
  input, select, textarea { width: 100% !important; max-width: 100% !important; }
  .ct-inp-row input, .st-amount-row input { width: 100% !important; }

  /* ═══ KLINE ═══ */
  .kline-chart { height: 200px !important; min-height: 0 !important; }

  /* ═══ HERO / BANNER ═══ */
  .hero { padding: 32px 16px 24px !important; }
  .hero h1, .banner-content h1 { font-size: 22px !important; }
  .hero-stats { gap: 20px !important; flex-wrap: wrap !important; }
  .hero-stat .num { font-size: 20px !important; }

  /* ═══ BOTTOM BAR ═══ */
  .bottom-bar-inner { flex-direction: column !important; gap: 8px !important; padding: 8px !important; }

  /* ═══ CONTRACT TRADE PANEL ═══ */
  .ct-trade-panel, .ct-order-panel { width: 100% !important; }

  /* ═══ SECOND CONTRACT ═══ */
  .sc-main { flex-direction: column !important; }
}