/* Elevate R37 UI59 Mobile Recovery R1 — 2026-09-05
   Purpose: recover phone/tablet usability after cumulative UI standardization.
   Presentation only. No JS, Python, calculations, access, order, broker, connector or data changes. */

@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .dashboard-page,
  .dashboard-page .elevate-frozen-top,
  .dashboard-page .elevate-product-area,
  .dashboard-page .container,
  .dashboard-page .card,
  .dashboard-page .card-header,
  .dashboard-page .card-body,
  .dashboard-page .analysis-section,
  .dashboard-page .decision-cockpit,
  .dashboard-page .wealth-function-view,
  .dashboard-page #wealth-management-area {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Wide data remains complete and scrolls inside its own region only. */
  .dashboard-page :is(
    .portfolio-table-wrap,.wizard-table-wrap,.wizard-existing-details,
    .oi-all-wrap,.oi-table-wrap,.moving-average-table-wrap,
    .strangle-analysis-result,.portfolio-book-legs-table,
    .wb-table-wrap,.wealth-table-wrap
  ),
  .account-setup-page .table-wrap,
  .admin-page .table-wrap,
  .user-manual-page table,
  .wealth-manual-page table,
  .access-levels-page .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain !important;
  }

  /* Never split short labels or financial values character-by-character. */
  .dashboard-page :is(
    .portfolio-title,.portfolio-summary-metric>span,.portfolio-summary-metric>strong,
    .wizard-metric>span,.wizard-metric>strong,
    .oi-stat span,.oi-stat strong,.ma-stat span,.ma-stat strong,
    .wealth-summary-card>span,.wealth-summary-card>strong,
    .wealth-history-kpi span,.wealth-history-kpi strong,
    .wb-r4-kpi-grid span,.wb-r4-kpi-grid strong,
    .wb-fire-level-card span,.wb-fire-level-card strong
  ) {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .dashboard-page :is(
    .portfolio-summary-metric>strong,.wizard-metric>strong,
    .oi-stat strong,.ma-stat strong,
    .wealth-summary-card>strong,.wealth-history-kpi strong,
    .wb-r4-kpi-grid strong,.wb-fire-level-card strong
  ) {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Decorative separators cannot become grid cells. */
  .dashboard-page .portfolio-summary-sep {
    display: none !important;
  }
}

/* Phone recovery: favor readable one-column workspaces over squeezed desktop density. */
@media (max-width: 600px) {
  /* ---------- Portfolio Analyzer ---------- */
  .dashboard-page #portfolio-analyzer-card .portfolio-topline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "title" "pnl" "actions" !important;
    gap: 8px !important;
    align-items: start !important;
    padding: 10px !important;
  }
  .dashboard-page #portfolio-analyzer-card .portfolio-title {
    grid-area: title !important;
    width: 100% !important;
  }
  .dashboard-page #portfolio-analyzer-card .portfolio-pnl-cluster {
    grid-area: pnl !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .dashboard-page #portfolio-analyzer-card .portfolio-pnl-cluster > * {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .dashboard-page #portfolio-analyzer-card .portfolio-fy-wrap,
  .dashboard-page #portfolio-analyzer-card .portfolio-today-pnl {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    white-space: normal !important;
  }
  .dashboard-page #portfolio-analyzer-card .portfolio-head-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .dashboard-page #portfolio-analyzer-card .portfolio-updated {
    min-width: 0 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .dashboard-page #portfolio-summary.portfolio-summary-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 8px 10px 10px !important;
  }
  .dashboard-page #portfolio-summary .portfolio-summary-metric,
  .dashboard-page #portfolio-summary .portfolio-view-all {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
  }
  .dashboard-page #portfolio-summary .portfolio-summary-metric {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .dashboard-page #portfolio-summary .portfolio-summary-metric > span:first-child {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .dashboard-page #portfolio-summary .portfolio-summary-metric > strong {
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
  .dashboard-page #portfolio-summary .portfolio-margin-toggle-label {
    flex: 0 0 auto !important;
  }
  .dashboard-page #portfolio-summary .portfolio-view-all {
    grid-column: 1 !important;
    margin: 0 !important;
  }

  /* ---------- Adjustment Wizard / Sell / Square-off ---------- */
  .dashboard-page #strategy-wizard-card .wizard-controls,
  .dashboard-page .wizard-controls.wizard-controls-compact,
  .dashboard-page .strangle-form-grid,
  .dashboard-page .strangle-order-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .dashboard-page #strategy-wizard-card .wizard-controls > *,
  .dashboard-page .wizard-controls.wizard-controls-compact > *,
  .dashboard-page .strangle-form-grid > * {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .dashboard-page .wizard-compact-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .dashboard-page .wizard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .dashboard-page .wizard-metric {
    min-width: 0 !important;
  }

  /* ---------- OI / Moving Average ---------- */
  .dashboard-page .oi-detail-toolbar,
  .dashboard-page .moving-average-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .dashboard-page .oi-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ---------- Wealth workspaces ---------- */
  #wealth-asset-collector-view .wealth-asset-row,
  #wealth-asset-analyzer-view .wealth-analyzer-grid,
  #wealth-builder-view .wb-r5-builder-pair,
  #wealth-builder-view .wb-r4-result-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #wealth-asset-analyzer-view .wealth-analyzer-kpis,
  #wealth-asset-analyzer-view .wealth-history-kpis,
  #wealth-builder-view .wb-r4-kpi-grid,
  #wealth-builder-view .wb-fire-level-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #wealth-builder-view .wb-r4-kpi-grid > article.primary,
  #wealth-asset-analyzer-view .wealth-summary-card.total {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  #wealth-asset-analyzer-view .wealth-summary-card>strong,
  #wealth-builder-view .wb-r4-kpi-grid strong {
    font-size: clamp(18px, 5.2vw, 22px) !important;
  }

  /* Keep educational and source tabs usable by swiping instead of squeezing text. */
  #wealth-asset-collector-view .wealth-source-nav,
  #wealth-asset-collector-view .wealth-source-tabs,
  #wealth-foundations-view .wealth-esip-tabs-five,
  #wealth-options-view .wo-topic-tabs,
  .dashboard-page .wealth-function-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }
}

@media (max-width: 430px) {
  /* Extra-narrow phone guard. */
  .dashboard-page .card,
  .dashboard-page .analysis-section,
  .dashboard-page .decision-cockpit,
  .dashboard-page .wealth-function-view {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .dashboard-page .wizard-metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .dashboard-page .wizard-metric {
    min-height: 44px !important;
  }

  #wealth-asset-analyzer-view .wealth-history-controls,
  #wealth-asset-analyzer-view .wealth-history-head,
  #wealth-builder-view .wb-actions,
  #wealth-builder-view .wb-r4-results-actions {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Secondary application pages: forms stack, wide tables scroll. */
  .account-setup-page .row,
  .admin-page .row,
  .registration-page .form-grid,
  .registration-page .row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Header and compact-state corrections discovered during 400px visual audit. */
@media (max-width: 768px) {
  .dashboard-page #option-app-header .market-info-connectivity .kite-status-button,
  .dashboard-page #option-app-header .market-info-connectivity .telegram-header-status {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Fast-confirmation is a light panel inside the dark cockpit: keep its text readable. */
  .dashboard-page .decision-fast-confirmation {
    color: #172033 !important;
  }
  .dashboard-page .decision-fast-confirmation :is(.decision-fast-kicker,.decision-fast-main,.decision-oi-updated,.decision-final-score span) {
    color: #475467 !important;
  }
  .dashboard-page .decision-fast-confirmation :is(strong,.decision-final-score strong) {
    color: #172033 !important;
  }

  #wealth-management-area .wealth-product-actions .header-action-link {
    color: #1457d9 !important;
    background: #ffffff !important;
    border-color: #b9c8da !important;
  }
}

@media (max-width: 430px) {
  /* Later badge standardization must not undo the R28 narrow-phone session rule. */
  .dashboard-page .elevate-product-username,
  .dashboard-page .elevate-product-session .header-role-badge {
    display: none !important;
  }
  .dashboard-page .elevate-product-tab-long { display: none !important; }
  .dashboard-page .elevate-product-tab-short { display: inline !important; }
  .dashboard-page .elevate-product-nav-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .dashboard-page .elevate-product-nav-tabs {
    min-width: 0 !important;
  }
}
@media (max-width: 430px) {
  /* On narrow phones, status readability wins over forcing time + connectivity into one cramped row. */
  .dashboard-page #option-app-header .market-info {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }
  .dashboard-page #option-app-header .market-info-time {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .dashboard-page #option-app-header .market-info-connectivity {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
  .dashboard-page #option-app-header .market-info-account {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
}

/* UI48 introduced a light secondary-page header shell; explicitly restore dark heading contrast. */
.account-setup-page .setup-head h1,
.admin-page > .wrap > .top h1,
.user-manual-page > .wrap > .top h1,
.wealth-manual-page > .shell > .brand h1 {
  color: #0f172a !important;
}


/* ==========================================================
   Mobile Recovery R1 · Visual cohesion + contrast
   User-confirmed 2026-09-05 requirements:
   - Global top strip owns the Elevate logo.
   - Product-specific headers do not repeat the logo.
   - Authenticated workspace uses a cohesive dark shell, not white bands.
   - Dark panels must meet strong readable contrast.
   ========================================================== */
.dashboard-page {
  background:#070b12 !important;
  color:#e8eef6 !important;
}
.dashboard-page > .container,
.dashboard-page .container {
  background:transparent !important;
}
.dashboard-page .elevate-frozen-top {
  background:#070b12 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.34) !important;
}
.dashboard-page #option-trading-area {
  background:transparent !important;
}

/* The logo/wordmark belongs to the global product strip only. */
.dashboard-page #option-app-header .app-logo,
.dashboard-page #wealth-product-header .wealth-product-logo {
  display:none !important;
}
.dashboard-page #option-app-header .header-left,
.dashboard-page #wealth-product-header .wealth-product-brand {
  gap:0 !important;
}

/* Option product header: cohesive dark surface and stronger text contrast. */
.dashboard-page #option-app-header {
  background:#080d14 !important;
  border:1px solid #243244 !important;
  color:#f8fafc !important;
  box-shadow:0 8px 22px rgba(0,0,0,.28) !important;
}
.dashboard-page #option-app-header .header-title h1 { color:#ffffff !important; }
.dashboard-page #option-app-header .header-line-2 { color:#67e8f9 !important; }
.dashboard-page #option-app-header .header-line-3 { color:#facc15 !important; }
.dashboard-page #option-app-header .ticker-label { color:#b6c4d5 !important; }
.dashboard-page #option-app-header .market-ticker strong,
.dashboard-page #option-app-header .market-ticker .market-price { color:#f8fafc !important; }
.dashboard-page #option-app-header .market-clock { color:#e2e8f0 !important; }
.dashboard-page #option-app-header .market-info-account .header-action-link {
  color:#93c5fd !important;
  background:#0e1723 !important;
  border-color:#33465d !important;
}
.dashboard-page #option-app-header .market-info-account .header-action-link:hover {
  color:#dbeafe !important;
  background:#142235 !important;
  border-color:#4f79aa !important;
}
.dashboard-page #option-app-header .spot-watch-label { color:#9bd4ff !important; }

/* Decision Cockpit: remove the harsh white island and keep semantic colors legible. */
.dashboard-page .decision-confluence-breakdown {
  background:#0b1118 !important;
  border-top:1px solid #263446 !important;
  border-bottom:1px solid #263446 !important;
}
.dashboard-page .decision-confluence-breakdown-title { color:#67e8f9 !important; }
.dashboard-page .decision-confluence-item {
  background:#111923 !important;
  border-color:#2b3a4a !important;
  color:#e8eef6 !important;
}
.dashboard-page .decision-confluence-item .confluence-evidence,
.dashboard-page .decision-confluence-item em { color:#c4d0dd !important; }
.dashboard-page .decision-fast-confirmation {
  background:#0b1118 !important;
  border-color:#2b3a4a !important;
  color:#e8eef6 !important;
}
.dashboard-page .decision-fast-confirmation :is(.decision-fast-kicker,.decision-fast-main,.decision-oi-updated,.decision-final-score span) {
  color:#b8c7d8 !important;
}
.dashboard-page .decision-fast-confirmation :is(strong,.decision-final-score strong) {
  color:#ffffff !important;
}

/* Portfolio / analysis cards: dark surface, clear labels and numbers. */
.dashboard-page #portfolio-analyzer-card,
.dashboard-page #portfolio-analyzer-card .portfolio-topline,
.dashboard-page #portfolio-analyzer-card .portfolio-summary-line {
  background:#0a1017 !important;
  color:#e8eef6 !important;
  border-color:#263446 !important;
}
.dashboard-page #portfolio-analyzer-card .portfolio-title,
.dashboard-page #portfolio-analyzer-card .portfolio-summary-metric > span { color:#b8c7d8 !important; }
.dashboard-page #portfolio-analyzer-card .portfolio-summary-metric > strong { color:#f8fafc !important; }
.dashboard-page #portfolio-analyzer-card .portfolio-summary-metric,
.dashboard-page #portfolio-analyzer-card .portfolio-view-all {
  background:#0d151f !important;
  border-color:#28394c !important;
}

/* Wealth product header/navigation: keep the workspace light where useful, but remove white header bands. */
.dashboard-page #wealth-management-area .wealth-product-header {
  background:linear-gradient(135deg,#0a1420 0%,#10243a 100%) !important;
  border-color:#2b435e !important;
  box-shadow:0 8px 20px rgba(0,0,0,.25) !important;
}
.dashboard-page #wealth-management-area .wealth-product-kicker { color:#7dd3fc !important; }
.dashboard-page #wealth-management-area .wealth-product-title h1 { color:#ffffff !important; }
.dashboard-page #wealth-management-area .wealth-product-subtitle { color:#c5d3e2 !important; }
.dashboard-page #wealth-management-area .wealth-product-actions .header-action-link {
  color:#dbeafe !important;
  background:#0d1a29 !important;
  border-color:#38516d !important;
}
.dashboard-page #wealth-management-area .wealth-product-actions .header-action-link:hover {
  color:#ffffff !important;
  background:#13273d !important;
  border-color:#5d8fc4 !important;
}
body.dashboard-page.wealth-product-active #wealth-management-area .wealth-function-nav {
  background:#0a1420 !important;
  border-color:#29415b !important;
}
body.dashboard-page.wealth-product-active #wealth-management-area .wealth-function-tab {
  color:#c9d6e4 !important;
  background:transparent !important;
}
body.dashboard-page.wealth-product-active #wealth-management-area .wealth-function-tab:hover { color:#ffffff !important; background:#10243a !important; }
body.dashboard-page.wealth-product-active #wealth-management-area .wealth-function-tab.active {
  color:#ffffff !important;
  background:#1d4ed8 !important;
  border-color:#60a5fa !important;
}

/* Never let generic global wrapping fracture compact badges/controls. */
.dashboard-page :is(
  .decision-cockpit-badge,.market-badge,.elevate-uat-badge,.header-role-badge,
  .kite-status-button,.telegram-header-status,.header-action-link,.wealth-function-tab,
  .wealth-source-tab,.portfolio-margin-toggle-label
) {
  word-break:normal !important;
  overflow-wrap:normal !important;
  white-space:nowrap !important;
}

/* Tablet Decision Cockpit cannot keep five narrow signal cards safely. */
@media (max-width: 900px) {
  .dashboard-page .decision-confluence-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 600px) {
  .dashboard-page #option-app-header .header-brand-band {
    min-width:0 !important;
  }
  .dashboard-page #option-app-header .header-title {
    width:100% !important;
    min-width:0 !important;
  }
  .dashboard-page #option-app-header .header-title h1 {
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  .dashboard-page .decision-confluence-grid {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .dashboard-page .decision-confluence-item {
    min-width:0 !important;
    width:100% !important;
  }
}


/* Secondary authenticated pages: eliminate the last bright white header islands. */
.account-setup-page .setup-head,
.admin-page > .wrap > .top,
.user-manual-page > .wrap > .top,
.wealth-manual-page > .shell > .brand {
  background:linear-gradient(135deg,#0a1420 0%,#10243a 100%) !important;
  border-color:#2b435e !important;
  color:#f8fafc !important;
  box-shadow:0 8px 20px rgba(0,0,0,.22) !important;
}
.account-setup-page .setup-head h1,
.admin-page > .wrap > .top h1,
.user-manual-page > .wrap > .top h1,
.wealth-manual-page > .shell > .brand h1 {
  color:#ffffff !important;
}
.account-setup-page .setup-head :is(p,small,span),
.admin-page > .wrap > .top :is(p,small,span),
.user-manual-page > .wrap > .top :is(p,small,span),
.wealth-manual-page > .shell > .brand :is(p,small,span) {
  color:#c7d4e2 !important;
}
.account-setup-page .setup-head :is(a,button),
.admin-page > .wrap > .top :is(a,button),
.user-manual-page > .wrap > .top :is(a,button),
.wealth-manual-page > .shell > .brand :is(a,button) {
  color:#dbeafe !important;
  background:#0d1a29 !important;
  border-color:#38516d !important;
}

/* Long runtime/setup messages must wrap inside the viewport rather than widen the page. */
.account-setup-page :is(.status,.status-line,.setup-status,.setup-message,.cache-status,.token-status,.telegram-status,.hint,.help,.note),
.admin-page :is(.status,.message,.hint,.help,.note),
.registration-page :is(.status,.message,.hint,.help,.note) {
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

/* Tablet / small-laptop recovery: the legacy 3-column header used fixed 300 + 520 + 390 widths. */
@media (max-width: 1100px) and (min-width: 769px) {
  .dashboard-page #option-app-header {
    display:grid !important;
    grid-template-columns:minmax(220px,.8fr) minmax(0,2fr) !important;
    grid-template-areas:
      "brand metrics"
      "status status"
      "spot spot" !important;
    gap:8px 14px !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  .dashboard-page #option-app-header .header-brand-band { grid-area:brand !important; min-width:0 !important; }
  .dashboard-page #option-app-header .header-market-band { grid-area:metrics !important; min-width:0 !important; width:100% !important; overflow:hidden !important; }
  .dashboard-page #option-app-header #option-spot-watch-strip { grid-area:spot !important; min-width:0 !important; width:100% !important; }
  .dashboard-page #option-app-header .header-status-band { grid-area:status !important; min-width:0 !important; width:100% !important; }
  .dashboard-page #option-app-header .market-info {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
  }
  .dashboard-page #option-app-header .market-info-time { grid-column:1 !important; justify-content:flex-start !important; }
  .dashboard-page #option-app-header .market-info-account { grid-column:2 !important; justify-content:center !important; }
  .dashboard-page #option-app-header .market-info-connectivity { grid-column:3 !important; justify-content:flex-end !important; }
  .dashboard-page #option-app-header .core-market-tickers {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    min-width:0 !important;
    width:100% !important;
    gap:6px 10px !important;
  }
  .dashboard-page #option-app-header .market-ticker { min-width:0 !important; }
  .dashboard-page .decision-confluence-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .dashboard-page .decision-confluence-item { min-width:0 !important; }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .dashboard-page #option-app-header .market-ticker {
    overflow:hidden !important;
  }
  .dashboard-page #option-app-header .market-ticker :is(.ticker-label,strong,.market-price,.market-change) {
    max-width:100% !important;
  }
}