/* ============================================================
   COMPONENT · DATA TABLE  (operator-dense <table>)
   A real HTML <table> styler for the admin console: engraved
   plaque column headers, monospace data rows, theme-token
   zebra/hover, and a horizontal-scroll wrapper so a wide
   operator table survives a phone (C4).

   DISTINCT from .c-table (a <ul> vertical ledger). This is the
   genuine <table> instrument surface chunk 12 introduces; chunk
   13 absorbs it into the styleguide. All values from theme
   tokens — flawless in BOTH themes, no hardcoded rgba.
   ============================================================ */

/* Horizontal-scroll wrapper — wide operator tables (6–7 cols, full
   UUIDs, dual ISO8601 stamps) overflow a phone; this contains the
   scroll instead of bursting the layout. */
.c-data-table__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--seam-engraved);
}

.c-data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--color-text);
  background: var(--color-surface);
}

/* ALL-CAPS engraved plaque column headers (chrome, C1). */
.c-data-table thead th {
  font-family: var(--font-plaque);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bezel-dark);
  box-shadow: var(--seam-engraved);
}

.c-data-table tbody td {
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

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

/* Engraved-groove zebra + hover, both token-driven so they flip. */
.c-data-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-surface-raised) 70%, var(--color-surface));
}

.c-data-table tbody tr:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

/* A whole row that drills in (the uuid/link cell carries the <a>). */
.c-data-table__row--link { cursor: pointer; }

/* ---- cell modifiers ---------------------------------------------------- */

/* Monospace id / UUID — kept FULL in the DOM (operator can copy it) but
   visually truncated so it never blows the column out on a phone. */
.c-data-table__id {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

/* Right-aligned tabular numerics (cents, counts, capacity). */
.c-data-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Status cell: an LED jewel beside a plaque badge. The gap is CSS, never a
   text node, so the cell's text content stays exactly the raw enum (the
   admin tests assert on it). */
.c-data-table__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

/* Quiet ISO8601 / timestamp cell. */
.c-data-table__when {
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Click-to-expand operator error (failed_jobs): a native <details> so the
   full message reads in a phosphor terminal without overflowing the row. */
.c-data-table__error {
  max-width: 36ch;
}
.c-data-table__error > summary {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-danger);
}
.c-data-table__error[open] > summary {
  white-space: normal;
  margin-bottom: var(--space-2);
}

/* A compact capacity instrument inside a cell: gauge over its readout label. */
.c-data-table__capacity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 8rem;
}