/* Kotbot BI — стили на токенах kotbot black Design System
   (claude.ai/artifact/5HwuE7Qceq2VP4yJ3jRdhL). Museo Sans Cyrl — фирменный шрифт;
   пока его файлов нет в системе, работает запасной Nunito Sans из той же цепочки. */

:root {
  color-scheme: light;
  /* цвета: colors-* из дизайн-системы */
  --accent: rgb(94,119,253);              /* color-accent-500 */
  --accent-subtle: rgba(94,119,253,0.1);  /* color-accent-50 */
  --ink: rgb(23,23,23);                   /* colors-text-primary */
  --ink-2: rgb(90,90,90);                 /* colors-text-secondary */
  --ink-3: rgb(118,118,118);              /* вторичный текст 4.5:1 на белом */
  --muted: rgb(170,170,170);              /* colors-text-tertiary: только неважное */
  --page: rgb(255,255,255);
  --surface: rgb(245,245,245);            /* colors-background-surface */
  --border: rgb(235,235,235);             /* colors-border-default */
  --border-strong: rgb(191,191,191);      /* colors-border-strong */
  --error: rgb(220,38,38);
  --error-bg: rgba(239,68,68,0.1);
  --success: rgb(21,128,61);
  --success-bg: rgba(34,197,94,0.1);
  /* статусы алертов — фиксированные, с иконкой и подписью */
  --st-good: #0ca30c; --st-warning: #fab219; --st-serious: #ec835a; --st-critical: #d03b3b;
  /* площадки: категориальная палитра, проверена validate_palette.js (light, #fff) */
  --s1: #5e77fd; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948; --s-other: #9a9a9a;
  /* отступы, скругления, движение */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 20px; --sp6: 24px; --sp8: 32px;
  --r6: 6px; --r8: 8px; --r12: 12px; --r16: 16px; --pill: 555px;
  --motion: 160ms cubic-bezier(.4,0,.2,1);
  --shadow-menu: 0px 12px 33.7px 0px rgba(0,0,0,0.15);
  --font: "Museo Sans Cyrl", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sidebar-w: 204px;
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 400 14px/18px var(--font);
  color: var(--ink); background: var(--page);
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink); border-radius: var(--r6); }

/* ── каркас ─────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; overflow: auto;
  border-right: 1px solid var(--border); padding: var(--sp5) var(--sp3);
  display: flex; flex-direction: column; gap: var(--sp1);
}
.brand { display: flex; align-items: center; gap: var(--sp2); padding: 0 var(--sp2) var(--sp5); font-weight: 900; font-size: 20px; line-height: 24px; }
.brand img { display: block; width: auto; }
.brand small { font-weight: 500; font-size: 12px; color: var(--ink-3); }
.nav { display: flex; align-items: center; gap: var(--sp2); height: 40px; padding: 0 var(--sp3);
  border: 0; background: none; border-radius: var(--r8); cursor: pointer; text-align: left; font-weight: 500; color: var(--ink-2);
  transition: background var(--motion), color var(--motion); }
.nav:hover { background: var(--surface); color: var(--ink); }
.nav[aria-current="page"] { background: var(--accent-subtle); color: var(--accent); }
.nav .cnt { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.side-foot { margin-top: auto; padding: var(--sp3) var(--sp2) 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.side-foot a { color: var(--ink-2); }

main { min-width: 0; padding: var(--sp6) var(--sp8) 64px; }
.head { display: flex; align-items: baseline; gap: var(--sp3); flex-wrap: wrap; margin-bottom: var(--sp4); }
h1 { margin: 0; font-size: 24px; line-height: 28px; font-weight: 700; }
h2 { margin: 0; font-size: 16px; line-height: 20px; font-weight: 700; }
.sub { color: var(--ink-3); }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--sp2); border-radius: var(--pill); font-size: 12px; font-weight: 500; background: var(--surface); color: var(--ink-2); }
.badge.warn { background: rgba(250,178,25,0.15); color: rgb(133,84,0); }

/* ── фильтры: одна строка над графиками ─────────────────────────────────── */
.filters { position: sticky; top: 0; z-index: 5; background: var(--page);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp2);
  padding: var(--sp3) 0; margin-bottom: var(--sp4); border-bottom: 1px solid var(--border); }
.seg { display: inline-flex; background: var(--surface); border-radius: var(--r8); padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; height: 30px; padding: 0 var(--sp3); border-radius: var(--r6); cursor: pointer; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background var(--motion); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--page); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.dates { display: inline-flex; align-items: center; gap: var(--sp1); }
.dates input { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r8); padding: 0 var(--sp2); background: var(--page); }
.dates input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink-2); }
.select { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r8); padding: 0 var(--sp3); background: var(--page); font-weight: 500; cursor: pointer; }
.select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink-2); }
.spacer { flex: 1; }
.cmp { font-size: 12px; color: var(--ink-3); }

.dd { position: relative; }
.dd > button { height: 36px; border: 1px solid var(--border-strong); background: var(--page); border-radius: var(--r8); padding: 0 var(--sp3); cursor: pointer; font-weight: 500; display: inline-flex; gap: var(--sp2); align-items: center; }
.dd > button::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg) translateY(-2px); }
.dd-menu { position: absolute; top: 42px; right: 0; min-width: 260px; max-height: 480px; background: var(--page); border-radius: var(--r12); box-shadow: var(--shadow-menu); padding: var(--sp2); display: none; flex-direction: column; z-index: 20; }
.dd.open .dd-menu { display: flex; }
.dd-list { overflow: auto; min-height: 0; flex: 1 1 auto; }
.dd-menu label { display: flex; align-items: center; gap: var(--sp2); padding: var(--sp2); border-radius: var(--r6); cursor: pointer; }
.dd-menu label:hover { background: var(--surface); }
.dd-menu .sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.dd-menu .num { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.dd-menu .row { display: flex; gap: var(--sp2); padding: var(--sp2); border-top: 1px solid var(--border); margin-top: var(--sp1); flex: none; background: var(--page); }

.btn { height: 36px; border: 0; border-radius: var(--r8); padding: 0 var(--sp4); cursor: pointer; font-weight: 500; background: var(--ink); color: #fff; display: inline-flex; align-items: center; gap: var(--sp2); }
.btn.ghost { background: var(--surface); color: var(--ink); }
.btn.small { height: 30px; padding: 0 var(--sp3); }
.btn:hover { opacity: .9; }
.search { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r8); padding: 0 var(--sp3); min-width: 240px; }

/* ── карточки и KPI ─────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp4); }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c6 { grid-column: span 6; } .c4 { grid-column: span 4; }
.card { background: var(--page); border: 1px solid var(--border); border-radius: var(--r16); padding: var(--sp5); min-width: 0; }
.card-h { display: flex; align-items: baseline; gap: var(--sp3); flex-wrap: wrap; margin-bottom: var(--sp3); }
.card-h .sub { font-size: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp3); margin-bottom: var(--sp4); }
.kpi { background: var(--surface); border-radius: var(--r16); padding: var(--sp4); min-width: 0; }
.kpi .lab { font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 500; }
.kpi .val { font-size: 24px; line-height: 30px; font-weight: 700; margin-top: var(--sp1); white-space: nowrap; }
.kpi .val small { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.kpi .foot { font-size: 12px; line-height: 16px; color: var(--ink-3); margin-top: var(--sp1); }
.kpi.click { cursor: pointer; transition: box-shadow var(--motion); }
.kpi.click:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.kpi.on { background: var(--accent-subtle); box-shadow: inset 0 0 0 2px var(--accent); }
.up { color: var(--success); font-weight: 700; }
.down { color: var(--error); font-weight: 700; }
.flat { color: var(--ink-3); }

.note { background: var(--surface); border-radius: var(--r12); padding: var(--sp3) var(--sp4); color: var(--ink-2); margin-bottom: var(--sp4); }
.note.warn { background: rgba(250,178,25,0.12); color: rgb(110,70,0); }

/* ── таблицы ────────────────────────────────────────────────────────────── */
.tbl-wrap { overflow: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 18px; }
th { position: sticky; top: 0; background: var(--page); text-align: right; font-weight: 500; color: var(--ink-2); font-size: 12px; padding: var(--sp2) var(--sp3); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
th.l, td.l { text-align: left; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent); }
th[aria-sort="ascending"]::after { content: " ↑"; color: var(--accent); }
td { text-align: right; padding: var(--sp2) var(--sp3); border-bottom: 1px solid var(--border); white-space: nowrap; }
tr.grp td { font-weight: 500; }
tr.grp:hover td, tbody tr:hover td { background: rgb(250,250,250); }
tr.child td { color: var(--ink-2); background: rgb(252,252,252); }
tr.child td.l:first-child { padding-left: 44px; }
.tg { width: 22px; height: 22px; border-radius: var(--r6); border: 1px solid var(--border-strong); background: var(--page); cursor: pointer; font-weight: 700; line-height: 1; margin-right: var(--sp2); }
.tg:hover { border-color: var(--ink-2); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--sp2); border-radius: var(--pill); font-size: 12px; font-weight: 500; background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.pill i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.pill.crit { background: var(--error-bg); color: var(--error); }
.pill.ok { background: var(--success-bg); color: var(--success); }
.pager { display: flex; align-items: center; gap: var(--sp2); justify-content: flex-end; padding-top: var(--sp3); color: var(--ink-3); font-size: 12px; }

/* ── графики ────────────────────────────────────────────────────────────── */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .axis text { fill: var(--ink-3); font-size: 11px; }
.chart .grid line { stroke: var(--border); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp2) var(--sp4); font-size: 12px; color: var(--ink-2); margin-bottom: var(--sp2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; }
.legend i.line { height: 2px; border-radius: 1px; }
.legend i.dash { height: 0; border-top: 2px dashed var(--ink-3); background: none !important; }
.legend i.dash-c { height: 0; border-top: 2px dashed currentColor; background: none !important; }
.plan-in { width: 128px; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--r6); padding: 0 var(--sp2); text-align: right; background: var(--page); font-variant-numeric: tabular-nums; }
.plan-in:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.plan-in.bad { box-shadow: inset 0 0 0 2px var(--error); }
.plan-ly { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp2) var(--sp3); margin-bottom: var(--sp3); }
.filter-row .lab { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--page); border-radius: var(--r12); box-shadow: var(--shadow-menu); padding: var(--sp3); font-size: 12px; line-height: 16px; min-width: 180px; opacity: 0; transition: opacity 80ms; }
.tip.on { opacity: 1; }
.tip b { display: block; margin-bottom: var(--sp1); font-size: 13px; }
.tip .r { display: flex; gap: var(--sp3); justify-content: space-between; }
.tip .r span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.tip .r i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.tip .tot { border-top: 1px solid var(--border); margin-top: var(--sp1); padding-top: var(--sp1); font-weight: 700; }
.spark { vertical-align: middle; }

/* ── алерты ─────────────────────────────────────────────────────────────── */
.alert { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--sp3); padding: var(--sp4); border: 1px solid var(--border); border-radius: var(--r12); margin-bottom: var(--sp2); }
.alert .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 14px; }
.alert .t { font-weight: 700; }
.alert .d { color: var(--ink-2); margin-top: 2px; }
.alert .who { font-size: 12px; color: var(--ink-3); text-align: right; }

.access-form { display: flex; flex-wrap: wrap; gap: var(--sp2); align-items: center; }
.access-form input, .access-form select, td select { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r8); padding: 0 var(--sp3); background: var(--page); }
.keybox { display: flex; gap: var(--sp2); align-items: center; flex-wrap: wrap; background: var(--success-bg); border-radius: var(--r12); padding: var(--sp3) var(--sp4); margin-bottom: var(--sp4); }
.keybox code { font-size: 14px; background: var(--page); padding: 6px 10px; border-radius: var(--r6); user-select: all; }
tr.revoked td { color: var(--muted); }
.empty { padding: var(--sp8); text-align: center; color: var(--ink-3); }
.loading { opacity: .5; transition: opacity var(--motion); }

@media (max-width: 1100px) {
  .c8, .c6, .c4 { grid-column: span 12; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); padding: var(--sp3) var(--sp4); }
  .brand { padding: 0 var(--sp2); width: 100%; }
  .side-foot { display: none; }
  main { padding: var(--sp4) var(--sp4) 48px; }
  .search { min-width: 0; width: 100%; }
}