/* House table style — every data table in the app (user, 2026-10-13).
   Picked from static/proto/table-styles.html: the Government contracts header band (option B)
   on the Funds page's dense rows (option C). Spec + rules: docs/features/tables.md.

   Use: <table class="aiq-tbl">, numbers in <td class="num">. Add .tb-zebra for Excel-style banding
   (user wants it on Statements and the Screener, 2026-10-13). Pages keep only what's theirs
   (column widths, sticky offsets, logos); never restyle font, padding or colours here per page. */

:root {
  --tb-bg: #292929;
  --tb-head: #333333;
  --tb-head-ink: #a9a9a5;
  --tb-rule: rgba(255,255,255,.07);   /* under the header */
  --tb-row: rgba(255,255,255,.05);    /* between rows */
  --tb-hover: #303030;
  --tb-band: #2f2f2f;                 /* .tb-zebra every other row */
  --tb-sel: rgba(111,131,234,.14);
  --tb-ink: #e7e7e4;
  --tb-sub: #a9a9a5;
  --tb-faint: #7d7d79;
  --tb-pos: #43D1A7;
  --tb-neg: #F73463;
  --tb-accent: #6f83ea;
  --tb-head-h: 34px;
}
html[data-theme="light"] {
  --tb-bg: #ffffff;
  --tb-head: #f5f6f8;
  --tb-head-ink: #6b7080;
  --tb-rule: #e6e8ec;
  --tb-row: #f1f2f5;
  --tb-hover: #f7f8fa;
  --tb-band: #f5f5f5;
  --tb-sel: #eef1fd;
  --tb-ink: #0f172a;
  --tb-sub: #6b7080;
  --tb-faint: #a0a9c0;
  --tb-pos: #0d8a66;
  --tb-neg: #c8203f;
  --tb-accent: #455DDC;
}

.aiq-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--tb-ink);
}
/* !important beats base.html's light-mode `thead tr th` tint. */
html .aiq-tbl > thead > tr > th {
  height: var(--tb-head-h);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tb-head-ink) !important;
  background: var(--tb-head) !important;
  border-bottom: 1px solid var(--tb-rule);
  vertical-align: middle;
  white-space: nowrap;
}
/* Zero specificity, so a page's .num / Tailwind text-right / text-center still wins. */
:where(.aiq-tbl > thead > tr > th) { text-align: left; }
.aiq-tbl > tbody > tr > td,
.aiq-tbl > tbody > tr > th {
  padding: 5px 12px;
  border-bottom: 1px solid var(--tb-row);
  vertical-align: middle;
  white-space: nowrap;
}
.aiq-tbl > tbody > tr:last-child > td { border-bottom: 0; }
.aiq-tbl.tb-zebra > tbody > tr:nth-child(even) > td { background: var(--tb-band); }
.aiq-tbl > tbody > tr:hover > td { background: var(--tb-hover); }
.aiq-tbl > tbody > tr.sel > td { background: var(--tb-sel); }
.aiq-tbl > tfoot > tr > td {
  padding: 5px 12px;
  font-weight: 600;
  background: var(--tb-head);
  border-top: 1px solid var(--tb-rule);
}
.aiq-tbl .num,
html .aiq-tbl > thead > tr > th.num { text-align: right; }
.aiq-tbl .tb-pos { color: var(--tb-pos); }
.aiq-tbl .tb-neg { color: var(--tb-neg); }
.aiq-tbl .tb-sub { color: var(--tb-sub); }
.aiq-tbl .tb-sort { color: var(--tb-accent); font-size: 9px; margin-left: 3px; }
.aiq-tbl img.tb-logo { width: 18px; height: 18px; border-radius: 4px; flex: none; }