/* Анимированный фон — триангулированный 3D-меш (canvas через spro-mesh.js).
   Базовый фон с primary-цветом. Canvas рисует поверх с z-index: 0.
   Анимация только на requestAnimationFrame — GPU-friendly. */
.spro-crystal-bg {
	position: relative;
	overflow: hidden;
	--spro-c-primary: var(--bs-primary, #db3f3f);
	--spro-c-primary-rgb: var(--bs-primary-rgb, 219, 63, 63);
	background:
		radial-gradient(90% 70% at 25% 20%, rgba(var(--spro-c-primary-rgb), 0.30) 0%, transparent 50%),
		radial-gradient(70% 70% at 75% 75%, rgba(var(--spro-c-primary-rgb), 0.18) 0%, transparent 50%),
		linear-gradient(160deg, rgba(var(--spro-c-primary-rgb), 0.08) 0%, #020203 100%);
	background-color: #020203;
	isolation: isolate;
}
/* Виньетка — плавное затемнение к краям, скрывает стыки меша */
.spro-crystal-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, rgba(2, 2, 3, 0.85) 100%);
	pointer-events: none;
	z-index: 0;
}
/* Мягкий объёмный свет (glow-слой) */
.spro-crystal-bg > .spro-crystal-glow {
	position: absolute;
	inset: -15%;
	background:
		radial-gradient(55% 45% at 30% 25%, rgba(var(--spro-c-primary-rgb), 0.18), transparent 55%),
		radial-gradient(50% 50% at 70% 70%, rgba(var(--spro-c-primary-rgb), 0.10), transparent 55%);
	filter: blur(40px);
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 0;
	will-change: transform, opacity;
	animation: sproMeshGlow 22s ease-in-out infinite alternate;
}
@keyframes sproMeshGlow {
	from { transform: translate3d(-3%, -2%, 0) scale(1);    opacity: 0.7; }
	to   { transform: translate3d( 3%,  2%, 0) scale(1.06); opacity: 1; }
}
/* Содержимое поверх фона */
.spro-crystal-bg > *:not(.spro-crystal-glow):not(canvas) {
	position: relative;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	.spro-crystal-bg > .spro-crystal-glow { animation: none !important; }
}

/* Переключатель danger — всегда красный, независимо от темы */
.form-check-input.switch-danger:checked {
	background-color: #dc3545;
	border-color: #dc3545;
}
.dark-mode .form-check-input.switch-danger:checked {
	background-color: #dc3545;
	border-color: #dc3545;
}

/* В landing-странице кристаллический фон занимает весь контейнер-секцию (как раньше видео) */
.elementor-element-46e68c2 {
	position: relative;
	overflow: hidden;
}
.elementor-element-46e68c2 .spro-crystal-bg {
	position: absolute;
	inset: 0;
}

/* Затемнение страницы при открытии бокового меню (page-overlay) —
   оттенок берётся из цвета текущей темы, а не захардкожен в теме. */
#page-overlay {
	background: rgba(var(--bs-primary-rgb, 219, 63, 63), 0.18);
	background: linear-gradient(to right, rgba(var(--bs-primary-rgb, 219, 63, 63), 0), rgba(var(--bs-primary-rgb, 219, 63, 63), 0.32));
}
.sidebar-r #page-overlay {
	background: linear-gradient(to right, rgba(var(--bs-primary-rgb, 219, 63, 63), 0.32), rgba(var(--bs-primary-rgb, 219, 63, 63), 0));
}

/* Таблица внутри SweetAlert2-окон (список активов перемещения и т.п.).
   Делаем «как везде»: скруглённые углы, мягкая тень и шапка цветом активной темы.
   Цвет берётся из переменной темы (--bs-primary), поэтому автоматически
   перекрашивается вместе с переключателем цвета и тёмной темы.
   !important нужен, чтобы гарантированно перебить стили тёмной темы DataTables. */
.swal2-popup .dataTables_wrapper,
.swal2-popup table.dataTable {
	border-radius: .875rem 1rem;
	overflow: hidden;
}
.swal2-popup table.dataTable {
	box-shadow: 0 1px 2px rgba(220,225,232,.5), 0 1px 2px rgba(220,225,232,.5);
	background-clip: padding-box;
}
/* Шапка таблицы — градиент цветом темы с белым текстом, как в обычных таблицах проекта */
/*
.swal2-popup table.dataTable thead th,
.swal2-popup table.dataTable thead td {
	background: linear-gradient(180deg, color-mix(in srgb, var(--bs-primary, #db3f3f) 72%, #ffffff), var(--bs-primary, #db3f3f)) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
	vertical-align: middle;
	font-weight: 600;
	letter-spacing: .03em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
*/
/* Скругляем верхние углы первой/последней ячейки шапки */
.swal2-popup table.dataTable thead tr:first-child th:first-child,
.swal2-popup table.dataTable thead tr:first-child td:first-child {
	border-top-left-radius: .875rem;
}
.swal2-popup table.dataTable thead tr:first-child th:last-child,
.swal2-popup table.dataTable thead tr:first-child td:last-child {
	border-top-right-radius: 1rem;
}
/* Стрелки сортировки DataTables на цветном фоне — белые 
/*
.swal2-popup table.dataTable thead .sorting:before,
.swal2-popup table.dataTable thead .sorting:after,
.swal2-popup table.dataTable thead .sorting_asc:before,
.swal2-popup table.dataTable thead .sorting_asc:after,
.swal2-popup table.dataTable thead .sorting_desc:before,
.swal2-popup table.dataTable thead .sorting_desc:after {
	color: rgba(255, 255, 255, 0.85) !important;
	opacity: 1 !important;
}
*/
/* Убираем эффект наведения/активной строки заголовка поверх цвета темы 
.swal2-popup table.dataTable thead th:hover,
.swal2-popup table.dataTable thead td:hover {
	background-color: var(--bs-primary, #db3f3f) !important;
	color: #fff !important;
}
*/
/* Хлебные крошки: базовый вес лёгкий, первый пункт (название компании) — жирный. */
.breadcrumb-item {
	font-weight: 500;
}
.breadcrumb-item:first-child,
.breadcrumb-item:first-child > a {
	font-weight: 700;
}

/* Гарантированное использование цвета выбранной темы для акцентов во ВСЕХ режимах.
   codebase.min.css жёстко зашивает .text-primary / .bg-primary / .border-primary /
   .link-primary { color/border-color/background-color: #0284c7 !important } (синий),
   что перебивает файл темы и делает акценты всегда синими, независимо от выбора
   (синий и голубой выглядят одинаково). Этот блок грузится ПОСЛЕ файла темы
   и принудительно берёт цвет из --bs-primary / --bs-primary-rgb выбранной темы.
   Семантические цвета (success/danger/warning/info/muted/white/secondary) не трогаем. */
.text-primary,
a.text-primary,
.link-primary {
	color: var(--bs-primary) !important;
}
a.text-primary.link-fx::before,
a.link-primary.link-fx::before {
	background-color: var(--bs-primary) !important;
}
a.text-primary:hover,
a.text-primary:focus,
a.link-primary:hover,
a.link-primary:focus {
	color: var(--bs-link-hover-color) !important;
}
.border-primary {
	border-color: var(--bs-primary) !important;
}
.bg-primary {
	background-color: var(--bs-primary) !important;
}
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
	background-color: var(--bs-btn-primary-hover-bg, var(--bs-primary)) !important;
}

/* То же самое для тёмной темы (цвет берётся из --bs-primary тёмной ветки темы). */
.dark-mode .text-primary,
.dark-mode a.text-primary,
.dark-mode .link-primary {
	color: var(--bs-primary) !important;
}
.dark-mode a.text-primary.link-fx::before,
.dark-mode a.link-primary.link-fx::before {
	background-color: var(--bs-primary) !important;
}
.dark-mode a.text-primary:hover,
.dark-mode a.text-primary:focus,
.dark-mode a.link-primary:hover,
.dark-mode a.link-primary:focus {
	color: var(--bs-link-hover-color) !important;
}
.dark-mode .border-primary {
	border-color: var(--bs-primary) !important;
}
.dark-mode .bg-primary {
	background-color: var(--bs-primary) !important;
}

/* text-theme — цвет текста, следующий за активной темой:
   тёмный в светлой теме, светлый в тёмной (.dark-mode).
   Используется для полей с датами в таблицах, чтобы они оставались
   читаемыми при переключении темы. !important нужен, чтобы побеждать
   акцентные цвета ссылок/темы на родительских элементах. */
.text-theme {
	color: var(--bs-body-color, #212529) !important;
}
.dark-mode .text-theme {
	color: var(--bs-emphasis-color, #f5f5f5) !important;
}

/* codebase.min.css жёстко зашивает .btn-primary / .btn-outline-primary в синий
   (#0284c7), перебивая файл темы. Переводим палитру на --bs-primary выбранной
   темы, чтобы ВСЕ primary-кнопки использовали цвет темы во всех режимах. */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-btn-primary-hover-bg, var(--bs-primary));
	--bs-btn-hover-border-color: var(--bs-btn-primary-hover-bg, var(--bs-primary));
	--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--bs-btn-primary-hover-bg, var(--bs-primary));
	--bs-btn-active-border-color: var(--bs-btn-primary-hover-bg, var(--bs-primary));
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
	--bs-btn-color: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-primary);
	--bs-btn-hover-border-color: var(--bs-primary);
	--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--bs-primary);
	--bs-btn-active-border-color: var(--bs-primary);
	--bs-btn-disabled-color: var(--bs-primary);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-link {
	color: var(--bs-link-color, var(--bs-primary));
}
.btn-link:hover {
	color: var(--bs-link-hover-color, var(--bs-primary));
}

/* Активная страница пагинации и активный элемент списка: файл темы (и codebase)
   используют тёмный оттенок основного цвета (#531010 для красной, #632949 для
   фиолетовой и т.п.), из-за чего активная страница получается почти чёрной.
   Принудительно берём --bs-primary выбранной темы, чтобы акцент был ярким и
   корректным во всех режимах. */
.page-item.active .page-link {
	color: #fff;
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}
.list-group-item.active {
	color: #fff;
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

/* Базовый цвет ссылок: файл темы (и codebase.min.css) используют тёмный
   оттенок основного цвета для базового a (в шаблоне #103342, в красной теме
   #531010, в фиолетовой #632949 …), из-за чего обычные ссылки получаются
   почти чёрными. Делаем базовый цвет ссылки равным --bs-primary (через
   --bs-link-color) выбранной темы — яркий акцентный цвет во всех режимах.
   Более специфичные правила (.text-muted, .nav-link, .dropdown-item,
   .text-primary, .text-danger …) по-прежнему побеждают по специфичности. */
a {
	color: var(--bs-link-color, var(--bs-primary));
}
a:hover {
	color: var(--bs-link-hover-color, var(--bs-primary));
}
a.link-fx::before {
	background-color: var(--bs-link-color, var(--bs-primary));
}

/* Пункты бокового меню: в обычном состоянии иконка и текст серые (задаёт
   файл темы: #a3aab2 / #4a5158 для светлого сайдбара). При наведении и для
   активного (текущего) пункта и иконка, и текст становятся primary темы —
   это «подсветка» выбранного раздела. Правило живёт в spro-crystal.css
   (грузится после темы), поэтому побеждает по специфичности во всех темах. */
.nav-main-link:hover,
.nav-main-link:focus,
.nav-main-link.active,
.nav-main-item.open > .nav-main-link-submenu,
.nav-main-horizontal.nav-main-hover .nav-main-item:hover > .nav-main-link-submenu {
	color: var(--bs-primary);
}
.nav-main-link:hover .nav-main-link-icon,
.nav-main-link:focus .nav-main-link-icon,
.nav-main-link.active .nav-main-link-icon,
.nav-main-item.open > .nav-main-link-submenu > .nav-main-link-icon,
.nav-main-horizontal.nav-main-hover .nav-main-item:hover > .nav-main-link-submenu > .nav-main-link-icon {
	color: var(--bs-primary);
}
.nav-main-dark .nav-main-link:hover,
.nav-main-dark .nav-main-link:focus,
.nav-main-dark .nav-main-link.active,
.sidebar-dark #sidebar .nav-main-link:hover,
.sidebar-dark #sidebar .nav-main-link:focus,
.sidebar-dark #sidebar .nav-main-link.active,
.page-header-dark #page-header .nav-main-link:hover,
.page-header-dark #page-header .nav-main-link:focus,
.page-header-dark #page-header .nav-main-link.active,
.nav-main-dark .nav-main-item.open > .nav-main-link-submenu,
.sidebar-dark #sidebar .nav-main-item.open > .nav-main-link-submenu,
.page-header-dark #page-header .nav-main-item.open > .nav-main-link-submenu,
.nav-main-dark.nav-main-horizontal.nav-main-hover .nav-main-item:hover > .nav-main-link-submenu,
.sidebar-dark #sidebar .nav-main-horizontal.nav-main-hover .nav-main-item:hover > .nav-main-link-submenu,
.page-header-dark #page-header .nav-main-horizontal.nav-main-hover .nav-main-item:hover > .nav-main-link-submenu {
	color: var(--bs-primary);
}
.nav-main-dark .nav-main-link:hover > .nav-main-link-icon,
.nav-main-dark .nav-main-link:focus > .nav-main-link-icon,
.nav-main-dark .nav-main-link.active > .nav-main-link-icon,
.sidebar-dark #sidebar .nav-main-link:hover > .nav-main-link-icon,
.sidebar-dark #sidebar .nav-main-link:focus > .nav-main-link-icon,
.sidebar-dark #sidebar .nav-main-link.active > .nav-main-link-icon,
.page-header-dark #page-header .nav-main-link:hover > .nav-main-link-icon,
.page-header-dark #page-header .nav-main-link:focus > .nav-main-link-icon,
.page-header-dark #page-header .nav-main-link.active > .nav-main-link-icon,
.nav-main-dark .nav-main-item.open > .nav-main-link-submenu > .nav-main-link-icon,
.sidebar-dark #sidebar .nav-main-item.open > .nav-main-link-submenu > .nav-main-link-icon,
.page-header-dark #page-header .nav-main-item.open > .nav-main-link-submenu > .nav-main-link-icon,
.nav-main-dark.nav-main-horizontal.nav-main-hover .nav-main-item:hover > .nav-main-link-submenu > .nav-main-link-icon,
.sidebar-dark #sidebar .nav-main-horizontal.nav-main-hover .nav-main-item:hover > .nav-main-link-submenu > .nav-main-link-icon,
.page-header-dark #page-header .nav-main-horizontal.nav-main-hover .nav-main-item:hover > .nav-main-link-submenu > .nav-main-link-icon {
	color: var(--bs-primary);
}

/* То же самое для тёмной темы: файл темы использует тёмный оттенок основного
   цвета (#7e1818 для красной, #1a536b для синей базы …). В тёмной теме
   --bs-primary — это светлый акцентный цвет (напр. #df5454 для красной), поэтому
   ссылки остаются яркими и читаемыми. */
.dark-mode a:not(.mini-nav-item):not(.badge):not(.btn):not(.btn-block-option):not(.block):not(.dropdown-item):not(.nav-link):not(.page-link):not(.alert-link):not(.nav-main-link):not(.list-group-item-action):not(.close):not(.fc-event):not(.text-success-light):not(.text-danger-light):not(.text-warning-light):not(.text-info-light) {
	color: var(--bs-link-color, var(--bs-primary));
}
.dark-mode a:not(.mini-nav-item):not(.badge):not(.btn):not(.btn-block-option):not(.block):not(.dropdown-item):not(.nav-link):not(.page-link):not(.alert-link):not(.nav-main-link):not(.list-group-item-action):not(.close):not(.fc-event):not(.text-success-light):not(.text-danger-light):not(.text-warning-light):not(.text-info-light):hover {
	color: var(--bs-link-hover-color, var(--bs-primary));
}
.dark-mode a:not(.mini-nav-item):not(.badge):not(.btn):not(.btn-block-option):not(.block):not(.dropdown-item):not(.nav-link):not(.page-link):not(.alert-link):not(.nav-main-link):not(.list-group-item-action):not(.close):not(.fc-event):not(.text-success-light):not(.text-danger-light):not(.text-warning-light):not(.text-info-light).link-fx::before {
	background-color: var(--bs-link-color, var(--bs-primary));
}

/* codebase.min.css жёстко зашивает .btn-alt-primary в синий (#014f77 / #c0e0f1),
   что перебивает файл темы и делает кнопку всегда синей (или в цвете другой
   темы при переключении). Переопределяем палитру через --bs-primary выбранной
   темы, чтобы кнопка использовала цвет темы во всех режимах. Палитра строится
   от --bs-primary, поэтому корректна для КАЖДОЙ темы без правки под конкретный
   цвет. Цвет текста/иконки — тёмный (хороший контраст на светлом фоне-тинте). */
.btn-alt-primary {
	color: #1a1a1a;
	--bs-btn-color: #1a1a1a;
	--bs-btn-bg: color-mix(in srgb, var(--bs-primary) 14%, #ffffff);
	--bs-btn-border-color: color-mix(in srgb, var(--bs-primary) 14%, #ffffff);
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: var(--bs-primary);
	--bs-btn-hover-border-color: var(--bs-primary);
	--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: var(--bs-primary);
	--bs-btn-active-border-color: var(--bs-primary);
	--bs-btn-disabled-color: #1a1a1a;
	--bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary) 14%, #ffffff);
	--bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-primary) 14%, #ffffff);
}

/* ===== Таблица активов (#table_actives): компактный и аккуратный перенос ===== */
/* table-layout: fixed + width:auto: колонки ЖЁСТКО держат заданные px-ширины и
   НЕ сжимаются (ни до 1 символа, ни пропорционально). Таблица занимает сумму
   ширин колонок и при нехватке места скроллится по горизонтали в .table-responsive,
   а содержимое (в т.ч. коды) переносится ВНУТРИ ячейки, не выходя за границы.
   Не меняет шрифты/размеры/данные — только отображение. */
#table_actives {
    table-layout: fixed;
    width: auto !important;
}
#table_actives > thead > tr > th,
#table_actives > tbody > tr > td {
    vertical-align: middle;
    padding: 5px 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Коды (QR / серийный / инвентарный) — ровно одна строка, БЕЗ переносов по <br>/word-break.
   Если значение не влезает в колонку, лишнее скрывается многоточием (...),
   а полный код показывается в нативной подсказке (title) при наведении курсора.
   Класс .asset-code-badge — глобальный: применяется во ВСЕХ таблицах проекта. */
.asset-code-badge {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-weight: bold;
}
/* Для колонок-кодов отключаем перенос на уровне ячейки */
td.active-scan-col,
td.active-serial-col,
td.active-inventory-col,
td.eq-serial-col,
td.eq-inv-col {
    white-space: nowrap !important;
    overflow: hidden;
}
/* Узкая колонка выбора (чекбокс + id): разрешаем перенос, чтобы не выходило за границы */
#table_actives td.active-select-col {
    white-space: normal !important;
    overflow-wrap: anywhere;
}

/* =====================================================================
   Тарификация: скрытие кнопок платных фич по тарифу.
   body[data-tariff="..."] выставляется в index.php.
   free — скрываются все платные кнопки; basic — только материалы (related).
   Серверные гейты в headers/*.php дублируют эти проверки (защита от обхода).
   Универсальные классы .tariff-gate-* можно вешать на любые кнопки.
   ===================================================================== */
body[data-tariff="free"] .buttons-excel,
body[data-tariff="free"] .buttons-pdf,
body[data-tariff="free"] .buttons-print,
body[data-tariff="free"] .buttons-csv,
body[data-tariff="free"] .dt-buttons .buttons-excel,
body[data-tariff="free"] .dt-buttons .buttons-pdf,
body[data-tariff="free"] .dt-buttons .buttons-print,
body[data-tariff="free"] .active-clone,
body[data-tariff="free"] .mass-edit,
body[data-tariff="free"] #block_mass_edit,
body[data-tariff="free"] .related-edit,
body[data-tariff="free"] .related-join,
body[data-tariff="free"] .tariff-gate-export,
body[data-tariff="free"] .tariff-gate-print,
body[data-tariff="free"] .tariff-gate-clone,
body[data-tariff="free"] .tariff-gate-moveall,
body[data-tariff="free"] .tariff-gate-massedit,
body[data-tariff="free"] .tariff-gate-related,
/* basic: материалы/расходники и клонирование недоступны — скрываем их кнопки */
body[data-tariff="basic"] .related-edit,
body[data-tariff="basic"] .related-join,
body[data-tariff="basic"] .tariff-gate-related,
body[data-tariff="basic"] .active-clone,
body[data-tariff="basic"] .tariff-gate-clone {
    display: none !important;
}
/* Подсказка на заблокированной кнопке (опционально, для кнопок с замком). */
.tariff-lock-hint {
    cursor: not-allowed;
    opacity: .55;
}
.tariff-lock-hint:hover {
    opacity: .75;
}

/* Адаптивные карточки тарифов для SweetAlert2 (окно сравнения тарифов). */
/* Скролл внутри самого окна (не страницы), компактный заголовок. */
.spro-tariff-swal {
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
}
@media (max-width: 991.98px) {
    .spro-tariff-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Тариф «Про»: заголовок цветом темы + пульсирующая звезда (лендинг + модалка). */
.ld-tariff-pro-title { color: var(--bs-primary, #c2443d); }
.ld-pro-star {
    color: var(--bs-primary, #c2443d);
    font-size: .8em;
    animation: ldStarSpin 3.5s ease-in-out infinite;
}
@keyframes ldStarSpin {
    0%, 100% { transform: rotate(0deg) scale(1); text-shadow: 0 0 6px rgba(var(--bs-primary-rgb, 194,68,61), .4); }
    50% { transform: rotate(18deg) scale(1.18); text-shadow: 0 0 16px rgba(var(--bs-primary-rgb, 194,68,61), .85); }
}
@media (prefers-reduced-motion: reduce) { .ld-pro-star { animation: none; } }
.spro-tariff-swal .swal2-title {
    margin: .5rem 0 .25rem !important;
    font-size: 1.25rem !important;
}
.spro-tariff-swal .swal2-html-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 90px) !important;
    margin: 0 !important;
    padding: .5rem .75rem !important;
    text-align: left !important;
}
.spro-tariff-swal .swal2-close {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    margin: 0 !important;
    font-size: 1.75rem !important;
    color: var(--bs-body-color) !important;
    z-index: 10 !important;
}
.spro-tariff-swal .swal2-close:hover { color: var(--bs-primary) !important; }
/* Focus-обводка кнопки × — цвета темы (по умолчанию SweetAlert2 ставит голубую). */
.spro-tariff-swal .swal2-close:focus,
.spro-tariff-swal .swal2-close:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 194, 68, 61), .5) !important;
    outline: none !important;
}

/* Focus-обводка кнопки «Сравнить тарифы» — цвета темы (не синий Bootstrap default). */
#spro-tariff-compare-btn:focus,
#spro-tariff-compare-btn:focus-visible,
#spro-tariff-compare-btn.btn:focus,
#spro-tariff-compare-btn.btn:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb, 194, 68, 61), .35) !important;
    border-color: var(--bs-primary) !important;
    outline: none !important;
}
.spro-tariff-cards .block-header { padding: .5rem .75rem !important; }
.spro-tariff-cards .block-content { padding: .75rem !important; }
@media (max-width: 767.98px) {
    .spro-tariff-cards { grid-template-columns: 1fr !important; }
    .spro-tariff-table { font-size: .85rem; }
    .spro-tariff-table th:first-child,
    .spro-tariff-table td:first-child { width: 45% !important; }
}

/* =====================================================================
   Неактивные тарифные плитки дашборда (menu_app): исходная плитка
   (высота не меняется) + полупрозрачный overlay с пометкой тарифа.
   ===================================================================== */
.ld-tile-locked { cursor: default; }
.ld-tile-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    text-align: center;
    padding: .25rem .5rem;
    color: #fff;
    background: rgba(var(--bs-primary-rgb, 194,68,61), .39);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
}
.ld-tile-overlay i { font-size: 2.2rem; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.ld-tile-overlay .ld-tile-overlay-badge {
    display: inline-block;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    /* Непрозрачный alt-primary фон (плитка под overlay тёмная — rgba просвечивала) */
    color: rgb(var(--bs-primary-rgb, 194,68,61));
    background: #fdf3f2;
    box-shadow: inset 0 0 0 1px rgb(var(--bs-primary-rgb, 194,68,61));
}
.dark-mode .ld-tile-overlay .ld-tile-overlay-badge {
    background: #2a2d34;
}

/* =====================================================================
   Пункт компании в сайдбаре (menu_left): слева логотип, справа 2 строки —
   наименование (растворяется при переполнении) + текущий тариф.
   Высота пункта меню не меняется.
   ===================================================================== */
.spro-side-company { line-height: 1.15; }
.spro-side-company { line-height: 1.2; }
.spro-side-company-name {
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
}
.spro-side-company-tariff { margin-top: 3px; line-height: 1; }
.spro-side-tariff-badge { font-size: .76rem; font-weight: 700; padding: 3px 10px; }
.dark-mode .spro-side-company-tariff { color: rgb(var(--bs-primary-rgb, 194,68,61)); }

/* =====================================================================
   Правый сайдбар (#side-overlay): блок «Последние уведомления»
   (.side-notifications в menu_right.php) растягивается на всю
   оставшуюся высоту оверлея, длинный список скроллится внутри блока.
   ===================================================================== */
#side-overlay {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
#side-overlay .content-header,
#side-overlay .content-side:not(.side-notifications) {
    flex-shrink: 0;
}
#side-overlay .content-side.side-notifications {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
#side-overlay .content-side.side-notifications > .block {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
#side-overlay .content-side.side-notifications > .block > .block-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Модалка «Пополнить / Списать» (related-edit): компактная таблица label/поле.
   Запрещаем горизонтальное переполнение — select2 не всегда успевает ужаться
   при открытии модалки, из-за чего появлялась горизонтальная прокрутка. */
.swal2-popup .swal2-html-container .table-sm {
    table-layout: fixed;
    width: 100%;
}
.swal2-popup .swal2-html-container .table-sm td {
    overflow: hidden;
    min-width: 0;
}
.swal2-popup .swal2-html-container .table-sm .select2-container {
    width: 100% !important;
    min-width: 0;
}

/* Скрытый native-select под select2 внутри модалки не должен раздувать
   scrollWidth td (иначе горизонтальная прокрутка модалки). */
.swal2-popup .swal2-html-container .table-sm select.select2-hidden-accessible {
    width: 1px !important;
    max-width: 1px !important;
}