/* Дополнения к Bootstrap: только то, чего в нём нет (цвета категорий трафика и SVG-графики). */
:root {
  --c-human: #2e8b6e;
  --c-search: #3b6fd6;
  --c-social: #7b61c9;
  --c-ai_search: #1f9bb0;
  --c-ai_train: #d98b1a;
  --c-seo: #a3b53a;
  --c-monitor: #7c8a99;
  --c-suspect: #c2603a;
  --c-tool: #a0567a;
  --c-scanner: #c23b3b;
  --c-bot: #9a7b5b;
  --c-fake: #8e1f2f;
  --c-self: #a9b4bf;
  --c-amber: #d98b1a;
}

body { font-variant-numeric: tabular-nums; }

/* ---------- категории трафика ---------- */
.cat-human { --cc: var(--c-human); }
.cat-search { --cc: var(--c-search); }
.cat-social { --cc: var(--c-social); }
.cat-ai_search { --cc: var(--c-ai_search); }
.cat-ai_train { --cc: var(--c-ai_train); --ct: #1b1b1b; }
.cat-seo { --cc: var(--c-seo); --ct: #1b1b1b; }
.cat-monitor { --cc: var(--c-monitor); }
.cat-suspect { --cc: var(--c-suspect); }
.cat-tool { --cc: var(--c-tool); }
.cat-scanner { --cc: var(--c-scanner); }
.cat-bot { --cc: var(--c-bot); }
.cat-fake { --cc: var(--c-fake); }
.cat-self { --cc: var(--c-self); --ct: #1b1b1b; }

.badge.cat-badge { background-color: var(--cc, #6c757d); color: var(--ct, #fff); font-weight: 500; }
.progress-bar[class*="cat-"], .dot { background-color: var(--cc); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.progress-stacked { display: flex; gap: 1px; background: var(--bs-border-color); border-radius: var(--bs-border-radius); overflow: hidden; }
.progress-stacked > .progress { border-radius: 0; background: none; height: 100%; }

/* ---------- графики ---------- */
.chart { width: 100%; height: auto; display: block; }
.chart .c-human { fill: var(--c-human); }
.chart .c-bots { fill: var(--c-amber); opacity: .85; }
.chart text { font-size: 10px; fill: var(--bs-secondary-color); }
.chart .hit:hover { fill: color-mix(in srgb, var(--bs-primary) 12%, transparent); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8125rem; color: var(--bs-secondary-color); margin-top: 6px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }

/* ---------- ошибки ---------- */
.err-msg { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow: hidden; }
details.err-msg-full summary { cursor: pointer; color: var(--bs-link-color); font-size: .8125rem; }
details.err-msg-full pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; }