/* ============================================================================
   CCL Acquisitions Dashboard — Pipeline (V5 visual style)
   Track B Phase 2 — full V5 reskin targeting the existing class names so the
   pipeline page renders in V5 visual language without restructuring pipeline.js.
   Loads AFTER components.css so these rules override the legacy styling.
   ============================================================================ */

/* ========== PIPELINE CONTAINER ========== */
.pipeline-content { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface-page, var(--gray-50)); }

/* ========== PIPELINE ERROR / EMPTY STATE — V5 .es =====
   Renders inside .pipeline-content when a Convex query subscription fails
   (Convex disconnect, redacted Server Error, schema mismatch, etc.). Scoped
   under .pipeline-content so it doesn't collide with the existing .es-* empty
   state used by detail.js. Layout matches V5 mockup pipeline-v3.html .es block. */
.pipeline-content .es {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 32px;
  text-align: center;
  flex: 1;
  gap: 0;
}
.pipeline-content .es-i {
  width: 48px;
  height: 48px;
  color: var(--gray-300);
  margin-bottom: 14px;
}
.pipeline-content .es-i i {
  width: 48px;
  height: 48px;
}
.pipeline-content .es-t {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.pipeline-content .es-d {
  font-size: 11px;
  color: var(--gray-400);
  max-width: 300px;
  margin-bottom: 18px;
  line-height: 1.6;
}
.pipeline-content .es-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--brand);
  color: var(--white);
  border: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(72,122,123,0.2);
  transition: background 0.12s, transform 0.12s;
  font-family: var(--font-sans);
}
.pipeline-content .es-action:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
}
.pipeline-content .es-action i {
  width: 13px;
  height: 13px;
}

/* ========== HEADER BAR (PipelineHeader) — V5 .hd =====
   The Pipeline title + count row between asset class tabs and stage filter
   tabs. Toolbar actions (search, view-toggle, Add Property) live in the
   FilterBar below, so this header keeps just the title + count for V5 parity. */
.pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  background: var(--white);
  flex-shrink: 0;
  gap: 12px;
}
.pipeline-header-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.pipeline-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
  line-height: 1.2;
}
.pipeline-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-400);
}

/* ========== STICKY TOOLBAR GROUP (stage tabs + filter row) ==========
   One sticky, opaque unit directly under the topbar. The two rows inside
   have content-dependent heights (the tabs row grows a scrollbar when it
   overflows, filter pills wrap on narrow viewports), so the legacy per-row
   sticky offsets in components.css (top: 56px / top: 103px, measured against
   the pre-V5 topbar) could never line up; combined with the transparent V5
   row backgrounds, kanban column headers scrolled visibly through the
   toolbar (Mufaro screenshot, 2026-06-11). White background per the V5
   mockup's .tabs band; z-summary keeps it above board and table content
   while staying below dropdowns, panels, and modals. */
.pipeline-sticky-toolbar {
  position: sticky;
  top: var(--topbar-height);
  z-index: var(--z-summary);
  background: var(--white);
  flex-shrink: 0;
}
/* The rows are plain blocks inside the sticky group: neutralize the legacy
   sticky positioning they still receive from components.css. */
.pipeline-sticky-toolbar .pipeline-bar,
.pipeline-sticky-toolbar .filter-bar {
  position: static;
}

/* ========== STAGE TABS BAR (PipelineBar) — V5 .tabs ========== */
.pipeline-bar { background: transparent; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; padding: 0 20px; }
.pipeline-tabs { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: thin; }
.pipeline-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; font-size: 12px; font-weight: 500;
  color: var(--gray-500); cursor: pointer;
  background: transparent;
  border: 0; border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap; position: relative;
  font-family: var(--font-sans);
}
.pipeline-tab:hover { color: var(--gray-700); }
.pipeline-tab.active { color: var(--gray-900); border-bottom-color: var(--tab-color, var(--brand)); font-weight: 600; }
.pipeline-tab .tab-count {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--gray-400); padding: 2px 6px; border-radius: 999px; background: var(--gray-100);
}
.pipeline-tab.active .tab-count { color: var(--tab-color, var(--brand)); background: var(--tab-wash, var(--brand-wash)); }
.pipeline-tab.zero { opacity: 0.5; }
.pipeline-sep { width: 1px; height: 18px; background: var(--gray-200); margin: 0 6px; align-self: center; }

/* ========== FILTER BAR — V5 .hd header ========== */
/* align-items: flex-start so when the filter-group wraps to multiple rows on
   narrow viewports, the right-side cluster (Export CSV / Add Property / view
   toggles) sits at row-1's top edge rather than at the multi-row vertical
   center, which keeps the buttons aligned with the search input. */
.filter-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px 20px; gap: 8px; flex-shrink: 0;
  background: transparent; border-bottom: 1px solid var(--gray-100);
  flex-wrap: nowrap;
}

/* LEFT side — filter group (search + filter pills).
   CRITICAL: do NOT set overflow here. The filter-pill dropdowns are absolutely
   positioned and hang BELOW this container; any overflow value other than
   visible (including overflow-x: auto, which implicitly clips overflow-y) will
   clip the dropdowns, making them appear "broken" — clicking opens internal
   state but nothing visually shows. The horizontal scroll behavior for narrow
   screens has been dropped in favor of working dropdowns; on narrow viewports
   filter pills will wrap or push siblings instead. */
.filter-bar .filter-group {
  display: flex; align-items: center; gap: 5px;
  flex: 1 1 auto; min-width: 0;
  flex-wrap: wrap;
  row-gap: 8px;
}

/* RIGHT side wrapper (legacy class name .view-toggle, but it contains
   Export CSV + Import CSV + Add Property + the kanban/table view buttons) */
.filter-bar > .view-toggle {
  display: flex; align-items: center; gap: 4px;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  overflow: visible;
}

/* Search input — V5 compact style */
.pipeline-search {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.pipeline-search > i {
  position: absolute; left: 8px;
  width: 14px; height: 14px; color: var(--gray-400);
  pointer-events: none;
}
.pipeline-search-input {
  padding: 7px 10px 7px 28px;
  border: 1px solid var(--gray-200); border-radius: 6px;
  font-size: 12px; color: var(--gray-700);
  background: var(--gray-50); outline: none;
  width: 200px;
  font-family: var(--font-sans);
}
.pipeline-search-input:focus { border-color: var(--brand); background: var(--white); }
.pipeline-search-input::placeholder { color: var(--gray-400); }
.pipeline-search-clear {
  position: absolute; right: 6px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--gray-400); cursor: pointer;
  border-radius: 4px;
}
.pipeline-search-clear:hover { background: var(--gray-100); color: var(--gray-600); }

/* Clear-all link */
.filter-bar .clear-filters {
  font-size: 11px; font-weight: 600;
  color: var(--brand);
  background: transparent; border: 0;
  cursor: pointer; padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.filter-bar .clear-filters:hover { background: var(--brand-wash); }

/* Right-side action buttons inside .view-toggle wrapper */
.filter-bar > .view-toggle .btn,
.filter-bar > .view-toggle .btn.btn-sm {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: var(--font-sans);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 0 !important; /* override the inline style="margin-right:var(--s-2)" */
}
.filter-bar > .view-toggle .btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}
/* The "Add Property" button (last .btn before the view-btn pair) gets brand color */
.filter-bar > .view-toggle .btn:nth-last-of-type(3),
.filter-bar > .view-toggle .btn:has(+ .view-btn) {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(72,122,123,0.2);
}
.filter-bar > .view-toggle .btn:nth-last-of-type(3):hover,
.filter-bar > .view-toggle .btn:has(+ .view-btn):hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* View toggle buttons (kanban/table) at the end */
.view-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-400);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  border-radius: 6px;
  flex-shrink: 0;
}
.view-btn:hover { background: var(--gray-50); color: var(--gray-600); }
.view-btn.active { background: var(--brand-wash); color: var(--brand); border-color: var(--brand-subtle); }
.view-btn i { width: 10px; height: 10px; }

/* Filter pills — V5 .tbb */
.filter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: var(--gray-600);
  background: var(--white); border: 1px solid var(--gray-200);
  cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap; font-family: var(--font-sans);
}
.filter-pill:hover { background: var(--gray-50); color: var(--gray-700); border-color: var(--gray-300); }
.filter-pill.active { background: var(--brand-wash); color: var(--brand); border-color: var(--brand-subtle); }
.filter-pill i { width: 10px; height: 10px; }
.filter-pill .count-badge {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 5px;
  border-radius: 999px; background: var(--brand); color: var(--white); margin-left: 2px;
}

/* (View toggle button styles moved down to .view-btn — kanban/table specific) */

/* Primary action button — V5 .ta */
.btn-add-property, .filter-bar .btn-primary, .action-btn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  background: var(--brand); color: var(--white); border: none;
  cursor: pointer; box-shadow: 0 2px 8px rgba(72,122,123,0.2);
  transition: background 0.12s, transform 0.12s;
  font-family: var(--font-sans);
}
.btn-add-property:hover, .filter-bar .btn-primary:hover, .action-btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn-add-property:active, .filter-bar .btn-primary:active, .action-btn-primary:active { transform: scale(0.97); }
.btn-add-property i, .filter-bar .btn-primary i, .action-btn-primary i { width: 10px; height: 10px; }

/* Secondary action button */
.btn-secondary, .action-btn-secondary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  background: var(--white); color: var(--gray-600);
  border: 1px solid var(--gray-200);
  cursor: pointer; transition: background 0.12s;
  font-family: var(--font-sans);
}
.btn-secondary:hover, .action-btn-secondary:hover { background: var(--gray-50); color: var(--gray-700); border-color: var(--gray-300); }
.btn-secondary i, .action-btn-secondary i { width: 10px; height: 10px; }

/* ========== KANBAN BOARD — V5 .kb ========== */
.kanban-board {
  display: flex; gap: 10px;
  padding: 14px 20px 20px;
  overflow-x: auto; flex: 1;
  align-items: flex-start; min-height: 0;
  scrollbar-width: thin;
  background: var(--gray-50);
}

/* Column — V5 .kc */
.kanban-column {
  min-width: 256px; max-width: 256px;
  background: var(--gray-100); border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  flex-shrink: 0;
  max-height: 100%;
}
.kanban-column.auto-stage { min-width: 220px; max-width: 220px; opacity: 0.7; }

/* Column header — V5 .kh — uses inline style="background: var(--stage-N)" from JS */
.col-header {
  padding: 9px 10px;
  color: var(--white);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
/* V5 column count — plain mono number on the right of the column header.
   Overrides the components.css pill chrome (rgba bg + r-full radius + 22x22
   flex box) — V5 has no pill, just the number. */
.col-count {
  background: transparent;
  border-radius: 0;
  min-width: 0;
  height: auto;
  padding: 0;
  display: inline;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
  color: var(--white);
}

/* Column body — V5 .kb-bd. NO flex:1 — let column shrink to content so
   empty columns are tight (just header + ~60px empty state), not stretched
   to match the tallest populated column. */
.col-body {
  padding: 5px;
  display: flex; flex-direction: column; gap: 5px;
  min-height: 50px;
  overflow-y: auto;
}

/* When a column has the empty state, keep it tight at natural size */
.kanban-column:has(.col-empty) {
  height: auto;
  max-height: none;
}

/* ========== CARD — V5 .cd ========== */
.kanban-card {
  background: var(--white); border-radius: 7px;
  padding: 9px 10px;
  cursor: pointer;
  transition: box-shadow 0.12s, transform 0.12s;
  border: 1px solid var(--gray-200);
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
}
/* Kill the legacy ::before stage-color accent — V5 cards don't use it */
.kanban-card::before { display: none !important; }
.kanban-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.kanban-card.analyzing { border-style: dashed; border-color: var(--gray-300); }
.kanban-card.bulk-selected { border: 2px solid var(--brand); background: var(--brand-wash); }
.kanban-card--mine { box-shadow: inset 3px 0 0 var(--brand); }
.kanban-card--mine .card-avatar { background: var(--brand); color: var(--white); }

/* Address — V5 .cd-a */
.card-address {
  font-size: 12px; font-weight: 600;
  color: var(--gray-900); line-height: 1.3;
  display: flex; align-items: center; gap: 4px;
}
.addr-flag { display: inline-flex; align-items: center; }

/* City — V5 .cd-c */
.card-city { font-size: 10px; color: var(--gray-400); line-height: 1.3; margin-bottom: 2px; }

/* Source row */
.card-source { display: flex; align-items: center; margin-top: 2px; }
.source-tag {
  font-size: 8px; font-weight: 600;
  color: var(--gray-400); background: var(--gray-100);
  padding: 2px 5px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 3px;
}
.source-tag i { width: 10px; height: 10px; }

/* Scores row */
.card-scores { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.badge-temp {
  font-size: 9px; font-weight: 600;
  padding: 2px 6px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 3px;
  text-transform: capitalize;
}
.badge-temp i { width: 9px; height: 9px; }
.badge-temp.hot    { background: rgba(16,185,129,0.10);  color: var(--temp-hot); }
.badge-temp.warm   { background: rgba(132,204,22,0.10);  color: #65A30D; }
.badge-temp.cool   { background: rgba(245,158,11,0.10);  color: #B45309; }
.badge-temp.cold   { background: rgba(59,130,246,0.10);  color: var(--temp-cold); }
.badge-temp.frozen { background: rgba(148,163,184,0.10); color: var(--temp-frozen); }

/* ===== Strategy badge =====
   Wash pill in the card footer, per V5 admin-platform-demo Screen 13.
   Strategies without a V5 --strategy-* token use the gray-neutral base
   (locked O1 fallback). Same classes serve the table's Strategy column. */
.badge-strategy {
  font-size: 9px; font-weight: 600;
  padding: 2px 6px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--gray-100); color: var(--gray-600);
  white-space: nowrap;
}
.badge-strategy.co_living    { background: var(--strategy-coliving-wash);  color: var(--strategy-coliving); }
.badge-strategy.fix_and_flip { background: var(--strategy-fix-flip-wash);  color: var(--strategy-fix-flip); }
.badge-strategy.nonprofit    { background: var(--strategy-nonprofit-wash); color: var(--strategy-nonprofit); }

.score-badge {
  font-size: 9px; font-weight: 600;
  color: var(--gray-500); background: var(--gray-50);
  padding: 2px 6px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 2px;
}
.score-badge .prefix { opacity: 0.6; }
.score-badge .val { font-family: var(--font-mono); color: var(--gray-900); }
.violation-badge { display: inline-flex; align-items: center; color: var(--warning); }
.violation-badge i { width: 11px; height: 11px; }

/* Meta row (footer) — V5 .cd-f */
.card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.days-badge {
  font-size: 9px; font-weight: 500;
  color: var(--gray-500);
  display: inline-flex; align-items: center; gap: 3px;
}
.days-badge.warning { color: var(--warning); }
.days-badge.urgent  { color: var(--error); }
.days-badge i { width: 10px; height: 10px; }

/* Avatar — V5 .av */
.card-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-subtle); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  flex-shrink: 0;
}

/* ===== V5 Card Metrics Row — .card-metrics (replaces .card-scores) =====
   Per-stage metric cells (BEDS / RENT/RM / ASK on Screening, etc.). Each cell
   stacks an uppercase 8px label above a mono 12px value. Empty values render
   '—' in a muted color so cards stay visually consistent across data states. */
.card-metrics {
  display: flex;
  gap: 14px;
  margin-top: 2px;
}
.metric-cell {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.metric-label {
  font: 600 8px var(--font-sans);
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-bottom: 1px;
  white-space: nowrap;
}
.metric-value {
  font: 600 12px var(--font-mono);
  color: var(--gray-900);
  line-height: 1.2;
  white-space: nowrap;
}
.metric-value.metric-empty {
  color: var(--gray-300);
  font-weight: 500;
}

/* ===== V5 Card Footer — .card-footer (replaces .card-meta) =====
   Temperature chip + sub-state chip + violation badge (when applicable) +
   assignee avatar pushed to the right edge. Empty footer (no chips, no avatar)
   collapses to ~0 height because of the gap-only layout. */
.card-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.card-footer .card-avatar { margin-left: auto; }
.card-footer:empty { display: none; }

/* ===== V5 Sub-State Chip — .badge-substate =====
   Pill with a tiny colored dot prefix. Sub-state values are from
   Config.SUB_STATE_LABELS: assigned, in_progress, review, approved, hold.
   The colored dot is generated via ::before (no extra DOM). */
.badge-substate {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: capitalize;
}
.badge-substate::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.badge-substate.assigned       { background: rgba(148,163,184,0.10); color: #64748B; }
.badge-substate.in_progress,
.badge-substate.progress       { background: rgba(59,130,246,0.10);  color: #2563EB; }
.badge-substate.review         { background: rgba(139,92,246,0.10);  color: #7C3AED; }
.badge-substate.approved       { background: rgba(16,185,129,0.10);  color: #059669; }
.badge-substate.hold,
.badge-substate.on_hold        { background: rgba(245,158,11,0.10);  color: #D97706; }

/* Empty column — V5 .ce */
.col-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 14px; min-height: 60px;
  color: var(--gray-400); font-size: 10px; text-align: center;
  gap: 4px;
}
.col-empty svg { width: 24px; height: 24px; opacity: 0.5; }

/* Analyzing spinner */
.kanban-card.analyzing .analyzing-row,
.kanban-card .analyzing-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; font-size: 10px; color: var(--gray-400);
}
.spin {
  width: 12px; height: 12px;
  border: 2px solid var(--gray-200); border-top-color: var(--brand);
  border-radius: 50%; animation: pipeline-spin 0.7s linear infinite;
  display: inline-block; flex-shrink: 0;
}
@keyframes pipeline-spin { to { transform: rotate(360deg); } }

/* ========== BULK ACTION BAR — V5 .bk ========== */
.bulk-action-bar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--gray-900); color: var(--white);
  padding: 8px 18px; border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; z-index: 100;
  font-family: var(--font-sans);
}
.bulk-action-bar .bulk-count { font-family: var(--font-mono); font-weight: 700; font-size: 12px; }
.bulk-action-bar button {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 10px; border-radius: 5px;
  font-size: 10px; font-weight: 600;
  color: var(--white); background: transparent; border: none;
  cursor: pointer; transition: background 0.08s; font-family: var(--font-sans);
}
.bulk-action-bar button:hover { background: rgba(255,255,255,0.1); }
.bulk-action-bar button.danger, .bulk-action-bar button.r { color: #FCA5A5; }
.bulk-action-bar button.danger:hover, .bulk-action-bar button.r:hover { background: rgba(239,68,68,0.12); }
.bulk-action-bar button i { width: 10px; height: 10px; }

/* ========== TABLE VIEW ========== */
.pipeline-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); }
.pipeline-table th {
  font-size: 10px; font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.04em;
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.pipeline-table td {
  font-size: 12px; padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.pipeline-table tr:hover td { background: var(--gray-50); }

/* ========== KANBAN SKELETON ========== */
.kanban-skeleton { display: flex; gap: 10px; padding: 14px 20px 20px; overflow-x: hidden; }
.kanban-skeleton-column {
  min-width: 256px; max-width: 256px;
  background: var(--gray-100); border-radius: 10px;
  height: 380px; position: relative; overflow: hidden;
}
.kanban-skeleton-column::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  background-size: 200% 100%;
  animation: pipeline-shimmer 1.4s infinite;
}
@keyframes pipeline-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ========== ASSET CLASS TABS (V5 .tabs equivalent — top row) ==========
   Renders ABOVE the PipelineBar stage filter tabs. Each tab has a colored
   dot prefix + label + mono count, with a brand-tinted underline on active.
   The dot color is set inline via --ac-color custom property per asset class. */
.asset-class-tabs {
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid var(--gray-200);
  padding: 0 20px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.asset-class-tabs::-webkit-scrollbar { height: 0; display: none; }

.ac-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.ac-tab:hover { color: var(--gray-700); }
.ac-tab.active {
  color: var(--gray-900);
  border-bottom-color: var(--ac-color, var(--brand));
  font-weight: 600;
}

.ac-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ac-color, var(--gray-400));
  flex-shrink: 0;
}

.ac-tab-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-400);
  margin-left: 1px;
}
.ac-tab.active .ac-tab-count { color: var(--ac-color, var(--brand)); }

.ac-tab-overview {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-400);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.ac-tab-overview:hover { color: var(--gray-700); }
.ac-tab-overview i { width: 10px; height: 10px; }

/* ========== SCROLLBARS ========== */
.kanban-board::-webkit-scrollbar,
.col-body::-webkit-scrollbar,
.pipeline-tabs::-webkit-scrollbar { height: 4px; width: 4px; }
.kanban-board::-webkit-scrollbar-thumb,
.col-body::-webkit-scrollbar-thumb,
.pipeline-tabs::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }
</content>
</invoke>