/*
 * RAXE Design System — Tables
 * Data tables, technique tables, policy rows, baseline grids.
 * Depends on: tokens.css
 */

/* ── Base table ── */
.table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-body); font-size: var(--fs-body-sm);
}
.table th, .table td {
  padding: var(--space-3) var(--space-4); text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.table thead { position: sticky; top: 0; z-index: 2; }
.table th {
  background: var(--surface-raised); color: var(--text-dim);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.table tbody tr { transition: background var(--duration-fast) var(--ease-default); }
.table tbody tr:hover { background: rgba(56,189,248,0.03); }

/* ── Compact variant ── */
.table-compact th, .table-compact td {
  padding: var(--space-2) var(--space-3); font-size: var(--fs-label);
}

/* ── Mono table (all data) ── */
.table-mono td { font-family: var(--font-mono); font-size: var(--fs-mono); }

/* ── Bordered variant ── */
.table-bordered { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.table-bordered th, .table-bordered td { border-right: 1px solid var(--border-subtle); }
.table-bordered th:last-child, .table-bordered td:last-child { border-right: none; }

/* ── Inline data bar (within table cells) ── */
.data-bar {
  height: 8px; border-radius: var(--radius-sm);
  background: rgba(56,189,248,0.25); min-width: 4px;
}
.data-bar-critical { background: var(--sev-critical-text); }
.data-bar-high     { background: var(--sev-high-text); }
.data-bar-medium   { background: var(--sev-medium-text); }
.data-bar-low      { background: var(--sev-low-text); }

/* ── Rank badge (numbered circle in table cells) ── */
.rank-badge {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-label);
  font-weight: var(--weight-bold); color: var(--text-muted);
  background: var(--surface-raised);
}

/* ── Confidence indicator (colored text) ── */
.conf-high   { color: var(--sev-low-text); }
.conf-medium { color: var(--sev-medium-text); }
.conf-low    { color: var(--text-dim); }

/* ── Policy / baseline row tables (flex-based) ── */
.row-table { border-top: 1px solid var(--border-subtle); }
.row-table-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3); gap: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.row-table-row:hover { background: rgba(56,189,248,0.03); }
.row-table-label { font-size: var(--fs-caption); color: var(--text-primary); flex: 1; }
.row-table-value { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-muted); }

/* ── Action column badge (block/flag/review) ── */
.action-block  { color: var(--action-block-text); }
.action-flag   { color: var(--sev-medium-text); }
.action-review { color: var(--text-dim); }