/* Maintenance Dashboard — Core Web Vitals tab (site panel)
 *
 * Every colour the SVG charts use is declared here, not in cwv.js: the house
 * rule is variables only, and a graph that hardcodes its stroke cannot follow
 * the palette. The six series colours are reused by the per-URL chart, the
 * swatches in its table and the sparklines, so a row and its line always match.
 */

:root {
  --md-cwv-good: #16a34a;
  --md-cwv-good-bg: #dcfce7;
  --md-cwv-attention: #d97706;
  --md-cwv-attention-bg: #fef3c7;
  --md-cwv-critical: #dc2626;
  --md-cwv-critical-bg: #fee2e2;
  --md-cwv-neutral: #6b7280;
  --md-cwv-neutral-bg: #f3f4f6;

  /* Series palette — index 0..5, referenced by [data-series]. */
  --md-cwv-s0: #4f46e5;
  --md-cwv-s1: #0891b2;
  --md-cwv-s2: #d97706;
  --md-cwv-s3: #16a34a;
  --md-cwv-s4: #db2777;
  --md-cwv-s5: #7c3aed;

  --md-cwv-grid: #e5e7eb;
  --md-cwv-ref: #9ca3af;
}

.md-cwv-loading {
  padding: 28px 0;
  text-align: center;
  color: var(--md-text-muted);
  font-size: 13px;
}

.md-cwv-hint {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--md-text-muted);
}

.md-cwv-warn {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--md-cwv-attention);
  background: var(--md-cwv-attention-bg);
  border-radius: var(--md-radius-sm);
  font-size: 12px;
  line-height: 1.6;
}

/* ── Empty / connect states ─────────────────────────────────────────────── */

.md-cwv-empty {
  padding: 24px 22px;
  border: 1px dashed var(--md-border);
  border-radius: var(--md-radius);
  background: var(--md-surface);
}

.md-cwv-empty h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.md-cwv-empty > p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--md-text-secondary);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.md-cwv-header {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
}

.md-cwv-dials {
  display: flex;
  gap: 12px;
}

.md-cwv-dial {
  position: relative;
  min-width: 104px;
  padding: 12px 14px;
  border-radius: var(--md-radius);
  border: 1px solid var(--md-border);
  background: var(--md-cwv-neutral-bg);
  text-align: center;
}

.md-cwv-dial-good      { background: var(--md-cwv-good-bg);      border-color: var(--md-cwv-good); }
.md-cwv-dial-attention { background: var(--md-cwv-attention-bg); border-color: var(--md-cwv-attention); }
.md-cwv-dial-critical  { background: var(--md-cwv-critical-bg);  border-color: var(--md-cwv-critical); }

.md-cwv-dial-value {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--md-text-primary);
}

.md-cwv-dial-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--md-text-secondary);
}

.md-cwv-dial-target {
  display: block;
  font-size: 10px;
  color: var(--md-text-muted);
}

.md-cwv-headline {
  flex: 1 1 320px;
  min-width: 260px;
}

.md-cwv-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 10px;
}

.md-cwv-pill-good      { color: var(--md-cwv-good);      background: var(--md-cwv-good-bg); }
.md-cwv-pill-attention { color: var(--md-cwv-attention); background: var(--md-cwv-attention-bg); }
.md-cwv-pill-critical  { color: var(--md-cwv-critical);  background: var(--md-cwv-critical-bg); }
.md-cwv-pill-neutral   { color: var(--md-cwv-neutral);   background: var(--md-cwv-neutral-bg); }

.md-cwv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 8px;
}

.md-cwv-fact dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--md-text-muted);
}

.md-cwv-fact dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--md-text-primary);
}

.md-cwv-fact dd small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--md-text-muted);
}

/* Colour on direction, never on the sign of the value. */
.md-cwv-delta {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
}

.md-cwv-delta-up      { color: var(--md-cwv-good);      background: var(--md-cwv-good-bg); }
.md-cwv-delta-down    { color: var(--md-cwv-critical);  background: var(--md-cwv-critical-bg); }
.md-cwv-delta-flat,
.md-cwv-delta-unknown { color: var(--md-cwv-neutral);   background: var(--md-cwv-neutral-bg); }

/* Inside a table cell the chip is inline, not pinned to a dial corner. */
.md-cwv-avg-table .md-cwv-delta { position: static; }

/* ── Run bar and progress ───────────────────────────────────────────────── */

.md-cwv-runbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.md-cwv-progress {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  background: var(--md-surface);
}

.md-cwv-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--md-cwv-neutral-bg);
  overflow: hidden;
}

.md-cwv-progress-bar span {
  display: block;
  height: 100%;
  background: var(--md-accent);
  transition: width .4s ease;
}

.md-cwv-progress-text {
  margin: 8px 0 4px;
  font-size: 12px;
  color: var(--md-text-secondary);
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.md-cwv-section {
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  background: var(--md-surface);
}

.md-cwv-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.md-cwv-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.md-cwv-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.md-cwv-control {
  width: auto;
  min-width: 108px;
  font-size: 12px;
  padding: 4px 8px;
}

.md-cwv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.md-cwv-chip {
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid var(--md-border);
  border-radius: 999px;
  background: var(--md-surface);
  color: var(--md-text-secondary);
  cursor: pointer;
}

.md-cwv-chip:hover { background: var(--md-accent-light); }

.md-cwv-chip.active {
  background: var(--md-accent);
  border-color: var(--md-accent);
  color: #fff;
}

.md-cwv-caption {
  margin: 12px 0 4px;
  font-size: 11px;
  color: var(--md-text-muted);
}

/* ── Charts ─────────────────────────────────────────────────────────────── */

.md-cwv-chart {
  width: 100%;
  overflow: hidden;
}

.md-cwv-svg {
  width: 100%;
  height: 240px;
  display: block;
}

.md-cwv-chart-bars .md-cwv-svg { height: 90px; }

.md-cwv-svg-grid {
  stroke: var(--md-cwv-grid);
  stroke-width: 1;
}

.md-cwv-svg-ref {
  stroke: var(--md-cwv-ref);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.md-cwv-svg-reflabel {
  fill: var(--md-cwv-ref);
  font-size: 9px;
}

.md-cwv-svg-axis {
  fill: var(--md-text-muted);
  font-size: 10px;
}

.md-cwv-svg-empty {
  fill: var(--md-text-muted);
  font-size: 12px;
}

.md-cwv-svg-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.md-cwv-svg-dot { stroke: var(--md-surface); stroke-width: 1; }

.md-cwv-svg-bar { fill: var(--md-accent); opacity: .75; }
.md-cwv-svg-bar.is-empty { fill: var(--md-cwv-grid); }

/* Series colours, shared by lines, dots, legend keys and table swatches. */
.md-cwv-svg-line[data-series="a"], .md-cwv-svg-line[data-series="0"] { stroke: var(--md-cwv-s0); }
.md-cwv-svg-line[data-series="b"], .md-cwv-svg-line[data-series="1"] { stroke: var(--md-cwv-s1); }
.md-cwv-svg-line[data-series="2"] { stroke: var(--md-cwv-s2); }
.md-cwv-svg-line[data-series="3"] { stroke: var(--md-cwv-s3); }
.md-cwv-svg-line[data-series="4"] { stroke: var(--md-cwv-s4); }
.md-cwv-svg-line[data-series="5"] { stroke: var(--md-cwv-s5); }

.md-cwv-svg-dot[data-series="a"], .md-cwv-svg-dot[data-series="0"],
.md-cwv-svg-key[data-series="a"], .md-cwv-svg-key[data-series="0"] { fill: var(--md-cwv-s0); }
.md-cwv-svg-dot[data-series="b"], .md-cwv-svg-dot[data-series="1"],
.md-cwv-svg-key[data-series="b"], .md-cwv-svg-key[data-series="1"] { fill: var(--md-cwv-s1); }
.md-cwv-svg-dot[data-series="2"], .md-cwv-svg-key[data-series="2"] { fill: var(--md-cwv-s2); }
.md-cwv-svg-dot[data-series="3"], .md-cwv-svg-key[data-series="3"] { fill: var(--md-cwv-s3); }
.md-cwv-svg-dot[data-series="4"], .md-cwv-svg-key[data-series="4"] { fill: var(--md-cwv-s4); }
.md-cwv-svg-dot[data-series="5"], .md-cwv-svg-key[data-series="5"] { fill: var(--md-cwv-s5); }

/* ── URL table ──────────────────────────────────────────────────────────── */

.md-cwv-url-table tbody tr { cursor: pointer; }
.md-cwv-url-table tbody tr:hover { background: var(--md-table-hover); }
.md-cwv-url-table tbody tr.active { background: var(--md-accent-light); }

.md-cwv-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  background: var(--md-cwv-grid);
}

.md-cwv-url-row.active .md-cwv-swatch[data-i="0"] { background: var(--md-cwv-s0); }
.md-cwv-url-row.active .md-cwv-swatch[data-i="1"] { background: var(--md-cwv-s1); }
.md-cwv-url-row.active .md-cwv-swatch[data-i="2"] { background: var(--md-cwv-s2); }
.md-cwv-url-row.active .md-cwv-swatch[data-i="3"] { background: var(--md-cwv-s3); }
.md-cwv-url-row.active .md-cwv-swatch[data-i="4"] { background: var(--md-cwv-s4); }
.md-cwv-url-row.active .md-cwv-swatch[data-i="5"] { background: var(--md-cwv-s5); }

.md-cwv-spark { width: 100px; }
.md-cwv-spark-svg { width: 90px; height: 22px; display: block; }

.md-table-scroll { overflow-x: auto; }

/* A period nobody audited is a gap, not a zero. */
.md-cwv-gap td { color: var(--md-text-muted); background: var(--md-border-light); }

.md-cwv-score-good      { color: var(--md-cwv-good);      font-weight: 600; }
.md-cwv-score-attention { color: var(--md-cwv-attention); font-weight: 600; }
.md-cwv-score-critical  { color: var(--md-cwv-critical);  font-weight: 600; }
.md-cwv-score-none      { color: var(--md-text-muted); }

.md-cwv-status {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  text-transform: capitalize;
}

.md-cwv-status-complete  { color: var(--md-cwv-good);      background: var(--md-cwv-good-bg); }
.md-cwv-status-running,
.md-cwv-status-pending   { color: var(--md-cwv-attention); background: var(--md-cwv-attention-bg); }
.md-cwv-status-failed,
.md-cwv-status-cancelled { color: var(--md-cwv-critical);  background: var(--md-cwv-critical-bg); }

.md-cwv-run-detail { margin-top: 12px; }

/* ── Configure ──────────────────────────────────────────────────────────── */

.md-cwv-configure {
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  background: var(--md-surface);
  padding: 12px 14px;
}

.md-cwv-configure summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.md-cwv-configure .md-cwv-config { margin-top: 14px; }

.md-cwv-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.md-cwv-config-actions .md-cwv-hint { flex: 1 1 220px; }

.md-cwv-saved {
  font-size: 12px;
  color: var(--md-cwv-good);
}

.md-cwv-tracking .md-cwv-facts { margin-bottom: 8px; }

/* ── Fleet schedule (Settings pane) ─────────────────────────────────────── */

.md-cwv-sched { margin-bottom: 24px; }

.md-cwv-sched-title { margin: 0 0 12px; }

.md-cwv-sched-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--md-text-secondary);
}

.md-cwv-sched-note-lead { margin-bottom: 14px; }

.md-cwv-sched-table .md-cwv-sched-field {
  width: auto;
  min-width: 96px;
  font-size: 12px;
  padding: 4px 8px;
}

.md-cwv-sub {
  display: block;
  font-size: 11px;
  color: var(--md-text-muted);
}

.md-cwv-sched-flag {
  font-size: 11px;
  color: var(--md-status-completed);
}

.md-cwv-sched-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.md-cwv-hint-inline { display: inline; }

.md-cwv-sweep-result { margin-top: 10px; }