/* chart chrome on top of the theme: light values on :root, dark under
   [data-bs-theme=dark] (darkmode.js always stamps a concrete mode).
   Surfaces/ink lean on Bootstrap tokens so they track the theme exactly;
   series hues are the validated palette, stepped per mode. */
:root {
  --viz-surface:   var(--bs-body-bg);
  --viz-border:    var(--bs-border-color);
  --viz-text:      var(--bs-body-color);
  --viz-text-2:    var(--bs-secondary-color);
  --viz-muted:     #898781;
  --viz-grid:      #e1e0d9;
  --viz-baseline:  #c3c2b7;
  --series-1:      #2a78d6;  /* A  actions   */
  --series-2:      #1baf7a;  /* C  checks    */
  --series-3:      #eda100;  /* E  errors    */
  --series-4:      #008300;  /* T  total     */
  --series-5:      #4a3aa7;  /* U  unmatched */
}
[data-bs-theme="dark"] {
  --viz-grid:      #2c2c2a;
  --viz-baseline:  #383835;
  --series-1:      #3987e5;
  --series-2:      #199e70;
  --series-3:      #c98500;
  --series-4:      #008300;
  --series-5:      #9085e9;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0 8px; }
.tile { background: var(--viz-surface); border: 1px solid var(--viz-border); border-radius: 8px; padding: 10px 14px; }
.tile .v { font-size: 24px; font-weight: 650; }
.tile .k { font-size: 12.5px; color: var(--viz-text-2); }

.filters { display: flex; gap: 6px; align-items: center; margin: 16px 0; flex-wrap: wrap; }
.filters .lbl { font-size: 13px; color: var(--viz-text-2); margin-right: 4px; }
.filters button {
  font-size: 13px; color: var(--viz-text-2);
  background: var(--viz-surface); border: 1px solid var(--viz-border); border-radius: 8px;
  padding: 4px 12px; cursor: pointer;
}
.filters button:hover { color: var(--viz-text); }
.filters button[aria-pressed="true"] { color: var(--viz-surface); background: var(--viz-text); border-color: var(--viz-text); font-weight: 600; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; }
@media (max-width: 500px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card { background: var(--viz-surface); border: 1px solid var(--viz-border); border-radius: 8px; padding: 12px 14px 6px; min-width: 0; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card h5 { font-size: 14.5px; font-weight: 600; margin: 0; }
.chart-card .desc { font-size: 12.5px; color: var(--viz-muted); margin: 0 0 6px; }

.u-legend { font-size: 12.5px !important; color: var(--viz-text-2) !important; text-align: left !important; }
.u-legend th { font-weight: 500 !important; }
.u-legend .u-value { color: var(--viz-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.u-legend .u-marker { border-radius: 2px; }
.u-inline tr { margin-right: 14px !important; }

.tablewrap { overflow-x: auto; margin-top: 10px; }
table.rundata { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.rundata th, table.rundata td { padding: 4px 10px; text-align: right; border-bottom: 1px solid var(--viz-grid); }
table.rundata th:first-child, table.rundata td:first-child { text-align: left; }
table.rundata th { color: var(--viz-text-2); font-weight: 600; }