rustio-admin 0.23.0

/* ============================================================
 * rustio-admin / components / tables
 *
 * The canonical .rio-table — calm and spacious. Sortable headers,
 * zebra stripes, FK click-throughs, bulk-select row checkboxes,
 * the floating bulk-action bar, and the definition-list helpers
 * used by user-profile show pages.
 *
 * Page-specific overrides (dashboard model index, permissions
 * matrix, session cards) live under pages/.
 * ============================================================ */

/* Tables — calm and spacious. v0.16 — row height ≥56px via 16/24
 * cell padding so 8-hour clinical shifts don't strain. Zebra stripe
 * uses surface-2 (a quiet neutral lift) instead of an accent-tinted
 * overlay so the eye doesn't read it as a colour signal. Header
 * text is uppercase but small enough not to compete with cell
 * content. */
.rio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rio-fs-base);                /* 16px cell text */
  line-height: var(--rio-lh-ui);                /* 1.6 */
}
.rio-table th, .rio-table td {
  /* v0.16: 16/24 padding → ~56px row height (24px text block +
   * 32px padding). Comfortable to scan, easy to click. */
  padding: var(--rio-s4) var(--rio-s5);
  text-align: start;
  border-bottom: 1px solid var(--rio-border-soft);
  vertical-align: middle;
}
.rio-table th {
  /* v0.16: 14px (was 13px) uppercase header. Slightly larger but
   * still a quiet scan-anchor. 600 weight + tracked allcaps lands
   * the Bloomberg / Stripe / Linear tone without dominating cell
   * content. */
  font-weight: var(--rio-fw-semibold);
  font-size: var(--rio-fs-xs);                  /* 14px — quiet label */
  color: var(--rio-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--rio-tracking-allcaps);
  background: var(--rio-surface-2);
  border-bottom: 1px solid var(--rio-border);
  white-space: nowrap;
  /* Header rows can be shorter than body rows — operators don't
   * need a 56px header. 12px vertical padding gets header to ~40px. */
  padding-block: var(--rio-s3);
}
.rio-table tbody tr:last-child td { border-bottom: none; }
.rio-table tbody tr { transition: background-color 0.1s; }

/* Primary-cell weight (Principle 11). The first data cell in each
 * row is the natural anchor — `code` for DTCs, `vin` for vehicles,
 * `email` for users. Rendering it at weight 500 + text-strong
 * gives the eye a column to skim against without changing layout.
 * Works whether the row starts with a checkbox or not. */
.rio-table tbody td:first-child:not(.rio-td--checkbox),
.rio-table tbody .rio-td--checkbox + td {
  font-weight: var(--rio-fw-medium);
  color: var(--rio-text-strong);
}

.rio-th--number, .rio-td--number {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-family: var(--rio-font-mono);
  font-size: var(--rio-fs-sm);
}

/* Foreign-key click-throughs in list cells. Reads as a link without
 * shouting — underline on hover only, accent color on hover/focus. */
.rio-fk-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--rio-border);
}
.rio-fk-link:hover,
.rio-fk-link:focus {
  color: var(--rio-accent);
  border-bottom-color: var(--rio-accent);
  outline: none;
}

/* Datetime cells: monospace + nowrap so an ISO timestamp never breaks
 * at the `T`. Tabular figures keep columns aligned vertically. */
.rio-td--datetime {
  white-space: nowrap;
  font-family: var(--rio-font-mono);
  font-size: var(--rio-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--rio-text-muted);
}

/* Text cells (string fields) clip to a single line with a hard
 * max-width and an ellipsis tail. The list template adds a `title=`
 * attribute on these cells, so hovering reveals the full value
 * natively without needing a custom tooltip. The cap is `min(20rem,
 * 28vw)` so the cell shrinks gracefully on narrower viewports and
 * never starves the date / actions columns of space. */
.rio-td--text {
  max-width: min(20rem, 28vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rio-th--checkbox, .rio-td--checkbox { text-align: center; width: 36px; padding-inline-end: 0; }
.rio-th--actions, .rio-td--actions { width: 1%; white-space: nowrap; text-align: end; }

/* Bulk-select checkbox in the leading column. The native control
 * is restyled to match the framework's accent + radius so the row
 * checkboxes don't look like a plain HTML default. */
.rio-row-checkbox,
.rio-row-checkbox-all {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--rio-border-strong);
  border-radius: 4px;
  cursor: pointer;
  background: var(--rio-surface);
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin: 0;
  transition: background 0.1s, border-color 0.1s;
}
.rio-row-checkbox:hover,
.rio-row-checkbox-all:hover { border-color: var(--rio-text-muted); }
.rio-row-checkbox:checked,
.rio-row-checkbox-all:checked,
.rio-row-checkbox-all:indeterminate {
  background: var(--rio-accent);
  border-color: var(--rio-accent);
}
.rio-row-checkbox:checked::after,
.rio-row-checkbox-all:checked::after {
  content: "";
  width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.rio-row-checkbox-all:indeterminate::after {
  content: "";
  width: 9px; height: 2px;
  background: #fff;
  border-radius: 1px;
}
/* Selected row gets a faint accent wash so the highlight reads at a
 * glance during a bulk operation. */
.rio-table tbody tr.is-selected,
.rio-table tbody tr.is-selected:nth-child(even) {
  background: rgb(var(--rio-accent-rgb) / 0.06);
}
.rio-table tbody tr.is-selected:hover { background: rgb(var(--rio-accent-rgb) / 0.10); }

/* ----- Bulk action bar -------------------------------------------------
 * Sticky strip that appears above the table when ≥1 row is checked.
 * Contains a count, the destructive action, and a clear-selection
 * link. The CSS keeps it hidden by default; admin.js adds
 * `is-active` to the wrapping form once any checkbox is checked. */
.rio-bulk-bar {
  display: none;
  align-items: center;
  gap: var(--rio-s3);
  padding: 0.7rem var(--rio-s4);
  margin-bottom: var(--rio-s3);
  background: var(--rio-text-strong);
  color: var(--rio-surface);
  border-radius: var(--rio-radius);
  font-size: var(--rio-fs-md);
  font-weight: var(--rio-fw-semibold);
  box-shadow: var(--rio-shadow);
}
.rio-bulk-form.is-active .rio-bulk-bar { display: flex; }
.rio-bulk-bar-count strong { font-weight: var(--rio-fw-bold); }
/* Inverted button — solid surface inside the dark bar so the action
 * stays high-contrast without bleeding into the strip. */
.rio-bulk-bar .rio-button {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.rio-bulk-bar .rio-button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.40);
  color: #fff;
}
.rio-bulk-bar .rio-button--danger {
  background: var(--rio-danger);
  border-color: var(--rio-danger);
}
.rio-bulk-bar .rio-button--danger:hover {
  background: var(--rio-danger);
  border-color: var(--rio-danger);
  filter: brightness(1.1);
}
.rio-bulk-bar-clear {
  margin-inline-start: auto;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-weight: var(--rio-fw-semibold);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--rio-radius-sm);
}
.rio-bulk-bar-clear:hover { color: #fff; }

/* Zebra: surface-2 (quiet neutral). Hover lifts to accent-soft so
 * the eye reads it as "actionable row" not just "different colour." */
.rio-table--striped tbody tr:nth-child(even) { background: var(--rio-surface-2); }
.rio-table tbody tr:hover { background: var(--rio-accent-soft); }

/* Sortable headers — wrap the label in a link; arrow surfaces in the
 * active direction. Header looks identical to a non-sortable cell
 * until the user is hovering / has clicked. */
.rio-th-sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.rio-th-sort:hover { color: var(--rio-text-strong); text-decoration: none; }
.rio-th--sort-asc .rio-th-sort,
.rio-th--sort-desc .rio-th-sort { color: var(--rio-accent); }

.rio-list { padding: 0; overflow: hidden; }
.rio-list .rio-table { margin: 0; }
/* List-page cell padding is tighter than the base `.rio-table` value
 * because list rows routinely carry 6–8 columns including monospace
 * identifier fields (VIN, ISO timestamp, reference codes). The base
 * 16px horizontal padding multiplied across the row pushed wide rows
 * past the 1440px content area and clipped the trailing action cell;
 * trimming to 12px buys back ~50px on a 7-column table while staying
 * spacious by Bloomberg / Stripe / Linear standards. The first and
 * last cells keep the larger gutter so the table edges still breathe
 * against the surrounding card. Profile show-grid (`.rio-dl`) and the
 * permissions matrix (their own component) inherit nothing from this
 * scope. */
.rio-list .rio-table th,
.rio-list .rio-table td { padding-inline-start: var(--rio-s3); padding-inline-end: var(--rio-s3); }
.rio-list .rio-table th:first-child,
.rio-list .rio-table td:first-child { padding-inline-start: var(--rio-s4); }
/* Actions cell sits at the right edge with `width: 1%; white-space:
 * nowrap`, so its content width is already minimal. Match the middle-
 * cell gutter (`--rio-s3` = 12px) so the trailing button isn't bumped
 * past the card width by a wider right gutter, which used to leave a
 * residual ~4px overflow and surface a horizontal scrollbar on the
 * list card even after every other cell was trimmed. */
.rio-list .rio-table th:last-child,
.rio-list .rio-table td:last-child { padding-inline-end: var(--rio-s3); }
/* Action column packs Edit + Delete buttons; the two side-by-side
 * ghost buttons used to push wide rows past the content area. The
 * inter-button gap now sits at `--rio-s1` (4px) instead of the
 * default `--rio-s2` (8px) — small, taut, and the icons keep their
 * visual separation. */
.rio-list .rio-table .rio-td--actions { white-space: nowrap; }
.rio-list .rio-table .rio-td--actions .rio-button + .rio-button { margin-inline-start: var(--rio-s1); }
/* Allow multi-token list-page headers to wrap. The base `.rio-table th`
 * rule applies `white-space: nowrap` so labels like
 * `PERFORMED_BY_TECHNICIAN` set a hard column-width floor and push the
 * row past the content area on 1440px viewports. Wrapping the header
 * lets the column shrink to its data while keeping the label
 * readable; the underscore offers a clean break point and the line-
 * height stays comfortable thanks to the tracked-allcaps treatment. */
.rio-list .rio-table th { white-space: normal; line-height: 1.25; }

/* Definition lists for the user profile show-grid. */
.rio-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--rio-s2) var(--rio-s5);
  margin: 0;
}
.rio-dl dt { font-weight: 600; color: var(--rio-text-muted); }
.rio-dl dd { margin: 0; }

.rio-api-model {
  padding: var(--rio-s4) 0;
  border-bottom: 1px solid var(--rio-border-soft);
}
.rio-api-model:last-child { border-bottom: 0; }
.rio-api-model__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--rio-s3);
  margin-bottom: var(--rio-s3);
}
.rio-api-model__title { margin: 0; font-size: var(--rio-fs-lg); }
.rio-api-model__endpoints,
.rio-api-model__fields {
  margin-top: var(--rio-s2);
  margin-bottom: var(--rio-s3);
}

.rio-playground__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--rio-s3);
  margin-bottom: var(--rio-s5);
}
.rio-playground__field {
  display: flex;
  flex-direction: column;
  gap: var(--rio-s1);
  font-size: var(--rio-fs-sm);
  color: var(--rio-text-muted);
}
.rio-playground__field--wide { grid-column: 1 / -1; }
.rio-playground__field textarea {
  font-family: var(--rio-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: var(--rio-fs-sm);
}

.rio-health__summary {
  display: flex;
  align-items: center;
  gap: var(--rio-s3);
  margin-bottom: var(--rio-s4);
}
.rio-health__row--error td { background: rgba(220, 38, 38, 0.04); }
.rio-health__row--warn td { background: rgba(217, 119, 6, 0.04); }

.rio-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rio-doc-list__link {
  display: flex;
  flex-direction: column;
  padding: var(--rio-s3) var(--rio-s4);
  border: 1px solid var(--rio-border-soft);
  border-radius: var(--rio-radius);
  margin-bottom: var(--rio-s2);
  text-decoration: none;
  color: var(--rio-text);
}
.rio-doc-list__link:hover { background: var(--rio-surface-2); }

.rio-doc {
  max-width: 880px;
  line-height: var(--rio-line-height, 1.55);
}
.rio-doc h1, .rio-doc h2, .rio-doc h3 { margin-top: var(--rio-s5); }
.rio-doc pre {
  background: var(--rio-surface-2);
  padding: var(--rio-s3);
  border-radius: var(--rio-radius);
  overflow-x: auto;
  font-size: var(--rio-fs-sm);
}
.rio-doc code {
  background: var(--rio-surface-2);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 0.9em;
}
.rio-doc pre code { background: transparent; padding: 0; }
.rio-doc table { width: 100%; border-collapse: collapse; margin: var(--rio-s3) 0; }
.rio-doc th, .rio-doc td {
  border-bottom: 1px solid var(--rio-border-soft);
  padding: var(--rio-s2) var(--rio-s3);
  text-align: start;
}
.rio-playground__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--rio-s3);
  flex-wrap: wrap;
}
.rio-playground__url {
  font-family: var(--rio-font-mono, ui-monospace, SFMono-Regular, monospace);
  word-break: break-all;
}
.rio-playground__status {
  margin-bottom: var(--rio-s2);
}
.rio-playground__body {
  background: var(--rio-surface-2);
  border: 1px solid var(--rio-border-soft);
  border-radius: var(--rio-radius);
  padding: var(--rio-s3);
  margin: 0;
  max-height: 60vh;
  overflow: auto;
  font-family: var(--rio-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: var(--rio-fs-sm);
  white-space: pre;
  min-height: 4em;
}