/* ---------- Dashboard page ---------- */

#page-content > .card,
#page-content > .dashboard-card,
#page-content > .dashboard-row-3col,
#page-content > .dashboard-row-split,
#page-content > .metrics-section {
  margin-bottom: var(--space-4);
}

.dashboard-card__title {
  font-size: 0.925rem;
  margin-bottom: var(--space-4);
}

/* Edge score / Daily net cumulative P&L / Net daily P&L: three even
   columns, all stretched to the same (tallest) height by default grid
   item stretching. Its own breakpoint (rather than the shell's 899px
   sidebar breakpoint) because three columns get cramped well before
   that. */
.dashboard-row-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* Left column stacks Recent trades / Account balance / Drawdown / Prop
   firm trailing drawdown; right column is the calendar. Both stretch to
   the row's height (the left stack's total height), so the calendar
   card can fill it — see .dashboard-card--calendar below. */
.dashboard-row-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-3);
}

.dashboard-col-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (max-width: 1100px) {
  .dashboard-row-3col,
  .dashboard-row-split {
    grid-template-columns: 1fr;
  }
}

/* Streak / weekdays / plan adherence strip */

.dash-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.dash-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dash-strip__value {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 600;
}

.dash-strip__label {
  font-size: 0.8rem;
  color: var(--muted);
}

.dash-strip__spacer {
  flex: 1;
}

/* Edge score — title, then the radar centered and filling the card width,
   then a bottom row with the score readout on the left and the gradient
   slider on the right. */

.edge-score-card {
  display: flex;
  flex-direction: column;
}

.edge-score-card__radar {
  width: 100%;
  max-width: 320px;
  margin: 0 auto var(--space-4);
}

.edge-score-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.edge-score-card__score-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 2px;
}

.edge-score-card__number {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
}

.edge-score-card__slider {
  flex: 1;
  min-width: 140px;
  max-width: 220px;
}

/* Recent trades table — also reused by Breakdown and Expenses */

.table-scroll {
  overflow-x: auto;
}

.recent-trades-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.recent-trades-table th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 0.8rem;
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border);
}

.recent-trades-table td {
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}

.recent-trades-table tr:last-child td {
  border-bottom: none;
}

/* Balance / trailing-drawdown controls */

.balance-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.balance-controls input[type="number"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  width: 130px;
}

.balance-controls__current {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
}

.balance-controls__current .amount {
  font-size: 1.1rem;
  font-weight: 600;
}

.buffer-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.buffer-stat .amount {
  font-size: 1.5rem;
  font-weight: 600;
}

.buffer-warning {
  color: var(--amber);
}

/* Calendar card — stretched by .dashboard-row-split to the height of the
   left card stack; the grid itself grows to fill whatever's left below
   the nav header so day cells stay tall instead of leaving dead space. */

.dashboard-card--calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dashboard-card--calendar .cal-grid {
  flex: 1;
  grid-auto-rows: 1fr;
}

/* Calendar nav */

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.cal-nav__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cal-nav__title h2 {
  font-size: 0.9rem;
  min-width: 124px;
}

.cal-nav__btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}

.cal-nav__btn:hover {
  border-color: var(--muted);
}

.cal-nav__total {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Performance metrics section */

.metrics-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.metrics-section-header .dashboard-card__title {
  margin-bottom: 0;
}

.metrics-sig {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.metrics-sig__caption {
  font-size: 0.8rem;
}

.metrics-sig-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--muted);
}

.metrics-sig-badge--green {
  background: rgba(52, 211, 153, 0.15);
  border-color: var(--green);
  color: var(--green);
}

.metrics-sig-badge--red {
  background: rgba(244, 80, 106, 0.15);
  border-color: var(--red);
  color: var(--red);
}

.metrics-sig-badge--amber {
  background: rgba(245, 196, 81, 0.15);
  border-color: var(--amber);
  color: var(--amber);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Charts 21/22 — stacked cards below the metric-card grid, same section. */
.metrics-section > .dashboard-card {
  margin-bottom: var(--space-4);
}

.metric-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.metric-card__label {
  font-size: 0.85rem;
  color: var(--muted);
}

.metric-card__value-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.metric-card__value {
  font-size: 1.1rem;
  font-weight: 600;
}

.metric-card__caption {
  font-size: 0.75rem;
  text-align: right;
}

.metrics-footnote {
  margin-top: var(--space-4);
  font-size: 0.8rem;
}

@media (max-width: 599px) {
  .edge-score-card__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .edge-score-card__slider {
    max-width: none;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }
}