/* Shared mobile panel surface, matching Dashboard mobile cards. */
@media (max-width: 760px) {
  /* Use the same page canvas as the mobile Dashboard, independently of cards. */
  html body,
  html body > .container {
    background: var(--banymay-app-page-bg, #0d151b) !important;
    background-image: none !important;
  }
  html body :is(
    #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section,
    #sectors-section#sectors-section#sectors-section#sectors-section#sectors-section,
    #deposits-section#deposits-section#deposits-section#deposits-section#deposits-section,
    #withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section,
    #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section,
    #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section,
    #taxes-section#taxes-section#taxes-section#taxes-section#taxes-section,
    #profile-section#profile-section#profile-section#profile-section#profile-section,
    #settings-section#settings-section#settings-section#settings-section#settings-section,
    #leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section,
    #admin-section#admin-section#admin-section#admin-section#admin-section
  ).active,
  html body #profile-section#profile-section#profile-section#profile-section#profile-section.active > .profile-page.banymay-my-plan {
    background: var(--banymay-app-page-bg, #0d151b) !important;
    background-image: none !important;
  }

  html body {
    --app-mobile-panel-surface: #111c23;
  }
  html[data-appearance="light"] body {
    --app-mobile-panel-surface: #fff;
  }

  /* Top-level cards and panels across application pages. Do not recolor
     buttons, selected tabs, popovers, or chart data. */
  html body :is(
    #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section,
    #sectors-section#sectors-section#sectors-section#sectors-section#sectors-section,
    #deposits-section#deposits-section#deposits-section#deposits-section#deposits-section,
    #withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section,
    #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section,
    #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section,
    #taxes-section#taxes-section#taxes-section#taxes-section#taxes-section,
    #profile-section#profile-section#profile-section#profile-section#profile-section,
    #settings-section#settings-section#settings-section#settings-section#settings-section,
    #leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section,
    #admin-section#admin-section#admin-section#admin-section#admin-section
  ).active :is(
    .panel,
    .card,
    .portfolio-summary-item,
    .deposits-stat-band,
    .deposits-invested-band,
    .withdrawals-mobile-overview,
    .withdrawals-summary-panel,
    .stocks-mobile-panel,
    .allocation-item,
    .allocation-account-panel,
    .my-plan-sidebar,
    .my-plan-nav,
    .my-plan-projection-tabs,
    .my-plan-kpi-card,
    .my-plan-panel,
    .my-plan-projection-assumption,
    .my-plan-projection-result,
    .my-plan-projection-requirements .profile-table-row:not(.profile-table-head),
    .my-plan-lifestyle-item,
    .my-plan-indicator-item,
    .rr-kpi,
    .rr-panel,
    .rr-summary,
    .rr-assumptions,
    .taxes-mobile-country,
    .capital-gains-calculation,
    .taxes-mobile-metric,
    [class$="-panel"],
    [class*="-panel "],
    [class$="-card"],
    [class*="-card "],
    [class*="-card--"]
  ):not(.action-menu-panel):not(.deposits-action-menu-panel):not(.settings-card-stack):not(.taxes-panels) {
    border-radius: 0 !important;
    background: var(--app-mobile-panel-surface) !important;
    background-image: none !important;
  }

  /* On phones these table rows are themselves the visible cards. */
  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section.active .stocks-mobile-holding,
  html body #deposits-section#deposits-section#deposits-section#deposits-section#deposits-section.active #deposits-tbody tr,
  html body #withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section.active #withdrawals-table-body tr,
  html body #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section.active #dividends-monthly-table tbody tr,
  html body #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section.active #dividends-annual-table tbody tr,
  html body #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section.active #stocks-gains-table-body tr {
    border-radius: 0 !important;
    background: var(--app-mobile-panel-surface) !important;
    background-image: none !important;
  }

  /* Editor panels are rendered outside their page section. */
  html body .mobile-deposit-editor-card,
  html body .withdrawals-mobile-edit-form {
    border-radius: 0 !important;
    background: var(--app-mobile-panel-surface) !important;
    background-image: none !important;
  }

  /* Stocks: two-line holdings cards, with colour on text rather than badges. */
  html body #stocks-section.active .stocks-mobile-list { min-width: 0; }
  html body #stocks-section#stocks-section#stocks-section.active .stocks-mobile-head {
    grid-template-columns: 24px minmax(0,1.55fr) minmax(0,.86fr) minmax(0,.82fr) minmax(0,.9fr) minmax(0,.65fr) !important;
    gap: 5px; min-height: 39px; padding: 0 9px 5px; border: 0; background: transparent;
  }
  html body #stocks-section#stocks-section#stocks-section.active .stocks-mobile-head > button {
    width: auto !important; min-width: 0; color: var(--mobile-stocks-muted);
    font-size: clamp(8px, 2.35vw, 11px) !important; font-weight: 700;
    line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; text-align: left !important;
  }
  html body #stocks-section#stocks-section#stocks-section.active .stocks-mobile-head > button:last-child { text-align: left !important; }
  html body #stocks-section.active .stocks-mobile-holding { box-sizing: border-box; min-width: 0; margin-bottom: 7px; border: 1px solid var(--mobile-stocks-border); }
  html body #stocks-section.active .stocks-mobile-holding > .stocks-mobile-row {
    grid-template-columns: 24px minmax(0,1.55fr) minmax(0,.86fr) minmax(0,.82fr) minmax(0,.9fr) minmax(0,.65fr);
    gap: 5px; min-height: 72px; padding: 10px 9px; border-bottom: 0;
  }
  html body #stocks-section.active .stocks-mobile-asset,
  html body #stocks-section.active .stocks-mobile-weight,
  html body #stocks-section.active .stocks-mobile-shares,
  html body #stocks-section.active .stocks-mobile-broker { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; text-align: left; }
  html body #stocks-section.active .stocks-mobile-row :is(.stocks-mobile-asset strong,.stocks-mobile-weight strong,.stocks-mobile-shares strong,.stocks-mobile-broker strong) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mobile-stocks-text); font-size: clamp(10px,2.8vw,14px); font-weight: 700; }
  html body #stocks-section.active .stocks-mobile-row :is(.stocks-mobile-asset span,.stocks-mobile-weight span,.stocks-mobile-shares span) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mobile-stocks-muted); font-size: clamp(9px,2.45vw,12px); }
  html body #stocks-section.active .stocks-mobile-change { padding: 0; border: 0; background: none; text-align: center; font-size: clamp(10px,2.7vw,13px); font-weight: 700; }
  html body #stocks-section.active .stocks-mobile-change.positive,
  html body #stocks-section.active .stocks-mobile-risk.safe { color: #54d6aa; }
  html body #stocks-section.active .stocks-mobile-change.negative,
  html body #stocks-section.active .stocks-mobile-risk.high { color: #ef7279; }
  html body #stocks-section.active .stocks-mobile-risk.medium { color: #e8b84b; }
  html body #stocks-section.active .stocks-mobile-risk { padding: 0; border: 0; background: none; font-size: clamp(9px,2.5vw,12px); font-weight: 700; }
  html body #stocks-section.active .stocks-mobile-expand { display: none; }
  html body #stocks-section.active .stocks-mobile-check { width: 17px !important; height: 17px !important; }
}