/* Journal-specific refinements */

.data-table td strong {
  font-weight: var(--fw-semibold);
}

/* Trade rows open the read-only detail drawer. Scoped to [data-row-id],
   which only trade rows carry - cash flow rows stay non-interactive. */
.data-table tbody tr[data-row-id] {
  cursor: pointer;
}

/* ---- Calendar tab ---- */

.calendar-toolbar {
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* The period selects and the ‹ Today › group are one control, so they must
   wrap as one. Left to plain flex-wrap they break mid-group, stranding a
   lone arrow on the row above "Today" - which is what happens on a phone. */
.calendar-toolbar__nav {
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
}

/* Root cause of the page reflowing on every Week<->Month switch: Month
   renders two <select> elements here and Week renders none. Every
   <select class="select"> in the app is auto-enhanced into a themed
   `.cselect` trigger by TJ.Components.Select (js/components/select.js) - the
   NATIVE select stays in the DOM but visually hidden, so the box the user
   actually sees is `.cselect__trigger`, not `.select` itself (a rule
   targeting `.select`'s own height, tried first, silently did nothing). The
   trigger's intrinsic height (padding: space-3 space-4 + body line-height,
   ~44px) is taller than the ‹/Today/› buttons (36px, .btn--icon), so with
   align-items:center the ROW ITSELF was 46px tall in Month and 36px in Week
   - two height systems sharing one row, same class of bug as the
   calendar-cell sizing fix. Pinning the trigger to the button height means
   the row's height no longer depends on which controls happen to be present
   in a given mode, so the summary card and grid below it never shift
   vertically on switch.

   Both the native <select> and the enhanced trigger are pinned, and that
   pairing is load-bearing rather than belt-and-braces: there is a window
   between the markup being written and TJ.Components.Select enhancing it
   where the RAW select is what the user sees. Pinning only the trigger
   makes those two states different heights, which is precisely the ~10px
   one-frame jump ("shake") that switching calendar views used to produce.
   js/views/journal.view.js closes that window by enhancing synchronously;
   this keeps the two heights equal regardless, so no future re-render path
   can reopen it. */
.calendar-toolbar__nav .cselect__trigger,
.calendar-toolbar__nav .select {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

.calendar-period {
  font-size: var(--fs-title3);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}

/* Breathing room between the KPI summary and whatever follows it (the
   weekday header in Month, the goal bar or day cells in Week) - previously
   0px, the two sat flush against each other. */
.calendar-period + .card--metrics {
  margin-bottom: var(--space-6);
}

/* The period summary card and the goal bar sit between the toolbar and the
   grid; the grid itself keeps its own top margin off this. */
.calendar-goal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.calendar-goal__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-footnote);
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.calendar-goal__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-hover);
  overflow: hidden;
}

.calendar-goal__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  transition: width var(--dur-slow) var(--ease-standard);
}

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

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.calendar-weekdays span {
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Cell height is driven by ONE property, --cal-cell-h, which each grid
   variant sets for itself. Month cells used to use `aspect-ratio` (height
   tied to column width, so a 1440px desktop produced ~170px of mostly empty
   box) while week cells used a fixed `min-height: 150px` - two different
   sizing systems, which is exactly why proportions jumped when switching
   period. One clamped system now covers both: it still scales with the
   viewport, but between a readable floor and a sane ceiling. */
.calendar-grid {
  --cal-cell-h: clamp(76px, 7.2vw, 108px);
}

.calendar-grid--week {
  --cal-cell-h: clamp(132px, 12vw, 176px);
}

.calendar-cell {
  position: relative;
  min-height: var(--cal-cell-h);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}

.calendar-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-strong);
}

.calendar-cell.is-outside {
  opacity: 0.4;
}

.calendar-cell.is-today {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.calendar-cell__num {
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.calendar-cell__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.calendar-cell__pnl {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.calendar-cell--profit .calendar-cell__pnl {
  color: var(--color-profit);
}

.calendar-cell--loss .calendar-cell__pnl {
  color: var(--color-loss);
}

.calendar-cell--profit {
  background: var(--color-profit-soft);
}

.calendar-cell--loss {
  background: var(--color-loss-soft);
}

/* Trade-count badge, top-right of a month cell. Counts every trade on the
   day (open ones included), unlike the P/L line, which can only speak for
   closed ones. */
.calendar-cell__badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  font-size: 10px;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

/* ---- Week view ----
   Same day model as the month grid, only tall enough to name the trades. */
.calendar-grid--week .calendar-cell {
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
}

/* Stacked, not a baseline row: a seven-column week gives each cell ~100px,
   and "Tue 21" next to "-$118.61" wraps at that width. Stacking also hands
   the full cell width back to the trade lines below. */
.calendar-cell__weekhead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-width: 0;
}

.calendar-cell__weekhead .calendar-cell__num {
  white-space: nowrap;
}

.calendar-cell__trades {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
}

.calendar-trade {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  min-width: 0;
}

.calendar-trade__sym {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.calendar-trade__r {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

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

/* ---- Year view: 12 mini heatmaps ---- */

/* Column counts are all divisors of 12, so the year never ends in a ragged
   last row. Wide screens get 6x2; the tile width is what keeps the day cells
   small enough to still read as a heatmap rather than a second calendar. */
.calendar-year {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (max-width: 1140px) {
  .calendar-year {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.calendar-mini {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-standard);
}

.calendar-mini:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

.calendar-mini__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
}

.calendar-mini__count {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.calendar-mini__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendar-mini__cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--color-surface-hover);
}

.calendar-mini__cell.is-blank {
  background: transparent;
}

/* Sign only - no magnitude scaling, which would mean ranking days by summed
   money and would break across currencies. */
.calendar-mini__cell--profit { background: var(--color-profit); }
.calendar-mini__cell--loss { background: var(--color-loss); }
.calendar-mini__cell--breakeven { background: var(--color-text-tertiary); }
.calendar-mini__cell--open,
.calendar-mini__cell--mixed { background: var(--color-border-strong); }

.calendar-mini__cell.is-today {
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* ---- Day panel summary ---- */

.day-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-hover);
}

.day-summary__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.day-summary__item span {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.day-summary__item strong {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  /* Numbers (trade count + P/L) stay visible per product requirement -
     cells are enlarged to fit them instead of shrinking/hiding text.
     .view-container's own side padding is space-4 (16px) at this same
     breakpoint (see layout.css) - the grid/weekdays bleed out into
     that padding via matching negative margins, reclaiming it for the
     7-column grid without touching view-container itself (List/Cash
     Flow tabs are unaffected). Gap/cell-padding trimmed on top of that,
     and the cell keeps a taller-than-wide shape so num + P/L + count have
     room vertically instead of needing to compress horizontally. */
  .calendar-weekdays,
  .calendar-grid {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    gap: 3px;
  }

  .calendar-grid {
    --cal-cell-h: 66px;
  }

  /* Two full-width rows instead of four wrapped fragments: the view pills on
     one line, the period navigation on the next, each using the whole width
     rather than leaving the selects at their desktop fixed widths. */
  .calendar-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .calendar-toolbar > .pill-toggle {
    align-self: flex-start;
  }

  .calendar-toolbar__nav {
    width: 100%;
  }

  /* Targets .cselect, not .select: every <select class="select"> in the app
     is auto-enhanced into a themed `.cselect` trigger (js/components/
     select.js), and the visible box on screen is that wrapper, not the now
     hidden native element - a rule written against `.select` compiles fine
     but silently never applies to anything on screen. This one additionally
     has to fight an inline width the enhancer copies from the native
     select's own inline style (`style="width:140px"` in the view markup),
     which is exactly what the !important here is for. */
  .calendar-toolbar__nav .cselect,
  .calendar-toolbar__nav .select {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
  }

  .calendar-toolbar__nav [data-cal-today] {
    flex-shrink: 0;
  }

  .calendar-cell {
    padding: 3px 4px;
    min-width: 0;
    justify-content: space-between;
  }

  .calendar-cell__num {
    font-size: var(--fs-caption);
  }

  .calendar-cell__meta {
    width: 100%;
    min-width: 0;
  }

  /* Cell figures are rendered without cents (see calendarMoney() in
     journal.view.js), which is what lets them fit here at a legible size
     instead of being ellipsed to "+$212....". Kept nowrap with ellipsis as
     a backstop for five-figure days. */
  .calendar-cell__pnl {
    font-size: 11px;
    font-weight: var(--fw-medium);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .calendar-cell__badge {
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 9px;
    /* The count is secondary to the money figure on a 100px-wide cell. */
    background: transparent;
    border-color: transparent;
    color: var(--color-text-tertiary);
  }

  /* The dot has to stay clear of the count badge in the opposite corner. */
  .calendar-cell__journal {
    width: 4px;
    height: 4px;
    margin-left: 4px;
  }

  .calendar-year {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .calendar-mini {
    padding: var(--space-2);
  }
}

/* Seven tall columns stop being readable long before phone width, and the
   trigger is content width, not viewport width: a cell has to hold a date,
   a P/L figure and symbol+R lines, which needs ~112px, so 7 of them plus
   gaps need ~832px of content. With the 248px sidebar and the container's
   own padding that lands at ~1140px of viewport - below it the symbols
   start truncating, so the week becomes a stacked list instead: same markup,
   same one-cell-per-day model, laid out vertically where horizontal room ran
   out. Placed after the 560px block on purpose - it has to win the margin
   reset declared there too. */
@media (max-width: 1140px) {
  .calendar-grid--week {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin-left: 0;
    margin-right: 0;
  }

  /* Stacked week rows are content-sized: a fixed cell height that made sense
     as one of seven columns would leave a mostly empty band per day here. */
  .calendar-grid--week {
    --cal-cell-h: 0px;
  }

  .calendar-grid--week .calendar-cell {
    padding: var(--space-3);
  }

  .calendar-cell__weekhead {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
}

/* ---- List tab toolbar (search + filters) ----
   Wraps as soon as it runs out of room, at any width - no fixed
   breakpoint to guess, since the trigger is content width, not viewport
   width. Was previously a @media(860px) rule targeting
   `.view-container > .row-between:first-child`, which never matched:
   the toolbar isn't a direct child of .view-container, it's nested
   inside the tab content slot. */
.journal-toolbar {
  flex-wrap: wrap;
}

.journal-toolbar__filters {
  flex-wrap: wrap;
}

.journal-toolbar__filters .input,
.journal-toolbar__filters .select {
  max-width: 100%;
}

/* Result pills sit on their own line: with a count baked into each label
   they are too wide to share the filter row without wrapping awkwardly. */
.journal-results {
  margin-top: var(--space-4);
}

/* Journaled-day marker. A small accent dot beside the date number - it sits
   in the flow of .calendar-cell__num rather than being absolutely placed,
   so it can never collide with the trade-count badge in the corner. */
.calendar-cell__journal {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
}

/* Read-only journal entry inside the day panel. Same visual language as the
   Dashboard check-in that captured it: ticked items stay ticked items, the
   mood keeps its glyph, and an accent rail marks which half was written
   before the day and which after it. */
.day-journal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.day-journal__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  padding-left: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-hover);
  border-left: 2px solid var(--color-border-strong);
}

.day-journal__block--pre {
  border-left-color: var(--color-accent);
}

.day-journal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.day-journal__kind {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

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

.day-journal__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 12px 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.day-journal__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.day-journal__checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-footnote);
  color: var(--color-text-secondary);
}

.day-journal__checks svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-accent);
}

.day-journal__note {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-footnote);
  font-style: italic;
  color: var(--color-text-secondary);
}

/* ---- Challenge window marker (Month + Week; never the year heatmaps) ----
   A 2px top edge, deliberately not a dot and not a background tint: the
   cell background already encodes profit/loss and the accent dot already
   means "journaled", so those two channels were taken. Inset by the corner
   radius so it reads as an edge rather than a stray bar. */
.calendar-cell--chal::after,
.calendar-cell--chal-breach::after {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--radius-md);
  right: var(--radius-md);
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  pointer-events: none;
}

.calendar-cell--chal-breach::after {
  background: var(--color-loss);
}