/* ============================================================================
   design.css — система оформления HR-портала.

   Это НАДСТРОЙКА над hr.css: подключается после него и задаёт то, что общее для
   всех страниц — шрифт, шкалу размеров, движение, браузерные поверхности, фон.
   Компоненты (карточки, таблицы, кнопки) остаются в hr.css; здесь только система,
   поэтому правка одного файла меняет вид сразу везде и не ломает разметку.

   Порядок подключения обязателен:   <link hr.css>  →  <link design.css>
   Иначе tokens из hr.css перекроют здешние.

   Содержание:
     1. Шрифт (Golos Text, self-hosted: CDN в портале запрещён политикой сервера)
     2. Токены: размеры текста, движение, глубину и цвет
     3. Основа: фон, текст, заголовки
     4. Браузерные поверхности: выделение, полосы прокрутки, каретка, фокус
     5. Движение: появление, нажатие, загрузка
     6. Уважение к настройке «меньше движения»
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. ШРИФТ

   Golos Text — русский шрифт: кириллица у него родная, а не добавленная позже,
   цифры табличные (в колонках не «прыгают»), есть все начертания в одном файле.
   Лежит рядом с порталом, в сеть за ним никто не ходит.
   ---------------------------------------------------------------------------- */

@font-face {
  font-family: 'Golos Text';
  src: url('fonts/golos-text-cyrillic.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Golos Text';
  src: url('fonts/golos-text-latin.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Golos Text';
  src: url('fonts/golos-text-latin-ext.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ----------------------------------------------------------------------------
   2. ТОКЕНЫ

   Здесь собрано то, чем меряется весь портал. Значения взяты не «на глаз»:
   размеры — единая шкала (шаг около 1,14, как принято в рабочих интерфейсах),
   движение — четыре длительности и четыре кривые, тени — с подтоном в цвет фона
   (чистая чёрная тень на светлом фоне выглядит грязно).
   ---------------------------------------------------------------------------- */

:root {
  /* --- Шрифт --- */
  --font-sans: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-num: 'Golos Text', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Шкала размеров текста: одна на весь портал, без случайных чисел --- */
  --text-xs: 12px;    /* только служебные подписи, не для чтения */
  --text-sm: 13px;    /* плотные таблицы, подсказки */
  --text-base: 14px;  /* основной текст — ниже нельзя */
  --text-md: 16px;    /* акцентный текст, крупные строки */
  --text-lg: 18px;    /* подзаголовки, значения плиток */
  --text-xl: 22px;    /* заголовки карточек и разделов */
  --text-2xl: 28px;   /* заголовок страницы */
  --text-3xl: 36px;   /* редкие крупные числа */

  /* --- Насыщенность: 400 / 500 / 600 / 700, без «почти одинаковых» --- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Междустрочный интервал --- */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  /* --- Движение: длительность по размеру элемента, кривые — по смыслу --- */
  --dur-micro: 140ms;   /* наведение, нажатие, фокус */
  --dur-base: 220ms;    /* раскрытие, смена вкладки */
  --dur-large: 420ms;   /* появление блока, крупная смена */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);      /* появление */
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);    /* исчезновение */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);   /* перемещение */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);    /* отклик с лёгким перелётом */

  /* --- Скругления: три ступени и «таблетка», больше не заводим --- */
  --radius-pill: 999px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  /* --- Глубина: тень подкрашена фоном, а не чистым чёрным --- */
  --shadow-1: 0 1px 2px rgba(29, 29, 31, 0.06), 0 2px 8px rgba(29, 29, 31, 0.05);
  --shadow-2: 0 2px 6px rgba(29, 29, 31, 0.07), 0 12px 32px rgba(29, 29, 31, 0.09);
  --shadow-3: 0 4px 12px rgba(29, 29, 31, 0.08), 0 24px 56px rgba(29, 29, 31, 0.14);

  /* --- Прозрачность состояний: нажатие, наведение, выбранное --- */
  --state-hover: rgba(99, 102, 241, 0.07);
  --state-active: rgba(99, 102, 241, 0.14);
  --border-soft: rgba(29, 29, 31, 0.07);
  --border-strong: rgba(29, 29, 31, 0.14);
}

[data-theme="dark"] {
  --state-hover: rgba(129, 140, 248, 0.09);
  --state-active: rgba(129, 140, 248, 0.18);
  --border-soft: rgba(241, 245, 249, 0.08);
  --border-strong: rgba(241, 245, 249, 0.16);
  /* В тёмной теме тень почти не видна: глубину даёт светлая кромка сверху. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.4);
}

/* Светлая тема у системы, а выбор в портале не сделан (то же, что в hr.css). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --state-hover: rgba(129, 140, 248, 0.09);
    --state-active: rgba(129, 140, 248, 0.18);
    --border-soft: rgba(241, 245, 249, 0.08);
    --border-strong: rgba(241, 245, 249, 0.16);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.4);
  }
}

/* ----------------------------------------------------------------------------
   3. ОСНОВА: фон, текст, заголовки

   Фон — не картинка и не анимация: он статичный, поэтому не заставляет браузер
   перерисовывать экран. Светлые пятна только придают объём, данные читаются
   поверх них одинаково хорошо в обеих темах.
   ---------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: var(--leading-normal);
  /* Сглаживание: на светлом фоне текст тоньше, поэтому включаем субпиксельное. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--accent);
  /* Смена темы без «мигания»: меняем только цвета, не геометрию. */
  transition: background-color var(--dur-base) var(--ease-in-out), color var(--dur-base) var(--ease-in-out);
}

/* --- Заголовки: одна шкала, заметные ступени по размеру и весу --- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  text-wrap: balance;   /* заголовок не оставляет одно слово на последней строке */
}
h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
h5 { font-size: var(--text-base); font-weight: var(--weight-semibold); }

/* --- Проза: строка не длиннее 70 знаков, иначе глаз теряет начало --- */
p { line-height: var(--leading-normal); }
.prose p, .prose li { max-width: 70ch; }

/* --- Числа: табличные цифры, чтобы столбцы не «плясали» при смене значений --- */
.kpi-value, .metric-value, .emp-index, .ana-nums, .ana-row-value, td, th,
[data-numeric], .value, .number, .stat-value, time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Ссылки: подчёркивание с отступом от букв, а не вплотную --- */
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ----------------------------------------------------------------------------
   4. БРАУЗЕРНЫЕ ПОВЕРХНОСТИ

   Это части интерфейса, которые никто не рисует: выделение текста, полосы
   прокрутки, каретка, кольцо фокуса. По умолчанию они из чужого оформления и
   выдают, что страницу собрали, а не сделали. Настраиваем их из своей палитры.
   ---------------------------------------------------------------------------- */

::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--text-primary);
}

/* Кольцо фокуса: видно всегда, когда идёшь с клавиатуры, и не мешает мыши. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Полоса прокрутки: тонкая, в цвет темы; во тёмной теме не «светится». */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  /* Кромка в цвет фона делает полосу тоньше визуально. */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Поля ввода: одинаковое поведение во всём портале. */
input, textarea, select, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }

/* Списки без «чужих» маркеров там, где разметка сама задаёт оформление. */
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

/* Изображения и иконки не «дёргаются» при загрузке. */
img, svg { max-width: 100%; }

/* ----------------------------------------------------------------------------
   5. ДВИЖЕНИЕ

   Портал рабочий, поэтому движения здесь мало и оно всегда что-то объясняет:
   что блок появился, что нажатие сработало, что данные ещё грузятся. Ничего не
   крутится само по себе и не встречает пользователя представлением.

   Двигаем только transform и opacity: их считает видеокарта, пересчёта вёрстки
   нет. Именно поэтому в правилах ниже нигде не встречаются width, height, top,
   left — движение по этим свойствам заставляет браузер пересобирать страницу
   на каждом кадре и заметно тормозит на слабых машинах.
   ---------------------------------------------------------------------------- */

@keyframes hr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hr-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hr-pop { 0% { transform: scale(0.98); } 60% { transform: scale(1.004); } 100% { transform: scale(1); } }
@keyframes hr-shimmer { from { background-position: -160% 0; } to { background-position: 260% 0; } }
@keyframes hr-spin { to { transform: rotate(360deg); } }
@keyframes hr-flash {
  from { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
  to { background-color: transparent; }
}

/* --- Появление содержимого ---
   По умолчанию всё видно. Прятать элемент и показывать его анимацией можно только
   тогда, когда страница точно работает: класс .hr-anim ставит скрипт. Если скрипт
   не выполнился, пользователь увидит обычную страницу, а не пустоту. */
.hr-anim [data-reveal] { animation: hr-rise var(--dur-large) var(--ease-out) both; }
.hr-anim [data-reveal='fade'] { animation-name: hr-fade-in; }

/* Каскад: номер задаётся в разметке (style="--i:0"), после восьмого шаг не растёт, */
/* иначе последние карточки появлялись бы через секунду. */
.hr-anim [data-reveal][style*='--i'] {
  animation-delay: calc(min(var(--i, 0), 8) * 45ms);
}

/* --- Отклик на действие --- */
@media (hover: hover) and (pointer: fine) {
  .card, .employee-card, .kpi-card, .picker-item, .dash-link, .filter-tab, .sort-chip {
    transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out),
      border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
  }
  .employee-card:hover, .kpi-card:hover, .picker-item:hover, .dash-link:hover { transform: translateY(-2px); }
}

/* Нажатие: элемент слегка «проседает» — палец и мышь получают отклик. */
.card:active, .employee-card:active, .kpi-card:active, .btn:active, .picker-item:active, .dash-link:active {
  transform: translateY(0) scale(0.995);
  transition-duration: 60ms;
}

/* На телефоне наведение «залипает» после касания, поэтому там его нет вовсе. */
@media (hover: none) {
  .employee-card:hover, .kpi-card:hover, .picker-item:hover, .dash-link:hover { transform: none; }
}

/* --- Загрузка --- */
/* Скелетон повторяет форму будущего блока, поэтому страница не «прыгает». */
.skeleton, .skeleton-line, .skeleton-kpi {
  background-image: linear-gradient(90deg,
    var(--ring-bg) 0%, color-mix(in srgb, var(--accent) 8%, var(--ring-bg)) 50%, var(--ring-bg) 100%);
  background-size: 260% 100%;
  animation: hr-shimmer 1.4s var(--ease-in-out) infinite;
}

/* --- Обновление данных: подсветка строки вместо перерисовки --- */
.hr-updated { animation: hr-flash 900ms var(--ease-out); }

/* --- Подсказки и выпадающие списки --- */
.tooltip, [role='tooltip'], .dropdown-menu, .popover {
  animation: hr-rise var(--dur-base) var(--ease-out) both;
}

/* --- Переход между темами: мягко, но без задержки работы --- */
@media (prefers-reduced-motion: no-preference) {
  .theme-transition, .theme-transition * {
    transition: background-color 240ms var(--ease-in-out), color 240ms var(--ease-in-out),
      border-color 240ms var(--ease-in-out) !important;
  }
}

/* ----------------------------------------------------------------------------
   6. ФОН: один язык для обеих тем

   Светлая и тёмная темы — это один и тот же рисунок при разном освещении, а не
   два разных оформления. Основа — ровный градиент по диагонали, поверх него два
   очень слабых световых пятна. Пятна статичные: фон не перерисовывается, пока
   пользователь работает, и не мешает читать текст поверх.
   ---------------------------------------------------------------------------- */

:root,
[data-theme='light'] {
  --bg-gradient:
    radial-gradient(1100px 620px at 8% -8%, rgba(99, 102, 241, 0.07), transparent 62%),
    radial-gradient(900px 560px at 104% 4%, rgba(59, 130, 246, 0.05), transparent 60%),
    linear-gradient(160deg, #f6f6f8 0%, #eef0f6 46%, #f4f3f8 100%);
}

[data-theme='dark'] {
  --bg-gradient:
    radial-gradient(1100px 620px at 8% -8%, rgba(129, 140, 248, 0.13), transparent 62%),
    radial-gradient(900px 560px at 104% 4%, rgba(96, 165, 250, 0.09), transparent 60%),
    linear-gradient(160deg, #0b0f1a 0%, #0c1120 52%, #0a0e18 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-gradient:
      radial-gradient(1100px 620px at 8% -8%, rgba(129, 140, 248, 0.13), transparent 62%),
      radial-gradient(900px 560px at 104% 4%, rgba(96, 165, 250, 0.09), transparent 60%),
      linear-gradient(160deg, #0b0f1a 0%, #0c1120 52%, #0a0e18 100%);
  }
}

/* ----------------------------------------------------------------------------
   7. УВАЖЕНИЕ К НАСТРОЙКЕ «МЕНЬШЕ ДВИЖЕНИЯ»

   Если человек включил в системе уменьшение анимации (при укачивании, при
   слабом зрении, ради экономии батареи), портал обязан работать без неё: всё
   показывается сразу, ничего не мигает и не подпрыгивает. Это не «упрощение для
   меньшинства», а нормальное поведение рабочего инструмента.
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .hr-anim [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .skeleton, .skeleton-line, .skeleton-kpi { animation: none !important; background-image: none; }
  .card:active, .employee-card:active, .kpi-card:active, .btn:active { transform: none; }
}

/* ----------------------------------------------------------------------------
   8. МЕЛОЧИ, КОТОРЫЕ ЗАМЕТНЫ
   ---------------------------------------------------------------------------- */

/* Длинные подписи не растягивают блок, а аккуратно переносятся. */
.badge, .chip, .filter-tab, .sort-chip { white-space: nowrap; }

/* Длинные имена и названия отделов: переносим по словам, а не режем посередине. */
.employee-name, .profile-name, .person-name, .dept-name { overflow-wrap: anywhere; }

/* Прокручиваемые списки: край «тает», а не обрывается резкой линией. */
.scroll-hint {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}

/* Печать: белый лист, без фона, теней и лишних элементов управления. */
@media print {
  body { background: #fff !important; color: #000; }
  .sidebar, .header, .mobile-menu-btn, .btn, .filter-tab, .sort-chip, .no-print { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #d1d5db !important; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

/* ----------------------------------------------------------------------------
   9. ТИПОГРАФИЧЕСКАЯ ШКАЛА: ПРИВЕДЕНИЕ

   До этой правки в портале было 19 разных размеров текста — 14, 15, 16, 17, 18,
   19, 20, 22, 24, 26, 28, 30, 34, 40, 44, 48, 52, 64, 72. Разница в один пиксель
   глазом не читается как ступень, зато выглядит небрежно: соседние блоки кажутся
   случайно разными. Оставляем девять ступеней — по ним видно, что больше, а что
   меньше. Ниже перечислены только те селекторы, которые выбивались из шкалы.
   ---------------------------------------------------------------------------- */

/* Служебные подписи и заголовки блоков: 15 → 16 */
.chart-title,
.section-title,
.card-title { font-size: var(--text-md); }

/* Заголовок третьего уровня и название портала: 17 → 18 */
h3,
.brand,
.header-title,
.sidebar-logo span { font-size: var(--text-lg); }

/* Балл в шкале анкеты: 19 → 18 (крупные цифры в узкой колонке читаются и так) */
.scale-option .score { font-size: var(--text-lg); }

/* Главный заголовок страницы и крупные значения: 26 → 28 */
h1,
.kpi-value,
.meta-value { font-size: var(--text-2xl); }

/* Пароль, который показывают один раз: 30 → 28, он и так заметен */
.access-password-value { font-size: var(--text-2xl); }

/* Крупные числа-показатели (индекс баланса, совместимость, группа):
   было 40 / 44 / 48 / 52 / 64 / 72 — шесть размеров на одну роль. Оставляем один,
   на узком экране меньше: это одно и то же число, оно не должно «плавать». */
.big-figure,
.compat-score-big,
.lab-score-value {
  font-size: 48px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .big-figure,
  .compat-score-big,
  .lab-score-value { font-size: var(--text-3xl); }
}

/* Подписи внутри крупных показателей: одинаковые, а не «как получилось».
   Размер — 14px, а не 13: подпись «Сотрудников в портале» человек читает, значит
   на неё распространяется то же правило, что и на весь текст портала. Проверка
   страниц это ловит: 13px в подписи плитки — провал. */
.kpi-label,
.metric-label,
.dash-stat-label {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* Служебные пометки: 12px только там, где это не текст для чтения (номер версии). */
/* Плашки («прошёл анкету», «уволен») человек читает, поэтому 14px; 12px остаётся
   только у строки версии в подвале меню. */
.badge,
[data-size='sm'] { font-size: var(--text-base); }
.sidebar-footer { font-size: var(--text-xs); }

/* ----------------------------------------------------------------------------
   10. АКЦЕНТ ДЛЯ ТЕКСТА (ссылки и активный пункт меню)

   Акцентный цвет #6366F1 хорош как заливка кнопки, но как ЦВЕТ ТЕКСТА на светлом
   фоне даёт контраст 4,10 — ниже нормы 4,5. Глазом это читается как «бледно», а
   измерение это подтверждает. Поэтому у акцента две роли:
     --accent       — заливка (фон кнопки, полоса диаграммы, индикатор);
     --accent-text  — текст (ссылки, активный пункт меню, подпись со смыслом).

   Для текста берём тот же цвет на ступень темнее: он остаётся тем же индиго, но
   читается — 5,77 на фоне страницы и 5,48 на подложке активного пункта.
   В тёмной теме акцент и так светлый, поэтому там роль одна и та же.
   ---------------------------------------------------------------------------- */

:root,
[data-theme='light'] {
  --accent-text: #4F46E5;
  --accent-text-hover: #4338CA;
}

[data-theme='dark'] {
  --accent-text: #A5B4FC;
  --accent-text-hover: #C7D2FE;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --accent-text: #A5B4FC;
    --accent-text-hover: #C7D2FE;
  }
}

/* Ссылки и активный пункт меню берут цвет для текста, а не для заливки. */
a,
.person-link,
.section-link,
.link,
.sidebar-nav li.active,
.sidebar-nav li.active a { color: var(--accent-text); }

a:hover,
.person-link:hover,
.section-link:hover,
.sidebar-nav li.active:hover a { color: var(--accent-text-hover); }

/* Иконка внутри активного пункта — тоже текст, а не заливка. */
.sidebar-nav li.active svg { stroke: var(--accent-text); }