/* ============================================================================
   ADAPTER UI — общие стили внутренних порталов ADAPTER TRADE.
   Эталон: P&L-портал (trade-pnl.adapter.ru). Правила и объяснения — DESIGN.md.

   Файл копируется в новый проект КАК ЕСТЬ. Свои стили портала — отдельным
   файлом после этого, и только через токены ниже (var(--...)), без сырых hex.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. ТОКЕНЫ
   Три состояния темы: системная (атрибута нет), явная светлая, явная тёмная.
   Тёмные значения объявлены дважды — под медиазапросом (системная настройка)
   и под [data-theme="dark"] (переключатель на странице). :where() держит
   медиаблок ниже по весу, чтобы ручной выбор побеждал в обе стороны.
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* поверхности */
  --page:           #f4f5f7;   /* фон страницы */
  --surface-1:      #ffffff;   /* карточки, таблицы, графики */
  --surface-2:      #f8f9fb;   /* шапки таблиц, итоговые строки, подложки */

  /* текст */
  --text-primary:   #0f1115;
  --text-secondary: #555c68;
  --muted:          #8a909b;   /* подписи осей, пояснения, неактивное */

  /* линии */
  --grid:           #eceef1;   /* сетка графиков, разделители строк */
  --baseline:       #cfd3da;   /* ось, граница итоговой строки */
  --border:         rgba(15,17,21,0.09);
  --border-strong:  rgba(15,17,21,0.16);

  /* акцент — фирменный фиолетовый ADAPTER (adapter.ru). Только для интерфейса:
     активный пункт, фокус, выбранное. НЕ для данных. */
  --accent:         #5714CC;
  --accent-soft:    rgba(87,20,204,0.08);
  --accent-ring:    rgba(87,20,204,0.28);

  /* тени */
  --shadow-sm:      0 1px 2px rgba(16,24,40,0.05);
  --shadow-lg:      0 16px 40px rgba(16,24,40,0.16), 0 2px 8px rgba(16,24,40,0.08);

  /* боковая шторка — тёмная в обеих темах */
  --nav-bg:         #121318;
  --nav-hover:      rgba(255,255,255,0.06);
  --nav-text:       #9aa1ad;
  --nav-text-hi:    #ffffff;
  --nav-line:       rgba(255,255,255,0.07);

  /* статусы — закреплены, темой не меняются по смыслу; всегда с иконкой или
     подписью, никогда цветом в одиночку */
  --good:           #006300;   /* текст «хорошо»: рост, прибыль */
  --good-strong:    #0ca30c;   /* заливка «хорошо» */
  --warning:        #fab219;
  --serious:        #ec835a;
  --critical:       #d03b3b;

  /* палитра графиков: 8 категориальных слотов. Проверена валидатором на
     #ffffff и #16171a. ПОРЯДОК СЛОТОВ И ЕСТЬ ЗАЩИТА ОТ ДАЛЬТОНИЗМА — не
     переставлять, не добавлять девятый. Подробности — DESIGN.md, «Графики». */
  --series-1: #2a78d6;  /* синий */
  --series-2: #eb6834;  /* оранжевый */
  --series-3: #1baf7a;  /* бирюзовый */
  --series-4: #eda100;  /* жёлтый */
  --series-5: #e87ba4;  /* розовый */
  --series-6: #008300;  /* зелёный */
  --series-7: #4a3aa7;  /* фиолетовый */
  --series-8: #e34948;  /* красный */
  /* фирменный как цвет данных — только «ADAPTER / наши бренды». Площадкам
     его не отдавать: в тёмной теме он сливается с синим (--series-1). */
  --brand-purple: #5714CC;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:           #0c0d0f;
    --surface-1:      #16171a;
    --surface-2:      #1c1d21;
    --text-primary:   #f2f3f5;
    --text-secondary: #a8aeb8;
    --muted:          #7f8591;
    --grid:           #25272c;
    --baseline:       #3a3d44;
    --border:         rgba(255,255,255,0.08);
    --border-strong:  rgba(255,255,255,0.16);
    --accent:         #8B5CF6;
    --accent-soft:    rgba(139,92,246,0.14);
    --accent-ring:    rgba(139,92,246,0.40);
    --shadow-sm:      0 1px 2px rgba(0,0,0,0.30);
    --shadow-lg:      0 16px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
    --nav-bg:         #0f1013;
    --good:           #0ca30c;
    --critical:       #e66767;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --brand-purple: #8B5CF6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:           #0c0d0f;
  --surface-1:      #16171a;
  --surface-2:      #1c1d21;
  --text-primary:   #f2f3f5;
  --text-secondary: #a8aeb8;
  --muted:          #7f8591;
  --grid:           #25272c;
  --baseline:       #3a3d44;
  --border:         rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.16);
  --accent:         #8B5CF6;
  --accent-soft:    rgba(139,92,246,0.14);
  --accent-ring:    rgba(139,92,246,0.40);
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.30);
  --shadow-lg:      0 16px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
  --nav-bg:         #0f1013;
  --good:           #0ca30c;
  --critical:       #e66767;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --brand-purple: #8B5CF6;
}

/* ---------------------------------------------------------------------------
   2. ОСНОВА И ТИПОГРАФИКА
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* широкое прокручивается внутри своей карточки, а не всей страницей */
body { overflow-x: hidden; }

h1 { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; margin: 0; line-height: 1.25; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.section-title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; margin: 36px 0 12px; }
.subtitle { color: var(--muted); font-size: 12.5px; margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note  { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.legend-text { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   3. КАРКАС: боковая шторка + рабочая область
   Шторка свёрнута в полосу иконок и раскрывается ПОВЕРХ контента по
   наведению — не сдвигая страницу, иначе от каждого движения мыши к меню
   перестраивались бы таблицы и графики.
   --------------------------------------------------------------------------- */
:root { --rail: 64px; --rail-open: 256px; }

.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
  width: var(--rail);
  display: flex; flex-direction: column;
  background: var(--nav-bg);
  color: var(--nav-text);
  overflow: hidden;
  /* закрывается с задержкой: курсор, на миг вышедший за край, не схлопывает меню */
  transition: width .2s cubic-bezier(.2,.8,.2,1) .12s, box-shadow .2s ease .12s;
}
/* раскрытие по наведению — только там, где наведение вообще есть */
@media (hover: hover) and (min-width: 861px) {
  .sidebar:hover, .sidebar:focus-within {
    width: var(--rail-open);
    box-shadow: 8px 0 32px rgba(0,0,0,0.28);
    transition-delay: .06s;
  }
}

/* Всё оформление шторки — только внутри .sidebar. На эталоне глобальные
   .brand и .lbl совпали с классами ячеек таблиц: .lbl сделал прозрачными
   названия статей в факторном анализе, .brand превратил ячейки брендов во
   флекс-блоки по 64 px. Короткие общие имена без предка не использовать. */
.sidebar .brand {
  display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--nav-line);
}
.brand-mark {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #7c3aed 0%, #5714CC 55%, #3b0d8f 100%);
  color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.brand-text { min-width: 0; white-space: nowrap; }
.brand-name { color: #fff; font-weight: 650; font-size: 14.5px; letter-spacing: 0.02em; }
.brand-sub  { color: var(--nav-text); font-size: 11.5px; margin-top: 1px; }

/* меню с прокруткой; системная полоса скрыта, вместо неё свой ползунок */
.nav-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 0 12px;
       scrollbar-width: none; overscroll-behavior: contain; }
.nav::-webkit-scrollbar { display: none; }

/* затемнение у края, за которым меню продолжается */
.nav-wrap::before, .nav-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; height: 32px; z-index: 1;
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.nav-wrap::before { top: 0;    background: linear-gradient(var(--nav-bg), transparent); }
.nav-wrap::after  { bottom: 0; background: linear-gradient(transparent, var(--nav-bg)); }
.nav-wrap.can-up::before, .nav-wrap.can-down::after { opacity: 1; }

/* ползунок: видимая полоска 4 px, цепляется за полосу 14 px */
.nav-scroll {
  position: absolute; top: 6px; bottom: 6px; right: 0; width: 14px; z-index: 2;
  cursor: pointer; touch-action: none;
}
.nav-scroll[hidden] { display: none; }
.nav-scroll::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 4px; width: 4px;
  border-radius: 4px; background: rgba(255,255,255,0.07);
}
.nav-thumb { position: absolute; left: 0; right: 0; min-height: 32px; cursor: grab; touch-action: none; }
.nav-thumb::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 4px; width: 4px;
  border-radius: 4px; background: rgba(255,255,255,0.34);
  transition: background .12s ease, width .12s ease, right .12s ease;
}
.nav-scroll:hover .nav-thumb::before, .nav-thumb.drag::before {
  background: rgba(255,255,255,0.58); width: 6px; right: 3px;
}
.nav-thumb.drag { cursor: grabbing; }

/* заголовки разделов: в свёрнутом меню вместо подписи — короткая черта */
.nav-section {
  position: relative; height: 30px; margin: 10px 0 2px;
  padding: 0 24px; display: flex; align-items: center;
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase;
  color: #6b7280; white-space: nowrap;
}
.nav-section:first-child { margin-top: 0; }
.nav-section::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 50%;
  height: 1px; background: var(--nav-line);
}
.nav-section span { opacity: 0; }

/* пункты меню */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: calc(100% - 16px); height: 40px; margin: 1px 8px; padding: 0 14px;
  border: none; border-radius: 9px; background: none;
  font-family: inherit; font-size: 13.5px; font-weight: 500; text-align: left;
  color: var(--nav-text); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.nav-item[hidden] { display: none; }
.nav-item:hover { background: var(--nav-hover); color: var(--nav-text-hi); }
.nav-item.active { background: rgba(139,92,246,0.18); color: #fff; }
/* полоска слева у активного пункта — видна и в свёрнутом меню */
.nav-item.active::before {
  content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: #a78bfa;
}
.nav-item.active .ico { color: #c4b5fd; }

.sidebar .ico, .topbar .ico { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none;
       stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .lbl { opacity: 0; transition: opacity .12s ease; }

@media (hover: hover) and (min-width: 861px) {
  .sidebar:hover .lbl, .sidebar:focus-within .lbl,
  .sidebar:hover .nav-section span, .sidebar:focus-within .nav-section span { opacity: 1; transition-delay: .1s; }
  .sidebar:hover .nav-section::before, .sidebar:focus-within .nav-section::before { opacity: 0; }
}

.nav-foot { flex-shrink: 0; padding: 8px 0 12px; border-top: 1px solid var(--nav-line); }

/* рабочая область */
.main { margin-left: var(--rail); min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 32px;
  background: color-mix(in srgb, var(--page) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-titles { min-width: 0; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.menu-btn {
  display: none; width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface-1); color: var(--text-primary); cursor: pointer;
  align-items: center; justify-content: center;
}
.content { max-width: 1480px; margin: 0 auto; padding: 24px 32px 56px; }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 45; background: rgba(8,9,12,0.5);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}

/* разделы-вкладки внутри одной страницы */
.panel { display: none; }
.panel.active { display: block; animation: panel-in .18s ease; }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sidebar, .lbl, .nav-backdrop, .nav-wrap::before, .nav-wrap::after { transition: none !important; }
  .panel.active { animation: none; }
}

/* ---------------------------------------------------------------------------
   4. КОМПОНЕНТЫ
   --------------------------------------------------------------------------- */

/* карточка — единственный контейнер для блока данных */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.card-title { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }

/* плитки показателей */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.kpi-tile { padding: 16px 18px; }
.kpi-label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; }
.kpi-value { font-size: 26px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; }
.kpi-delta { font-size: 12px; margin-top: 6px; color: var(--muted); line-height: 1.4; }
.kpi-delta.up   { color: var(--good); }
.kpi-delta.down { color: var(--critical); }

/* сетки */
.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; align-items: start; }

/* фильтры: один ряд над тем, что фильтруют */
.controls-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 24px 0 14px;
}
.ctrl-label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
select, input[type="text"], input[type="number"], input[type="search"] {
  font-family: inherit; font-size: 13px; height: 34px;
  border-radius: 8px; border: 1px solid var(--border-strong);
  background-color: var(--surface-1); color: var(--text-primary);
  box-shadow: var(--shadow-sm); max-width: 100%;
}
input[type="text"], input[type="number"], input[type="search"] { padding: 0 11px; }
select {
  padding: 0 30px 0 11px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a909b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
select:hover, input:hover { border-color: var(--baseline); }
select:focus-visible, input:focus-visible, button:focus-visible, a:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--accent-ring);
}

/* кнопки */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500; height: 34px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-1);
  color: var(--text-primary); cursor: pointer; box-shadow: var(--shadow-sm);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); color: #fff; }

/* фильтр-чипы: выбранное залито цветом серии, остальное — блёклый контур */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 14px; }
.chip {
  font-family: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer;
  border: 1.5px solid var(--grid); border-radius: 20px;
  background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grid); }
.chip:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.chip.on { background: var(--chip-color, var(--accent)); border-color: var(--chip-color, var(--accent));
           color: #fff; font-weight: 600; }
.chip.on .dot { background: rgba(255,255,255,0.85); }

/* Таблицы. Глобально — только то, что верно для любой таблицы: отступы,
   линии, ровные цифры. Выравнивание — классом. Раньше здесь стояло
   th, td { text-align: right; white-space: nowrap } на все таблицы подряд:
   в P&L, где почти всё — числа, это удобно, а в портале с текстовыми
   колонками (WMS) его приходилось перебивать на уровне каждой таблицы. */
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td {
  text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums;   /* столбцы цифр выравниваются */
}
/* отдельная числовая колонка — справа и без переноса */
th.num, td.num { text-align: right; white-space: nowrap; }
/* финансовая таблица: первая колонка — подпись строки, остальные — числа */
table.fin th, table.fin td { text-align: right; white-space: nowrap; }
table.fin th:first-child, table.fin td:first-child { text-align: left; white-space: normal; }
th {
  color: var(--text-secondary); font-weight: 600; font-size: 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border-strong);
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-primary); }
td.left, th.left { text-align: left; white-space: normal; }
tbody tr:hover td { background: var(--accent-soft); }
tr.group-row td { font-weight: 700; background: rgba(128,128,128,0.10); }
tr.total-row td { font-weight: 650; border-top: 1.5px solid var(--baseline); background: var(--surface-2); }

/* таблица, которая не влезает, прокручивается внутри своей рамки */
.table-scroll {
  max-height: 460px; overflow: auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1);
}
.table-scroll table { margin: 0; }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; }
/* первая колонка закреплена, как закреплённая область в Excel. Фон обязан
   быть НЕПРОЗРАЧНЫМ, иначе сквозь ячейку видно уехавшие под неё цифры —
   поэтому полупрозрачные подсветки кладутся поверх сплошной подложки. */
.table-scroll tbody td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface-1);
  box-shadow: inset -1px 0 0 var(--grid);
}
/* только первая строка шапки: во второй строке первая ячейка обычно
   подзаголовок первой группы колонок, а не «Статья» */
.table-scroll thead tr:first-child th:first-child {
  left: 0; z-index: 4; box-shadow: inset -1px 0 0 var(--border-strong);
}
.table-scroll tr.group-row td:first-child {
  background: linear-gradient(rgba(128,128,128,0.10), rgba(128,128,128,0.10)), var(--surface-1);
}
.table-scroll tr.total-row td:first-child { background: var(--surface-2); }
.table-scroll tbody tr:hover td:first-child {
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface-1);
}

/* полоска-значение прямо в ячейке */
.cellbar { position: relative; min-width: 108px; }
.cellbar-fill { position: absolute; left: 0; top: 3px; bottom: 3px;
                background: var(--brand-purple); opacity: 0.16; border-radius: 2px; }
.cellbar-val { position: relative; }

/* изменения */
.delta-up   { color: var(--good); font-weight: 500; }
.delta-down { color: var(--critical); font-weight: 500; }
.delta-zero { color: var(--muted); }

/* предупреждение о данных: чего не хватает, что приблизительно */
.warn {
  border: 1px solid var(--critical); border-radius: 10px; padding: 10px 12px;
  background: rgba(230,103,103,0.08); font-size: 12.5px; margin-bottom: 14px; line-height: 1.5;
}
.info {
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px;
  background: var(--surface-2); font-size: 12.5px; margin-bottom: 14px; line-height: 1.5;
  color: var(--text-secondary);
}

/* решения и статусы — всегда текстом, цвет только подкрепляет */
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px;
         font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.badge.good     { background: rgba(25,158,112,0.16); color: var(--good); }
.badge.neutral  { background: rgba(42,120,214,0.14); color: var(--series-1); }
.badge.warn     { background: rgba(201,133,0,0.18);  color: var(--series-4); }
.badge.bad      { background: rgba(227,73,72,0.16);  color: var(--critical); }
.badge.none     { background: rgba(128,128,128,0.14); color: var(--muted); }

/* легенда графика */
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; }
.legend-swatch.circle { border-radius: 50%; }

/* графики (SVG) */
svg text { fill: var(--muted); font-size: 10.5px; font-family: var(--font); }
.gridline { stroke: var(--grid); stroke-width: 1; }
.axisline { stroke: var(--baseline); stroke-width: 1; }

/* подсказка при наведении на график */
.tooltip {
  position: fixed; pointer-events: none; z-index: 60; display: none;
  background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 11px; font-size: 12px; color: var(--text-primary);
  box-shadow: var(--shadow-lg); white-space: nowrap;
}
.tooltip .t-head  { color: var(--text-secondary); font-size: 11px; margin-bottom: 2px; }
.tooltip .t-value { font-weight: 600; }

/* ---------------------------------------------------------------------------
   5. ПЛАНШЕТ И ТЕЛЕФОН
   Наведения нет — шторка выезжает целиком по кнопке меню и закрывается тапом
   по пункту или по затемнению.
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .content { padding: 20px 20px 48px; }
  .topbar { padding: 0 20px; }
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sidebar {
    width: 284px; transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.2,.8,.2,1);
    box-shadow: none;
  }
  .sidebar.open { transform: none; box-shadow: 12px 0 40px rgba(0,0,0,0.35); }
  .sidebar .lbl, .sidebar .nav-section span { opacity: 1; }
  .nav-section::before { opacity: 0; }
  .nav-item { height: 44px; }                 /* палец, а не курсор */
  .nav-scroll { width: 22px; }
  .nav-thumb::before { width: 5px; right: 5px; }
  .nav-thumb.drag::before { width: 7px; right: 4px; }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  .main { margin-left: 0; }
  .menu-btn { display: inline-flex; }
  .topbar { height: 56px; padding: 0 14px; gap: 10px; }
  h1 { font-size: 17px; }
  .content { padding: 14px 12px 40px; }

  .card { padding: 14px; border-radius: 11px; overflow-x: auto; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .kpi-tile { padding: 12px 13px; }
  .kpi-label { font-size: 11.5px; margin-bottom: 5px; }
  .kpi-value { font-size: 19px; }
  .kpi-delta { font-size: 11px; }
  .charts-row { grid-template-columns: minmax(0, 1fr); }

  .controls-row { gap: 8px; margin: 16px 0 12px; }
  .controls-row select, .controls-row input { flex: 1 1 140px; }
  .section-title { font-size: 14.5px; margin: 26px 0 10px; }
  .table-scroll { max-height: 70vh; }
  table { font-size: 12px; }
  /* подпись строки переносится, а не распирает таблицу на весь экран */
  .table-scroll thead tr:first-child th:first-child, .table-scroll tbody td:first-child {
    white-space: normal; min-width: 128px; max-width: 46vw; line-height: 1.3;
  }
}
@media (max-width: 420px) {
  .kpi-value { font-size: 17px; }
}