/* The design system's extended components, vendored: docs/DEPLOY.md says from where.
   Edited here since (transitions named, not `all`), so refreshing it is a merge,
   not a copy. */
/* Extended components (v3)
   Tables, Modals, Trial Banner, Forms, Alerts, Dropdowns
   Built on top of tokens.css + components.css

   ⚠️ DEAD / NOT WIRED (verified 2026-07-09): this redesign-reference file is
   NOT imported by the app bundle, and its `.row-checkbox`/`.cell-checkbox`/
   `.checkbox` classes are unused in any TSX. Do NOT wire it in without first
   reconciling its `input[type="checkbox"] { opacity: 0 }` hover-reveal pattern
   against the global checkbox style in `frontend/src/index.css` — the live
   global rule makes checkboxes visible by default (PR #892), which this file's
   opacity-0 rule would silently break. Reference only. */

/* ============================================================
   TABLES
   ============================================================ */

/* Wrapper that handles overflow + rounded corners properly */
.table-wrap {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  overflow: hidden;
}
.table-wrap--scroll { overflow: auto; }

/* Toolbar above the table — search, filters, bulk actions */
.table-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-divider);
  background: var(--surface-wash);
}
.table-toolbar__search {
  flex: 1; max-width: 360px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-wash-strong);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
}
.table-toolbar__search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--fg-primary); font-size: var(--text-sm); font-family: inherit;
}
.table-toolbar__search input::placeholder { color: var(--fg-placeholder); }
.table-toolbar__spacer { flex: 1; }

/* Bulk-action bar — appears when rows are selected. Replaces the toolbar visually. */
.table-bulkbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--primary-bg-soft);
  border-bottom: 1px solid var(--primary-bg-strong);
}
.table-bulkbar__count {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--primary-ink);
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}

.table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  padding: 10px 16px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  background: var(--surface-wash-strong);
  border-bottom: 1px solid var(--border-divider);
  white-space: nowrap;
}

.table thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.table thead th.sortable:hover { color: var(--fg-primary); }
.table thead th .sort-icon { margin-left: 4px; opacity: 0.5; }
.table thead th[aria-sort] .sort-icon { opacity: 1; color: var(--primary-ink); }

.table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-divider);
  color: var(--fg-primary);
  vertical-align: middle;
}

.table tbody tr {
  transition: background var(--duration) var(--ease-out);
}
.table tbody tr:hover { background: var(--surface-control-soft); }
.table tbody tr[aria-selected="true"] { background: var(--primary-bg-soft); }
.table tbody tr:last-child td { border-bottom: none; }

.table--clickable tbody tr { cursor: pointer; }

/* Density variants */
.table--compact tbody td { padding: 8px 16px; }
.table--compact thead th { padding: 8px 16px; }
.table--comfortable tbody td { padding: 16px; }
.table--comfortable thead th { padding: 14px 16px; }

/* Cell variants */
.table .cell-meta { color: var(--fg-secondary); font-size: var(--text-xs); }
.table .cell-num { font-variant-numeric: tabular-nums; text-align: right; }
.table .cell-mono { font-family: var(--font-mono); font-size: 13px; color: var(--fg-secondary); }
.table .cell-truncate {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.table .cell-actions {
  text-align: right; white-space: nowrap;
  width: 1%;
}
.table .cell-checkbox {
  width: 44px; padding-right: 0; padding-left: 16px;
}

/* Inline edit pattern */
.cell-editable {
  position: relative;
  cursor: text;
}
.cell-editable:hover { background: var(--primary-bg-soft); }
.cell-editable:hover::after {
  content: '✎';
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--fg-tertiary);
}
.cell-editable--editing {
  background: var(--primary-bg-soft) !important;
  outline: 1px solid var(--primary-500);
  outline-offset: -1px;
}
.cell-editable input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--fg-primary); font-size: inherit; font-family: inherit;
  padding: 0;
}

/* Empty / loading / error states inside table */
.table-state {
  padding: 64px 24px;
  text-align: center;
  color: var(--fg-secondary);
}
.table-state__icon {
  width: 48px; height: 48px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xl);
  background: var(--surface-control);
  color: var(--fg-tertiary);
}
.table-state__title {
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--fg-primary); margin-bottom: 4px;
}
.table-state__hint { font-size: var(--text-sm); color: var(--fg-secondary); }

/* Pagination footer */
.table-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border-divider);
  background: var(--surface-wash);
  font-size: var(--text-sm); color: var(--fg-secondary);
}
.table-footer__pages {
  display: flex; align-items: center; gap: 4px;
}
.table-footer__pages button {
  min-width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out);
  font-family: inherit;
}
.table-footer__pages button:hover { background: var(--surface-hover); color: var(--fg-primary); }
.table-footer__pages button[aria-current="page"] {
  background: var(--primary-bg);
  color: var(--primary-ink);
  border-color: var(--primary-border);
}
.table-footer__pages button:disabled {
  opacity: 0.4; cursor: not-allowed;
}

/* ============================================================
   MODALS
   ============================================================ */

.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: fadeIn 200ms var(--ease-out);
}

.modal {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-modal);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 48px);
  animation: slideUp 240ms var(--ease-apple);
  overflow: hidden;
}

.modal--sm { max-width: 400px; }
.modal--md { max-width: 560px; }
.modal--lg { max-width: 760px; }
.modal--xl { max-width: 1000px; }
.modal--full { max-width: calc(100vw - 48px); height: calc(100vh - 48px); }

.modal__header {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-divider);
}
.modal__header-text { flex: 1; min-width: 0; }
.modal__title {
  font-size: var(--text-lg); line-height: var(--lh-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}
.modal__subtitle {
  font-size: var(--text-sm); color: var(--fg-secondary);
  margin-top: 4px;
}
.modal__close {
  flex: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}
.modal__close:hover { background: var(--surface-hover); color: var(--fg-primary); }

.modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.modal__body--padded-tight { padding: 16px 24px; }
.modal__body--scrollable { max-height: 60vh; }

.modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-divider);
  background: var(--surface-wash);
}
.modal__footer-left {
  margin-right: auto;
  font-size: var(--text-sm); color: var(--fg-secondary);
}

/* Confirm-modal icon variant */
.modal__icon {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
}
.modal__icon--warning { background: var(--warning-bg); color: var(--role-warning); }
.modal__icon--danger { background: var(--danger-bg); color: var(--role-danger); }
.modal__icon--info { background: var(--info-bg); color: var(--role-running); }
.modal__icon--success { background: var(--success-bg); color: var(--role-success); }

/* ============================================================
   TRIAL BANNER (3 states)
   ============================================================ */

/* State 1: Compact chip in topbar — < 50% used */
.trial-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px;
  padding: 0 10px 0 12px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--accent-ink);
  cursor: pointer;
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.trial-chip:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
}
.trial-chip__bar {
  width: 48px; height: 4px;
  background: rgba(6, 182, 212, 0.2);
  border-radius: 2px;
  overflow: hidden;
}
.trial-chip__bar-fill {
  height: 100%;
  background: var(--accent-400);
  border-radius: 2px;
}
.trial-chip__cta {
  font-weight: var(--weight-semibold);
  color: var(--accent-ink);
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(6, 182, 212, 0.3);
}

/* State 2: Inline banner above page content — 50–80% used */
.trial-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: linear-gradient(to right, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-xl);
  margin-bottom: 16px;
}
.trial-banner__icon {
  flex: none;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--role-warning);
}
.trial-banner__content { flex: 1; min-width: 0; }
.trial-banner__title {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--fg-primary);
}
.trial-banner__hint {
  font-size: var(--text-xs); color: var(--fg-secondary);
  margin-top: 2px;
}
.trial-banner__progress {
  width: 200px; height: 6px;
  background: var(--surface-control-soft);
  border-radius: 3px;
  overflow: hidden;
}
.trial-banner__progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(to right, var(--warning-400), var(--warning));
  transition: width 400ms var(--ease-out);
}
.trial-banner__actions { flex: none; display: flex; gap: 8px; }

/* State 3: Critical banner (full block) — > 80% or expired */
.trial-banner--critical {
  background: linear-gradient(to right, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.04));
  border-color: rgba(239, 68, 68, 0.3);
  flex-direction: column; align-items: stretch; gap: 12px;
}
.trial-banner--critical .trial-banner__icon {
  width: 48px; height: 48px;
  background: var(--danger-bg);
  color: var(--role-danger);
}
.trial-banner--critical .trial-banner__row {
  display: flex; align-items: center; gap: 16px;
}
.trial-banner--critical .trial-banner__progress-fill {
  background: linear-gradient(to right, var(--danger-400), var(--danger));
}

/* Variant: cyan/info (during trial, before any threshold) */
.trial-banner--info {
  background: linear-gradient(to right, rgba(6, 182, 212, 0.08), rgba(6, 182, 212, 0.04));
  border-color: rgba(6, 182, 212, 0.2);
}
.trial-banner--info .trial-banner__icon {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent-ink);
}
.trial-banner--info .trial-banner__progress-fill {
  background: linear-gradient(to right, var(--accent-400), var(--accent-500));
}

/* ============================================================
   FORM CONTROLS (advanced)
   ============================================================ */

.field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.field__label {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--fg-label);
}
.field__label--required::after {
  content: '*'; color: var(--role-danger);
}
.field__hint { font-size: var(--text-xs); color: var(--fg-tertiary); }
.field__error {
  font-size: var(--text-xs); color: var(--role-danger);
  display: flex; align-items: center; gap: 4px;
}
.field--invalid .input { border-color: var(--danger); }
.field--invalid .input:focus { border-color: var(--role-danger); }

.input--sm { padding: 6px 12px; font-size: var(--text-sm); border-radius: var(--radius-md); }

/* Input group with leading/trailing addon */
.input-group {
  display: flex; align-items: stretch;
  background: var(--surface-well-strong);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.input-group:focus-within {
  border-color: var(--primary-500);
}
.input-group input, .input-group select {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  padding: 10px 12px;
  color: var(--fg-primary); font-size: var(--text-sm); font-family: inherit;
}
.input-group__addon {
  display: flex; align-items: center;
  padding: 0 12px;
  color: var(--fg-secondary);
  background: var(--surface-control-soft);
  border-left: 1px solid var(--border-card);
  font-size: var(--text-sm);
}
.input-group__addon--leading {
  border-left: none;
  border-right: 1px solid var(--border-card);
}

/* ============================================================
   LISTBOX — custom dropdown (replaces native <select>)
   ============================================================ */

/* Trigger — looks like an input but acts as a button.
   Matches .input dimensions exactly so they sit visually identical. */
.listbox-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: var(--surface-well);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  color: var(--fg-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
  text-align: left;
}
.listbox-trigger:hover { border-color: var(--border-card-hover); }
.listbox-trigger[aria-expanded="true"],
.listbox-trigger:focus { outline: none; border-color: var(--primary-500); }
.listbox-trigger__value {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.listbox-trigger__placeholder { color: var(--fg-placeholder); }
.listbox-trigger__icon {
  flex: none; color: var(--fg-tertiary);
  transition: transform var(--duration) var(--ease-out);
}
.listbox-trigger[aria-expanded="true"] .listbox-trigger__icon { transform: rotate(180deg); }
.listbox-trigger--sm { padding: 6px 10px 6px 12px; border-radius: var(--radius-md); }
.listbox-trigger--inline {
  background: transparent; border-color: transparent;
  padding: 4px 8px; border-radius: var(--radius-md);
}
.listbox-trigger--inline:hover { background: var(--surface-whisper); }

/* Popup — floating panel under trigger. Use position: absolute on parent
   wrapper, or pass position via inline style at runtime. */
.listbox-popup {
  position: absolute;
  z-index: 100;
  margin-top: 4px;
  min-width: 180px;
  max-height: 280px;
  display: flex; flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 4px;
  animation: slideUp 160ms var(--ease-apple);
}
.listbox-popup__search {
  position: sticky; top: 0; z-index: 1;
  margin: 0 0 4px;
  padding: 6px 8px;
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-divider);
}
.listbox-popup__search input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--fg-primary); font-size: var(--text-sm); font-family: inherit;
}
.listbox-popup__search input::placeholder { color: var(--fg-placeholder); }
.listbox-popup__list {
  flex: 1; overflow-y: auto;
  padding: 2px;
}
.listbox-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent; border: none;
  color: var(--fg-primary);
  font-size: var(--text-sm); font-family: inherit;
  text-align: left;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration);
}
.listbox-option:hover { background: var(--surface-hover); }
.listbox-option[aria-selected="true"] {
  background: var(--primary-bg);
  color: var(--primary-ink);
  font-weight: var(--weight-medium);
}
.listbox-option__check {
  flex: none; width: 14px; color: var(--primary-ink);
  opacity: 0;
}
.listbox-option[aria-selected="true"] .listbox-option__check { opacity: 1; }
.listbox-option__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listbox-option__meta { color: var(--fg-tertiary); font-size: var(--text-xs); flex: none; }
.listbox-popup__group-title {
  padding: 6px 12px 4px;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--fg-tertiary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.listbox-popup__empty {
  padding: 24px 16px;
  text-align: center;
  font-size: var(--text-sm); color: var(--fg-tertiary);
}

/* Multi-select trigger — chips inside trigger */
.listbox-trigger--multi { flex-wrap: wrap; padding: 6px 10px 6px 12px; }
.listbox-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px 2px 8px;
  background: var(--primary-bg);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--primary-ink);
}
.listbox-chip__remove {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: currentColor; cursor: pointer;
  border-radius: 50%;
  opacity: 0.6;
}
.listbox-chip__remove:hover { opacity: 1; background: var(--primary-bg-strong); }


/* Toggle switch */
.toggle {
  position: relative;
  width: 36px; height: 20px;
  background: var(--surface-hover);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--duration);
  flex: none;
}
.toggle::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--duration) var(--ease-apple);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.toggle[aria-checked="true"] { background: var(--primary-600); }
.toggle[aria-checked="true"]::after { transform: translateX(16px); }

/* Checkbox */
.checkbox {
  appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  background: var(--surface-well);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.checkbox:hover { border-color: var(--border-card-hover); }
.checkbox:checked {
  background: var(--primary-600);
  border-color: var(--primary-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6l2.5 2.5L9.5 3.5' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox:indeterminate {
  background: var(--primary-600);
  border-color: var(--primary-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 6h6' stroke='white' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ============================================================
   ALERTS (inline)
   ============================================================ */

.alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}
.alert__icon {
  flex: none;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.alert__content { flex: 1; min-width: 0; }
.alert__title { font-weight: var(--weight-semibold); color: var(--fg-primary); }
.alert__body { color: var(--fg-secondary); margin-top: 2px; }
.alert__close {
  flex: none; background: transparent; border: none;
  color: var(--fg-secondary); cursor: pointer;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}
.alert__close:hover { background: var(--surface-whisper); color: var(--fg-primary); }

.alert--info { background: var(--info-bg); border-color: var(--primary-border); }
.alert--info .alert__icon { color: var(--role-running); }
.alert--success { background: var(--success-bg); border-color: rgba(16, 185, 129, 0.25); }
.alert--success .alert__icon { color: var(--role-success); }
.alert--warning { background: var(--warning-bg); border-color: rgba(245, 158, 11, 0.25); }
.alert--warning .alert__icon { color: var(--role-warning); }
.alert--danger { background: var(--danger-bg); border-color: rgba(239, 68, 68, 0.25); }
.alert--danger .alert__icon { color: var(--role-danger); }

/* ============================================================
   DROPDOWN / MENU
   ============================================================ */

.menu {
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 4px;
  min-width: 200px;
  animation: slideUp 160ms var(--ease-apple);
}
.menu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent; border: none;
  color: var(--fg-primary);
  font-size: var(--text-sm); font-family: inherit;
  text-align: left;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration);
}
.menu__item:hover { background: var(--surface-hover); }
.menu__item--danger { color: var(--role-danger); }
.menu__item--danger:hover { background: var(--danger-bg); }
.menu__item__icon { flex: none; color: var(--fg-tertiary); }
.menu__item:hover .menu__item__icon { color: var(--fg-primary); }
.menu__item__shortcut {
  margin-left: auto;
  font-size: var(--text-xs); color: var(--fg-tertiary);
  font-family: var(--font-mono);
}
.menu__divider {
  height: 1px; margin: 4px 0;
  background: var(--border-divider);
}
.menu__label {
  padding: 6px 12px 4px;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--fg-tertiary);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ============================================================
   TABS
   ============================================================ */

.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border-divider);
}
.tab {
  padding: 10px 16px;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--fg-secondary);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--fg-primary); }
.tab[aria-selected="true"] {
  color: var(--primary-ink);
  border-bottom-color: var(--primary-500);
}
.tab__count {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight: var(--weight-semibold);
  background: var(--role-neutral-bg);
  color: var(--fg-secondary);
}
.tab[aria-selected="true"] .tab__count {
  background: var(--primary-bg);
  color: var(--primary-ink);
}

/* ============================================================
   TYPOGRAPHIC HIERARCHY in tables and cards
   Use these instead of raw .text-sm everywhere.
   ============================================================ */

/* Primary cell — the thing the user is identifying.
   Source text in TM, term in Glossary, job name, project name. */
.cell-primary {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-primary);
}

/* Secondary cell — supporting attribute on the row.
   Translation, language pair, status label, owner. */
.cell-secondary {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--fg-secondary);
}

/* Quiet meta — timestamps, IDs, counts you'd skim past.
   "2h ago", "#8f4a2b", "142 entries". */
.cell-quiet {
  font-size: 13px;
  font-weight: var(--weight-normal);
  color: var(--fg-tertiary);
}

/* Strong number — the number that matters on the row.
   Quality score, cost, total. */
.cell-strong-num {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--fg-primary);
  text-align: right;
}

/* Quiet number — secondary count, usage, samples. */
.cell-quiet-num {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-tertiary);
  text-align: right;
}

/* Card hierarchy — mirror of table hierarchy. */
.card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.card-sub {
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  margin-top: 4px;
}
.card-meta {
  font-size: 13px;
  color: var(--fg-tertiary);
}

/* ============================================================
   STAT CARD (KPI tile)
   ============================================================ */

.stat-card {
  padding: 20px;
  background: var(--bg-card);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
}
.stat-card__label {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-tertiary);
}
.stat-card__value {
  font-size: var(--text-3xl); line-height: 1.1;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  margin-top: 8px;
}
.stat-card__delta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
}
.stat-card__delta--up { color: var(--role-success); }
.stat-card__delta--down { color: var(--role-danger); }
.stat-card__delta--flat { color: var(--fg-tertiary); }
.stat-card__hint {
  font-size: var(--text-xs); color: var(--fg-tertiary);
  margin-top: 8px;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */

.progress {
  width: 100%; height: 6px;
  background: var(--surface-control-soft);
  border-radius: 3px;
  overflow: hidden;
}
.progress__fill {
  height: 100%; border-radius: 3px;
  background: var(--primary-500);
  transition: width 400ms var(--ease-out);
}
.progress--success .progress__fill { background: var(--success); }
.progress--warning .progress__fill { background: var(--warning); }
.progress--danger .progress__fill { background: var(--danger); }
.progress--gradient .progress__fill {
  background: linear-gradient(to right, var(--primary-500), var(--accent-500));
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm);
  color: var(--fg-secondary);
}
.breadcrumbs a {
  color: var(--fg-secondary);
  text-decoration: none;
  transition: color var(--duration);
}
.breadcrumbs a:hover { color: var(--fg-primary); }
.breadcrumbs__sep { color: var(--fg-tertiary); }
.breadcrumbs__current { color: var(--fg-primary); font-weight: var(--weight-medium); }


/* ============================================================
   ROW CHECKBOXES — visible only on hover or when selected
   ============================================================ */
.row-checkbox { transition: opacity 120ms ease; }
.row-checkbox input[type="checkbox"] {
  opacity: 0;
  transition: opacity 120ms ease;
}
.hover-row:hover .row-checkbox input[type="checkbox"],
.hover-row.is-selected .row-checkbox input[type="checkbox"],
.row-checkbox input[type="checkbox"]:focus-visible,
.row-checkbox input[type="checkbox"]:checked,
.table thead .row-checkbox input[type="checkbox"]:checked {
  opacity: 1;
}
/* Header checkbox: show on table hover, focus, or when any rows selected (parent .table-wrap gets a hover) */
.table-wrap:hover thead .row-checkbox input[type="checkbox"] { opacity: 1; }