:root {
  /* Основные brand-цвета */
  --bs-primary: #e7382e;
  --bs-primary-rgb: 231, 56, 46;

  --bs-default-primary-rgb: rgb(115, 93, 255); /* Дополнительные оттенки */
  --bs-primary-light: #f15c51;
  --bs-primary-light01: #f15c511c;
  --bs-primary-dark: #b51e19;
  --bs-primary-pastel: #f16256;
  --bs-primary-pastel-hover: #e04e42;
  --bs-primary-pastel-active: #c94339;

  /* Цвета состояния */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-primary-dark);

  /* Кастомный серый (аналог secondary) */
  --bs-gray: #adb5bd;
  --bs-gray-rgb: 173, 181, 189;
  --bs-gray-light: #ced4da;
  --bs-gray-dark: #6c757d;
  --bs-gray-50: #f9fafb; /* очень светлый, почти белый */
  --bs-gray-100: #e9ecef; /* светло-серый */
  --bs-gray-200: #dee2e6; /* чуть темнее */
  --bs-gray-300: #ced4da; /* уже есть, используешь как light */
  --bs-gray-400: #adb5bd; /* твой базовый */
  --bs-gray-500: #868e96; /* средний */
  --bs-gray-600: #6c757d; /* уже есть, используешь как dark */
  --bs-gray-700: #495057; /* насыщенный серый */
  --bs-gray-800: #343a40; /* почти графит */
  --bs-gray-900: #212529; /* почти чёрный */

  --bs-color-tabs: #1f731c;

  --bs-primary2: #289724;
}

.form-label.required::after {
  content: " *";
  color: #dc3545; /* красная звёздочка */
}

.bs-tabs {
  color: var(--bs-color-tabs) !important;
}
.bg-tabs {
  background-color: var(--bs-color-tabs) !important;
}

.bs-primary {
  background-color: var(--bs-default-primary-rgb);
}

/* ==================== DataTables: "нет данных" ==================== */

table.dataTable tbody td.dataTables_empty {
  background: var(--bs-gray-100);
  color: var(--bs-gray-dark);
  text-align: center;
  padding: 2rem !important;
  vertical-align: middle;
  height: 400px; /* фиксируем высоту под 10 строк */
}

/* На всякий случай — убираем бордеры у пустой строки, чтобы выглядело как плашка */
table.dataTable tbody tr td.dataTables_empty {
  border-top: 0;
  border-bottom: 0;
}

.dt-controls .dataTables_length select {
  min-width: 72px;
}
.dt-controls .dataTables_filter input {
  max-width: 240px;
}

/* Чтобы DataTables не ограничивал высоту тела таблицы */
table.dataTable tbody {
  min-height: 70vh;
}

/* ==================== Bootstrap переопределения ==================== */

/* Основные кнопки */
.btn-primary {
  color: #fff;
  background-color: var(--bs-primary-pastel) !important;
  border-color: var(--bs-primary-pastel) !important;
}

.size-heading {
  font-size: 14px;
}

.show-password-button i {
  color: var(--bs-color-tabs) !important;
}

#btnTogglePassword {
  border: none;
  background: transparent;
  box-shadow: none;
}

#btnTogglePassword i {
  font-size: 1rem;
  color: var(--bs-color-tabs) !important;
}

.text-bg-secondary {
  color: #fff;
  background-color: var(--bs-gray) !important;
}

.btn-primary:active {
  background-color: var(--bs-primary-pastel-active) !important;
  border-color: var(--bs-primary-pastel-active) !important;
}

.btn-primary:hover {
  background-color: var(--bs-primary-pastel-hover) !important;
  border-color: var(--bs-primary-pastel-hover) !important;
}

.form-select option:checked {
  background-color: var(--bs-primary2);
  color: #fff;
}

.form-check-input:checked {
  background-color: var(--bs-primary2);
  border-color: var(--bs-primary2);
}

.authenticationcover-background .authentication .authentication-cover {
  background-color: var(--bs-primary-pastel);
}

.form-select:hover,
.form-select:focus,
.form-select:active {
  border-color: var(--bs-gray-light) !important;
}

.form-control:hover {
  border-color: var(--bs-gray) !important;
}

.form-control:active {
  border-color: var(--bs-gray-dark) !important;
}

/* Акцентные элементы интерфейса */
.text-primary {
  color: var(--bs-primary) !important;
}
.bg-primary {
  background-color: var(--bs-primary-pastel) !important;
}

/* Навигация / активные элементы (общие) */
.nav-link.active,
.nav-pills .nav-link.active,
.page-item.active .page-link {
  color: var(--bs-primary);
  background-color: transparent !important;
}

/* Badge и подсветка таблиц */
.badge.bg-primary {
  background-color: var(--bs-primary) !important;
}

/* Hover-эффекты ссылок */
a {
  color: var(--bs-primary-light);
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* ====== Sidebar / Header акценты ====== */

.app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item:hover {
  color: var(--bs-primary) !important;
  background-color: var(--bs-primary) !important;
}

/* Глобальный hover для ссылок, но tabs уже переопределены выше */
.nav-link:hover {
  color: var(--bs-color-tabs);
}

.tab-style-8.nav-tabs > .nav-item > .nav-link:not(.active):hover,
.tab-style-8.nav-tabs > .nav-item > .nav-link:not(.active):focus {
  color: var(--bs-color-tabs);
  border-color: transparent transparent var(--bs-primary) transparent;
}

.tab-style-8.nav-tabs.scaleX.nav-tabs > .nav-item > .nav-link::before {
  background-color: var(--bs-primary);
}

.status--posted,
.status--received {
  background-color: #dcfce7;
  color: #15803d;
}

.status--pending,
.status--draft {
  background-color: #ffedd5;
  color: #c2410c;
}

.status--approved {
  background-color: #e0faff;
  color: #0891b2;
}

.status--canceled {
  background-color: #f3e8ff;
  color: #7e22ce;
}

.status--deleted {
  background-color: #ffe4e6;
  color: #be123c;
}

.status--sent {
  background-color: #dbeafe;
  color: #1d4ed8;
}

/* Только /welcome/menu/{menu_cycle_id} */
#pmDetailPage .tab-style-3 .nav-item .nav-link.active {
  background-color: transparent !important;
  color: transparent !important;
  border: 0 !important;
  border-color: initial !important;
  border-left-color: initial !important;
  border-right-color: initial !important;
  position: static !important; /* если не нужно */
  z-index: auto !important; /* если не нужно */
}

#pmDetailPage .nav-tabs {
  border-bottom: none;
}

.dropdown-item:not(.active):hover,
.dropdown-item:not(.active):focus,
.dropdown-item:not(.active):active {
  color: var(--bs-primary);
  background-color: var(--bs-primary-light01);
}

.btn-outline-primary {
  color: var(--bs-primary-dark);
  border-color: var(--bs-primary-dark);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--bs-primary-dark);
  border-color: var(--bs-primary-dark);
}

.app-sidebar .slide-menu.child1 .side-menu__item.active:before {
  background-color: var(--bs-primary-light);
}

.justify-content-sb {
  justify-content: space-between;
}

.page-item.active {
  background-color: var(--bs-color-tabs);
}

.page-link:hover {
  color: var(--bs-color-tabs);
}

.page-item.active .page-link {
  color: #fff;
  border-color: var(--bs-color-tabs);
}

.filter-border {
  border: 0;
  border-bottom: 1px solid var(--bootstrap-card-border);
  border-radius: 0;
  padding-bottom: 20px;
}

.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.bg-gray-title {
  background-color: var(--bs-gray-100);
}

.position-right {
  right: -1px !important;
}

.p-px {
  padding: 0 6px !important;
}

.w-icon {
  width: 11px;
}

.h-50px {
  height: 35px !important;
}

.w-40 {
  width: 40%;
}
.w-15 {
  width: 15%;
}

/* Кнопки справа от табов в одну линию, но спокойно переносятся на новую строку */
.tab-cta .btn {
  height: 32.2px;
  white-space: nowrap;
}

/* Если нужно уменьшить зазор между последним табом и кнопками */
#userRoleTabs {
  margin-right: 0.5rem;
}

/* --- select2 --- */

.select2-search__field::placeholder {
  color: #999 !important;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: var(--bs-primary2) !important;
  border: 1px solid var(--bs-primary2) !important;
}

.select2-container--default .select2-results__option--selected {
  background-color: var(--bs-primary2) !important;
}

.select2-container--default
  .select2-results__option--selected.select2-results__option--highlighted {
  background-color: var(--bs-color-tabs) !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover,
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:focus {
  background-color: var(--bs-color-tabs) !important;
}

.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #f0f9f3 !important;
  color: #000 !important;
}

/* --- dataTable --- */

table.dataTable.table-striped > tbody > tr.odd > *,
table.dataTable.table-striped > tbody > tr.even > * {
  box-shadow: none !important;
}

/* Горизонтальные линии (шапка + тело) */
.table.dataTable thead th,
.table.dataTable tbody td {
  border-top: 1px solid var(--bs-gray-50) !important;
  font-size: 12px;
}

/* Убираем вертикальные линии и внешнюю левую/правую рамку */
.table.dataTable,
.table.dataTable th,
.table.dataTable td {
  border-left: none !important;
  border-right: none !important;
}

table.dataTable.table-striped > tbody > tr.odd > * {
  background-color: var(--bs-gray-50) !important;
}

table.dataTable.table-striped > tbody > tr.even > * {
  background-color: #fff !important;
}

/* 2) Своя цветовая логика для строк */

/* Базовый фон всех строк */
table.dataTable tbody tr > * {
  background-color: #fff; /* базовый белый */
}

table.dataTable.table-striped > tbody > tr:hover > * {
  background-color: #f0f9f3 !important;
}

/* Кнопки раскрытия – новый цвет */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background-color: var(--bs-primary2) !important;
}

/* Контейнер деталей */
table.dataTable > tbody > tr.child ul.dtr-details {
  width: 100%;
  margin: 0;
  padding-left: 0;
}

/* Каждая строка в "карточке" */
table.dataTable > tbody > tr.child ul.dtr-details > li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Заголовок поля */
table.dataTable > tbody > tr.child span.dtr-title {
  min-width: 120px;
  font-weight: 500;
  color: #6c757d;
  white-space: nowrap;
}

/* Значение поля – переносим как угодно */
table.dataTable > tbody > tr.child span.dtr-data {
  flex: 1;
  white-space: normal !important;
}

/* Контейнер DataTables */
.dt-controls {
  gap: 0.75rem;
}

.dt-controls .dataTables_length {
  order: 0;
}

.dt-controls .tab-cta {
  order: 2;
}

.dt-controls .dataTables_filter {
  order: 1;
  margin-left: auto;
}

/* Поиск DataTables — в одну линию с кнопками */
.dt-controls .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.dt-controls .dataTables_filter input[type="search"] {
  margin-left: 0 !important;
}

/* Наш блок с кнопками над таблицей */
.dt-controls .tab-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Кнопка "Фильтры" – квадратная, по высоте как инпут */
#filtersToggle.btn-icon-square {
  width: 32px;
  height: 32.2px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Кнопка "Сбросить фильтры" — по высоте как селекты */
.card-filters #btnResetFilters {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.75rem;
}

/* --- endDataTable --- */

/* ============================
   TABS — единый финальный блок
   ============================ */

/* База: серая линия (если без .tabs-wrapper) */
.nav-tabs {
  border-bottom: 1px solid var(--bs-gray-light);
}

/* Неактивные табы — серые */
.nav-tabs .nav-link:not(.active) {
  color: var(--bs-gray) !important;
  background: transparent !important;
  border-color: transparent !important;
  opacity: 1;
}

/* Hover по неактивным — тёмно-серый */
.nav-tabs .nav-link:not(.active):hover {
  color: var(--bs-gray-dark) !important;
}

/* Активный таб */
.nav-tabs .nav-link.active {
  color: var(--bs-color-tabs) !important;
  font-weight: 600;
  background-color: transparent !important;
  border-color: transparent transparent var(--bs-color-tabs) transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  position: relative;
  z-index: 3;
}

/* Анимационная линия style-8 (если используется) */
.tab-style-8.nav-tabs.scaleX > .nav-item > .nav-link::before {
  background-color: var(--bs-color-tabs) !important;
}

/* -------------------------------
   TABS + WRAPPER (линия на 100%)
   ------------------------------- */

.tabs-wrapper {
  position: relative;
}

.tabs-wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--bs-gray-light);
  z-index: 1;
}

/* Чтобы не было второй линии */
.tabs-wrapper > .nav-tabs {
  border-bottom: none !important;
  position: relative;
  z-index: 2;
}

/* Линки выглядят выше серой линии */
.tabs-wrapper > .nav-tabs .nav-link {
  position: relative;
  z-index: 3;
}

/* -------------------------------
   Hover-фикс (глобальный hover НЕ залезает)
   ------------------------------- */

.nav-tabs .nav-link:not(.active):hover {
  color: var(--bs-gray-dark) !important;
}

@media (max-width: 767.98px) {
  body.authenticationcover-background {
    min-height: 100vh;
    height: auto;
    overflow-y: auto;
  }

  .authentication {
    align-items: flex-start !important;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .authentication-cover-main {
    margin: 0 auto;
    height: auto;
  }
}

@media (max-width: 576px) {
  /* Контролы всех DataTables на мобильных */
  .dataTables_wrapper .dt-controls {
    justify-content: flex-start !important; /* прижать к левому краю */
    flex-direction: column; /* разместить один под другим */
    align-items: stretch; /* растягиваем на всю ширину */
  }

  .dataTables_wrapper .dt-controls > * {
    width: 100%; /* элементы на всю ширину */
    margin-left: 0 !important;
  }

  /* Убираем автоматический сдвиг поиска вправо */
  .dataTables_wrapper .dt-controls .dataTables_filter {
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* Дополнительно — растянуть input поиска */
  .dataTables_wrapper .dt-controls .dataTables_filter input {
    width: 100% !important;
    max-width: none !important;
  }

  /* Прижимаем "Показать N записей" к левому краю */
  .dataTables_wrapper .dataTables_length {
    text-align: left !important;
    width: 100% !important;
  }

  /* Выравниваем внутренности */
  .dataTables_wrapper .dataTables_length label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .dataTables_wrapper .dataTables_length select {
    margin-left: 0 !important;
  }
}

.btn-icon-square {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.btn-icon-square i {
  line-height: 1;
  font-size: 18px;
}

#about1 .dataTables_wrapper {
  margin-top: 5rem;
}
#schools .dataTables_wrapper {
  margin-top: 5rem;
}
#regions .dataTables_wrapper {
  margin-top: 5rem;
}
#tblCats_wrapper {
  margin-top: 4rem;
}

#tblDecompRecipes_wrapper {
  margin-top: 4rem;
}

#unit .dataTables_wrapper {
  margin-top: 4rem;
}
#supplier .dataTables_wrapper {
  margin-top: 4rem;
}

#pf_tblCats_wrapper {
  margin-top: 4rem;
}

.border-light {
  color: var(--bs-gray-100);
}

#offRecipe #ingList tr.ing-row > td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.ingredient {
  background: #e0faff;
  color: #0891b2;
}

.ready-dish {
  background: #f3e8ff;
  color: #7e22ce;
}

.material {
  background: #fff4e5;
  color: #b45309;
}

.other {
  background: #e5e7eb;
  color: #374151;
}
.semi-finished {
  background: #dcfce7;
  color: #15803d;
}

.inv-type-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 10px;
}

.ingredient-dot {
  background: #0891b2;
}

.ready-dish-dot {
  background: #7e22ce;
}

.material-dot {
  background: #b45309;
}

.other-dot {
  background: #3a4557;
}
.semi-finished-dot {
  background: #15803d;
}

.unknown-dot {
  background-color: #10182869;
}

.type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Буфет — лиловый */
.type-bufet {
  background: #f5e8ff;
  color: #7c3aed;
}

/* Другое — спокойный серо-синий (нейтральный) */
.type-other {
  background: #e5e7eb;
  color: #4b5563;
}

/* Кухня — тёплый жёлто-охристый */
.type-kitchen {
  background: #fff4d7;
  color: #a16207;
}

/* Склад — холодный голубой */
.type-storage {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Общие настройки для наших модалок блюд */
.fancybox__container.dish-fancybox {
  --fancybox-bg: rgba(0, 0, 0, 0.98); /* фон вокруг слайда */
}

/* Убираем белую карточку вокруг контента (HTML-обёртка Fancybox) */
.dish-fancybox .f-html {
  --f-html-bg: transparent;
  --f-html-padding: 0;

  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
}

/* наш общий класс для галерей блюд */
.fancybox__container.dish-fancybox {
  /* полностью тёмный фон вокруг слайда */
  --fancybox-bg: rgba(0, 0, 0, 0.98);
}

/* убираем белую “карточку” вокруг контента */
.dish-fancybox .fancybox__content {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* убираем лишние отступы вокруг слайда */
.dish-fancybox .fancybox__slide {
  padding: 0;
}

/* на всякий случай – убираем margin у первого элемента внутри */
.dish-fancybox .fancybox__content > * {
  margin: 0;
}

/* тулбар тоже делаем без белого фона */
.dish-fancybox .fancybox__toolbar {
  background: transparent;
  box-shadow: none;
}

/* если внутри iframe/видео есть рамка от браузера */
.dish-fancybox iframe,
.dish-fancybox video {
  background: #000;
  border: none;
}

/* allow bootstrap table look */
.gridjs-container .gridjs-table {
  margin-bottom: 0;
}
.gridjs-container .gridjs-th,
.gridjs-container .gridjs-td {
  border: 0;
}

/* ========== DARK THEME FIX FOR DATATABLES ========== */
[data-theme-mode="dark"] table.dataTable tbody tr > * {
  background-color: var(--bs-gray-900) !important; /* тёмный фон */
  color: var(--bs-gray-100) !important; /* светлый текст */
}

[data-theme-mode="dark"] table.dataTable.table-striped > tbody > tr.odd > * {
  background-color: var(--bs-gray-800) !important; /* чуть светлее строки */
}

[data-theme-mode="dark"] table.dataTable.table-striped > tbody > tr.even > * {
  background-color: var(--bs-gray-900) !important;
}

/* Hover тёмной темы */
[data-theme-mode="dark"] table.dataTable.table-striped > tbody > tr:hover > * {
  background-color: #1e293b !important; /* slate-700 vibe */
}

/* Заголовок */
[data-theme-mode="dark"] table.dataTable thead th {
  background-color: var(--bs-gray-900) !important;
  color: var(--bs-gray-100) !important;
  border-color: var(--bs-gray-700) !important;
}

/* Бордеры */
[data-theme-mode="dark"] table.dataTable tbody td {
  border-top: 1px solid var(--bs-gray-800) !important;
}

/* DTR раскрытие — значок */
[data-theme-mode="dark"]
  table.dataTable.dtr-inline.collapsed
  > tbody
  > tr
  > td.dtr-control:before {
  background-color: var(--bs-primary2) !important;
}

/* подсветка строки после создания */
tr.row-highlight td {
  animation: prodFlash 1.2s ease-in-out 0s 2;
}
@keyframes prodFlash {
  0% {
    box-shadow: inset 0 0 0 9999px rgba(255, 193, 7, 0.25);
  }
  100% {
    box-shadow: inset 0 0 0 9999px rgba(255, 193, 7, 0);
  }
}

.select2-container--default .select2-selection.is-invalid {
  border-color: var(--bs-danger) !important;
}

.select2-container--default .select2-selection.is-invalid:focus,
.select2-container--default
  .select2-selection.is-invalid.select2-selection--single {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

/* Мобильные контролы в тёмной теме */
/* ===== LIGHT THEME: disabled look only for .btn-light ===== */
[data-theme-mode="light"] .btn-light:disabled,
[data-theme-mode="light"] .btn-light[disabled],
[data-theme-mode="light"] .btn-light.disabled,
[data-theme-mode="light"] .btn-light[aria-disabled="true"] {
  color: #000 !important; /* текст чёрный */
  background-color: var(--bs-gray-200) !important; /* лёгкий серый фон */
  border-color: var(--bs-gray-200) !important;
  opacity: 1 !important; /* не бледнит */
}

/* на всякий случай, если где-то aria-disabled без disabled */
[data-theme-mode="light"] .btn-light[aria-disabled="true"] {
  pointer-events: none;
}
/* ===== DARK THEME: disabled only for .btn-light ===== */
[data-theme-mode="dark"] .btn-light:disabled,
[data-theme-mode="dark"] .btn-light[disabled],
[data-theme-mode="dark"] .btn-light.disabled,
[data-theme-mode="dark"] .btn-light[aria-disabled="true"] {
  opacity: 0.2 !important;
}

.color {
  padding: 0.25rem 0.45rem;
  font-weight: 600;
  border-radius: 0.25rem;
  font-size: 11px;
  background-color: rgb(115, 93, 255) !important;
}

.tab-style-3 .nav-item .nav-link.active:before {
  background-color: var(--bs-color-tabs);
}

.tab-style-3 .nav-item .nav-link.active:after {
  border-color: var(--bs-color-tabs);
  color: var(--bs-color-tabs);
}

#tblUsers td.td-schools {
  white-space: normal !important;
  vertical-align: top;
}

#tblUsers td.td-schools .schools-cell {
  display: block;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
  overflow: visible;
  text-overflow: unset;
  max-width: none;
}

/* ==========================
   VIEW MODALS (openView) UI
   применяется ко всем .modal.modal-view
   ========================== */

/* lg+ делаем “как #mdlGrView”, мобилка = fullscreen-lg-down */
@media (min-width: 992px) {
  /* базовое правило оставляешь как было */
  .modal.modal-view:not(.modal-view--fullscreen) .modal-dialog {
    --view-max: 1138px;
    --view-gap: 30px;
    max-width: min(var(--view-max), calc(100vw - (var(--view-gap) * 2)));
    margin: var(--view-gap) auto;
    height: calc(100vh - (var(--view-gap) * 2));
  }

  /* fullscreen-исключение */
  .modal.modal-view.modal-view--fullscreen .modal-dialog {
    max-width: 100% !important;
    margin: 0 !important;
    height: 100vh !important;
  }
}

/* фон не скроллится, пока открыта модалка */
body.modal-open {
  overflow: hidden !important;
}
html:has(body.modal-open) {
  overflow: hidden !important;
}

/* важно для flex-складывания, иначе footer может "выпирать/прятаться" */
.modal.modal-view .modal-content,
.modal.modal-view .modal-body {
  min-height: 0;
}

/* ===== базовый каркас модалки ===== */
.modal.modal-view .modal-content {
  border: 0;
  border-radius: 5px;
  box-shadow: 0 10px 25px rgba(22, 28, 45, 0.08);
  overflow: hidden;
  background: #fff;
}

.modal.modal-view .modal-header {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.modal.modal-view .modal-title {
  font-size: 16px;
  color: #000;
}

.modal.modal-view .vm-subtitle {
  color: #98a2b3;
  font-size: 13px;
}

.modal.modal-view .btn-close {
  box-shadow: none;
}

/* мобилка: fullscreen, без скругления */
@media (max-width: 991.98px) {
  .modal.modal-view .modal-content {
    border-radius: 0;
  }
}

/* ===== "как в 1С": tabs/footer фиксированы, скроллы только внутри нужных блоков ===== */
.modal.modal-view .modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.modal.modal-view .modal-body > .nav-tabs,
.modal.modal-view .modal-body > .tabs-wrapper {
  flex: 0 0 auto;
}

/* контейнер под табы занимает остаток, общий скролл запрещаем */
.modal.modal-view .vm-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;

  display: flex; /* КЛЮЧ */
  flex-direction: column; /* КЛЮЧ */
}

/* КЛЮЧ: tab-content делаем flex, чтобы активный tab-pane мог растягиваться */
.modal.modal-view .vm-modal-scroll > .tab-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; /* КЛЮЧ */
  flex-direction: column; /* КЛЮЧ */
}

/* КЛЮЧ: активный таб — flex:1 и min-height:0 (вместо height:100%) */
.modal.modal-view .vm-modal-scroll > .tab-content > .tab-pane.active {
  display: flex; /* override bootstrap display:block */
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* footer всегда виден */
.modal.modal-view .modal-footer {
  flex: 0 0 auto;
}

/* ===== pills / badges in header ===== */
.modal.modal-view .vm-badge,
.modal.modal-view .inv-badge {
  font-size: 12px;
}

/* ===== info cards ===== */
.modal.modal-view .vm-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  background: #fff;
  padding: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal.modal-view .vm-card-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
}

.modal.modal-view .vm-meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #98a2b3;
  font-weight: 700;
  margin-bottom: 2px;
}

.modal.modal-view .vm-value {
  font-weight: 800;
  color: #101828;
}

.modal.modal-view .vm-comment {
  font-size: 13px;
  color: #101828;
  font-weight: 500;
}

/* ===== sections (например комментарий) ===== */
.modal.modal-view .vm-section {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  background: #fff;
  padding: 16px;
  min-height: 200px;
}

/* ===== table card ===== */
.modal.modal-view .vm-table-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  background: #fff;
  overflow: hidden;

  /* ========= UNIVERSAL COLUMN SYSTEM =========
     Переопределяй на конкретной карточке через класс vm-cols-*
     или прямо инлайном style="--col-...: ..."
  */
  --col-number: 20px;
  --col-unit: 70px;

  /* PO (6 колонок) */
  --col-item: 1fr;
  --col-qty: 140px;
  --col-price: 140px;
  --col-sum: 160px;

  /* FC (7 колонок) */
  --col-name: 1fr;
  --col-prep: 140px;
  --col-cons: 140px;
  --col-rest: 140px;
  --col-action: 72px;
}

.modal.modal-view .vm-table-card .table {
  margin-bottom: 0;
}

/* меньше шрифт в таблице */
.modal.modal-view .vm-table-sm {
  font-size: 13px;
}

/* табличные заголовки */
.modal.modal-view .vm-table-card .vm-table-sm thead th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  /* white-space: nowrap; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--bs-body-bg, #fff);
}

/* (опционально) чтобы "Номенклатура" не раздвигала таблицу */
.modal.modal-view .vm-table-sm :is(th, td).tbl-item,
.modal.modal-view .vm-table-sm :is(th, td).tbl-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== таблица (фиксированная) ===== */
.modal.modal-view .vm-table-card.vm-table-card--fixed {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;

  /* ключ: общий горизонтальный скролл */
  overflow-x: auto;
  overflow-y: hidden;
}

/* ВАЖНО: карточке даём flex:1 в активном табе */
.modal.modal-view .tab-pane.active .vm-table-card.vm-table-card--fixed {
  flex: 1 1 auto;
  min-height: 0;
}

.modal.modal-view .vm-table-card.vm-table-card--fixed .vm-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;

  overflow-y: auto;
  overflow-x: visible; /* X отдаём родителю */
  -webkit-overflow-scrolling: touch;

  /* важно: чтобы ширина считалась по контенту таблицы */
  width: max-content;
  min-width: 100%;
}
.modal.modal-view
  .vm-table-card.vm-table-card--fixed
  .vm-table-scroll
  .vm-table-sm {
  width: max-content;
  min-width: 100%;
  table-layout: fixed; /* оставляем как у тебя */
}

/* sticky header */
.modal.modal-view
  .vm-table-card.vm-table-card--fixed
  .vm-table-scroll
  .vm-table-sm
  thead
  th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* =========================================
   WIDTHS BY COLUMN CLASSES (th + td)
   ========================================= */
.modal.modal-view .vm-table-sm :is(th, td).tbl-number {
  width: var(--col-number);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-unit {
  width: var(--col-unit);
}

/* PO */
.modal.modal-view .vm-table-sm :is(th, td).tbl-item {
  width: var(--col-item);
}
.modal.modal.view .vm-table-sm :is(th, td).tbl-qty {
  width: var(--col-qty);
} /* <- опечатка была, дублирую правильным ниже */
.modal.modal-view .vm-table-sm :is(th, td).tbl-qty {
  width: var(--col-qty);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-price {
  width: var(--col-price);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-sum {
  width: var(--col-sum);
}

/* FC */
.modal.modal-view .vm-table-sm :is(th, td).tbl-name {
  width: var(--col-name);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-prep {
  width: var(--col-prep);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-cons {
  width: var(--col-cons);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-rest {
  width: var(--col-rest);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-action {
  width: var(--col-action);
}

/* =========================================
   PRESETS (вешаешь на .vm-table-card)
   ========================================= */

/* PO: 6 колонок (#, item, unit, qty, price, sum) */
.modal.modal-view .vm-table-card.vm-cols-po {
  --col-number: 44px;
  --col-unit: 70px;
  --col-item: 480px;
  --col-qty: 140px;
  --col-price: 140px;
  --col-sum: 160px;
}

/* FC: 7 колонок (#, name, unit, prep, cons, rest, action) */
.modal.modal-view .vm-table-card.vm-cols-fc {
  --col-number: 44px;
  --col-unit: 55px;
  --col-name: 473px;
  --col-prep: 120px;
  --col-cons: 120px;
  --col-rest: 110px;
  --col-action: 103px;
}

/* =========================================
   TOTALS GRID (layout only)
   ========================================= */

/* базовая тотал-строка (фон/бордер/цвет у тебя задаётся ниже в theme patch) */
.modal.modal-view .vm-table-card .vm-table-total {
  display: grid;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  flex: 0 0 auto;
}

/* PO totals: 6 колонок */
.modal.modal-view .vm-table-card.vm-cols-po .vm-table-total {
  grid-template-columns:
    var(--col-number)
    var(--col-item)
    var(--col-unit)
    var(--col-qty)
    var(--col-price)
    var(--col-sum);
}

.modal.modal-view .vm-table-card.vm-cols-po .vm-table-total .vm-total-label {
  grid-column: 2;
}
.modal.modal-view .vm-table-card.vm-cols-po .vm-table-total .vm-total-qty {
  grid-column: 4;
  color: var(--bs-color-tabs);
}
.modal.modal-view .vm-table-card.vm-cols-po .vm-table-total .vm-total-sum {
  grid-column: 6;
  color: var(--bs-color-tabs);
}

/* totals: всегда зелёные во всех view-модалках */

.modal.modal-view .vm-table-total .vm-total-fqty,
.modal.modal-view .vm-table-total .vm-total-fsum,
.modal.modal-view .vm-table-total .vm-total-prepared,
.modal.modal-view .vm-table-total .vm-total-consumed,
.modal.modal-view .vm-table-total .vm-total-rest {
  color: var(--bs-color-tabs) !important;
}

/* FC totals: 7 колонок */
.modal.modal-view .vm-table-card.vm-cols-fc .vm-table-total.vm-table-total--fc {
  grid-template-columns:
    var(--col-number)
    var(--col-name)
    var(--col-unit)
    var(--col-prep)
    var(--col-cons)
    var(--col-rest)
    var(--col-action);
}

.modal.modal-view
  .vm-table-card.vm-cols-fc
  .vm-table-total--fc
  .vm-total-label {
  grid-column: 2;
}
.modal.modal-view
  .vm-table-card.vm-cols-fc
  .vm-table-total--fc
  .vm-total-prepared {
  grid-column: 4;
  color: var(--bs-color-tabs);
}

.modal.modal-view
  .vm-table-card.vm-cols-fc
  .vm-table-total--fc
  .vm-total-consumed {
  grid-column: 5;
  color: var(--bs-color-tabs);
}
.modal.modal-view .vm-table-card.vm-cols-fc .vm-table-total--fc .vm-total-rest {
  grid-column: 6;
  color: var(--bs-color-tabs);
}

/* ===== footer ===== */
.modal.modal-view .vm-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

.modal.modal-view .btn-close-pill {
  border-radius: 999px;
  padding: 12px 26px;
}

.mh-300 {
  min-height: 300px;
}

/* ===== INFO TAB: отдельный скролл (только вертикальный) ===== */
.modal.modal-view .tab-pane.vm-tab-info {
  /* vm-tab-info у тебя на info tab-pane — ок */
  overflow: hidden;
}

/* скролл внутри Информации */
.modal.modal-view .tab-pane.vm-tab-info .vm-info-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal.modal-view .table th,
.modal.modal-view .table td {
  font-size: 0.82rem;
}

/* ==========================
   modal-view theming (light/dark) — patch
   вставить В КОНЕЦ CSS
   ========================== */

/* 1) Токены по умолчанию (светлая тема) */
.modal.modal-view {
  --vm-bg: #fff;
  --vm-surface: #fff;
  --vm-text: #101828;
  --vm-title: #000;
  --vm-muted: #98a2b3;
  --vm-border: rgba(0, 0, 0, 0.06);
  --vm-shadow: 0 10px 25px rgba(22, 28, 45, 0.08);

  /* таблица (обычная bootstrap table) */
  --vm-table-head-bg: var(--vm-bg);
  --vm-table-head-text: var(--vm-title);
  --vm-table-row-text: var(--vm-text);
  --vm-table-border: var(--vm-border);
}

/* 2) Тёмная тема: поддержим и data-theme-mode, и data-bs-theme (если вдруг используешь) */
[data-theme-mode="dark"] .modal.modal-view,
[data-bs-theme="dark"] .modal.modal-view {
  --vm-bg: var(--bs-gray-900, #0b1220);
  --vm-surface: var(--bs-gray-800, #111827);
  --vm-text: var(--bs-gray-100, #e5e7eb);
  --vm-title: var(--bs-gray-100, #f3f4f6);
  --vm-muted: var(--bs-gray-400, #94a3b8);
  --vm-border: var(--bs-gray-700, #334155);
  --vm-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);

  --vm-table-head-bg: var(--vm-bg);
  --vm-table-head-text: var(--vm-title);
  --vm-table-row-text: var(--vm-text);
  --vm-table-border: var(--vm-border);
}

/* 3) Применяем токены к твоим существующим классам (ничего не переименовываем) */
.modal.modal-view .modal-content {
  background: var(--vm-bg) !important;
  color: var(--vm-text) !important;
  box-shadow: var(--vm-shadow) !important;
}

.modal.modal-view .modal-header,
.modal.modal-view .modal-footer.vm-footer {
  background: var(--vm-bg) !important;
  border-color: var(--vm-border) !important;
}

.modal.modal-view .modal-title {
  color: var(--vm-title) !important;
}
.modal.modal-view .vm-subtitle {
  color: var(--vm-muted) !important;
}

/* карточки/секции/табличная карточка */
.modal.modal-view .vm-card,
.modal.modal-view .vm-section,
.modal.modal-view .vm-table-card {
  background: var(--vm-surface) !important;
  border-color: var(--vm-border) !important;
}

.modal.modal-view .vm-meta {
  color: var(--vm-muted) !important;
}
.modal.modal-view .vm-value {
  color: var(--vm-text) !important;
}

/* таблица внутри модалки (не DataTables) */
.modal.modal-view .table {
  color: var(--vm-table-row-text) !important;
  --bs-table-color: var(--vm-table-row-text);
  --bs-table-border-color: var(--vm-table-border);
}

/* заголовок таблицы */
.modal.modal-view .vm-table-card .vm-table-sm thead th {
  background: var(--bs-gray-300) !important;
  color: var(--vm-table-head-text) !important;
  border-bottom-color: var(--vm-table-border) !important;
}

[data-theme-mode="dark"] .modal.modal-view .vm-table-card .vm-table-sm thead th,
[data-bs-theme="dark"] .modal.modal-view .vm-table-card .vm-table-sm thead th {
  background: var(--bs-gray-700) !important;
}

/* бордеры строк (если надо) */
.modal.modal-view .table > :not(caption) > * > * {
  border-color: var(--vm-table-border) !important;
}

/* (необязательно) полосатость/hover для тёмной темы у обычной .table-striped/.table-hover */
[data-theme-mode="dark"]
  .modal.modal-view
  .table.table-striped
  > tbody
  > tr:nth-of-type(odd)
  > *,
[data-bs-theme="dark"]
  .modal.modal-view
  .table.table-striped
  > tbody
  > tr:nth-of-type(odd)
  > * {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-theme-mode="dark"]
  .modal.modal-view
  .table.table-hover
  > tbody
  > tr:hover
  > *,
[data-bs-theme="dark"]
  .modal.modal-view
  .table.table-hover
  > tbody
  > tr:hover
  > * {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* крестик закрытия в тёмной теме (иначе плохо видно) */
[data-theme-mode="dark"] .modal.modal-view .btn-close,
[data-bs-theme="dark"] .modal.modal-view .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: 0.85;
}

/* ИТОГО внизу таблицы (light/dark) */
.modal.modal-view .vm-table-total {
  background: var(--bs-gray-300) !important;
  border-top: 1px solid var(--vm-border) !important;
  color: var(--vm-text) !important;
}

[data-theme-mode="dark"] .modal.modal-view .vm-table-total,
[data-bs-theme="dark"] .modal.modal-view .vm-table-total {
  background: var(--bs-gray-700) !important;
}

.modal.modal-view .vm-table-total .vm-total-label {
  color: var(--vm-text) !important;
}

[data-theme-mode="dark"] .modal.modal-view .vm-table-total .vm-total-qty,
[data-theme-mode="dark"] .modal.modal-view .vm-table-total .vm-total-sum {
  color: var(--bs-color-tabs, #e5e7eb) !important; /* или оставь акцент */
}

/* Пилюля для "Действие" в fcDocModal */
.modal.modal-view .fc-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border-radius: 10px;
}

.modal.modal-view .fc-action-pill i {
  font-size: 18px;
  line-height: 1;
}

/* fcDocModal totals aligned to 7-column table */
.modal.modal-view .vm-table-total.vm-table-total--fc {
  display: grid;
  grid-template-columns:
    var(--c-number) /* # */
    2fr /* Номенклатура */
    var(--c-unit) /* ЕИ */
    1fr /* Приготовлено */
    1fr /* Потреблено */
    1fr /* Остаток */
    70px; /* Действие (иконка) */

  align-items: center;
  gap: 0.5rem;

  padding: 0.5rem 1rem;
  border-top: 1px solid var(--vm-border, rgba(0, 0, 0, 0.06));
  background: var(--vm-surface, #fff);
}

/* размещение по колонкам */
.modal.modal-view .vm-table-total.vm-table-total--fc .vm-total-label {
  grid-column: 2;
}
.modal.modal-view .vm-table-total.vm-table-total--fc .vm-total-prepared {
  grid-column: 4;
}
.modal.modal-view .vm-table-total.vm-table-total--fc .vm-total-consumed {
  grid-column: 5;
}
.modal.modal-view .vm-table-total.vm-table-total--fc .vm-total-rest {
  grid-column: 6;
}

/* ===== ORDER VIEW (8 columns) preset ===== */
.modal.modal-view .vm-table-card.vm-cols-order {
  --col-number: 44px;
  --col-unit: 55px;
  --col-item: 240px;
  --col-qty: 120px;
  --col-price: 110px;
  --col-sum: 150px;
  --col-fqty: 140px;
  --col-fsum: 150px;
}

/* ширины th/td для новых колонок */
.modal.modal-view .vm-table-sm :is(th, td).tbl-fqty {
  width: var(--col-fqty);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-fsum {
  width: var(--col-fsum);
}

/* totals grid for order (8 columns) */
.modal.modal-view
  .vm-table-card.vm-cols-order
  .vm-table-total.vm-table-total--order {
  display: grid;
  grid-template-columns:
    var(--col-number)
    var(--col-item)
    var(--col-unit)
    var(--col-qty)
    var(--col-price)
    var(--col-sum)
    var(--col-fqty)
    var(--col-fsum);
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}

.modal.modal-view
  .vm-table-card.vm-cols-order
  .vm-table-total--order
  .vm-total-label {
  grid-column: 2;
}
.modal.modal-view
  .vm-table-card.vm-cols-order
  .vm-table-total--order
  .vm-total-qty {
  grid-column: 5;
  color: var(--bs-color-tabs);
}
.modal.modal-view
  .vm-table-card.vm-cols-order
  .vm-table-total--order
  .vm-total-sum {
  grid-column: 6;
  color: var(--bs-color-tabs);
  text-align: right;
}
.modal.modal-view
  .vm-table-card.vm-cols-order
  .vm-table-total--order
  .vm-total-fqty {
  grid-column: 7;
  color: var(--bs-color-tabs);
}
.modal.modal-view
  .vm-table-card.vm-cols-order
  .vm-table-total--order
  .vm-total-fsum {
  grid-column: 8;
  color: var(--bs-color-tabs);
}

/* ==========================
   PATCH: общий горизонтальный скролл для TABLE + TOTAL
   (чтобы подвал ездил вместе с таблицей)
   ========================== */

/* 1) Горизонтальный скролл переносим на КАРТОЧКУ */
.modal.modal-view .vm-table-card.vm-table-card--fixed {
  overflow-x: auto; /* <-- ВОТ ОН */
  overflow-y: hidden; /* вертикаль не здесь */
}

/* 3) Таблица должна уметь стать шире контейнера по контенту/колонкам */
.modal.modal-view
  .vm-table-card.vm-table-card--fixed
  .vm-table-scroll
  .vm-table-sm {
  width: max-content; /* <-- таблица расширяется по колонкам */
  min-width: 100%; /* но не меньше контейнера */
}

/* 5) На iOS иногда прилипший thead дергается — включим momentum scroll для вертикали */
.modal.modal-view .vm-table-card.vm-table-card--fixed .vm-table-scroll {
  -webkit-overflow-scrolling: touch;
}

/* =========================
   GR: 8 колонок (#, name, unit, exp, rec, exp_price, act_price, sum)
   ========================= */
.modal.modal-view .vm-table-card.vm-cols-gr {
  --col-number: 44px;
  --col-unit: 55px;

  --col-name: 293px;

  --col-exp: 120px;
  --col-rec: 120px;

  --col-exp-price: 120px;
  --col-act-price: 120px;

  --col-sum: 140px;
}

/* widths for th/td */
.modal.modal-view .vm-table-sm :is(th, td).tbl-exp {
  width: var(--col-exp);
}
.modal.modal.view .vm-table-sm :is(th, td).tbl-rec {
  width: var(--col-rec);
} /* (опечатка защита не нужна, но оставлю корректным ниже) */
.modal.modal-view .vm-table-sm :is(th, td).tbl-rec {
  width: var(--col-rec);
}

.modal.modal-view .vm-table-sm :is(th, td).tbl-exp-price {
  width: var(--col-exp-price);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-act-price {
  width: var(--col-act-price);
}

/* tbl-sum уже есть в PO, но тут используем ту же переменную */
.modal.modal-view .vm-table-card.vm-cols-gr .vm-table-sm :is(th, td).tbl-sum {
  width: var(--col-sum);
}

/* totals grid */
.modal.modal-view .vm-table-card.vm-cols-gr .vm-table-total.vm-table-total--gr {
  grid-template-columns:
    var(--col-number)
    var(--col-name)
    var(--col-unit)
    var(--col-exp)
    var(--col-rec)
    var(--col-exp-price)
    var(--col-act-price)
    var(--col-sum);
}

.modal.modal-view
  .vm-table-card.vm-cols-gr
  .vm-table-total--gr
  .vm-total-label {
  grid-column: 2;
}
.modal.modal-view
  .vm-table-card.vm-cols-gr
  .vm-table-total--gr
  .vm-total-expected {
  grid-column: 4;
  color: var(--bs-color-tabs);
}
.modal.modal.view
  .vm-table-card.vm-cols-gr
  .vm-table-total--gr
  .vm-total-received {
  grid-column: 5;
  color: var(--bs-color-tabs);
} /* защита от опечатки */
.modal.modal-view
  .vm-table-card.vm-cols-gr
  .vm-table-total--gr
  .vm-total-received {
  grid-column: 5;
  color: var(--bs-color-tabs);
}
.modal.modal-view .vm-table-card.vm-cols-gr .vm-table-total--gr .vm-total-sum {
  grid-column: 8;
  color: var(--bs-color-tabs);
}

/* =========================
   PRODUCTION VIEW: columns + totals grid
   (вставить один раз в конец)
   ========================= */

/* новые колонки для Production View */
.modal.modal-view .vm-table-sm :is(th, td).tbl-type {
  width: var(--col-type);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-note {
  width: var(--col-note);
}

/* пресет: Продукция (6 колонок) */
.modal.modal-view .vm-table-card.vm-cols-prod-products {
  --col-number: 44px;
  --col-name: 475px;
  --col-type: 120px;
  --col-unit: 49px;
  --col-qty: 125px;
  --col-note: 1fr;
}
.modal.modal-view .vm-table-card.vm-cols-prod-products .vm-table-total {
  grid-template-columns:
    var(--col-number)
    var(--col-name)
    var(--col-type)
    var(--col-unit)
    var(--col-qty)
    var(--col-note);
}
.tbl-loc {
  width: 190px;
}
.modal.modal-view .vm-table-total--prod-products .vm-total-label {
  grid-column: 2;
}
.modal.modal.view .vm-table-total--prod-products .vm-total-qty {
  grid-column: 5;
  color: var(--bs-color-tabs);
} /* если у тебя есть опечатка modal.modal.view — не используй её */
.modal.modal-view .vm-table-total--prod-products .vm-total-qty {
  grid-column: 3;
  padding-left: 40px;
  color: var(--bs-color-tabs);
}

/* пресет: Материалы (4 колонки) */
.modal.modal-view .vm-table-card.vm-cols-prod-materials {
  --col-number: 44px;
  --col-name: 1fr;
  --col-unit: 90px;
  --col-qty: 88px;
}
.modal.modal-view .vm-table-card.vm-cols-prod-materials .vm-table-total {
  grid-template-columns:
    var(--col-number)
    var(--col-name)
    var(--col-unit)
    var(--col-qty);
}
.modal.modal-view .vm-table-total--prod-materials .vm-total-label {
  grid-column: 2;
}
.modal.modal-view .vm-table-total--prod-materials .vm-total-qty {
  grid-column: 4;
  color: var(--bs-color-tabs);
}

/* =========================
   INVENTORY VIEW: 6 колонок
   (#, Товар, ЕИ, Учетное, Фактическое, Дельта)
   ========================= */

.modal.modal-view .vm-table-card.vm-cols-inv {
  --col-number: 36px;
  --col-unit: 102px;
  --col-name: 459px;
  --col-recorded: 140px;
  --col-actual: 140px;
  --col-delta: 140px;
}

/* widths for th/td */
.modal.modal-view .vm-table-sm :is(th, td).tbl-recorded {
  width: var(--col-recorded);
}
.modal.modal.view .vm-table-sm :is(th, td).tbl-actual {
  width: var(--col-actual);
} /* опечатка защита */
.modal.modal-view .vm-table-sm :is(th, td).tbl-actual {
  width: var(--col-actual);
}
.modal.modal-view .vm-table-sm :is(th, td).tbl-delta {
  width: var(--col-delta);
}

/* totals grid */
.modal.modal-view
  .vm-table-card.vm-cols-inv
  .vm-table-total.vm-table-total--inv {
  grid-template-columns:
    var(--col-number)
    var(--col-name)
    var(--col-unit)
    var(--col-recorded)
    var(--col-actual)
    var(--col-delta);
}

.modal.modal-view
  .vm-table-card.vm-cols-inv
  .vm-table-total--inv
  .vm-total-label {
  grid-column: 2;
  padding-left: 30px;
}

.modal.modal.view
  .vm-table-card.vm-cols-inv
  .vm-table-total--inv
  .vm-total-recorded {
  grid-column: 4;
} /* защита от опечатки */
.modal.modal-view
  .vm-table-card.vm-cols-inv
  .vm-table-total--inv
  .vm-total-recorded {
  grid-column: 4;
}

.modal.modal-view
  .vm-table-card.vm-cols-inv
  .vm-table-total--inv
  .vm-total-actual {
  grid-column: 5;
}

.modal.modal-view
  .vm-table-card.vm-cols-inv
  .vm-table-total--inv
  .vm-total-delta {
  grid-column: 6;
}

/* чтобы итоги тоже были акцентными (как у тебя для qty/sum/etc) */
.modal.modal-view .vm-table-total .vm-total-recorded,
.modal.modal-view .vm-table-total .vm-total-actual {
  color: var(--bs-color-tabs) !important;
}

.modal.modal-view .vm-table-total .vm-total-delta {
  color: var(--bs-danger);
}

/* ===== Transfers: columns + TOTAL alignment ===== */

/* задаём ширины колонок для таблицы и total-row */
.vm-cols-tr {
  --tr-col-num: 44px;
  --tr-col-num: 44px;
  --tr-col-unit: 90px;
  --tr-col-qty: 105px;
}

/* ширины колонок в таблице */
.vm-cols-tr .tbl-number {
  width: var(--tr-col-num);
  white-space: nowrap;
}
.vm-cols-tr .tbl-unit {
  width: var(--tr-col-unit);
  white-space: nowrap;
}
.vm-cols-tr .tbl-cons {
  width: var(--tr-col-qty);
  white-space: nowrap;
}

/* чтобы "Номенклатура" нормально тянулась */
.vm-cols-tr .tbl-name {
  min-width: 240px;
}

/* total-row: сетка = тем же колонкам, что у таблицы */
.vm-cols-tr .vm-table-total--tr {
  display: grid;
  grid-template-columns:
    var(--tr-col-num)
    1fr
    var(--tr-col-unit)
    var(--tr-col-qty);
  gap: 0;
  align-items: center;

  /* если у тебя уже есть base-стили vm-table-total — они останутся,
     это только раскладка */
}

/* "Итого" стоит слева (под номером/именем), число — строго под qty */
.vm-cols-tr .vm-table-total--tr .vm-total-label {
  grid-column: 2;
  padding-left: 0.25rem;
}

.vm-cols-tr .vm-table-total--tr .vm-total-qty {
  grid-column: 4;
  color: var(--bs-color-tabs);
}

/* ===== Operation view: columns + TOTAL alignment (без колонки "Тип") ===== */
.vm-cols-op {
  --op-col-num: 44px;
  --op-col-unit: 120px;
  --op-col-qty: 120px;
}

.vm-cols-op .tbl-number {
  width: var(--op-col-num);
  white-space: nowrap;
}
.vm-cols-op .tbl-unit {
  width: var(--op-col-unit);
  white-space: nowrap;
}
.vm-cols-op .tbl-qty {
  width: var(--op-col-qty);
  white-space: nowrap;
}

.vm-cols-op .tbl-name {
  min-width: 240px;
}

.vm-cols-op .vm-table-total--op {
  display: grid;
  grid-template-columns:
    var(--op-col-num)
    1fr
    var(--op-col-unit)
    var(--op-col-qty);
  align-items: center;
}

.vm-cols-op .vm-table-total--op .vm-total-label {
  grid-column: 1 / span 3;
  padding-left: 0.25rem;
}

.vm-cols-op .vm-table-total--op .vm-total-qty {
  grid-column: 4;
  padding-left: 0.25rem;
  color: var(--bs-color-tabs);
}

/* ===== Supplier Return view: columns + TOTAL alignment ===== */
.vm-cols-ret {
  --ret-col-num: 44px;
  --ret-col-unit: 100px;
  --ret-col-qty: 125px;
  --ret-col-price: 140px;
  --ret-col-sum: 130px;
}
.vm-cols-ret .tbl-number {
  width: var(--ret-col-num);
  white-space: nowrap;
}
.vm-cols-ret .tbl-unit {
  width: var(--ret-col-unit);
  white-space: nowrap;
}
.vm-cols-ret .tbl-qty {
  width: var(--ret-col-qty);
  white-space: nowrap;
}
.vm-cols-ret .tbl-price {
  width: var(--ret-col-price);
  white-space: nowrap;
}
.vm-cols-ret .tbl-sum {
  width: var(--ret-col-sum);
  white-space: nowrap;
}

.vm-cols-ret .tbl-name {
  min-width: 260px;
}

/* total-row aligned to columns:
   # | NAME | UNIT | QTY | PRICE | SUM
*/
.vm-cols-ret .vm-table-total--ret {
  display: grid;
  grid-template-columns:
    var(--ret-col-num)
    1fr
    var(--ret-col-unit)
    var(--ret-col-qty)
    var(--ret-col-price)
    var(--ret-col-sum);
  align-items: center;
}

/* "Итого" начинается под Номенклатурой */
.vm-cols-ret .vm-table-total--ret .vm-total-label {
  grid-column: 2; /* NAME column */
  padding-left: 0.25rem;
}

/* qty под Количество */
.vm-cols-ret .vm-table-total--ret .vm-total-qty {
  grid-column: 4;
  padding-left: 0.25rem;
  color: var(--bs-color-tabs);
}

/* sum под Сумма */
.vm-cols-ret .vm-table-total--ret .vm-total-sum {
  grid-column: 6;
  padding-left: 0.25rem;
  color: var(--bs-color-tabs);
}

.td-title__size {
  font-size: 0.8rem;
  font-weight: 500;
}

/* базовый отступ (открыто) */
[data-nav-layout="vertical"]
  .app-sidebar
  .main-menu
  > .slide
  > .side-menu__item {
  margin-block: 4px;
}

/* закрыто (overlay/icontext/closed): увеличиваем */
html[data-nav-layout="vertical"][data-toggled$="-close"]
  .app-sidebar
  .main-menu
  > .slide
  > .side-menu__item {
  margin-block: 10px;
}

/* открыто */
[data-nav-layout="vertical"] .app-sidebar .main-menu > .slide {
  margin-block: 4px;
}

/* закрыто */
html[data-nav-layout="vertical"][data-toggled$="-close"]
  .app-sidebar
  .main-menu
  > .slide {
  margin-block: 10px;
}

@media (max-width: 1356px) {
  .dataTables_wrapper .flex-wrap .btn.btn-sm {
    margin-bottom: 2px;
  }
}

.modal-header .btn-close {
  font-size: 1rem;
}

/* approved: акцент на recorded + actual, delta можно отдельным цветом */
.modal.modal-view .vm-table-total.inv-totals--approved .vm-total-recorded,
.modal.modal-view .vm-table-total.inv-totals--approved .vm-total-actual {
  color: var(--bs-color-tabs) !important;
}

.modal.modal-view .vm-table-total.inv-totals--approved .vm-total-delta {
  color: var(--bs-danger) !important;
}

/* =========================
   INVENTORY VIEW: sync horizontal scroll for table + totals
   ========================= */

/* 2) Вертикаль — только внутри .vm-table-scroll */
.modal.modal-view .vm-table-card.vm-table-card--fixed .vm-table-scroll {
  overflow-y: auto !important;
  overflow-x: visible !important; /* важно */
  -webkit-overflow-scrolling: touch;
}

/* 3) Таблица может быть шире контейнера */
.modal.modal-view
  .vm-table-card.vm-table-card--fixed
  .vm-table-scroll
  .vm-table-sm {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: fixed;
}

/* =========================
   INVENTORY VIEW (PENDING): 4 колонки
   (#, Товар, ЕИ, Фактическое)
   ========================= */

.modal.modal-view .vm-table-card.vm-cols-inv-pending {
  --col-number: 36px;
  --col-unit: 102px;
  --col-name: 459px;
  --col-actual: 140px;
}

/* widths for th/td */
.modal.modal-view
  .vm-table-card.vm-cols-inv-pending
  .vm-table-sm
  :is(th, td).tbl-number {
  width: var(--col-number);
}
.modal.modal-view
  .vm-table-card.vm-cols-inv-pending
  .vm-table-sm
  :is(th, td).tbl-unit {
  width: var(--col-unit);
}
.modal.modal-view
  .vm-table-card.vm-cols-inv-pending
  .vm-table-sm
  :is(th, td).tbl-name {
  width: var(--col-name);
}
.modal.modal-view
  .vm-table-card.vm-cols-inv-pending
  .vm-table-sm
  :is(th, td).tbl-actual {
  width: var(--col-actual);
}

/* totals grid: 4 колонки, чтобы "Итого" было в ОДНУ строку */
.modal.modal-view
  .vm-table-card.vm-cols-inv-pending
  .vm-table-total.vm-table-total--inv {
  grid-template-columns:
    var(--col-number)
    var(--col-name)
    var(--col-unit)
    var(--col-actual);
  align-items: center;
}

/* размещение элементов в totals */
.modal.modal-view
  .vm-table-card.vm-cols-inv-pending
  .vm-table-total--inv
  .vm-total-label {
  grid-column: 2;
  padding-left: 30px; /* если нужен этот отступ как в approved */
}

.modal.modal-view
  .vm-table-card.vm-cols-inv-pending
  .vm-table-total--inv
  .vm-total-actual {
  grid-column: 6;
}

.modal.modal-view .vm-table-card.vm-table-card--fixed .vm-table-total {
  min-width: max-content !important;
}

.inv-actions {
  padding-right: 17px;
  border-right: 1px solid var(--bs-gray-400);
}

/* =========================
   Tabs badge: inactive -> gray
   ========================= */

/* inventory_input: invApprView */
#invApprViewTabTableBtn:not(.active) #invApprViewTabTableBadge {
  background-color: var(--bs-gray-200) !important;
  color: var(--bs-gray-700) !important;
}
#invApprViewTabTableBtn.active #invApprViewTabTableBadge {
  color: var(--bs-color-tabs) !important;
}

/* purchase_order: poView */
#poViewTabTableBtn:not(.active) #poViewTabTableBadge {
  background-color: var(--bs-gray-200) !important;
  color: var(--bs-gray-700) !important;
}
#poViewTabTableBtn.active #poViewTabTableBadge {
  color: var(--bs-color-tabs) !important;
}

/* orders_approve: orderView */
#orderViewTabTableBtn:not(.active) #ordViewTabTableBadge {
  background-color: var(--bs-gray-200) !important;
  color: var(--bs-gray-700) !important;
}
#orderViewTabTableBtn.active #ordViewTabTableBadge {
  color: var(--bs-color-tabs) !important;
}

/* grView: неактивный таб -> серый бейдж */
#grViewTabTableBtn:not(.active) #grViewTabTableBadge {
  background-color: var(--bs-gray-200) !important;
  color: var(--bs-gray-700) !important;
}

/* grView: активный таб -> оставляем зелёный фон, правим текст */
#grViewTabTableBtn.active #grViewTabTableBadge {
  color: var(--bs-color-tabs) !important;
}

/* supplier_return: неактивный таб -> серый бейдж */
#retViewTabTableBtn:not(.active) #retViewTabTableBadge {
  background-color: var(--bs-gray-200) !important;
  color: var(--bs-gray-700) !important;
}

/* supplier_return: активный таб -> оставляем зелёный фон, правим текст */
#retViewTabTableBtn.active #retViewTabTableBadge {
  color: var(--bs-color-tabs) !important;
}

/* transfers: неактивный таб -> серый бейдж */
#trViewTabTableBtn:not(.active) #trViewTabTableBadge {
  background-color: var(--bs-gray-200) !important;
  color: var(--bs-gray-700) !important;
}

/* transfers: активный таб -> оставляем текущий зелёный фон, правим текст */
#trViewTabTableBtn.active #trViewTabTableBadge {
  color: var(--bs-color-tabs) !important;
}

/* stock_operation: неактивный таб -> серый бейдж */
#opViewTabTableBtn:not(.active) #opViewTabTableBadge {
  background-color: var(--bs-gray-200) !important;
  color: var(--bs-gray-700) !important;
}

/* stock_operation: активный таб -> зелёный (как сейчас) */
#opViewTabTableBtn.active #opViewTabTableBadge {
  color: var(--bs-color-tabs) !important;
}

/* curator_inventories_approve: неактивный таб -> серый бейдж */
#invViewTabTableBtn:not(.active) #invViewTabTableBadge {
  background-color: var(--bs-gray-200) !important;
  color: var(--bs-gray-700) !important;
}

/* активный таб -> зелёный (как сейчас) */
#invViewTabTableBtn.active #invViewTabTableBadge {
  color: var(--bs-color-tabs) !important;
}

/* production view: неактивный таб -> серый бейдж */
#prodViewTabProductsBtn:not(.active) #prodViewTabProductsBadge,
#prodViewTabMaterialsBtn:not(.active) #prodViewTabMaterialsBadge {
  background-color: var(--bs-gray-200) !important;
  color: var(--bs-gray-700) !important;
}

/* активный таб -> зелёный */
#prodViewTabProductsBtn.active #prodViewTabProductsBadge,
#prodViewTabMaterialsBtn.active #prodViewTabMaterialsBadge {
  color: var(--bs-color-tabs) !important;
}

/* curator_inventories_approve: неактивный таб -> серый бейдж */
#paViewTabTableBtn:not(.active) #paViewTabTableBadge {
  background-color: var(--bs-gray-200) !important;
  color: var(--bs-gray-700) !important;
}

/* активный таб -> зелёный (как сейчас) */
#paViewTabTableBtn.active #paViewTabTableBadge {
  color: var(--bs-color-tabs) !important;
}

/* ==========================
   Inventory approve: бейджи в одну линию
   ========================== */

/* 1) Статус-пилюля (dot + текст) — НЕ переносить */
#mdlInvApprView #invApprView_status_badge,
#mdlInvApprView .vm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

#mdlInvApprView #invApprView_status_badge .dot,
#mdlInvApprView .vm-badge .dot {
  flex: 0 0 auto;
}

/* 2) Бейджи в таблице списка (статус) — тоже не переносить */
#tblInvApprList .badge {
  white-space: nowrap;
}

/* 3) Номенклатура с точкой типа (dot + название) — строго в одну линию */
#mdlInvApprView .inv-name-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0; /* важно для text-truncate */
  white-space: nowrap; /* не переносим строку */
}

#mdlInvApprView .inv-name-wrap .inv-type-dot {
  flex: 0 0 auto;
}

#mdlInvApprView .inv-name-wrap .inv-name-text {
  min-width: 0; /* чтобы text-truncate работал */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 4) Бейдж в табе "Товары" (если вдруг уезжает на следующую строку) */
#mdlInvApprView #invViewTabTableBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

#mdlInvApprView #invViewTabTableBadge {
  flex: 0 0 auto;
}

/* production view: dot + name в одну линию */
#mdlProductionView .inv-name-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0; /* важно для text-truncate внутри flex */
}

#mdlProductionView .inv-type-dot {
  flex: 0 0 auto;
  display: inline-block; /* на всякий */
}

#mdlProductionView .inv-name-text {
  flex: 1 1 auto;
  min-width: 0; /* важно для ellipsis */
}

#mdlProductionView .modal-content {
  position: relative;
}

/* Overlay for shortage notifications */
.pv-shortage-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.pv-shortage-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pv-shortage-overlay.d-none {
  display: none !important;
}

.pv-shortage-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pv-shortage-overlay.is-open .pv-shortage-backdrop {
  opacity: 1;
}

.pv-shortage-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;

  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.pv-shortage-overlay.is-open .pv-shortage-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pv-shortage-card .modal-content {
  border-radius: 14px;
}

#prodViewShortageList {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #b8bfcf #f3f4f6;
}

#prodViewShortageList::-webkit-scrollbar {
  width: 10px;
}

#prodViewShortageList::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

#prodViewShortageList::-webkit-scrollbar-thumb {
  background: #b8bfcf;
  border-radius: 10px;
  border: 2px solid #f3f4f6;
}

#prodViewShortageList::-webkit-scrollbar-thumb:hover {
  background: #9ea7ba;
}

#prodViewShortageOverlay.pv-shortage-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#prodViewShortageOverlay.pv-shortage-overlay.is-open {
  display: flex;
}

#prodViewShortageOverlay .pv-shortage-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

#prodViewShortageOverlay .pv-shortage-card {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 32px));
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

/* #mdlProductionView,
#mdlProductionView .modal-dialog,
#mdlProductionView .modal-content,
#mdlProductionView .modal-body{
  overflow: visible !important;
} */

.pv-shortage-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.pv-shortage-overlay.is-open .pv-shortage-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ========================================================= */

#prodViewShortageList {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #b8bfcf #f3f4f6;
}

/* Chrome, Edge, Safari */
#prodViewShortageList::-webkit-scrollbar {
  width: 10px;
}

#prodViewShortageList::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

#prodViewShortageList::-webkit-scrollbar-thumb {
  background: #b8bfcf;
  border-radius: 10px;
  border: 2px solid #f3f4f6;
}

#prodViewShortageList::-webkit-scrollbar-thumb:hover {
  background: #9ea7ba;
}

.pv-shortage-card .custom-alert-icon {
  margin-bottom: 8px;
}

#prodViewShortageList .border-bottom:last-child {
  border-bottom: 0 !important;
}

.order_badge {
  font-size: 14px;
  margin-bottom: 0;
}

/* Основной/действия — компактно */
.iu-sup-table .iu-col-primary,
.iu-sup-table td:nth-child(4) {
  width: 90px;
  min-width: 90px;
}

.iu-sup-table .iu-col-actions,
.iu-sup-table td:nth-child(5) {
  width: 52px;
  min-width: 52px;
}

/* Если у тебя .td-title__size где-то режет содержимое — уберём это для инпутов */
.iu-sup-table td .form-control {
  min-width: 0;
}

/* =========================
   Recipe tables: без скролла, числа всегда помещаются
   (#offRecipe и #pf_offRecipe)
   ========================= */

/* фикс-лейаут, чтобы px-ширины колонок работали предсказуемо */
#offRecipe .table-responsive > table,
#pf_offRecipe .table-responsive > table {
  table-layout: fixed;
  width: 100%;
}

/* ЕИ (2-я колонка) */
#offRecipe table th:nth-child(2),
#offRecipe table td:nth-child(2),
#pf_offRecipe table th:nth-child(2),
#pf_offRecipe table td:nth-child(2) {
  width: 56px;
  white-space: nowrap;
}

/* Брутто/Нетто/Готовый продукт (3-5 колонки) — под 999.999 хватит */
#offRecipe table th:nth-child(3),
#offRecipe table td:nth-child(3),
#offRecipe table th:nth-child(4),
#offRecipe table td:nth-child(4),
#offRecipe table th:nth-child(5),
#offRecipe table td:nth-child(5),
#pf_offRecipe table th:nth-child(3),
#pf_offRecipe table td:nth-child(3),
#pf_offRecipe table th:nth-child(4),
#pf_offRecipe table td:nth-child(4),
#pf_offRecipe table th:nth-child(5),
#pf_offRecipe table td:nth-child(5) {
  width: 96px;
}

/* кнопка удалить (6-я) */
#offRecipe table th:nth-child(6),
#offRecipe table td:nth-child(6),
#pf_offRecipe table th:nth-child(6),
#pf_offRecipe table td:nth-child(6) {
  width: 44px;
  white-space: nowrap;
}

/* Ингредиент (1-я) забирает остаток */
#offRecipe table th:nth-child(1),
#offRecipe table td:nth-child(1),
#pf_offRecipe table th:nth-child(1),
#pf_offRecipe table td:nth-child(1) {
  width: auto;
  min-width: 220px;
}

/* инпуты в числовых колонках */
#offRecipe .ing-qty,
#offRecipe .ing-netto,
#offRecipe .ing-end,
#pf_offRecipe .pf-ing-qty,
#pf_offRecipe .pf-ing-netto,
#pf_offRecipe .pf-ing-end {
  width: 100%;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

/* без горизонтального скролла */
#offItem #itemTabSuppliers .table-responsive {
  overflow-x: hidden !important;
}

#offItem #itemTabSuppliers table.iu-sup-table {
  table-layout: fixed;
  width: 100%;
}

/* 4 колонки: 1=поставщик, 2=цена, 3=основной, 4=действия */
#offItem #itemTabSuppliers .iu-sup-table th:nth-child(4),
#offItem #itemTabSuppliers .iu-sup-table td:nth-child(4) {
  width: 44px;
}

#offItem #itemTabSuppliers .iu-sup-table th:nth-child(3),
#offItem #itemTabSuppliers .iu-sup-table td:nth-child(3) {
  width: 90px;
}

#offItem #itemTabSuppliers .iu-sup-table th:nth-child(2),
#offItem #itemTabSuppliers .iu-sup-table td:nth-child(2) {
  width: 150px;
}

#offItem #itemTabSuppliers .iu-sup-table td:nth-child(1) {
  white-space: normal;
}

#offItem #itemTabSuppliers .iu-sup-table td .form-control {
  min-width: 0;
}

.subst-modal {
  border: 0;
  border-radius: 0.25rem;
  box-shadow: 0 18px 40px rgba(22, 28, 45, 0.1);
  overflow: hidden;
}

.subst-badge {
  border-radius: 999px;
  padding: 0.45rem 0.65rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.subst-ghost-btn {
  border: 0;
  background: #f2f3f7;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.subst-ghost-btn:hover {
  background: #e9ebf2;
}

.subst-card {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.subst-field {
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  min-height: 54px;
}

.subst-timeline {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.subst-node {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  position: relative;
}

.subst-node:not(.subst-node-last)::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  height: calc(100% - 20px);
  width: 2px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.subst-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.subst-ico-warn {
  font-size: 25px;
}

.subst-ico-ok {
  font-size: 25px;
}

.subst-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.subst-title {
  font-weight: 600;
  font-size: 1rem;
}
.subst-title-strong {
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.15;
}

/* чуть аккуратнее на мобилке */
@media (max-width: 576px) {
  .subst-title-strong {
    font-size: 1.15rem;
  }
  .subst-node {
    grid-template-columns: 40px 1fr;
  }
  .subst-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .subst-node:not(.subst-node-last)::after {
    left: 19px;
    top: 40px;
  }
}

/* badge */
.subst-badge {
  border-radius: 999px;
  padding: 0.45rem 0.65rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* комментарий внутри поля */
.subst-note-title {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--bs-gray-600);
  margin-bottom: 5px; /* как ты просишь */
}

.subst-note-text {
  white-space: pre-wrap;
}

/* иконка комментария */
.subst-note-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 43px;
  font-size: 22px;
}

/* кружок со стрелкой между карточками — без этого “как на скрине” не будет */
#prod_fgEditModal .fg-arrow-badge {
  border: 4px solid #fff;
}

/* активная “причина” */
#prod_fgEditModal #prod_fgEditReasonChips .btn.is-active {
  color: #fff;
  background-color: rgb(var(--success-rgb));
}

/* ===== FG Edit modal theming (success-light) ===== */
#prod_fgEditModal .card.rounded-4,
#prod_fgEditModal .form-control,
#prod_fgEditModal .form-select {
  border-radius: 1rem; /* примерно rounded-4 */
}

/* textarea fixed height */
#prod_fgEditModal #prod_fgEditNote {
  min-height: 200px;
  resize: vertical;
}

/* chips: hover как success-light, active тоже success-light */
#prod_fgEditModal #prod_fgEditReasonChips .btn {
  border-color: var(--bs-border-color);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
#prod_fgEditModal #prod_fgEditReasonChips .btn:hover {
  color: #fff;
  background-color: rgb(var(--success-rgb));
}
#prod_fgEditModal #prod_fgEditReasonChips .btn.is-active {
  color: #fff;
  background-color: rgb(var(--success-rgb));
}

/* ===== Select2: светлый бордер + success focus, только в этой модалке ===== */
#prod_fgEditModal .select2-container--default .select2-selection--single {
  background-color: var(--bs-success-bg-subtle);
  border: 1px solid var(--bs-success-border-subtle);
  border-radius: 1rem;
  min-height: calc(1.5em + 0.75rem + 2px);
}
#prod_fgEditModal
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: calc(1.5em + 0.75rem);
  padding-left: 0.75rem;
  padding-right: 2.25rem;
}
#prod_fgEditModal
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: calc(1.5em + 0.75rem);
  right: 0.5rem;
}

#prod_fgEditModal
  .select2-container--default.select2-container--focus
  .select2-selection--single {
  border-color: var(--bs-success);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.15);
}

/* dropdown highlight */
#prod_fgEditModal
  .select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.mh-70 {
  min-height: 70px;
}

.order-th {
  font-size: 12px;
}

/* ===== Theme-aware text (Bootstrap 5.3) =====
/* Светлая тема: текст чёрный */
/* :root[data-bs-theme="light"] .text-bs-tabs,
:root[data-bs-theme="light"] .vm-table-total--prod-ttk,
:root[data-bs-theme="light"] #prod_ttkModal .vm-table-total--prod-ttk,
:root[data-bs-theme="light"] #mdlProductionView .vm-table-total,
:root[data-bs-theme="light"] #mdlProductionView .vm-table-total * {
  color: #111827 !important; 
} */

/* Тёмная тема: текст белый */
/* :root[data-bs-theme="dark"] .text-bs-tabs,
:root[data-bs-theme="dark"] .vm-table-total--prod-ttk,
:root[data-bs-theme="dark"] #prod_ttkModal .vm-table-total--prod-ttk,
:root[data-bs-theme="dark"] #mdlProductionView .vm-table-total,
:root[data-bs-theme="dark"] #mdlProductionView .vm-table-total * {
  color: #ffffff !important;
} */

/* если внутри встречается text-muted — тоже подчиняем теме */
/* :root[data-bs-theme="light"] .text-bs-tabs.text-muted,
:root[data-bs-theme="light"] .vm-table-total--prod-ttk .text-muted {
  color: rgba(17, 24, 39, 0.72) !important;
}
:root[data-bs-theme="dark"] .text-bs-tabs.text-muted,
:root[data-bs-theme="dark"] .vm-table-total--prod-ttk .text-muted {
  color: rgba(255, 255, 255, 0.72) !important;
}  */

.modal.modal-view .vm-card-ico-ttk {
  width: 51px;
  height: 51px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
}

/* KPI cards */
#prod_needCalcModal .need-kpi-card {
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
}
#prod_needCalcModal .need-kpi-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
  flex: 0 0 44px;
}
#prod_needCalcModal .need-kpi-val {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
}

/* Search */
#prod_needCalcModal .need-search {
  width: min(320px, 100%);
}
#prod_needCalcModal .need-count-badge {
  font-weight: 600;
  padding: 0.35rem 0.6rem;
}

/* Table */
#prod_needCalcModal .need-table-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}
#prod_needCalcModal .need-thead th {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.55);
  background: #f8fafc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding-top: 14px;
  padding-bottom: 14px;
  white-space: nowrap;
}
#prod_needCalcModal .need-row td {
  padding-top: 18px;
  padding-bottom: 18px;
  border-color: rgba(0, 0, 0, 0.05);
}

/* Ingredient cell (dot + name) */
#prod_needCalcModal .need-ing {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#prod_needCalcModal .need-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 8px;
}
#prod_needCalcModal .need-dot--sm {
  width: 7px;
  height: 7px;
}

/* Numbers */
#prod_needCalcModal .need-num {
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
}
#prod_needCalcModal .need-diff {
  letter-spacing: 0.01em;
}

/* Stocks in last column */
#prod_needCalcModal .need-stocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#prod_needCalcModal .need-stock-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#prod_needCalcModal .need-stock-name {
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  white-space: nowrap;
}
#prod_needCalcModal .need-stock-pill {
  min-width: 92px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0.35rem 0.55rem;
}

/* Footer hint */
#prod_needCalcModal .need-footer-hint {
  display: flex;
  align-items: center;
  gap: 0;
}

.need-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 8px;
}
.need-dot--sm {
  width: 7px;
  height: 7px;
  flex-basis: 7px;
}
code.need-code {
  font-family: var(--bs-font-monospace);
  font-size: 1rem;
  background: transparent;
  padding: 0;
  color: inherit;
}

/* FC: бейдж "Товары" в модалке — активный/неактивный таб */
#fcDocTabTableBtn #fcDocTabTableBadge {
  /* НЕ активный (по умолчанию) */
  background-color: rgba(var(--bs-secondary-rgb), 0.15) !important;
  color: var(--bs-secondary) !important;
}

/* АКТИВНЫЙ таб */
#fcDocTabTableBtn.nav-link.active #fcDocTabTableBadge {
  background-color: rgba(var(--bs-success-rgb), 0.15) !important;
  color: var(--bs-success) !important;
}

/* ===== TTK TAB: нормальная раскладка без "сжатия" ===== */
#prodViewTabTtk .vm-card,
#prodViewTabTtk .card,
#prodViewTabTtk .card-body {
  min-height: 0; /* критично для flex+scroll */
}

#prodViewTabTtk .vm-card.h-100 {
  display: flex;
  flex-direction: column;
}

#prodViewTabTtk .card-body {
  display: flex;
  flex-direction: column;
}

/* LEFT: список блюд — свой вертикальный скролл */
#prodViewTabTtk #prodViewTtkNav {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100vh;
  padding: 0 0.75rem 0.75rem 0.75rem;
}

/* чтобы шапка "Блюда" не слипалась с контентом */
#prodViewTabTtk .ttk-left-head {
  padding: 0.5rem 0.75rem 0 0.75rem;
}

/* RIGHT: таблица ТТК — вертикальный скролл, без горизонтального */
#prodViewTabTtk .vm-ttk-table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#prodViewTabTtk .vm-table-scroll--y {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* <-- ключевое: нет горизонтального */
}

/* таблица не должна провоцировать горизонтальный скролл */
#prodViewTabTtk #prodView_ttk_table {
  table-layout: fixed;
  width: 100%;
}

#prodViewTabTtk #prodView_ttk_table .tbl-name {
  overflow: hidden;
}

/* ===== Totals bar: сетка под 6 колонок ===== */
#mdlProductionView .vm-table-total--prod-ttk,
#prod_pfTtkModal .vm-table-total--prod-ttk,
#prod_ttkModal .vm-table-total--prod-ttk {
  display: grid;
  grid-template-columns: 48px 1fr 70px 143px 81px 172px;
  gap: 0;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

#mdlProductionView .vm-table-total--prod-ttk .vm-total-label,
#prod_pfTtkModal .vm-table-total--prod-ttk .vm-total-label,
#prod_ttkModal .vm-table-total--prod-ttk .vm-total-label {
  grid-column: 2 / 4; /* под "Номенклатура + ЕИ" */
}

#mdlProductionView .vm-table-total--prod-ttk [data-ttk-total="brutto"],
#prod_pfTtkModal .vm-table-total--prod-ttk [data-ttk-total="brutto"],
#prod_ttkModal .vm-table-total--prod-ttk [data-ttk-total="brutto"] {
  grid-column: 4;
}

#mdlProductionView .vm-table-total--prod-ttk [data-ttk-total="netto"],
#prod_pfTtkModal .vm-table-total--prod-ttk [data-ttk-total="netto"],
#prod_ttkModal .vm-table-total--prod-ttk [data-ttk-total="netto"] {
  grid-column: 5;
}

#mdlProductionView .vm-table-total--prod-ttk [data-ttk-total="out"],
#prod_pfTtkModal .vm-table-total--prod-ttk [data-ttk-total="out"],
#prod_ttkModal .vm-table-total--prod-ttk [data-ttk-total="out"] {
  grid-column: 6;
}

.prod-ttk-footer__cell {
  color: var(--bs-color-tabs);
  width: 40px;
}

.prod-ttk-footer__cell--brutto {
  width: 40px;
}

.prod-ttk-footer__cell--netto {
  width: 40px;
}

.nav-style-5 > button {
  padding-left: 0;
}

.prod-ttk-footer__cell--out {
  margin: 0 auto;
}

/* ===== Reports cards hover (scale / jump) ===== */
.report-card {
  cursor: pointer;
  user-select: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
  will-change: transform;
}

.report-card:hover {
  transform: translateY(-3px) scale(1.02);
}

.report-card:active {
  transform: translateY(-1px) scale(0.99);
}

.report-card:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Остатки товаров: компактные числа и центрирование складских колонок */
#rgTable th,
#rgTable td {
  vertical-align: middle;
}

#rgTable .rg-num {
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#rgTable .rg-head-center {
  text-align: left;
}

#rgTable tfoot td {
  font-weight: 700;
}

.mg-scroll-host {
  scrollbar-width: thin;
  scrollbar-color: #6c757d #e9ecef; /* thumb / track */
}

.mg-scroll-host::-webkit-scrollbar {
  height: 12px;
  width: 10px;
}
.mg-scroll-host::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 10px;
}
.mg-scroll-host::-webkit-scrollbar-thumb {
  background: #6c757d;
  border-radius: 10px;
  border: 2px solid #e9ecef;
  background-clip: padding-box;
}
.mg-scroll-host::-webkit-scrollbar-thumb:hover {
  background: #495057;
}

.txt-align-center {
  text-align: center !important;
}

/* ===== mgTable: разделители в шапке ===== */

/* верхняя строка: заголовки групп (colspan=4) — рамки слева/справа жирнее */
#mgTable thead tr:first-child th[colspan="4"] {
  border-left: 1px solid var(--bs-gray-50) !important;
  border-right: 1px solid var(--bs-gray-50) !important;
}

/* нижняя строка: каждые 4 колонки (кон. остаток) — жирный разделитель группы */
#mgTable thead tr:last-child th:nth-child(4n) {
  border-right: 1px solid var(--bs-gray-50) !important;
}
/* нижняя строка: каждые 4 колонки (кон. остаток) — жирный разделитель группы */
#mgTable thead tr:first-child th:nth-child(4n) {
  border-left: 1px solid var(--bs-gray-50) !important;
}

/* группа слева/справа */
#mgTable thead tr:last-child th:nth-child(4n + 1) {
  border-left: 1px solid var(--bs-gray-50) !important;
}
#mgTable thead tr:last-child th:nth-child(4n) {
  border-right: 1px solid var(--bs-gray-50) !important;
}

/* ===== GR VIEW: widths + footer grid (scoped) ===== */
#mdlGrView .vm-table-card.vm-cols-gr {
  /* ширины колонок под ЭТУ таблицу */
  --col-number: 42px;
  --col-name: 320px; /* ✅ фикс для Номенклатуры (НЕ 1fr) */
  --col-unit: 70px;
  --col-qty: 110px;
  --col-exp: 110px;
  --col-rec: 110px;
  --col-sum: 120px;
}

/* table fixed layout + widths */
#mdlGrView #paView_items_table {
  table-layout: fixed;
}

#mdlGrView .vm-table-card.vm-cols-gr .vm-table-sm :is(th, td).tbl-number {
  width: var(--col-number);
}
#mdlGrView .vm-table-card.vm-cols-gr .vm-table-sm :is(th, td).tbl-name {
  width: var(--col-name);
}
#mdlGrView .vm-table-card.vm-cols-gr .vm-table-sm :is(th, td).tbl-unit {
  width: var(--col-unit);
}
#mdlGrView .vm-table-card.vm-cols-gr .vm-table-sm :is(th, td).tbl-qty {
  width: var(--col-qty);
}
#mdlGrView .vm-table-card.vm-cols-gr .vm-table-sm :is(th, td).tbl-exp {
  width: var(--col-exp);
}
#mdlGrView .vm-table-card.vm-cols-gr .vm-table-sm :is(th, td).tbl-rec {
  width: var(--col-rec);
}
#mdlGrView .vm-table-card.vm-cols-gr .vm-table-sm :is(th, td).tbl-sum {
  width: var(--col-sum);
}

/* ===== totals grid: теперь 7 колонок (как в таблице) ===== */
#mdlGrView .vm-table-card.vm-cols-gr .vm-table-total.vm-table-total--gr {
  display: grid;
  grid-template-columns:
    var(--col-number)
    var(--col-name)
    var(--col-unit)
    var(--col-qty)
    var(--col-exp)
    var(--col-rec)
    var(--col-sum);
  align-items: center;
}

/* позиционирование "Итого" под нужные колонки */
#mdlGrView .vm-table-card.vm-cols-gr .vm-table-total--gr .vm-total-label {
  grid-column: 2; /* Номенклатура */
}

#mdlGrView .vm-table-card.vm-cols-gr .vm-table-total--gr .vm-total-qty {
  grid-column: 4; /* Кол-во (у тебя пусто) */
  width: 0px;
}

/* #mdlGrView .vm-table-card.vm-cols-gr .vm-table-total--gr .vm-total-expected {
  grid-column: 6; 
  color: var(--bs-color-tabs);
} */

/* #mdlGrView .vm-table-card.vm-cols-gr .vm-table-total--gr .vm-total-received {
  grid-column: 7; 
  color: var(--bs-color-tabs);
} */

#mdlGrView .vm-table-card.vm-cols-gr .vm-table-total--gr .vm-total-sum {
  grid-column: 8; /* Δ */
  color: var(--bs-color-tabs);
}

/* вместо глобального .btn:disabled */
.btn-light.disabled,
.btn-light[disabled],
.btn-light:disabled,
.btn-light[aria-disabled="true"] {
  color: #000 !important;
  opacity: 1 !important;
}

.modal.modal-view .vm-table-card.vm-cols-po .vm-table-total .vm-total-price {
  grid-column: 5; /* PRICE */
  color: var(--bs-color-tabs);
}

#tblReturnItems_wrapper .dt-buttons {
  display: none !important;
}

#tblInvItems_wrapper .dt-buttons {
  display: none !important;
}

#prod_tblDocs_wrapper .dt-buttons {
  order: 2;
}

#home_dashboardRoot canvas {
  max-height: 330px;
}

/* dashboards — look like prototype */
#home_dashboardRoot,
#home_dashboardRoot * {
  box-sizing: border-box;
}

#home_dashboardRoot .card {
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 25px rgba(17, 24, 39, 0.06) !important;
}

#home_dashboardRoot .period-btn .btn {
  border-radius: 999px !important;
}

#home_dashboardRoot .kpi-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 20px;
}

#home_dashboardRoot .kpi-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

#home_dashboardRoot .kpi-sub {
  color: #6b7280;
  font-size: 13px;
}

#home_dashboardRoot .pill-badge {
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 10px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

#home_dashboardRoot canvas {
  max-height: 330px;
}

/* KPI cards: без тени, с границей как в примере */
#home_kpiRow .card {
  box-shadow: none !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important; /* как тонкая рамка */
  border-radius: 0 !important;
}

/* Кружок иконки (цвет берём из status--) */
.kpi-status-icon {
  width: 36px;
  height: 36px;
}

/* маленький бейдж справа "KPI · период" */
.kpi-period-badge {
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
}

.dash-chart-box canvas {
  width: 100% !important;
  height: 100% !important;
}

.kpi-title {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* ровно 2 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  min-height: calc(1.25em * 2); /* фиксируем высоту под 2 строки */
}

/* одинаковая высота области графика */
.dash-chart-box {
  height: 260px; /* подбери под дизайн */
  position: relative;
}

.dash-chart-box--line-bar {
  height: 300px;
}

.dash-period__label {
  line-height: 1.1;
}

.dash-period {
  min-width: 110px; /* чтобы не ломалось на узких */
  text-align: right; /* если надо вправо */
}

.dash-period__badge {
  display: inline-block;
  margin-top: 0.25rem;
  align-self: flex-start;
}

.dash-chart-head {
  min-height: 64px; /* подбери: обычно 56–72 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.dash-chart-text {
  min-width: 0;
}

.dash-chart-title {
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.dash-chart-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* максимум 2 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  min-height: calc(1.25em * 2); /* всегда место под 2 строки */
}

/* 2) Бордеры "как в Excel" */
#mgTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#mgTable th,
#mgTable td {
  border: 1px solid rgba(0, 0, 0, 0.12) !important; /* все стороны */
}

/* 3) Подложка для sticky/фиксированных частей */
#mgTable thead th {
  background: var(--bs-gray-300) !important;
}

/* FixedColumns создаёт отдельные "слои" — им тоже нужен фон */
div.dtfc-left-top-blocker,
div.dtfc-right-top-blocker,
div.dtfc-left-bottom-blocker,
div.dtfc-right-bottom-blocker,
table.dataTable.dtfc-has-left thead th,
table.dataTable.dtfc-has-left tbody td,
table.dataTable.dtfc-has-left tfoot td {
  background: #fff;
}

/* Но шапка должна оставаться серой */
table.dataTable.dtfc-has-left thead th {
  background: var(--bs-gray-300) !important;
}

/* Разделитель между зафиксированными колонками и остальной таблицей */
div.dtfc-left-top-blocker,
div.dtfc-left-bottom-blocker,
table.dataTable.dtfc-has-left tbody td.dtfc-fixed-left,
table.dataTable.dtfc-has-left thead th.dtfc-fixed-left,
table.dataTable.dtfc-has-left tfoot td.dtfc-fixed-left {
  box-shadow: 2px 0 0 rgba(0, 0, 0, 0.1);
}

/* Чтобы текст в фикс-области не "светился" поверх */
table.dataTable tbody td.dtfc-fixed-left,
table.dataTable thead th.dtfc-fixed-left,
table.dataTable tfoot td.dtfc-fixed-left {
  background: #fff;
}

/* Убираем полосатость bootstrap-table, иначе на фикс-колонках будет каша */
#mgTable.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
}

/* Внешний bootstrap-wrapper НЕ должен скроллить, иначе ломает DT scroll + sticky */
.mg-table-wrap {
  overflow: visible !important;
}

#mgTable_wrapper .dtfc-fixed-left,
#mgTable_wrapper .dtfc-fixed-right {
  background: #fff;
}
#mgTable_wrapper thead .dtfc-fixed-left {
  background: var(--bs-gray-300) !important;
}

/* ===== mgTable: разделители ТОЛЬКО в шапке (совместимо с DT FixedColumns) ===== */

/* Фон шапки во всех слоях */
#mgTable_wrapper table.dataTable thead th {
  background: var(--bs-gray-300) !important;
}

/* 1) Верхняя строка: границы у групп (colspan=4) */
#mgTable_wrapper table.dataTable thead tr:first-child th[colspan="4"] {
  border-left: 1px solid var(--bs-gray-50) !important;
  border-right: 1px solid var(--bs-gray-50) !important;
}

/* 2) Нижняя строка: каждая 4-я колонка (кон. остаток) — жирный разделитель справа */
#mgTable_wrapper table.dataTable thead tr:last-child th:nth-child(4n) {
  border-right: 1px solid var(--bs-gray-50) !important;
}

/* 3) Нижняя строка: начало каждой группы из 4 колонок — жирный разделитель слева */
#mgTable_wrapper table.dataTable thead tr:last-child th:nth-child(4n + 1) {
  border-left: 1px solid var(--bs-gray-50) !important;
}

/* 4) Чёткий разделитель после 2 фиксированных колонок (визуально “замок”) */
#mgTable_wrapper table.dataTable thead th.dtfc-fixed-left:last-child {
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.18);
}
#mgTable_wrapper .dataTables_scrollBody {
  border-left: 0 !important;
}

/* чтобы width учитывал border и padding */
#mgTable_wrapper table,
#mgTable_wrapper th,
#mgTable_wrapper td {
  box-sizing: border-box;
}

/* фиксируем лэйаут, иначе браузер может “пересчитать” */
#mgTable_wrapper table#mgTable {
  table-layout: fixed;
}

/* убери любые разъезды из-за border-spacing */
#mgTable_wrapper table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* контейнер всех toast */
.toast-container {
  z-index: 2000 !important;
}

/* сам toast (на всякий) */
.toast {
  z-index: 2000 !important;
}

.monoblock-button {
  height: 80px;
  width: 120px;
}

.h-20px {
  height: 20px;
}

/* ===== need calc tree (expand/collapse + selection) ===== */

#prod_needCalcTbl tbody tr.is-hidden {
  display: none !important;
}

#prod_needCalcTbl tbody tr.need-tree-group {
  cursor: pointer;
  user-select: none;
}

#prod_needCalcTbl tbody tr.need-tree-group td {
  background: rgba(0, 0, 0, 0.02);
}

.need-tree-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.need-tree-indent {
  display: inline-block;
  width: 0;
  flex: 0 0 auto;
}

.need-tree-toggle {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  border-radius: 4px;
}

.need-tree-toggle i {
  font-size: 16px;
  line-height: 1;
}

.need-tree-title {
  min-width: 0;
  flex: 1 1 auto;
}

.need-tree-meta {
  font-size: 12px;
  opacity: 0.75;
}

/* selected subtree */
#prod_needCalcTbl tbody tr.is-selected td,
#prod_needCalcTbl tbody tr.is-selected-subtree td {
  background: rgba(13, 110, 253, 0.08); /* bootstrap primary tint */
}

/* точка статуса (как в легенде) */
.need-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  vertical-align: middle;
}
.need-dot--sm {
  width: 8px;
  height: 8px;
}

.need-dot--ok {
  background: var(--bs-success);
}
.need-dot--bad {
  background: var(--bs-danger);
}

/* отступ точки в таблице */
.need-dot-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* (опционально) разница: + зелёная, - красная */
.need-diff-pos {
  color: var(--bs-success) !important;
}
.need-diff-neg {
  color: var(--bs-danger) !important;
}

/* NeedCalc: разница цветом */
#prod_needCalcTbl .need-diff-pos {
  color: var(--bs-success) !important;
}

#prod_needCalcTbl .need-diff-neg {
  color: var(--bs-danger) !important;
}

.need-tree-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* линия уровня */
.need-level-1::before,
.need-level-2::before,
.need-level-3::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -8px;
  bottom: -8px;
  width: 1px;
  background: #e9ecef;
}

/* уровень ПФ */
.need-level-1 {
  background: #fafafa;
}

/* уровень ингредиентов */
.need-level-2 {
  border-left: 3px solid #eef1f4;
}

/* стрелка справа */
.need-tree-toggle-wrap {
  margin-left: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* красивый hover */
.need-tree-cell:hover {
  background: #f8f9fa;
}

.kpi-icon.status--posted {
  background: rgba(0, 255, 0, 0.1);
}

.kpi-icon.status--pending {
  background: rgba(255, 193, 7, 0.1);
}

.kpi-icon.status--deleted {
  background: rgba(255, 0, 0, 0.1);
}
/* =========================================================
   mdlProductionView / TTK
   desktop: 2 columns
   <= 990px: stacked layout
   - scroll у таба есть
   - scroll у левого меню есть
   - scroll у тела таблицы есть
   ========================================================= */

#prodViewTabTtk,
#prodViewTabTtk .prod-ttk-layout,
#prodViewTabTtk .prod-ttk-layout > [class*="col-"],
#prodViewTabTtk .vm-ttk-right,
#prodViewTabTtk .vm-ttk-right .vm-table-scroll,
#prodViewTabTtk #prodViewTtkNav,
#mdlProductionView .vm-modal-scroll,
#mdlProductionView .tab-content {
  min-height: 0 !important;
}

/* сам scroll area под табами */
#mdlProductionView .vm-modal-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- RIGHT ---------- */

/* footer */
#prodViewTabTtk #prodView_ttk_table tfoot th,
#prodViewTabTtk #prodView_ttk_table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--bs-gray-300) !important;
  border-top: 1px solid var(--vm-table-border) !important;
  border-bottom-color: var(--vm-table-border) !important;
  white-space: nowrap;
}

/* name column */
#prodViewTabTtk #prodView_ttk_table .tbl-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- DESKTOP ---------- */

@media (min-width: 991px) {
  #prodViewTabTtk {
    height: 100% !important;
  }

  #prodViewTabTtk .prod-ttk-layout {
    display: flex !important;
    flex-wrap: nowrap !important;
    height: 100% !important;
  }

  #prodViewTabTtk .prod-ttk-layout > .col-lg-4,
  #prodViewTabTtk .prod-ttk-layout > .col-xl-3,
  #prodViewTabTtk .prod-ttk-layout > .col-lg-8,
  #prodViewTabTtk .prod-ttk-layout > .col-xl-9 {
    height: 100% !important;
  }

  #prodViewTabTtk .prod-ttk-layout > .col-lg-4 > .vm-table-card,
  #prodViewTabTtk .prod-ttk-layout > .col-xl-3 > .vm-table-card,
  #prodViewTabTtk .prod-ttk-layout > .col-lg-8 > .vm-table-card,
  #prodViewTabTtk .prod-ttk-layout > .col-xl-9 > .vm-table-card {
    height: 100% !important;
  }

  /* #prodViewTabTtk #prodViewTtkNav {
    flex: 1 1 auto;
  } */
}

/* ---------- MOBILE / TABLET ---------- */

@media (max-width: 990px) {
  #prodViewTabTtk {
    height: auto !important;
  }

  #prodViewTabTtk.active,
  #prodViewTabTtk.show {
    display: block !important;
  }

  #prodViewTabTtk .prod-ttk-layout {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 12px;
  }

  #prodViewTabTtk .prod-ttk-layout > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* LEFT */
  #prodViewTabTtk .prod-ttk-layout > .col-lg-4,
  #prodViewTabTtk .prod-ttk-layout > .col-xl-3 {
    order: 1;
  }

  #prodViewTabTtk .prod-ttk-layout > .col-lg-4 > .vm-table-card,
  #prodViewTabTtk .prod-ttk-layout > .col-xl-3 > .vm-table-card {
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
  }

  /* левое меню реально скроллится, но не душим его 160px */
  #prodViewTabTtk #prodViewTtkNav {
    max-height: min(34vh, 320px) !important;
  }

  /* RIGHT */
  #prodViewTabTtk .prod-ttk-layout > .col-lg-8,
  #prodViewTabTtk .prod-ttk-layout > .col-xl-9 {
    order: 2;
  }

  /* таблица ниже, но до неё можно доскроллить,
     а внутри неё есть свой scroll */
  #prodViewTabTtk .prod-ttk-layout > .col-lg-8 > .vm-ttk-right,
  #prodViewTabTtk .prod-ttk-layout > .col-xl-9 > .vm-ttk-right {
    height: min(52vh, 460px) !important;
    min-height: min(52vh, 460px) !important;
    max-height: min(52vh, 460px) !important;
  }

  #prodViewTabTtk .prod-ttk-layout > .col-lg-8 > .vm-ttk-right .vm-table-scroll,
  #prodViewTabTtk
    .prod-ttk-layout
    > .col-xl-9
    > .vm-ttk-right
    .vm-table-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
  }
}

/* ===== TTK pad rows / items ===== */

#prodView_ttk_tbody tr.prod-pad-row td {
  color: transparent;
  user-select: none;
  pointer-events: none;
}

#prodView_ttk_tbody tr.prod-pad-row:hover td {
  background: inherit !important;
}

#prodViewTtkNav .ttk-pad-item {
  visibility: hidden;
  pointer-events: none;
}

#prodViewTtkNav .ttk-pad-item * {
  pointer-events: none !important;
}

/* =========================================================
   mdlProductionView / Products tab -> tfoot
   ========================================================= */

#prodView_lines_table tfoot th:first-child {
  text-align: start;
}

#prodView_lines_table tfoot th,
#prodView_lines_table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--bs-gray-300) !important;
  color: var(--vm-table-head-text);
  border-top: 1px solid var(--vm-table-border) !important;
  border-bottom-color: var(--vm-table-border) !important;
  white-space: nowrap;
}

#prodView_lines_tbody tr.prod-pad-row td {
  color: transparent;
  user-select: none;
  pointer-events: none;
}

#prodView_lines_tbody tr.prod-pad-row:hover td {
  background: inherit !important;
}

#prodView_lines_tbody tr.prod-pad-row td,
#prodView_ttk_tbody tr.prod-pad-row td {
  color: transparent;
  user-select: none;
  pointer-events: none;
  height: 44px;
}

#prodView_lines_tbody tr.prod-pad-row:hover td,
#prodView_ttk_tbody tr.prod-pad-row:hover td {
  background: inherit !important;
}

#prodViewTabTtk.active,
#prodViewTabTtk.show {
  display: flex;
}

#prodViewTabTtk {
  min-height: 0;
}

#prodViewTabTtk .prod-ttk-layout {
  min-height: 0;
  flex: 1 1 auto;
}

#prodViewTabTtk .vm-table-card,
#prodViewTabTtk .vm-ttk-right {
  min-height: 0;
}

#prodViewTabTtk .vm-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#prodViewTtkNav {
  overflow: auto;
}

#prodView_ttk_table {
  margin-bottom: 0;
}

/* === production_entry row highlight when fact != plan === */
#prod_ppTblDishes tbody tr.prod-pp-row-edited > td {
  background: rgba(255, 193, 7, 0.09) !important;
  transition: background-color 0.15s ease;
}

#prod_ppTblDishes tbody tr.prod-pp-row-edited:hover > td {
  background: rgba(255, 193, 7, 0.2) !important;
}

/* dark theme */
[data-bs-theme="dark"] #prod_ppTblDishes tbody tr.prod-pp-row-edited > td,
html.dark #prod_ppTblDishes tbody tr.prod-pp-row-edited > td,
body.dark #prod_ppTblDishes tbody tr.prod-pp-row-edited > td {
  background: rgba(255, 193, 7, 0.18) !important;
}

[data-bs-theme="dark"] #prod_ppTblDishes tbody tr.prod-pp-row-edited:hover > td,
html.dark #prod_ppTblDishes tbody tr.prod-pp-row-edited:hover > td,
body.dark #prod_ppTblDishes tbody tr.prod-pp-row-edited:hover > td {
  background: rgba(255, 193, 7, 0.24) !important;
}

#prod_ppTblDishes .prod-pp-fact-input {
  min-width: 88px;
  text-align: left;
}

.meal_type-wrapper-br {
  border-bottom: 1px solid var(--bs-gray-300);
  padding-bottom: 0.5rem;
}

.meal_type-wrapper-br:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.need-diff-neg {
  color: var(--bs-danger) !important;
}

.need-diff-zero {
  color: var(--bs-success) !important;
}

.need-diff-pos {
  color: var(--bs-success) !important;
}

/* =========================
   INVENTORY APPROVAL TOTALS — FINAL OVERRIDE
   отдельная сетка для totals, не завязана на старый шаблон
   ========================= */

/* approved: # | Товар | ЕИ | Учетное | Фактическое | Δ */
.modal.modal-view .vm-table-card.vm-cols-inv {
  --inv-col-number: 36px;
  --inv-col-name: 459px;
  --inv-col-unit: 73px;
  --inv-col-recorded: 169px;
  --inv-col-actual: 167px;
  --inv-col-delta: 125px;
}

.modal.modal-view
  .vm-table-card.vm-cols-inv
  > .vm-table-total.vm-table-total--inv,
.modal.modal-view
  .vm-table-card.vm-cols-inv
  #invApprViewTotals.vm-table-total--inv {
  display: grid;
  grid-template-columns:
    var(--inv-col-number)
    var(--inv-col-name)
    var(--inv-col-unit)
    var(--inv-col-recorded)
    var(--inv-col-actual)
    var(--inv-col-delta);
  align-items: center;
  gap: 0;
}

.modal.modal-view
  .vm-table-card.vm-cols-inv
  > .vm-table-total.vm-table-total--inv
  .vm-total-label,
.modal.modal-view
  .vm-table-card.vm-cols-inv
  #invApprViewTotals.vm-table-total--inv
  .vm-total-label {
  grid-column: 2;
  padding-left: 30px;
}

.modal.modal-view
  .vm-table-card.vm-cols-inv
  > .vm-table-total.vm-table-total--inv
  .vm-total-recorded,
.modal.modal-view
  .vm-table-card.vm-cols-inv
  #invApprViewTotals.vm-table-total--inv
  .vm-total-recorded {
  grid-column: 4;
}

.modal.modal-view
  .vm-table-card.vm-cols-inv
  > .vm-table-total.vm-table-total--inv
  .vm-total-actual,
.modal.modal-view
  .vm-table-card.vm-cols-inv
  #invApprViewTotals.vm-table-total--inv
  .vm-total-actual {
  grid-column: 5;
}

.modal.modal-view
  .vm-table-card.vm-cols-inv
  > .vm-table-total.vm-table-total--inv
  .vm-total-delta,
.modal.modal-view
  .vm-table-card.vm-cols-inv
  #invApprViewTotals.vm-table-total--inv
  .vm-total-delta {
  grid-column: 6;
}

/* =========================================
   Inventory approve modal totals — override
   Лечим только модалку mdlInvApprView
   ========================================= */

/* approved */
#mdlInvApprView
  .vm-table-card.vm-cols-inv
  #invApprViewTotals.vm-table-total--inv.inv-totals--approved.vm-table-total--inv-approved {
  display: grid;
  grid-template-columns: 20px 1fr 0px 140px 153px 109px;
  align-items: center;
  gap: 0;
}

#mdlInvApprView
  .vm-table-card.vm-cols-inv
  #invApprViewTotals.vm-table-total--inv.inv-totals--approved.vm-table-total--inv-approved
  .vm-total-label {
  grid-column: 2;
}

#mdlInvApprView
  .vm-table-card.vm-cols-inv
  #invApprViewTotals.vm-table-total--inv.inv-totals--approved.vm-table-total--inv-approved
  .vm-total-recorded {
  grid-column: 4;
}

#mdlInvApprView
  .vm-table-card.vm-cols-inv
  #invApprViewTotals.vm-table-total--inv.inv-totals--approved.vm-table-total--inv-approved
  .vm-total-actual {
  grid-column: 5;
}

#mdlInvApprView
  .vm-table-card.vm-cols-inv
  #invApprViewTotals.vm-table-total--inv.inv-totals--approved.vm-table-total--inv-approved
  .vm-total-delta {
  grid-column: 6;
}

/* pending */
#mdlInvApprView
  .vm-table-card.vm-cols-inv-pending
  #invApprViewTotals.vm-table-total--inv.inv-totals--pending.vm-table-total--inv-pending {
  display: grid;
  grid-template-columns: 60px 1fr 84px 162px;
  align-items: center;
  gap: 0;
}

#mdlInvApprView
  .vm-table-card.vm-cols-inv-pending
  #invApprViewTotals.vm-table-total--inv.inv-totals--pending.vm-table-total--inv-pending
  .vm-total-label {
  grid-column: 2;
}

#mdlInvApprView
  .vm-table-card.vm-cols-inv-pending
  #invApprViewTotals.vm-table-total--inv.inv-totals--pending.vm-table-total--inv-pending
  .vm-total-actual {
  grid-column: 4;
}

#mdlInvApprView
  .vm-table-card.vm-cols-inv-pending
  #invApprViewTotals.vm-table-total--inv.inv-totals--pending.vm-table-total--inv-pending
  .vm-total-recorded,
#mdlInvApprView
  .vm-table-card.vm-cols-inv-pending
  #invApprViewTotals.vm-table-total--inv.inv-totals--pending.vm-table-total--inv-pending
  .vm-total-delta {
  display: none;
}

/* ============================== TESTER API ========================== */

.api-tester-block {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.api-tester-block__head {
  min-height: 48px;
  padding: 10px 14px;
  background: #f1f3f5;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.api-tester-block__head .form-label {
  font-weight: 500;
}

.api-tester-block__body {
  padding-bottom: 12px;
}

.api-tester-block__field {
  border-radius: 0;
}

.api-tester-block__pre {
  margin: 0;
  border: 1px solid #dfe3e8;
  box-shadow: none;
}

.api-tester-block textarea.form-control,
.api-tester-block pre.form-control {
  margin-bottom: 0;
}

.api-tester-block .btn.btn-secondary-light.btn-sm {
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.api-tester-block__head .btn.btn-sm {
  min-width: 36px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.api-tester-btn-feedback {
  font-size: 12px;
  line-height: 1;
}

body.dark .api-tester-block,
body[data-theme="dark"] .api-tester-block,
.dark .api-tester-block,
[data-theme-mode="dark"] .api-tester-block {
  background: #151922;
}

body.dark .api-tester-block__head,
body[data-theme="dark"] .api-tester-block__head,
.dark .api-tester-block__head,
[data-theme-mode="dark"] .api-tester-block__head {
  background: #2a303b;
  border-bottom-color: #3a4352;
}

body.dark .api-tester-block__head .form-label,
body[data-theme="dark"] .api-tester-block__head .form-label,
.dark .api-tester-block__head .form-label,
[data-theme-mode="dark"] .api-tester-block__head .form-label {
  color: #f3f4f6;
}

body.dark .api-tester-block__body,
body[data-theme="dark"] .api-tester-block__body,
.dark .api-tester-block__body,
[data-theme-mode="dark"] .api-tester-block__body {
  background: #151922;
}

body.dark .api-tester-block textarea.form-control,
body.dark .api-tester-block pre.form-control,
body.dark .api-tester-block__field,
body[data-theme="dark"] .api-tester-block textarea.form-control,
body[data-theme="dark"] .api-tester-block pre.form-control,
body[data-theme="dark"] .api-tester-block__field,
.dark .api-tester-block textarea.form-control,
.dark .api-tester-block pre.form-control,
.dark .api-tester-block__field,
[data-theme-mode="dark"] .api-tester-block textarea.form-control,
[data-theme-mode="dark"] .api-tester-block pre.form-control,
[data-theme-mode="dark"] .api-tester-block__field {
  background: #0f131b !important;
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}

body.dark .api-tester-block textarea.form-control::placeholder,
body[data-theme="dark"] .api-tester-block textarea.form-control::placeholder,
.dark .api-tester-block textarea.form-control::placeholder,
[data-theme-mode="dark"] .api-tester-block textarea.form-control::placeholder {
  color: #8b95a7 !important;
}

body.dark .api-tester-block textarea.form-control:focus,
body.dark .api-tester-block pre.form-control:focus,
body.dark .api-tester-block__field:focus,
body[data-theme="dark"] .api-tester-block textarea.form-control:focus,
body[data-theme="dark"] .api-tester-block pre.form-control:focus,
body[data-theme="dark"] .api-tester-block__field:focus,
.dark .api-tester-block textarea.form-control:focus,
.dark .api-tester-block pre.form-control:focus,
.dark .api-tester-block__field:focus,
[data-theme-mode="dark"] .api-tester-block textarea.form-control:focus,
[data-theme-mode="dark"] .api-tester-block pre.form-control:focus,
[data-theme-mode="dark"] .api-tester-block__field:focus {
  background: #0f131b !important;
  color: #f3f4f6 !important;
  border-color: #556074 !important;
  box-shadow: none !important;
}

body.dark .api-tester-block__pre,
body[data-theme="dark"] .api-tester-block__pre,
.dark .api-tester-block__pre,
[data-theme-mode="dark"] .api-tester-block__pre {
  background: #0f131b !important;
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}

body.dark .api-tester-block small.text-muted,
body.dark .api-tester-block .text-muted,
body[data-theme="dark"] .api-tester-block small.text-muted,
body[data-theme="dark"] .api-tester-block .text-muted,
.dark .api-tester-block small.text-muted,
.dark .api-tester-block .text-muted,
[data-theme-mode="dark"] .api-tester-block small.text-muted,
[data-theme-mode="dark"] .api-tester-block .text-muted {
  color: #98a2b3 !important;
}

body.dark .api-tester-block code,
body[data-theme="dark"] .api-tester-block code,
.dark .api-tester-block code,
[data-theme-mode="dark"] .api-tester-block code {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

body.dark .api-tester-block .btn.btn-secondary-light.btn-sm,
body[data-theme="dark"] .api-tester-block .btn.btn-secondary-light.btn-sm,
.dark .api-tester-block .btn.btn-secondary-light.btn-sm,
[data-theme-mode="dark"] .api-tester-block .btn.btn-secondary-light.btn-sm {
  background: transparent !important;
  border-color: transparent !important;
  color: #f3f4f6;
}

body.dark .api-tester-block .btn.btn-secondary-light.btn-sm:hover,
body.dark .api-tester-block .btn.btn-secondary-light.btn-sm:focus,
body[data-theme="dark"] .api-tester-block .btn.btn-secondary-light.btn-sm:hover,
body[data-theme="dark"] .api-tester-block .btn.btn-secondary-light.btn-sm:focus,
.dark .api-tester-block .btn.btn-secondary-light.btn-sm:hover,
.dark .api-tester-block .btn.btn-secondary-light.btn-sm:focus,
[data-theme-mode="dark"]
  .api-tester-block
  .btn.btn-secondary-light.btn-sm:hover,
[data-theme-mode="dark"]
  .api-tester-block
  .btn.btn-secondary-light.btn-sm:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: transparent !important;
  color: #ffffff;
  box-shadow: none;
}

body.dark .api-tester-block__head .btn.btn-sm,
body[data-theme="dark"] .api-tester-block__head .btn.btn-sm,
.dark .api-tester-block__head .btn.btn-sm,
[data-theme-mode="dark"] .api-tester-block__head .btn.btn-sm {
  color: #f3f4f6;
}

body.dark
  .api-tester-block__head
  .btn.btn-secondary-light.btn-sm.api-tester-btn-success,
body[data-theme="dark"]
  .api-tester-block__head
  .btn.btn-secondary-light.btn-sm.api-tester-btn-success,
.dark
  .api-tester-block__head
  .btn.btn-secondary-light.btn-sm.api-tester-btn-success,
[data-theme-mode="dark"]
  .api-tester-block__head
  .btn.btn-secondary-light.btn-sm.api-tester-btn-success {
  color: #22c55e !important;
}

#rgTableCard .table-responsive {
  max-height: 70vh; /* или конкретно 500px */
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}

#rgTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#rgTable thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bs-gray-300) !important;
}

#rgTable tfoot td,
#rgTable tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--bs-gray-300) !important;
}

#rgTable tbody td {
  background: #fff;
}


.gr-fancybox-download,
.gr-fancybox-print {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gr-fancybox-download i,
.gr-fancybox-print i {
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#paaTableCard .table-responsive {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}

#paaTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#paaTable thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bs-gray-300) !important;
  color: var(--vm-table-head-text);
  border-top: 1px solid var(--vm-table-border) !important;
  border-bottom: 1px solid var(--vm-table-border) !important;
  white-space: nowrap;
}

#paaTable tfoot th,
#paaTable tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--bs-gray-300) !important;
  color: var(--vm-table-head-text);
  border-top: 1px solid var(--vm-table-border) !important;
  border-bottom: 1px solid var(--vm-table-border) !important;
  white-space: nowrap;
}

/* чтобы body не перекрывал sticky-слои */
#paaTable tbody td {
  position: relative;
  z-index: 1;
}