/* firebase-changelog-service/admin/views/competitors.css
   Competitors: the daily price and stock picture for each watched storefront.

   EVERY colour below is a theme.css custom property, with no literal hex
   anywhere. That is not a style preference here, it is the only thing that
   works: the SPA ships a light and a dark theme and a hardcoded colour is
   wrong in exactly one of them, silently, on whichever one the reviewer did
   not have open. The rule bites hardest on the sparkline, which is inline SVG
   built in competitors.js: its strokes and fills are classes defined at the
   bottom of this file rather than presentation attributes on the elements, so
   they follow the theme like everything else.

   Layout only. The card shell (.lf-card), the buttons (.btn*), the dialog
   (.adm-dialog*) and the skeleton shimmer (.lf-skel*) are shared primitives
   from theme.css and are reused verbatim, so this view sits in the same design
   system as Admin Users, Jobs and App Fleet. */

.cw-root {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-xl, 24px);
}

/* ---- top bar ---- */

.cw-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg, 16px);
  flex-wrap: wrap;
  margin-bottom: var(--space-md, 12px);
}
.cw-top h1 {
  font-size: var(--font-size-2xl, 24px);
  font-weight: 700;
  margin: 0;
}
.cw-top-note {
  margin-top: var(--space-xs, 4px);
  color: var(--color-muted);
  font-size: var(--font-size-sm, 12px);
  max-width: 62ch;
}
.cw-top-actions {
  display: flex;
  gap: var(--space-sm, 8px);
  flex-wrap: wrap;
}

.cw-run-status {
  min-height: 18px;
  margin-bottom: var(--space-sm, 8px);
  font-size: var(--font-size-sm, 12px);
  color: var(--color-muted);
}
.cw-run-status.is-error { color: var(--color-danger); }
.cw-run-status:empty { min-height: 0; margin-bottom: 0; }

/* ---- masthead ---- */

.cw-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg, 16px);
  flex-wrap: wrap;
}
.cw-eyebrow {
  font-size: var(--font-size-xs, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.cw-masthead h2 {
  margin: 2px 0 4px;
  font-size: var(--font-size-xl, 20px);
  font-weight: 700;
  color: var(--color-heading);
  text-wrap: balance;
}
.cw-masthead-sub {
  font-size: var(--font-size-sm, 12px);
  color: var(--color-muted);
}
.cw-watch-select {
  margin-top: var(--space-sm, 8px);
  min-width: 240px;
}
.cw-stamp {
  font-family: var(--lf-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: var(--font-size-xs, 11px);
  line-height: 1.8;
  color: var(--color-muted);
  text-align: right;
}
.cw-stamp b { color: var(--color-text); font-weight: 600; }

/* ---- the stale-watchlist banner ----
   Warning tone rather than danger: nothing is broken, the numbers on the page
   are real, they are just older than they look. Danger red is reserved for a
   failed run, so the two states stay tellable apart at a glance. */

.cw-banner {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius, 12px);
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  margin-bottom: var(--space-lg, 16px);
}
.cw-banner-title {
  font-weight: 700;
  font-size: var(--font-size-base, 14px);
  color: var(--color-warning);
  margin-bottom: var(--space-xs, 4px);
}
.cw-banner-body {
  font-size: var(--font-size-sm, 12px);
  line-height: 1.65;
  color: var(--color-text);
  max-width: 88ch;
}
.cw-banner-body .cw-chip { vertical-align: baseline; }

/* ---- stat tiles ---- */

.cw-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md, 12px);
  margin-bottom: var(--space-lg, 16px);
}
.cw-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 12px);
  padding: var(--space-lg, 16px) var(--space-lg, 16px) var(--space-md, 12px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--shadow);
}
.cw-tile-label {
  font-size: var(--font-size-xs, 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cw-tile-value {
  font-family: var(--lf-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.cw-tile-note {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-dim);
}

/* ---- section headings ---- */

.cw-h {
  font-size: var(--font-size-xs, 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-md, 12px);
  padding-bottom: var(--space-sm, 8px);
  border-bottom: 1px solid var(--color-border);
}
.cw-lede {
  margin: 0 0 var(--space-md, 12px);
  color: var(--color-muted);
  font-size: var(--font-size-sm, 12px);
  line-height: 1.6;
  max-width: 82ch;
}
.cw-note {
  margin-top: var(--space-sm, 8px);
  color: var(--color-text-dim);
  font-size: var(--font-size-xs, 11px);
  line-height: 1.6;
  max-width: 82ch;
}

/* ---- the stock and pricing table ---- */

.cw-scroll { overflow-x: auto; }

.cw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cw-table th {
  text-align: left;
  padding: 0 10px var(--space-sm, 8px);
  font-size: var(--font-size-xs, 11px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.cw-table td {
  padding: 9px 10px;
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}
.cw-table tbody tr:hover td { background: var(--color-surface-hover); }
.cw-table .cw-num { text-align: right; }
.cw-table td.cw-num,
.cw-table .cw-qty,
.cw-table .cw-was,
.cw-mono {
  font-family: var(--lf-mono, "JetBrains Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}
.cw-table tr.is-gone td { color: var(--color-text-dim); }

.cw-cell-name { min-width: 240px; }
.cw-cell-name a { color: var(--color-text); border-bottom: 1px solid var(--color-border-strong); }
.cw-cell-name a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.cw-variant {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-muted);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
}

.cw-cell-sku { white-space: nowrap; }
.cw-sku-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--lf-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: var(--font-size-sm, 12px);
  color: var(--color-text);
  border-bottom: 1px dashed var(--color-border-strong);
  cursor: pointer;
}
.cw-sku-btn:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.cw-sku-none { font-size: var(--font-size-sm, 12px); color: var(--color-text-dim); }
.cw-vendor {
  display: block;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-dim);
}

.cw-was { color: var(--color-text-dim); text-decoration: line-through; }
.cw-off {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-accent);
  margin-left: 4px;
}
.cw-qty { font-weight: 700; }

.cw-cell-bar { width: 190px; min-width: 120px; }
.cw-bar {
  display: block;
  height: 9px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill, 999px);
  overflow: hidden;
}
/* No count published (every watchlist row, and any Shopify variant whose stock
   badge vanished). A dashed empty track so it cannot be misread as the solid
   empty track a sold-out variant gets. */
.cw-bar--unknown {
  background: transparent;
  border-style: dashed;
  border-color: var(--color-border-strong);
}
.cw-bar-fill { display: block; height: 100%; }
.cw-bar-fill--good { background: var(--color-accent); }
.cw-bar-fill--warn { background: var(--color-warning); }
/* A sold-out row has zero width anyway; keeping the fill transparent means the
   empty track is the whole message rather than a one-pixel red sliver. */
.cw-bar-fill--crit { background: transparent; }
.cw-bar-fill--unk { background: var(--color-border-strong); }

.cw-delta { font-variant-numeric: tabular-nums; }
.cw-delta--flat, .cw-delta--none { color: var(--color-text-dim); }
.cw-delta--down, .cw-delta--sold { color: var(--color-danger); }
.cw-delta--up, .cw-delta--restock { color: var(--color-success); }

/* ---- chips ---- */

.cw-chip {
  display: inline-block;
  padding: 1px 8px;
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid;
  border-radius: var(--radius-pill, 999px);
}
.cw-chip--good { color: var(--color-success); border-color: var(--color-success-border); background: var(--color-success-bg); }
.cw-chip--warn { color: var(--color-warning); border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.cw-chip--crit { color: var(--color-danger); border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.cw-chip--unk { color: var(--color-muted); border-color: var(--color-border-strong); background: transparent; }

/* The watchlist badge deliberately does NOT reuse a state colour. It answers a
   different question from the state chip beside it (which mechanism produced
   this row, not what the shelf says), so it gets its own hue; sharing green or
   amber would read as a third opinion on stock. */
.cw-chip--observed {
  color: var(--color-purple);
  border-color: var(--color-purple-border);
  background: var(--color-purple-bg);
  margin-top: 3px;
}
.cw-chip--observed.is-stale {
  color: var(--color-warning);
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}
.cw-table tr.is-observed td { background: var(--color-surface-alt); }
.cw-table tr.is-observed:hover td { background: var(--color-surface-hover); }

/* ---- sparkline ----
   Classes, not presentation attributes, for the reason at the top of the file. */

.cw-trend { width: 100%; height: auto; display: block; }
.cw-grid { stroke: var(--color-border); stroke-width: 1; }
.cw-tick {
  fill: var(--color-text-dim);
  font-family: var(--lf-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10.5px;
}
/* fill-opacity rather than a pre-mixed soft token: the accent differs between
   the two themes and a fixed tint would only be right in one of them. */
.cw-area { fill: var(--color-accent); fill-opacity: 0.16; }
.cw-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cw-dot { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 2; }
.cw-dot--now { fill: var(--color-accent); }
/* A run with a watchlist observation folded into it. */
.cw-dot--marked { stroke: var(--color-purple); }
.cw-dot:hover { stroke-width: 3; }
.cw-endlabel {
  fill: var(--color-text);
  font-family: var(--lf-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 700;
}

/* ---- change log ---- */

.cw-log { list-style: none; margin: 0; padding: 0; }
.cw-log-row {
  display: grid;
  grid-template-columns: 68px 108px 1fr auto;
  gap: var(--space-md, 12px);
  align-items: center;
  padding: 9px 4px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
}
.cw-log-row:first-child { border-top: none; }
.cw-log-date { font-size: var(--font-size-xs, 11px); color: var(--color-text-dim); }
.cw-log-what { min-width: 0; }
.cw-log-what a { color: var(--color-text); border-bottom: 1px solid var(--color-border-strong); }
.cw-log-what a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.cw-log-what .cw-chip { margin-left: 6px; }
.cw-sku-inline {
  margin-left: 6px;
  font-family: var(--lf-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-dim);
}
.cw-log-delta { font-size: var(--font-size-sm, 12px); white-space: nowrap; }
.cw-log-delta .cw-mono { color: var(--color-text); }
.cw-arrow { margin: 0 7px; color: var(--color-text-dim); }

/* ---- SKU history dialog ---- */

.cw-hist-dialog { max-width: 620px; }
.cw-hist-dialog .adm-dialog-head h3 {
  font-family: var(--lf-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: var(--font-size-base, 14px);
}
.cw-hist-label {
  display: block;
  margin-top: 2px;
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-sm, 12px);
  font-weight: 400;
  color: var(--color-muted);
  max-width: 44ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-hist-chart { margin-bottom: var(--space-lg, 16px); }
.cw-hist-chart h4 {
  margin: 0 0 var(--space-sm, 8px);
  font-size: var(--font-size-xs, 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cw-hist-table { margin-top: var(--space-sm, 8px); }

/* ---- states ---- */

.cw-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.6;
}
.cw-empty-sm {
  padding: 10px 0;
  color: var(--color-text-dim);
  font-size: var(--font-size-sm, 12px);
}
.cw-error {
  padding: var(--space-md, 12px) var(--space-lg, 16px);
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: var(--radius, 12px);
  margin-bottom: var(--space-lg, 16px);
  display: flex;
  align-items: center;
  gap: var(--space-md, 12px);
  flex-wrap: wrap;
  font-size: 13px;
}

/* ---- narrow screens ---- */

@media (max-width: 900px) {
  .cw-tiles { grid-template-columns: repeat(2, 1fr); }
  .cw-stamp { text-align: left; }
}
@media (max-width: 640px) {
  .cw-root { padding: var(--space-lg, 16px); }
  .cw-log-row { grid-template-columns: 1fr; gap: var(--space-xs, 4px); }
  .cw-log-delta { white-space: normal; }
}