/* Шрифты брендбука лежат на самом стенде: внешних загрузок нет,
   стенд закрытый и не должен зависеть от чужих серверов. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/IBMPlexMono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/Roboto-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/Roboto-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/Roboto-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/Roboto-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/Roboto-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/Roboto-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Токены утверждённого варианта D (источник: /opt/apm-dashboard-lab/design-tokens.json).
   Новые цвета и размеры не вводим — только эти переменные. */
:root {
  --brand-primary: #126AEE;
  --brand-dark: #1B3388;
  --brand-light: #79BBFF;
  --radius: 6px;
  --radius-card: 18px;
  --font-main: "Roboto", "Inter Tight", system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, monospace;
}

/* Тёмная тема — основная, как в утверждённом D */
:root, :root[data-theme="dark"] {
  --text: #e8ecf1;
  --text-muted: #8b95a5;
  --border: #2a3441;
  --border-soft: #202836;
  --surface: #151b24;
  --surface-page: #0d1117;
  --selected: #1d2735;
  --accent: #79BBFF;
  --accent-soft: #12294a;
  --ok: #4ade80;
  --risk: #fbbf24;
  --breach: #f87171;
  --warn-data: #c4b5fd;
}

:root[data-theme="light"] {
  --text: #1a1d21;
  --text-muted: #5c6470;
  --border: #d9dde3;
  --border-soft: #e8ebef;
  --surface: #ffffff;
  --surface-page: #f6f7f9;
  --selected: #eef2ff;
  --accent: #126AEE;
  --accent-soft: #eef2ff;
  --ok: #15803d;
  --risk: #b45309;
  --breach: #b91c1c;
  --warn-data: #6d28d9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 5;
}
header h1 { font-size: 16px; margin: 0; font-weight: 600; }
header .spacer { flex: 1 }
header a, header button {
  color: var(--text-muted); background: none; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 5px 10px; font: inherit; cursor: pointer;
  text-decoration: none;
}
header a:hover, header button:hover { color: var(--text); border-color: var(--accent); }

main { padding: 18px 24px 40px; max-width: 1800px; margin: 0 auto; }

section { margin-bottom: 28px; }
section > h2 { font-size: 15px; margin: 0 0 4px; font-weight: 600; }
section > .answer { color: var(--text-muted); margin: 0 0 12px; font-size: 13px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 14px;
}
.card .name { font-size: 12px; font-weight: 600; }
.card .definition { font-size: 10px; line-height: 1.3; color: var(--text-muted); margin-top: 2px; min-height: 26px; }
.card .value { font-size: 24px; font-weight: 700; font-family: var(--font-num); margin-top: 6px; }
.card .sub { font-size: 11px; color: var(--text-muted); }

table { width: 100%; border-collapse: collapse; background: var(--surface);
        border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
td.num { font-family: var(--font-num); text-align: right; }
.scroll { overflow-x: auto; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; border: 1px solid var(--border); }
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.risk { color: var(--risk); border-color: var(--risk); }
.badge.breach { color: var(--breach); border-color: var(--breach); }
.badge.data { color: var(--warn-data); border-color: var(--warn-data); }
.badge.muted { color: var(--text-muted); }

.login-wrap { max-width: 320px; margin: 12vh auto; background: var(--surface);
              border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.login-wrap h1 { font-size: 16px; margin: 0 0 14px; }
.login-wrap label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.login-wrap input {
  width: 100%; padding: 8px 10px; margin-bottom: 12px; background: var(--surface-page);
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font: inherit;
}
.login-wrap button {
  width: 100%; padding: 9px; background: var(--brand-primary); color: #fff;
  border: none; border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer;
}
.login-wrap button:hover { background: var(--brand-dark); }
.error { color: var(--breach); font-size: 12px; margin-bottom: 10px; }

@media (max-width: 560px) {
  main { padding: 14px 12px 40px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  /* раскрытый паспорт на телефоне занимает всю ширину: в узкой колонке он нечитаем */
  .tile-wrap:has(.how[open]) { grid-column: 1 / -1; }

  /* Шапка на телефоне съедала треть экрана. Название остаётся, действия сжимаются
     в один ряд с прокруткой — до содержимого страницы теперь меньше 90 пикселей. */
  header { padding: 8px 12px; gap: 8px 10px; }
  header h1, header > a:first-child { font-size: 14px; }
  header .actions {
    display: flex; gap: 6px; overflow-x: auto; flex: 1 1 100%;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  header .actions::-webkit-scrollbar { display: none; }
  header .actions a, header .actions button {
    white-space: nowrap; padding: 5px 9px; font-size: 12px; flex: 0 0 auto;
  }

  /* Заголовки страниц на телефоне были крупнее содержимого — выравниваем ритм. */
  main > h1 { font-size: 19px !important; line-height: 1.25; }
  section { margin-bottom: 22px; }

  /* Таблицы: подписи столбцов не переносим по букве, значение остаётся читаемым. */
  th, td { padding: 8px 9px; }
  th { white-space: nowrap; }

  .spark svg { width: 100%; }
  .chart svg { height: 170px; }
  .bar-col { min-width: 44px; }
  .bar { width: 26px; }

  /* Палец толще курсора: управляющие элементы получают полноценную область
     нажатия, иначе на телефоне промахиваешься мимо вкладки или кнопки. */
  header .actions a, header .actions button, .tabs a, .cols-menu > button,
  .filters button, form button[type="submit"], .badge-link {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  }
  /* Ссылки в таблицах остаются в строке, но нажимаются по всей высоте ячейки. */
  td a { display: inline-block; padding: 6px 0; }
  /* Ссылки в подзаголовке страницы — тоже не «в одну букву». */
  main > p a, section > .answer a { padding: 4px 0; display: inline-block; }
  .how summary { min-height: 40px; align-items: center; }
  /* Название отдела на главной и ссылка в подписи карточки — тоже цели нажатия. */
  header > a:first-child, .card .sub a { min-height: 40px; display: inline-flex; align-items: center; }
  section > div > div > a { min-height: 40px; display: inline-flex; align-items: center; }
}

a.card.tile { display: block; text-decoration: none; color: inherit; }
a.card.tile:hover { border-color: var(--accent); }
.tile-wrap { display: flex; flex-direction: column; overflow: hidden; }
/* длинная оговорка не должна вылезать за плитку и наезжать на соседнюю */
.tile-wrap .badge.data { display: inline-block; max-width: 100%; white-space: normal;
                         line-height: 1.35; text-align: left; }
.tile-link { display: block; text-decoration: none; color: inherit; flex: 1 1 auto; }
.tile-wrap:hover { border-color: var(--accent); }

/* «Как считается?» — паспорт показателя рядом с самой цифрой, на каждом экране */
.how { margin-top: 10px; border-top: 1px solid var(--border-soft); padding-top: 8px; }
.how summary { font-size: 12px; color: var(--accent); cursor: pointer; list-style: none;
               display: flex; align-items: baseline; gap: 6px; }
.how summary::-webkit-details-marker { display: none; }
.how summary::before { content: "?"; display: inline-flex; align-items: center;
                       justify-content: center; width: 16px; height: 16px; flex: 0 0 16px;
                       border: 1px solid var(--accent); border-radius: 50%; font-size: 11px; }
.how[open] summary { margin-bottom: 8px; }
.how-id { font-family: var(--font-num); font-size: 10px; color: var(--text-muted); }
.how-body { font-size: 12px; line-height: 1.5; color: var(--text); }
.how-body p { margin: 0 0 6px; }
.how-body strong { color: var(--text); }
.how-foot { color: var(--text-muted); font-size: 11px; border-top: 1px solid var(--border-soft);
            padding-top: 6px; }
.how-body code { font-family: var(--font-num); font-size: 11px; }
.value.warn { color: var(--breach); }
td.num.warn { color: var(--breach); font-weight: 600; }

/* ссылки внутри контента — в фирменном стиле, без браузерного синего/фиолетового */
main a { color: var(--accent); text-decoration: none; }
main a:visited { color: var(--accent); }
/* Подчёркиваем только ссылки внутри текста. Карточки и строки таблиц — цельные
   элементы: подчёркивание каждой их части выглядит как рябь. */
main p > a:hover, main li > a:hover, .answer a:hover { text-decoration: underline; }
table a { color: var(--text); }
table a:visited { color: var(--text); }
table a:hover { color: var(--accent); }
.tile-link, .tile-link:hover, .tile-link * { text-decoration: none !important; }

/* столбцы динамики: без библиотек и анимаций, незакрытый месяц светлее */
.bars { display: flex; align-items: flex-end; gap: 14px; padding: 10px 12px;
        background: var(--surface); border: 1px solid var(--border-soft);
        border-radius: var(--radius); overflow-x: auto; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 54px; }
.bar { width: 34px; background: var(--accent); border-radius: 2px 2px 0 0; }
.bar.partial { background: var(--accent-soft); border: 1px solid var(--accent); }
.bar-val { font-family: var(--font-num); font-size: 12px; }
.bar-label { font-size: 10px; color: var(--text-muted); }
@media (max-width: 640px) {
  .bars { gap: 6px; padding: 10px 8px; }
  .bar-col { min-width: 40px; flex: 1; }
  .bar { width: 26px; }
}

/* мини-тренд отдела на главном экране: линия месяца рядом с плитками */
.spark { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.spark svg { width: 240px; height: 34px; flex: 0 0 auto; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5;
                  stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
        border-bottom: 1px solid var(--border); padding-bottom: 0; }
.tabs a { padding: 7px 12px; font-size: 13px; color: var(--text-muted);
          border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; }
.tabs a.active { color: var(--text); background: var(--surface); border-color: var(--border); }
.tabs a:hover { color: var(--text); text-decoration: none; }

.hbar { height: 10px; background: var(--accent); border-radius: 2px; min-width: 2px; }

.filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
           background: var(--surface); border: 1px solid var(--border-soft);
           border-radius: var(--radius); padding: 12px; }
.filters label { font-size: 12px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }
.filters input, .filters select {
  padding: 6px 8px; background: var(--surface-page); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font: inherit; }
.filters button { padding: 7px 12px; background: var(--brand-primary); color: #fff;
  border: none; border-radius: var(--radius); font: inherit; cursor: pointer; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }

/* График динамики: без библиотек, разрыв данных остаётся разрывом */
.chart { background: var(--surface); border: 1px solid var(--border-soft);
         border-radius: var(--radius); padding: 12px 14px; color: var(--accent); }
.chart svg { width: 100%; height: 220px; display: block; }
.chart-line { stroke: var(--accent); }
.chart-dot { fill: var(--accent); }
.chart-axis { display: flex; justify-content: space-between; margin-top: 6px;
              font-size: 11px; color: var(--text-muted); }

.cols-menu { position: relative; display: inline-block; margin-bottom: 6px; }
.cols-menu > button { padding: 4px 10px; font-size: 12px; background: none;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-family: inherit; }
.cols-menu > button:hover { color: var(--text); border-color: var(--accent); }
.cols-list { display: none; position: absolute; z-index: 10; top: 100%; left: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; min-width: 200px; max-height: 280px; overflow: auto; }
.cols-list.open { display: block; }
.cols-list label { display: block; font-size: 12px; padding: 3px 0; cursor: pointer; }

/* ── Формы: браузерные поля не наследуют тёмную тему и выглядели чужеродно ── */
input, select, textarea, button { font-family: inherit; }
/* Списки выбора людей рисовались белым блоком поверх тёмного экрана. */
select, select option, select optgroup {
  background: var(--surface-page); color: var(--text);
}
select[multiple] {
  min-height: 108px; padding: 4px; border: 1px solid var(--border);
  border-radius: var(--radius);
}
select[multiple] option { padding: 4px 6px; border-radius: 3px; }
select[multiple] option:checked {
  background: var(--accent-soft) linear-gradient(var(--accent-soft), var(--accent-soft));
  color: var(--text);
}
/* Поля дат: значок календаря в тёмной теме был почти невидим. */
input[type="date"] { color-scheme: dark; }
:root[data-theme="light"] input[type="date"] { color-scheme: light; }
input::placeholder { color: var(--text-muted); opacity: 1; }

/* Клавиатурная навигация: без этого фокус на тёмном фоне не виден вообще. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, th.sortable:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }

/* ── Ритм плиток: подпись занимала фиксированную высоту и ломала сетку ── */
.card { display: flex; flex-direction: column; }
.card .definition { min-height: 0; margin-bottom: 2px; }
.card .value { margin-top: auto; padding-top: 6px; letter-spacing: -0.01em; }
.card .sub { margin-top: 4px; }
.tile-wrap { transition: border-color .12s ease, background-color .12s ease; }
.tile-wrap:hover { background: var(--selected); }

/* Крупные числа моноширинным давали разрядку «4 9 0   0 0 0» — поджимаем. */
.card .value, .bar-val, td.num { letter-spacing: 0; }
.card .value { font-feature-settings: "tnum" 1; }

/* Кнопки-действия рядом с формами (возражение, план, договорённость). */
form button[type="submit"] {
  background: var(--brand-primary); color: #fff; border: none;
  border-radius: var(--radius); padding: 8px 14px; font: inherit; font-weight: 500;
  cursor: pointer;
}
form button[type="submit"]:hover { background: var(--brand-dark); }
form input:is([type="text"], [type="date"], [type="password"], [type="search"], [type="email"], [type="number"], [type="url"], [type="tel"], :not([type])), form textarea {
  background: var(--surface-page); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); padding: 8px 10px; font: inherit;
}

/* Таблицы: подсветка строки под курсором — глаз не теряет строку на широком экране. */
tbody tr:hover td, table tr:hover td { background: var(--selected); }

/* Действия в шапке — одной группой, чтобы на узком экране они не разъезжались. */
header .actions { display: flex; align-items: center; gap: 8px; }

/* Кнопки в шапке остаются второстепенными: заливку получают только действия
   внутри содержимого страницы, иначе «Обновить данные» перетягивает внимание. */
header .actions button[type="submit"] {
  background: none; color: var(--text-muted); border: 1px solid var(--border);
  padding: 5px 10px; font-weight: 400;
}
header .actions button[type="submit"]:hover { background: none; color: var(--text); border-color: var(--accent); }

/* Знак процента и рубля — частью числа, но тоном спокойнее: цифра важнее знака. */
.card .value .unit { color: var(--text-muted); font-size: .62em; margin-left: 2px; }

/* Оговорка о неполноте данных — сноской под числом, а не рамкой во всю плитку:
   иначе она перетягивает внимание с самой цифры. */
.tile-wrap .badge.data {
  border: none; padding: 0; color: var(--warn-data); font-size: 10.5px;
  display: block; margin-top: 3px;
}
.tile-wrap .badge.data::before { content: "⚠ "; }

/* Числа в таблицах не переносим: «490 000» не должно рваться на две строки. */
td.num, th.num { white-space: nowrap; }

/* ── Отделы на экране директора: плитки рядом, а не столбиком ─────────────── */
.dept-grid { display: grid; gap: 12px;
             grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.dept-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 14px 16px 16px;
  transition: border-color .12s ease, background-color .12s ease;
}
.dept-card:hover { border-color: var(--accent); background: var(--selected); }
.dept-card * { text-decoration: none !important; }
.dept-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.dept-name { font-weight: 600; font-size: 14px; }
.dept-sub { font-size: 11.5px; color: var(--text-muted); min-height: 15px; }
.dept-main { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.dept-value { font-family: var(--font-num); font-size: 30px; font-weight: 700; line-height: 1; }
.dept-label { font-size: 12px; color: var(--text-muted); }
.dept-delta { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.dept-delta.up { color: var(--ok); }
.dept-delta.down { color: var(--breach); }
.dept-extra { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-soft);
              display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px;
              color: var(--text-muted); }
.dept-extra b { font-family: var(--font-num); font-size: 14px; color: var(--text); }

/* ── Панель фильтров: понятные поля и выбор людей галочками ───────────────── */
.filter-panel { background: var(--surface); border: 1px solid var(--border-soft);
                border-radius: var(--radius); padding: 14px 16px; display: flex;
                flex-direction: column; gap: 12px; }
.filter-row { display: flex; gap: 14px; flex-wrap: wrap; }
.filter-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px;
                color: var(--text-muted); }
.filter-field input { padding: 9px 11px; background: var(--surface-page);
                      border: 1px solid var(--border); border-radius: var(--radius);
                      color: var(--text); font: inherit; min-width: 160px; }
.people-picker { border: 1px solid var(--border); border-radius: var(--radius);
                 background: var(--surface-page); }
.people-picker summary { cursor: pointer; list-style: none; padding: 10px 12px;
                         display: flex; justify-content: space-between; align-items: center;
                         font-size: 13px; }
.people-picker summary::-webkit-details-marker { display: none; }
.people-picker summary::after { content: "▾"; color: var(--text-muted); font-size: 11px; }
.people-picker[open] summary::after { content: "▴"; }
.people-count { color: var(--text-muted); font-size: 12px; }
.people-list { display: grid; gap: 2px; padding: 4px 8px 10px;
               grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
               max-height: 260px; overflow-y: auto; }
.person { display: flex; align-items: center; gap: 9px; padding: 7px 8px;
          border-radius: 6px; font-size: 13px; cursor: pointer; }
.person:hover { background: var(--selected); }
.person input { width: 17px; height: 17px; accent-color: var(--brand-primary);
                cursor: pointer; flex: 0 0 auto; }
.filter-actions { display: flex; align-items: center; gap: 12px; }
.filter-actions button { background: var(--brand-primary); color: #fff; border: none;
                         border-radius: var(--radius); padding: 10px 20px; font: inherit;
                         font-weight: 500; cursor: pointer; }
.filter-actions button:hover { background: var(--brand-dark); }
.filter-reset { font-size: 13px; color: var(--text-muted); }

/* ── Раскрывающиеся блоки: главное сразу, подробности по требованию ───────── */
.fold > summary {
  cursor: pointer; list-style: none; font-size: 14px; font-weight: 600;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); display: flex; align-items: center; gap: 9px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸"; color: var(--text-muted); font-size: 12px; }
.fold[open] > summary::before { content: "▾"; }
.fold > summary:hover { border-color: var(--accent); }
.fold[open] > summary { border-radius: var(--radius) var(--radius) 0 0;
                        border-bottom-color: transparent; }
.fold-body { border: 1px solid var(--border-soft); border-top: none;
             border-radius: 0 0 var(--radius) var(--radius); padding: 4px 14px 14px; }
.fold-body > h2 { display: none; }

/* ── Разговор по объекту ──────────────────────────────────────────────────── */
.chat-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
             border: 1px solid var(--border); border-radius: var(--radius);
             background: var(--surface); color: var(--text); font-size: 13px;
             text-decoration: none; }
.chat-link:hover { border-color: var(--accent); background: var(--selected); }
.chat-link.compact { padding: 4px 8px; font-size: 15px; line-height: 1; }
.chat-icon { font-size: 15px; }
.chat-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
            margin: 0 0 18px; }
.chat-cta-note { font-size: 12px; color: var(--text-muted); }

.chat-warning { background: var(--accent-soft); border: 1px solid var(--accent);
                border-radius: var(--radius); padding: 11px 14px; font-size: 13px;
                margin-bottom: 14px; }
.chat-history { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                background: var(--surface); border: 1px solid var(--border-soft);
                border-radius: var(--radius); padding: 11px 14px; margin-bottom: 14px; }
.chat-history-line { flex: 1; min-width: 240px; font-size: 13px; }
.chat-history-form { margin: 0; }
.chat-history-form button { background: var(--brand-primary); color: #fff; border: none;
       border-radius: var(--radius); padding: 9px 16px; font: inherit; cursor: pointer; }
.chat-history-form .btn-quiet { background: transparent; color: var(--text);
       border: 1px solid var(--border); }
.chat-history-form .btn-quiet:hover { border-color: var(--accent); }
.chat-gaps { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }
.chat-gaps summary { cursor: pointer; }
.chat-gaps ul { margin: 6px 0 0 18px; padding: 0; }
.chat-empty { background: var(--surface); border: 1px solid var(--border-soft);
              border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.chat-empty p { margin: 0 0 8px; font-size: 13px; }
.chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.msg { border: 1px solid var(--border-soft); border-radius: var(--radius);
       padding: 11px 14px; background: var(--surface); max-width: 760px; }
.msg.human { background: var(--selected); align-self: flex-end; }
.msg.waiting { border-style: dashed; }
.msg-head { font-size: 11px; color: var(--text-muted); margin-bottom: 5px;
            display: flex; gap: 10px; }
.msg-time { margin-left: auto; }
.msg-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.msg-note { margin-top: 7px; font-size: 11px; color: var(--text-muted); }
.chat-form { display: flex; gap: 10px; }
.chat-form input[name="question"] { flex: 1; padding: 11px 13px;
       background: var(--surface-page); border: 1px solid var(--border);
       border-radius: var(--radius); color: var(--text); font: inherit; }
.chat-form button { background: var(--brand-primary); color: #fff; border: none;
       border-radius: var(--radius); padding: 11px 20px; font: inherit;
       font-weight: 500; cursor: pointer; }
.chat-form button:hover { background: var(--brand-dark); }
.row-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ── Ровная вёрстка: правки после осмотра экранов 13.09.2026 ──────────────── */

/* Крупные числа моноширинным разъезжались: «+15 , 2%». Берём основной шрифт
   с табличными цифрами — колонки так же выровнены, но текст не рваный. */
.card .value, .dept-value {
  font-family: var(--font-main);
  font-variant-numeric: tabular-nums;
}

/* Шесть отделов ложились 4+2 и второй ряд не добирал ширину. Три в ряд —
   плитки одинаковые, ряды ровные. */
@media (min-width: 1100px) {
  .dept-grid { grid-template-columns: repeat(3, 1fr); }
}

/* На телефоне верхние кнопки уезжали за край: «Светлая тема» и «Выйти»
   не были видны, а горизонтальная прокрутка не заметна. Переносим строкой. */
@media (max-width: 640px) {
  header .actions { flex-wrap: wrap; overflow-x: visible; }
  .cabinet-home-grid, .cabinet-grid { grid-template-columns: 1fr; }
  .cabinet-choice { min-height: 68px; }
  .employee-tabs { position: sticky; top: 86px; z-index: 4; background: var(--surface-page); flex-wrap: nowrap; overflow-x: auto; }
  .employee-tabs a { white-space: nowrap; flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; }
  .cabinet-person-quick, .team-mobile-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cabinet-person-quick a, .team-mobile-shortcuts a { min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); padding: 7px; }
}

/* Shared presentation formerly repeated inside templates. */
:root .apm-text-muted { color:var(--text-muted); }
:root .apm-text-small { font-size:12px; }
:root .apm-mt-6 { margin-top:6px; }
:root .apm-mt-8 { margin-top:8px; }
:root .apm-mt-10 { margin-top:10px; }
:root .apm-mt-12 { margin-top:12px; }
:root .apm-mt-14 { margin-top:14px; }
:root .apm-mb-10 { margin-bottom:10px; }
:root .apm-mb-12 { margin-bottom:12px; }
:root .apm-note-space { margin:6px 0; }
:root .apm-intro-space { margin:0 0 18px; }
:root .apm-inline { display:inline; }
:root .apm-col-22 { width:22%; }
:root .apm-col-35 { width:35%; }
:root .apm-col-40 { width:40%; }
:root .apm-col-45 { width:45%; }
:root .apm-col-50 { width:50%; }
:root .apm-selected { background:var(--selected); }
:root .apm-page-title { font-size:22px;margin:0 0 4px; }
:root .apm-page-title-spaced { font-size:22px;margin:0 0 12px; }
:root .apm-metric-title { font-size:22px;margin:0 0 2px; }
:root .apm-person-intro { color:var(--text-muted);margin:0 0 14px; }
:root .apm-metric-intro { color:var(--text-muted);margin:0 0 16px; }
:root .apm-agreement-input { flex:1;min-width:260px; }
:root .apm-comment-input { flex:1;min-width:280px; }
:root .apm-tab-caption { margin-left:auto;color:var(--text-muted);font-size:12px;align-self:center; }
:root .apm-form-field { width:100%;margin-bottom:6px;padding:6px;background:var(--surface-page);border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit; }
:root .apm-number-input { padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit;width:120px; }
:root .apm-search-input { padding:6px 10px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit; }

/* SVG observations keep the same bar geometry; unknown has no numeric bar. */
svg.bar{display:block;flex:none}.bar-shape{fill:var(--accent)}.bar.partial .bar-shape{fill:var(--accent-soft)}.bar-missing{font-size:12px;color:var(--text-muted)}

/* ── Что сделать сейчас: первое, что видит человек на своём экране ──────────── */
.attention-now { margin-bottom: 22px; }
.attention-count {
  display: inline-block; margin-left: 8px; padding: 1px 10px;
  border-radius: 12px; background: var(--breach); color: #fff;
  font-size: 14px; font-weight: 600; vertical-align: middle;
}
.attention-list { display: grid; gap: 10px;
                  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.attention-item {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--breach); border-radius: var(--radius);
  padding: 12px 14px; text-decoration: none; color: inherit;
}
a.attention-item:hover { border-color: var(--accent); border-left-color: var(--breach); }
.attention-value { font-size: 26px; font-weight: 700; line-height: 1.1;
                   font-variant-numeric: tabular-nums; }
.attention-title { font-size: 13px; }
.attention-note { font-size: 11px; color: var(--text-muted); }

/* Просрочки в карточке человека: видно до захода в его кабинет. */
.cabinet-person-overdue { margin: 4px 0 0; font-size: 12px; color: var(--breach); }
.cabinet-person-overdue b { font-size: 15px; }

/* ── Панель фильтров: частые сверху, остальные под раскрытием ───────────────── */
.filter-panel { background: var(--surface); border: 1px solid var(--border-soft);
                border-radius: var(--radius); padding: 14px; margin-bottom: 16px; }
.filter-row { display: grid; gap: 12px;
              grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.filter-item { display: flex; flex-direction: column; gap: 4px; }
.filter-item label { font-size: 12px; font-weight: 600; }
.filter-item input { padding: 7px 9px; background: var(--surface-page); color: var(--text);
                     border: 1px solid var(--border); border-radius: var(--radius); font: inherit; }
.filter-range { display: flex; gap: 6px; }
.filter-range input { width: 100%; min-width: 0; }
.filter-hint { font-size: 11px; color: var(--text-muted); }
.filter-more { margin-top: 12px; }
.filter-more summary { cursor: pointer; font-size: 13px; }
.filter-more .filter-row { margin-top: 10px; }
.filter-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.filter-actions button { background: var(--brand-primary); color: #fff; border: none;
       border-radius: var(--radius); padding: 9px 20px; font: inherit; cursor: pointer; }
.filter-actions button:hover { background: var(--brand-dark); }

/* Доля стоящих без движения: горизонтальная полоса рядом с числом. */
.share-bar { display: inline-block; width: 90px; height: 8px; vertical-align: middle;
             background: var(--border-soft); border-radius: 4px; overflow: hidden; }
.share-fill { display: block; height: 100%; background: var(--accent); }
.share-fill.warn { background: var(--breach); }
.share-val { font-family: var(--font-num); font-size: 12px; margin-left: 8px; }

/* ── Плотная раскладка под компьютер ────────────────────────────────────────
   Руководитель работает с монитора: главное должно помещаться в первый экран,
   а не разъезжаться в столбик по трети ширины. Телефон адаптируется отдельно. */
@media (min-width: 1280px) {
  /* Заголовок страницы и подпись занимают меньше высоты. */
  .apm-page-title { margin-bottom: 2px; }
  .apm-intro-space { margin-bottom: 12px; }
  section { margin-bottom: 20px; }
  section > h2 { font-size: 16px; }

  /* Карточки плотнее: на широком экране их помещается больше в ряд. */
  .cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
  .card { padding: 10px 12px; }
  .card .value { font-size: 22px; }

  /* Панель фильтров — одной строкой, без пустого места справа. */
  .filter-panel { padding: 10px 14px; }
  .filter-row { grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); }
  .filter-actions { margin-top: 10px; }
  .filter-actions button { padding: 7px 18px; }

  /* Что требует реакции — компактнее, помещается рядом с остальным. */
  .attention-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
  .attention-item { padding: 9px 12px; }
  .attention-value { font-size: 22px; }

  /* Таблицы плотнее: больше строк без прокрутки. */
  th, td { padding: 5px 10px; }
}

/* Две колонки для соседних разделов: главное видно рядом, а не одно под другим. */
@media (min-width: 1500px) {
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .pair > section { margin-bottom: 0; }
}

@media (min-width: 1280px) {
  /* Панель фильтров не должна съедать четверть экрана. Поля идут сеткой, подсказка
     в одну строку с многоточием, кнопка встаёт последней ячейкой той же сетки.
     Делать панель гибким контейнером нельзя: сетка внутри схлопывается в столбец. */
  /* Подсказки разной длины разъезжали поля по высоте: держим одну строку и
     одинаковую высоту, тогда все поля стоят в линию. */
  .filter-hint { display: block; min-height: 14px; max-width: 220px; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
  .filter-item label { min-height: 16px; }
  .filter-panel .filter-row { align-items: start; }
  /* «Все фильтры» и кнопка — в одной строке под полями: иначе панель тянется
     пустотой на треть экрана. */
  .filter-panel { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; }
  .filter-panel .filter-row { grid-column: 1 / -1; }
  .filter-more { grid-column: 1; margin-top: 0; align-self: center; }
  .filter-actions { grid-column: 2; margin-top: 0; justify-self: end; align-self: center; }

  /* Колонки таблиц по содержимому, а не растянуты на всю ширину. */
  td.num, th.num { white-space: nowrap; }
  .row-actions { justify-content: flex-end; }
}

/* ── Печать и выгрузка в PDF ────────────────────────────────────────────────
   На бумаге нужны показатели, а не меню: шапка, навигация и кнопки действий
   занимают целый экран и ничего не сообщают. */
@media print {
  header, nav.tabs, .cabinet-shell-nav, .filter-panel, .row-actions,
  .apm-back-button, .breadcrumbs, .filter-actions, .filter-more { display: none !important; }
  main { max-width: none; padding: 0; }
  section { break-inside: avoid; margin-bottom: 14px; }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .card, .attention-item, table { break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
  .fold summary { display: none; }
  .fold .fold-body, details > *:not(summary) { display: block !important; }
}

/* Переключение отделов — первое действие: крупные вкладки под шапкой. */
.dept-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; }
.dept-tabs a { padding: 9px 18px; border: 1px solid var(--border); border-radius: 8px;
               color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; }
.dept-tabs a:hover { border-color: var(--accent); }
.dept-tabs a.active { background: var(--brand-primary); border-color: var(--brand-primary);
                      color: #fff; }

/* Компактные плитки показателей сотрудника: число крупно, имя, доля — и всё. */
.metric-cards-compact .card { padding: 12px 14px; min-width: 130px; }
.metric-cards-compact .value { font-size: 26px; line-height: 1.1; }
.metric-cards-compact .name { font-size: 13px; margin-top: 2px; }
.metric-cards-compact .sub { font-size: 12px; }

/* План на неделю — одна строка: вопрос, поле, кнопка. */
.week-plan-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.week-plan-form label { display: flex; flex-direction: column; gap: 6px; }
.week-plan h2 span { font-weight: 400; font-size: 14px; }