/**
 * ArbiMax Mobile-Responsive Layer
 * ================================
 * Phases 1–15: Mobile-first, app-like experience for trading platform.
 * Covers: responsive layout, bottom nav, app shell, wallet cards, DEX cards,
 * touch targets, modals, safe areas, PWA standalone, performance.
 *
 * Rules:
 *  - Does NOT override desktop layout (all rules scoped to max-width media queries or .mobile-shell-* classes)
 *  - RTL-safe (site is dir="rtl")
 *  - Never breaks live-data flow
 *  - Preserves branding: #0B0C10 bg, #6AAEFF accent, Tajawal font
 */

/* ============================================================
   PHASE 12 — SAFE AREA TOKEN LAYER
   ============================================================ */
: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);
  --mobnav-h:    64px;  /* bottom nav height */
  --hdr-h:       56px;  /* mobile header height */
}

/* ============================================================
   PWA STANDALONE MODE — strip browser chrome padding
   ============================================================ */
@media all and (display-mode: standalone) {
  :root { --safe-top: env(safe-area-inset-top, 44px); }
  body { padding-top: 0; }
}

/* ============================================================
   PHASE 11 — APP-LIKE LOADING EXPERIENCE
   ============================================================ */
#splash-screen {
  /* ensure splash covers safe area on notched phones */
  padding-top: var(--safe-top);
}
/* Clean fallback if splash JS freezes */
html:not(.booting):not(.boot-loading) #splash-screen {
  pointer-events: none;
}

/* ============================================================
   LEGACY NAV SUPPRESSION
   mobile.css line 432 forces #mobile-bottom-nav { display: flex !important }
   CSS !important in a stylesheet beats inline style without !important.
   This rule is loaded AFTER mobile.css so its !important wins the cascade.
   ============================================================ */
#mobile-bottom-nav { display: none !important; }

/* ============================================================
   PHASE 1 — BREAKPOINT: TABLET 768px
   ============================================================ */
@media (max-width: 768px) {

  /* --- Global overflow prevention --- */
  * { max-width: 100%; }
  /* Prevent html/body from becoming scroll containers on both Android and iOS.
     overflow:clip never creates a scroll container, so iOS Safari and Android
     Chrome do NOT consume touch events at the html/body level — they pass
     through to the real scroll container (#main-content).  overflow:hidden
     DOES create a scroll container and intercepts touch events on iOS,
     preventing #main-content from scrolling even with overflow-y:auto set.
     Note: overflow:clip requires Safari 15.4 / Chrome 90. Both are universal
     on any device a trading app would run on in 2025+. */
  html { overflow: clip; }
  body { overflow: clip; overflow-x: clip; }
  html, body { max-width: 100vw; }

  /* --- Font scale down --- */
  :root {
    --am-text-base: 0.9375rem;  /* 15px */
    --am-page-pad:  var(--am-space-4);
    --am-card-pad:  var(--am-space-4);
  }

  /* --- Header compact --- */
  header.top {
    height: var(--hdr-h) !important;
    padding: 0 var(--am-space-3) !important;
    padding-top: var(--safe-top) !important;
  }
  .hdr-meta { display: none !important; }
  header.top h1 { font-size: 16px !important; }

  /* --- Layout: sidebar off-canvas --- */
  #arbimax-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: -280px !important;
    left: auto !important;
    width: 280px !important;
    height: 100dvh !important;
    z-index: 1200 !important;
    transition: right var(--am-duration-normal) var(--am-ease) !important;
    overflow-y: auto;
  }
  body.sidebar-open #arbimax-sidebar {
    right: 0 !important;
  }

  .sidebar-overlay,
  #sidebarOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1199;
    backdrop-filter: blur(2px);
  }
  body.sidebar-open .sidebar-overlay,
  body.sidebar-open #sidebarOverlay { display: block; }

  /* --- Main content: reserve space for bottom nav --- */
  #main-content {
    height: 100%;                 /* fill parent so overflow-y: auto triggers */
    min-height: 0;                /* allow flex child to shrink below content size */
    padding-bottom: calc(var(--mobnav-h) + var(--safe-bottom) + 8px) !important;
    padding-inline: var(--am-space-3) !important;
    padding-top: var(--am-space-4) !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-padding-bottom: calc(var(--mobnav-h) + var(--safe-bottom) + 8px);
    box-sizing: border-box;
    touch-action: pan-y;          /* Android Chrome: explicitly enable vertical scroll */
    will-change: scroll-position; /* promote to own layer for smoother Android scroll */
    display: grid;
    gap: 12px;
    align-content: start;
  }

  #main-content > * {
    min-width: 0;
  }

  #main-content .card,
  #main-content section,
  #main-content .dp-panel,
  #main-content .dp-chart-section,
  #main-content .trading-control-panel,
  #main-content .cex-account-card,
  #main-content .am-kpi,
  #main-content .am-filter,
  #main-content .bot-card {
    margin-bottom: 0 !important;
  }

  /* --- layout-root full width --- */
  #layout-root {
    margin-top: 0 !important; /* cancel sidebar.v2.css global 96px offset on mobile */
    margin-right: 0 !important;
    /* Header height = var(--hdr-h) + var(--safe-top) (notch padding is added
       to the header, not outside it). Subtract both so #layout-root fills
       exactly the remaining viewport without overflowing on notched devices. */
    height: calc(100dvh - var(--hdr-h) - var(--safe-top)) !important;
    overflow: hidden;
  }

  /* Prevent #body-wrapper from acting as a scroll container on mobile.
     The inline style on #body-wrapper sets overflow:hidden which behaves
     identically to body:overflow:hidden — overriding it with clip here
     ensures touch events reach #main-content uninterrupted. */
  #body-wrapper { overflow: clip !important; }

  /* --- Metric/stat grids: 2-column on 768px --- */
  .metric-grid,
  .stats-grid,
  .summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--am-space-3) !important;
  }

  /* --- Cards compact --- */
  .card {
    border-radius: var(--am-radius-lg) !important;
    padding: var(--am-card-pad) !important;
    margin-bottom: var(--am-space-3) !important;
  }

  /* --- General table: horizontal scroll wrapper --- */
  .table-responsive,
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--am-radius-md);
  }

  .data-table { min-width: 500px; }

  /* --- Buttons touch-friendly --- */
  .btn, button:not(.collapse-btn):not([data-no-touch]) {
    min-height: 44px;
    min-width: 44px;
    padding: var(--am-space-2) var(--am-space-4);
  }

  /* --- Inputs larger for touch --- */
  input, textarea, select {
    font-size: 16px !important; /* prevent iOS zoom */
    min-height: 44px;
  }

  /* --- Modal base reset for tablet --- */
  .modal-backdrop { align-items: flex-end !important; }
  .modal,
  [class*="modal-"] .modal-inner {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-height: 90dvh !important;
    overflow-y: auto;
  }

} /* end 768px */

/* ============================================================
   PHASE 1 — BREAKPOINT: MOBILE 480px
   ============================================================ */
@media (max-width: 480px) {

  /* --- Single-column layout --- */
  .metric-grid,
  .stats-grid,
  .summary-grid,
  .card-grid,
  .two-col,
  [class*="grid-cols"] {
    grid-template-columns: 1fr !important;
    gap: var(--am-space-2) !important;
  }

  /* Flex rows that should stack */
  .flex-row-desktop,
  .hdr-left,
  .card-header-actions > * {
    flex-wrap: wrap;
    gap: var(--am-space-2);
  }


  #main-content {
    gap: 10px;
    padding-inline: 10px !important;
    padding-top: 10px !important;
    padding-bottom: calc(var(--mobnav-h) + var(--safe-bottom) + 14px) !important;
  }

  #main-content .btn,
  #main-content button {
    min-height: 46px;
  }

  #main-content table {
    min-width: 560px;
  }

  #main-content .table-responsive,
  #main-content .dp-table-wrap,
  #main-content .wallet-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* --- Page title scale --- */
  .page-title,
  h1.page-title { font-size: var(--am-text-2xl) !important; }
  h2 { font-size: var(--am-text-xl) !important; }
  h3 { font-size: var(--am-text-lg) !important; }

  /* --- Charts: no overflow --- */
  canvas, .chart-container, [id*="chart"], [id*="Chart"] {
    max-width: 100% !important;
    height: auto !important;
  }

} /* end 480px */

/* ============================================================
   PHASE 2 — BOTTOM NAVIGATION BAR
   ============================================================ */

/* The actual nav is injected by mobile-shell.js; CSS provides appearance */
#am-mobile-nav {
  display: none; /* hidden on desktop; JS shows it on mobile */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--mobnav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(11, 12, 16, 0.97);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(106, 174, 255, 0.12);
  z-index: 1100;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
  /* GPU compositing: promotes nav to its own layer for jank-free rendering */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#am-mobile-nav .am-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: var(--mobnav-h);
  padding: 0 4px;
}

#am-mobile-nav .am-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 6px 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  font-family: 'Tajawal', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: color var(--am-duration-fast) ease, transform var(--am-duration-fast) ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

#am-mobile-nav .am-nav-item:active {
  transform: scale(0.95);
}

#am-mobile-nav .am-nav-item .am-nav-icon {
  font-size: 18px;
  line-height: 1;
  transition: transform var(--am-duration-fast) ease;
}

#am-mobile-nav .am-nav-label {
  line-height: 1.1;
  white-space: nowrap;
}

.am-svg-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.am-svg-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Narrower phones: slightly smaller icons */
@media (max-width: 360px) {
  #am-mobile-nav .am-nav-item .am-nav-icon { font-size: 16px; }
  #am-mobile-nav .am-nav-item { font-size: 9px; }
  #am-home-return {
    height: 32px;
    padding: 0 10px 0 9px;
    font-size: 10px;
  }
}

@media (max-width: 390px) {
  #am-mobile-nav .am-nav-item {
    padding: 5px 2px;
    letter-spacing: 0.2px;
  }
  #am-mobile-nav .am-nav-item .am-nav-icon {
    font-size: 17px;
  }
  #am-mobile-nav .am-nav-label {
    font-size: 9px;
  }
  #am-mobile-nav .am-nav-item.active::before {
    width: 18px;
  }
  #am-home-return {
    left: calc(10px + var(--safe-left, 0px));
    bottom: calc(var(--mobnav-h) + var(--safe-bottom) + 12px);
  }
}

#am-mobile-nav .am-nav-item.active {
  color: var(--am-accent, #6AAEFF);
}

#am-mobile-nav .am-nav-item.active .am-nav-icon {
  /* no scale — premium apps keep icons static */
  transform: none;
}

/* Active indicator — thin pill line at top of tab */
#am-mobile-nav .am-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--am-accent, #6AAEFF);
  box-shadow: 0 1px 8px rgba(106,174,255,0.5);
}

/* "More" flyup menu */
#am-more-panel {
  display: none;
  position: fixed;
  bottom: calc(var(--mobnav-h) + var(--safe-bottom) + 8px);
  right: 8px;
  min-width: 180px;
  background: rgba(19, 17, 28, 0.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(106, 174, 255, 0.2);
  border-radius: var(--am-radius-xl);
  padding: var(--am-space-2) 0;
  z-index: 1110;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
  animation: am-slide-up 0.18s ease-out;
}
#am-more-panel.open { display: block; }

@keyframes am-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.am-more-item {
  display: flex;
  align-items: center;
  gap: var(--am-space-3);
  padding: 13px var(--am-space-4);
  color: rgba(255,255,255,0.75);
  font-size: var(--am-text-sm);
  font-family: 'Tajawal', sans-serif;
  cursor: pointer;
  transition: background var(--am-duration-fast) ease, color var(--am-duration-fast) ease;
  touch-action: manipulation;
}
.am-more-item:hover,
.am-more-item:active { background: rgba(106,174,255,0.08); color: #fff; }
.am-more-item .am-more-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.am-more-item .am-more-icon .am-svg-icon,
.am-more-item .am-more-icon .am-svg-icon svg {
  width: 18px;
  height: 18px;
}

.am-more-section-title {
  padding: 8px var(--am-space-4) 4px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.am-more-logout { color: rgba(255,100,100,0.8); border-top: 1px solid rgba(255,255,255,0.07); margin-top: 4px; }
.am-more-logout:hover, .am-more-logout:active { background: rgba(255,80,80,0.10); color: #ff6464; }

/* Global Home return control on inner pages */
#am-home-return {
  position: fixed;
  left: calc(12px + var(--safe-left, 0px));
  bottom: calc(var(--mobnav-h) + var(--safe-bottom) + 14px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(106,174,255,0.28);
  background: rgba(11, 12, 16, 0.92);
  color: rgba(255,255,255,0.82);
  font-family: 'Tajawal', sans-serif;
  font-size: 11px;
  font-weight: 500;
  z-index: 1048;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 3px 14px rgba(0,0,0,0.35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#am-home-return .am-svg-icon,
#am-home-return .am-svg-icon svg {
  width: 15px;
  height: 15px;
}

#am-home-return.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#am-home-return:active {
  transform: scale(0.96);
}

/* ============================================================
   PHASE 2 — COMPACT STICKY MOBILE HEADER
   ============================================================ */
@media (max-width: 768px) {

  /* Ensure header has safe-area top padding when in standalone PWA */
  header.top {
    padding-top: max(var(--safe-top), 0px) !important;
    height: calc(var(--hdr-h) + var(--safe-top)) !important;
  }

  /* Hide non-essential header elements on mobile */
  .hdr-permissions,
  .btn-logout-inline,
  header.top .hdr-meta {
    display: none !important;
  }

  /* Compact brand */
  .hdr-brand h1 { font-size: 16px !important; }
  .brand-logo-anim { width: 36px !important; height: 36px !important; }
  .brand-logo-img  { width: 36px !important; height: 36px !important; }

  /* Collapse/hamburger button — fully hidden on mobile.
     Admin users access admin controls via the floating admin button (FAB). */
  #collapseBtn {
    display: none !important;
  }

  /* Compact role indicator */
  .hdr-role {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }

} /* end header 768px */

/* ============================================================
   PHASE 5+6 — WALLET & DEX MOBILE LAYOUT
   ============================================================ */
@media (max-width: 768px) {

  /* --- Wallet page: stack card sections vertically --- */
  .wallet-layout,
  .wallet-columns,
  [class*="wallet-grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--am-space-3) !important;
  }

  /* Total portfolio figure — hero display */
  .wallet-total-value,
  .portfolio-hero-value,
  [class*="total-balance"] {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    font-family: 'JetBrains Mono', monospace !important;
    color: #fff !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    padding: var(--am-space-4) 0 !important;
  }

  /* Wallet address: truncate with mono font, full-width touch target */
  .wallet-address,
  [class*="dex-address"],
  [class*="wallet-addr"] {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    background: rgba(106,174,255,0.06) !important;
    border: 1px solid rgba(106,174,255,0.2) !important;
    border-radius: var(--am-radius-md) !important;
    padding: 8px 12px !important;
    margin: var(--am-space-2) 0 !important;
    display: block !important;
    cursor: pointer !important;
    user-select: all !important;
  }

  /* --- DEX Token TABLE → CARD transformation --- */
  /* When inside a DEX assets container, convert table rows to cards */
  #dex-assets-table,
  .dex-assets-table,
  [id*="token-table"],
  [class*="token-list-table"] {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Hide table headers on mobile */
  #dex-assets-table thead,
  .dex-assets-table thead,
  [class*="token-list-table"] thead {
    display: none !important;
  }

  /* Table body becomes a flex column of cards */
  #dex-assets-table tbody,
  .dex-assets-table tbody,
  [class*="token-list-table"] tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--am-space-2) !important;
  }

  /* Each table row becomes a card */
  #dex-assets-table tbody tr,
  .dex-assets-table tbody tr,
  [class*="token-list-table"] tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    background: rgba(21, 18, 33, 0.7) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: var(--am-radius-lg) !important;
    padding: var(--am-space-3) !important;
    gap: var(--am-space-1) var(--am-space-2) !important;
  }

  /* Each cell: add data-label prefix */
  #dex-assets-table tbody td,
  .dex-assets-table tbody td,
  [class*="token-list-table"] tbody td {
    display: flex !important;
    flex-direction: column !important;
    font-size: 13px !important;
    border: none !important;
    padding: 2px 4px !important;
  }

  #dex-assets-table tbody td::before,
  .dex-assets-table tbody td::before,
  [class*="token-list-table"] tbody td::before {
    content: attr(data-mobile-label);
    font-size: 10px !important;
    color: rgba(255,255,255,0.45) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }

  /* Action column: full-width button at bottom of card */
  #dex-assets-table tbody tr td:last-child,
  .dex-assets-table tbody tr td:last-child,
  [class*="token-list-table"] tbody tr td:last-child {
    grid-column: 1 / -1 !important;
    margin-top: var(--am-space-1) !important;
    padding-top: var(--am-space-2) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
  }

  /* Swap/Recover/Action buttons in DEX cards: full width */
  #dex-assets-table .btn,
  .dex-assets-table .btn,
  [class*="dex-action"] .btn,
  .token-action-btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* --- CEX Wallet balance cards --- */
  .cex-balance-card,
  .exchange-card,
  [class*="exchange-balance"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--am-space-2) !important;
  }

  /* Wallet transfer buttons: stack on mobile */
  .transfer-actions,
  [class*="wallet-actions"],
  .cex-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--am-space-2) !important;
  }
  .transfer-actions .btn,
  [class*="wallet-actions"] .btn { width: 100% !important; }

} /* end wallet 768px */

/* ============================================================
   PHASE 6 — DEX ASSETS STANDALONE CARD COMPONENT
   ============================================================ */
@media (max-width: 768px) {

  /* Token card class (injected or existing) */
  .am-token-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--am-space-3);
    background: rgba(21, 18, 33, 0.7);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--am-radius-lg);
    padding: var(--am-space-3) var(--am-space-4);
    margin-bottom: var(--am-space-2);
    cursor: default;
  }
  .am-token-card:hover {
    border-color: rgba(106,174,255,0.2);
    background: rgba(21, 18, 33, 0.9);
  }
  .am-token-card .am-token-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(106,174,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }
  .am-token-card .am-token-info { min-width: 0; }
  .am-token-card .am-token-symbol {
    font-weight: 700; font-size: 15px; color: #fff;
  }
  .am-token-card .am-token-name {
    font-size: 11px; color: rgba(255,255,255,0.45);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .am-token-card .am-token-values { text-align: left; flex-shrink: 0; }
  .am-token-card .am-token-balance {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; color: #fff; font-weight: 600;
  }
  .am-token-card .am-token-usd {
    font-size: 11px; color: rgba(255,255,255,0.5);
    direction: ltr; text-align: left;
  }
  .am-token-card .am-token-action {
    margin-top: var(--am-space-2);
    grid-column: 1 / -1;
    padding-top: var(--am-space-2);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; gap: var(--am-space-2);
  }
  .am-token-card .am-token-action .btn {
    flex: 1;
    min-height: 44px !important;
    font-size: 12px !important;
  }

} /* end DEX 768px */

/* ============================================================
   PHASE 7 — TOUCH-FRIENDLY CONTROLS
   ============================================================ */
@media (max-width: 768px) {

  /* All interactive elements: 44px minimum */
  button, .btn, a.btn, input[type="button"], input[type="submit"],
  input[type="reset"], [role="button"] {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Danger actions: extra spacing */
  .btn-danger, .btn.danger,
  [class*="btn-stop"], [class*="btn-kill"],
  button[data-action="stop"], button[data-action="delete"] {
    margin-top: var(--am-space-2) !important;
  }

  /* Bot control buttons */
  .bot-controls, .bot-actions {
    display: flex !important;
    gap: var(--am-space-2) !important;
    flex-wrap: wrap !important;
  }
  .bot-controls .btn, .bot-actions .btn {
    flex: 1;
    min-width: 80px;
    justify-content: center;
  }

  /* Refresh buttons */
  [onclick*="refresh"], [onclick*="reload"], [data-action="refresh"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Checkbox / radio bigger hit area */
  input[type="checkbox"], input[type="radio"] {
    width: 20px !important; height: 20px !important;
    cursor: pointer !important;
  }

} /* end touch 768px */

/* ============================================================
   PHASE 8 — MOBILE MODALS (BOTTOM SHEET PATTERN)
   ============================================================ */
@media (max-width: 768px) {

  /* Modal backdrop */
  .modal-backdrop,
  .modal-overlay,
  [class*="overlay"][class*="modal"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Modal container — bottom sheet */
  .modal,
  .modal-dialog,
  .modal-container,
  [class*="modal-box"],
  [id*="modal-"] > .modal-inner,
  [role="dialog"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border-radius: var(--am-radius-2xl) var(--am-radius-2xl) 0 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: calc(var(--safe-bottom) + var(--am-space-4)) !important;
  }

  /* Drag handle visual cue */
  .modal::before,
  .modal-dialog::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    margin: var(--am-space-3) auto var(--am-space-2);
    flex-shrink: 0;
  }

  /* Modal header: short, sticky */
  .modal-header,
  [class*="modal-title"] {
    flex-shrink: 0;
    padding: var(--am-space-3) var(--am-space-4) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: sticky; top: 0;
    background: inherit;
    z-index: 1;
  }

  /* Scrollable modal body */
  .modal-body,
  .modal-content,
  [class*="modal-body"] {
    flex: 1;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: var(--am-space-4) !important;
    overscroll-behavior: contain;
  }

  /* Sticky modal footer with action buttons */
  .modal-footer,
  [class*="modal-actions"],
  [class*="modal-footer"] {
    flex-shrink: 0 !important;
    padding: var(--am-space-3) var(--am-space-4) !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    display: flex !important;
    gap: var(--am-space-2) !important;
    background: rgba(11,12,16,0.8) !important;
    position: sticky !important;
    bottom: 0 !important;
  }
  .modal-footer .btn,
  [class*="modal-actions"] .btn { flex: 1; min-height: 48px !important; }

  /* Modal close button — large */
  .modal-close, [class*="modal-close"], .btn-close {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Wallet/Swap recovery modal: ensure amount input is large */
  [id*="swap"] input, [id*="recover"] input,
  [id*="transfer"] input {
    font-size: 18px !important;
    height: 56px !important;
    text-align: center !important;
  }

} /* end modals 768px */

/* ============================================================
   PHASE 9 — MOBILE NAVIGATION RELIABILITY (CSS LAYER)
   ============================================================ */
@media (max-width: 768px) {

  /* Prevent navigation lock visual — no stuck overlay visible */
  [id*="nav-lock"], [id*="navLock"], .nav-loading-overlay {
    /* JS watchdog handles timers; CSS ensures overlay can't cover nav */
    animation-duration: 3s;
    z-index: 900 !important; /* below bottom nav at 1100 */
  }

  /* Active SPA transitions: keep bottom nav visible */
  body.navigating #am-mobile-nav { opacity: 0.7; pointer-events: none; }
  body.nav-complete #am-mobile-nav { opacity: 1; pointer-events: auto; }

  /* Prevent content jumps while loading */
  #main-content.page-loading {
    min-height: 200px;
  }

} /* end nav 768px */

/* ============================================================
   PHASE 10 — PERFORMANCE
   ============================================================ */

/* Reduce animation on low-end / battery-saving */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* content-visibility for off-screen sections */
@media (max-width: 768px) {
  .card:not(.above-fold) {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
  }

  /* Disable heavy animations on mobile */
  #am-starfield { display: none !important; }
  #canvas-container { display: none !important; }

  /* Defer non-critical decorative animations */
  .splash-ring { animation-play-state: running; }
  [class*="pulse"], [class*="float"] {
    animation: none !important;
  }
}

/* ============================================================
   PHASE 14 — MOBILE TRADING VIEW
   ============================================================ */
@media (max-width: 768px) {

  /* Bot list: compact card per bot */
  .bot-card,
  .bot-row,
  [class*="bot-item"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--am-space-2) !important;
    padding: var(--am-space-3) !important;
    border-radius: var(--am-radius-lg) !important;
    margin-bottom: var(--am-space-2) !important;
  }

  /* Bot status indicator: larger dot */
  .bot-status-dot,
  [class*="status-indicator"] {
    width: 10px !important; height: 10px !important;
    flex-shrink: 0 !important;
  }

  /* Bot stats: 2-col mini grid */
  .bot-stats, .bot-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--am-space-2);
  }

  /* PnL value: prominent */
  .pnl-value, [class*="pnl-total"],
  [class*="profit-value"] {
    font-size: var(--am-text-2xl) !important;
    font-weight: 700 !important;
    font-family: 'JetBrains Mono', monospace !important;
  }

  /* Trades table: compact rows */
  .trades-table tr,
  [class*="trade-row"] {
    font-size: 12px !important;
  }
  .trades-table td { padding: 8px 6px !important; }

  /* Operations / history: compact list */
  .op-row,
  .operation-row,
  [class*="op-item"] {
    padding: var(--am-space-2) !important;
    font-size: 12px !important;
  }

  /* Markets page: 2-col ticker grid */
  .market-pair-row,
  [class*="market-pair"],
  [class*="pair-row"] {
    display: grid !important;
    grid-template-columns: 1fr auto 80px !important;
    align-items: center !important;
    gap: var(--am-space-2) !important;
    padding: var(--am-space-2) var(--am-space-3) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }

} /* end trading 768px */

/* ============================================================
   PHASE 15 — ERROR PREVENTION
   ============================================================ */

/* Absolute overflow prevention */
@media (max-width: 768px) {
  pre, code, .font-mono {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  /* Wallet address — never overflow */
  [class*="address"], [id*="Address"],
  [class*="hash"], [id*="hash"],
  [class*="txid"], [id*="txid"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Tables with no wrapper: force scroll */
  table:not([class*="am-token"]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Prevent fixed-pos elements above bottom nav: handled by JS in mobile-shell.js */

  /* Toast — avoid bottom nav collision */
  #toast, .toast {
    bottom: calc(var(--mobnav-h) + var(--safe-bottom) + 12px) !important;
    left: var(--am-space-3) !important;
    right: var(--am-space-3) !important;
    max-width: calc(100vw - 2 * var(--am-space-3)) !important;
  }

  /* Error banner — avoid competing with header on notch devices */
  #global-error-banner {
    top: calc(var(--hdr-h) + var(--safe-top)) !important;
  }

  /* Viewport jump bug: dvh units (used above) already handle iOS Safari — keep heights fixed */
  #body-wrapper {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  #layout-root {
    /* height already set to calc(100dvh - var(--hdr-h)) above; ensure no min-height inflation */
    min-height: 0 !important;
  }

} /* end error prevention 768px */

/* ============================================================
   LANDSCAPE MODE — special handling
   ============================================================ */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #am-mobile-nav { display: none !important; }
  #main-content { padding-bottom: var(--safe-bottom) !important; }
  :root { --hdr-h: 44px; }
  header.top { height: 44px !important; }
}

/* ============================================================
   PWA STANDALONE — additional tweaks (iOS + Android installed)
   ============================================================ */
@media all and (display-mode: standalone) {
  header.top {
    padding-top: var(--safe-top) !important;
    height: calc(var(--hdr-h) + var(--safe-top)) !important;
  }

  /* No browser address bar, so layout-root uses full height minus header+status-bar */
  #layout-root {
    height: calc(100dvh - calc(var(--hdr-h) + var(--safe-top))) !important;
    overflow: hidden;
  }

  /* iOS Safari standalone: lock html+body so the ONLY scroll surface is #main-content.
     iOS routes touch-scroll to the first ancestor with overflow-y != visible/clip.
     Locking both here prevents the app chrome from stealing swipe gestures. */
  html, body {
    overflow: hidden !important;
    position: fixed;       /* iOS: prevents body rubber-banding in standalone */
    width: 100%;
    height: 100%;
  }
  #body-wrapper {
    overflow: hidden;
    /* Undo the body:fixed stacking — body-wrapper is the real layout root */
    position: relative;
  }

  /* Explicitly restate scroll properties on the scroll container in standalone context.
     iOS Safari standalone can lose -webkit-overflow-scrolling if the parent
     (body) is position:fixed unless the child restates it. */
  #main-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    /* Bottom padding must account for home indicator in standalone mode */
    padding-bottom: calc(var(--mobnav-h) + env(safe-area-inset-bottom, 20px) + 8px) !important;
  }

  /* Status bar area tint overlay for iOS notched phones */
  body::before {
    content: '';
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--safe-top);
    background: rgba(11, 12, 16, 0.98);
    z-index: 9999;
    pointer-events: none;
  }
}

/* ============================================================
   UTILITY — show/hide helpers
   ============================================================ */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }

  .mobile-only { display: block !important; }
  .mobile-only.flex { display: flex !important; }
  .mobile-only.grid { display: grid !important; }
  .mobile-only.inline { display: inline !important; }
}
@media (min-width: 769px) {
  .mobile-only { display: none !important; }
  #am-mobile-nav { display: none !important; }
  #am-more-panel { display: none !important; }
  /* Desktop: sidebar is position:fixed (set by sidebar.v2.css).
     Do NOT override position here — sidebar.v2.css handles desktop sidebar
     geometry via fixed positioning + margin-right on #main-content. */
}

/* ============================================================
   PWA INSTALL BANNER
   ============================================================ */
#am-pwa-banner {
  display: none;
  position: fixed;
  bottom: calc(var(--mobnav-h) + var(--safe-bottom) + 8px);
  left: var(--am-space-3);
  right: var(--am-space-3);
  background: rgba(19, 17, 28, 0.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(106,174,255,0.3);
  border-radius: var(--am-radius-xl);
  padding: var(--am-space-3) var(--am-space-4);
  z-index: 1090;
  flex-direction: row;
  align-items: center;
  gap: var(--am-space-3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: am-slide-up 0.3s ease-out;
}
#am-pwa-banner.visible { display: flex; }
#am-pwa-banner .am-pwa-icon { font-size: 28px; flex-shrink: 0; }
#am-pwa-banner .am-pwa-text { flex: 1; }
#am-pwa-banner .am-pwa-title {
  font-weight: 700; font-size: 14px; color: #fff;
  font-family: 'Tajawal', sans-serif;
}
#am-pwa-banner .am-pwa-sub {
  font-size: 12px; color: rgba(255,255,255,0.55);
  font-family: 'Tajawal', sans-serif;
}
#am-pwa-banner .am-pwa-btn {
  background: var(--am-accent, #6AAEFF);
  color: #000;
  border: none;
  border-radius: var(--am-radius-full);
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  touch-action: manipulation;
}
#am-pwa-banner .am-pwa-close {
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 20px; cursor: pointer; padding: 4px; min-width: 32px; min-height: 32px;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}

/* ============================================================
   SCROLLBAR — hide on mobile
   ============================================================ */
@media (max-width: 768px) {
  #main-content::-webkit-scrollbar { display: none; }
  #main-content { scrollbar-width: none; }
}

/* ============================================================
   ADMIN ISOLATION — mobile enforcement (20260407)
   Admin navigation section in account.js is suppressed on mobile;
   all admin access goes through the crown button (FAB + drawer).
   Belt-and-suspenders CSS guard in case isMobileCtx check ever drifts.
   ============================================================ */
body.am-mobile #_acct-admin-section {
  display: none !important;
}

/* ============================================================
   ACCOUNT PAGE — icon container normalization on mobile
   account.js uses 28px icon containers (desktop sizing).
   Shrink to match the mobile dashboard design system.
   ============================================================ */
@media (max-width: 768px) {
  /* Inline icon containers used in account.js rows */
  [id^="_acct-"] [style*="width:28px"],
  [id^="_acct-"] [style*="width: 28px"] {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    border-radius: 6px !important;
  }
  [id^="_acct-"] [style*="width:28px"] svg,
  [id^="_acct-"] [style*="width: 28px"] svg {
    width: 12px !important;
    height: 12px !important;
  }
}

/* ============================================================
   LAYOUT CENTERING FIX
   Ensures mobile pages fill 100% viewport width without shift.
   The sidebar is position:fixed on mobile (out of flex flow) but
   RTL direction + flex may leave residual margin. These rules are
   the authoritative override.
   ============================================================ */
@media (max-width: 768px) {
  #layout-root {
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #main-content,
  .main-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
  }

  /* Sidebar: positon:fixed takes it out of flex flow; ensure zero flex footprint */
  #arbimax-sidebar,
  .sidebar {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    /* width/height set by fixed positioning override below — this only affects flex calc */
  }
}

/* Belt-and-suspenders: body.am-mobile (set by JS) has specificity 0,1,1 which beats
   sidebar.v2.css's #main-content rule (0,0,1), ensuring margin is always 0 on mobile
   regardless of cascade order or viewport width. */
body.am-mobile #main-content,
body.am-mobile .main-content {
  margin-right: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================
   ADMIN FLOATING BUTTON (FAB)
   Visible only for admin users (body.am-admin) on mobile.
   Does NOT require body.am-mobile — the media query handles scope.
   ============================================================ */
@media (max-width: 768px) {
  #am-admin-fab {
    display: none; /* hidden by default — shown below for admin only */
    position: fixed;
    right: calc(16px + var(--safe-right, 0px));
    bottom: calc(var(--mobnav-h) + var(--safe-bottom) + 16px);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(19, 25, 40, 0.96);
    border: 1px solid rgba(106,174,255,0.35);
    color: #fff;
    font-size: 18px;
    z-index: 1110; /* above bottom nav (1100) — never clipped by nav layer */
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4), 0 0 0 1px rgba(106,174,255,0.18);
    touch-action: manipulation;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* Show FAB for admin users only */
  body.am-admin #am-admin-fab {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #am-admin-fab:active {
    transform: scale(0.92) translateZ(0);
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }

  .am-fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0.9;
  }

  .am-fab-icon .am-svg-icon,
  .am-fab-icon .am-svg-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   ADMIN RIGHT-SIDE DRAWER
   Slides in from the right. No body overflow manipulation
   — scroll freeze bug is eliminated by design.
   ============================================================ */
@media (max-width: 768px) {
  #am-admin-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 85vw);
    background: var(--am-panel-2, rgba(14,22,38,0.99));
    border-left: 1px solid rgba(106,174,255,0.18);
    z-index: 1300;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    will-change: transform;
    transform: translateX(110%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--safe-bottom) + 16px);
    box-shadow: -8px 0 32px rgba(0,0,0,0.5);
  }

  body.am-admin-open #am-admin-drawer {
    transform: translateX(0);
  }

  /* Backdrop — click-to-close; NEVER sets overflow:hidden on body */
  #am-admin-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1299;
  }

  body.am-admin-open #am-admin-backdrop {
    display: block;
  }

  /* Drawer header */
  .am-admin-drawer-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--safe-top, 0px) + 20px) 20px 16px;
    border-bottom: 1px solid rgba(106,174,255,0.12);
    position: sticky;
    top: 0;
    background: var(--am-panel-2, rgba(14,22,38,0.99));
    z-index: 1;
    flex-shrink: 0;
  }

  .am-admin-drawer-title {
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--am-text, #e8eaf6);
    letter-spacing: 0.3px;
  }

  .am-admin-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .am-admin-drawer-close:active { background: rgba(255,255,255,0.12); color: #fff; }

  /* Drawer body */
  .am-admin-drawer-body {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Admin nav items inside drawer */
  .am-admin-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: right;
    direction: rtl;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
    border-radius: 0;
  }

  .am-admin-nav-item:hover,
  .am-admin-nav-item:active {
    background: rgba(106,174,255,0.08);
    color: #fff;
  }

  .am-admin-nav-icon {
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.85;
  }

  .am-admin-nav-icon .am-svg-icon,
  .am-admin-nav-icon .am-svg-icon svg {
    width: 18px;
    height: 18px;
  }

  .am-admin-nav-label {
    flex: 1;
    text-align: right;
  }
}

/* ============================================================
   MOBILE DESIGN SYSTEM v1.0 — Arbimax
   Phase 3: Unified token layer for all mobile components.
   Extends arbimax.tokens.css with mobile-specific values.
   These variables are the single source of truth for:
     icon sizes · spacing · typography · component sizing
   Build: 20260407_MOBILE_DESIGN_SYSTEM
   ============================================================ */

@media (max-width: 768px) {

  :root {
    /* ── ICON SIZE SYSTEM ─────────────────────────────────── */
    --am-icon-xs:   10px;   /* status dots, tiny indicators  */
    --am-icon-sm:   14px;   /* list row icons, meta icons    */
    --am-icon-md:   16px;   /* card icons, nav tab icons     */
    --am-icon-lg:   18px;   /* header action buttons         */
    --am-icon-xl:   20px;   /* section-level icons max       */
    --am-icon-2xl:  24px;   /* page hero icon max            */
    --am-icon-emoji: 14px;  /* emoji icons in buttons / tabs */

    /* ── MOBILE SPACING OVERRIDES ────────────────────────── */
    --am-page-pad:    var(--am-space-3);   /* 12px outer padding    */
    --am-section-gap: var(--am-space-3);   /* 12px between sections */
    --am-card-pad:    var(--am-space-3);   /* 12px card padding     */
    --am-list-gap:    var(--am-space-2);   /* 8px list item gap     */

    /* ── MOBILE TYPOGRAPHY SCALE ─────────────────────────── */
    --am-mobile-title-xl:  1.1rem;    /* page title             */
    --am-mobile-title-lg:  0.95rem;   /* section title          */
    --am-mobile-title-md:  0.875rem;  /* card title             */
    --am-mobile-body:      0.875rem;  /* body text              */
    --am-mobile-meta:      0.75rem;   /* metadata, labels       */
    --am-mobile-tiny:      0.7rem;    /* micro labels, counters */
  }

  /* ── GLOBAL ICON NORMALIZATION ────────────────────────────
     All SVG icons are capped at the mobile icon system size.
     Prevents any icon from dominating the layout on small screens.
     ─────────────────────────────────────────────────────── */
  .am-svg-icon svg,
  .m-icon-btn svg,
  .am-nav-icon svg,
  .am-more-icon svg,
  .am-admin-nav-icon svg,
  .m-shortcut-icon svg,
  .am-fab-icon svg {
    max-width: var(--am-icon-lg);
    max-height: var(--am-icon-lg);
  }

  /* ── EMOJI ICON NORMALIZATION ─────────────────────────────
     Tab icons, button icons, and inline emojis kept small.
     ─────────────────────────────────────────────────────── */
  .tab-icon,
  [class*="tab-icon"],
  .btn .icon,
  button .icon,
  [class*="btn-icon"],
  .wallet-actions .btn:before {
    font-size: var(--am-icon-emoji) !important;
    vertical-align: middle;
    line-height: 1;
  }

  /* ── SECTION / PAGE HEADING ICONS ────────────────────────
     Icons in h1/h2/h3 and page-title elements: capped at 20px.
     ─────────────────────────────────────────────────────── */
  h1 .icon, h2 .icon, h3 .icon,
  .page-title .icon,
  .page-title > span:first-child,
  [class*="section-title"] .icon,
  [class*="page-header"] .icon {
    font-size: var(--am-icon-xl) !important;
    vertical-align: middle;
  }

  /* ── TABLE / LIST CELL ICONS ─────────────────────────────
     Keep in-row icons tight so they don't dominate columns.
     ─────────────────────────────────────────────────────── */
  td .icon,
  li .icon,
  [class*="list-item"] .icon,
  [class*="row-icon"] { font-size: var(--am-icon-sm) !important; }

  /* ── CARD-LEVEL TYPOGRAPHY ────────────────────────────── */
  .card-title,
  [class*="card-title"],
  [class*="card-header"]:not(header) {
    font-size: var(--am-mobile-title-md) !important;
  }

  /* ── COMPONENT: CARD ROW ─────────────────────────────── */
  .am-row,
  [class*="data-row"],
  [class*="list-row"],
  [class*="table-row"] {
    padding: var(--am-space-2) var(--am-space-3) !important;
    font-size: var(--am-mobile-body) !important;
  }

  /* ── COMPONENT: SECTION HEADER ──────────────────────── */
  .am-section-header,
  [class*="section-header"]:not(header),
  .wallet-section-header,
  .pnl-section-header {
    margin-bottom: var(--am-space-2) !important;
  }

  /* ── TAP TARGET ENFORCEMENT ──────────────────────────── */
  /* All interactive elements ≥ 44×44px per WCAG */
  a.nav-item,
  button.nav-item,
  .am-admin-nav-item,
  [class*="tab-btn"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* ── STATUS INDICATORS ───────────────────────────────── */
  .bot-status-dot,
  [class*="status-dot"],
  [class*="indicator-dot"] {
    width: var(--am-icon-xs) !important;
    height: var(--am-icon-xs) !important;
    flex-shrink: 0 !important;
  }

  /* ── HERO DECORATIVE ICONS: cap large emoji ──────────── */
  [class*="hero-icon"],
  .section-hero-icon,
  [class*="empty-state-icon"],
  [class*="placeholder-icon"] {
    font-size: var(--am-icon-2xl) !important;
  }

} /* end mobile design system */

/* ============================================================
   PHASE 4 — WALLET PAGE MOBILE FIXES
   Clean icons, reduce visual noise, premium minimal look.
   Build: 20260407_MOBILE_DESIGN_SYSTEM
   ============================================================ */
@media (max-width: 768px) {

  /* ── PAGE SHELL ──────────────────────────────────────── */
  .wallet-page,
  .trader-page-wallet {
    padding: var(--am-page-pad) !important;
  }

  /* ── PAGE HEADER ─────────────────────────────────────── */
  .wallet-page-header,
  .trader-page-wallet .page-header,
  .wallet-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--am-space-2) !important;
    margin-bottom: var(--am-space-3) !important;
    padding-bottom: var(--am-space-3) !important;
  }

  .wallet-page-title,
  .trader-page-wallet h2,
  .wallet-header-title h1 {
    font-size: var(--am-mobile-title-xl) !important;
    gap: var(--am-space-2) !important;
    /* No gradient on mobile — performance + readability */
    -webkit-text-fill-color: var(--am-text, #fff) !important;
    background: none !important;
    background-clip: unset !important;
  }

  /* Title icon in heading */
  .wallet-page-title .icon,
  .wallet-header-title .icon {
    font-size: var(--am-icon-xl) !important;
  }

  /* ── WALLET ACTION BUTTONS ──────────────────────────── */
  .wallet-actions,
  .wallet-header-actions {
    gap: var(--am-space-2) !important;
    flex-wrap: wrap !important;
  }

  .wallet-actions .btn,
  .wallet-header-actions .btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
    gap: var(--am-space-1) !important;
  }

  /* Emoji in action buttons: keep small */
  .wallet-actions .btn,
  .wallet-header-actions .btn {
    font-size: 13px !important;
  }

  /* ── TABS ────────────────────────────────────────────── */
  .wallet-tabs {
    margin-bottom: var(--am-space-3) !important;
    gap: 0 !important;
  }

  .wallet-tab {
    padding: 10px 14px !important;
    font-size: 13px !important;
    gap: var(--am-space-1) !important;
  }

  .wallet-tab .tab-icon,
  .wallet-tabs .tab-icon {
    font-size: 13px !important;
  }

  /* ── KPI CARDS ───────────────────────────────────────── */
  .wallet-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--am-space-2) !important;
    margin-bottom: var(--am-space-3) !important;
  }

  .wallet-kpi-card {
    padding: var(--am-space-3) !important;
    border-radius: 12px !important;
  }

  .wallet-kpi-value {
    font-size: 1.1rem !important;
  }

  .wallet-kpi-card.primary .wallet-kpi-value {
    font-size: 1.3rem !important;
  }

  .wallet-kpi-label {
    font-size: var(--am-mobile-tiny) !important;
  }

  /* ── EXCHANGE CARDS ─────────────────────────────────── */
  .wallet-exchange-card {
    padding: var(--am-space-3) !important;
    border-radius: 12px !important;
  }

  .wallet-exchange-grid {
    gap: var(--am-space-2) !important;
  }

  /* ── DEX TOKEN CARDS ─────────────────────────────────── */
  .am-token-card {
    padding: var(--am-space-2) var(--am-space-3) !important;
    gap: var(--am-space-2) !important;
  }

  .am-token-card .am-token-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: var(--am-icon-md) !important;
  }

  .am-token-card .am-token-symbol { font-size: 14px !important; }
  .am-token-card .am-token-balance { font-size: 12px !important; }
  .am-token-card .am-token-name { font-size: 11px !important; }
  .am-token-card .am-token-usd { font-size: 11px !important; }

  /* ── MODALS (DEX SETUP) ──────────────────────────────── */
  /* Cap the large 48px ✨ decorative emoji in generate-wallet section */
  #dex-mode-generate [style*="font-size:48px"],
  #dex-mode-generate [style*="font-size: 48px"],
  .wallet-page [style*="font-size:48px"],
  .wallet-page [style*="font-size: 48px"] {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }

  /* Cap all emoji in modal headers */
  #dex-secret-modal h3,
  .wallet-page .modal h3,
  [id*="modal"] h3 {
    font-size: 15px !important;
    gap: var(--am-space-2) !important;
  }

  /* Tab-like buttons in DEX setup modal */
  .dex-mode-tab {
    font-size: 12px !important;
    padding: 10px 8px !important;
  }

} /* end wallet mobile */

/* ============================================================
   PHASE 1 — ADMIN CROWN FAB: VISUAL ENHANCEMENT
   Crown is gold-amber when visible, ensuring it stands out
   against the dark mobile background without being obtrusive.
   Build: 20260407_MOBILE_DESIGN_SYSTEM
   ============================================================ */
@media (max-width: 768px) {

  /* Crown FAB: gold accent for admin identification */
  body.am-admin #am-admin-fab {
    border-color: rgba(245, 158, 11, 0.55) !important;
    box-shadow:
      0 3px 14px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(245, 158, 11, 0.2),
      0 0 16px rgba(245, 158, 11, 0.12) !important;
  }

  /* Crown SVG icon: amber-gold color */
  body.am-admin #am-admin-fab .am-fab-icon .am-svg-icon svg {
    stroke: #f59e0b !important;
    width: var(--am-icon-lg) !important;
    height: var(--am-icon-lg) !important;
  }

  /* Active state */
  body.am-admin #am-admin-fab:active {
    transform: scale(0.91) translateZ(0) !important;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.4),
      0 0 8px rgba(245, 158, 11, 0.1) !important;
  }

  /* ── Dashboard topbar crown button ─────────────────── */
  .m-icon-btn.crown {
    color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
  }

  .m-icon-btn.crown svg {
    stroke: #f59e0b !important;
  }

  .m-icon-btn.crown:active {
    background: rgba(245, 158, 11, 0.07) !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
  }

} /* end crown fab */

/* ============================================================
   PHASE 5 — DESIGN SYSTEM: ALL MOBILE PAGES
   Apply icon and spacing system to every mobile page context.
   Build: 20260407_MOBILE_DESIGN_SYSTEM
   ============================================================ */
@media (max-width: 768px) {

  /* ── BOTS PAGE ───────────────────────────────────────── */
  .bot-card-icon,
  [class*="bot-icon"],
  .bot-status-icon { font-size: var(--am-icon-md) !important; }

  /* ── MARKETS PAGE ────────────────────────────────────── */
  [class*="market-icon"],
  [class*="pair-icon"],
  .currency-icon { font-size: var(--am-icon-md) !important; }

  /* ── ACCOUNT PAGE ────────────────────────────────────── */
  [id^="_acct-"] [class*="icon"],
  .account-section-icon { font-size: var(--am-icon-md) !important; }

  /* ── ACTIVITY / OPERATIONS PAGE ─────────────────────── */
  [class*="op-icon"],
  [class*="activity-icon"],
  [class*="trade-icon"] { font-size: var(--am-icon-sm) !important; }

  /* ── ADMIN DRAWER ITEMS ──────────────────────────────── */
  .am-admin-nav-item {
    padding: 14px 18px !important;
    font-size: 14px !important;
  }

  /* ── DASHBOARD: KPI rows ─────────────────────────────── */
  .m-kpi-label { font-size: var(--am-mobile-tiny) !important; }
  .m-kpi-value { font-size: 0.9rem !important; }

  /* ── SHORT-CUT ROW icons ─────────────────────────────── */
  .m-shortcut-icon { width: var(--am-icon-md) !important; height: var(--am-icon-md) !important; }
  .m-shortcut-icon svg { width: 13px !important; height: 13px !important; }

  /* ── PAGE SECTION TITLES ─────────────────────────────── */
  .m-sec-title,
  [class*="section-label"],
  [class*="panel-title"] {
    font-size: var(--am-mobile-tiny) !important;
  }

} /* end design system all pages */

/* ============================================================
   PHASE 6 — LEGACY REMNANT CLEANUP
   Suppress old icon sizes and inconsistent patterns.
   Build: 20260407_MOBILE_DESIGN_SYSTEM
   ============================================================ */
@media (max-width: 768px) {

  /* Suppress font-awesome / emoji icons exceeding system max */
  .fa, .fas, .far, .fab,
  [class^="icon-"],
  [class*=" icon-"] {
    font-size: var(--am-icon-md) !important;
    max-width: var(--am-icon-md);
    vertical-align: middle;
  }

  /* Remove legacy inline padding from old card patterns */
  .legacy-card,
  [class*="old-card"],
  .card-v1 {
    padding: var(--am-space-3) !important;
  }

  /* Suppress any lingering desktop-only icon containers */
  .desktop-icon-lg,
  .desktop-only-icon { display: none !important; }

  /* Typography: remove large header sizes from non-mobile-aware sections */
  [class*="page-heading"]:not(.am-mobile-ok),
  [class*="section-heading"]:not(.am-mobile-ok) {
    font-size: var(--am-mobile-title-lg) !important;
  }

} /* end legacy cleanup */

/* ============================================================
   PHASE B — WALLET PAGE v4 MOBILE NORMALIZATION
   Reduce tw4-title dominance and constrain page chrome on mobile.
   Build: 20260407_MOBILE_CORRECTION
   ============================================================ */
@media (max-width: 768px) {

  /* ── WALLET PAGE: page chrome ────────────────────────── */
  .tw4-page { padding: 12px !important; }

  /* ── WALLET PAGE: title/header row ──────────────────── */
  .tw4-title { font-size: 1.05rem !important; }
  .tw4-header { padding-bottom: 12px !important; margin-bottom: 12px !important; }
  .tw4-header-actions { gap: 8px !important; }

  /* ── WALLET PAGE: empty-state container — reduce giant padding ── */
  .tw4-state {
    padding: 28px 16px !important;
    gap: 10px !important;
  }
  .tw4-state-title { font-size: 1rem !important; }
  .tw4-state-text  { font-size: 0.8125rem !important; }

  /* ── WALLET PAGE: empty-state icon container ─────────── */
  .tw4-state-icon {
    max-width: 28px !important;
    max-height: 28px !important;
    font-size: 0.8rem !important;
  }
  .tw4-state-icon .tw4-state-svg,
  .tw4-state-icon .tw4-state-svg svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* ── WALLET PAGE: tab icons ──────────────────────────── */
  .tw4-tab-icon { width: 14px !important; height: 14px !important; }
  .tw4-tab-icon svg { width: 14px !important; height: 14px !important; }

  /* ── WALLET PAGE: loading state — reduce oversized spinner ── */
  .tw4-state--loading { min-height: 120px !important; }
  .tw4-spinner {
    width: 28px !important;
    height: 28px !important;
    border-width: 2px !important;
  }

  /* ── WALLET PAGE: section title icon ─────────────────── */
  .tw4-section-title .tw4-title-icon,
  .tw4-section-title .tw4-title-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

} /* end wallet v4 mobile */