/**
 * mobile-compat.css
 * Universal mobile device compatibility layer.
 * Covers all screen sizes from Galaxy Fold (280px) to tablets (1024px).
 * Loaded AFTER all other CSS files — additive only, no destructive overrides.
 *
 * Target devices:
 *   280px  — Galaxy Z Flip3/Fold2 (folded)
 *   320px  — iPhone 5, iPhone SE 2016
 *   360px  — Galaxy A12, Pixel 5, OnePlus Nord 2
 *   375px  — iPhone X, iPhone 11, iPhone 12 Mini, iPhone 13 Mini
 *   390px  — iPhone 12/13/14/15/16
 *   393px  — Pixel 6 Pro, Pixel 8
 *   412px  — Galaxy S20/S21/S22/S24, Galaxy Note20, Xiaomi Mi 11i/12
 *   428px  — iPhone 14 Pro Max, iPhone 15 Pro Max
 *   430px  — iPhone 16 Pro Max
 *   540px  — Surface Duo
 *   744px  — iPad Mini
 *   768px  — various tablets
 *   820px  — iPad Air 4
 *   834px  — iPad Pro 11
 *   800px  — Galaxy Tab S7
 */

/* ═══════════════════════════════════════════════════════════════════════
   0. GLOBAL — touch targets, text sizing, overflow prevention
   ═══════════════════════════════════════════════════════════════════════ */

/* Ensure minimum touch targets on all interactive elements (WCAG 2.5.8) */
@media (pointer: coarse) {
  a, button, [role="button"], select, summary,
  input[type="checkbox"], input[type="radio"],
  .sort-btn, .tf-btn, .view-tab, .lt-tab, .pf-tab,
  .mover-item, .coin-card, .funding-card, .heatmap-cell,
  .lt-coin-chip, .bt-select-option, .backtest-coin-multi-item {
    min-height: 44px;
    min-width: 44px;
  }

  /* Smaller inline elements: expand tap area via padding, not min-size */
  .sort-btn, .tf-btn, .action-badge, .coin-badge {
    min-width: 36px;
    min-height: 28px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Prevent accidental double-tap zoom on buttons */
  button, [role="button"], .btn, .lt-btn, .backtest-submit, .btn-save {
    touch-action: manipulation;
  }
}

/* Prevent horizontal overflow on all pages */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Smooth scrolling for iOS momentum */
.dashboard-content, .mk-dashboard-content,
.backtest-page-main .dashboard-content,
.portfolio-page-main .dashboard-content,
.lt-table-wrap, .pf-table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════════
   1. EXTRA SMALL — Galaxy Fold folded, very narrow (≤ 320px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
  /* --- Global layout --- */
  .container { padding: 8px 4px 60px; }
  .dashboard-main { padding: 68px 4px 20px !important; }
  .dashboard-header { padding-left: 48px; }
  .dashboard-title { font-size: 16px !important; }
  .dashboard-welcome { font-size: 10px; }
  h1 { font-size: 15px !important; }
  h2 { font-size: 14px !important; }
  h3 { font-size: 13px !important; }

  /* --- Sidebar overlay --- */
  .dashboard-sidebar {
    width: 200px;
    min-width: 200px;
  }

  /* --- KPI: one row, four columns (shrink, no scroll) --- */
  .dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
    gap: 6px !important;
  }
  .dashboard-kpi-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--dash-kpi-mobile-height-fold, 38px) !important;
    min-height: var(--dash-kpi-mobile-height-fold, 38px) !important;
    max-height: var(--dash-kpi-mobile-height-fold, 38px) !important;
    overflow: hidden !important;
    padding: 3px 3px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .dashboard-kpi-card .kpi-value { font-size: clamp(10px, 3.2vw, 12px); font-weight: 600; }
  .dashboard-kpi-card .kpi-label { font-size: clamp(7px, 2vw, 9px); letter-spacing: 0.03em; }

  /* --- Navbar --- */
  .navbar { padding: 0 8px; height: 48px; }
  .navbar .brand img { height: 20px; }
  .navbar .brand span { font-size: 16px; }
  .nav-links a { padding: 8px 10px; font-size: 12px; }
  .nav-right { gap: 4px; }
  .nav-user { display: none; }
  .nav-logout { font-size: 10px; padding: 4px 8px; }

  /* --- Strategy bar --- */
  .strategy-bar { font-size: 8px; padding: 4px 6px; gap: 2px; }
  .strategy-bar .badge-on, .strategy-bar .badge-off { padding: 1px 4px; font-size: 8px; }

  /* --- Flash messages --- */
  .flash { font-size: 12px; padding: 8px 10px; }

  /* --- Tables --- */
  table th, table td { padding: 4px; font-size: 10px; }

  /* --- Markets page --- */
  .mk-controls-row { gap: 4px; margin-bottom: 8px; }
  .view-tab { padding: 8px 6px; font-size: 11px; min-height: 38px; }
  .mk-filtering-panel, .mk-market-overall { padding: 8px 10px; }
  .sort-btn { padding: 3px 6px; font-size: 9px; }
  .market-stats { gap: 6px; font-size: 9px; }
  .markets-grid { grid-template-columns: 1fr !important; gap: 6px; }
  .coin-card { padding: 8px 10px; }
  .coin-price { font-size: 14px; }
  .coin-symbol { font-size: 13px; }
  .coin-meta { font-size: 9px; gap: 2px 6px; }
  .coin-sparkline { height: 24px; }
  .movers-row { gap: 8px; }
  .movers-section { padding: 10px 12px; }
  .movers-section h3 { font-size: 14px; }
  .mover-item { padding: 8px 10px; font-size: 11px; }
  .heatmap-container { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  /* Row height from markets.css grid-auto-rows; cells fill the track */
  .heatmap-cell { min-height: 0; padding: 10px 8px; }
  .heatmap-cell.big { grid-column: span 1; min-height: 0; }
  .heatmap-cell.mid { grid-column: span 1; }
  .hm-change { font-size: 14px; }
  .hm-symbol { font-size: 11px; }
  .funding-grid { grid-template-columns: 1fr; gap: 8px; }
  .funding-card { padding: 10px 12px; }

  /* Chart overlay — full width on small devices */
  .chart-overlay { left: 0 !important; }
  .chart-header {
    padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 6px;
    gap: 6px;
  }
  .chart-title { font-size: 12px; gap: 6px; }
  .chart-title .price-live { font-size: 14px; }
  .tf-btn { padding: 3px 6px; font-size: 9px; }
  .chart-close { width: 30px; height: 30px; font-size: 14px; }

  /* --- Signals page --- */
  .live-signals-card { padding: 8px 10px; }
  .live-signals-card-title { font-size: 10px; margin-bottom: 8px; }
  .live-signal-card { padding: 8px 10px; gap: 8px; }
  .live-signal-title { font-size: 12px; }
  .live-signal-badge { padding: 3px 8px; font-size: 9px; }
  .live-signal-score-donut { width: 36px; height: 36px; }

  /* --- Portfolio --- */
  .portfolio-page-main .pf-hero-card { padding: 14px 12px; border-radius: 14px; }
  .portfolio-page-main .pf-hero-card .hero-val { font-size: 18px; }
  .portfolio-page-main .pf-hero-card .hero-detail { font-size: 10px; gap: 6px; }
  .portfolio-page-main .pf-stat { padding: 10px 12px; }
  .portfolio-page-main .pf-stat .stat-val { font-size: 16px; }
  .portfolio-page-main .pf-stat .stat-icon { width: 30px; height: 30px; font-size: 12px; }
  .portfolio-page-main .pf-tab { padding: 6px 8px; font-size: 10px; }
  .portfolio-page-main .pf-equity canvas { max-height: 180px; }
  .portfolio-page-main .pf-table { min-width: 560px; font-size: 10px; }

  /* --- Backtest --- */
  .backtest-card { padding: 16px 14px; border-radius: 16px; }
  .backtest-page-main .backtest-center-inner { margin-top: 0; }
  .backtest-intro { font-size: 13px; }
  .backtest-strategy-badge { font-size: 12px; padding: 6px 12px; }
  .backtest-form select, .backtest-form input[type="number"] { font-size: 14px; padding: 10px 12px; }
  .backtest-form .backtest-submit { padding: 12px 16px; font-size: 14px; }
  .backtest-note { padding: 10px 12px; }
  .backtest-note p { font-size: 11px; }
  .bt-select-trigger { padding: 10px 12px; font-size: 14px; }
  .bt-select-option { padding: 10px 12px; font-size: 14px; }

  /* --- Settings pages --- */
  .param-row label { min-width: 0 !important; font-size: 11px; }
  .param-row input, .param-row select { width: 100% !important; max-width: none !important; }
  .card-head { padding: 10px 12px !important; }
  .card-body { padding: 10px 12px !important; }
  .tab-btn { padding: 6px 8px !important; font-size: 10px !important; }
  .toggle-row label:first-of-type { font-size: 12px; }

  /* --- Live Trading --- */
  .lt-ex-grid { grid-template-columns: 1fr !important; gap: 6px; }
  .lt-ex-card { padding: 10px 12px; min-height: 80px; }
  .lt-ex-label { font-size: 12px; }
  .lt-tabs { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .lt-tab { font-size: 11px; padding: 10px 6px; min-height: 42px; }
  .lt-card { padding: 12px; border-radius: 10px; }
  .lt-coin-grid { grid-template-columns: 1fr !important; }
  .lt-fg { grid-template-columns: 1fr !important; }

  /* --- Admin pages --- */
  .dash-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .dash-card { padding: 12px; }
  .dash-card .val { font-size: 20px; }
  .admin-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .admin-card { padding: 14px; }
  .admin-card .val { font-size: 20px; }
  .section { padding: 10px 12px; }
  .param-grid { grid-template-columns: 1fr !important; }
  .filter-bar { flex-direction: column; align-items: stretch; gap: 6px; }
  .filter-bar input, .filter-bar select { width: 100% !important; }
  .user-table, .audit-table { font-size: 10px; }
  .user-table th, .user-table td,
  .audit-table th, .audit-table td { padding: 4px; }
  .btn-xs { font-size: 10px; padding: 4px 6px; min-height: 28px; }

  /* --- Notifications settings --- */
  .fg { grid-template-columns: 1fr !important; }
  .alerts-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2. Galaxy Fold FOLDED — extreme narrow (≤ 280px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 280px) {
  .container { padding: 6px 2px 50px; }
  .dashboard-main { padding: 6px 2px 16px !important; }
  .dashboard-header { padding-left: 44px; }
  .dashboard-title { font-size: 14px !important; }
  h1 { font-size: 14px !important; }

  /* Mobile menu button — tighter */
  .mobile-menu-btn {
    width: 38px; height: 38px;
    min-width: 38px; min-height: 38px;
    top: 6px; left: 4px;
    font-size: 16px;
  }

  /* Sidebar */
  .dashboard-sidebar { width: 180px; min-width: 180px; }

  /* Navbar */
  .navbar { height: 44px; padding: 0 6px; }
  .navbar .brand img { height: 18px; }
  .navbar .brand span { font-size: 14px; }

  /* KPI — keep inside --dash-kpi-mobile-height-fold band */
  .dashboard-kpi-card .kpi-value { font-size: 9px; }
  .dashboard-kpi-card .kpi-label { font-size: 6px; }

  /* Markets */
  .view-tab { padding: 6px 4px; font-size: 10px; min-height: 36px; }
  .coin-card { padding: 6px 8px; }
  .coin-price { font-size: 13px; }
  .coin-meta { font-size: 8px; }
  .heatmap-container { grid-template-columns: 1fr 1fr; gap: 3px; }
  .heatmap-cell { min-height: 0; padding: 8px 6px; }
  .hm-change { font-size: 12px; }
  .sort-btn { padding: 2px 4px; font-size: 8px; }

  /* Signals */
  .live-signal-card { padding: 6px 8px; }
  .live-signal-title { font-size: 11px; }

  /* Backtest */
  .backtest-card { padding: 14px 12px; }
  .backtest-page-main .backtest-center-inner { margin-top: 0; }

  /* Portfolio */
  .portfolio-page-main .pf-hero-card .hero-val { font-size: 16px; }
  .portfolio-page-main .pf-stat .stat-val { font-size: 14px; }

  /* Live Trading */
  .lt-tab { font-size: 10px; padding: 8px 4px; }
  .lt-card { padding: 10px; }
  .lt-ex-card { min-height: 70px; padding: 8px 10px; }

  /* Admin */
  .dash-card .val { font-size: 18px; }
  .admin-card .val { font-size: 18px; }
  .section { padding: 8px 10px; }
  .section h2 { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. SMALL PHONES — iPhone SE/5 range (321px – 359px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 321px) and (max-width: 359px) {
  .markets-grid { grid-template-columns: 1fr !important; }
  .heatmap-container { grid-template-columns: repeat(2, 1fr); }
  .lt-ex-grid { grid-template-columns: 1fr !important; }
  .lt-coin-grid { grid-template-columns: 1fr !important; }
  .portfolio-page-main .pf-metrics { grid-template-columns: 1fr; }
  .dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
    gap: 8px !important;
  }
  .dashboard-kpi-card {
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. STANDARD PHONES — 360px – 389px (Galaxy A12, OnePlus Nord 2)
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 360px) and (max-width: 389px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .coin-card { padding: 10px 12px; }
  .coin-price { font-size: 14px; }
  .lt-ex-grid { grid-template-columns: repeat(2, 1fr); }
  .lt-coin-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   5. MEDIUM PHONES — 390px – 430px (iPhone 12-16, Galaxy S20-S24)
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 390px) and (max-width: 430px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .lt-ex-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. LANDSCAPE — phones in landscape mode (short height)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .dashboard-sidebar {
    width: 56px;
    min-width: 56px;
  }
  .dashboard-sidebar-logo span,
  .dashboard-nav a span:not(.nav-icon),
  .dashboard-sidebar-user span:not(.nav-icon),
  .dashboard-sidebar-footer a span:not(.nav-icon) {
    display: none;
  }
  .dashboard-nav a {
    justify-content: center;
    padding: 8px;
    min-height: 40px;
  }
  .dashboard-main {
    margin-left: 56px;
    padding-top: 8px;
  }
  .dashboard-header {
    margin-bottom: 8px;
  }
  .dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow-x: visible;
    gap: 8px;
    align-items: stretch;
  }
  .dashboard-kpi-card {
    min-width: 0 !important;
    max-width: none;
  }
  .navbar { height: 44px; }

  /* Charts: use available height */
  .chart-container { min-height: 150px; }
  .pf-equity canvas { max-height: 160px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. SAFE AREA INSETS — notched phones (iPhone X+, Pixel)
   ═══════════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 480px) {
    /* Top: status bar / notch */
    .navbar {
      padding-top: env(safe-area-inset-top);
    }

    /* Bottom: home indicator */
    .strategy-bar {
      padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }

    /* Sidebar: respect notch */
    .dashboard-sidebar {
      padding-top: env(safe-area-inset-top);
    }

    /* Backtest / Portfolio page bottoms */
    .backtest-card,
    .portfolio-page-main .pf-pagination {
      margin-bottom: calc(16px + env(safe-area-inset-bottom));
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   8. TABLETS — Surface Duo, iPad Mini, iPad Air/Pro, Galaxy Tab
   ═══════════════════════════════════════════════════════════════════════ */

/* Surface Duo (540px) — between phone and tablet */
@media (min-width: 481px) and (max-width: 600px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .lt-ex-grid { grid-template-columns: repeat(3, 1fr); }
  .lt-tabs { grid-template-columns: repeat(3, 1fr); }
  .portfolio-page-main .pf-metrics { grid-template-columns: repeat(2, 1fr); }
  .funding-grid { grid-template-columns: repeat(2, 1fr); }
}

/* iPad Mini / Galaxy Tab (744px – 834px) — optimize 2-col layouts */
@media (min-width: 744px) and (max-width: 834px) {
  .markets-grid { grid-template-columns: repeat(3, 1fr); }
  .lt-ex-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-page-main .pf-metrics { grid-template-columns: repeat(3, 1fr); }
  .heatmap-container { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .funding-grid { grid-template-columns: repeat(3, 1fr); }
  .breakdown-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. HIGH-DPI / RETINA — crisp rendering
   ═══════════════════════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .coin-vol-bar, .ls-bar {
    height: 2px;
  }
  .heatmap-cell {
    border-radius: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   10. ACCESSIBILITY — reduced motion, dark mode forced colors
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Markets page — filter row (Standard, %↓, %↑, Vol, A-Z) hidden on mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .markets-page-main .mk-sort-row {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   11. SIGNAL DETAIL page (/signals/<id>) — mobile fixes
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .signal-detail-back { font-size: 13px; }
  .signal-detail-title { font-size: 18px; flex-wrap: wrap; }
  .signal-detail-meta { flex-direction: column; gap: 6px; }
  .signal-detail-chart { height: 250px; }
  .signal-info { grid-template-columns: 1fr !important; gap: 8px; }
}
@media (max-width: 320px) {
  .signal-detail-title { font-size: 15px; }
  .signal-detail-chart { height: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   12. ADMIN DASHBOARD — coin chips, results table, backtest controls
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .coin-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .coin-chip {
    flex: 0 0 auto;
    min-width: 0;
  }
  .results-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .results-table table {
    min-width: 500px;
  }
  .compare-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   13. NOTIFICATIONS & ALERTS settings
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .alerts-card {
    padding: 14px;
  }
  .alerts-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .alert-item {
    padding: 12px;
  }
  .notification-toggle-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}
@media (max-width: 320px) {
  .alerts-card { padding: 10px; }
  .alert-item { padding: 8px 10px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   14. GRID STATUS (admin) — table + controls on small screens
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .grid-status-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .grid-status-controls {
    flex-direction: column;
    gap: 8px;
  }
  .grid-status-controls input,
  .grid-status-controls select,
  .grid-status-controls button {
    width: 100%;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   15. iOS FORM ZOOM PREVENTION — all screen sizes
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* iOS zooms when font-size < 16px on focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   16. PRINT — clean output if someone prints
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
  .dashboard-sidebar,
  .mobile-menu-btn,
  .sidebar-backdrop,
  .strategy-bar,
  .navbar,
  .nav-toggle { display: none !important; }
  .dashboard-main { margin-left: 0 !important; }
  body { background: white !important; color: black !important; }
}