/* Devices > Overview (views/fleet-overview.js).

   Surfaces, text, borders and radii come from the shared theme tokens in
   theme.css. Only the chart palette is local: data-visualization colours are
   outside the cross-project theme sync on purpose (firebase-changelog-service
   CLAUDE.md), and each mode has its own validated steps rather than a flip.
   Dark is the admin default; html[data-theme="light"] overrides. */

.fo-root {
  --fo-fail: #e66767;
  --fo-ok: #3987e5;
  --fo-none: #4a5059;
  --fo-cur: #6da7ec;
  --fo-beh: #2a78d6;
  --fo-old: #184f95;
  --fo-unk: #5b6070;
  --fo-cur-t: #0b1a2e;
  --fo-beh-t: #ffffff;
  --fo-old-t: #d7e6fa;
  --fo-x1: #2a2a45;
  --fo-x2: #45456a;
  --fo-grid: rgba(255, 255, 255, 0.06);
  --fo-axis: rgba(255, 255, 255, 0.18);
  --fo-sel: color-mix(in srgb, var(--lf-accent) 8%, transparent);
  --fo-good: #8fbcf2;
  --fo-warn-bg: #2a2214;
  --fo-warn-bd: #5c4720;
  --fo-warn-t: #f0c36b;
  --fo-bad-t: #f29b9b;
  --fo-info-t: #a3aab5;
  --fo-beta-bg: #3a2c14;
  --fo-beta-t: #f3c77a;
  /* Versions over time: one hue per version band, newest = 1, in this order
     (the order is what keeps neighbouring bands apart for colour-blind
     readers: validated adjacent-pair, CVD worst 8.4, normal-vision worst 19.3
     on #22223a, every slot at 3:1 or more). 0 is "Other versions". */
  --fo-v1: #3987e5;
  --fo-v2: #d95926;
  --fo-v3: #199e70;
  --fo-v4: #c98500;
  --fo-v5: #d55181;
  --fo-v6: #008300;
  --fo-v7: #9085e9;
  --fo-v0: #5b6070;

  max-width: 1360px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.45;
}

html[data-theme="light"] .fo-root {
  --fo-fail: #d03b3b;
  --fo-ok: #2a78d6;
  --fo-none: #c3c7cd;
  --fo-cur: #184f95;
  --fo-beh: #2a78d6;
  --fo-old: #86b6ef;
  --fo-unk: #d9dce1;
  --fo-cur-t: #ffffff;
  --fo-beh-t: #ffffff;
  --fo-old-t: #0d366b;
  --fo-x1: #eef0f3;
  --fo-x2: #d9dce1;
  --fo-grid: #eef0f3;
  --fo-axis: #c3c7cd;
  --fo-sel: #f5f9fd;
  --fo-good: #1c5cab;
  --fo-warn-bg: #fffaf0;
  --fo-warn-bd: #f0d9a8;
  --fo-warn-t: #8a5300;
  --fo-bad-t: #a52a2a;
  --fo-info-t: #4b5563;
  --fo-beta-bg: #fff4e0;
  --fo-beta-t: #7a4a00;
  /* Same hues, stepped for the light surface (CVD worst 9.1, normal-vision
     19.6). Slots 3 to 5 are under 3:1 on white, so the chart carries direct
     labels, a tooltip and a table. */
  --fo-v1: #2a78d6;
  --fo-v2: #eb6834;
  --fo-v3: #1baf7a;
  --fo-v4: #eda100;
  --fo-v5: #e87ba4;
  --fo-v6: #008300;
  --fo-v7: #6250d6;
  --fo-v0: #9ca3af;
}

.fo-root a { color: var(--color-accent); text-decoration: none; }
.fo-root a:hover { text-decoration: underline; }
.fo-root a:focus-visible,
.fo-root button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

#fo-body { display: flex; flex-direction: column; gap: 16px; }

.fo-head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; justify-content: space-between; }
.fo-titles { display: flex; flex-direction: column; gap: 2px; }
.fo-titles h1 { font-size: 22px; font-weight: 700; margin: 0; color: var(--color-heading); }
.fo-crumb { font-size: 13px; }
.fo-muted { color: var(--color-muted); }
.fo-note { font-size: 12px; color: var(--color-muted); }
.fo-strong { font-weight: 600; }
.fo-right { text-align: right; }
.fo-mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 0.95em; }
.fo-good { color: var(--fo-good); font-weight: 600; }
.fo-bad { color: var(--fo-bad-t); font-weight: 600; }

/* What the numbers count: shown on every visit, so it is quiet; yellow only
   when the test-unit list could not load. */
.fo-banner {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 12px 8px 14px;
  background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text);
  border-radius: var(--radius-sm); font-size: 13px;
}
.fo-banner > span:first-of-type { flex: 1 1 320px; }
.fo-banner svg { flex: none; color: var(--color-muted); }
.fo-banner-warn { background: var(--fo-warn-bg); border-color: var(--fo-warn-bd); }
.fo-banner-warn svg { color: var(--fo-warn-t); }
.fo-banner-on { border-color: var(--color-accent); }
.fo-banner-acts { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }

/* "Ignore test units": a real switch (role="switch", aria-checked). */
.fo-switch {
  font: inherit; font-size: 13px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer;
  min-height: 32px; padding: 4px 10px 4px 6px; box-sizing: border-box; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
}
.fo-switch-track {
  position: relative; width: 30px; height: 18px; border-radius: 9px; flex: none;
  background: var(--color-border-strong); transition: background 0.15s;
}
.fo-switch-dot {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-surface); transition: transform 0.15s;
}
.fo-switch[aria-checked="true"] { border-color: var(--color-accent); }
.fo-switch[aria-checked="true"] .fo-switch-track { background: var(--color-accent); }
.fo-switch[aria-checked="true"] .fo-switch-dot { transform: translateX(12px); }
@media (prefers-reduced-motion: reduce) { .fo-switch-track, .fo-switch-dot { transition: none; } }

.fo-testpanel { margin-top: 10px; }
.fo-testpanel h3 { font-size: 13px; font-weight: 600; margin: 0; color: var(--color-heading); }
.fo-testpanel p { margin: 0; font-size: 13px; }
.fo-tp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 12px 28px; }
.fo-tp-cols section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fo-tp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fo-tp-list li {
  display: grid; grid-template-columns: minmax(130px, auto) minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 13px;
}
.fo-tp-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-tp-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fo-input {
  font: inherit; font-size: 13px; min-height: 32px; padding: 5px 9px; box-sizing: border-box; min-width: 0; flex: 1 1 140px;
  color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
.fo-input.fo-mono { flex: 0 1 190px; }
.fo-btn-sm { min-height: 28px; padding: 3px 9px; font-size: 12px; }
.fo-btn:disabled, .fo-input:disabled { opacity: 0.55; cursor: default; }

.fo-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 18px 20px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
}
.fo-card-head { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center; }
.fo-card-head h2 { font-size: 15px; font-weight: 600; margin: 0; color: var(--color-heading); }
.fo-card-head a { font-size: 13px; }

.fo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.fo-kpi { gap: 6px; }
.fo-lbl { font-size: 12px; font-weight: 600; color: var(--color-muted); }
.fo-num { font-size: 30px; font-weight: 700; line-height: 1.05; color: var(--color-heading); }
.fo-kpi-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fo-spark { overflow: visible; flex: none; }
.fo-minibar { display: flex; gap: 2px; height: 8px; }
.fo-minibar span { border-radius: 2px; min-width: 2px; }
.fo-relstrip { display: flex; gap: 3px; align-items: flex-end; height: 32px; }
.fo-rel { width: 6px; background: var(--color-accent); border-radius: 2px; }
.fo-rel-none { height: 2px; background: var(--fo-axis); }

.fo-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.fo-row-top { align-items: flex-start; }
.fo-wide { flex: 2 1 620px; }
.fo-narrow { flex: 1 1 360px; }
.fo-half { flex: 1 1 520px; }

.fo-c { background: var(--fo-cur); color: var(--fo-cur-t); }
.fo-r { background: var(--fo-beh); color: var(--fo-beh-t); }
.fo-o { background: var(--fo-old); color: var(--fo-old-t); }
.fo-u { background: var(--fo-unk); color: var(--color-text); }
.fo-b { background: repeating-linear-gradient(135deg, var(--fo-cur) 0 5px, var(--fo-beh) 5px 8px); color: var(--fo-cur-t); }
.fo-x { background: repeating-linear-gradient(135deg, var(--fo-x1) 0 5px, var(--fo-x2) 5px 8px); color: var(--color-text); }

.fo-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--color-muted); }
.fo-lg { display: inline-flex; gap: 6px; align-items: center; }
.fo-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.fo-mark-sw { color: var(--color-accent); font-size: 10px; }

.fo-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.fo-seg { display: inline-flex; }
.fo-btn {
  font: inherit; font-size: 13px; padding: 5px 11px; min-height: 32px; box-sizing: border-box; cursor: pointer;
  border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-sm);
}
.fo-seg .fo-btn { border-radius: 0; margin-left: -1px; }
.fo-seg .fo-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.fo-seg .fo-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.fo-btn.on { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); position: relative; }

.fo-chart { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding-top: 8px; }
.fo-yaxis { position: relative; font-size: 11px; color: var(--color-muted); }
.fo-yaxis span { position: absolute; right: 0; }
.fo-plot { min-width: 0; }
.fo-gridwrap { position: relative; }
.fo-gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--fo-grid); }
.fo-bars { position: relative; display: flex; gap: 4px; align-items: flex-end; border-bottom: 1px solid var(--fo-axis); }
.fo-col { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; height: 100%; min-width: 0; }
.fo-segm { display: block; border-radius: 2px; }
.fo-col .fo-segm:last-of-type { border-radius: 4px 4px 2px 2px; }
.fo-seg-empty { display: block; height: 2px; background: var(--fo-axis); border-radius: 1px; }
.fo-barlabel { font-size: 11px; font-weight: 600; text-align: center; color: var(--color-text); }
.fo-xlabels, .fo-marks { display: flex; gap: 4px; font-size: 11px; color: var(--color-muted); padding-top: 6px; }
.fo-xlabels span, .fo-marks span { flex: 1; text-align: center; min-width: 0; white-space: nowrap; overflow: visible; }
.fo-marks { padding-top: 2px; font-size: 10px; color: var(--color-accent); font-weight: 600; line-height: 1.25; }
.fo-mark em { display: block; font-style: normal; }
.fo-sums {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 12px;
}
.fo-sums div { display: flex; flex-direction: column; }
.fo-sums strong { font-size: 15px; }

.fo-roll {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 46px; gap: 12px; align-items: center;
  font-size: 13px; padding: 9px 0; border-bottom: 1px solid var(--color-border);
}
.fo-roll:last-child { border-bottom: 0; }
.fo-roll-title { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.fo-roll-title .fo-note { font-weight: 400; }
.fo-roll-bar { display: flex; flex-direction: column; gap: 4px; }
.fo-roll-pct { text-align: right; font-weight: 600; }
.fo-track { display: flex; height: 8px; background: var(--color-surface-alt); border-radius: 4px; overflow: hidden; }
.fo-track span { display: block; height: 8px; }
.fo-pill { display: inline-flex; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; background: var(--color-surface-alt); color: var(--color-text); }
.fo-pill-beta { background: var(--fo-beta-bg); color: var(--fo-beta-t); }

.fo-frow { display: grid; grid-template-columns: 28px 110px minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; }
.fo-frow-head { font-size: 11px; color: var(--color-muted); font-weight: 600; padding-top: 0; }
.fo-frow.fo-open { background: var(--fo-sel); margin: 0 -8px; padding: 5px 8px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.fo-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-chev {
  font: inherit; border: 0; background: none; color: var(--color-muted); cursor: pointer;
  width: 32px; height: 32px; margin: -4px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
}
.fo-chev:hover { background: var(--color-surface-hover); color: var(--color-text); }
.fo-fbar { display: flex; gap: 2px; height: 22px; }
.fo-fbar span { display: flex; align-items: center; padding-left: 6px; font-size: 11px; font-weight: 600; border-radius: 3px; overflow: hidden; min-width: 2px; }
.fo-fdetail { background: var(--fo-sel); margin: -6px -8px 0; padding: 8px 8px 12px 46px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); display: flex; flex-direction: column; gap: 8px; }
.fo-fdetail-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; font-size: 12px; }
.fo-fdetail-foot a { font-weight: 600; }

.fo-strip { display: flex; gap: 3px; height: 56px; }
.fo-strip-compact { height: 28px; gap: 2px; }
.fo-vb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3px; overflow: hidden; white-space: nowrap;
  border-radius: 4px; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.25;
}
.fo-strip-compact .fo-vb { font-size: 10.5px; border-radius: 3px; }
.fo-vb b { font-family: inherit; font-size: 13px; }
.fo-strip-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-muted); }

.fo-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.fo-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-surface-alt); font-size: 12px; }
.fo-chip b { font-weight: 600; }
.fo-chipx {
  display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--color-accent-bg); font-size: 13px; font-weight: 600; min-height: 32px; box-sizing: border-box;
}
.fo-att { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.fo-att:last-of-type { border-bottom: 0; }
.fo-att-icon { display: flex; padding-top: 1px; }
.fo-tone-bad { color: var(--fo-bad-t); }
.fo-tone-warn { color: var(--fo-warn-t); }
.fo-tone-info { color: var(--fo-info-t); }
.fo-att-text { display: flex; flex-direction: column; min-width: 0; }
.fo-att-sub { font-size: 12px; }
.fo-more { padding-top: 6px; }

.fo-tablewrap { overflow-x: auto; }
.fo-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.fo-table th { text-align: left; font-weight: 600; color: var(--color-muted); font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.fo-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.fo-table tr:last-child td { border-bottom: 0; }
.fo-dur { display: grid; grid-template-columns: minmax(60px, 1fr) 56px; gap: 8px; align-items: center; }

.fo-empty { color: var(--color-muted); font-size: 13px; padding: 8px 0; }
.fo-error { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-danger-bg); border: 1px solid var(--color-danger-border); color: var(--color-text); font-size: 13px; }
.fo-skel { display: flex; flex-direction: column; gap: 8px; }

/* Versions over time (a product's page). The bands are one SVG stretched to
   the plot; a 1.5px stroke in the card colour is the gap between them. */
.fo-hist { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding-top: 8px; }
.fo-hist-main { min-width: 0; }
.fo-hist-plot { position: relative; border-bottom: 1px solid var(--fo-axis); outline: none; cursor: crosshair; }
.fo-hist-plot:focus-visible { box-shadow: 0 0 0 2px var(--color-accent); border-radius: 2px; }
.fo-hist-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.fo-hist-band { stroke: var(--color-surface); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fo-hist-labels { position: relative; width: 76px; font-size: 11px; color: var(--color-text); }
.fo-hist-labels span { position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
.fo-hist-labels b { font-family: inherit; }
.fo-hist-x, .fo-hist-marks { position: relative; height: 18px; font-size: 11px; color: var(--color-muted); }
.fo-hist-x { margin-top: 4px; }
.fo-hist-x span, .fo-hist-mark { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.fo-hist-x span.fo-first { transform: none; }
.fo-hist-x span.fo-last { transform: translateX(-100%); }
.fo-hist-marks { height: 14px; margin-top: 2px; }
.fo-hist-mark { color: var(--color-accent); font-size: 10px; cursor: help; }
.fo-hist-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--color-text); opacity: 0.55; pointer-events: none; display: none; }
.fo-hist-tip {
  position: absolute; top: 6px; z-index: 2; display: none; flex-direction: column; gap: 3px; min-width: 150px;
  padding: 8px 10px; font-size: 12px; color: var(--color-text); pointer-events: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.fo-tip-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.fo-tip-row b { font-variant-numeric: tabular-nums; }
.fo-tip-total { border-top: 1px solid var(--color-border); padding-top: 3px; margin-top: 1px; }
.fo-hist-foot { font-size: 12px; }
.fo-hist-table summary { cursor: pointer; font-size: 13px; color: var(--color-accent); }
.fo-hist-table .fo-table { margin-top: 8px; }
.fo-hist-table th[scope="row"] { font-weight: 500; white-space: nowrap; }
.fo-td-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 640px) {
  .fo-hist { grid-template-columns: 30px minmax(0, 1fr); }
  .fo-hist-labels, .fo-hist-x .fo-tick-alt { display: none; }
}

@media (max-width: 640px) {
  .fo-root { padding: 16px; }
  .fo-roll { grid-template-columns: minmax(0, 1fr) 46px; }
  .fo-roll-bar { grid-column: 1 / -1; grid-row: 2; }
  .fo-marks em { display: none; }
  .fo-frow { grid-template-columns: 28px 84px minmax(0, 1fr) 40px; }
  .fo-bars, .fo-xlabels, .fo-marks { gap: 2px; }
}