/* Reset + page-level layout (sidebar / topbar / main content grid). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  color: inherit;
}

a {
  color: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: 100vh;
}

.main-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
}

.page-content {
  padding: var(--space-6) var(--space-7) var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
  align-items: start;
  min-width: 0;
}

/* Flex/grid items default to min-width:auto, which lets wide content (like
   the holdings table) force the whole card — and the page — wider than the
   viewport. min-width:0 lets each card contain its own overflow instead. */
.page-content > *,
.dashboard-grid > * {
  min-width: 0;
}

/* Stacks the two "Allocation by ..." cards in the dashboard's right-hand
   column, one above the other — also used by the Today page's "Change by
   account"/"Change by asset class" pair, which shares this exact layout.
   Milestone 24 follow-up: tightened from --space-6 to --space-5 per
   feedback that the gap between the two cards looked slightly too wide. */
.side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

@media (max-width: 1080px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Milestone 17: the Today page's "Biggest winners" / "Biggest losers"
   pair — unlike .dashboard-grid above (2fr/1fr, chart vs. side cards),
   these two cards are equally important, so they get equal columns. */
.today-movers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
  min-width: 0;
}

.today-movers-grid > * {
  min-width: 0;
}

/* The winners/losers tables only ever have two columns (Position, Today's
   change) — nowhere near wide enough to need the main Holdings table's
   920px min-width (that number is sized for a full page with 6-9 columns).
   Sitting in a two-column grid, that min-width forced a horizontal
   scrollbar even though the actual content fit comfortably — so it's
   overridden back to 0 here, letting the table size to its own content
   instead. */
.today-movers-grid .holdings-table {
  min-width: 0;
}

/* Second half of the same fix: .security-name/.security-meta inherit
   `white-space: nowrap` from .holdings-table td (components.css), which is
   fine on the main Holdings/asset-class tables — they're full page width,
   so even a long ETF name (e.g. "L&G ROBO Global Robotics and Automation
   UCITS ETF") has room. In this narrow half-width card, a name that long
   still forced the column (and the whole table) wider than the card,
   reintroducing the same horizontal-scrollbar problem even after the
   min-width fix above. Letting the name/meta text wrap, with a sensible
   cap on how wide that first column gets, keeps every row's height
   consistent-ish without ever pushing the table wider than its card. */
.today-movers-grid .security-name,
.today-movers-grid .security-meta {
  white-space: normal;
}

.today-movers-grid td.col-security {
  max-width: 200px;
}

@media (max-width: 1080px) {
  .today-movers-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile: sidebar collapses to a bottom/top bar instead of a fixed column */
@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .main-column {
    height: auto;
  }

  .page-content {
    padding: var(--space-4) var(--space-4) var(--space-8);
  }
}