/* ==========================================================================
   Table
   ========================================================================== */

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  text-align: left;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.data-table td {
  height: var(--row-h);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-footnote);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
  background: var(--color-surface-hover);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.row-actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.data-table tbody tr:hover .row-actions,
.data-table tbody tr:focus-within .row-actions {
  opacity: 1;
}

/* ---- Mobile: card-per-row ----
   Below this width a <table class="data-table"> loses its grid shape
   entirely and each <tr> becomes a stacked card; each <td> that carries
   a data-label attribute (set by the view's row-render function, mirroring
   its <th> text) gets that label rendered via ::before as a left-aligned
   caption, value right-aligned. The one label-less td per row (row actions)
   right-aligns on its own with no caption. Avoids horizontal scroll without
   a second, parallel rendering path per table. */
@media (max-width: 700px) {
  .data-table thead {
    display: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tr {
    display: block;
    width: 100%;
  }

  .data-table tbody tr {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .data-table tbody tr:last-child {
    border-bottom: none;
  }

  .data-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: auto; /* the desktop --row-h rule doesn't apply once rows stack */
    padding: var(--space-1) 0;
    border-bottom: none;
  }

  .data-table td[data-label]::before {
    content: attr(data-label);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }

  .data-table td:not([data-label]) {
    justify-content: flex-end;
    padding-top: var(--space-2);
  }

  .row-actions {
    opacity: 1;
  }
}

/* ---- Mobile: compact two-line trade row ----
   Opt-in modifier for trade lists (Journal List, Dashboard Recent Trades).
   The generic card-per-row treatment above turns one trade into ~8 stacked
   "label: value" lines; this lays the same <tr> out as a two-line row -
   line 1: symbol + direction + result, line 2: date · session · R - which
   fits roughly six trades per screen instead of one.

   Deliberately CSS-only, driven by the data-label attributes the row
   renderers already emit: one rendering path per table, no parallel mobile
   markup. Cells that don't belong in the compact row are hidden, not
   re-rendered. */

/* The session and strategy cells and the inline direction label exist only to
   feed the compact row; the desktop table has its own columns for all three. */
.data-table--compact-rows .cell-session,
.data-table--compact-rows .cell-strategy,
.data-table--compact-rows .cell-dir-inline {
  display: none;
}

@media (max-width: 700px) {
  /* Every meta value on line 2 gets its own explicit track: grid items are
     blockified, so several cells cannot share one cell of the grid without
     stacking on top of each other. Five auto tracks + a 1fr spacer + the
     result track. Unused tracks (e.g. Account outside All Accounts mode,
     Dir./Strategy in Dashboard's Recent Trades, which renders fewer cells)
     collapse to zero width.

     There is no actions track: a trade row carries no buttons of its own any
     more - delete moved into the Trade Detail drawer the row opens - so the
     full width goes to the trade, and the 44px button that used to set the
     row's height is gone with it. */
  .data-table--compact-rows tbody tr {
    display: grid;
    grid-template-columns: auto auto auto auto auto 1fr auto;
    align-items: center;
    column-gap: var(--space-1);
    row-gap: 2px;
    padding: var(--space-3) var(--space-4);
  }

  .data-table--compact-rows td {
    display: block;
    height: auto;
    padding: 0;
    min-width: 0;
  }

  /* Labels are redundant once the row reads as a sentence. */
  .data-table--compact-rows td[data-label]::before {
    content: none;
  }

  /* Line 1: symbol on the left, outcome on the right - nothing else. Symbol
     *spans* the meta tracks rather than sitting in track 1, so line 1's width
     never stretches the tracks line 2 is laid out in. */
  .data-table--compact-rows td[data-label="Symbol"] {
    grid-column: 1 / 7;
    grid-row: 1;
    font-size: var(--fs-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Direction moved down to line 2, where it reads as one of the trade's
     facts rather than as part of its name. */
  .data-table--compact-rows .cell-dir-inline {
    display: none;
  }

  .data-table--compact-rows td[data-label="Result"] {
    grid-column: 7;
    grid-row: 1;
    justify-self: end;
    text-align: right;
  }

  /* The outcome is the row's headline. A pill around it gives it the same
     weight as a status chip and boxes in the one number the eye is scanning
     for - so the figure keeps its profit/loss colour and drops the chrome. */
  .data-table--compact-rows td[data-label="Result"] .badge {
    padding: 0;
    background: none;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
  }

  /* Line 2: direction · date · session · account · strategy */
  .data-table--compact-rows td[data-label="Dir."] { grid-column: 1; display: block; }
  .data-table--compact-rows td[data-label="Date"] { grid-column: 2; }
  .data-table--compact-rows td[data-label="Session"] { grid-column: 3; }
  .data-table--compact-rows td[data-label="Account"] { grid-column: 4; }
  .data-table--compact-rows td[data-label="Strategy"],
  .data-table--compact-rows td[data-label="RR"] { grid-column: 5; }

  .data-table--compact-rows td[data-label="Dir."],
  .data-table--compact-rows td[data-label="Date"],
  .data-table--compact-rows td[data-label="Session"],
  .data-table--compact-rows td[data-label="Account"],
  .data-table--compact-rows td[data-label="Strategy"],
  .data-table--compact-rows td[data-label="RR"] {
    grid-row: 2;
    font-size: var(--fs-caption);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Direction is a fact on the meta line, not a status: the profit/loss
     colouring of the desktop badge would put a second green/red signal next
     to the one that reports the actual outcome. */
  .data-table--compact-rows td[data-label="Dir."] .badge {
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    font-weight: var(--fw-medium);
  }

  .data-table--compact-rows .cell-session,
  .data-table--compact-rows .cell-strategy {
    display: block;
  }

  .data-table--compact-rows td[data-label="Dir."]::after,
  .data-table--compact-rows td[data-label="Date"]::after,
  .data-table--compact-rows td[data-label="Session"]::after,
  .data-table--compact-rows td[data-label="Account"]::after {
    content: " ·";
  }

  /* Everything the compact row deliberately drops - the detail that belongs
     to reading one trade, not scanning a list. .cell-rr is the Journal
     list's R:R column: line 1 already reports the outcome, and under the
     global R unit that made the row print the same number twice. Dashboard's
     Recent Trades has no strategy cell, so its own R stays (data-label="RR",
     track 5). */
  .data-table--compact-rows td[data-label="Entry → Exit"],
  .data-table--compact-rows td[data-label="Risk %"],
  .data-table--compact-rows .cell-rr {
    display: none;
  }

}