/* Dashboard-specific refinements (base rules live in components.css) */

/* ---- Hero: two equal figures (Account Balance | Net P&L) ---- */

.hero-card__figures {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
}

/* :not() is load-bearing - the divider is a <div> too, and without this it
   would pick up flex: 1 and render as a wide grey block. */
.hero-card__figures > div:not(.hero-card__divider) {
  min-width: 0;
  flex: 1;
}

.hero-card__divider {
  width: 1px;
  flex: 0 0 1px;
  align-self: stretch;
  background: var(--color-border-strong);
}

/* Micro stats under the two figures: trades, win rate, open positions. */
.hero-card__micro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  position: relative;
}

/* ---- "Today" strip ---- */

.today-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
}

.today-bar__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* ---- View toolbar (period + $/R) ---- */

.view-toolbar {
  gap: var(--space-3);
  flex-wrap: nowrap;
}

/* ---- "See more" for the KPI block ---- */

.see-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-height: 36px;
  margin-top: var(--space-3);
  background: none;
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  transition: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.see-more:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
}

.see-more__chevron {
  transition: transform var(--dur-base) var(--ease-standard);
}

.see-more__chevron.is-open {
  transform: rotate(180deg);
}

/* ---- Chart card header with the mode switcher ---- */

.chart-card__header {
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-card__figures {
    flex-direction: column;
    gap: var(--space-5);
  }

  .hero-card__divider {
    width: 100%;
    height: 1px;
    flex-basis: 1px;
  }

  .today-bar {
    gap: var(--space-4);
  }

  .today-bar__item {
    flex: 1 1 30%;
  }
}

/* =====================================================================
 * Challenge widget (right column, single-account only)
 *
 * A compact sibling of the Planner's .challenge-card, deliberately its own
 * component rather than a shared one: this is a 4-column sidebar widget
 * that has to stay legible at ~300px, while the Planner card is a full-width
 * record with a ruleset line, breach detail and an attempt history.
 * ================================================================== */

.challenge-widget__name {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.challenge-widget__sub {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.challenge-widget__row {
  margin-top: var(--space-4);
}

.challenge-widget__risk {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.challenge-widget__risk .challenge-widget__row {
  margin-top: var(--space-2);
}

.challenge-widget__breach {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-loss-soft);
  font-size: var(--fs-footnote);
  line-height: 1.45;
}

.challenge-widget__pace {
  margin-top: var(--space-3);
  font-size: var(--fs-footnote);
  color: var(--color-text-secondary);
}

.challenge-widget__pace.is-warning {
  color: var(--color-loss);
}

.challenge-widget__link {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}

.challenge-widget__note {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  line-height: 1.4;
}

/* =====================================================================
 * Today's line from the weekly plan.
 *
 * Deliberately not a component: no card, no border, no background, no rail,
 * no icon, no heading. It is a memo the trader wrote to themselves, so it
 * reads as a line of handwriting across the dashboard rather than as one
 * more widget competing with the metrics around it. The only treatment is
 * size and italics - enough to be read before the first trade, not enough to
 * claim to be data.
 * ================================================================== */

/* The patch target, not a box: .view-container is a flex column with a gap,
   so a real empty wrapper on a day with no note would leave a visible hole. */
[data-plan-memo] {
  display: contents;
}

.plan-memo {
  margin: calc(var(--stack-gap) * -0.25) 0 0;
  padding: 0 var(--space-2);
  font-size: var(--fs-title3);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .plan-memo {
    font-size: var(--fs-callout);
  }
}

/* =====================================================================
 * Mobile alignment fixes (measured, not eyeballed).
 * ================================================================== */

@media (max-width: 700px) {
  /* The hero is the only card padded with --space-8 (32px); every other
     card uses --card-pad (20px). Measured on a 375px viewport, the hero's
     label started at x=49 and the Today bar's at x=37 - a 12px step that
     reads as two cards that don't share a left edge. Aligning the hero to
     the standard card padding is the smaller change and keeps one rhythm
     down the whole column. Desktop is untouched. */
  .hero-card {
    padding: var(--card-pad);
  }

  /* "Trades closed today" wrapped to two lines on narrower phones, which
     pushed its value out of line with the other two columns. The label is
     shorter now ("Closed positions"), and a smaller caption size keeps all
     three on one line with room to spare. */
  .today-bar {
    gap: var(--space-4);
  }

  .today-bar__item .card__label {
    font-size: var(--fs-caption);
    line-height: 1.25;
  }

  .today-bar__item .text-tabular {
    font-size: var(--fs-footnote);
  }
}

/* Recent Trades: the value column is the only right-hand one, so it aligns
   right and the badge inside it stops floating at whatever width the P&L
   string happens to be. Tabular figures make the digits line up column-wise
   rather than only sharing an edge. */
[data-recent-trades] .data-table th:last-child,
[data-recent-trades] .data-table td:last-child {
  text-align: right;
}

[data-recent-trades] .data-table td:last-child .badge {
  min-width: 84px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}