/* cr-tables.css — shared data-table component for the Store backbones.
 * Builds on design-tokens.css (consumes --cr-* tokens only; do not duplicate
 * tokens here). Introduced by the dev-area list redesign (2026-07-17):
 * Dev/* pages previously used .data-table, which is defined only inside
 * _MyAppsLayout's page-scoped <style> block and therefore never reached the
 * _DevLayout pages — their tables rendered unstyled.
 *
 * Usage:
 *   <div class="cr-table-wrap">
 *     <table class="cr-table">
 *       <thead><tr><th>Text</th><th class="num">Amount</th></tr></thead>
 *       <tbody>
 *         <tr>
 *           <td class="badge-cell"><span class="cr-badge ...">...</span></td>
 *           <td class="mono" title="full value">truncated value</td>
 *           <td class="num">42</td>
 *         </tr>
 *       </tbody>
 *     </table>
 *   </div>
 *
 * Theme: everything except the zebra/hover overlays reads tokens, which the
 * [data-cr-theme="dark"] block in design-tokens.css already re-scopes. The
 * overlays use slate-based rgba values that stay visible on both light and
 * dark surfaces, plus a small dark-theme tune-up at the bottom.
 */

/* --- Wrapper: horizontal scroll safety inside cards ----------------- */
.cr-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  background: var(--cr-surface);
}

/* --- Table shell ---------------------------------------------------- */
table.cr-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cr-font);
  font-size: var(--cr-fs-md);
  color: var(--cr-text);
}

/* --- Header --------------------------------------------------------- */
.cr-table thead th {
  text-align: left;
  vertical-align: bottom;
  padding: 10px 12px;
  font-size: var(--cr-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cr-text-muted);
  background: var(--cr-bg);
  border-bottom: 1px solid var(--cr-border);
  white-space: nowrap;
}

/* --- Body cells ----------------------------------------------------- */
.cr-table tbody td {
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--cr-border);
  line-height: 1.45;
}

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

/* Numeric / date columns: right-aligned, tabular digits. */
.cr-table th.num,
.cr-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Zebra + hover (neutral slate overlays, both themes) ------------ */
.cr-table tbody tr:nth-child(even) {
  background: rgba(100, 116, 139, .045);
}

.cr-table tbody tr:hover {
  background: rgba(100, 116, 139, .10);
}

/* --- Badge cells ----------------------------------------------------- */
/* Keeps badges vertically centered and on one line. */
.cr-table td.badge-cell {
  white-space: nowrap;
}

.cr-table td.badge-cell .cr-badge {
  vertical-align: middle;
}

/* Two-badge transition ("From → To"): inline-flex keeps badge + arrow +
 * badge aligned with a consistent gap instead of collapsing whitespace. */
.cr-table .badge-pair {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-sp-2);
  white-space: nowrap;
}

.cr-table .badge-pair .badge-pair__arrow {
  color: var(--cr-text-muted);
  font-size: var(--cr-fs-xs);
}

/* --- Monospace cells (GUIDs, versions, action codes) ----------------- */
/* Pair with title="full value" in the markup so the truncated text stays
 * discoverable on hover. */
.cr-table td.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--cr-fs-sm);
  color: var(--cr-text-muted);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Small monospace inline text (e.g. action codes inside a badge). */
.cr-table .mono-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Truncated code/JSON previews inside a cell. */
.cr-table td .cr-table-code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--cr-fs-xs);
  color: var(--cr-text-muted);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Secondary line under a primary cell value ----------------------- */
.cr-table .cell-sub {
  display: block;
  color: var(--cr-text-muted);
  font-size: var(--cr-fs-sm);
}

/* --- Empty-state row -------------------------------------------------- */
.cr-table tr.empty-row td {
  text-align: center;
  padding: var(--cr-sp-5) var(--cr-sp-4);
  color: var(--cr-text-muted);
  font-size: var(--cr-fs-sm);
}

/* --- Inline annotation row (e.g. rejection reason under a data row) --- */
.cr-table tr.annotation-row td {
  padding-top: 0;
  font-size: var(--cr-fs-sm);
}

/* --- Dark theme tune-up ------------------------------------------------
 * Tokens (surface/border/text) already flip via design-tokens.css; only the
 * hard-coded overlays need a lighter-on-dark variant. */
[data-cr-theme="dark"] .cr-table tbody tr:nth-child(even) {
  background: rgba(148, 163, 184, .05);
}

[data-cr-theme="dark"] .cr-table tbody tr:hover {
  background: rgba(148, 163, 184, .10);
}