/* =============================================================================
   Gateway responsive shell — fluid type + React Native–style mobile UX
   Linked on every 4TraderGateway page. Does not require IIS recycle for www.
   ============================================================================= */

:root {
  --gw-fs: clamp(12px, 0.28vw + 11.2px, 14px);
  --gw-fs-sm: clamp(11px, 0.22vw + 10.4px, 13px);
  --gw-fs-xs: clamp(10px, 0.18vw + 9.6px, 12px);
  --gw-fs-lg: clamp(15px, 0.45vw + 13px, 18px);
  --gw-fs-title: clamp(16px, 0.7vw + 13px, 20px);
  --gw-pad: clamp(10px, 1.6vw, 20px);
  --gw-gap: clamp(8px, 1.2vw, 16px);
  --gw-touch: 44px;
  --gw-safe-t: env(safe-area-inset-top, 0px);
  --gw-safe-b: env(safe-area-inset-bottom, 0px);
  --gw-safe-l: env(safe-area-inset-left, 0px);
  --gw-safe-r: env(safe-area-inset-right, 0px);
}

html {
  font-size: var(--gw-fs);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  padding-left: var(--gw-safe-l);
  padding-right: var(--gw-safe-r);
  overflow-x: clip;
  max-width: 100%;
}

/* Fluid base UI type */
.panel-title,
.dash-page-title { font-size: var(--gw-fs-title); }
.panel { padding: var(--gw-pad); }
.muted { font-size: var(--gw-fs-sm); }
.btn { font-size: var(--gw-fs); min-height: 36px; }
.btn.sm { font-size: var(--gw-fs-sm); min-height: 32px; }
.field-label { font-size: var(--gw-fs-sm); }
.field-input,
.field-select,
select.field-input,
input.field-input,
textarea.field-input {
  font-size: var(--gw-fs);
  min-height: 40px;
}

/* Tables: always allow horizontal scroll + fluid cell type */
.gw-table-scroll,
.dash-table-scroll,
.table-wrap,
.table-scroll,
.login-table-wrap,
.ltd-today-closed-table-wrap,
.ltd-trade-pattern-table-wrap,
.ltd-trade-pattern-drill-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table {
  font-size: var(--gw-fs-sm);
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  font-size: inherit;
  padding: clamp(6px, 0.5vw + 4px, 10px) clamp(6px, 0.6vw + 4px, 12px);
  line-height: 1.35;
  word-break: break-word;
}

.table .mono,
.table .num {
  font-size: var(--gw-fs-xs);
  font-variant-numeric: tabular-nums;
}

/* KPI / grids tighten on mid screens */
@media (max-width: 1100px) {
  .kpi-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .topbar {
    padding-top: calc(10px + var(--gw-safe-t));
    gap: 8px;
  }
  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .panel-stack,
  .tab-panel.is-active {
    gap: var(--gw-gap);
  }
}

/* =============================================================================
   Phone + tablet ≤1023px — React Native app shell
   ============================================================================= */
@media (max-width: 1023.98px) {
  html.gw-rn-mobile,
  body.gw-rn-mobile {
    --gw-fs: 13px;
    --gw-fs-sm: 12px;
    --gw-fs-xs: 11px;
    --gw-fs-lg: 15px;
    --gw-fs-title: 17px;
  }

  html.gw-rn-mobile,
  body.gw-rn-mobile {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Full-bleed shell — no left/right page gaps */
  #mainContent,
  main.container,
  main.container-wide,
  .container,
  .container-wide,
  html.gw-embed .wrap,
  .wrap,
  .dealer-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  #mainContent,
  main.container,
  main.container-wide {
    /* Room for fixed bottom tabs */
    padding-bottom: calc(64px + var(--gw-safe-b)) !important;
    overflow-x: hidden;
  }

  .bg {
    left: 0;
    right: 0;
    width: 100%;
  }

  /* App chrome — RN header + status strip */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: calc(8px + var(--gw-safe-t)) 10px 8px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }

  .topbar .brand {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    gap: 8px;
  }

  .topbar .logo.logo-has-img {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
  }

  .topbar .logo.logo-has-img .logo-img {
    height: 28px;
    max-height: 28px;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-subtitle {
    display: none;
  }

  .topbar-actions {
    /* Let children participate in .topbar flex so status can span full width */
    display: contents;
  }

  .topbar-actions > :not(.status-group):not(.dealer-nav-pills) {
    order: 10;
    flex: 0 0 auto;
  }

  /* Status chips on their own full-width row (all visible) */
  .topbar-actions .status-group,
  .topbar-actions .dealer-nav-pills {
    order: 30;
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .topbar-actions .lp-pills,
  .dealer-lp-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    overflow: visible;
  }

  .topbar-actions .status-group .pill,
  .topbar-actions .lp-pills .pill,
  .topbar-actions .dealer-nav-pills .pill,
  .dealer-lp-pills .pill {
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 28px;
    padding: 5px 9px;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .topbar-actions .btn,
  .topbar-menu-inner .btn {
    min-height: var(--gw-touch);
    padding: 10px 12px;
    border-radius: 12px;
  }

  #btnActionsMenu {
    min-height: 36px;
    height: auto;
    border-radius: 12px;
  }

  /* Bottom tab bar (primary nav) — solid, not translucent */
  nav.tabs,
  .dealer-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    margin: 0;
    padding: 6px 2px calc(6px + var(--gw-safe-b));
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    background: #121a2c;
    border-top: 1px solid var(--border);
    border-bottom: none;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  :root[data-theme="light"] nav.tabs,
  :root[data-theme="light"] .dealer-tabs {
    background: #ffffff;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
  }
  nav.tabs::-webkit-scrollbar,
  .dealer-tabs::-webkit-scrollbar { display: none; }

  nav.tabs .tab,
  .dealer-tabs .dealer-tab-btn,
  .dealer-tabs .btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    scroll-snap-align: none;
    min-height: 56px;
    margin: 0;
    padding: 8px 4px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Disabled / role-gated modules must not appear in the bottom tab bar */
  nav.tabs .tab[hidden],
  .dealer-tabs .dealer-tab-btn[hidden],
  .dealer-tabs .btn[hidden],
  nav.tabs .tab[aria-hidden="true"],
  .dealer-tabs [aria-hidden="true"] {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  nav.tabs .tab.active,
  .dealer-tabs .dealer-tab-btn.is-active,
  .dealer-tabs .btn.is-active {
    background: rgba(124, 92, 255, 0.16);
    color: var(--text);
    box-shadow: none;
  }

  :root[data-theme="light"] nav.tabs .tab.active,
  :root[data-theme="light"] .dealer-tabs .dealer-tab-btn.is-active {
    background: rgba(99, 102, 241, 0.14);
  }

  /* Subtabs stay under content (not bottom bar) */
  .settings-subtabs,
  .dev-settings-subnav,
  .master-dual-subtabs,
  .modal-tabs {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 4px 10px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .settings-subtabs::-webkit-scrollbar,
  .dev-settings-subnav::-webkit-scrollbar,
  .master-dual-subtabs::-webkit-scrollbar { display: none; }

  /* Sections / panels — full width, don't clip card shadows/borders */
  .panel,
  .tab-panel,
  .panel-stack {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: visible;
    min-width: 0;
  }

  .panel {
    border-radius: 0;
    padding: 12px;
    margin-left: 0;
    margin-right: 0;
    border-left: none;
    border-right: none;
  }

  .panel-head {
    gap: 8px;
    margin-bottom: 12px;
    align-items: flex-start;
  }

  .panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-left: 0;
    gap: 8px;
  }

  .panel-actions .btn {
    flex: 1 1 auto;
    min-height: var(--gw-touch);
    justify-content: center;
  }

  /* Keep desktop hidden / developer-gated controls hidden on mobile too */
  .panel-actions .btn[hidden],
  .panel-head .btn[hidden],
  .section-toolbar .btn[hidden],
  .section-toggle[hidden],
  .gw-rn-toggle[hidden],
  [data-developer-only][hidden],
  [data-non-developer-only][hidden],
  [data-section-id][hidden],
  .panel[hidden],
  .fieldset[hidden],
  .kpi[hidden] {
    display: none !important;
  }

  /* Developer-only queue clear actions must be visible when unhidden */
  html.gw-is-developer .panel-actions .btn[data-developer-only]:not([hidden]) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .section-toggle,
  .gw-rn-toggle {
    flex: 0 0 auto !important;
    width: 28px;
    height: 28px;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px;
    max-height: 28px;
    padding: 0 !important;
    margin: 0;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 18px;
    font-weight: 700;
  }

  .section-toggle .gw-rn-chevron,
  .gw-rn-toggle .gw-rn-chevron {
    font-size: 20px;
    line-height: 1;
    display: block;
    transform: translateY(-0.5px);
  }

  .panel-actions .section-toggle,
  .section-toolbar .section-toggle,
  .kpi-card-title-row .section-toggle {
    flex: 0 0 auto !important;
  }

  .gw-rn-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0 8px;
  }

  .gw-rn-toggle-label {
    font-size: var(--gw-fs-sm);
    font-weight: 600;
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kpi-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  .kpi-card-title-row .kpi-card-title {
    min-width: 0;
  }

  .kpi-card-title-row .section-toggle,
  .kpi-card-title-row .gw-rn-toggle {
    margin-left: auto;
  }

  /* Hide/show bodies — works even when .section-body wrapper is missing */
  .section-collapsed > .section-body,
  .section-collapsed > .panel-body,
  .gw-rn-collapsed > .section-body,
  .gw-rn-collapsed > .panel-body {
    display: none !important;
  }

  .panel.section-collapsed > :not(.panel-head):not(.section-toolbar):not(.gw-rn-toggle-bar),
  .panel.gw-rn-collapsed > :not(.panel-head):not(.section-toolbar):not(.gw-rn-toggle-bar),
  .settings-overview-block.section-collapsed > :not(.section-toolbar):not(.gw-rn-toggle-bar),
  .dash-targets-stack.section-collapsed > :not(.panel-head):not(.section-toolbar):not(.gw-rn-toggle-bar),
  fieldset.section-collapsed > :not(legend):not(.gw-rn-toggle-bar),
  fieldset.gw-rn-collapsed > :not(legend):not(.gw-rn-toggle-bar) {
    display: none !important;
  }

  .kpi.section-collapsed > :not(.kpi-card-title-row):not(.kpi-card-title):not(.gw-rn-toggle-bar),
  .kpi.gw-rn-collapsed > :not(.kpi-card-title-row):not(.kpi-card-title):not(.gw-rn-toggle-bar),
  .dash-kpi-card.section-collapsed > :not(.kpi-card-title-row):not(.kpi-card-title):not(.gw-rn-toggle-bar),
  .dash-kpi-card.gw-rn-collapsed > :not(.kpi-card-title-row):not(.kpi-card-title):not(.gw-rn-toggle-bar) {
    display: none !important;
  }

  .kpi.section-collapsed,
  .dash-kpi-card.section-collapsed {
    min-height: 0;
    padding-bottom: 10px;
  }

  /* Hide/show section bodies — full-bleed feel */
  .section-body[hidden],
  .panel-body[hidden] {
    display: none !important;
  }

  /* Auth */
  .auth-gate {
    margin: 0;
    max-width: none;
    width: 100%;
    min-height: 100dvh;
    padding: calc(16px + var(--gw-safe-t)) 16px calc(24px + var(--gw-safe-b));
    box-sizing: border-box;
  }
  .auth-gate-card.panel {
    width: 100%;
    border-radius: 20px;
  }

  /* Alerts / toast — banner style above bottom tabs */
  .toast {
    top: auto;
    right: 10px;
    left: 10px;
    bottom: calc(72px + var(--gw-safe-b));
    max-width: none;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: var(--gw-fs);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  }

  .load-error {
    margin: 8px 12px 0;
    border-radius: 14px;
    font-size: var(--gw-fs-sm);
  }

  /* Forms — stacked full width */
  .field {
    width: 100%;
  }
  .field-input,
  .field-select,
  select,
  textarea {
    width: 100%;
    min-height: var(--gw-touch);
    border-radius: 12px;
    font-size: 16px; /* iOS zoom prevention */
  }

  .btn {
    min-height: var(--gw-touch);
    border-radius: 12px;
    padding: 12px 16px;
  }

  /* KPI grids — prevent card edge clipping on narrow screens */
  .kpi-row,
  .ltd-source-modal-kpis,
  .ltd-today-closed-kpis,
  .dash-lp-account-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Dashboard overview cards are wide — one per row on mobile */
  .dash-kpi-row,
  .auto-dash-kpi-row,
  .bonus-dash-kpi-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .dash-kpi-card,
  .kpi-row > .kpi,
  .kpi-row > .kpi-stat,
  .kpi-row > .panel,
  .ltd-source-modal-kpis > *,
  .ltd-today-closed-kpis > *,
  .dash-lp-account-kpis > * {
    min-width: 0 !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .dash-kpi-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ltd-tp-kpi--volume {
    grid-column: span 2;
  }

  /* Queue action buttons — thumb friendly */
  .queue-actions {
    gap: 8px;
  }
  .queue-actions .btn,
  .queue-actions .btn.sm {
    min-height: 36px;
    padding: 8px 12px;
  }

  /* ----- Bottom-sheet modals (above bottom tabs) ----- */
  .gw-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.55) !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .gw-modal[hidden] {
    display: none !important;
  }

  .gw-modal.gw-modal--nested {
    z-index: 90 !important;
  }

  .gw-modal-card,
  .gw-modal-card--wide,
  .gw-modal-card.ltd-today-closed-card,
  .gw-modal-card.dev-mt5-log-modal,
  .gw-modal-card.dev-db-browse-card,
  .gw-modal-card.ltd-ticket-audit-card,
  .gw-modal-card.ltd-source-accounts-card,
  .gw-modal-card.fleet-deploy-modal-card,
  .gw-modal-card.fleet-help-modal,
  .gw-modal-card.gw-user-messages-card,
  .gw-modal .panel {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, 100%) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 12px 14px calc(16px + var(--gw-safe-b)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    animation: gwRnSheetIn 0.28s ease-out;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
  }

  .gw-modal-card .panel-head,
  .gw-modal-card .panel-title,
  .gw-modal .panel-head,
  .gw-modal .panel-title {
    flex-shrink: 0;
  }

  /* Top caption row with red Close for all modal forms */
  .gw-modal .gw-rn-modal-caption,
  .gw-modal .panel-head.gw-rn-modal-caption,
  .gw-modal .fleet-deploy-modal-head.gw-rn-modal-caption,
  .gw-modal .panel-head,
  .gw-modal .fleet-deploy-modal-head {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 4px;
    padding: 4px 0 10px;
    background: var(--surface, var(--topbar-bg, #0b1220));
    border-bottom: 1px solid var(--border);
  }

  .gw-modal .gw-rn-modal-caption .panel-title,
  .gw-modal .panel-head .panel-title,
  .gw-modal .fleet-deploy-modal-head h3,
  .gw-modal .gw-rn-modal-caption h2,
  .gw-modal .gw-rn-modal-caption h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gw-modal .gw-rn-modal-close,
  .gw-modal .panel-head > .gw-rn-modal-close,
  .gw-modal button.ltd-today-closed-close.gw-rn-modal-close,
  .gw-modal button.ltd-source-modal-close.gw-rn-modal-close,
  .gw-modal button.ltd-lp-modal-close.gw-rn-modal-close,
  .gw-modal button.auto-source-modal-close.gw-rn-modal-close,
  .gw-modal button.auto-lp-modal-close.gw-rn-modal-close,
  .gw-modal button.bd-source-modal-close.gw-rn-modal-close,
  .gw-modal button.bd-lp-modal-close.gw-rn-modal-close,
  .gw-modal button.fleet-deploy-modal-close.gw-rn-modal-close,
  .gw-modal button.widget-src-modal-close.gw-rn-modal-close,
  .gw-modal button.widget-lp-modal-close.gw-rn-modal-close {
    flex: 0 0 auto !important;
    order: 99;
    margin-left: auto !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #dc2626 !important;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
  }

  .gw-modal .gw-rn-modal-close:hover,
  .gw-modal .gw-rn-modal-close:focus-visible {
    background: #b91c1c !important;
    color: #fff !important;
  }

  .gw-modal .gw-rn-modal-close-dup[hidden] {
    display: none !important;
  }

  /* Keep totals/meta in caption from crowding the close button */
  .gw-modal .ltd-today-closed-head-totals {
    flex: 1 1 auto;
    min-width: 0;
    order: 2;
  }
  .gw-modal .ltd-today-closed-head > .panel-title {
    order: 1;
  }
  .gw-modal .ltd-today-closed-head > .gw-rn-modal-close {
    order: 3;
  }

  .gw-modal-card .grid-2,
  .gw-modal-card .grid-3,
  .gw-modal .grid-2,
  .gw-modal .grid-3,
  .gw-modal .cp-tab-panel .grid-2 {
    grid-template-columns: 1fr !important;
  }

  .gw-modal-card .field-input,
  .gw-modal-card .field-select,
  .gw-modal-card select,
  .gw-modal-card input,
  .gw-modal-card textarea,
  .gw-modal .field-input,
  .gw-modal .field-select,
  .gw-modal select,
  .gw-modal input,
  .gw-modal textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* avoid iOS zoom */
  }

  .gw-modal-card .btn-row,
  .gw-modal .btn-row,
  .gw-modal-card .panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .gw-modal-card .btn-row .btn,
  .gw-modal .btn-row .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .gw-modal-card .dash-table-scroll,
  .gw-modal-card .table-wrap,
  .gw-modal-card .ltd-today-closed-table-wrap,
  .gw-modal-card .ltd-source-modal-table-wrap,
  .gw-modal .dash-table-scroll {
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gw-modal-card::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    margin: 4px auto 8px;
    flex-shrink: 0;
  }

  :root[data-theme="light"] .gw-modal-card::before {
    background: rgba(15, 23, 42, 0.25);
  }

  @keyframes gwRnSheetIn {
    from { transform: translateY(24px); opacity: 0.85; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* Collapsed sections/cards sink below open ones (order set in JS; CSS fallback) */
  .section-collapsed,
  .gw-rn-collapsed,
  .gw-rn-collapsed-toolbar {
    order: 10000;
  }

  .gw-rn-collapsed-toolbar {
    opacity: 0.85;
  }

  /* ----- Tables as RN list cards ----- */
  .table.gw-table-cards {
    font-size: var(--gw-fs-sm);
    border: 0;
    min-width: 0 !important;
    width: 100%;
  }

  .table.gw-table-cards thead {
    display: none;
  }

  .table.gw-table-cards tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .table.gw-table-cards tbody tr {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-card, var(--surface));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  }

  .table.gw-table-cards tbody tr td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border: 0 !important;
    background: transparent !important;
    text-align: right;
    width: 100%;
    font-size: var(--gw-fs-sm);
    line-height: 1.35;
  }

  .table.gw-table-cards tbody tr td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    max-width: 46%;
    text-align: left;
    color: var(--muted);
    font-size: var(--gw-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .table.gw-table-cards tbody tr td[colspan] {
    display: block;
    text-align: center;
  }
  .table.gw-table-cards tbody tr td[colspan]::before {
    display: none;
  }

  .table.gw-table-cards .queue-actions,
  .table.gw-table-cards .ltd-fire-pill,
  .table.gw-table-cards .event-message {
    text-align: left;
    justify-content: flex-start;
  }

  /* All tables: Trailing-queue style horizontal scroll grids (cards disabled) */
  .table.gw-table-scroll-only {
    table-layout: auto !important;
    font-size: clamp(11px, 2.4vw, 13px);
    min-width: 720px;
    width: max-content;
    max-width: none;
  }
  .table.gw-table-scroll-only th,
  .table.gw-table-scroll-only td {
    padding: 7px 9px;
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: clip !important;
    width: auto !important;
    max-width: none !important;
    font-size: inherit;
  }
  .table.ltd-source-pos-table colgroup,
  .table.ltd-lp-pos-table colgroup,
  .table.dash-pos-table colgroup {
    display: none;
  }
  /* Keep virtualization spacer rows from breaking scroll height on compact */
  .table.ltd-source-pos-table tr.ltd-source-virt-pad td {
    white-space: normal;
  }

  .dash-table-scroll:has(.gw-table-scroll-only),
  .gw-table-scroll:has(.gw-table-scroll-only) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gw-table-scroll,
  .dash-table-scroll,
  .table-wrap,
  .table-scroll {
    margin: 0;
    padding: 0;
    max-width: 100%;
  }

  /* Filters / toolbars stack */
  .ltd-error-report-filters,
  .ltd-ticket-audit-filters,
  .symbol-rules-toolbar,
  .login-toolbar,
  .dealer-lp-identity-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  .log-kind-filter {
    width: 100%;
    flex-wrap: wrap;
  }

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

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  html.gw-rn-mobile,
  body.gw-rn-mobile {
    --gw-fs: 12px;
    --gw-fs-sm: 11px;
    --gw-fs-xs: 10px;
  }

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

  .dash-kpi-row,
  .auto-dash-kpi-row,
  .bonus-dash-kpi-row {
    grid-template-columns: 1fr !important;
  }

  .table.gw-table-cards tbody tr td::before {
    flex-basis: 38%;
  }
}

/* Tablet sweet spot — keep table grid, scale type */
@media (min-width: 1024px) and (max-width: 1280px) {
  .table {
    font-size: clamp(11px, 0.9vw, 13px);
  }
  .table th,
  .table td {
    padding: 7px 8px;
  }
  .tabs {
    flex-wrap: wrap;
  }
  .gw-modal-card.ltd-today-closed-card,
  .gw-modal-card.ltd-ticket-audit-card {
    width: min(96vw, 980px);
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gw-modal-card {
    animation: none !important;
  }
}