/* styles.css */

/* General */
body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* RTL (Arabic) */
body.rtl {
  direction: rtl;
  font-family: "Cairo", system-ui, sans-serif;
}

body.rtl .navbar .dropdown-menu {
  text-align: right;
}

/* Theme variables */
body.light-theme {
  --bg-color: #e9edf5;
  --card-bg: #ffffff;
  --text-color: #111827;
  --nav-bg: #ffffff;
  --nav-border: #d0d7e2;
  --accent: #2563eb;
  --table-bg: #ffffff;
  --table-stripe: #f3f4f8;
  --up-color: #16a34a;
  --down-color: #dc2626;
}

body.dark-theme {
  --bg-color: #050816;
  --card-bg: #0b1220;
  --text-color: #f9fafb;
  --nav-bg: #020617;
  --nav-border: #1f2937;
  --accent: #3b82f6;
  --table-bg: #020617;
  --table-stripe: #0f172a;
  --up-color: #22c55e;
  --down-color: #f97373;
}

/* Ensure base text inherits in dark */
body.dark-theme,
body.dark-theme p,
body.dark-theme span,
body.dark-theme h1,
body.dark-theme h2,
body-dark-theme h3,
body.dark-theme h4,
body-dark-theme h5,
body-dark-theme h6,
body.dark-theme label,
body.dark-theme small {
  color: var(--text-color);
}

/* Override Bootstrap success/danger for more trading look */
body.dark-theme .text-success {
  color: var(--up-color) !important;
}
body.dark-theme .text-danger {
  color: var(--down-color) !important;
}

/* Auth pages */
.auth-wrapper {
  min-height: 100vh;
}

.auth-card {
  max-width: 420px;
  width: 100%;
  background-color: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.32);
  border: 1px solid var(--nav-border);
}

/* Navbar */
.main-navbar {
  height: 6vh;
  min-height: 56px;
  background: radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.2), transparent 55%),
              radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.22), transparent 55%),
              var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

/* spread navbar content */
.main-navbar .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: 1.25rem;
}

/* collapse section grows to use space */
.main-navbar .navbar-collapse {
  flex-grow: 1;
}

.main-navbar .navbar-nav {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  justify-content: flex-end;      /* default (mobile / small) */
}

/* On desktop, stretch items across available space */
@media (min-width: 992px) {
  .main-navbar .navbar-nav {
    justify-content: space-between;   /* spreads dropdown, lang, night, balance */
  }

  /* balance bar touches right side nicely but not cramped */
  .balance-bar {
    margin-left: 0;                   /* remove old big gap */
    padding-left: 1.5rem;
    border-left: 1px solid rgba(148, 163, 184, 0.6);
  }
}




/* Logo + name */
.platform-logo {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: conic-gradient(from 160deg, #0ea5e9, #6366f1, #22c55e, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.55);
}

.platform-name {
  font-weight: 600;
  font-size: 18px;
}

/* Navbar colors in dark mode */
body.dark-theme .main-navbar {
  border-color: var(--nav-border);
}

body.dark-theme .navbar,
body.dark-theme .navbar *:not(.btn):not(.form-select):not(.dropdown-menu) {
  color: var(--text-color) !important;
}

body.dark-theme .navbar-toggler-icon {
  filter: invert(1);
}

/* Balance bar (desktop) */
.balance-bar {
  gap: 1rem;
  margin-left: 2rem;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(148, 163, 184, 0.6);
}

.balance-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 11px;
}

body.rtl .balance-item {
  align-items: flex-end;
}

.balance-item span {
  opacity: 0.75;
}

.balance-item strong {
  font-size: 12px;
}

/* P&L color in nav */
#nav-pnl-d,
#nav-pnl {
  color: var(--up-color);
}

/* Mobile balance row */
.mobile-balance-row {
  font-size: 11px;
}

/* Main layout with comfortable margins */
.main-layout {
  padding-top: 1rem;
  padding-bottom: 1rem;
  min-height: 94vh;
}

/* Trading wrapper */
.trading-wrapper {
  display: flex;
  flex-direction: column;
  height: 94vh;
  gap: 0.75rem;
}

/* Top section: ~59vh (with nav 6vh gives 65vh total) */
.trading-main {
  flex: 0 0 59vh;
  padding: 0.75rem 1.5rem 0.5rem;
}

/* Bottom section: last ~35vh */
.trading-bottom {
  flex: 1 1 auto;
  padding: 0.5rem 1.5rem 1.25rem;
}

/* Cards */
.card {
  background-color: var(--card-bg);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--text-color);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
  margin-bottom: 0.75rem;
}

body.light-theme .card {
  box-shadow: 0 14px 30px rgba(148, 163, 184, 0.35);
}

body.dark-theme .card-header {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(15, 23, 42, 1));
  border-bottom-color: rgba(148, 163, 184, 0.35);
}

/* Asset column */
.asset-column .card {
  height: 100%;
}

/* make card body padding tighter so table has more width */
.asset-column .card-body {
  padding: 0.75rem 0.5rem 0.75rem 0.5rem;
}

.asset-table-wrapper {
  overflow-y: auto;
  max-height: calc(59vh - 100px);
}

/* Chart & trade column */
.chart-column .card,
.trade-column .card {
  height: 100%;
}

.trading-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Flags */
.flags-row {
  display: flex;
  gap: 0.25rem;
}

.flags-row .badge {
  border-radius: 999px;
  padding-inline: 0.75rem;
}

/* Asset label cell */
.asset-label {
  font-weight: 600;
  white-space: nowrap;
}

/* Opened positions etc. */
.tab-content {
  background-color: var(--card-bg);
}

/* Tabs – spacing + pill look */
.trading-bottom .nav-tabs {
  margin-bottom: 0.9rem;
  padding-inline: 0.25rem;
  border-bottom-color: transparent;
  gap: 0.25rem;
}

.trading-bottom .nav-tabs .nav-link {
  border-radius: 999px 999px 0 0;
  padding-inline: 0.9rem;
  padding-block: 0.4rem;
  font-size: 0.85rem;
}

/* Tabs – dark override */
.nav-tabs .nav-link {
  color: inherit;
}

body.dark-theme .nav-tabs {
  border-bottom-color: transparent;
}

body.dark-theme .nav-tabs .nav-link {
  background-color: #020617;
  color: #e5e7eb;
  border: 1px solid transparent;
}

body.dark-theme .nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #2563eb, #22c55e);
  color: #f9fafb;
  border-color: transparent;
}

/* Light theme active tab */
body.light-theme .nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #2563eb, #22c55e);
  color: #ffffff;
  border-color: transparent;
}

/* Tab content container with more margin & radius */
.trading-bottom .tab-content {
  border-radius: 16px;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* Fix bg-body (used on tab-content container) */
body.dark-theme .bg-body {
  background-color: var(--card-bg) !important;
}

/* Tables – light & dark */
.table {
  background-color: var(--table-bg);
  color: var(--text-color);
}

.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--text-color);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: var(--table-stripe);
  color: var(--text-color);
}

body.dark-theme .table-hover > tbody > tr:hover {
  background-color: rgba(59, 130, 246, 0.18);
}

/* List groups */
.list-group-item {
  background-color: var(--card-bg);
  color: var(--text-color);
}

body.dark-theme .list-group-item {
  background-color: #020617;
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--text-color);
}

/* Alerts */
.alert {
  color: inherit;
  border-radius: 12px;
}

body.dark-theme .alert {
  background-color: #020617;
  border-color: rgba(248, 250, 252, 0.12);
  color: var(--text-color);
}

/* Modals & dropdowns */
body.dark-theme .modal-content {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--nav-border);
  border-radius: 18px;
}

body.dark-theme .modal-header,
body.dark-theme .modal-footer {
  border-color: var(--nav-border);
}

body.dark-theme .dropdown-menu {
  background-color: #020617;
  color: var(--text-color);
  border-color: var(--nav-border);
  border-radius: 14px;
}

body.dark-theme .dropdown-item {
  color: var(--text-color);
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item:focus {
  background-color: #111827;
}

/* Close button */
body.dark-theme .btn-close {
  filter: invert(1);
}

/* Mobile layout */
@media (max-width: 991.98px) {
  .main-navbar {
    height: 15vh;
    min-height: 80px;
    align-items: flex-start;
  }

  .trading-wrapper {
    height: 85vh;
  }

  .trading-main {
    flex: 0 0 auto;
    height: 50vh;
    padding-inline: 0.9rem;
  }

  .asset-column .card {
    height: 100%;
  }

  .asset-table-wrapper {
    max-height: calc(50vh - 110px);
  }

  .trading-bottom {
    display: none !important;
  }
}

/* Desktop: widen asset column a bit, shrink chart a bit */
@media (min-width: 992px) {
  .asset-column {
    flex: 0 0 26%;
    max-width: 26%;
  }

  .chart-column {
    flex: 0 0 48%;
    max-width: 48%;
  }

  .trade-column {
    flex: 0 0 26%;
    max-width: 26%;
  }
}

/* Selected asset */
#asset-table tbody tr.selected {
  background: radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.22), transparent 60%);
}

/* RTL tweaks */
body.rtl .form-check {
  padding-left: 0;
  padding-right: 1.5em;
}

body.rtl .form-check-input {
  float: right;
}

body.rtl .form-check-label {
  margin-right: 0.35rem;
}

/* Buttons and inputs */
.btn-primary,
.btn-success,
.btn-danger {
  border-radius: 999px;
}

/* Make outline buttons readable in dark mode */
body.dark-theme .btn-outline-secondary,
body.dark-theme .btn-outline-danger,
body.dark-theme .btn-outline-warning {
  border-color: #4b5563;
  color: var(--text-color);
}

body.dark-theme .btn-outline-secondary:hover,
body.dark-theme .btn-outline-danger:hover,
body.dark-theme .btn-outline-warning:hover {
  background-color: #111827;
}

/* Form fields */
body.dark-theme .form-control,
body.dark-theme .form-select {
  background-color: #020617;
  border-color: #1f2937;
  color: var(--text-color);
}

body.dark-theme .form-control::placeholder {
  color: #6b7280;
}

/* Scrollbars */
.asset-table-wrapper::-webkit-scrollbar,
.trading-bottom::-webkit-scrollbar {
  width: 6px;
}

.asset-table-wrapper::-webkit-scrollbar-thumb,
.trading-bottom::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.6);
  border-radius: 999px;
}

body.dark-theme .asset-table-wrapper::-webkit-scrollbar-thumb,
body.dark-theme .trading-bottom::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.8);
}

/* SL / TP mode toggle buttons */
.mode-toggle .btn {
  border-radius: 999px;
  padding-inline: 0.9rem;
}

/* light theme look */
body.light-theme .mode-toggle .btn {
  border-color: #cbd5e1;
  color: #475569;
  background-color: #ffffff;
}

body.light-theme .mode-toggle .btn.active {
  background: linear-gradient(135deg, #2563eb, #22c55e);
  border-color: transparent;
  color: #ffffff;
}

/* dark theme look */
body.dark-theme .mode-toggle .btn {
  background-color: #020617;
  border-color: #1f2937;
  color: var(--text-color);
}

body.dark-theme .mode-toggle .btn.active {
  background: linear-gradient(135deg, #2563eb, #22c55e);
  border-color: transparent;
  color: #ffffff;
}

/* disabled state for SL / TP blocks */
.sl-block.disabled-block,
.tp-block.disabled-block,
.m-sl-block.disabled-block,
.m-tp-block.disabled-block {
  opacity: 0.45;
}

.sl-block.disabled-block .mode-toggle .btn,
.tp-block.disabled-block .mode-toggle .btn,
.m-sl-block.disabled-block .mode-toggle .btn,
.m-tp-block.disabled-block .mode-toggle .btn {
  pointer-events: none;
}

/* === ASSET TABLE – GRID LAYOUT (DESKTOP) === */

/* base table look */
#asset-table {
  width: 100%;
  border-collapse: collapse;
}

/* basic typography */
#asset-table th,
#asset-table td {
  font-size: 0.78rem;
  vertical-align: middle;
  padding: 0.35rem 0.5rem;
}

/* header style */
#asset-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  border-bottom-width: 1px;
}

/* mobile / tablet: keep normal table layout, 4 columns including Action */
@media (max-width: 991.98px) {
  #asset-table th,
  #asset-table td {
    text-align: center;
  }

  #asset-table th:first-child,
  #asset-table td:first-child {
    text-align: left;
  }

  body.rtl #asset-table th:first-child,
  body.rtl #asset-table td:first-child {
    text-align: right;
  }
}

/* DESKTOP: force 3 nice columns with CSS grid */
@media (min-width: 992px) {
  /* use grid for each row so every row shares identical column widths */
  #asset-table thead tr,
  #asset-table tbody tr {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr;   /* Asset | Buy | Sell */
    align-items: center;
  }

  /* hide any overflow from grid change */
  #asset-table thead,
  #asset-table tbody {
    display: block;
  }

  /* alignment: asset left, prices centered */
  #asset-table th:first-child,
  #asset-table td:first-child {
    text-align: left;
  }

  #asset-table th:nth-child(2),
  #asset-table td:nth-child(2),
  #asset-table th:nth-child(3),
  #asset-table td:nth-child(3) {
    text-align: center;
    white-space: nowrap;
  }

  body.rtl #asset-table th:first-child,
  body.rtl #asset-table td:first-child {
    text-align: right;
  }
}

/* PRICE CHIP – compact and animated, but does NOT break layout */
.price-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  font-weight: 500;
  font-size: 0.78rem;
  background-color: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.12s ease;
}

body.dark-theme .price-cell {
  background-color: #020617;
  border-color: #1f2937;
  color: #e5e7eb;
}

/* Up / down tick animation */
.price-cell.price-up {
  background-color: rgba(34, 197, 94, 0.12);
  border-color: var(--up-color);
  color: var(--up-color);
  transform: scale(1.03);
}

.price-cell.price-down {
  background-color: rgba(248, 113, 113, 0.14);
  border-color: var(--down-color);
  color: var(--down-color);
  transform: scale(1.03);
}

/* ================================
   MOBILE ASSETS TABLE – FIX LAYOUT
   (keeps 4 columns aligned + pills readable)
================================ */
@media (max-width: 991.98px) {
  /* stable table geometry */
  #asset-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* IMPORTANT: keep TDs as table-cells (price-cell was inline-flex and breaks columns) */
  #asset-table td.price-cell,
  #asset-table th {
    display: table-cell !important;
  }

  /* 4 columns: Asset | Buy | Sell | Action */
  #asset-table th:nth-child(1),
  #asset-table td:nth-child(1) { width: 30%; text-align: left; }

  #asset-table th:nth-child(2),
  #asset-table td:nth-child(2) { width: 26%; text-align: center; }

  #asset-table th:nth-child(3),
  #asset-table td:nth-child(3) { width: 26%; text-align: center; }

  #asset-table th:nth-child(4),
  #asset-table td:nth-child(4) { width: 18%; text-align: center; }

  body.rtl #asset-table th:nth-child(1),
  body.rtl #asset-table td:nth-child(1) { text-align: right; }

  /* keep header readable */
  #asset-table thead th {
    white-space: nowrap;
    font-size: 0.8rem;
  }

  /* Asset can ellipsis, but prices should NEVER ellipsis */
  #asset-table td:nth-child(1) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Price "capsules" on TD itself (no flex) */
  #asset-table td.price-cell {
    white-space: nowrap;
    overflow: visible;           /* allow full number */
    text-overflow: clip;
    padding: 6px 10px;           /* thicker pill */
    font-size: 0.82rem;          /* readable but compact */
    line-height: 1.1;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.7);
  }

  /* If you get huge numbers (BTC), shrink slightly just for the price cells */
  #asset-table td.asset-buy,
  #asset-table td.asset-sell {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
  }

  /* Action button fits column without pushing layout */
  #asset-table .asset-trade-btn {
    width: 100%;
    max-width: 92px;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 999px;
  }
}
/* =========================================
   MOBILE – ASSETS CARD FILLS SCREEN
========================================= */
@media (max-width: 991.98px) {

  /* Let main layout use full viewport */
  .main-layout {
    padding: 0;
    min-height: 100vh;
  }

  /* Trading wrapper should fill screen below navbar */
  .trading-wrapper {
    height: calc(100vh - 15vh); /* navbar height */
    display: flex;
    flex-direction: column;
  }

  /* Trading main becomes full height container */
  .trading-main {
    flex: 1 1 auto;
    height: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
  }

  /* Asset column fills available height */
  .asset-column {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /* Asset card fills the column */
  .asset-column .card {
    flex: 1 1 auto;
    height: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  /* Card body stretches */
  .asset-column .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  /* Asset table wrapper scrolls and fills space */
  .asset-table-wrapper {
    flex: 1 1 auto;
    max-height: none;          /* CRITICAL */
    overflow-y: auto;
    padding-bottom: 0.5rem;
  }
}

/* =========================================
   DESKTOP NAVBAR: balance-bar takes ~2/3 width
========================================= */
@media (min-width: 992px) {
  /* stop "space-between" from stealing width via gaps */
  .main-navbar .navbar-nav {
    justify-content: flex-start !important;
    gap: 1.25rem; /* nice consistent spacing */
  }

  /* keep other nav items compact */
  .main-navbar .navbar-nav > .nav-item:not(.balance-bar) {
    flex: 0 0 auto;
  }

  /* make the numbers area wide and push it to the far right */
  .balance-bar {
    margin-left: auto;      /* pushes it to the right */
    flex: 0 0 66%;          /* 👈 takes two-thirds */
    max-width: 66%;
    justify-content: space-between; /* spread the metrics nicely */
    gap: 1.25rem;
    
  }

  /* prevent the metric blocks from wrapping weirdly */
  .balance-bar .balance-item {
    white-space: nowrap;
  }
}

/* =========================================
   DESKTOP NAVBAR – ENLARGE BALANCE FONTS
========================================= */
@media (min-width: 992px) {

  /* Labels: P&L, Balance, Equity, etc. */
  .balance-item span {
    font-size: 0.85rem;      /* was ~11px */
    opacity: 0.8;
    letter-spacing: 0.02em;
  }

  /* Values: numbers */
  .balance-item strong {
    font-size: 1.05rem;      /* clear, readable, not bulky */
    font-weight: 600;
    line-height: 1.25;
  }

  /* Optional: emphasize P&L slightly more */
  #nav-pnl,
  #nav-pnl-d {
    font-size: 1.1rem;
    font-weight: 700;
  }
}

/* ======================================================
   RESPONSIVE / MOBILE-FIRST OVERRIDES
   ====================================================== */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

img, iframe {
  max-width: 100%;
}

button, input, select, textarea {
  touch-action: manipulation;
}

/* Tablet and phone */
@media (max-width: 991.98px) {
  body {
    min-width: 0;
  }

  .main-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: auto !important;
    min-height: 64px;
    padding: .45rem 0;
    backdrop-filter: blur(14px);
  }

  .main-navbar .container-fluid {
    min-height: 54px;
    padding-inline: .75rem;
    gap: .55rem;
    flex-wrap: wrap;
  }

  .platform-logo {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .platform-name {
    display: none;
  }

  .navbar-toggler {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: .35rem;
    border-radius: 12px;
    border-color: rgba(148,163,184,.4);
  }

  .mobile-balance-row {
    margin-inline: auto .15rem !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem;
    min-width: 220px;
    max-width: 300px;
  }

  .mobile-balance-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .25rem .35rem;
    border-radius: 10px;
    background: rgba(148,163,184,.10);
    line-height: 1.15;
  }

  .mobile-balance-item span {
    opacity: .72;
    font-size: .62rem !important;
    white-space: nowrap;
  }

  .mobile-balance-item strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .main-navbar .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
    margin-top: .35rem;
    padding: .45rem .2rem .25rem;
    border-top: 1px solid rgba(148,163,184,.25);
  }

  /* Mobile menu is controlled directly by app.js so it works even when
     Bootstrap's collapse plugin/CDN is unavailable. */
  .main-navbar #navbarContent:not(.show) {
    display: none !important;
  }

  .main-navbar #navbarContent.show,
  .main-navbar #navbarContent.mobile-menu-open {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  .main-navbar .navbar-toggler {
    position: relative;
    z-index: 1040;
    cursor: pointer;
    touch-action: manipulation;
  }

  .main-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.18);
  }

  .main-navbar .navbar-toggler.is-open {
    background: rgba(148,163,184,.14);
  }


  .main-navbar .navbar-nav {
    width: 100%;
    gap: .15rem !important;
    align-items: stretch !important;
  }

  .main-navbar .navbar-nav > .nav-item {
    width: 100%;
    margin: 0 !important;
  }

  .main-navbar .nav-link,
  .main-navbar .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .main-navbar .form-select {
    min-height: 42px;
  }

  .main-navbar .form-check {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
  }

  .main-navbar .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    margin-top: .25rem;
  }

  .main-layout {
    min-height: 0 !important;
    padding: .65rem 0 1.25rem !important;
  }

  .trading-wrapper {
    display: block !important;
    height: auto !important;
    min-height: 0;
  }

  .trading-main {
    height: auto !important;
    min-height: 0;
    flex: none !important;
    margin: 0 !important;
    padding: 0 .65rem !important;
  }

  .asset-column {
    display: block !important;
    flex: none !important;
    min-width: 0;
  }

  .asset-column .card {
    height: auto !important;
    min-height: 0;
    margin-bottom: .75rem;
  }

  .asset-column .card-body {
    display: block !important;
    padding: .65rem !important;
  }

  .asset-table-wrapper {
    max-height: min(52vh, 560px) !important;
    min-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  #asset-search,
  #asset-category {
    min-height: 44px;
    font-size: 16px; /* avoids iOS input zoom */
  }

  #asset-table th,
  #asset-table td {
    padding: .52rem .22rem !important;
    font-size: .72rem !important;
  }

  #asset-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--card-bg);
  }

  #asset-table tbody tr {
    min-height: 50px;
  }

  #asset-table td.price-cell {
    padding: .42rem .15rem !important;
    border-width: 1px !important;
    border-radius: 9px !important;
    font-size: clamp(.63rem, 2.7vw, .78rem) !important;
  }

  #asset-table .asset-trade-btn {
    min-height: 38px;
    min-width: 0;
    width: 100%;
    padding: .35rem .25rem !important;
    font-size: .70rem;
  }

  .mobile-trade-area {
    display: block;
    padding-inline: 0 !important;
    scroll-margin-top: 78px;
  }

  .mobile-trade-area .card {
    border-radius: 16px;
    overflow: hidden;
  }

  .mobile-trade-area .card-header {
    padding: .75rem .9rem;
  }

  .mobile-trade-area .card-body {
    padding: .85rem;
  }

  .mobile-trade-area .form-control,
  .mobile-trade-area .form-select {
    min-height: 44px;
    font-size: 16px;
  }

  .mobile-trade-area .form-check {
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  .mobile-trade-area .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
  }

  .mobile-trade-area .mode-toggle {
    width: 100%;
  }

  .mobile-trade-area .mode-toggle .btn {
    flex: 1 1 50%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #m-btn-buy,
  #m-btn-sell {
    min-height: 52px;
    font-size: .95rem;
    font-weight: 700;
  }

  #m_tradingview_container {
    height: clamp(300px, 52vh, 480px) !important;
    min-height: 300px;
  }

  /* Positions and account information must stay accessible on mobile. */
  .trading-bottom {
    display: block !important;
    padding: .35rem .65rem 1rem !important;
    overflow: visible !important;
  }

  .trading-bottom .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 .55rem;
    padding: .15rem 0;
    gap: .35rem;
  }

  .trading-bottom .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .trading-bottom .nav-tabs .nav-item {
    flex: 0 0 auto;
  }

  .trading-bottom .nav-tabs .nav-link {
    white-space: nowrap;
    min-height: 42px;
    padding: .55rem .8rem;
    border-radius: 999px;
  }

  .trading-bottom .tab-content {
    padding: .7rem !important;
    border-radius: 14px !important;
  }

  .trading-bottom .tab-pane {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .trading-bottom .tab-pane > table {
    min-width: 680px;
    margin-bottom: .25rem;
  }

  #tab-closed > table {
    min-width: 900px;
  }

  .trading-bottom table th,
  .trading-bottom table td {
    white-space: nowrap;
    font-size: .76rem;
    padding: .45rem .5rem;
  }

  #tab-closed .row,
  #tab-summary .row {
    margin-inline: 0;
  }

  #tab-closed .row > [class*="col-"],
  #tab-summary .row > [class*="col-"] {
    padding-inline: .25rem;
    margin-bottom: .65rem;
  }

  #tab-closed input[type="date"] {
    min-height: 44px;
    font-size: 16px;
  }

  /* Admin view */
  .main-layout > .container,
  .main-layout .container.py-3 {
    max-width: 100%;
    padding-inline: .65rem !important;
  }

  .card-header.d-flex.justify-content-between {
    gap: .5rem;
    flex-wrap: wrap;
  }

  /* Modals become comfortable phone sheets. */
  .modal-dialog,
  .modal-dialog.modal-lg {
    width: auto;
    max-width: none;
    margin: .5rem;
  }

  .modal-content {
    max-height: calc(100dvh - 1rem);
    border-radius: 16px !important;
  }

  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-body .table {
    min-width: 560px;
  }

  .modal-body:has(> table) {
    overflow-x: auto;
  }

  .modal-footer .btn,
  .modal-body > form .btn {
    min-height: 44px;
  }

  .auth-wrapper {
    min-height: 100dvh;
    padding: 1rem;
  }

  .auth-card {
    width: 100%;
    max-width: 460px;
    padding: 1.15rem !important;
  }

  .auth-card .form-control,
  .auth-card .btn {
    min-height: 46px;
    font-size: 16px;
  }
}

/* Small phones */
@media (max-width: 575.98px) {
  .main-navbar .container-fluid {
    padding-inline: .5rem;
  }

  .mobile-balance-row {
    min-width: 190px;
    max-width: 230px;
    gap: .18rem;
  }

  .mobile-balance-item {
    padding-inline: .2rem;
  }

  .mobile-balance-item strong {
    font-size: .66rem;
  }

  #asset-table th:nth-child(1),
  #asset-table td:nth-child(1) { width: 24% !important; }
  #asset-table th:nth-child(2),
  #asset-table td:nth-child(2) { width: 28% !important; }
  #asset-table th:nth-child(3),
  #asset-table td:nth-child(3) { width: 28% !important; }
  #asset-table th:nth-child(4),
  #asset-table td:nth-child(4) { width: 20% !important; }

  .asset-label {
    font-size: .70rem !important;
  }

  .mobile-trade-area .ms-3 {
    margin-left: .6rem !important;
  }

  body.rtl .mobile-trade-area .ms-3 {
    margin-left: 0 !important;
    margin-right: .6rem !important;
  }

  .trading-bottom .tab-content {
    padding: .55rem !important;
  }
}

/* Phones in landscape: reduce vertical waste. */
@media (max-width: 991.98px) and (orientation: landscape) {
  .asset-table-wrapper {
    max-height: 58vh !important;
  }

  #m_tradingview_container {
    height: 72vh !important;
  }
}