/**
 * Signal Copier Pro - Mobile Optimizations
 *
 * Responsive styles for mobile devices.
 * Import after theme.css for mobile-first overrides.
 */

/* ==========================================================================
   UNIVERSAL MOBILE GUARDS (apply at all viewport sizes)
   2026-06-05 — Operator-requested mobile-responsiveness sweep across
   every screen. These rules patch the most-common mobile failure
   modes WITHOUT requiring every page's inline CSS to know about them:
     1. iOS auto-zooms <input>/<textarea>/<select> when font-size <
        16px. Forcing min-16px on form controls kills the zoom.
     2. Many pages have inline ``width: 1200px`` hero containers
        from the marketing design — those overflow on phones unless
        we cap width to viewport. The clamp leaves desktop unchanged
        (still hits 1200px max).
     3. Long inline strings (URLs, token hashes, signal IDs) overflow
        narrow viewports. ``overflow-wrap: anywhere`` lets them break
        at any char on mobile — desktop sees the same content.
   ========================================================================== */

@media (max-width: 768px) {
  /* iOS zoom prevention. Operator-reported password fields zooming
     in on iPhone — anything that reads "click to fill" but auto-
     zooms is jarring. */
  input:not([type="checkbox"]):not([type="radio"]),
  textarea, select {
    font-size: 16px !important;
  }
  /* Force any inline ``width: 1200px``-style containers to honor the
     viewport. Targeted via attribute so we don't accidentally widen
     icon buttons or other fixed-pixel UI. Caps any element with a
     pixel-width inline style at 100% of its parent on mobile. */
  [style*="width: 1200px"], [style*="width:1200px"],
  [style*="width: 1080px"], [style*="width:1080px"],
  [style*="width: 960px"], [style*="width:960px"],
  [style*="width: 800px"], [style*="width:800px"] {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Long unbreakable strings (URLs, JWTs, ticket IDs, full Discord
     message_ids in the dashboard) overflow narrow phones. Allow them
     to wrap mid-word inside containers explicitly tagged as text. */
  .wrap-anywhere, .copy-target, code, kbd, pre, samp {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Table-scroll wrapper sets a hard ceiling so tables that exceed
     the viewport scroll horizontally instead of pushing the layout
     wider. The HTML wrapping in /static/{trades,forex-accounts,
     privacy,compare/3commas,compare/cornix}.html supplies the
     div — this rule just hardens the behavior. */
  .table-scroll {
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* iOS Safari renders fixed-position elements relative to layout
     viewport, not visual viewport — modals + sidebars that use
     ``position: fixed; top:0; left:0; right:0; bottom:0;`` can leave
     a hairline gap. Belt + suspenders: explicit width/height on the
     common pattern. */
  .modal-overlay, .modal-backdrop {
    width: 100vw !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* ==========================================================================
   MOBILE BREAKPOINTS
   ========================================================================== */

/* Laptop (up to 1024px) */
@media (max-width: 1024px) {
  .hide-laptop {
    display: none !important;
  }
}

/* Tablet (up to 768px) - Logged-in app layout */
@media (max-width: 768px) {
  /* Prevent horizontal scroll globally on mobile */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Stack header + main vertically; fixed sidebar/overlay/bottom-nav don't take flow space */
  .app-shell {
    min-height: 100vh;
    overflow-x: hidden;
    flex-direction: column !important;
  }

  .app-shell .mobile-header {
    width: 100%;
    flex-shrink: 0;
  }

  .app-shell .app-main {
    flex: 1;
    min-width: 0;
    width: 100% !important;
  }

  .app-sidebar {
    position: fixed;
    left: -280px;
    width: 260px;
    z-index: 1001;
    transition: left 0.3s ease;
    height: 100vh;
    top: 0;
    visibility: visible;
  }

  .app-sidebar:not(.open) {
    pointer-events: none; /* don't capture taps when closed */
  }

  .app-sidebar.open {
    left: 0;
    pointer-events: auto;
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .sidebar-overlay.active {
    display: block;
    opacity: 1;
  }

  .app-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding-bottom: 24px !important;
  }

  /* Phase 24c — single source of truth for horizontal gutter on
     mobile. ``.app-content`` was inheriting desktop ``padding:
     var(--space-8)`` (32px) on tablet-portrait widths (481-768px),
     too generous on a 390-414px phone in landscape and on iPad
     mini portrait. Drop to 1rem so cards get full breathing room
     without crowding the viewport edges. */
  .app-content {
    padding: 1rem !important;
  }

  /* Bottom tabbar removed — hamburger drawer is the single nav on mobile.
     Having both was a UX duplication. */
  .bottom-nav,
  .bottom-nav.mobile-only {
    display: none !important;
  }

  /* Mobile header - must show on mobile so user can open sidebar.
     z-index: 1002 so it sits ABOVE the ticker (z=1001) — the menu
     button must always be tappable, ticker is decoration. */
  .mobile-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1002;
    gap: 12px;
  }

  /* When the sidebar drawer is open, hide the mobile-header so the
     hamburger button doesn't float over the open menu. The drawer
     has its own scrim overlay; tapping anywhere outside closes it
     and the header pops back. */
  body.sidebar-open .mobile-header {
    display: none !important;
  }

  .mobile-header .mobile-logo {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mobile-header .mobile-logo-icon {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
  }

  .mobile-menu-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-primary);
  }

  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  /* Bottom nav - fixed at bottom, always horizontal row of 5 items */
  .bottom-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 6px 4px;
    z-index: 999;
    max-height: 56px;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .bottom-nav-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.65rem;
    transition: color 0.2s;
  }

  .bottom-nav-item.active {
    color: var(--color-primary);
  }

  .bottom-nav-item .icon {
    font-size: 1.15rem;
    margin-bottom: 2px;
    flex-shrink: 0;
  }

  /* Grid adjustments */
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .hide-tablet {
    display: none !important;
  }

  /* Inner page header (.app-header) on mobile.
     Hidden by default — page title is already in .mobile-header and the
     stand-alone "Refresh" buttons that most pages put here turn into a
     stray floating chip on mobile. Pull-to-refresh + auto-refresh cover
     the use case.

     Re-shown ONLY when the header contains a real primary action
     (+ New Alert, + Add Account) or filter dropdowns (Analytics) —
     in that case we render it as a flush sticky action bar that sits
     directly under .mobile-header so it reads as part of the page chrome
     instead of a free-floating button. */
  .app-header {
    display: none !important;
  }

  .app-header:has(.btn-primary, .form-select, select) {
    display: flex !important;
    position: sticky !important;
    top: 69px !important;             /* under .mobile-header */
    z-index: 10 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 16px !important;
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Title + status indicator are shown by .mobile-header — hide duplicates. */
  .app-header h1,
  .app-header .status-indicator,
  .app-header > div:has(> h1) {
    display: none !important;
  }

  /* Hide the now-redundant Refresh buttons inside primary-action headers
     (e.g. Analytics still keeps filter dropdowns + a Refresh button — only
     the dropdowns are essential). */
  .app-header .btn-secondary {
    display: none !important;
  }

  /* Tighten dropdowns + small buttons so Analytics' filter row fits. */
  .app-header .form-select,
  .app-header select {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 160px;
    font-size: 0.85rem !important;
    padding: 6px 28px 6px 10px !important;
  }

  /* Table responsiveness.
     Phase 24a — was an UNSCOPED ``table { min-width: 600px }`` which
     forced EVERY table on every page (privacy policy, terms, etc.)
     to be 600px wide, overflowing 390px-wide phones by 242px. Now
     scoped to ``.table-responsive table`` and ``.data-table`` so
     dashboard / admin data grids still get the horizontal-scroll
     treatment but content tables on marketing pages stay fluid. */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .table-responsive table,
  .data-table {
    min-width: 600px;
  }

  /* Compact cards */
  .card {
    border-radius: 8px;
  }

  .card-header {
    padding: 12px 16px;
  }

  .card-header h3 {
    font-size: 0.95rem;
  }

  /* Platform grid for connect page */
  .platforms-grid {
    grid-template-columns: 1fr !important;
  }

  /* Filter/toolbar adjustments */
  .filter-bar,
  .toolbar {
    flex-direction: column;
    gap: 8px;
  }

  .filter-bar input,
  .filter-bar select,
  .filter-input {
    width: 100%;
    min-width: 0 !important;
  }

  /* Exchange card actions - stack on mobile */
  .exchange-card {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .exchange-actions {
    width: 100%;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
  }

  .exchange-info {
    min-width: 0;
    flex: 1;
  }

  .exchange-name {
    word-break: break-word;
  }

  /* Share buttons wrap */
  .share-buttons {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .share-btn {
    flex: 1 1 auto;
    min-width: 100px;
    text-align: center;
  }

  /* Referral items */
  .referral-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Analytics tabs scroll */
  .analytics-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  .analytics-tabs .tab,
  .analytics-tabs button {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Alert card layout */
  .alert-header {
    flex-wrap: wrap !important;
    gap: 0.5rem;
  }

  .alert-footer {
    flex-wrap: wrap !important;
    gap: 0.5rem;
  }

  /* Pricing - profit share rates */
  .profit-share-rates {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  /* Billing toggle */
  .billing-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Standard mobile (up to 480px) */
@media (max-width: 480px) {
  /* Phase 24c — gutter is owned by ``.app-content`` (set in the
     768px block above). Was ``.app-main { padding: 12px }`` here
     stacking on top of ``.app-content { padding: 0 }``, which
     gave only 12px each side — too tight. Now ``.app-main`` has
     no horizontal padding and ``.app-content`` provides the
     gutter, tightening from 1rem to 0.75rem on small phones. */
  .app-main {
    padding: 0 !important;
    padding-bottom: 24px !important;
  }
  .app-content {
    padding: 0.75rem !important;
  }

  /* Stack ALL grids to single column */
  .stats-grid,
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Compact stat cards */
  .stat-card {
    padding: 12px;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  /* Form elements touch-friendly */
  input, select, textarea {
    min-height: 44px;
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  .btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  /* Modal as bottom-sheet on mobile */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal-overlay .modal,
  .modal-overlay .modal-content {
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Tighten padding on mobile so 16px form fields actually fit
       inside a 390px viewport with breathing room. */
    padding: 1rem !important;
    /* Long URLs / instructions sometimes contain unbreakable strings
       (e.g. ``my.telegram.org``); force them to wrap rather than
       extending the modal body past the viewport. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* Modals built via Components.modal pack instruction-box +
     form-groups stacked. On mobile they need explicit full-width
     and vertical stacking to avoid horizontal overflow. */
  .modal-overlay .form-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .modal-overlay .form-row > *,
  .modal-overlay .form-input,
  .modal-overlay .form-select,
  .modal-overlay textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .modal-overlay .form-group {
    margin-bottom: 1rem;
  }
  .modal-overlay .instruction-box,
  .modal-overlay .info-box {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem;
  }
  .modal-overlay .modal-header {
    padding: 1rem !important;
  }
  .modal-overlay .modal-footer {
    padding: 1rem !important;
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }
  .modal-overlay .modal-footer .btn {
    flex: 1 1 auto;
    white-space: nowrap;
  }

  /* Bottom navigation */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 6px 4px;
    z-index: 100;
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 2px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.65rem;
    transition: color 0.2s;
  }

  .bottom-nav-item.active {
    color: var(--color-primary);
  }

  .bottom-nav-item .icon {
    font-size: 1.15rem;
    margin-bottom: 2px;
  }

  /* Tabs - scrollable */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  .tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Exchange cards - full stack on small phones */
  .exchange-card {
    padding: 0.75rem !important;
  }

  .exchange-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }

  .exchange-badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }

  /* Exchanges grid on standalone page */
  .exchanges-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reward boxes */
  .reward-boxes {
    grid-template-columns: 1fr !important;
  }

  /* 2FA inputs */
  .verification-inputs input,
  .mfa-inputs input {
    width: 38px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
  }

  /* Footer links */
  .footer-links {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  /* Terminal code block on landing */
  .terminal,
  .code-block,
  pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 0.75rem !important;
  }

  /* Leaderboard modal grids */
  .leaderboard-detail-grid,
  .modal .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Small phones (up to 375px) */
@media (max-width: 375px) {
  :root {
    --font-size-base: 0.85rem;
    --font-size-lg: 0.95rem;
  }

  .card-header h3 {
    font-size: 0.85rem;
  }

  .stat-value {
    font-size: 1.1rem;
  }

  /* Phase 24c — small phones (iPhone SE / mini). Was
     ``.app-main { padding: 8px }`` with the 80px bottom-nav
     reserve; bottom nav is hidden on mobile (single hamburger
     drawer is the nav now), so the reserve was dead space.
     Tighten ``.app-content`` instead — that's where the gutter
     lives now. */
  .app-content {
    padding: 0.5rem !important;
  }
}

/* ==========================================================================
   MOBILE UTILITIES
   ========================================================================== */

/* Desktop: hide mobile header and bottom nav (they're for mobile only) */
@media (min-width: 769px) {
  .mobile-header {
    display: none !important;
  }

  .mobile-only {
    display: none !important;
  }
}

/* Mobile: show mobile-only elements (bottom nav); mobile-header is shown in 768px block above */
@media (max-width: 768px) {
  .mobile-only {
    display: flex !important; /* flex for bottom-nav layout */
  }

  .desktop-only {
    display: none !important;
  }
}

/* ==========================================================================
   AUTH PAGES MOBILE (login, register, forgot-password, reset-password)
   ========================================================================== */
@media (max-width: 768px) {
  .auth-page {
    padding: 16px;
  }

  .auth-container,
  .container {
    max-width: 100% !important;
    padding: 16px !important;
    margin: 16px auto !important;
  }

  .auth-card,
  .form-card {
    padding: 20px !important;
    border-radius: 12px !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Auth decorative elements */
  .floating-orb,
  .auth-decoration {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .auth-container,
  .container {
    padding: 12px !important;
    margin: 8px auto !important;
  }

  .auth-card,
  .form-card {
    padding: 16px !important;
  }

  .auth-title,
  .auth-container h1,
  .auth-page h1 {
    font-size: 1.5rem !important;
  }
}

/* ==========================================================================
   LANDING PAGE MOBILE (index.html)
   ========================================================================== */
@media (max-width: 768px) {
  /* Navigation - scope to landing page nav only */
  .nav-container {
    padding: 12px 16px;
  }

  .nav-actions .btn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  /* Hero - needs enough top padding for the fixed nav (~70px) */
  .hero {
    padding: 100px 16px 40px !important;
    text-align: center;
  }

  .hero h1 {
    font-size: 2rem !important;
    line-height: 1.2;
  }

  .hero p {
    font-size: 1rem !important;
  }

  .hero-cta {
    flex-direction: column;
    gap: 12px;
  }

  .hero-cta .btn {
    width: 100%;
  }

  /* Sections */
  section {
    padding: 40px 16px !important;
  }

  .section-title {
    font-size: 1.5rem !important;
  }

  /* Feature grid */
  .features-grid,
  .steps-grid,
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stats */
  .stats-bar {
    flex-direction: column;
    gap: 16px;
  }

  .stat-number {
    font-size: 1.75rem !important;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pricing cards */
  .pricing-card {
    padding: 20px !important;
  }
}

/* ==========================================================================
   SETTINGS PAGE MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  /* settings.html now uses the same .app-sidebar as every other page,
     so a single rule covers both classes. Kept .sidebar as a fallback
     for any cached asset or page that hasn't been updated. */
  .sidebar,
  .app-sidebar {
    position: fixed !important;
    left: -280px !important;
    width: 260px !important;
    z-index: 1001 !important;
    transition: left 0.3s ease !important;
    height: 100vh !important;
    top: 0 !important;
  }

  .sidebar.open,
  .app-sidebar.open {
    left: 0 !important;
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Settings form layout */
  .form-grid,
  .exchange-grid,
  .channel-grid {
    grid-template-columns: 1fr !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Settings cards */
  .settings-card {
    padding: 16px !important;
  }
}

/* ==========================================================================
   SPECIFIC PAGE FIXES
   ========================================================================== */

/* Analytics page */
@media (max-width: 768px) {
  .channel-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .channel-cards {
    grid-template-columns: 1fr !important;
  }

  .pair-performance {
    grid-template-columns: 1fr !important;
  }
}

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

/* Alerts page */
@media (max-width: 768px) {
  .alert-types-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Exchanges page */
@media (max-width: 768px) {
  .exchange-stats {
    grid-template-columns: 1fr !important;
  }

  .exchanges-grid {
    grid-template-columns: 1fr !important;
  }

  .limits-banner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

/* Security page */
@media (max-width: 480px) {
  .backup-codes {
    grid-template-columns: 1fr !important;
  }

  .verification-input {
    width: 40px !important;
    height: 48px !important;
  }
}

/* Onboarding page */
@media (max-width: 768px) {
  .progress-steps {
    flex-direction: column;
    gap: 8px;
  }

  .step-card {
    padding: 16px !important;
  }
}

/* Help page */
@media (max-width: 768px) {
  .help-grid {
    grid-template-columns: 1fr !important;
  }

  .chat-card {
    height: auto !important;
    min-height: 400px;
  }
}

/* Admin page */
@media (max-width: 768px) {
  .admin-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Override inline grid-template-columns on admin page */
  .app-main div[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  .app-main div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

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

  .app-main div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* Docs page */
@media (max-width: 768px) {
  .docs-sidebar {
    display: none;
  }

  .docs-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* Leaderboard modal */
@media (max-width: 768px) {
  .leaderboard-detail-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Trades edit modal - stack grids */
  #edit-trade-info > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .action-section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .leaderboard-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Pricing page */
@media (max-width: 768px) {
  .profit-share-rates {
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
  }

  .profit-share-rates .rate-item {
    flex: 1 1 calc(50% - var(--space-3));
    min-width: 0;
    text-align: center;
  }

  .billing-toggle {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .pricing-page,
  .pricing-wrapper {
    padding: var(--space-4) !important;
  }
}

@media (max-width: 480px) {
  .profit-share-rates .rate-item {
    flex: 1 1 100%;
  }
}

/* Referrals page */
@media (max-width: 768px) {
  .referral-stats-grid,
  .reward-boxes {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .how-it-works-grid,
  .how-it-works {
    grid-template-columns: 1fr !important;
  }

  .referral-link-box {
    flex-direction: column;
  }

  .referral-link-box input {
    width: 100%;
  }
}

/* Journal page */
@media (max-width: 1024px) {
  .calendar-wrapper {
    grid-template-columns: 1fr !important;
  }

  .insight-grid,
  .calc-grid {
    grid-template-columns: 1fr !important;
  }

  .daily-panel {
    position: static !important;
  }
}

@media (max-width: 768px) {
  /* The tab strip container is <div class="tabs"> — its horizontal scroll is
     already handled by .tabs (theme.css + mobile.css). An old .journal-tabs
     rule here targeted a class that does not exist in the markup, so it was
     removed. The items ARE <a class="journal-tab">, so keep them from wrapping
     or shrinking so the .tabs container scrolls them instead of squashing. */
  .journal-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .trade-review-details {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .trade-review-meta {
    flex-wrap: wrap;
  }

  .trade-filter-bar {
    flex-direction: column;
  }

  .trade-filter-bar select,
  .trade-filter-bar input {
    width: 100%;
  }

  /* Calendar header: the desktop .calendar-month-label { min-width: 180px }
     floor can't shrink, so on narrow phones the nav row (< label >) plus the
     'Today' button exceed the card width and the button/chevron get clipped
     off the right edge (the global overflow-x:hidden guard hides the scrollbar
     but not the clipping). Let the label size to its content and let the
     header wrap the 'Today' button to a second row if it still doesn't fit.
     Desktop keeps the 180px floor (journal.html) to avoid month-name jitter. */
  .calendar-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .calendar-nav {
    min-width: 0;
  }

  .calendar-month-label {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .trade-review-details {
    grid-template-columns: 1fr !important;
  }

  .mood-selector {
    justify-content: center;
  }

  .bias-selector {
    flex-direction: column;
  }

  .calendar-day {
    min-height: 40px !important;
    font-size: var(--font-size-xs) !important;
  }

  .daily-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   TOUCH OPTIMIZATIONS
   ========================================================================== */

/* Larger tap targets */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}

/* Remove hover effects on touch */
@media (hover: none) {
  .btn:hover,
  .card:hover,
  a:hover {
    transform: none;
  }

  .btn:active {
    transform: scale(0.98);
  }
}

/* Prevent text selection on double-tap */
.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Safe area padding for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
  .mobile-header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  .bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   DARK/LIGHT MODE MOBILE ADJUSTMENTS
   ========================================================================== */

[data-theme="light"] .mobile-header {
  background: var(--bg-card);
}

[data-theme="light"] .bottom-nav {
  background: var(--bg-card);
}

[data-theme="light"] .sidebar-overlay.active {
  background: rgba(0, 0, 0, 0.3);
}