/* Synthology.Shared.Web — synth-analytics.css  (RI-2026-333 / DCR-2026-1888)
 * Theme-aware styling for the shared Analytics page (synth-analytics.js). Uses the product brand
 * accent via --sa-accent (set from the summary's brand_hex). Non-device per FD&C Act §520(o)(1)(D). */
#synth-analytics-root {
  --sa-accent: #0074D2;
  --sa-card-bg: #ffffff;
  --sa-border: #e2e6ea;
  --sa-text: #1f2733;
  --sa-muted: #6b7684;
  --sa-tile-bg: #f6f8fa;
  --sa-bar-track: #eef1f4;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--sa-text);
  padding: 4px 2px 40px;
}
@media (prefers-color-scheme: dark) {
  #synth-analytics-root {
    --sa-card-bg: #161b22; --sa-border: #2a323c; --sa-text: #e6edf3;
    --sa-muted: #8b98a5; --sa-tile-bg: #1c232b; --sa-bar-track: #242c35;
  }
}
:root[data-theme="dark"] #synth-analytics-root {
  --sa-card-bg: #161b22; --sa-border: #2a323c; --sa-text: #e6edf3;
  --sa-muted: #8b98a5; --sa-tile-bg: #1c232b; --sa-bar-track: #242c35;
}
:root[data-theme="light"] #synth-analytics-root {
  --sa-card-bg: #ffffff; --sa-border: #e2e6ea; --sa-text: #1f2733;
  --sa-muted: #6b7684; --sa-tile-bg: #f6f8fa; --sa-bar-track: #eef1f4;
}
#synth-analytics-root.sa-loading { opacity: .55; }
.sa-head h1 { font-size: 20px; margin: 0 0 2px; }
.sa-meta { color: var(--sa-muted); font-size: 12px; margin-bottom: 14px; }
.sa-rangebar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.sa-spacer { flex: 1 1 auto; }
.sa-range, .sa-btn {
  font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 6px;
  border: 1px solid var(--sa-border); background: var(--sa-card-bg); color: var(--sa-text); cursor: pointer;
}
.sa-range:hover, .sa-btn:hover { border-color: var(--sa-accent); }
.sa-range-on { background: var(--sa-accent); color: #fff; border-color: var(--sa-accent); }
.sa-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.sa-card { background: var(--sa-card-bg); border: 1px solid var(--sa-border); border-radius: 10px; padding: 14px 16px 16px; }
.sa-card.sa-live { border-left: 3px solid var(--sa-accent); }
.sa-card-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.sa-card-hdr h2 { font-size: 14px; margin: 0; font-weight: 600; }
.sa-actions { display: flex; gap: 6px; }
.sa-actions .sa-btn { padding: 3px 9px; font-size: 11px; }
.sa-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.sa-tile { background: var(--sa-tile-bg); border-radius: 8px; padding: 12px; text-align: center; }
.sa-tile-val { font-size: 22px; font-weight: 700; color: var(--sa-accent); }
.sa-tile-unit { font-size: 12px; font-weight: 600; color: var(--sa-muted); }
.sa-tile-label { font-size: 11px; color: var(--sa-muted); margin-top: 4px; }
.sa-tone-warn .sa-tile-val { color: #d97706; }
.sa-tone-bad .sa-tile-val { color: #dc2626; }
.sa-tone-good .sa-tile-val { color: #16a34a; }
.sa-table-wrap { overflow-x: auto; }
.sa-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sa-table th, .sa-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--sa-border); white-space: nowrap; }
.sa-table th { color: var(--sa-muted); font-weight: 600; }
.sa-empty { color: var(--sa-muted); font-size: 12px; padding: 10px 2px; }
.sa-bar-wrap { position: relative; background: var(--sa-bar-track); border-radius: 4px; min-width: 90px; height: 18px; display: flex; align-items: center; }
.sa-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sa-accent); opacity: .30; border-radius: 4px; }
.sa-bar-num { position: relative; padding-left: 6px; font-variant-numeric: tabular-nums; }