/* ── tables.css — tables on the desk and on the phone (UI 7.0) ──
   Desktop keeps the generic rules in styles.css (34px rows, sticky head).
   This file adds the row-level details TradingView and Kite tables have,
   and, below 640px, turns every table that is not `.keep` into a stack of
   two-line cards: identity left, headline number right, prices on line two,
   the rest as a muted run-in line, actions as full-width 44px buttons.
   Pages opt cells in with: pri · pri num · px · r2 · meta · wide · actions ·
   hide-m. A cell with none of those is printed with its header label. */

/* Row actions rest quietly and come forward on the row (always on touch). */
.tbl td.actions .btn { opacity: .55; transition: opacity var(--dur), background var(--dur), border-color var(--dur); }
.tbl tr:hover td.actions .btn, .tbl tr:focus-within td.actions .btn { opacity: 1; }
@media (hover: none) { .tbl td.actions .btn { opacity: 1; } }

/* A position row carries its direction on its left edge (Kite marketwatch). */
#openBody tr:has(> td .side.buy), #accountPane .tbl tr:has(> td .side.buy) { box-shadow: inset 2px 0 0 var(--pos); }
#openBody tr:has(> td .side.sell), #accountPane .tbl tr:has(> td .side.sell) { box-shadow: inset 2px 0 0 var(--neg); }

/* Footer totals. */
.tbl tr.tbl-total td { font-weight: 600; background: var(--surface-2); border-top: 1px solid var(--border-2); }

/* Density is a preference, not the default. */
.tbl.compact td, body.rows-compact .tbl td { height: 30px; padding-top: 0; padding-bottom: 0; font-size: 12px; }
.tbl.compact th, body.rows-compact .tbl th { height: 26px; }

/* The phone picker for a long tab strip (core.js bindSubtabs): phone only. */
.subtab-select { display: none; }

/* Matrices keep their columns and pin the first one. */
@media (max-width: 640px) {
  .subtab-select { display: block; width: 100%; height: 40px; margin: 0 0 var(--gap); font-size: var(--fs-input); }
  .subtabs:has(+ .subtab-select) { display: none; }

  .tbl:not(.keep) thead { display: none; }
  .tbl:not(.keep), .tbl:not(.keep) tbody { display: block; width: 100%; }
  /* A row is two lines and a run-in: identity + headline number, then
     prices + side, then the facts, then the actions. Flex, not grid: the
     facts have to flow on one line, which a grid item cannot. */
  .tbl:not(.keep) tbody tr {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 3px;
    min-height: var(--row-h-m); padding: 11px var(--gutter); border-bottom: 1px solid var(--border); align-content: center;
  }
  .tbl:not(.keep) tbody tr:last-child { border-bottom: 0; }
  /* An unstyled cell takes a whole line — label, then value — so a table no
     page has touched still reads as a clean key/value list. */
  .tbl:not(.keep) tbody td { order: 7; flex: 1 1 100%; display: block; padding: 0; height: auto; border: 0; min-width: 0; font-size: 12px; color: var(--muted); white-space: normal; text-align: left; line-height: 1.4; }
  .tbl:not(.keep) tbody td[data-l]:not(.pri):not(.px):not(.r2):not(.meta):not(.wide):not(.actions)::before {
    content: attr(data-l) " "; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: var(--faint); margin-right: 4px;
  }
  /* Wrapping is decided on the flex-basis, so each pair claims ~94% of the
     line: the next cell cannot fit and starts the next line. A cell with no
     partner takes the whole line. */
  .tbl:not(.keep) td.pri { order: 1; flex: 1 1 56%; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); }
  .tbl:not(.keep) tr:not(:has(> td.pri.num)) > td.pri { flex-basis: 100%; }
  .tbl:not(.keep) td.pri .sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 1px; }
  .tbl:not(.keep) td.pri.num { order: 2; flex: 1 1 34%; text-align: right; font-variant-numeric: tabular-nums; }
  .tbl:not(.keep) td.pri.num .pnl-pct { display: block; font-size: 11.5px; font-weight: 500; }
  .tbl:not(.keep) td.px { order: 3; flex: 1 1 56%; min-width: 0; color: var(--text-2); }
  .tbl:not(.keep) tr:not(:has(> td.r2)) > td.px { flex-basis: 100%; }
  .tbl:not(.keep) td.r2 { order: 4; flex: 1 1 34%; text-align: right; color: var(--text-2); }
  .tbl:not(.keep) td.wide { order: 5; flex: 1 1 100%; }
  .tbl:not(.keep) td.meta { order: 6; flex: 0 1 auto; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
  .tbl:not(.keep) td.meta .sub { display: inline; margin-left: 5px; }
  /* a fact the page did not name itself carries its column label */
  .tbl:not(.keep) td.lbl[data-l]::before { content: attr(data-l) " "; text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; color: var(--faint); margin-right: 3px; }
  .tbl:not(.keep) td.wide.lbl { font-size: 12px; }
  .tbl:not(.keep) td.meta.lbl { color: var(--text-2); }
  .tbl:not(.keep) td.meta.num { text-align: left; }
  /* Actions close the card on the right of the facts line: a thumb-sized
     button, not a banner across every row. */
  .tbl:not(.keep) td.actions { order: 9; flex: 0 0 auto; margin-left: auto; display: flex; gap: 8px; align-self: center; text-align: right; white-space: nowrap; }
  .tbl:not(.keep) td.actions:empty { display: none; }
  .tbl:not(.keep) td.actions .btn { min-height: 40px; min-width: 76px; padding: 0 14px; opacity: 1; font-size: 12.5px; }
  .tbl:not(.keep) td.actions .btn::after { content: ""; position: absolute; inset: -4px; }
  .tbl:not(.keep) td.hide-m, .tbl:not(.keep) td.rd { display: none; }
  .tbl:not(.keep) td.err.wide { color: var(--neg); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tbl:not(.keep) tr.skel-row { display: block; min-height: var(--row-h-m); }
  .tbl:not(.keep) tr.skel-row td { display: none; }
  .tbl:not(.keep) tr.skel-row td:first-child { display: block; padding-top: 14px; }
  .tbl:not(.keep) td[colspan] { flex: 1 1 100%; }
  .tbl:not(.keep) .empty { max-width: calc(100vw - 2 * var(--gutter)); }
  .tbl:not(.keep) tr.tbl-total { background: var(--surface-2); }
  .tbl:not(.keep) tr.tbl-total td { border-top: 0; }
  .tbl:not(.keep) tr.clickable:active { background: var(--surface-hover); }
  /* tags and ids inside a card are quieter than in a column */
  .tbl:not(.keep) td.meta .acct .dot { display: none; }
  .tbl:not(.keep) td.meta .id { padding: 0; border: 0; background: none; font-size: 11px; color: var(--faint); }
  .tbl-card .tbl-scroll { overflow-x: hidden; }
  .tbl-card:has(> .tbl-scroll > .tbl.keep) .tbl-scroll { overflow-x: auto; }
  .tbl.keep th:first-child, .tbl.keep td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
  .tbl.keep thead th:first-child { background: var(--surface-2); z-index: 2; }
}