/* Winston V3 — sortable-table primitive (tracker #141 H1).
   Pairs with dashboard/v3/js/components/sortable-table.js. Visual
   baseline matches .desk-table; works cross-screen (Desk, Operations,
   Manager) without an outer #screen-foo scope. */

.st-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.st-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--type-xs);
  font-weight: var(--weight-semi);
  cursor: pointer;
  line-height: 1.4;
}
.st-tool-btn:hover { background: var(--surface-hover); }
.st-tool-btn.is-active {
  background: var(--ai);
  color: var(--ink-inverse);
  border-color: var(--ai);
}
.st-tool-clear { color: var(--ink-muted); }

.st-views-wrap { position: relative; }
.st-views-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.12));
  padding: 4px;
}
.st-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--type-sm);
  cursor: pointer;
}
.st-menu-item:hover { background: var(--surface-hover); }
.st-menu-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.st-menu-row.is-active .st-menu-item { font-weight: var(--weight-semi); color: var(--ai); }
.st-menu-x {
  flex: 0 0 auto;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 14px;
  cursor: pointer;
}
.st-menu-x:hover { background: var(--surface-hover); color: var(--money-down); }
.st-menu-sep {
  height: 1px;
  background: var(--hairline);
  margin: 4px 0;
}

.st-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

table.sortable-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-sm);
  font-variant-numeric: tabular-nums;
}

table.sortable-table thead th {
  background: var(--surface-2);
  color: var(--ink-muted);
  font-weight: var(--weight-semi);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  white-space: nowrap;
}
table.sortable-table th.num,
table.sortable-table td.num {
  text-align: right;
  font-family: var(--font-mono);
}
table.sortable-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
table.sortable-table tbody tr:hover td { background: var(--surface-hover); }
table.sortable-table td.up   { color: var(--money-up);   font-weight: var(--weight-semi); }
table.sortable-table td.down { color: var(--money-down); font-weight: var(--weight-semi); }

table.sortable-table th.st-sortable {
  cursor: pointer;
  user-select: none;
}
table.sortable-table th.st-sortable:hover { color: var(--ink); }
table.sortable-table th.is-sorted { color: var(--ai); }
.st-sort-ind {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
}
.st-sort-ind-idle { opacity: 0.35; }

tr.st-filter-row th {
  position: sticky;
  top: calc(var(--space-2) + var(--space-2) + 14px); /* sit under the main header */
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding: 4px var(--space-3);
}
.st-filter-input {
  width: 100%;
  min-width: 60px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--type-xs);
  font-family: var(--font-mono);
}
.st-filter-input:focus {
  outline: none;
  border-color: var(--ai);
}

td.st-empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--ink-muted);
}

/* ── Mobile card-collapse (#347) ──────────────────────────────────────
   On a phone a 6–17 column dense table needs a horizontal swipe to read.
   At --bp-sm (600px, the canonical single-column breakpoint) each row
   reflows to one card: every cell becomes a "LABEL  value" line, the label
   coming from the column header via the data-label attr the JS emits. The
   <thead> hides (its labels now live in the cells), so click-to-sort is not
   available on phone — saved Views (which carry sort) + Reset still are. */
@media (max-width: 600px) {
  table.sortable-table,
  table.sortable-table tbody,
  table.sortable-table tr,
  table.sortable-table td {
    display: block;
    width: 100%;
  }
  table.sortable-table thead { display: none; }

  table.sortable-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
  }
  /* No full-row hover wash in card mode — the card already sits on surface. */
  table.sortable-table tbody tr:hover td { background: transparent; }

  table.sortable-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    border: none;
    padding: 3px 0;
    text-align: right;
  }
  table.sortable-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    color: var(--ink-muted);
    font-size: var(--type-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--weight-semi);
  }
  table.sortable-table td.num { font-family: var(--font-mono); }

  /* Empty-state row stays a single centred message, no label gutter. */
  table.sortable-table td.st-empty { display: block; text-align: center; }
  table.sortable-table td.st-empty::before { content: none; }
}

/* Tracker #141 H11 — "New since HH:MM" banner above high-churn surfaces. */
.new-since-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: var(--space-3);
  background: var(--ai-tint, rgba(56, 132, 255, 0.08));
  border: 1px solid var(--ai);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--type-sm);
}
.new-since-banner strong { color: var(--ai); }