/* ═══════════════════════════════════════════════════════════
   POLYSTATS — Mobile Responsive Styles
   Breakpoints: 768px (tablet/phone), 480px (small phone)
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   SAFE AREA + BASE FIXES (all devices)
   ═══════════════════════════════════════════════════════════ */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --mbn-h: 60px; /* bottom nav height */
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR OVERLAY (always present, activated via .active)
   ═══════════════════════════════════════════════════════════ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 199;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.active { display: block; }

/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--mbn-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 100;
  flex-direction: row;
  align-items: stretch;
  box-shadow: 0 -1px 0 var(--border), 0 -8px 24px rgba(0,0,0,0.35);
}
.mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: var(--muted);
  border: none;
  background: none;
  padding: 8px 4px 4px;
  position: relative;
  transition: color 0.15s;
}
.mbn-item:active { background: rgba(0,255,136,0.05); }
.mbn-item.active { color: var(--green); }
.mbn-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  border-radius: 0 0 3px 3px;
}
.mbn-icon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.15s;
}
.mbn-item.active .mbn-icon {
  transform: translateY(-1px);
}
.mbn-label {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════
   HIDE MOBILE-ONLY ON DESKTOP
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .sidebar-toggle  { display: none !important; }
  .sidebar-overlay { display: none !important; }
  .mobile-bottom-nav { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   MAIN MOBILE BREAKPOINT  ≤ 768px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Show bottom nav ── */
  .mobile-bottom-nav { display: flex; }

  /* ── Sidebar ── */
  .sidebar {
    width: 280px;
    transform: translateX(-100%);
    z-index: 200;
    box-shadow: none;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.28s ease;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,0.65);
  }

  /* Profile safe area */
  .sidebar-profile {
    padding-top: calc(14px + var(--safe-top));
  }

  /* Bottom brand safe area */
  .sidebar-bottom-brand {
    padding-bottom: calc(10px + var(--safe-bottom));
  }

  /* Nav items larger touch targets */
  .nav-item {
    padding: 11px 14px 11px 16px;
    font-size: 13px;
    min-height: 46px;
  }

  /* Group header touch target */
  .nav-group-header {
    padding: 10px 14px 8px;
    min-height: 40px;
  }

  /* ── Hamburger button ── */
  .sidebar-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--green);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar-toggle:active {
    background: rgba(0,255,136,0.1);
    border-color: var(--green);
  }

  /* ── Topbar ── */
  .topbar {
    margin-left: 0;
    padding: 0 10px 0 10px;
    padding-left: calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
    height: 48px;
    gap: 8px;
  }
  .topbar-date { display: none; }
  .topbar-clock { font-size: 11px; }
  .btc-label, .btc-diff, .btc-sep { display: none; }
  .btc-src:nth-child(n+2) { display: none; }
  .btc-ticker { gap: 4px; font-size: 12px; }
  .topbar-session {
    gap: 4px;
    padding: 3px 8px;
    font-size: 10px;
  }
  .ts-round, .ts-profit { font-size: 11px; }

  /* ── Main content ── */
  .main-content {
    margin-left: 0;
    padding: 12px 10px;
    padding-left:  calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
    /* Reserve space for bottom nav */
    padding-bottom: calc(var(--mbn-h) + var(--safe-bottom) + 16px);
    min-height: calc(100vh - 48px);
  }

  /* ── Page headers ── */
  .page-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }
  .page-title {
    font-size: 14px;
    letter-spacing: 1.5px;
    flex: 1;
  }
  .page-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  /* ═══════════════════════════════════════════════════════════
     CARDS & PANELS
     ═══════════════════════════════════════════════════════════ */
  .panel, .card { padding: 12px; border-radius: 8px; }
  .info-box-value { font-size: 16px; }

  /* ═══════════════════════════════════════════════════════════
     BUTTONS — touch targets ≥ 44px
     ═══════════════════════════════════════════════════════════ */
  .btn {
    min-height: 42px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .btn-sm {
    min-height: 34px;
    padding: 5px 10px;
    font-size: 11px;
  }
  .btn-full { min-height: 46px; }

  /* ═══════════════════════════════════════════════════════════
     FORMS — prevent iOS zoom (font-size ≥ 16px on inputs)
     ═══════════════════════════════════════════════════════════ */
  .form-input,
  .form-select,
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
    padding: 10px 12px;
  }
  .form-field { margin-bottom: 12px; }

  /* ═══════════════════════════════════════════════════════════
     AUTH
     ═══════════════════════════════════════════════════════════ */
  .auth-box {
    width: 92vw;
    max-width: 420px;
    padding: 24px 18px;
    border-radius: 14px;
  }
  .auth-title { font-size: 20px; }

  /* ═══════════════════════════════════════════════════════════
     MODALS / OVERLAYS
     ═══════════════════════════════════════════════════════════ */
  .overlay .card,
  .modal-content,
  .modal-box,
  .overlay > div:not(.sidebar-overlay) {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 12px;
  }

  /* ═══════════════════════════════════════════════════════════
     TABS — horizontal scroll
     ═══════════════════════════════════════════════════════════ */
  .tabs, .an-tabs, .az-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 0;
    padding-bottom: 1px;
  }
  .tabs::-webkit-scrollbar,
  .an-tabs::-webkit-scrollbar,
  .az-tabs::-webkit-scrollbar { display: none; }

  .tab, .an-tab, .az-tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* ═══════════════════════════════════════════════════════════
     TABLES — horizontal scroll
     ═══════════════════════════════════════════════════════════ */
  .data-table,
  .az-table-wrap,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep thead/tbody/tr as table elements after wrapping */
  .data-table thead,
  .data-table tbody,
  .data-table tr {
    display: table-row-group;
  }
  .az-table { display: table; }
  .az-table-wrap { display: block; }

  .data-table th, .data-table td,
  .az-table th,  .az-table td {
    padding: 8px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
  .trades-table-wrap { max-height: 380px; }

  /* ═══════════════════════════════════════════════════════════
     SESSION PAGE
     ═══════════════════════════════════════════════════════════ */
  .timer-display { font-size: 22px; letter-spacing: 1px; }
  .timer-bar { gap: 10px; margin-bottom: 12px; }
  .cmd-bar { gap: 6px; padding: 8px 10px; }
  .cmd-bar select,
  .cmd-bar input[type="number"] {
    font-size: 16px !important;
    min-height: 40px;
    padding: 8px 10px;
  }
  .session-info { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .session-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .session-table thead,
  .session-table tbody,
  .session-table tr { display: table-row-group; }
  .session-table th, .session-table td { padding: 8px 10px; font-size: 11px; white-space: nowrap; }
  .actual-input { width: 70px; font-size: 12px; min-height: 36px; }
  .session-summary .profit { font-size: 20px; }

  /* ═══════════════════════════════════════════════════════════
     STATS PAGE
     ═══════════════════════════════════════════════════════════ */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stats-card { padding: 10px; }
  .stats-card-value { font-size: 18px; }
  .stats-chart-area canvas { height: 140px; }

  /* ═══════════════════════════════════════════════════════════
     FRIENDS PAGE
     ═══════════════════════════════════════════════════════════ */
  .friends-search input {
    font-size: 16px !important;
    min-height: 44px;
    padding: 10px 14px 10px 36px;
  }
  .friend-item { gap: 10px; padding: 10px 0; }
  .friend-avatar { width: 34px; height: 34px; font-size: 13px; }
  .friend-name { font-size: 13px; }
  .friend-action { min-height: 36px; padding: 6px 12px; font-size: 11px; }

  /* ═══════════════════════════════════════════════════════════
     POSITIONS / PORTFOLIO
     ═══════════════════════════════════════════════════════════ */
  .pos-grid { grid-template-columns: 1fr; gap: 10px; }
  .pos-card { padding: 12px; }
  .pos-event { font-size: 12px; }
  .pm-event-header { font-size: 12px; padding: 8px 12px; }
  .pm-trade-row { gap: 6px; flex-wrap: wrap; }
  .pm-pagination { gap: 6px; }

  /* ═══════════════════════════════════════════════════════════
     ADMIN PAGE
     ═══════════════════════════════════════════════════════════ */
  .admin-user-row { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .admin-user-name { flex: 1 1 100%; font-size: 13px; }
  .admin-actions { width: 100%; justify-content: flex-start; }
  .admin-actions .btn { min-height: 36px; font-size: 11px; }
  .profile-edit-grid { grid-template-columns: 1fr; gap: 10px; }
  .profile-avatar-picker { flex-direction: column; text-align: center; gap: 10px; padding: 12px; }
  .profile-avatar-preview { width: 52px; height: 52px; font-size: 22px; }

  /* ═══════════════════════════════════════════════════════════
     PROFIT LOCK OVERLAY
     ═══════════════════════════════════════════════════════════ */
  .profit-lock-overlay .big-text { font-size: 28px; }
  .profit-lock-overlay .sub-text { font-size: 13px; margin-bottom: 20px; }

  /* ═══════════════════════════════════════════════════════════
     CHINESE MODALS
     ═══════════════════════════════════════════════════════════ */
  .cw-card, .cq-card { padding: 20px; max-width: 96vw; }
  .cw-char { font-size: 48px; }
  .cq-question { font-size: 36px; }
  .cq-option { padding: 10px 14px; font-size: 13px; min-height: 44px; }

  /* ═══════════════════════════════════════════════════════════
     LEADERBOARD — enhanced
     ═══════════════════════════════════════════════════════════ */
  .lb-podium { padding: 16px 10px 14px; gap: 10px; }
  .lb-podium-item { padding: 14px 12px 12px; min-width: 0; width: 100%; max-width: 300px; }
  .lb-podium-avatar { width: 40px; height: 40px; font-size: 16px; }
  .lb-podium-medal { font-size: 28px; }
  .lb-podium-name { font-size: 13px; max-width: 200px; }
  .lb-podium-profit { font-size: 15px; }
  .lb-podium-stats { font-size: 10px; }
  .lb-table-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lb-table th, .lb-table td { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .lb-toolbar { gap: 8px; }

  /* ═══════════════════════════════════════════════════════════
     TERMINAL — enhanced
     ═══════════════════════════════════════════════════════════ */
  .cl-terminal { min-height: auto; }
  .cl-hcard { flex-wrap: wrap; gap: 6px; padding: 8px 10px; font-size: 12px; }
  .cl-hcard-time { min-width: 80px; font-size: 10px; }
  .cl-hcard-prices { gap: 8px; font-size: 11px; }
  .cl-card-title { font-size: 13px; }
  .cl-card-top-pct { font-size: 16px; }
  .cl-detail { max-width: 100%; }
  .cl-detail-meta { font-size: 11px; }
  .cl-back { padding: 8px 12px; min-height: 40px; }
  .cl-history-filters { flex-wrap: wrap; gap: 6px; }
  .cl-bot-panel { padding: 10px; }
  .cl-pos-card { padding: 10px 12px; }

  /* ═══════════════════════════════════════════════════════════
     POLYMARKET BROWSER — enhanced
     ═══════════════════════════════════════════════════════════ */
  .cl-market-row { flex-wrap: wrap; gap: 6px; }
  .cl-market-label { white-space: normal; font-size: 12px; }
  .cl-market-prices { width: 100%; }
  .cl-market-meta-row { flex-wrap: wrap; gap: 6px; }
  .cl-chart-period { flex-wrap: wrap; }
  .cl-period-btn { padding: 6px 10px; font-size: 11px; min-height: 36px; }
  .cl-depth-legend { flex-wrap: wrap; gap: 8px; }

  /* ═══════════════════════════════════════════════════════════
     DASHBOARD
     ═══════════════════════════════════════════════════════════ */
  .dash-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .profile-hero {
    flex-direction: column;
    text-align: center;
    padding: 14px 12px;
    gap: 10px;
  }
  .profile-avatar { width: 48px; height: 48px; font-size: 20px; }
  .profile-name   { font-size: 14px; }
  .profile-wallet { flex-wrap: wrap; justify-content: center; word-break: break-all; }
  .profile-actions { justify-content: center; flex-wrap: wrap; gap: 6px; }

  .chart-container { padding: 10px; margin-bottom: 14px; }
  .chart-title { font-size: 10px; }

  /* ═══════════════════════════════════════════════════════════
     MARKET PAGE
     ═══════════════════════════════════════════════════════════ */
  .m-live { padding: 10px; gap: 8px; }
  .m-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .m-card  { padding: 10px; }
  .m-card-val { font-size: 15px; }
  .m-panel    { padding: 10px; }
  .m-panel-head { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* ═══════════════════════════════════════════════════════════
     BOT CONSTRUCTOR
     ═══════════════════════════════════════════════════════════ */
  .bot-card   { padding: 12px; }
  .hours-grid { gap: 2px; }
  .custom-toggles { gap: 4px; }
  .ctoggle { padding: 5px 8px; font-size: 10px; }
  .trades-filter-bar { padding: 8px 10px; }
  .trades-filter-row { gap: 6px; flex-wrap: wrap; }
  .trades-filter-item { flex: 1; min-width: 80px; }
  .trades-filter-select,
  .trades-filter-input { font-size: 16px !important; min-height: 40px; }

  /* ═══════════════════════════════════════════════════════════
     REAL TRADING
     ═══════════════════════════════════════════════════════════ */
  .wallet-card { padding: 14px 12px; }
  .wallet-header { gap: 8px; }
  .wallet-title  { font-size: 13px; }

  /* ═══════════════════════════════════════════════════════════
     ANALYTICS PAGE
     ═══════════════════════════════════════════════════════════ */
  .an-controls { flex-wrap: wrap; gap: 8px; }
  .an-days-wrap { gap: 4px; }
  .an-day-btn { padding: 6px 10px; font-size: 11px; }

  /* ═══════════════════════════════════════════════════════════
     ANALYSIS PAGE (ORANGE)
     ═══════════════════════════════════════════════════════════ */
  .az-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .az-card { padding: 12px 10px; }
  .az-card-value { font-size: 1.25rem; }
  .az-grid-2 { grid-template-columns: 1fr !important; }
  .az-filters {
    gap: 8px;
    padding: 10px 12px;
  }
  .az-filter-input { width: 120px; }
  .az-heatmap { gap: 3px; }
  .az-hour-cell { width: 34px; height: 46px; }
  .az-price-chart { height: 90px; }
  .az-top-title { font-size: 0.72rem; }

  /* ═══════════════════════════════════════════════════════════
     LEADERBOARD
     ═══════════════════════════════════════════════════════════ */
  .lb-scope-toggle { font-size: 11px; }

  /* ═══════════════════════════════════════════════════════════
     SESSION
     ═══════════════════════════════════════════════════════════ */
  .collapse-toggle { min-width: 36px; min-height: 36px; }

  /* ═══════════════════════════════════════════════════════════
     TOAST NOTIFICATIONS
     ═══════════════════════════════════════════════════════════ */
  #toast-container {
    top: auto !important;
    bottom: calc(var(--mbn-h) + var(--safe-bottom) + 12px) !important;
    right: 50% !important;
    transform: translateX(50%);
    align-items: center;
  }
  .toast {
    max-width: 90vw;
    font-size: 13px;
    text-align: center;
  }

  /* ═══════════════════════════════════════════════════════════
     SCROLLBAR
     ═══════════════════════════════════════════════════════════ */
  ::-webkit-scrollbar { width: 3px; height: 3px; }
}

/* ═══════════════════════════════════════════════════════════
   EXTRA SMALL ≤ 480px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .page-title { font-size: 13px; letter-spacing: 1px; }

  /* Single column for very small screens */
  .dash-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .m-cards { grid-template-columns: 1fr !important; }
  .az-cards { grid-template-columns: 1fr !important; }

  /* Hide BTC ticker completely */
  .topbar-btc { display: none; }

  /* Session — ultra compact */
  .timer-display { font-size: 18px; }
  .session-info { grid-template-columns: 1fr; }
  .cmd-bar { flex-direction: column; align-items: stretch; }
  .cmd-bar select,
  .cmd-bar input[type="number"] { width: 100%; }

  /* Stats — single column */
  .stats-grid { grid-template-columns: 1fr; }
  .stats-card-value { font-size: 16px; }

  /* Positions — compact */
  .pos-grid { grid-template-columns: 1fr; }

  /* Profit lock — compact */
  .profit-lock-overlay .big-text { font-size: 22px; }

  /* Chinese — compact */
  .cw-char { font-size: 36px; }
  .cq-question { font-size: 28px; }
  .cq-option { font-size: 12px; }

  /* Leaderboard — ultra compact */
  .lb-podium-item { max-width: 100%; }
  .lb-podium-profit { font-size: 14px; }

  /* Terminal — compact */
  .cl-hcard-time { min-width: 70px; font-size: 9px; }
  .cl-card-top-pct { font-size: 14px; }
  .cl-5min-pct { font-size: 16px; }
  .cl-live5min-pct { font-size: 16px; }

  /* Tighter main content */
  .main-content {
    padding: 10px 8px;
    padding-bottom: calc(var(--mbn-h) + var(--safe-bottom) + 12px);
  }

  /* Wider sidebar on tiny screens */
  .sidebar { width: 100vw; max-width: 320px; }

  /* Bottom nav labels — hide on very small */
  .mbn-label { font-size: 8px; }
  .mbn-icon  { font-size: 19px; }

  .az-filter-input  { width: 100%; }
  .az-filter-select { width: 100%; }
  .az-filters { flex-direction: column; }

  /* Auth box fill screen */
  .auth-box { width: 98vw; padding: 20px 14px; }
}

/* ═══════════════════════════════════════════════════════════
   MEDIUM SCREENS ≤ 1100px (small desktop / tablet landscape)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pos-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .real-bots-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .admin-user-row { gap: 10px; }
  .m-analysis-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE PHONE (height < 500px)
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (max-width: 900px) {
  .mobile-bottom-nav { height: calc(50px + var(--safe-bottom)); }
  :root { --mbn-h: 50px; }
  .mbn-label { display: none; }
  .mbn-icon  { font-size: 22px; }
  .main-content {
    padding-bottom: calc(50px + var(--safe-bottom) + 10px);
  }
  .sidebar {
    padding-top: calc(4px + var(--safe-top));
  }
  .nav-item { min-height: 40px; padding: 8px 16px; }
}