/* Container */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .container { padding: 0 12px; }
}

/* Hide/show utilities */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
}

@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}

@media (max-width: 1200px) {
  .wide-only { display: none !important; }
}

/* Global token logo styles */
.token-logo {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
}

.token-logo-fallback {
  border-radius: 50%;
  background: var(--bg-input);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  vertical-align: middle;
}

/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
  .pair-row {
    min-height: 38px;
  }

  .ob-row, .trade-row {
    min-height: 32px;
  }

  .markets-table td { padding: 14px 8px; }

  button, a {
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent zoom on input focus in iOS */
  input[type="number"],
  input[type="text"],
  input[type="email"],
  select {
    font-size: 16px;
  }
}

/* Safe area for notched phones - general */
@supports (padding-top: env(safe-area-inset-top)) {
  .navbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--navbar-h) + env(safe-area-inset-top));
  }
}

/* Navbar sticky fix for mobile Safari */
@media (max-width: 768px) {
  .navbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-trade-tabs {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Smooth scrolling for iOS */
@media (max-width: 768px) {
  .pairs-list,
  .recent-trades__list,
  .pair-modal__list {
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent horizontal overflow — only on body, NOT html (html overflow breaks position:sticky) */
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Ensure nothing overflows viewport — BUT NOT navbar (dropdowns need overflow visible) */
  .hero, .container, .page-container,
  .trading-layout, .account-layout, .account-content,
  main, section, footer {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* High DPI fix for thin borders */
@media (-webkit-min-device-pixel-ratio: 2) {
  .ob-row__bg {
    opacity: 0.1;
  }
}

/* ============================================
   FUTURES PAGE MOBILE
   ============================================ */
@media (max-width: 768px) {
  .fut-subheader {
    height: auto;
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .fut-pair { font-size: 16px !important; }
  .fut-stat { padding: 0 6px; border-left: none; }
  .fut-pair + .fut-stat { padding-left: 2px; }
  .fut-stat__label { font-size: 9px; }
  .fut-stat__value { font-size: 12px; }
  .fut-funding { font-size: 11px; padding: 4px 8px; }

  /* Futures grid → stacked mobile with tabs like spot */
  .trading-layout[style*="grid-template-columns:380px"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    height: calc(100vh - var(--navbar-h) - 80px - 52px) !important;
    overflow: hidden;
  }

  /* Hide pairs sidebar on mobile */
  .trading-layout .pairs-panel { display: none !important; }

  /* Trade panel — fullscreen slide-in ONLY on futures (has .fut-subheader sibling) */
  .fut-subheader ~ .trading-layout .trade-panel {
    position: fixed;
    top: var(--navbar-h);
    left: 0; right: 0; bottom: 52px;
    z-index: 200;
    background: var(--bg-primary);
    overflow-y: auto;
    padding: 12px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .fut-subheader ~ .trading-layout .trade-panel.mobile-open {
    transform: translateX(0);
  }

  /* Futures long/short buttons */
  .fut-long-short button { padding: 12px 0 !important; font-size: 14px !important; }
  .fut-submit-btn { padding: 12px 0 !important; font-size: 14px !important; }
  .fut-leverage__presets button { padding: 6px 0; font-size: 12px; }

  /* Leverage slider — bigger touch target */
  .lev-slider { height: 40px; }
  .lev-slider__thumb { width: 20px !important; height: 20px !important; }

  /* Positions panel */
  .fut-positions__tabs { overflow-x: auto; }
  .fut-positions__tabs button { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
}

/* ============================================
   DEPOSIT / WITHDRAW PAGES MOBILE
   ============================================ */
@media (max-width: 768px) {
  .dep-layout, .wd-layout {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .dep-main, .wd-main { min-width: 0 !important; }
  .dep-aside, .wd-aside { flex: unset !important; width: 100% !important; }

  /* Coin selector dropdown — compact popup on mobile */
  .coin-select__dropdown {
    position: fixed !important;
    top: 50% !important; left: 50% !important;
    right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 360px !important;
    max-height: 60vh !important;
    border-radius: 14px !important;
    z-index: 1000;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  }
  .coin-select__item { padding: 10px 14px !important; }
  .coin-select__item img { width: 24px !important; height: 24px !important; }
  .coin-select__item-info strong { font-size: 14px !important; }
  .coin-select__item-info span { font-size: 11px !important; }
  .coin-select__search input { font-size: 16px !important; padding: 10px 12px !important; }

  /* Coin select trigger — keep compact after selection */
  .coin-select__trigger { padding: 10px 14px !important; }
  .coin-select__trigger img { width: 24px !important; height: 24px !important; }
  .coin-select__trigger-text strong { font-size: 14px !important; }
  .coin-select__trigger-text span { font-size: 11px !important; }

  /* Deposit/withdraw history table compact */
  .dep-history-table, .wd-history-table { font-size: 11px; }
  .dep-history-table th, .dep-history-table td,
  .wd-history-table th, .wd-history-table td { padding: 6px 4px; font-size: 11px; }
  .dep-history-table, .wd-history-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Generic history/recent tables in deposit/withdraw */
  .dep-aside table, .wd-aside table,
  .dep-main table, .wd-main table { font-size: 11px; }
  .dep-aside table th, .dep-aside table td,
  .wd-aside table th, .wd-aside table td,
  .dep-main table th, .dep-main table td,
  .wd-main table th, .wd-main table td { padding: 6px 5px; white-space: nowrap; }
  .dep-aside h3, .wd-aside h3, .dep-main h3, .wd-main h3 { font-size: 16px; margin-bottom: 8px; }

  /* Network pills */
  .network-pills, [class*="network"] {
    flex-wrap: wrap;
  }

  /* QR code */
  .dep-address-card__qr { width: 160px; height: 160px; }
  .dep-address-card__qr canvas, .dep-address-card__qr img { max-width: 160px; max-height: 160px; }

  /* Address display — word break */
  .dep-address-card__addr, [class*="addr"] {
    word-break: break-all;
    font-size: 13px;
  }

  /* Withdraw form fields */
  .wd-field input, .wd-field textarea {
    font-size: 16px !important;
  }

  /* Summary card */
  .wd-summary, .dep-summary {
    font-size: 13px;
  }
}

/* ============================================
   WALLET PAGE MOBILE
   ============================================ */
@media (max-width: 768px) {
  .asset-actions {
    flex-direction: row;
    gap: 3px;
    flex-wrap: nowrap;
  }
  .asset-actions a {
    font-size: 9px;
    padding: 4px 6px;
    text-align: center;
    border-radius: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
  }
  .asset-cell__full { font-size: 11px; }
  .asset-cell img { width: 24px !important; height: 24px !important; }
}

/* ============================================
   STAKING PAGE MOBILE
   ============================================ */
@media (max-width: 768px) {
  .stakes-table { font-size: 12px; }
  .stakes-table th, .stakes-table td { padding: 8px 6px; }
  .claim-btn, .unstake-btn { padding: 6px 10px; font-size: 11px; }

  .staking-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }

  .staking-hero { padding: 16px 12px !important; }
  .staking-hero h1 { font-size: 22px !important; }
  .staking-hero p { font-size: 13px !important; margin-bottom: 12px !important; }
  .staking-hero__stats { flex-wrap: wrap; gap: 10px; }
  .staking-hero__stat-value { font-size: 18px !important; }
  .staking-hero__stat-label { font-size: 10px !important; }

  .stake-card { padding: 16px !important; border-radius: 10px !important; }
  .stake-card__header { gap: 10px !important; margin-bottom: 10px !important; }
  .stake-card__icon { width: 36px !important; height: 36px !important; }
  .stake-card__icon img { width: 36px !important; height: 36px !important; }
  .stake-card__name { font-size: 15px !important; }
  .stake-card__fullname { font-size: 11px !important; }
  .stake-card__apy { font-size: 24px !important; }
  .stake-card__apy-row { margin-bottom: 10px !important; }
  .stake-card__details { gap: 8px !important; }
  .stake-card__detail { padding: 8px 10px !important; }
  .stake-card__detail-value { font-size: 14px !important; }
  .stake-card__btn { padding: 10px !important; font-size: 14px !important; margin-top: 10px !important; }

  .staking-tabs__nav { gap: 0 !important; }
  .staking-tab-btn { padding: 10px 12px !important; font-size: 13px !important; }
  .staking-filters { gap: 6px !important; padding: 0 !important; margin-bottom: 12px !important; }
  .staking-search { margin-bottom: 8px !important; }

  .stakes-table { font-size: 11px !important; }
  .stakes-table th, .stakes-table td { padding: 6px 5px !important; }
  .claim-btn, .unstake-btn { padding: 4px 8px !important; font-size: 10px !important; }
}

/* ============================================
   NAVBAR MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
  /* Search dropdown — fit on screen */
  .navbar__search-dropdown {
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
    border-radius: 0 0 12px 12px !important;
  }

  /* Navbar actions — compact */
  .navbar__actions { gap: 4px; }
  .navbar__actions .btn-primary,
  .navbar__actions .btn-secondary {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ============================================
   AUTH PAGES MOBILE (login/register)
   ============================================ */
@media (max-width: 768px) {
  .auth-page {
    padding: 12px 12px !important;
    align-items: flex-start !important;
    padding-top: 16px !important;
  }
  .auth-card {
    padding: 20px 16px !important;
    border: none !important;
    background: transparent !important;
    max-width: 100% !important;
  }
  .auth-tabs { margin-bottom: 16px; }
  .auth-tabs a { padding: 10px 0; font-size: 14px; }
  .auth-form { gap: 12px; }
  .auth-field input { padding: 12px 14px !important; font-size: 16px !important; }
  .auth-field label { font-size: 12px; }
  .auth-submit { padding: 14px !important; font-size: 15px !important; margin-top: 0; }
  .auth-divider { margin: 14px 0; }
  .auth-socials { gap: 8px; }
  .auth-social-btn { padding: 8px; font-size: 12px; }
  .auth-footer { margin-top: 16px; font-size: 13px; }
  .auth-forgot { margin-top: -4px; }
  .auth-checkbox span { font-size: 12px; }
  .password-strength { margin-top: 2px; }
}

/* ============================================
   GLOBAL MOBILE IMPROVEMENTS
   ============================================ */
@media (max-width: 768px) {
  /* Better tap targets */
  button, a, .btn-primary, .btn-secondary {
    min-height: 40px;
  }

  /* Tables — better mobile scroll */
  table { font-size: 12px; }
  th, td { padding: 8px 6px; }

  /* Modals — fullscreen on mobile */
  .modal-backdrop .modal,
  .edit-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    margin-top: auto !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Page titles */
  .page-title { font-size: 20px; }

  /* Account sidebar — full width bottom on mobile */
  .account-sidebar {
    display: none;
  }

  /* Hide chart drawing tools on mobile */
  .chart-tools-sidebar { display: none !important; }

  /* Markets table — mobile friendly, no horizontal scroll */
  .markets-table { min-width: 0; }
  .markets-table th:last-child,
  .markets-table td:last-child { display: none; }
  .markets-table th, .markets-table td { padding: 10px 6px; font-size: 11px; }
  .markets-table .coin-name { gap: 6px; }
  .markets-table .coin-name .token-logo,
  .markets-table .coin-name .token-logo-fallback { width: 20px !important; height: 20px !important; }
  .markets-table tr { -webkit-tap-highlight-color: transparent; }

  /* Markets tabs compact */
  .markets-tabs { gap: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .markets-tabs button { padding: 8px 10px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
}