/* Mason shared table ("mtbl") — one compact, dense table look across apps.
 *
 * Modelled on the Quotes BOM "Rates & Quantities" table: small type, tight
 * rows, hairline separators, a sticky uppercase header, and an optional sticky
 * footer total. Structure stays app-owned (apps write their own thead/tbody);
 * this stylesheet owns the look + density + sticky behaviour, all driven by CSS
 * custom properties so each app can theme it (set the --mtbl-* vars on .mtbl,
 * usually via a per-app rule scoping to its palette).
 *
 * Class API
 *   .mtbl-wrap                optional scroll container (overflow:auto); set
 *                             --mtbl-maxh for a capped height. Not required —
 *                             sticky works against whatever scroll ancestor
 *                             exists.
 *   table.mtbl                the table. Sticky header is on by default.
 *   .mtbl--stick-foot         make <tfoot> rows stick to the bottom.
 *   .mtbl--stick-first        make the first column stick on horizontal scroll.
 *   tr.mtbl-group             a section / group band row (bold, tinted).
 *   tr.mtbl-total             a totals row (bold, heavy top border; sticky when
 *                             the table has --stick-foot).
 *   th.mtbl-num / td.mtbl-num right-aligned, tabular numerals.
 *
 * Theme/density vars (defaults are a neutral light theme):
 *   --mtbl-surface, --mtbl-head-bg, --mtbl-foot-bg, --mtbl-group-bg,
 *   --mtbl-border, --mtbl-hairline, --mtbl-text, --mtbl-text-dim,
 *   --mtbl-row-hover, --mtbl-accent,
 *   --mtbl-font, --mtbl-head-font, --mtbl-cell-pad, --mtbl-head-pad,
 *   --mtbl-group-pad, --mtbl-maxh
 */

.mtbl {
  /* palette */
  --mtbl-surface: #ffffff;
  --mtbl-head-bg: #ffffff;
  --mtbl-foot-bg: #ffffff;
  --mtbl-group-bg: #f1f5f9;
  --mtbl-border: #cbd5e1;
  --mtbl-hairline: rgba(15, 23, 42, 0.07);
  --mtbl-text: #0f172a;
  --mtbl-text-dim: #64748b;
  --mtbl-row-hover: rgba(15, 23, 42, 0.035);
  --mtbl-accent: #10b981;
  /* density */
  --mtbl-font: 12.5px;
  --mtbl-head-font: 11px;
  --mtbl-cell-pad: 4px 8px;
  --mtbl-head-pad: 10px 14px;
  --mtbl-group-pad: 3px 8px;

  width: 100%;
  border-collapse: separate;   /* required for reliable sticky cells */
  border-spacing: 0;
  font-size: var(--mtbl-font);
  color: var(--mtbl-text);
  background: var(--mtbl-surface);
}

/* Optional scroll container */
.mtbl-wrap {
  position: relative;
  overflow: auto;
  max-height: var(--mtbl-maxh, none);
  background: var(--mtbl-surface);
}

/* ---- Header (sticky on vertical scroll by default) -------------------- */
.mtbl thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--mtbl-head-bg);
  border-bottom: 1px solid var(--mtbl-border);
  text-align: left;
  color: var(--mtbl-text-dim);
  font-weight: 500;
  font-size: var(--mtbl-head-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--mtbl-head-pad);
  white-space: nowrap;
}

/* ---- Body rows -------------------------------------------------------- */
.mtbl tbody td,
.mtbl tfoot td {
  padding: var(--mtbl-cell-pad);
  border-bottom: 1px solid var(--mtbl-hairline);
  vertical-align: middle;
}
.mtbl tbody tr:hover td { background: var(--mtbl-row-hover); }

/* Numeric cells */
.mtbl .mtbl-num,
.mtbl th.mtbl-num,
.mtbl td.mtbl-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Group / section band rows --------------------------------------- */
.mtbl tbody tr.mtbl-group td,
.mtbl tr.mtbl-group td {
  background: var(--mtbl-group-bg);
  border-top: 1px solid var(--mtbl-border);
  border-bottom: none;
  padding: var(--mtbl-group-pad);
  font-weight: 700;
  color: var(--mtbl-text);
}

/* ---- Totals row ------------------------------------------------------- */
.mtbl tr.mtbl-total td {
  background: var(--mtbl-foot-bg);
  border-top: 2px solid var(--mtbl-border);
  border-bottom: none;
  font-weight: 700;
}

/* ---- Sticky footer (opt-in) ------------------------------------------ */
.mtbl.mtbl--stick-foot tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: var(--mtbl-foot-bg);
}

/* ---- Sticky first column (opt-in) ------------------------------------ */
.mtbl.mtbl--stick-first th:first-child,
.mtbl.mtbl--stick-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--mtbl-surface);
}
/* keep the right kind of background under the sticky first cell per row type */
.mtbl.mtbl--stick-first tr.mtbl-group td:first-child { background: var(--mtbl-group-bg); }
.mtbl.mtbl--stick-first tr.mtbl-total td:first-child { background: var(--mtbl-foot-bg); }
.mtbl.mtbl--stick-first thead th:first-child { z-index: 7; background: var(--mtbl-head-bg); }
.mtbl.mtbl--stick-foot.mtbl--stick-first tfoot td:first-child { z-index: 8; }