/* Мост Bootstrap 5.3.3 → токены Egel (спека §2.4–2.5, STY-05, STY-06). Постоянный файл.
   Подключается после bootstrap.min.css: при равной специфичности побеждает он. Корневые переменные
   объявлены и на [data-bs-theme]: var() в custom property вычисляется на элементе объявления, поэтому
   вложенный data-bs-theme пересчитает мост от своих токенов. Компонентные переменные Bootstrap
   объявлены на самих селекторах компонентов — переопределяются там же, а не на :root. */

/* ─── §2.4 Корневые переменные ───────────────────────────────────────────── */
:root, [data-bs-theme] {
  --bs-body-font-family: var(--egl-font-ui);
  --bs-font-monospace: var(--egl-font-mono);
  --bs-body-font-size: calc(14px * var(--egl-font-scale));
  --bs-body-line-height: 1.45;
  --bs-body-color: var(--egl-text);
  --bs-emphasis-color: var(--egl-text);
  --bs-heading-color: var(--egl-text);
  --bs-body-color-rgb: var(--egl-text-rgb);
  --bs-emphasis-color-rgb: var(--egl-text-rgb);
  --bs-body-bg: var(--egl-surface);
  --bs-body-bg-rgb: var(--egl-surface-rgb);
  --bs-secondary-color: var(--egl-muted);
  --bs-tertiary-color: var(--egl-muted);
  --bs-secondary-color-rgb: var(--egl-muted-rgb);
  --bs-tertiary-color-rgb: var(--egl-muted-rgb);
  --bs-secondary-bg: var(--egl-head);
  --bs-tertiary-bg: var(--egl-head);
  --bs-secondary-bg-rgb: var(--egl-head-rgb);
  --bs-tertiary-bg-rgb: var(--egl-head-rgb);
  --bs-border-color: var(--egl-line);
  --bs-border-color-translucent: var(--egl-line);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 7px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 14px;
  --bs-link-color: var(--egl-accent);
  --bs-link-color-rgb: var(--egl-accent-rgb);
  --bs-link-hover-color: var(--egl-accent-hover);
  --bs-link-hover-color-rgb: var(--egl-accent-hover-rgb);
  --bs-primary: var(--egl-accent);
  --bs-primary-rgb: var(--egl-accent-rgb);
  --bs-secondary: var(--egl-neutral);
  --bs-secondary-rgb: var(--egl-neutral-rgb);
  --bs-success: var(--egl-ok);
  --bs-success-rgb: var(--egl-ok-rgb);
  --bs-info: var(--egl-info);
  --bs-info-rgb: var(--egl-info-rgb);
  --bs-warning: var(--egl-warn);
  --bs-warning-rgb: var(--egl-warn-rgb);
  --bs-danger: var(--egl-danger);
  --bs-danger-rgb: var(--egl-danger-rgb);
  --bs-light-rgb: var(--egl-head-rgb);
  --bs-dark-rgb: var(--egl-text-rgb);
  --bs-primary-bg-subtle: var(--egl-accent-soft);
  --bs-secondary-bg-subtle: var(--egl-neutral-soft);
  --bs-success-bg-subtle: var(--egl-ok-soft);
  --bs-info-bg-subtle: var(--egl-info-soft);
  --bs-warning-bg-subtle: var(--egl-warn-soft);
  --bs-danger-bg-subtle: var(--egl-danger-soft);
  --bs-primary-border-subtle: color-mix(in oklab, var(--egl-accent) 35%, var(--egl-line));
  --bs-secondary-border-subtle: color-mix(in oklab, var(--egl-neutral) 35%, var(--egl-line));
  --bs-success-border-subtle: color-mix(in oklab, var(--egl-ok) 35%, var(--egl-line));
  --bs-info-border-subtle: color-mix(in oklab, var(--egl-info) 35%, var(--egl-line));
  --bs-warning-border-subtle: color-mix(in oklab, var(--egl-warn) 35%, var(--egl-line));
  --bs-danger-border-subtle: color-mix(in oklab, var(--egl-danger) 35%, var(--egl-line));
  --bs-primary-text-emphasis: var(--egl-accent);
  --bs-secondary-text-emphasis: var(--egl-neutral);
  --bs-success-text-emphasis: var(--egl-ok);
  --bs-info-text-emphasis: var(--egl-info);
  --bs-warning-text-emphasis: var(--egl-warn);
  --bs-danger-text-emphasis: var(--egl-danger);
  --bs-form-valid-color: var(--egl-ok);
  --bs-form-valid-border-color: var(--egl-ok);
  --bs-form-invalid-color: var(--egl-danger);
  --bs-form-invalid-border-color: var(--egl-danger);
  --bs-focus-ring-color: var(--egl-accent-soft);
  --bs-focus-ring-width: 3px;
  --bs-highlight-bg: var(--egl-warn-soft);
  --bs-highlight-color: var(--egl-text);
  --bs-code-color: var(--egl-text);
  --bs-box-shadow: var(--egl-shadow);
}

/* ─── §2.5 База и типографика ────────────────────────────────────────────── */
body {
  background: var(--egl-bg);
}

.table td, .table th {
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 650;
  letter-spacing: -.01em;
}
/* Bootstrap задаёт h1–h3 и .fs-* в rem (h1–h4 ещё и плавающими от vw) — rem привязан к корню, который мы не
   трогаем, поэтому масштаб переносим явно. Берём значения Bootstrap для ширины от 1200px без плавающей части */
h1, .h1 { font-size: calc(40px * var(--egl-font-scale)); }
h2, .h2 { font-size: calc(32px * var(--egl-font-scale)); }
h3, .h3 { font-size: calc(28px * var(--egl-font-scale)); }
h4, .h4 { font-size: calc(20px * var(--egl-font-scale)); }
h5, .h5 { font-size: calc(17px * var(--egl-font-scale)); }
h6, .h6 { font-size: calc(15px * var(--egl-font-scale)); }

.font-monospace {
  font-size: .93em;
}

.fs-1 { font-size: calc(40px * var(--egl-font-scale)) !important; }
.fs-2 { font-size: calc(32px * var(--egl-font-scale)) !important; }
.fs-3 { font-size: calc(28px * var(--egl-font-scale)) !important; }
.fs-4 { font-size: calc(24px * var(--egl-font-scale)) !important; }
.fs-5 { font-size: calc(20px * var(--egl-font-scale)) !important; }
.fs-6 { font-size: calc(16px * var(--egl-font-scale)) !important; }

a {
  text-decoration: none;
}
/* :where() обнуляет специфичность исключений — правила компонентов egl-* перебивают это без !important */
a:where(:not(.btn, .page-link, .nav-link, .dropdown-item, [class*="egl-"])):hover {
  text-decoration: underline;
}

a:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--egl-accent);
  outline-offset: 2px;
}

/* ─── Кнопки ─────────────────────────────────────────────────────────────── */
.btn {
  --bs-btn-padding-y: 7px;
  --bs-btn-padding-x: 14px;
  --bs-btn-font-size: calc(14px * var(--egl-font-scale));
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 20px;
  --bs-btn-border-radius: 8px;
  --bs-btn-disabled-opacity: .45;
  --bs-btn-focus-box-shadow: 0 0 0 3px var(--egl-accent-soft);
}
.btn-sm {
  --bs-btn-padding-y: 4px;
  --bs-btn-padding-x: 10px;
  --bs-btn-font-size: calc(13px * var(--egl-font-scale));
  --bs-btn-border-radius: 7px;
}

.btn-primary {
  --bs-btn-color: var(--egl-accent-text);
  --bs-btn-bg: var(--egl-accent);
  --bs-btn-border-color: var(--egl-accent);
  --bs-btn-hover-color: var(--egl-accent-text);
  --bs-btn-hover-bg: var(--egl-accent-hover);
  --bs-btn-hover-border-color: var(--egl-accent-hover);
  --bs-btn-active-color: var(--egl-accent-text);
  --bs-btn-active-bg: var(--egl-accent-hover);
  --bs-btn-active-border-color: var(--egl-accent-hover);
  --bs-btn-disabled-color: var(--egl-accent-text);
  --bs-btn-disabled-bg: var(--egl-accent);
  --bs-btn-disabled-border-color: var(--egl-accent);
}

.btn-secondary, .btn-outline-secondary, .btn-light {
  --bs-btn-color: var(--egl-text);
  --bs-btn-bg: var(--egl-surface);
  --bs-btn-border-color: var(--egl-line-2);
  --bs-btn-hover-color: var(--egl-text);
  --bs-btn-hover-bg: var(--egl-head);
  --bs-btn-hover-border-color: var(--egl-line-2);
  --bs-btn-active-color: var(--egl-text);
  --bs-btn-active-bg: var(--egl-head);
  --bs-btn-active-border-color: var(--egl-line-2);
  --bs-btn-disabled-color: var(--egl-text);
  --bs-btn-disabled-bg: var(--egl-surface);
  --bs-btn-disabled-border-color: var(--egl-line-2);
}

.btn-outline-primary {
  --bs-btn-color: var(--egl-accent);
  --bs-btn-bg: var(--egl-surface);
  --bs-btn-border-color: var(--egl-line-2);
  --bs-btn-hover-color: var(--egl-accent);
  --bs-btn-hover-bg: var(--egl-head);
  --bs-btn-hover-border-color: var(--egl-line-2);
  --bs-btn-active-color: var(--egl-accent);
  --bs-btn-active-bg: var(--egl-head);
  --bs-btn-active-border-color: var(--egl-line-2);
  --bs-btn-disabled-color: var(--egl-accent);
  --bs-btn-disabled-bg: var(--egl-surface);
  --bs-btn-disabled-border-color: var(--egl-line-2);
}

.btn-danger {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--egl-danger-solid);
  --bs-btn-border-color: var(--egl-danger-solid);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: var(--egl-danger-solid);
  --bs-btn-hover-border-color: var(--egl-danger-solid);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--egl-danger-solid);
  --bs-btn-active-border-color: var(--egl-danger-solid);
  --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-disabled-bg: var(--egl-danger-solid);
  --bs-btn-disabled-border-color: var(--egl-danger-solid);
}

.btn-outline-danger {
  --bs-btn-color: var(--egl-danger);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: color-mix(in oklab, var(--egl-danger) 45%, transparent);
  --bs-btn-hover-color: var(--egl-danger);
  --bs-btn-hover-bg: var(--egl-danger-soft);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--egl-danger) 45%, transparent);
  --bs-btn-active-color: var(--egl-danger);
  --bs-btn-active-bg: var(--egl-danger-soft);
  --bs-btn-active-border-color: color-mix(in oklab, var(--egl-danger) 45%, transparent);
  --bs-btn-disabled-color: var(--egl-danger);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in oklab, var(--egl-danger) 45%, transparent);
}

.btn-success {
  --bs-btn-color: var(--egl-ok);
  --bs-btn-bg: var(--egl-ok-soft);
  --bs-btn-border-color: color-mix(in oklab, var(--egl-ok) 35%, var(--egl-line));
  --bs-btn-hover-color: var(--egl-ok);
  --bs-btn-hover-bg: var(--egl-ok-soft);
  --bs-btn-hover-border-color: var(--egl-ok);
  --bs-btn-active-color: var(--egl-ok);
  --bs-btn-active-bg: var(--egl-ok-soft);
  --bs-btn-active-border-color: var(--egl-ok);
  --bs-btn-disabled-color: var(--egl-ok);
  --bs-btn-disabled-bg: var(--egl-ok-soft);
  --bs-btn-disabled-border-color: color-mix(in oklab, var(--egl-ok) 35%, var(--egl-line));
}
.btn-warning {
  --bs-btn-color: var(--egl-warn);
  --bs-btn-bg: var(--egl-warn-soft);
  --bs-btn-border-color: color-mix(in oklab, var(--egl-warn) 35%, var(--egl-line));
  --bs-btn-hover-color: var(--egl-warn);
  --bs-btn-hover-bg: var(--egl-warn-soft);
  --bs-btn-hover-border-color: var(--egl-warn);
  --bs-btn-active-color: var(--egl-warn);
  --bs-btn-active-bg: var(--egl-warn-soft);
  --bs-btn-active-border-color: var(--egl-warn);
  --bs-btn-disabled-color: var(--egl-warn);
  --bs-btn-disabled-bg: var(--egl-warn-soft);
  --bs-btn-disabled-border-color: color-mix(in oklab, var(--egl-warn) 35%, var(--egl-line));
}
.btn-info {
  --bs-btn-color: var(--egl-info);
  --bs-btn-bg: var(--egl-info-soft);
  --bs-btn-border-color: color-mix(in oklab, var(--egl-info) 35%, var(--egl-line));
  --bs-btn-hover-color: var(--egl-info);
  --bs-btn-hover-bg: var(--egl-info-soft);
  --bs-btn-hover-border-color: var(--egl-info);
  --bs-btn-active-color: var(--egl-info);
  --bs-btn-active-bg: var(--egl-info-soft);
  --bs-btn-active-border-color: var(--egl-info);
  --bs-btn-disabled-color: var(--egl-info);
  --bs-btn-disabled-bg: var(--egl-info-soft);
  --bs-btn-disabled-border-color: color-mix(in oklab, var(--egl-info) 35%, var(--egl-line));
}

.btn-outline-success {
  --bs-btn-color: var(--egl-ok);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--egl-ok);
  --bs-btn-hover-color: var(--egl-ok);
  --bs-btn-hover-bg: var(--egl-ok-soft);
  --bs-btn-hover-border-color: var(--egl-ok);
  --bs-btn-active-color: var(--egl-ok);
  --bs-btn-active-bg: var(--egl-ok-soft);
  --bs-btn-active-border-color: var(--egl-ok);
  --bs-btn-disabled-color: var(--egl-ok);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--egl-ok);
}
.btn-outline-warning {
  --bs-btn-color: var(--egl-warn);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--egl-warn);
  --bs-btn-hover-color: var(--egl-warn);
  --bs-btn-hover-bg: var(--egl-warn-soft);
  --bs-btn-hover-border-color: var(--egl-warn);
  --bs-btn-active-color: var(--egl-warn);
  --bs-btn-active-bg: var(--egl-warn-soft);
  --bs-btn-active-border-color: var(--egl-warn);
  --bs-btn-disabled-color: var(--egl-warn);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--egl-warn);
}
.btn-outline-info {
  --bs-btn-color: var(--egl-info);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--egl-info);
  --bs-btn-hover-color: var(--egl-info);
  --bs-btn-hover-bg: var(--egl-info-soft);
  --bs-btn-hover-border-color: var(--egl-info);
  --bs-btn-active-color: var(--egl-info);
  --bs-btn-active-bg: var(--egl-info-soft);
  --bs-btn-active-border-color: var(--egl-info);
  --bs-btn-disabled-color: var(--egl-info);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--egl-info);
}

.btn-link {
  --bs-btn-color: var(--egl-accent);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--egl-accent-hover);
  --bs-btn-hover-bg: var(--egl-head);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--egl-accent-hover);
  --bs-btn-active-bg: var(--egl-head);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--egl-muted);
  text-decoration: none;
}

/* Новые модификаторы дизайн-системы — пишутся рядом с .btn / .btn-sm (своего egl-btn нет, STY-02) */
.btn-ghost {
  --bs-btn-color: var(--egl-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--egl-text);
  --bs-btn-hover-bg: var(--egl-head);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--egl-text);
  --bs-btn-active-bg: var(--egl-head);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--egl-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}
.btn-icon {
  --bs-btn-padding-x: 0;
  width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon.btn-sm {
  width: 30px;
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 3px var(--egl-accent-soft);
}

/* ─── Поля ───────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  font-size: calc(14px * var(--egl-font-scale));
  padding: 7px 12px;
  line-height: 20px;
  color: var(--egl-text);
  border-color: var(--egl-line-2);
  background-color: var(--egl-field);
}
.form-select {
  padding-right: 36px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--egl-accent);
  box-shadow: 0 0 0 3px var(--egl-accent-soft);
}
.form-control-sm, .form-select-sm {
  font-size: calc(13px * var(--egl-font-scale));
  padding: 4px 10px;
  line-height: 20px;
  min-height: 30px;
}
.form-select-sm {
  padding-right: 32px;
}
/* Узкая колонка сетки (col-md-1/2) с полем даты: «дд.мм.гггг» и значок календаря при шрифте +25% не влезают
   (было «дд.мм.» уже до масштаба). Ширина колонки — Bootstrap'овская, добавляем только нижнюю границу:
   на широком экране пропорции фильтров не меняются, на узком колонка не сжимается меньше значения поля */
.row > :is(.col-md-1, .col-md-2):has(> input[type="date"]) {
  min-width: 150px;
}
/* То же для числового поля («Код» в col-md-1 сжималось до 51px и обрезало значение) */
.row > .col-md-1:has(> input[type="number"]) {
  min-width: 96px;
}
/* Колонки Bootstrap в сумме дают ровно 12/12, поэтому любой min-width переносит последнюю колонку (кнопку сброса).
   От 1280px ряд фильтров с полем даты не переносится, а лишнее забирают соседние колонки — до масштаба
   шрифта всё стояло в одну строку. Ниже 1280px ряд не вмещает минимальные ширины — там перенос допустим */
@media (min-width: 1280px) {
  .row:has(> :is(.col-md-1, .col-md-2) > input[type="date"]) {
    flex-wrap: nowrap;
  }
  .row:has(> :is(.col-md-1, .col-md-2) > input[type="date"]) > :not(:has(> input[type="date"], > input[type="number"])) {
    flex-shrink: 1;
    min-width: 0;
  }
}

.form-label {
  font-size: calc(12px * var(--egl-font-scale));
  font-weight: 500;
  color: var(--egl-muted);
}
.egl-drawer .form-label {
  font-size: calc(12.5px * var(--egl-font-scale));
  font-weight: 600;
  color: var(--egl-text);
}

.form-check-input {
  border-color: var(--egl-line-2);
}
.form-check-input:checked {
  background-color: var(--egl-accent);
  border-color: var(--egl-accent);
}
.form-check-input:focus {
  border-color: var(--egl-accent);
  box-shadow: 0 0 0 3px var(--egl-accent-soft);
}

.input-group-text {
  font-size: calc(14px * var(--egl-font-scale));
  background-color: var(--egl-head);
  border-color: var(--egl-line-2);
  color: var(--egl-muted);
}

/* ─── Таблицы ────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: var(--egl-surface);
  --bs-table-color: var(--egl-text);
  --bs-table-border-color: var(--egl-line);
  --bs-table-hover-bg: var(--egl-hover);
  --bs-table-hover-color: var(--egl-text);
}
.table > thead {
  --bs-table-bg: var(--egl-head);
  --bs-table-color: var(--egl-muted);
}
.table > thead th {
  font-size: calc(12px * var(--egl-font-scale));
  font-weight: 600;
}
.table > :not(caption) > * > * {
  padding: 10px 14px;
}
.table-sm > :not(caption) > * > * {
  padding: 8px 12px;
}

/* Варианты строк и шапки: Bootstrap зашивает светлые HEX (в тёмной теме — белые полосы).
   Состояния hover/striped/active берут тот же фон, иначе при наведении всплыл бы светлый HEX */
.table-light {
  --bs-table-bg: var(--egl-head);
  --bs-table-color: var(--egl-muted);
  --bs-table-border-color: var(--egl-line);
  --bs-table-striped-bg: var(--egl-head);
  --bs-table-striped-color: var(--egl-muted);
  --bs-table-hover-bg: var(--egl-hover);
  --bs-table-hover-color: var(--egl-text);
  --bs-table-active-bg: var(--egl-head);
  --bs-table-active-color: var(--egl-muted);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-warning {
  --bs-table-bg: var(--egl-warn-soft);
  --bs-table-color: var(--egl-text);
  --bs-table-border-color: var(--egl-line);
  --bs-table-striped-bg: var(--egl-warn-soft);
  --bs-table-striped-color: var(--egl-text);
  --bs-table-hover-bg: var(--egl-warn-soft);
  --bs-table-hover-color: var(--egl-text);
  --bs-table-active-bg: var(--egl-warn-soft);
  --bs-table-active-color: var(--egl-text);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-danger {
  --bs-table-bg: var(--egl-danger-soft);
  --bs-table-color: var(--egl-text);
  --bs-table-border-color: var(--egl-line);
  --bs-table-striped-bg: var(--egl-danger-soft);
  --bs-table-striped-color: var(--egl-text);
  --bs-table-hover-bg: var(--egl-danger-soft);
  --bs-table-hover-color: var(--egl-text);
  --bs-table-active-bg: var(--egl-danger-soft);
  --bs-table-active-color: var(--egl-text);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

/* ─── Карточки, модалки Bootstrap, бейджи ────────────────────────────────── */
.card {
  --bs-card-bg: var(--egl-surface);
  --bs-card-color: var(--egl-text);
  --bs-card-border-color: var(--egl-line);
  --bs-card-border-radius: 12px;
  --bs-card-inner-border-radius: 11px;
  --bs-card-cap-bg: var(--egl-surface);
  --bs-card-cap-padding-y: 14px;
  --bs-card-cap-padding-x: 18px;
}
.card-header {
  font-size: calc(15px * var(--egl-font-scale));
  font-weight: 600;
}

.modal {
  --bs-modal-bg: var(--egl-surface);
  --bs-modal-color: var(--egl-text);
  --bs-modal-border-color: var(--egl-line);
  --bs-modal-border-radius: 14px;
  --bs-modal-inner-border-radius: 13px;
  --bs-modal-box-shadow: var(--egl-shadow);
  --bs-modal-header-border-color: var(--egl-line);
  --bs-modal-footer-border-color: var(--egl-line);
}
/* В сборке Bootstrap тени выключены ($enable-shadows: false) — включаем явно */
.modal-content {
  box-shadow: var(--bs-modal-box-shadow);
}

.badge {
  --bs-badge-font-size: calc(12px * var(--egl-font-scale));
  --bs-badge-font-weight: 600;
  --bs-badge-border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(22px * var(--egl-font-scale));
  padding: 0 8px;
}

/* ─── Навигация, прогресс, списки, меню, алерты ──────────────────────────── */
.pagination {
  --bs-pagination-font-size: calc(14px * var(--egl-font-scale));
  --bs-pagination-color: var(--egl-text);
  --bs-pagination-bg: var(--egl-surface);
  --bs-pagination-border-color: var(--egl-line-2);
  --bs-pagination-hover-color: var(--egl-text);
  --bs-pagination-hover-bg: var(--egl-head);
  --bs-pagination-hover-border-color: var(--egl-line-2);
  --bs-pagination-focus-color: var(--egl-text);
  --bs-pagination-focus-bg: var(--egl-head);
  --bs-pagination-focus-box-shadow: 0 0 0 3px var(--egl-accent-soft);
  --bs-pagination-active-color: var(--egl-accent-text);
  --bs-pagination-active-bg: var(--egl-accent);
  --bs-pagination-active-border-color: var(--egl-accent);
  --bs-pagination-disabled-color: var(--egl-muted);
  --bs-pagination-disabled-bg: var(--egl-surface);
  --bs-pagination-disabled-border-color: var(--egl-line);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--egl-line);
  --bs-nav-tabs-link-hover-border-color: var(--egl-line) var(--egl-line) var(--egl-line);
  --bs-nav-tabs-link-active-color: var(--egl-text);
  --bs-nav-tabs-link-active-bg: var(--egl-surface);
  --bs-nav-tabs-link-active-border-color: var(--egl-line) var(--egl-line) var(--egl-surface);
}

.progress {
  --bs-progress-font-size: calc(12px * var(--egl-font-scale));
  --bs-progress-bg: var(--egl-head);
  --bs-progress-bar-bg: var(--egl-info);
  --bs-progress-bar-color: var(--egl-accent-text);
}

.list-group {
  --bs-list-group-active-bg: var(--egl-accent);
  --bs-list-group-active-border-color: var(--egl-accent);
  --bs-list-group-active-color: var(--egl-accent-text);
}

.dropdown-menu {
  --bs-dropdown-font-size: calc(14px * var(--egl-font-scale));
  --bs-dropdown-link-hover-bg: var(--egl-hover);
  --bs-dropdown-link-active-bg: var(--egl-accent);
  --bs-dropdown-link-active-color: var(--egl-accent-text);
}

.alert {
  border: 0;
  border-radius: 10px;
  font-size: calc(13.5px * var(--egl-font-scale));
}

/* ─── OpenLayers ─────────────────────────────────────────────────────────── */
/* ol.css строит элементы управления на своих переменных — подставляем токены */
.ol-viewport {
  --ol-background-color: var(--egl-surface);
  --ol-accent-background-color: var(--egl-head);
  --ol-subtle-background-color: color-mix(in oklab, var(--egl-text) 20%, transparent);
  --ol-partial-background-color: color-mix(in oklab, var(--egl-surface) 80%, transparent);
  --ol-foreground-color: var(--egl-text);
  --ol-subtle-foreground-color: var(--egl-muted);
  --ol-brand-color: var(--egl-accent);
  font-family: var(--egl-font-ui);
  font-size: calc(12px * var(--egl-font-scale));
}
/* Кнопки зума: в ol.css их размер — в em от шрифта элемента управления (touch — ×1,5) */
.ol-zoom {
  font-size: calc(18px * var(--egl-font-scale));
}
.ol-control button:hover, .ol-control button:focus {
  background-color: var(--egl-head);
}
/* В ol.css у подписи шрифт зашит в 12px */
.ol-attribution ul {
  color: var(--egl-muted);
  font-size: calc(12px * var(--egl-font-scale));
}