/* ==========================================================================
   Alfa Hunter Report — тема поверх Bootstrap 5.3
   ==========================================================================
   Правила: не редактировать bootstrap.min.css; все переопределения — здесь.
   Порядок подключения: bootstrap.min.css -> bootstrap-icons.css -> theme.css
   -> components.css -> utilities.css (см. docs/UI_FRAMEWORK.md).

   Стратегия переопределения (важно для дальнейшей поддержки):
   1. Глобальные custom properties Bootstrap (--bs-primary, --bs-body-bg,
      --bs-border-radius и т.п.) переопределяются один раз в :root — их
      подхватывают все компоненты, которые сами ссылаются на них через var()
      (card, table, toast, form-control, alert).
   2. Часть компонентов Bootstrap 5.3 хранит свои цвета уже посчитанными в
      скомпилированном CSS (например .btn-primary, .form-check-input:checked,
      .nav-pills, .dropdown-item.active, .pagination .active) — им нужны
      точечные переопределения ИХ СОБСТВЕННЫХ custom properties, а не
      глобальных. Это официальный способ темизации Bootstrap 5.2+, не хак.
   ========================================================================== */

:root {
  /* Фирменные --color-* токены объявлены ниже, в блоке ":root,
     [data-bs-theme='light']" / "[data-bs-theme='dark']" — единственное
     место, откуда они переопределяются под тему. Здесь — то, что от темы
     не зависит (радиусы, шрифт) и --bs-* alias'ы, которые читают --color-*
     через var() и поэтому сами по себе темонезависимы. */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Нормативный вертикальный отступ между соседними Entity Section-карточками
     entity-страницы (docs/UI_FRAMEWORK.md#entity-section) — один токен вместо
     разных `mb-3`/`mb-4` на разных страницах. Значение равно Bootstrap `mb-4`
     (1.5rem), чтобы не вводить визуально новый шаг вне существующей шкалы. */
  --space-section-gap: 1.5rem;

  /* --- Глобальные переменные Bootstrap --- */
  --bs-body-font-family: var(--font-family);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-border-color-translucent: var(--color-border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--radius-lg);
  --bs-box-shadow: 0 8px 24px rgba(28, 35, 48, 0.14);

  /* Ссылки/кликабельный текст (имя кандидата, название проекта, телефон,
     email, вложения, строки таблиц) — тёмно-синий, НЕ золото: золото у
     обычного текстового линка на светлом фоне даёт недостаточный контраст.
     Золото остаётся зарезервировано за primary CTA (--bs-primary), активными
     акцентами и badge/chip — они не читают --color-link. Сами значения
     --color-link/--color-link-hover/их rgb-варианты объявлены в блоке
     light/dark ниже (там же, где остальные --color-*, под тему). */
  --bs-link-color: var(--color-link);
  --bs-link-color-rgb: var(--color-link-rgb);
  --bs-link-hover-color: var(--color-link-hover);
  --bs-link-hover-color-rgb: var(--color-link-hover-rgb);

  /* Трёхуровневая шкала приглушённого текста Bootstrap (.text-body,
     .text-muted/.text-body-secondary, .text-body-tertiary) — переиспользуем
     вместо собственных утилит text-soft/text-faint (см. docs/UI_FRAMEWORK.md
     про известную проблему контраста text-faint). */
  --bs-secondary-color: var(--color-text-soft);
  --bs-tertiary-color: var(--color-text-faint);

  /* Bootstrap "primary" = наш акцент (золото) — это цвет основного CTA и
     в старой, и в новой системе, поэтому семантика совпадает 1:1. */
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 205, 168, 67;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 178, 58, 58;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 201, 138, 46;
  --bs-success: var(--color-success);
  --bs-success-rgb: 44, 90, 60;

  /* Bootstrap "secondary"/"dark" переиспользуем под наш тёмно-синий —
     нужен для .bg-dark/.text-bg-dark на сайдбаре и активных пунктах меню. */
  --bs-dark: var(--color-primary);
  --bs-dark-rgb: 46, 58, 81;
  --bs-secondary: var(--color-text-soft);
}

/* ==========================================================================
   Light / Dark / System — см. docs/UI_FRAMEWORK.md#theme-light-dark-system.
   Штатный механизм Bootstrap 5.3: атрибут data-bs-theme на <html> (ставится
   ui.js/inline-скриптом в <head>, см. layouts/app.php). Здесь — ТОЛЬКО
   переопределение фирменных --color-* токенов внутри [data-bs-theme="dark"];
   все --bs-* alias'ы выше уже объявлены через var(--color-*) в :root и
   резолвятся лениво по актуальному каскаду для каждого элемента, поэтому
   их не нужно дублировать здесь — достаточно переопределить сами --color-*.
   [data-bs-theme="light"] продублирован явно (то же, что :root) — чтобы
   вложенный элемент с data-bs-theme="light" внутри тёмного приложения
   (репорт/PDF-превью, см. .report-*) мог локально "отменить" тёмную тему
   для своего поддерева — родной приём Bootstrap для вложенных тем.
   Отчёт/PDF используют ОТДЕЛЬНЫЕ --report-* токены (components.css),
   которые здесь никогда не переопределяются — документ гарантированно не
   темнеет вместе с приложением независимо от вложенности data-bs-theme. */
:root,
[data-bs-theme="light"] {
  --color-primary: #2E3A51;
  --color-primary-dark: #1C2330;
  --color-accent: #CDA843;
  --color-accent-hover: #B8923A;
  --color-accent-light: #E3CE93;
  --color-bg: #F8F6F0;
  --color-bg-muted: #dfdfdfa9;
  /* --color-bg-muted-opaque — тот же визуальный оттенок, что --color-bg-muted
     даёт при композите поверх --color-surface (#dfdfdfa9 над #f5f5f5 = #e6e6e6,
     точный alpha-blend), но как непрозрачный hex. Нужен местам, где
     полупрозрачный --color-bg-muted "просвечивает" нежелательно — например
     sticky thead таблицы (Entity List, components.css), где под заголовком
     во время scroll проезжают строки данных в том же stacking context.
     --color-bg-muted не меняем: card-header/column-chooser hover используют
     его полупрозрачность намеренно. */
  --color-bg-muted-opaque: #e6e6e6;
  --color-surface: #f5f5f5;
  --color-text: #1C2330;
  --color-text-soft: rgba(28, 35, 48, 0.62);
  --color-text-faint: rgba(28, 35, 48, 0.45);
  --color-border: rgba(46, 58, 81, 0.14);
  --color-border-strong: rgba(46, 58, 81, 0.25);
  --color-hover: rgba(205, 168, 67, 0.12);
  --color-danger: #B23A3A;
  --color-warning: #C98A2E;
  /* Тот же зелёный, что уже используется в .toast-success ниже (rgb
     63,122,84 — тёмный текстовый вариант #2C5A3C) — не новый цвет "на
     глаз", а промотирование уже проверенного в проде оттенка до
     полноценного токена (Confirm/Save edit action, docs/UI_FRAMEWORK.md,
     "Edit Actions"). Контраст на белой карточке — 7.97:1 (WCAG AAA). */
  --color-success: #2C5A3C;
  --color-link: var(--color-primary);
  --color-link-rgb: 46, 58, 81;
  --color-link-hover: var(--color-primary-dark);
  --color-link-hover-rgb: 28, 35, 48;
}

/* --color-on-primary — текст поверх СПЛОШНОЙ заливки --color-primary
   (тёмно-синий, сам не меняется между темами). Константа, НЕ переопределяется
   в [data-bs-theme="dark"] ниже: активный пункт сайдбара/nav-pills раньше
   использовал color: var(--color-bg) — в Light это давало светлый текст на
   тёмно-синем (нормально, --color-bg тогда светлый), но в Dark --color-bg
   становится почти чёрным, и текст на той же тёмно-синей заливке терял
   контраст почти до нечитаемого (~1.1:1, обнаружено живым тестом). Заливка
   не меняется между темами — пара к ней тоже не должна. */
:root {
  --color-on-primary: #F8F6F0;
  /* --color-on-accent — текст/иконка поверх СПЛОШНОЙ золотой заливки
     --color-accent (.btn-primary и любая другая заливка тем же золотом —
     сам --color-accent не меняется между темами, пара к нему тоже
     константа). Изначально здесь использовался --color-primary-dark
     (#1C2330) — расчётный WCAG-контраст 6.75:1 (проходит AA), но
     подтверждено повторным репортом пользователя с реальным скриншотом:
     тёмно-синий на насыщенном золоте субъективно читается хуже, чем
     формула контраста предполагает — насыщенный жёлтый/золотой фон
     воспринимается глазом светлее, чем его расчётная яркость (эффект
     Гельмгольца-Кольрауша: у формулы WCAG нет параметра насыщенности).
     Отдельный, более тёмный токен (не переиспользующий --color-primary-dark,
     чтобы не менять другие места, где тот используется) — контраст 7.68:1. */
  --color-on-accent: #14181F;
}

[data-bs-theme="dark"] {
  --color-primary: #2E3A51;
  --color-primary-dark: #1C2330;
  --color-accent: #CDA843;
  --color-accent-hover: #DDBB5C;
  --color-accent-light: #4A3E22;
  --color-bg: #161B24;
  --color-bg-muted: #1D2430;
  /* В dark theme --color-bg-muted уже полностью непрозрачен — opaque-вариант
     равен ему самому, отдельного вычисления не требуется. */
  --color-bg-muted-opaque: #1D2430;
  --color-surface: #1F2733;
  --color-text: #E7EAF0;
  --color-text-soft: rgba(231, 234, 240, 0.68);
  --color-text-faint: rgba(231, 234, 240, 0.48);
  --color-border: rgba(231, 234, 240, 0.14);
  --color-border-strong: rgba(231, 234, 240, 0.25);
  --color-hover: rgba(205, 168, 67, 0.16);
  --color-danger: #E0736F;
  --color-warning: #E0A94E;
  /* Тот же зелёный, что уже используется в .toast-success ниже для Dark
     (rgb 159,220,179 — светлый вариант #9FDCB3, читаемый на тёмном фоне).
     Контраст на тёмной карточке — 9.57:1. */
  --color-success: #9FDCB3;
  /* Тёмно-синий на тёмном фоне нечитаем — для ссылок в Dark Mode нужен
     светлый оттенок той же сине-серой семьи (не золото, не фиолетовый). */
  --color-link: #A9BBDD;
  --color-link-rgb: 169, 187, 221;
  --color-link-hover: #CBD8F0;
  --color-link-hover-rgb: 203, 216, 240;
}

/* Badge/toast/chip — фирменные варианты с захардкоженными hex/rgba (в
   палитре Bootstrap нет точных аналогов, см. комментарии у самих правил
   ниже), поэтому не подхватывают --color-* автоматически и нуждаются в
   отдельных значениях для тёмной темы. */
[data-bs-theme="dark"] .badge-neutral { background: rgba(231, 234, 240, 0.12); color: var(--color-text-soft); }
[data-bs-theme="dark"] .badge-green { background: rgba(78, 100, 138, 0.35); color: #C7D3E8; }
[data-bs-theme="dark"] .badge-pink { background: rgba(205, 168, 67, 0.22); color: #E3CE93; }
[data-bs-theme="dark"] .badge-warning { background: rgba(201, 138, 46, 0.24); color: #F0C685; }
[data-bs-theme="dark"] .badge-muted { background: rgba(231, 234, 240, 0.1); color: #B7BEC9; }
[data-bs-theme="dark"] .badge-skill { background: rgba(205, 168, 67, 0.22); color: #E3CE93; }
[data-bs-theme="dark"] .badge-role { background: rgba(90, 122, 168, 0.3); color: #AFC6E3; }
[data-bs-theme="dark"] .badge-industry { background: rgba(58, 138, 115, 0.3); color: #8FD6BC; }

[data-bs-theme="dark"] .toast-success { --bs-toast-color: #9FDCB3; --bs-toast-bg: rgba(63, 122, 84, 0.22); --bs-toast-border-color: rgba(63, 122, 84, 0.4); }
[data-bs-theme="dark"] .toast-info { --bs-toast-color: #C7D3E8; --bs-toast-bg: rgba(78, 100, 138, 0.28); --bs-toast-border-color: rgba(78, 100, 138, 0.45); }
[data-bs-theme="dark"] .toast-warning { --bs-toast-color: #F0C685; --bs-toast-bg: rgba(201, 138, 46, 0.22); --bs-toast-border-color: rgba(201, 138, 46, 0.4); }
[data-bs-theme="dark"] .toast-error { --bs-toast-color: #F0A6A3; --bs-toast-bg: rgba(224, 115, 111, 0.18); --bs-toast-border-color: rgba(224, 115, 111, 0.4); }

/* .chip текст — var(--color-primary) (тёмно-синий) на золотистой заливке
   45% на СВЕТЛОМ фоне читается; на тёмном фоне та же заливка становится
   мутно-коричневой, и тёмно-синий текст на ней теряет контраст — в Dark
   Mode берём основной текстовый токен темы вместо навигационного синего. */
[data-bs-theme="dark"] .chip { background: rgba(205, 168, 67, 0.22); border-color: rgba(205, 168, 67, 0.45); color: var(--color-text); }
[data-bs-theme="dark"] .chip button { background: rgba(231, 234, 240, 0.12); color: var(--color-text-soft); }

/* .alert-warning/.alert-danger — тот же класс проблемы, что у .btn-outline-primary
   выше: захардкоженный тёмный текст (#8C6522) на почти прозрачной (10%)
   заливке — на тёмном фоне страницы, просвечивающем сквозь эту заливку,
   контраст падал почти до нечитаемого (обнаружено живым тестом на
   странице участия, статус "Отчёт изменён после передачи заказчику"). */
[data-bs-theme="dark"] .alert-warning { --bs-alert-color: #F0C685; --bs-alert-bg: rgba(201, 138, 46, 0.16); --bs-alert-border-color: rgba(201, 138, 46, 0.4); }
[data-bs-theme="dark"] .alert-danger { --bs-alert-bg: rgba(224, 115, 111, 0.14); --bs-alert-border-color: rgba(224, 115, 111, 0.4); }

/* Приводим корневой размер шрифта к нашей плотной вёрстке (14px), не трогая
   сами rem-величины Bootstrap — так все встроенные отступы/радиусы
   компонентов пропорционально уменьшаются вместе со шрифтом, вместо того
   чтобы переопределять каждый компонент по отдельности. Официальный приём
   темизации Bootstrap (эквивалент $font-size-root в Sass). */
html {
  font-size: 87.5%;
}

body {
  line-height: 1.5;
}

/* a:visited явно, а не только "a" — иначе UA-стиль (a:visited{color:purple},
   специфичность 0,1,1) перебивает базовое правило "a" (0,0,1) и ссылка после
   посещения уходит в стандартный фиолетовый браузера, независимо от токена
   выше. Hover/focus — тем же семейством (тёмно-синий), не золото, плюс
   подчёркивание и видимое focus-кольцо (тот же приём, что у .form-control). */
a:not(.btn),
a:not(.btn):visited {
  color: var(--bs-link-color);
  text-decoration: none;
}

a:not(.btn):hover,
a:not(.btn):focus-visible {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

a:not(.btn):focus-visible {
  outline: 2px solid var(--color-link-hover);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Buttons ----------
   .btn-primary и .btn-sm, .btn-lg — это уже сами компоненты Bootstrap,
   переопределяем только их цветовые custom properties. .btn-ghost и
   .btn-danger-ghost — фирменные варианты, которых нет в палитре Bootstrap
   (outline без явного цвета, "призрачная" кнопка). */

.btn {
  font-weight: 600;
}

/* Базовый размер шрифта кнопки — только через custom property и только для
   .btn без модификатора размера: :not(.btn-sm):not(.btn-lg) поднимает
   специфичность выше, чем у .btn-sm/.btn-lg (равная специфичность с ними
   иначе решается порядком подключения файлов не в их пользу, и оба
   модификатора теряют разницу в размере — обычный font-size на голом .btn
   имел ровно эту же проблему). .btn-sm/.btn-lg благодаря :not() не задеты и
   используют свои штатные --bs-btn-font-size (0.875rem/1.25rem) без изменений. */
.btn:not(.btn-sm):not(.btn-lg) {
  --bs-btn-font-size: 0.964rem; /* соответствует прежним 13.5px при новой базе 14px */
}

.btn-primary {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-accent-hover);
  --bs-btn-hover-border-color: var(--color-accent-hover);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-active-bg: var(--color-accent-hover);
  --bs-btn-active-border-color: var(--color-accent-hover);
  --bs-btn-disabled-color: var(--color-on-accent);
  --bs-btn-disabled-bg: var(--color-accent);
  --bs-btn-disabled-border-color: var(--color-accent);
  --bs-btn-focus-shadow-rgb: 205, 168, 67;
}

/* --color-link, не --color-primary: у этой кнопки текст/рамка стоят на
   прозрачном фоне (цвет самой страницы просвечивает), а --color-primary
   (тёмно-синий) не меняется между темами — тёмный текст без изменений на
   тёмном фоне Dark Mode был почти нечитаем (контраст ~1.3:1, обнаружено
   живым тестом). --color-link уже адаптирован под тему ровно для этого
   случая: в Dark Mode берёт светлый оттенок, в Light — тот же тёмно-синий,
   визуально ничего не меняя относительно исходной светлой темы. */
.btn-outline-primary {
  --bs-btn-color: var(--color-link);
  --bs-btn-border-color: var(--color-link);
  --bs-btn-hover-bg: var(--color-hover);
  --bs-btn-hover-color: var(--color-link);
  --bs-btn-hover-border-color: var(--color-link);
  --bs-btn-active-bg: var(--color-hover);
  --bs-btn-active-color: var(--color-link);
  --bs-btn-active-border-color: var(--color-link);
  --bs-gradient: none;
}

/* Фирменная "призрачная" кнопка — в Bootstrap нет прямого эквивалента
   (ближайший, .btn-link, не даёт фон при hover) — минимальное расширение. */
.btn-ghost {
  --bs-btn-color: var(--color-text-soft);
  --bs-btn-border-color: transparent;
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-bg: var(--color-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--color-hover);
  --bs-btn-active-border-color: transparent;
  /* Base .btn:focus-visible reads this var; only Bootstrap's own variants
     (.btn-primary etc.) set it, so without this a ghost button has no
     visible keyboard focus ring at all. */
  --bs-btn-focus-shadow-rgb: 46, 58, 81;
}

.btn-danger-ghost {
  --bs-btn-color: var(--color-text-faint);
  --bs-btn-border-color: transparent;
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--color-danger);
  --bs-btn-hover-bg: rgba(178, 58, 58, 0.08);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 178, 58, 58;
}

/* ---------- Edit Actions: Confirm/Cancel (docs/UI_FRAMEWORK.md, "Edit Actions") ----------
   Единственная семантическая пара для завершения inline/block-редактирования
   (entity-edit.js) — icon-only, лёгкие, не CTA. Цвет виден СРАЗУ в normal
   state (не muted-then-revealed, как у .btn-ghost/.btn-danger-ghost) —
   кнопки и так появляются только на время активного редактирования, а не
   постоянно на странице, поэтому им не нужно Progressive Disclosure самого
   .btn-ghost; здесь цвет — сигнал "это подтверждение"/"это отмена" сразу,
   а не награда за наведение.

   .btn-cancel-ghost сознательно ОТДЕЛЬНЫЙ класс от .btn-danger-ghost, хотя
   оба используют --color-danger: у них разная семантика (Cancel — отказ от
   несохранённого изменения, НЕ destructive-действие и не открывает
   AlfaConfirm; .btn-danger-ghost — Delete и другие деструктивные действия,
   всегда с подтверждением) — общий класс задним числом привязал бы Cancel к
   семантике удаления при следующем изменении стиля Delete. */
.btn-confirm-ghost {
  --bs-btn-color: var(--color-success);
  --bs-btn-border-color: transparent;
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--color-success);
  --bs-btn-hover-bg: rgba(44, 90, 60, 0.10);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: rgba(44, 90, 60, 0.16);
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 44, 90, 60;
}

.btn-cancel-ghost {
  --bs-btn-color: var(--color-danger);
  --bs-btn-border-color: transparent;
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--color-danger);
  --bs-btn-hover-bg: rgba(178, 58, 58, 0.08);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: rgba(178, 58, 58, 0.14);
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 178, 58, 58;
}

/* ---------- Forms ----------
   .form-control/.form-select уже дают нужную структуру, меняем только
   цвет фокус-кольца (по умолчанию — синий Bootstrap) на фирменный. */

/* --color-link (не --color-primary) — та же причина, что и у
   .btn-outline-primary выше: рамка/фокус-кольцо стоят поверх фона самого
   поля (адаптируется под тему), а не поверх заливки фиксированного цвета —
   тёмно-синий без изменений на тёмном поле ввода в Dark Mode терял контраст. */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-link-rgb), 0.15);
}

/* Чекбокс/радио, наоборот, заливаются СПЛОШНЫМ цветом (не текст/рамка на
   переменном фоне) — контраст не зависит от темы страницы, --color-primary
   годится в обоих случаях (тёмно-синяя заливка, contrast против checkmark
   Bootstrap считает сам). */
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-link-rgb), 0.15);
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

/* Info Help (.icon-btn) рядом с обычным field label (Field Label Contract,
   docs/UI_FRAMEWORK.md) — без этого .btn наследует line-height:1.5 от
   Bootstrap (--bs-btn-line-height), из-за чего строка label с иконкой
   становится на несколько px выше строки label без иконки (два поля в
   одном .row визуально "съезжают" друг относительно друга, см. Грейд/
   Рекомендация на Assessment Workspace) — сама иконка уже фиксированного
   размера (.icon-btn .bi, line-height:1), только кнопка-обёртка вокруг неё
   росла лишний раз. */
.form-label .icon-btn {
  line-height: 1;
}

/* ---------- Nav / Tabs / Pills ---------- */

.nav-tabs {
  --bs-nav-tabs-border-color: var(--color-border);
  --bs-nav-tabs-link-hover-border-color: transparent transparent var(--color-border);
  /* --color-link — активная вкладка это текст на прозрачном/варьирующемся
     под тему фоне, та же причина, что у .btn-outline-primary выше. */
  --bs-nav-tabs-link-active-color: var(--color-link);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--color-accent);
}

.nav-tabs .nav-link {
  font-weight: 600;
  color: var(--color-text-soft);
  border-width: 0 0 2px 0;
}

.nav-tabs .nav-link.active {
  border-bottom-width: 2px;
}

/* Дефолтный браузерный :focus-visible outline на <button class="nav-link">
   не согласован с темой (сплошной чёрный прямоугольник) — та же причина и
   тот же приём, что у `a:not(.btn):focus-visible` выше: не отключаем
   focus-visible (accessibility indication обязателен), а заменяем его
   цвет/форму на фирменные токены. Срабатывает, когда пользователь реально
   переключает вкладку клавиатурой/кликом по самой кнопке `.nav-link`. */
.nav-tabs .nav-link:focus-visible {
  outline: 2px solid var(--color-link-hover);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Тёмная декоративная рамка после перехода по ссылке вида
   `/candidates/{id}#tab-discussion` (например Entity Last Note trigger,
   docs/UI_FRAMEWORK.md#entity-discussion) — НЕ .nav-link получает фокус в
   этом сценарии: правило выше не помогало, потому что реальный источник —
   нативный браузерный механизм "переход по URL-фрагменту": при полной
   загрузке страницы с `#id` в адресе браузер сам, независимо от Bootstrap
   Tab.js/`data-tabs-persist` (ui.js), скроллит и ФОКУСИРУЕТ элемент с этим
   `id` (если он фокусируемый) — здесь это сам `.tab-pane[tabindex="0"]`
   (`role="tabpanel"`, ровно та ARIA-разметка, которая и даёт ему
   focus-visible outline браузера по умолчанию), а не кнопка `#tab-*-btn`.
   `.tab-pane` — не интерактивный элемент управления сам по себе (просто
   контейнер контента, доступный табом ради возможности продолжить
   Tab-навигацию внутрь содержимого) — убираем именно у него декоративный
   outline, НЕ трогая focus-visible где-либо ещё: обычная Tab-навигация
   клавиатурой по кнопкам/ссылкам/полям внутри контента вкладки (включая
   саму кнопку `.nav-tabs .nav-link` выше) сохраняет свой видимый focus
   ring без изменений. */
.tab-pane:focus {
  outline: none;
}

.nav-pills {
  /* --color-on-primary, не --color-bg — та же причина, что у .app-nav
     .nav-link.active выше: заливка не меняется между темами, текст на ней
     тоже не должен. */
  --bs-nav-pills-link-active-color: var(--color-on-primary);
  --bs-nav-pills-link-active-bg: var(--color-primary);
}

.nav-pills .nav-link {
  color: var(--color-text);
  font-size: 0.929rem;
}

/* ---------- Dropdown ---------- */

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--color-primary);
  --bs-dropdown-link-hover-bg: var(--color-hover);
  --bs-dropdown-box-shadow: var(--bs-box-shadow);
}

/* ---------- List group (строки-карточки: ссылки/вложения/участия) ---------- */

.list-group {
  --bs-list-group-active-bg: var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
  --bs-list-group-border-radius: var(--radius-sm);
}

/* ---------- Pagination (основа на будущее, см. docs/ROADMAP.md) ---------- */

.pagination {
  /* -active-bg/-border — заливка (текст поверх неё — уже
     --bs-pagination-active-color, штатный светлый вариант Bootstrap, не
     переопределяется); -color/-hover-color/-focus-color — текст ссылки на
     фоне страницы, поэтому --color-link, как и у .btn-outline-primary. */
  --bs-pagination-active-bg: var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-color: var(--color-link);
  --bs-pagination-hover-color: var(--color-link);
  --bs-pagination-hover-bg: var(--color-hover);
  --bs-pagination-focus-color: var(--color-link);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--color-link-rgb), 0.15);
}

/* ---------- Alert ---------- */

.alert-warning {
  --bs-alert-color: #8C6522;
  --bs-alert-bg: rgba(201, 138, 46, 0.1);
  --bs-alert-border-color: rgba(201, 138, 46, 0.3);
}

.alert-danger {
  --bs-alert-color: var(--color-danger);
  --bs-alert-bg: rgba(178, 58, 58, 0.08);
  --bs-alert-border-color: rgba(178, 58, 58, 0.25);
}

/* ---------- Toast ---------- */

.toast {
  --bs-toast-bg: var(--color-surface);
}

/* Цветовые варианты — используются вместе с .toast (см. ui.js и
   docs/UI_FRAMEWORK.md#toast-notifications). Готового варианта под 4 статуса
   (success/info/warning/error) в самом Bootstrap нет — цвет добавляется
   тонким модификатором поверх структуры .toast. */
.toast-success { --bs-toast-color: #2C5A3C; --bs-toast-bg: rgba(63, 122, 84, 0.12); --bs-toast-border-color: rgba(63, 122, 84, 0.3); }
.toast-info { --bs-toast-color: var(--color-primary); --bs-toast-bg: rgba(46, 58, 81, 0.08); --bs-toast-border-color: rgba(46, 58, 81, 0.25); }
.toast-warning { --bs-toast-color: #8C6522; --bs-toast-bg: rgba(201, 138, 46, 0.12); --bs-toast-border-color: rgba(201, 138, 46, 0.32); }
.toast-error { --bs-toast-color: var(--color-danger); --bs-toast-bg: rgba(178, 58, 58, 0.1); --bs-toast-border-color: rgba(178, 58, 58, 0.3); }

/* ---------- Badge ----------
   .badge Bootstrap отвечает только за форму (padding/radius/font) и не
   задаёт цвет сам по себе — цветовые варианты ниже фирменные, аналогов с
   таким же точным сочетанием цветов в стандартной палитре Bootstrap нет. */

.badge-neutral { background: rgba(28, 35, 48, 0.06); color: var(--color-text-soft); }
.badge-green { background: rgba(46, 58, 81, 0.12); color: var(--color-primary); }
.badge-pink { background: rgba(205, 168, 67, 0.18); color: #8A6A1E; }
.badge-warning { background: rgba(201, 138, 46, 0.14); color: #8C6522; }
.badge-muted { background: rgba(155, 155, 155, 0.16); color: #6f6f6f; }

/* ---------- Catalog chip (App\Support\Badges::catalogChip, AD-021) ----------
   Read-only отображение значения справочника-классификатора (Справочники ->
   Навыки/Роли/Индустрии) как .badge — три спокойных semantic-токена, чтобы
   три каталога были различимы, но не превращали список в разноцветную
   панель. Skill намеренно совпадает по цвету с уже существующим
   .badge-pink/золотым .chip — сохраняет уже привычную визуальную
   семантику навыка, а не вводит четвёртый оттенок. */
.badge-skill { background: rgba(205, 168, 67, 0.18); color: #8A6A1E; }
.badge-role { background: rgba(90, 122, 168, 0.16); color: #35577E; }
.badge-industry { background: rgba(58, 138, 115, 0.16); color: #1F6F52; }

/* ---------- Card ----------
   --bs-card-bg — явно `--color-surface`, не унаследованный дефолт Bootstrap
   (`--bs-body-bg`, у нас = `--color-bg`, цвет самой страницы/`.app-content`):
   `--color-surface` уже существовал и отличается от `--color-bg` в обеих
   темах (Light `#f5f5f5` vs `#F8F6F0`, Dark `#1F2733` vs `#161B24`), но
   `.card` его не использовал — card рисовалась цветом страницы и отделялась
   от фона только тонкой `--color-border` рамкой, из-за чего Entity Section-
   карточки визуально "не отделялись от фона" (особенно заметно в Dark, где
   разница я́ркости фона и рамки меньше, чем в Light). `--bs-box-shadow` (уже
   существующий токен, используется `.toast`) добавляет вторым слоем лёгкую
   тень — surface-фон + тень вместе дают заметное, но спокойное отделение
   card от фона в обеих темах без введения нового цвета.
   --bs-card-cap-bg — `--color-bg-muted` вместо `transparent`: та же пара
   токенов, что уже отличает `--color-bg`/`--color-surface` друг от друга,
   даёт `.card-header` (Entity Section — заголовок секции) чуть более
   тёмный/приглушённый оттенок относительно белого/светлого `--color-surface`
   тела карточки — едва заметное, не контрастное отделение шапки от
   контента, тем же приёмом, что и card-от-фона выше, без нового цвета. */
.card {
  --bs-card-border-color: var(--color-border);
  --bs-card-cap-bg: var(--color-bg-muted);
  --bs-card-bg: var(--color-surface);
  box-shadow: var(--bs-box-shadow);
}

/* ---------- Modal (готово к использованию — см. docs/UI_FRAMEWORK.md#modal-windows) ---------- */

.modal-content {
  --bs-modal-border-color: var(--color-border);
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-box-shadow: var(--bs-box-shadow);
}

/* ---------- Table ---------- */

.table {
  --bs-table-border-color: var(--color-border);
}

.table > thead {
  font-size: 0.786rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-soft);
}

/* ---------- Sidebar / topbar (структура — components.css, только цвет здесь) ----------
   Правила дублируются на .app-nav-collapsible-body .nav-link — вложенный
   пункт "Справочники -> Навыки" визуально должен быть тем же компонентом
   сайдбара, а не голым Bootstrap .nav-link. */

.app-nav .nav-link.active,
.app-nav .nav-link.active:hover,
.app-nav-collapsible-body .nav-link.active,
.app-nav-collapsible-body .nav-link.active:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* .active:hover продублирован выше отдельно от :not(.active):hover ниже:
   без этого базовое правило Bootstrap `.nav-link:hover { color:
   var(--bs-nav-link-hover-color) }` (у нас = var(--color-primary), тот же
   тёмный тон, что и фон активного пункта) перекрашивало бы текст активного
   пункта в цвет, сливающийся с его собственным тёмным фоном.
   :not(.active) — hover не должен переопределять фон уже активного пункта
   (иначе тёмный фон + белый текст превращаются в светлый фон и становятся
   почти нечитаемыми). Hover-фон работает только для неактивных. */
.app-nav .nav-link:not(.active):hover,
.app-nav-collapsible-body .nav-link:not(.active):hover {
  background: var(--color-hover);
}

/* ---------- Icon-only buttons (Bootstrap Icons) ----------
   .icon-btn — маркер "внутри только иконка, без текста". Фиксированный
   размер глифа через rem, а не через наследование font-size — иначе один
   и тот же bi-trash выглядел бы разного размера в .btn против .btn-sm. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn .bi {
  font-size: 1rem;
  line-height: 1;
}

/* ---------- Scrollbar (глобально, любой скролл-контейнер) ----------
   Тонкий скролл вместо системного дефолта — везде, не только у
   Search Select/chip-box (см. components.css): сайдбар (.app-nav-
   collapsible-body), тело страницы, .modal-body, textarea с
   overflow-y:auto после max-height (components.css) и т.п. — общее
   правило на *, а не список отдельных селекторов, чтобы не забыть новый
   скролл-контейнер в будущем. Цвета — уже существующие --color-* токены,
   темнеют вместе с [data-bs-theme="dark"] сами по себе, отдельного
   переопределения под тему не нужно. Firefox — scrollbar-width/-color
   (единственный поддерживаемый им способ), остальные — ::-webkit-
   scrollbar-*. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--color-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-faint);
}