/* The admin dashboards: stat tiles, charts, checks. Follows madmin's
   light-dark() colors, so it matches the system setting like the rest of /madmin. */
:root {
  --stats-series: light-dark(#2a78d6, #3987e5);
  --stats-series-wash: light-dark(#cde2fb, #184f95);
  --stats-grid: light-dark(#e1e0d9, #2c2c2a);
  --stats-axis: light-dark(#c3c2b7, #383835);
  --stats-muted: #898781;
  --stats-good-text: light-dark(#006300, #0ca30c);
  --stats-bad-text: light-dark(#b42323, #e66767);
  --stats-good: #0ca30c;
  --stats-warning: #fab219;
  --stats-critical: #d03b3b;
}

.stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-bottom: 3rem; min-width: 0; }
.stats-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.stats-header h1 { margin: 0; }
.stats-note { color: var(--light-text-color); margin: 0.25rem 0 0; }
.stats section > h2 { font-size: 1rem; margin: 0 0 0.75rem; }

.stats-range { display: inline-flex; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
.stats-range a { padding: 0.35rem 0.75rem; color: var(--text-color); text-decoration: none; }
.stats-range a + a { border-left: 1px solid var(--border-color); }
.stats-range a[aria-current] { background: var(--hover-color); font-weight: 600; }

.stats-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.stats-tile { border: 1px solid var(--border-color); border-radius: 8px; padding: 0.9rem 1rem; background: var(--surface-color); }
.stats-tile dt { color: var(--light-text-color); font-size: 0.8rem; }
.stats-tile dd { margin: 0.25rem 0 0; font-size: 1.6rem; font-weight: 600; }
.stats-tile .stats-delta, .stats-tile .stats-hint { display: block; font-size: 0.75rem; font-weight: 400; color: var(--light-text-color); margin-top: 0.15rem; }
.stats-delta.is-good { color: var(--stats-good-text); }
.stats-delta.is-bad { color: var(--stats-bad-text); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1.25rem; }
.stats-card { border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; min-width: 0; }
.stats-card h3 { margin: 0; font-size: 0.9rem; }
.stats-card .stats-sub { color: var(--light-text-color); font-size: 0.8rem; margin: 0.15rem 0 0.75rem; }

.stats-chart { width: 100%; height: auto; display: block; overflow: visible; }
.stats-chart .grid { stroke: var(--stats-grid); stroke-width: 1; }
.stats-chart .baseline { stroke: var(--stats-axis); stroke-width: 1; }
.stats-chart .tick { fill: var(--stats-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.stats-chart .bar { fill: var(--stats-series); }
.stats-chart .hit { fill: transparent; }
.stats-chart g:hover .hit { fill: var(--hover-color); }
.stats-chart g:hover .bar { fill: light-dark(#1c5cab, #6da7ec); }

.stats details { margin-top: 0.5rem; font-size: 0.8rem; }
.stats details summary { cursor: pointer; color: var(--light-text-color); }
.stats details table { margin-top: 0.5rem; }
.stats td.num, .stats th.num { text-align: right; font-variant-numeric: tabular-nums; }

.stats-bars { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.stats-bars li { display: grid; grid-template-columns: minmax(6rem, 12rem) minmax(3rem, 1fr) auto; gap: 0.75rem; align-items: center; font-size: 0.85rem; }
.stats-bars li > span:first-child { overflow-wrap: anywhere; }
.stats-bars .track { height: 10px; border-radius: 0 4px 4px 0; background: transparent; }
.stats-bars .fill { height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--stats-series); }
.stats-bars .value { font-variant-numeric: tabular-nums; color: var(--light-text-color); min-width: 4rem; text-align: right; }

.stats-checks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-color); border-radius: 8px; }
.stats-checks li { display: grid; grid-template-columns: 7rem 14rem 1fr; gap: 1rem; padding: 0.65rem 1rem; align-items: center; }
.stats-checks li + li { border-top: 1px solid var(--border-color); }
@media (max-width: 640px) { .stats-checks li { grid-template-columns: 1fr; gap: 0.25rem; } }
.stats-status { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.8rem; }
.stats-status svg { width: 1rem; height: 1rem; flex: none; }
.stats-status.is-ok svg { color: var(--stats-good); }
.stats-status.is-warning svg { color: var(--stats-warning); }
.stats-status.is-critical svg { color: var(--stats-critical); }
.stats-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: 8px; }
.stats-banner a { margin-left: auto; }

.stats-cohorts td.cell { text-align: center; font-variant-numeric: tabular-nums; min-width: 3rem; }
.stats-cohorts td.empty { color: var(--stats-muted); }

/* The Activity pages (Madmin::ActivityController). */
.activity-flow { font-size: 0.85rem; max-width: 36rem; }
.activity-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1rem; margin: 0; font-size: 0.85rem; }
.activity-facts dt { color: var(--light-text-color); }
.activity-facts dd { margin: 0; overflow-wrap: anywhere; }
.activity-timeline td { font-size: 0.85rem; vertical-align: top; }
.activity-timeline tr.is-background td { color: var(--stats-muted); }
.activity-timeline tr.is-failed td { color: var(--stats-bad-text); }