/* ============================================================
   BoostGrid — Mobile Responsive CSS
   Complete mobile-first overrides for phones & tablets
   Breakpoints:
     ≤768px  → tablet/small mobile
     ≤480px  → phone
     ≤380px  → small phone (iPhone SE etc.)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   0. GLOBAL — Hamburger button (always visible on mobile)
═══════════════════════════════════════════════════════════ */

/* Topbar uses .hamburger class (React Topbar.js) */
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fg3);
  cursor: pointer;
  padding: 7px 8px;
  border-radius: var(--radius-xs);
  font-size: .95rem;
  transition: color var(--transition), background var(--transition);
  flex-shrink: 0;
}
.hamburger:hover { color: var(--fg); background: var(--surface2); }

/* ═══════════════════════════════════════════════════════════
   1. LAYOUT — Sidebar, Topbar, Pages
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Sidebar: slide-in drawer ──────────────────────────── */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100dvh;          /* dynamic viewport height — fix iOS Safari */
    transform: translateX(-100%);
    z-index: 400;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    width: 260px;
    min-width: 260px;
    box-shadow: 4px 0 32px rgba(0,0,0,.6);
  }
  .sidebar.open {
    transform: translateX(0);
  }

  /* ── Sidebar overlay backdrop ──────────────────────────── */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 399;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .sidebar-overlay.open { display: block; }

  /* ── Topbar ────────────────────────────────────────────── */
  .topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .topbar-title {
    font-size: .84rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hamburger always visible */
  .sidebar-toggle-btn {
    display: flex !important;
    padding: 7px;
    font-size: .95rem;
  }

  /* ── Pages padding ─────────────────────────────────────── */
  .page { padding: 14px 12px; }

  /* ── Page header ───────────────────────────────────────── */
  .page-header { margin-bottom: 14px; }
  .page-header-left h2 { font-size: 1rem; }
  .page-header-left p  { font-size: .77rem; }

  /* ── Content area fills screen without sidebar ─────────── */
  .content { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   2. GRIDS — Stats, Dashboard, Wallet, Profile, Admin
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .stats-grid         { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stats-admin-grid   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dash-grid          { grid-template-columns: 1fr; }
  .wallet-grid        { grid-template-columns: 1fr; }
  .profile-grid       { grid-template-columns: 1fr; }
  .order-layout       { grid-template-columns: 1fr; }
  .form-row-2         { grid-template-columns: 1fr; }
  .form-row-3         { grid-template-columns: 1fr 1fr; }
  .crypto-grid        { grid-template-columns: repeat(3, 1fr); }
  .admin-panel-bal-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

@media (max-width: 480px) {
  .stats-grid         { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stats-admin-grid   { grid-template-columns: 1fr 1fr; gap: 6px; }
  .form-row-3         { grid-template-columns: 1fr; }
  .crypto-grid        { grid-template-columns: repeat(2, 1fr); }
  .admin-panel-bal-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
}

@media (max-width: 380px) {
  .stats-grid         { grid-template-columns: 1fr; }
  .stats-admin-grid   { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   3. TOPBAR RIGHT — hide labels on small screens
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Hide panel balance chips */
  #panelBalanceChips,
  .panel-bal-chip     { display: none !important; }

  /* Compact balance chip */
  .balance-chip .pbc-name { display: none; }
  .balance-chip {
    padding: 5px 8px;
    font-size: .74rem;
  }

  /* Hide button text labels in topbar */
  .topbar-right .btn span { display: none; }
  .topbar-right .btn { padding: 6px 9px; }
}

/* ═══════════════════════════════════════════════════════════
   4. ADMIN TABS — scrollable pill tabs on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding-bottom: 0;
    margin-bottom: 14px;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }

  .admin-tab {
    font-size: .74rem;
    padding: 7px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .admin-tab i { font-size: .7rem; }
}

/* ═══════════════════════════════════════════════════════════
   5. TABLES — horizontal scroll + compact on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
  }

  table.vf-table {
    min-width: 500px;   /* ensures horizontal scroll kicks in */
    font-size: .78rem;
  }
  .vf-table th { padding: 7px 8px; font-size: .68rem; }
  .vf-table td { padding: 8px 8px; }

  /* Admin users table — hide some cols on mobile */
  .vf-table .hide-mobile { display: none; }
}

@media (max-width: 480px) {
  table.vf-table { min-width: 420px; font-size: .75rem; }
}

/* ═══════════════════════════════════════════════════════════
   6. CARDS — compact padding on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .card { padding: 14px 12px; }
  .stat-card { padding: 13px 12px; }
  .stat-value { font-size: 1.25rem; }

  /* Wallet balance card */
  .wallet-balance-value { font-size: 1.8rem; }
  .wallet-stats { flex-wrap: wrap; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   7. MODALS — full-screen friendly on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal-overlay { padding: 8px; align-items: flex-end; }

  .modal {
    max-width: 100%;
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 92dvh;
    padding: 18px 16px;
  }

  /* React inline modals (fixed overlay pattern) */
  div[style*="position: fixed"][style*="align-items: center"][style*="justify-content: center"] > div {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 8px !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   8. TOAST — full width on small screens
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #toast-container {
    top: 10px;
    right: 8px;
    left: 8px;
  }
  .toast {
    min-width: unset;
    max-width: 100%;
    width: 100%;
    font-size: .8rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   9. SUPPORT / CHAT — mobile chat layout
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Support ticket list */
  .support-list-table { font-size: .78rem; }

  /* Chat reply box */
  .reply-box-textarea { min-height: 70px !important; font-size: .85rem; }

  /* Make reply button full-width on mobile */
  .reply-send-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   10. ADMIN SETTINGS — grid columns stack on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Settings 2-col grids → 1 col */
  div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Fallback chain priority cols → stacked */
  div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   11. BUTTONS — bigger tap targets on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .btn-xs { padding: 5px 9px; font-size: .73rem; }
  .btn-sm { padding: 7px 12px; font-size: .8rem; }

  /* Quick amount buttons wrap nicely */
  .quick-amounts { gap: 6px; }
  .quick-amount  { padding: 6px 12px; font-size: .78rem; }
}

/* ═══════════════════════════════════════════════════════════
   12. SIDEBAR USER PILL — compact on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .user-pill { padding: 8px; }
  .user-name { font-size: .8rem; }
  .user-balance { font-size: .71rem; }

  .sidebar-nav { padding: 10px 8px; }
  .nav-item { padding: 10px 10px; font-size: .85rem; }  /* bigger tap target */
  .nav-item i { font-size: .85rem; width: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   13. STAT CARDS — better mobile layout
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .stat-card { padding: 11px 10px; gap: 4px; }
  .stat-icon { width: 30px; height: 30px; font-size: .78rem; margin-bottom: 3px; }
  .stat-label { font-size: .72rem; }
  .stat-value { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════
   14. ORDER / CAMPAIGN LAYOUT
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Services list max-height adjust for mobile */
  .services-list {
    max-height: 280px;
  }

  /* Order form card — not sticky on mobile */
  .order-form-card { position: static; }

  /* Campaign card actions row */
  .camp-actions { flex-wrap: wrap; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════
   15. ADMIN USERS TABLE — action buttons compact on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Stack action buttons vertically or wrap */
  .td-actions { flex-wrap: wrap; gap: 4px; }
  .btn-xs i + span { display: none; } /* hide button text, keep icon */
}

/* ═══════════════════════════════════════════════════════════
   16. SEARCH BOX — full width on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .search-box { width: 100%; max-width: 100% !important; }
  .search-box input { width: 100%; }

  /* Filter rows → wrap */
  .orders-filters { flex-wrap: wrap; gap: 5px; }
}

/* ═══════════════════════════════════════════════════════════
   17. DASHBOARD WELCOME CARD
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .dash-welcome {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 14px;
    gap: 10px;
  }
  .dash-welcome-title { font-size: .95rem; }
  .dash-welcome-sub { font-size: .77rem; }
}

/* ═══════════════════════════════════════════════════════════
   18. ORGANIC STRATEGY BUILDER — mobile tweaks
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Curve buttons scroll horizontally */
  .os-curve-btn {
    min-width: 70px;
    padding: 6px 8px 5px !important;
  }
  .os-curve-btn .os-curve-sparkline { width: 44px; height: 18px; }
  .os-curve-btn .os-curve-label { font-size: .68rem; }

  /* Slot table — scroll */
  .os-slot-table { font-size: .71rem; }
  .os-slot-table th,
  .os-slot-table td { padding: 3px 4px; }
}

/* ═══════════════════════════════════════════════════════════
   19. PAGINATION — compact on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .pagination { gap: 3px; margin-top: 10px; }
  .page-btn { width: 28px; height: 28px; font-size: .75rem; }
  .page-info { font-size: .74rem; }
}

/* ═══════════════════════════════════════════════════════════
   20. MISC — Small phone fine-tuning
═══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .page { padding: 10px 8px; }
  .topbar { padding: 0 8px; }
  .topbar-title { font-size: .78rem; max-width: 100px; }
  .card { padding: 11px 10px; }

  .admin-tab { font-size: .69rem; padding: 6px 8px; }

  /* Balance chip minimal */
  .balance-chip { padding: 4px 7px; font-size: .71rem; }
}

/* ═══════════════════════════════════════════════════════════
   21. PREVENT ZOOM ON INPUT FOCUS (iOS Safari fix)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;  /* prevents iOS auto-zoom */
  }

  /* But keep our custom font sizes for display — override back for styled components */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   22. TOUCH — better tap feedback
═══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects that don't make sense on touch */
  .nav-item:hover { background: none; color: var(--fg3); }
  .nav-item.active:hover { background: var(--accent-bg); color: var(--fg); }

  /* Remove hover table row highlight */
  .vf-table tbody tr:hover { background: transparent; }

  /* Better active state for touch */
  .btn:active { opacity: .75; transform: scale(.98); }
  .nav-item:active { background: var(--surface2) !important; }
  .cat-tab:active { opacity: .8; }
}

/* ═══════════════════════════════════════════════════════════
   23. SAFE AREA — iPhone notch / home indicator
═══════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  .sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .topbar {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}

/* ═══════════════════════════════════════════════════════════
   24. SCROLLBAR — hide on touch devices
═══════════════════════════════════════════════════════════ */
@media (hover: none) {
  ::-webkit-scrollbar { width: 0; height: 0; }
  .admin-tabs::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   25. ADMIN SUPPORT CHAT — mobile optimized
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Chat message bubbles */
  .card[style*="marginLeft"][style*="marginRight"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Back button + title row in ticket detail */
  div[style*="align-items: center"][style*="gap: 10"][style*="margin-bottom: 16"] {
    flex-wrap: wrap;
    gap: 7px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   26. WALLET PAGE — deposit form mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .wallet-balance-value { font-size: 1.6rem; }
  .deposit-card { padding: 16px 14px; }
  .deposit-amount-row { flex-direction: column; gap: 6px; }
  .deposit-amount-row .form-input { width: 100%; }
  .deposit-amount-row .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   27. SERVICE SEARCH DROPDOWN — mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .svc-search-panel {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    max-height: 65dvh !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   28. ADMIN PANEL — inline grid fixes
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Admin stats row flex-wrap */
  div.admin-section > div[style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* Admin filter bar */
  div[style*="display: flex"][style*="gap: 8"][style*="margin-bottom"] {
    flex-wrap: wrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   29. REACT INLINE GRID OVERRIDES
   React components use inline style — these override them
   on small screens using attribute selectors
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Any inline grid with 1fr 1fr → single column */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="gridTemplateColumns: '1fr 1fr'"] {
    grid-template-columns: 1fr !important;
  }

  /* Table action buttons wrap */
  td > div[style*="display: flex"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Header rows wrap */
  div[style*="justify-content: space-between"][style*="flex-wrap"] {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 480px) {
  /* Compact modal content padding */
  div[style*="padding: '20px 22px'"] {
    padding: 14px 12px !important;
  }
  div[style*="padding: '16px 18px'"] {
    padding: 12px 10px !important;
  }

  /* Full-width buttons on small screens */
  div[style*="justify-content: flex-end"] > .btn {
    flex: 1;
    justify-content: center;
  }

  /* flex-end container must also wrap so buttons don't overflow */
  div[style*="justify-content: flex-end"] {
    flex-wrap: wrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   30. LANDSCAPE MOBILE — extra tweaks
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: landscape) {
  .sidebar {
    height: 100dvh;
    overflow-y: auto;
  }
  .page { padding: 10px 12px; }
  .page-header { margin-bottom: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   31. TOPBAR BELL DROPDOWN — mobile position fix
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Bell notification dropdown — don't go off-screen */
  .topbar-bell > div[style*="position: absolute"] {
    right: 0 !important;
    left: auto !important;
    width: calc(100vw - 16px) !important;
    max-width: 340px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   32. ORGANIC STRATEGY BUILDER MODAL — footer action buttons
   Fix: Cancel / Save / Execute buttons not wrapping on mobile.
   The footer div uses inline style justifyContent:'flex-end'
   which React renders as justify-content:flex-end in the DOM.
   On narrow screens all 3 buttons must wrap into a column.
═══════════════════════════════════════════════════════════ */

/* ── Tablet (≤768px): wrap + equal-width buttons ── */
@media (max-width: 768px) {
  /* Target the modal inner content wrapper (padding: 20px) */
  div[style*="padding: 20px"] > div[style*="justify-content: flex-end"],
  div[style*="padding:20px"]  > div[style*="justify-content: flex-end"] {
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }

  div[style*="padding: 20px"] > div[style*="justify-content: flex-end"] > .btn,
  div[style*="padding:20px"]  > div[style*="justify-content: flex-end"] > .btn {
    flex: 1 1 auto !important;
    min-width: 100px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ── Phone (≤480px): full-width stacked column ── */
@media (max-width: 480px) {
  /* Organic Strategy modal overlay — reduce padding so buttons have room */
  div[style*="position: fixed"][style*="z-index: 10000"] {
    padding: 8px !important;
  }

  /* Modal panel — no side margin wasted */
  div[style*="position: fixed"][style*="z-index: 10000"] > div[style*="max-width: 960"] {
    margin: 8px auto !important;
    border-radius: 12px !important;
  }

  /* Footer row → full-width stacked buttons */
  div[style*="justify-content: flex-end"][style*="border-top"] {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding-top: 12px !important;
  }

  div[style*="justify-content: flex-end"][style*="border-top"] > .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 16px !important;
    font-size: .88rem !important;
  }

  /* Also covers the generic case (wallet, etc.) */
  div[style*="justify-content: flex-end"] {
    flex-wrap: wrap !important;
  }
  div[style*="justify-content: flex-end"] > .btn {
    flex: 1 1 120px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ── Very small phone (≤380px): extra breathing room ── */
@media (max-width: 380px) {
  div[style*="justify-content: flex-end"][style*="border-top"] > .btn {
    font-size: .82rem !important;
    padding: 9px 12px !important;
  }
}