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

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

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

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

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

/* The slot holding the chart-mode toggle: able to shrink, so the toggle
   scrolls inside itself instead of being cut off by the card. */
.chart-card__header > [data-chart-modes-slot] {
  min-width: 0;
  max-width: 100%;
}

/* =====================================================================
 * 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: 12px;
  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;
}

/* The checklist's line under the day's note. */
.plan-memo + .plan-memo {
  margin-top: var(--space-1);
}

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

/* 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;
}

/* Recent Trades, mobile: the Result value drifted out of line in All
   Accounts mode. Each <tr> is its OWN grid (display:grid sits on the row),
   so the 1fr spacer in track 5 is what pushes Result flush right - and in
   All Accounts line 2 gains an Account cell, whose long name overflowed the
   row, collapsed that 1fr to zero and let Result land wherever the tracks
   ended. Pinning the cell to the end makes the alignment independent of how
   much line 2 holds; letting the account name truncate stops it overflowing
   in the first place. Scoped to this section only. */
@media (max-width: 700px) {
  [data-recent-trades] .data-table--compact-rows td[data-label="Result"] {
    justify-self: end;
  }

  [data-recent-trades] .data-table--compact-rows td[data-label="Account"] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =====================================================================
 * Etap 7: shared windows (dashboard.view.js Shared) - used by Portfolio
 * and the account page alike.
 * ================================================================== */

/* ---- This Week (thisWeekCardHtml) ---- */
.week-card__edit {
  width: 28px;
  height: 28px;
  padding: 6px;
}

.week-card__figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
}

.week-card__done {
  font-family: var(--font-family-display);
  font-size: 2.75rem;
  font-weight: var(--fw-figure);
  line-height: 1;
  letter-spacing: var(--ls-figure);
}

.week-card__of {
  font-size: var(--fs-footnote);
  color: var(--color-text-tertiary);
}

.week-card__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.week-card__marks i {
  width: 14px;
  height: 14px;
  border-radius: 999px;
}

.week-card__marks i.is-done {
  background: var(--color-text-primary);
}

.week-card__marks i.is-left {
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}

.week-card__marks i.is-over {
  box-shadow: inset 0 0 0 1.5px var(--color-text-tertiary);
}

.week-card__marks i.week-card__sep {
  width: 1px;
  margin: 0 3px;
  border-radius: 0;
  background: var(--color-border-strong);
}

.week-card__note {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}