/**
 * Shared component styles (Sprint 7 set) — tokens only (gate 2).
 */

/* Buttons do NOT inherit color/font from the shell — the UA paints them
   black/system-font, which vanishes on dark surfaces (ADR-030). Inherit by
   default; component classes override intentionally. */
button {
  color: inherit;
  font: inherit;
}

/* ── KPI cards ─────────────────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--kpi-card-min-width), 1fr));
  gap: var(--space-4);
}

.kpi-card {
  background: var(--kpi-card-bg);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--kpi-card-radius);
  padding: var(--kpi-card-pad);
  cursor: pointer;
  text-align: left;
}

.kpi-card__label { color: var(--color-text-muted); font-size: var(--type-label-md-size); }
.kpi-card__value { font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-lh); }
.kpi-card__value--missing { color: var(--color-text-muted); }
.kpi-card__badge { font-size: var(--type-label-sm-size); border-radius: var(--chip-radius); padding: 0 var(--space-2); }
.kpi-card__badge--estimated { background: var(--color-warning-surface); color: var(--color-text-primary); }
.kpi-card__badge--low { background: var(--color-info-surface); color: var(--color-text-secondary); }

/* ── Chips ─────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--chip-bg);
  color: var(--chip-fg);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--chip-radius);
  padding: var(--space-1) var(--space-3);
  font-size: var(--type-label-md-size);
  cursor: pointer;
}

.chip--freshness { cursor: default; }
.chip--alert:hover { background: var(--chip-active-bg); color: var(--chip-active-fg); }

/* ── Skeletons (Loading) ───────────────────────────────────────────────── */
.skeleton {
  background: var(--skeleton-base);
  border-radius: var(--radius-md);
  animation: skeleton-sheen 1.2s ease-in-out infinite alternate;
}
.skeleton--kpi { height: 96px; }
.skeleton--band { height: 180px; }
@keyframes skeleton-sheen { to { background: var(--skeleton-sheen); } }

/* ── Empty / error states ──────────────────────────────────────────────── */
.state-card {
  border: 1px dashed var(--color-outline);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
}
.state-card__title { font-size: var(--type-title-lg-size); margin: 0 0 var(--space-2); }
.state-card__ref { color: var(--color-text-muted); font-size: var(--type-body-sm-size); font-family: var(--font-family-mono); }
.state-card--error { border-color: var(--color-critical); background: var(--color-critical-surface); }
.state-card__retry {
  margin-top: var(--space-3);
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  border: none; border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

/* ── Action preview ────────────────────────────────────────────────────── */
.action-preview__item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-outline-variant);
}
.band-pill { font-size: var(--type-label-sm-size); border-radius: var(--chip-radius); padding: 0 var(--space-2); }
.band-pill--critical { background: var(--color-critical-surface); color: var(--color-critical-text); }
.band-pill--high-impact { background: var(--color-warning-surface); color: var(--color-text-primary); }
.band-pill--optimize { background: var(--color-info-surface); color: var(--color-text-secondary); }

/* ── Chart ─────────────────────────────────────────────────────────────── */
.chart { width: 100%; height: auto; }
.chart__line { fill: none; stroke-width: 2; }
.chart__line--series-1 { stroke: var(--chart-series-1); }
.chart__line--series-2 { stroke: var(--chart-series-2); }
.chart__line--series-3 { stroke: var(--chart-series-3); }
.chart__dot--series-1 { fill: var(--chart-series-1); }
.chart__dot--series-2 { fill: var(--chart-series-2); }
.chart__dot--series-3 { fill: var(--chart-series-3); }

/* ── BHS explainability sheet ──────────────────────────────────────────── */
.bhs-sheet__score { font-size: var(--type-headline-lg-size); margin: var(--space-3) 0; }
.bhs-dimension { margin-bottom: var(--space-3); }
.bhs-dimension__label { display: flex; justify-content: space-between; font-size: var(--type-body-md-size); }
.bhs-dimension__track { background: var(--skeleton-base); border-radius: var(--chip-radius); height: var(--space-2); overflow: hidden; }
.bhs-dimension__fill { background: var(--color-primary); height: 100%; }
.bhs-dimension__fill--insufficient { background: var(--color-outline); }
.bhs-dimension__reasons { color: var(--color-text-muted); font-size: var(--type-body-sm-size); }

/* ── Placeholder destinations ──────────────────────────────────────────── */
.placeholder { padding: var(--space-6); color: var(--color-text-secondary); }
.placeholder__title { margin: 0 0 var(--space-2); }
.placeholder__note { color: var(--color-text-muted); }

/* ── Data Table organism (Sprint 8) ────────────────────────────────────── */
.data-table__toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.data-table__table { width: 100%; border-collapse: collapse; }
.data-table__head { position: sticky; top: 0; background: var(--table-header-bg); }
.data-table__th {
  text-align: left;
  padding: var(--space-2) var(--table-cell-pad-x);
  font-size: var(--type-label-md-size);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-outline);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.data-table__th--numeric, .data-table__td--numeric { text-align: right; font-family: var(--font-family-mono); }
.data-table__th--select, .data-table__td--select { width: var(--space-6); cursor: default; }
.data-table__th--sorted-asc::after { content: ' ▲'; }
.data-table__th--sorted-desc::after { content: ' ▼'; }
.data-table__row { height: var(--table-row-height); cursor: pointer; }
.data-table__row:hover { background: var(--color-surface-02); }
.data-table__row--selected { background: var(--nav-active-bg); }
.data-table__td {
  padding: var(--space-1) var(--table-cell-pad-x);
  border-bottom: 1px solid var(--color-outline-variant);
  font-size: var(--type-body-md-size);
}
.data-table__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
}
.data-table__count { margin-right: auto; color: var(--color-text-muted); font-size: var(--type-body-sm-size); }

/* Score pills (Molecular spec) */
.score-pill {
  display: inline-block;
  min-width: var(--space-6);
  text-align: center;
  border-radius: var(--chip-radius);
  padding: 0 var(--space-2);
  font-size: var(--type-label-md-size);
  font-family: var(--font-family-mono);
}
.score-pill--good { background: var(--color-healthy-surface); color: var(--color-healthy-text); }
.score-pill--warn { background: var(--color-warning-surface); color: var(--color-text-primary); }
.score-pill--bad { background: var(--color-critical-surface); color: var(--color-critical-text); }
.score-pill--none { background: var(--chip-bg); color: var(--color-text-muted); }

/* Cohort-basis chip: basis + confidence, low-confidence never hidden */
.cohort-chip { font-size: var(--type-label-sm-size); }
.cohort-chip--low { border-color: var(--color-warning); color: var(--color-warning-text); }

/* Filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
}
.filter-bar__group { display: flex; gap: var(--space-1); align-items: center; }
.filter-bar__label { color: var(--color-text-muted); font-size: var(--type-label-md-size); }
.filter-bar__select {
  background: var(--color-surface-01);
  color: var(--color-text-primary);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  font: inherit;
}
.filter-bar__spacer { flex: 1; }

/* Selection banner (transient — promote-to-filter affordance) */
.selection-banner {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  background: var(--color-info-surface);
  border: 1px solid var(--banner-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

/* Item detail side-sheet tabs */
.item-sheet__tabs { display: flex; gap: var(--space-1); margin: var(--space-3) 0; }
.item-sheet__tab {
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-01);
  border-radius: var(--chip-radius);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-size: var(--type-label-md-size);
}
.item-sheet__tab--active { background: var(--chip-active-bg); color: var(--chip-active-fg); }
.item-sheet__field { display: flex; justify-content: space-between; padding: var(--space-1) 0; font-size: var(--type-body-md-size); }
.item-sheet__field-label { color: var(--color-text-muted); }

/* Segment bar chart (SVG fallback renderer) */
.chart__bar { fill: var(--chart-series-1); cursor: pointer; }
.chart__bar--dimmed { fill: var(--chart-grid); }
.chart__bar:focus { outline: 2px solid var(--color-primary); }
.chart__bar-label { fill: var(--chart-axis); font-size: var(--type-label-sm-size); }

/* ── Global search overlay (⌘K) ────────────────────────────────────────── */
.search-scrim {
  position: fixed; inset: 0;
  background: var(--color-scrim);
  z-index: var(--z-modal);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12vh;
}
/* An author `display` overrides the UA `[hidden]` rule — restore hiding so
   Esc / click-outside actually close the overlay. */
.search-scrim[hidden] { display: none; }
.search-panel {
  width: min(640px, 92vw);
  background: var(--color-surface-01);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.search-panel__input {
  width: 100%; box-sizing: border-box;
  padding: var(--space-4);
  border: none; border-bottom: 1px solid var(--color-outline-variant);
  background: var(--color-surface-01); color: var(--color-text-primary);
  font: inherit; font-size: var(--type-title-md-size);
}
.search-panel__input:focus { outline: none; }
.search-panel__results { max-height: 60vh; overflow-y: auto; padding: var(--space-2); }
.search-panel__label {
  color: var(--color-text-muted);
  font-size: var(--type-label-sm-size);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.search-hit {
  display: block; width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3);
  background: none; border: none; border-radius: var(--radius-md);
  color: var(--color-text-primary); cursor: pointer;
  font: inherit;
}
.search-hit:hover { background: var(--color-surface-02); }

/* ── Editable cell (ADR-044) ───────────────────────────────────────────── */
.data-table__td--editable { cursor: text; }
.data-table__edit-hint { color: var(--color-text-muted); font-size: var(--type-label-sm-size); margin-left: var(--space-1); opacity: 0.5; }
.data-table__td--editable:hover .data-table__edit-hint { opacity: 1; }
.data-table__edit-input {
  width: 100%; box-sizing: border-box;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface-01); color: var(--color-text-primary);
  font: inherit; font-family: var(--font-family-mono);
}
.data-table__edit-input:focus { outline: none; }