/**
 * 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:hidden  → fallback for iOS Safari < 15.4 (clip unsupported).
     - overflow:clip    → preferred for Android Chrome: clip never creates a scroll
       container, so touch events aren't consumed before reaching #main-content.
     CSS cascade: if clip is unsupported, the browser ignores it and keeps hidden. */
  html { overflow: hidden; overflow: clip; }
  body { overflow: hidden; overflow-x: hidden; }
  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 */
  }

  /* --- layout-root full width --- */
  #layout-root {
    margin-right: 0 !important;
    height: calc(100dvh - var(--hdr-h)) !important;
    overflow: hidden;
  }

  /* --- 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);
  }

  /* --- 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: 4px 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  font-family: 'Tajawal', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2px;
  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.92);
}

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

/* Narrower phones: slightly smaller icons */
@media (max-width: 360px) {
  #am-mobile-nav .am-nav-item .am-nav-icon { font-size: 17px; }
  #am-mobile-nav .am-nav-item { font-size: 8px; }
}

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

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

/* Active indicator dot */
#am-mobile-nav .am-nav-item.active::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--am-accent, #6AAEFF);
  box-shadow: 0 0 6px var(--am-accent, #6AAEFF);
}

/* "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 { font-size: 18px; }
.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; }

/* ============================================================
   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; }
}

/* ============================================================
   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 {
    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: 16px;
    right: calc(16px + var(--safe-right, 0px));
    bottom: calc(var(--mobnav-h) + var(--safe-bottom) + 16px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--am-accent, #6AAEFF), #4a8fd6);
    color: #fff;
    border: none;
    font-size: 20px;
    z-index: 1050;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 0 2px rgba(106,174,255,0.25);
    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 {
    font-size: 22px;
    line-height: 1;
  }
}

/* ============================================================
   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 {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
  }

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