/* Дизайн-токены сервиса. Структура и имена взяты у shadcn/ui, значения в hex.

   Файл общий для всего сервиса: подключается во всех шаблонах сразу после Bootstrap.
   Токены объявлены на :root. Тёмная тема - атрибут data-theme="dark": на <html> она
   включается для всей страницы, на контейнере - только для него.

   Здесь же шрифт Inter и базовые правила страницы: фон, шрифт и наследование цвета */

/* Inter 4.1 (rsms/inter, лицензия OFL - FONTS/inter/LICENSE.txt). Объявлен здесь, а не в
   app.fonts.css: рут подключается напрямую во всех шаблонах, и шрифт приходит вместе с токеном --font-sans */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/inter/normal_300.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/inter/italic_300.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter/normal_400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/inter/italic_400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter/normal_500.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/inter/italic_500.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter/normal_600.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url(../fonts/inter/italic_600.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter/normal_700.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/inter/italic_700.woff2) format('woff2'); }

:root {
	/* Отмеченный чекбокс, радио и переключатель: в светлой теме почти чёрные, как в аналитике,
	   в тёмной - основного цвета */
	--checked-radio-background: #222;
	--checked-radio-hover: #000;
	--background: #f9f9f9;
	--foreground: #0a0a0a;

	--upper-menu-hover: #696969;

	--card: #ffffff;
	--card-foreground: #0a0a0a;

	--popover: #ffffff;
	--popover-foreground: #0a0a0a;

	--primary: #009F7A;

	/* Полоса верхнего меню (приложения) и текст на ней */
	--service-menu: #515151;
	--service-menu-foreground: #ffffff;

	--primary-foreground: #ffffff;

	--primary-hover: #018365;
	--primary-active: #026d54;

	--primary-soft: #a7e8bf;

	--primary-tint: #f0fbf4;

	--secondary: #f4f4f5;
	--secondary-foreground: #18181b;

	--muted: #f4f4f5;
	--muted-foreground: #71717a;

	--accent: #f0f0f1;
	--accent-foreground: #18181b;

	--destructive: #de4646;
	--destructive-foreground: #ffffff;
	--destructive-tint: #fdeded;
	--destructive-soft: #f5c4c4;
	--destructive-text: #b62f2f;

	--success: #1cb554;
	--success-foreground: #ffffff;
	--success-tint: #f0fbf4;
	--success-soft: #b4e6c5;
	--success-text: #12803a;

	--warning: #e08a00;
	--warning-foreground: #2b1a00;
	--warning-tint: #fff7e8;
	--warning-soft: #f3d8a6;
	--warning-text: #8a5200;

	--info: #2f7ed8;
	--info-foreground: #ffffff;
	--info-tint: #eef5fe;
	--info-soft: #bcd6f5;
	--info-text: #1d5fae;

	/* Ступени у состояний: -tint - подложка, -soft - рамка на этой подложке.
	   Обычная --border на цветной подложке теряется, а насыщенный цвет режет глаз */

	/* ---------- Линии и фокус ---------- */
	--border: #e4e4e7;
	--input: #e4e4e7;
	--ring: #1cb554;

	/* Рамка чекбокса и радиокнопки - отдельно от --input.
	   У поля ввода рамка очерчивает большой прямоугольник, и слабого контраста хватает.
	   У чекбокса она и есть весь элемент: с --input получалось 1.2:1 к подложке,
	   то есть пустой квадратик попросту не читался. Здесь 3.2:1 - минимум,
	   который WCAG просит для границ элементов управления */
	--checkbox-border: #8e8e99;
	--checkbox-disabled: #6b6b73;

	/* Полупрозрачное кольцо фокуса. Отдельным токеном, потому что в hex прозрачность
	   не выразить, а собрать её из --ring без color-mix нельзя.
	   Красный вариант - для фокуса на поле, не прошедшем проверку */
	--ring-veil: rgba(28, 181, 84, .22);
	--destructive-veil: rgba(222, 70, 70, .22);

	/* ---------- Иконки Bootstrap ----------

	   В Bootstrap галочка, точка радио, кружок переключателя, шеврон селекта и крестик
	   закрытия - это data-URI SVG с цветом, зашитым внутрь. Темой они не управляются,
	   поэтому в тёмной теме остались бы светлыми пятнами. Держим их токенами. */
	--icon-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	--icon-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
	--icon-dot: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
	--icon-switch: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2371717a'/%3e%3c/svg%3e");
	--icon-switch-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
	--icon-close: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230a0a0a'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");

	/* ---------- Типографика ---------- */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	/* ---------- Геометрия ---------- */
	--radius: 8px;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-full: 999px;

	--control-height: 32px;

	/* Поля разделов приложений слева и справа: #app во всю ширину, отступ у .service-tab */
	--app-gutter: 30px;

	/* ---------- Тени ---------- */
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
	--shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
	--shadow-md: 0 2px 4px rgba(16, 24, 40, .06), 0 10px 24px rgba(16, 24, 40, .09);
	--shadow-lg: 0 8px 16px rgba(16, 24, 40, .08), 0 20px 48px rgba(16, 24, 40, .12);

	/* ---------- Прочее ---------- */
	--overlay: rgba(255, 255, 255, .62);

	/* Полупрозрачная плашка поверх цветной подложки: сквозь неё должен просвечивать тон */
	--surface-veil: rgba(255, 255, 255, .75);

	/* Подсказка намеренно инвертирована относительно страницы */
	--tooltip-bg: #1c1c28;
	--tooltip-foreground: #ffffff;
	--tooltip-muted: rgba(255, 255, 255, .7);
	--tooltip-divider: rgba(255, 255, 255, .14);

	/* Цвета маркетплейсов: чужие бренды, в тёмной теме только осветляются */
	--mplace-wb: #b02da1;
	--mplace-ozon: #0d6efd;
	--mplace-yandex: #ffa707;
	--mplace-ali: #e62e04;
	--mplace-sber: #632895;
	--mplace-lerua: #66c05d;

	/* ---------- Цвета старых блоков (тёмная тема - ниже) ----------

	   Серая шкала: в тёмной теме переворачивается, поэтому светлые подложки становятся тёмными, а серый текст - светлым */
	--gray-25: #fbfbfb;
	--gray-50: #efefef;
	--gray-100: #eeeeee;
	--gray-150: #ebebeb;
	--gray-200: #e7e7e7;
	--gray-250: #e6e6e6;
	--gray-300: #dddddd;
	--gray-340: #c2c2c2;
	--gray-350: #cccccc;
	--gray-400: #bbbbbb;
	--gray-500: #a3a3a3;
	--gray-550: #999999;
	--gray-600: #888888;
	--gray-650: #6c757d;
	--gray-700: #666666;
	--gray-750: #555555;
	--gray-800: #333333;
	--gray-850: #222222;
	/* Серый из CSS (gray) */
	--color-gray: #808080;

	/* Самый контрастный цвет темы и текст на нем: кнопки и строки при наведении */
	--contrast: #000000;
	--contrast-soft: #333333;
	--contrast-foreground: #ffffff;
	/* Текст и значки на цветной подложке: белые в обеих темах */
	--on-color: #ffffff;
	/* Тёмные блоки в обеих темах: оплата, верхняя полоса ULTIMA, сообщение о токене */
	--promo: #000000;
	--promo-foreground: #ffffff;
	/* Подложка под фото товара: у фото часто белый фон */
	--image-bg: #ffffff;
	--logo-dark: #2d2d2d;
	--veil-strong: rgba(255, 255, 255, .7);
	--soft-shadow: #ebebeb;

	/* Выделения */
	--highlight: #ffff00;
	--highlight-pale: #fbf6bb;
	--highlight-soft: #fcf8e3;
	--teal: #4cceac;
	--teal-veil: #4cceac1c;
	--teal-medium: #74d2ba75;
	--save-sended: #c4e4dc;
	--save-bar: #696ffb;

	/* Цвета маркетплейсов в карточках оплаты и подписок (--mplace-* выше - другие оттенки) */
	--brand-ozon: #235bf6;
	--brand-yandex: #ffcc00;
	--brand-sber-green: #4d9c46;
	--brand-content: #555555;
	--youtube: #eb3223;

	/* Сообщения */
	--notice-red: #d23232;
	--pay-alert: #ff4d00;
	--token-alert: #ff7c00;
	--token-alert-glow: #ff8800;
	--panel-error: #fbadad;
	--panel-error-foreground: #835757;
	--panel-error-glow: #f96a6a61;
	--panel-success: #85fdba;
	--panel-success-foreground: #327851;
	--panel-success-glow: #85fdbaab;
	--logistics-error: #fd4949;
	--logistics-success: #21e176;
	--player-active: #f59331;

	/* Окно .dataModal */
	--modal-link: #2563eb;
	--modal-link-hover: #1d4ed8;
	--modal-button: #2563eb;
	--modal-button-hover: #1d4ed8;
	--modal-close: #8c959f;
	--modal-close-hover: #f0f1f3;
	--modal-divider: #eef0f2;
	--modal-overlay: rgba(0, 0, 0, .5);
	--modal-shadow: rgba(0, 0, 0, .25);

	/* Сборка */
	--pick-green: #6ec863;
	--pick-green-text: #6ec863;
	--pick-confirmed: #b0e5cd;
	--pick-complete: #e6f5e9;
	--pick-hint: #eaf7e8;
	--pick-hint-border: #c4e8bf;
	--pick-hint-foreground: #2f7a26;
	--pick-warning: #ffe5d0;
	--pick-warning-border: #fecba1;
	--pick-warning-foreground: #984c0c;
	--pick-error: #f8d7da;
	--pick-error-foreground: #842029;
	--pick-link: #1f6fe5;
	/* Сообщения при сканировании: яркие намеренно, должны быть заметны на складе */
	--scan-bad: #ff0b0b;
	--scan-info: #0040ef;
	--scan-warning: #ff8a00;
}

/* ================= ТЁМНАЯ ТЕМА ================= */

[data-theme="dark"] {
	--checked-radio-background: #009F7A;
	--checked-radio-hover: #018365;

	--background: #0a0a0a;
	--foreground: #fafafa;

	--service-menu: #171717;
	--service-menu-foreground: #fafafa;

	--card: #171717;
	--card-foreground: #fafafa;

	--popover: #18181b;
	--popover-foreground: #fafafa;

	--primary: #009F7A;
	--primary-foreground: #ffffff;
	--primary-hover: #018365;
	--primary-active: #026d54;
	--primary-soft: #1a5c33;
	--primary-tint: #0f2518;

	--secondary: #27272a;
	--secondary-foreground: #fafafa;

	--muted: #1c1c1f;
	--muted-foreground: rgba(250, 250, 250, .64);

	--accent: #2a2a2e;
	--accent-foreground: #fafafa;

	--destructive: #f05252;
	--destructive-foreground: #2b0808;
	--destructive-tint: #2a1212;
	--destructive-soft: #5c2626;
	--destructive-text: #f08a8a;

	--success: #27c860;
	--success-foreground: #04210e;
	--success-tint: #0f2518;
	--success-soft: #1d4d2e;
	--success-text: #4ade80;

	--warning: #f0a92c;
	--warning-foreground: #2b1a00;
	--warning-tint: #2a2112;
	--warning-soft: #5a4419;
	--warning-text: #f0a92c;

	--info: #5aa2f0;
	--info-foreground: #06172b;
	--info-tint: #101c2b;
	--info-soft: #24405f;
	--info-text: #7db7f5;

	--border: #27272a;
	--input: #2e2e33;
	--checkbox-border: #6a6a74;
	--checkbox-disabled: #1f6e44;
	--ring: #27c860;
	--ring-veil: rgba(39, 200, 96, .25);
	--destructive-veil: rgba(240, 82, 82, .25);

	--icon-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fafafa' stroke-opacity='.64' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	--icon-switch: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fafafa' fill-opacity='.64'/%3e%3c/svg%3e");
	--icon-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fafafa' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
	--icon-dot: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2304210e'/%3e%3c/svg%3e");
	--icon-switch-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fafafa'/%3e%3c/svg%3e");
	--icon-close: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fafafa'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");

	/* На тёмном фоне мягкие тени не видны, поэтому они жёстче и глубже */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .35);
	--shadow-md: 0 2px 4px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .4);
	--shadow-lg: 0 8px 16px rgba(0, 0, 0, .5), 0 20px 48px rgba(0, 0, 0, .45);

	--overlay: rgba(9, 9, 11, .62);

	--surface-veil: rgba(255, 255, 255, .08);

	/* В тёмной теме подсказка не чернее страницы, а светлее её */
	--tooltip-bg: #2e2e35;
	--tooltip-foreground: #fafafa;
	--tooltip-muted: rgba(250, 250, 250, .72);
	--tooltip-divider: rgba(250, 250, 250, .16);

	--mplace-wb: #d14ac2;
	--mplace-ozon: #4f8dff;
	--mplace-yandex: #ffb938;
	--mplace-ali: #ff5a36;
	--mplace-sber: #9a5fd0;
	--mplace-lerua: #7fd476;

	/* ---------- Цвета старых блоков ---------- */
	--gray-25: #141416;
	--gray-50: #222226;
	--gray-100: #242428;
	--gray-150: #27272b;
	--gray-200: #2a2a2e;
	--gray-250: #2c2c30;
	--gray-300: #3a3a3f;
	--gray-340: #44444a;
	--gray-350: #4a4a50;
	--gray-400: #5a5a60;
	--gray-500: #6e6e76;
	--gray-550: #8e8e96;
	--gray-600: #9a9aa2;
	--gray-650: #a1a1aa;
	--gray-700: #b0b0b8;
	--gray-750: #c4c4cc;
	--gray-800: #e4e4e7;
	--gray-850: #fafafa;
	--color-gray: #a1a1aa;

	--contrast: #fafafa;
	--contrast-soft: #e4e4e7;
	--contrast-foreground: #0a0a0a;
	--on-color: #ffffff;
	--promo: #18181b;
	--promo-foreground: #fafafa;
	--image-bg: #ffffff;
	--logo-dark: #e4e4e7;
	--veil-strong: rgba(9, 9, 11, .7);
	--soft-shadow: rgba(0, 0, 0, .5);

	--highlight: #5c5400;
	--highlight-pale: #3a3514;
	--highlight-soft: #2a2712;
	--teal: #4cceac;
	--teal-veil: #4cceac1c;
	--teal-medium: #74d2ba40;
	--save-sended: #1d4d3e;
	--save-bar: #4a4fd1;

	--brand-ozon: #4f8dff;
	--brand-yandex: #ffcc00;
	--brand-sber-green: #6fbe67;
	--brand-content: #6a6a72;
	--youtube: #f0584a;

	--notice-red: #f08a8a;
	--pay-alert: #d94200;
	--token-alert: #d96a00;
	--token-alert-glow: #d96a0066;
	--panel-error: #3a1a1a;
	--panel-error-foreground: #f0a0a0;
	--panel-error-glow: #f96a6a33;
	--panel-success: #123524;
	--panel-success-foreground: #7fe0a8;
	--panel-success-glow: #2e8b5a55;
	--logistics-error: #fd6b6b;
	--logistics-success: #4ade80;
	--player-active: #f59331;

	--modal-link: #60a5fa;
	--modal-link-hover: #93c5fd;
	--modal-button: #3b82f6;
	--modal-button-hover: #2563eb;
	--modal-close: #a1a1aa;
	--modal-close-hover: #2a2a2e;
	--modal-divider: #27272a;
	--modal-overlay: rgba(0, 0, 0, .7);
	--modal-shadow: rgba(0, 0, 0, .6);

	--pick-green: #3f9e4d;
	--pick-green-text: #7fd476;
	--pick-confirmed: #1f4a3a;
	--pick-complete: #16301f;
	--pick-hint: #0f2518;
	--pick-hint-border: #1d4d2e;
	--pick-hint-foreground: #4ade80;
	--pick-warning: #2a2112;
	--pick-warning-border: #5a4419;
	--pick-warning-foreground: #f0a92c;
	--pick-error: #2a1212;
	--pick-error-foreground: #f08a8a;
	--pick-link: #7db7f5;
	--scan-bad: #d91c1c;
	--scan-info: #2a5cff;
	--scan-warning: #d97706;
}

/* На телефоне поля разделов уже */
@media (max-width: 700px) {
	:root {
		--app-gutter: 12px;
	}
}

/* Подключается после Bootstrap, поэтому его фон, цвет и шрифт body перебиваются здесь */
body {
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-size: 13px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Поля ввода, селекты и кнопки не наследуют от родителя ни шрифт, ни цвет текста -
   это поведение браузера, а не Bootstrap. Без этого они остаются на системном шрифте.
   :where обнуляет специфичность: правило задаёт только умолчание,
   и любой стиль компонента с классом его перебивает */
:where(input, select, textarea, button) {
	font-family: inherit;
}

/* То же с цветом текста. Кнопки Bootstrap исключены - у них цвет приходит из --bs-btn-color */
:where(button:not(.btn):not(.btn-close), input, select, textarea) {
	color: inherit;
}

/* ================= BOOTSTRAP: ОСНОВНОЙ ЦВЕТ =================

   Bootstrap 5.1 зашивает свой синий #0d6efd прямо в правила компонентов, а не в переменные,
   поэтому переводим на --primary каждый компонент и каждое его состояние.
   Селекторы повторяют бутстраповские: рут подключён после него и выигрывает порядком */

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
	color: var(--primary-foreground);
	background-color: var(--primary);
	border-color: var(--primary);
}

.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus {
	color: var(--primary-foreground);
	background-color: var(--primary-hover);
	border-color: var(--primary-hover);
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
	color: var(--primary-foreground);
	background-color: var(--primary-active);
	border-color: var(--primary-active);
}

.btn-outline-primary,
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
	color: var(--primary);
	border-color: var(--primary);
	background-color: transparent;
}

.btn-outline-primary:hover,
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
	color: var(--primary-foreground);
	background-color: var(--primary);
	border-color: var(--primary);
}

/* Теней при фокусе и нажатии в сервисе нет. Bootstrap рисует их полупрозрачным кольцом
   у кнопок, полей, чекбоксов, ссылок пагинации и т.д., причём в составных селекторах
   вроде .btn-check:checked + .btn-primary:focus - отсюда !important. Фокус по-прежнему
   виден по рамке: у полей она становится цвета --ring */
.btn.active,
.btn-check:focus + .btn,
.btn-check:active + .btn,
.btn-check:checked + .btn,
.show > .dropdown-toggle {
	box-shadow: none !important;
}

:is(.btn, .btn-close, .form-control, .form-select, .form-check-input, .form-range,
	.page-link, .accordion-button, .navbar-toggler, .nav-link, .dropdown-item, .list-group-item,
	.custom_select_trigger, a, button, input, select, textarea, [tabindex]):is(:focus, :focus-visible, :active) {
	box-shadow: none !important;
}

/* Разными правилами: браузер, не знающий один из псевдоэлементов, отбросил бы оба */
.form-range:focus::-webkit-slider-thumb {
	box-shadow: none !important;
}

.form-range:focus::-moz-range-thumb {
	box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus {
	border-color: var(--checkbox-border);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
	background-color: var(--checked-radio-background);
	border-color: var(--checked-radio-background);
}

.form-range::-webkit-slider-thumb { background-color: var(--primary); }
.form-range::-moz-range-thumb { background-color: var(--primary); }

.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link,
.list-group-item.active {
	color: var(--primary-foreground);
	background-color: var(--primary);
	border-color: var(--primary);
}

.progress-bar {
	color: var(--primary-foreground);
	background-color: var(--primary);
}

.alert-primary {
	color: var(--primary-active);
	background-color: var(--primary-tint);
	border-color: var(--primary-soft);
}

.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }

.link-primary { color: var(--primary); }
.link-primary:focus,
.link-primary:hover { color: var(--primary-hover); }

/* Ссылки. У Bootstrap их цвет - тот же #0d6efd, поэтому они тоже переходят на основной */
a,
.btn-link,
.nav-link,
.page-link {
	color: var(--primary);
}

a:hover,
.btn-link:hover,
.nav-link:hover,
.nav-link:focus,
.page-link:hover,
.page-link:focus {
	color: var(--primary-hover);
}