/* ============================================================
   Tables, badges, pills, progress, timeline, stat rows
   ============================================================ */

.table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.table-wrap--flush { border: none; border-radius: 0; }
.table-wrap--scroll { overflow-y: auto; max-height: 420px; }

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--font-body-sm);
  color: var(--text-body);
  text-align: start;
}
.table__head th {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 14px;
  text-align: start;
  vertical-align: middle;
  font: var(--font-overline);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.table__th--sorted {
  color: var(--text-strong);
  background: var(--surface-tint);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}
.table__sort {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; margin: -2px -6px;
  border: none; background: transparent;
  color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; border-radius: var(--radius-xs);
}
.table__sort:hover { color: var(--text-strong); background: var(--color-primary-tint); }
.table__sort:focus-visible { box-shadow: var(--focus-ring); }
.table__sort-icon { display: inline-flex; opacity: 0.32; transition: opacity var(--duration-fast) ease; }
.table__sort-icon svg { width: 11px; height: 11px; }
.table__sort:hover .table__sort-icon { opacity: 0.75; }
.table__th--sorted .table__sort-icon { opacity: 1; color: var(--color-primary); }

.table td {
  padding: 11px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
}
.table tbody tr:last-child td { border-bottom: none; }
.table--dense th { padding: 7px 11px; }
.table--dense td { padding: 7px 11px; font-size: var(--text-xs); }
.table--striped tbody tr:nth-child(even) td { background: var(--surface-sunken); }
.table--interactive tbody tr { transition: background var(--duration-fast) var(--ease-standard); }
.table--interactive tbody tr:hover td { background: var(--surface-sunken); }
.table__row--clickable { cursor: pointer; }
.table__row--selected td { background: var(--color-primary-tint) !important; }
.table__row--flag td:first-child { box-shadow: inset 3px 0 0 var(--tx-danger-600); }

.num    { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.table__empty { padding: var(--space-9); text-align: center; color: var(--text-subtle); }

/* Cell helpers */
.cell-main { font-weight: var(--weight-medium); color: var(--text-strong); }
.cell-sub  { font: var(--font-caption); color: var(--text-subtle); margin-top: 1px; }
.cell-stack { display: flex; flex-direction: column; min-width: 0; }

/* ---------- Badge ---------- */
.badge {
  --_bg: var(--status-neutral-bg);
  --_fg: var(--status-neutral-fg);
  --_bd: var(--border-default);
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 21px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.badge--sm { min-height: 17px; padding: 1px 7px; font-size: var(--text-2xs); }
.badge--outline { background: transparent; border-color: var(--_bd); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge svg { width: 12px; height: 12px; }

.badge--neutral { --_bg: var(--status-neutral-bg); --_fg: var(--status-neutral-fg); --_bd: var(--border-default); }
.badge--primary { --_bg: var(--color-primary-tint); --_fg: var(--color-primary); --_bd: var(--color-primary); }
.badge--success { --_bg: var(--status-success-bg); --_fg: var(--status-success-fg); --_bd: var(--tx-success-600); }
.badge--warning { --_bg: var(--status-warning-bg); --_fg: var(--status-warning-fg); --_bd: var(--tx-warning-600); }
.badge--danger  { --_bg: var(--status-danger-bg);  --_fg: var(--status-danger-fg);  --_bd: var(--tx-danger-600); }
.badge--info    { --_bg: var(--status-info-bg);    --_fg: var(--status-info-fg);    --_bd: var(--color-primary); }
.badge--ai      { --_bg: var(--color-ai-tint);     --_fg: var(--color-ai);          --_bd: var(--color-ai); }
.badge--navy    { --_bg: var(--surface-inverse);   --_fg: #fff;                     --_bd: var(--surface-inverse); }

/* ---------- Progress ---------- */
.progress {
  width: 100%; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: width var(--duration-slow) var(--ease-out);
}
.progress__fill--success { background: var(--tx-success-600); }
.progress__fill--warning { background: var(--tx-warning-600); }
.progress__fill--danger  { background: var(--tx-danger-600); }
.progress--lg { height: 9px; }

/* A labelled meter used in scorecards */
.meter { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.meter__label { font: var(--font-caption); color: var(--text-muted); }
.meter__value { font: var(--font-label); color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* ---------- Row list ---------- */
.rowlist { display: flex; flex-direction: column; list-style: none; }
.rowlist__item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none; color: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}
.rowlist__item:last-child { border-bottom: none; }
.rowlist__item.is-clickable { cursor: pointer; }
.rowlist__item.is-clickable:hover { background: var(--surface-sunken); }
.rowlist__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rowlist__title { font-weight: var(--weight-medium); color: var(--text-strong); }
.rowlist__meta {
  font: var(--font-caption); color: var(--text-muted);
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
}
.rowlist__end { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }

/* ---------- Avatar ---------- */
.avatar {
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font: var(--weight-bold) var(--text-xs)/1 var(--font-sans);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 24px; height: 24px; font-size: var(--text-2xs); }
.avatar--lg { width: 44px; height: 44px; font-size: var(--text-base); }

/* Customer logo chip — falls back to initials when no logo is set */
.logo-chip {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  display: grid; place-items: center;
  overflow: hidden;
}
.logo-chip img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.logo-chip__fallback {
  font: var(--weight-bold) var(--text-sm)/1 var(--font-sans);
  color: var(--color-primary);
}

/* ---------- Timeline ---------- */
.timeline { display: flex; flex-direction: column; list-style: none; }
.timeline__item {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-7);
  border-inline-start: 1px solid var(--border-subtle);
}
.timeline__item:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.timeline__dot {
  position: absolute; inset-inline-start: -5px; top: 2px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--surface-card);
}
.timeline__dot--success { background: var(--tx-success-600); }
.timeline__dot--warning { background: var(--tx-warning-600); }
.timeline__dot--danger  { background: var(--tx-danger-600); }
.timeline__dot--muted   { background: var(--border-strong); }
.timeline__title { font: var(--font-label); color: var(--text-strong); }
.timeline__meta  { font: var(--font-caption); color: var(--text-subtle); margin-top: 2px; }
.timeline__body  { font: var(--font-body-sm); color: var(--text-muted); margin-top: var(--space-3); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; align-items: center; gap: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.tabs__btn {
  position: relative;
  border: none; background: transparent;
  padding: 10px 14px;
  font: var(--font-label);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--duration-fast) var(--ease-standard);
}
.tabs__btn::after {
  content: ""; position: absolute; inset-inline: 10px; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease-out);
}
.tabs__btn:hover { color: var(--text-strong); }
.tabs__btn.is-on { color: var(--color-primary); }
.tabs__btn.is-on::after { transform: scaleX(1); }
.tabs__btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.tabs__btn svg { width: 14px; height: 14px; }

/* ---------- Stepper ---------- */
.stepper { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.step {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  font: var(--font-label);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-standard);
}
.step__num {
  width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-sunken);
  color: var(--text-subtle);
  font: var(--weight-bold) var(--text-2xs)/1 var(--font-sans);
}
.step__num svg { width: 11px; height: 11px; }
.step.is-on {
  border-color: var(--color-primary);
  background: var(--surface-tint);
  color: var(--color-primary);
}
.step.is-on .step__num { background: var(--color-primary); color: #fff; }
.step.is-done { color: var(--status-success-fg); border-color: var(--tx-success-600); }
.step.is-done .step__num { background: var(--tx-success-600); color: #fff; }
.step__line { flex: 1 1 22px; min-width: 14px; height: 1px; background: var(--border-default); }

/* Inline icons in row metadata sit with the text, never above it. */
.rowlist__meta svg { width: 12px; height: 12px; opacity: 0.7; }
.rowlist__meta span { display: inline-flex; align-items: center; gap: 4px; }