/* =======================================================
   MpRefine Universal DataTables & UI Components Styles
   ======================================================= */

.dataTables_wrapper {
    width: 100%;
    position: relative;
}

.dataTables_scrollBody {
    width: 100%;
    overflow-x: auto;
}

table.dataTable {
    width: 100%;
    margin-top: 0 !important;
}

/* === ИСПРАВЛЕНИЕ: СЛОИ И Z-INDEX ШАПОК И СКРОЛЛА === */
/* Все элементы липкой шапки находятся на уровне 5, гарантированно уступая меню навигации (1000+) */
.dataTables_scrollHead {
    background-color: #f8f9fa;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    z-index: var(--mp-z-table-header, 20) !important;
}

/* DataTables сначала замеряет исходную таблицу с auto-layout, затем переносит шапку
   и данные в две самостоятельные таблицы. После переноса фиксируем уже рассчитанную
   сетку: иначе inline-подсказка в видимой шапке и содержимое строк повторно и независимо
   перераспределяют одинаковую общую ширину между колонками. */
.dataTables_wrapper.dt-columns-locked .dataTables_scrollHead table.dataTable,
.dataTables_wrapper.dt-columns-locked .dataTables_scrollBody table.dataTable {
    table-layout: fixed;
}

table.dataTable thead th,
.table-responsive table thead th {
    z-index: var(--mp-z-table-header, 20) !important;
}

/* === ВЕРХНИЙ ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ === */
.dt-top-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    height: 10px;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    scrollbar-color: #bcc4d1 transparent;
    scrollbar-width: thin;
    z-index: var(--mp-z-table-header, 20) !important;
}

.dt-top-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}

.dt-top-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.dt-top-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #bcc4d1;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.dt-top-scroll-inner {
    height: 1px;
}

/* === ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ KPI-ЛЕНТЫ (было продублировано в AdvCampaigns/Experiments/Sorter/TaskReport) === */
.kpi-scroll-container {
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
}

    .kpi-scroll-container::-webkit-scrollbar {
        height: 6px;
    }

    .kpi-scroll-container::-webkit-scrollbar-thumb {
        background-color: #d9dee3;
        border-radius: 4px;
    }

/* === КОМПАКТНЫЙ ЛЕЙБЛ ФОРМЫ (было продублировано в PriceRadar/Fact/Catalog/SupplyPrice/StatusAdvisor) === */
.form-label-compact {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 2px;
    text-transform: uppercase;
    color: #566a7f;
}

/* === ПОДСВЕТКА ЯЧЕЕК РАДАРА ЦЕН (переиспользуемо на других страницах сравнения цен, было только в PriceRadar) === */
.cell-cheaper {
    background-color: rgba(113, 221, 55, 0.1) !important;
    color: #28a745;
    font-weight: 600;
}

.cell-expensive {
    background-color: rgba(255, 62, 29, 0.1) !important;
    color: #dc3545;
    font-weight: 600;
}

/* === ИНТЕРАКТИВНАЯ KPI-ПЛАШКА-ФИЛЬТР (было продублировано в Plan/Fact) === */
.kpi-filter {
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    cursor: pointer;
}

    .kpi-filter:hover {
        transform: translateY(-3px);
        box-shadow: 0 .25rem 1rem rgba(161, 172, 184, .45) !important;
    }

/* === ЦВЕТОВОЙ БЛОК ГРУППЫ КОЛОНОК "Воронка цен/себестоимость" (было продублировано в Plan/Fact) === */
.bg-block-1 {
    background-color: #e3f2fd !important;
}

/* Прогресс-бар поверх таблицы */
div.dataTables_wrapper div.dataTables_processing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

#table-progress-bar {
    height: 3px;
    z-index: 105;
    display: none;
    border-radius: 0;
}

.dt-filter {
    font-weight: normal !important;
    font-size: 0.78rem;
    padding: 4px 6px;
    width: 100%;
    box-sizing: border-box;
    cursor: text;
    text-transform: none;
}

/* === ЧЕКБОКС-МУЛЬТИСЕЛЕКТ ФИЛЬТРОВ (замена одиночному <select> в шапке таблиц) ===
   Меню — самостоятельный элемент вне <th>: по клику переносится в <body> и позиционируется
   вручную (JS, initMpMultiSelectFilter), поэтому не зависит от overflow/пересборки шапки
   DataTables при scrollX. Кнопка "Сбросить" — отдельная кнопка той же высоты рядом с
   переключателем, а не пункт внутри списка. */
.mp-multiselect-filter {
    margin-top: 0.25rem;
    width: 100%;
}

.mp-multiselect-toggle {
    font-weight: normal !important;
    font-size: 0.78rem;
    padding: 4px 1.8rem 4px 0.55rem;
    background-position: right 0.55rem center;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
}

.mp-multiselect-clear {
    flex: 0 0 auto;
    line-height: 1;
}

.mp-multiselect-menu {
    display: none;
    position: fixed;
    z-index: 1060;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    padding: 0.5rem;
    max-height: 260px;
    overflow-y: auto;
}

.mp-multiselect-menu .form-check {
    display: flex !important;
    align-items: center !important;
    padding-left: 0.5rem !important;
    margin-bottom: 0.35rem;
}

.mp-multiselect-menu .form-check-input {
    cursor: pointer;
    width: 1.05em;
    height: 1.05em;
    margin: 0 0.5rem 0 0 !important;
    float: none !important;
    flex-shrink: 0;
    appearance: auto !important;
}

.mp-multiselect-menu .form-check-label {
    cursor: pointer;
    font-size: 0.8rem;
    margin-bottom: 0 !important;
}

/* === ЗАКРЕПЛЕНИЕ КОЛОНОК DATATABLES === */
.dt-pinnable-column {
    position: relative;
}


/* Закреплённые ячейки (шапка и тело) — position:sticky по индивидуальному left/right,
   который считает JS (mprefine-datatables.js, applyPinnedColumns). Непрозрачный фон
   обязателен, иначе прокручивающийся контент будет просвечивать под закреплённой колонкой.
   !important нужен, т.к. у Bootstrap-таблиц (table-striped/table-hover) фон строк задаётся
   более специфичными селекторами (например tbody tr:nth-of-type(odd) > *), которые иначе
   перебивают наш фон. */
.dt-pinned-cell {
    position: sticky !important;
    background-color: var(--bs-body-bg, #fff) !important;
}

/* Закреплённая шапка должна перекрывать прокручиваемые заголовки,
   у которых общий стиль таблиц задаёт z-index: 5. */
.dataTables_scrollHead table.dataTable thead th.dt-pinned-cell {
    z-index: var(--mp-z-table-header-pinned, 21) !important;
}

.dataTables_scrollBody table.dataTable tbody tr > td.dt-pinned-cell {
    z-index: 2;
}

.dataTables_scrollBody table.dataTable tbody tr:hover > td.dt-pinned-cell {
    background-color: #f5f5f9 !important;
}

/* Тени направлены внутрь прокручиваемой части таблицы и визуально отделяют
   левый и правый закреплённые блоки от центральной области. */
.dt-pinned-cell-edge-left {
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.15);
}

.dt-pinned-cell-edge-right {
    box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.15);
}

/* Кнопка-пин находится поверх верхнего левого угла заголовка и не участвует в layout:
   появление при hover и смена состояния не меняют ширину, padding или положение текста.
   Незакреплённый пин полностью скрыт; закреплённый остаётся видимым до открепления. */
.dt-pin-toggle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.05rem;
    height: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: #a1acb8;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}

.dt-pinnable-column:hover .dt-pin-toggle,
.dt-pinnable-column:focus-within .dt-pin-toggle,
.dt-pin-toggle:focus-visible {
    opacity: 0.78;
    visibility: visible;
    pointer-events: auto;
}

.dt-pin-toggle:hover {
    color: #696cff;
    opacity: 1 !important;
    background: rgba(105, 108, 255, 0.12);
}

.dt-pin-toggle.active {
    color: #696cff;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(105, 108, 255, 0.08);
}

    .dt-pin-toggle.active:hover {
        color: #ff3e1d; /* намёк: клик открепит */
        background: rgba(255, 62, 29, 0.1);
    }

/* В "технической" копии шапки внутри scrollBody интерактив не показываем */
.dataTables_scrollBody thead .dt-pin-toggle,
.dataTables_scrollBody thead .dt-sort-indicator,
.dataTables_scrollBody thead .dt-th-help {
    display: none !important;
}

/* === КОМПАКТНАЯ ИНДИКАЦИЯ СОРТИРОВКИ ===
   Нативные псевдоэлементы DataTables отключены: вместо них JS добавляет настоящую
   иконку, поэтому hover можно обрабатывать именно на стрелке, а не на всей ячейке.
   Неактивная иконка появляется при наведении на заголовок без рамки; мягкая обводка
   возникает только при наведении непосредственно на неё. Активное направление видно
   постоянно. Индикатор абсолютный и не меняет ширину колонки. */
.dataTables_wrapper table.dataTable thead > tr > th.sorting,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_asc,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_desc {
    position: relative;
    box-sizing: border-box;
    min-width: 64px;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.dataTables_wrapper table.dataTable thead > tr > th.dt-pinnable-column {
    box-sizing: border-box;
    min-width: 64px;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.dataTables_wrapper table.dataTable thead > tr > th.dt-header-has-help.sorting,
.dataTables_wrapper table.dataTable thead > tr > th.dt-header-has-help.sorting_asc,
.dataTables_wrapper table.dataTable thead > tr > th.dt-header-has-help.sorting_desc,
.dataTables_wrapper table.dataTable thead > tr > th.dt-header-has-help.dt-pinnable-column {
    min-width: 64px;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.dataTables_wrapper table.dataTable thead > tr > th.sorting::before,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_asc::before,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_desc::before,
.dataTables_wrapper table.dataTable thead > tr > th.sorting::after,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_asc::after,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_desc::after {
    display: none !important;
    content: none !important;
}

.dataTables_wrapper table.dataTable thead > tr > th > .dt-sort-indicator {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 1.1rem;
    height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #7f8c9c;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    z-index: 4;
    transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.dataTables_wrapper table.dataTable thead > tr > th.sorting:hover > .dt-sort-indicator {
    opacity: 0.82;
    visibility: visible;
}

.dataTables_wrapper table.dataTable thead > tr > th > .dt-sort-indicator:not(.is-active):hover {
    color: #696cff;
    background: rgba(105, 108, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(105, 108, 255, 0.24);
    opacity: 1;
}

.dataTables_wrapper table.dataTable thead > tr > th > .dt-sort-indicator.is-active {
    color: #696cff;
    background: rgba(105, 108, 255, 0.12);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
}

.dataTables_wrapper table.dataTable thead > tr > th > .dt-sort-indicator.is-active:hover {
    background: rgba(105, 108, 255, 0.18);
}

/* Старая иконка остаётся в DOM только как совместимый источник tooltip-разметки.
   JS переносит подсказку на название столбца, поэтому иконка больше не занимает
   место и не создаёт визуальный шум в каждой колонке. */
.dataTables_wrapper table.dataTable thead .dt-th-help {
    display: none !important;
}

.dataTables_wrapper table.dataTable thead .dt-th-tooltip-trigger {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

.dataTables_wrapper table.dataTable thead .dt-th-tooltip-trigger:hover,
.dataTables_wrapper table.dataTable thead .dt-th-tooltip-trigger:focus-visible {
    color: #434968;
    text-decoration-color: rgba(105, 108, 255, 0.55);
}

/* === ИСПРАВЛЕНИЕ: ЖЕСТКИЙ ИНЛАЙН ЧЕКБОКСОВ В МЕНЮ "ВИД" === */
#customColVisBtn .dropdown-menu .form-check {
    display: flex !important;
    align-items: center !important;
    padding-left: 0.5rem !important; /* Убираем лишние паддинги Bootstrap */
    margin-bottom: 0.4rem;
}

#customColVisBtn .dropdown-menu .form-check-input {
    cursor: pointer;
    width: 1.1em;
    height: 1.1em;
    margin: 0 0.6rem 0 0 !important; /* Задаем четкий отступ справа до текста */
    float: none !important; /* Отменяем дефолтный флоат, ломающий флекс-контейнер */
    flex-shrink: 0;
    appearance: auto !important; /* Нативный аккуратный вид */
}

#customColVisBtn .dropdown-menu .form-check-label {
    cursor: pointer;
    font-size: 0.8rem;
    margin-bottom: 0 !important; /* Убираем нижний отступ, ломающий центрирование */
    display: inline-block;
}

/* === KPI ПЛАШКИ === */
.kpi-card {
    cursor: pointer;
    transition: box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

    .kpi-card:hover {
        background-color: #fdfdff;
        box-shadow: 0 0 0 1px #e2e5ea, 0 3px 8px rgba(67, 89, 113, 0.14);
    }

.kpi-active-border {
    border-left-width: 6px !important;
    background-color: rgba(0,0,0,0.03) !important;
}

.kpi-mini {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.32rem 0.55rem;
    border-radius: 0.5rem;
    background: #fff;
    border: 1px solid #e7e9ed;
    border-color: #e7e9ed !important;
    box-shadow: none;
    height: 100%;
}

.kpi-mini::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8592a3;
    box-shadow: 0 0 0 3px rgba(133, 146, 163, 0.11);
    content: "";
}

.kpi-mini.border-primary::before {
    background: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.11);
}

.kpi-mini.border-success::before {
    background: var(--bs-success);
    box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.11);
}

.kpi-mini.border-warning::before {
    background: var(--bs-warning);
    box-shadow: 0 0 0 3px rgba(var(--bs-warning-rgb), 0.12);
}

.kpi-mini.border-danger::before {
    background: var(--bs-danger);
    box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), 0.11);
}

.kpi-mini.border-info::before {
    background: var(--bs-info);
    box-shadow: 0 0 0 3px rgba(var(--bs-info-rgb), 0.11);
}

.kpi-mini.border-dark::before {
    background: var(--bs-dark);
    box-shadow: 0 0 0 3px rgba(var(--bs-dark-rgb), 0.11);
}

.kpi-mini.kpi-active-border {
    border-width: 1px !important;
    border-color: rgba(var(--bs-primary-rgb), 0.45) !important;
    background: rgba(var(--bs-primary-rgb), 0.055) !important;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.08);
}

.kpi-title {
    min-width: 0;
    margin-bottom: 0;
    color: #566a7f;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-value {
    min-width: 24px;
    margin-bottom: 0;
    padding: 0.2rem 0.32rem;
    border-radius: 0.375rem;
    color: #344054 !important;
    background: #f4f5f7;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kpi-ribbon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border-radius: 0.5rem;
    background: #fff;
    border-left: 3px solid transparent;
    box-shadow: 0 2px 4px rgba(161, 172, 184, 0.1);
    white-space: nowrap;
    flex-shrink: 0;
}

.product-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.table-text-sm {
    font-size: 0.82rem;
}

.cursor-pointer {
    cursor: pointer;
}

/* =======================================================
   ЕДИНЫЙ ТУЛБАР / ШАПКА ТАБЛИЦЫ (Фаза 2 унификации, MPR-295)
   Раньше почти на каждой странице была своя, слегка отличающаяся версия одной и той же
   строки-тулбара (с/без border-bottom, с/без лишнего gap) и своя разметка внутри <th>
   (где-то <br>, где-то нет, тултип то у текста, то у самого <th>). Ниже — единый паттерн,
   которым размечаются все табличные страницы.
   ======================================================= */

/* Строка-тулбар над таблицей (поисковые/переключательные контролы страницы, кнопки
   действий) — единая обёртка вместо трёх похожих вариантов на разных страницах. */
.dt-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-height: 43px;
    padding: 0.4rem 0.55rem;
    margin-bottom: 0;
    border-bottom: 1px solid #eceef1;
    position: sticky;
    z-index: var(--mp-z-table-actions, 30);
    background-color: var(--bs-body-bg, #fff);
}

/* Единый Excel-подобный переключатель смысловых групп колонок.
   Кнопки меняют только видимость деталей и не участвуют в расчёте ширины таблицы. */
.dt-column-outline {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.dt-column-outline-label {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    margin-right: 0.2rem;
    color: var(--mp-ink-400);
    font-size: 0.63rem;
    font-weight: 700;
    white-space: nowrap;
}

.dt-column-outline-label .bx {
    font-size: 0.8rem;
}

.dt-column-outline-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 28px;
    padding: 0.2rem 0.36rem;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--mp-ink-600);
    background: transparent;
    font-size: 0.63rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    transition:
        color 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease;
}

.dt-column-outline-toggle .bx {
    width: 0.8rem;
    color: var(--mp-brand-600);
    font-size: 0.78rem;
    text-align: center;
}

.dt-column-outline-toggle:hover,
.dt-column-outline-toggle:focus-visible,
.dt-column-outline-toggle.is-expanded {
    color: var(--mp-brand-700);
    border-color: var(--mp-brand-100);
    background: var(--mp-brand-50);
    outline: none;
}

.dt-column-outline-toggle.is-partial::after {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mp-brand-500);
    content: "";
}

/* Управление внутри группового заголовка дублирует действие тулбара, чтобы
   раскрытые подробности можно было свернуть непосредственно над данными. */
.dt-group-toggle {
    display: inline-grid;
    flex: 0 0 20px;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    color: var(--mp-brand-600);
    line-height: 1;
}

.dt-group-toggle .bx {
    font-size: 0.9rem;
}

.dt-group-toggle:hover,
.dt-group-toggle:focus-visible {
    color: var(--mp-brand-700);
    border-color: var(--mp-brand-100);
    background: var(--mp-brand-50);
    outline: none;
}

/* Тулбар и динамические панели массовых действий образуют один sticky-блок.
   JS переносит соседние панели карточки в этот контейнер при инициализации таблицы.
   Поэтому шапка резервирует ровно ту же высоту, которую пользователь реально видит,
   без пустой прорехи при появлении/скрытии выбора. */
.dt-sticky-action-stack {
    position: sticky;
    z-index: var(--mp-z-table-actions, 30);
    width: 100%;
    padding-top: 0.35rem;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 0 1px 0 rgba(67, 89, 113, 0.08);
}

.card.dt-has-sticky-action-stack {
    padding-top: 0 !important;
}

.dt-sticky-action-stack > .dt-toolbar-row,
.dt-sticky-action-stack > .bulk-action-bar {
    position: relative;
    top: auto !important;
    /*
     * Keep toolbar dropdowns above the synchronized horizontal scrollbar.
     * Both elements live in the same sticky stacking context, so source order
     * otherwise lets the scrollbar paint over an opened menu.
     */
    z-index: 2;
    margin: 0 !important;
}

.dt-sticky-action-stack > .dt-top-scroll-wrapper {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    flex: 0 0 auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dt-toolbar-row-bulk-inline {
    flex-wrap: wrap;
}

.dt-toolbar-row-bulk-inline .dt-toolbar-row-actions > .bulk-action-bar {
    position: static;
    top: auto !important;
    z-index: auto;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    width: auto;
    min-width: 0;
    max-width: 100%;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    justify-content: space-between;
}

.dt-toolbar-row-bulk-inline .bulk-action-summary {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.dt-toolbar-row-bulk-inline .bulk-action-controls {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.dt-toolbar-row-bulk-inline .bulk-selected-count {
    color: var(--bs-primary);
}

.dt-toolbar-row-actions {
    flex: 1 1 auto;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .dt-toolbar-row-bulk-inline {
        align-items: flex-start;
    }

    .dt-toolbar-row-actions {
        flex-wrap: wrap;
    }

    .dt-toolbar-row-bulk-inline .dt-toolbar-row-actions > .bulk-action-bar {
        flex-wrap: wrap;
    }
}

/* === КОМПАКТНЫЙ ВЕРХ СТРАНИЦ (MPR-295, фидбек: «много высоты, кнопки уходят при скролле») ===
   Единая шапка страницы: заголовок + подзаголовок + действия в одну плотную строку.
   Заменяет разнобой mb-4 / py-3 на страницах. */
.page-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

    .page-head h4,
    .page-head h5 {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 600;
    }

    .page-head .page-subtitle {
        font-size: 0.72rem;
        color: #a1acb8;
        margin: 0.1rem 0 0;
    }

/* Заголовок колонки + тултип-иконка внутри <th> — одна строка, единый вид иконки/отступа
   вместо разнобоя (то <i> после текста, то data-bs-toggle на самом <th>). */
.dt-th-title {
    display: flex;
    align-items: center;
    justify-content: center !important;
    width: 100%;
    text-align: center;
    gap: 0.3rem;
}

.dt-th-title > .dt-th-help {
    margin-left: 0;
}

.dt-th-help {
    color: #a1acb8;
    font-size: 0.85em;
    cursor: help;
}

/* Выпадающие контролы внутри таблиц всегда резервируют отдельную правую зону под
   шеврон. Это одинаково работает для обычных select, фильтров и мультиселектов. */
.dataTables_wrapper .form-select,
.dataTables_wrapper .dt-th-filter .form-select,
.dataTables_wrapper .mp-multiselect-toggle {
    padding-right: 1.8rem !important;
    background-position: right 0.55rem center !important;
    text-align: left;
}

/* Размер страницы относится к навигации, поэтому живёт рядом с пагинацией, а не
   конкурирует с сортировкой и поиском в верхнем тулбаре. */
.dataTables_wrapper .dt-table-footer {
    border-top: 1px solid #eceef1;
}

.dataTables_wrapper .dt-table-footer .dataTables_info {
    padding-top: 0 !important;
    color: #8592a3;
    font-size: 0.78rem;
}

.dataTables_wrapper .dt-table-footer .dt-page-size,
.dataTables_wrapper .dt-table-footer .dataTables_length,
.dataTables_wrapper .dt-table-footer .dataTables_length label {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.dataTables_wrapper .dt-table-footer .dataTables_length label {
    gap: 0.35rem;
    color: #8592a3;
    font-size: 0.78rem;
    white-space: nowrap;
}

.dataTables_wrapper .dt-table-footer .dataTables_length select {
    width: auto;
    min-width: 68px;
    margin: 0 0.15rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.dataTables_wrapper .dt-table-footer .dataTables_paginate {
    margin-left: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 991.98px) {
    .dataTables_wrapper .dt-table-footer .dataTables_info {
        text-align: center;
    }

    .dataTables_wrapper .dt-table-footer > div:last-child {
        justify-content: center !important;
    }
}

/* Обёртка фильтра(ов) под заголовком колонки. Один фильтр — просто отступ сверху;
   два контрола в одной ячейке (например текстовый поиск + мультивыбор) — в ряд с зазором,
   а не как раньше — вертикальный стек с рассинхронизированными mt-1/mb-1 на разных страницах. */
.dt-th-filter {
    margin-top: 0.35rem;
}

.dt-th-filter.dt-th-filter-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* === КАНОН ШАПКИ: ЕДИНАЯ ТИПОГРАФИКА И ВЫРАВНИВАНИЕ ===
   До этого каждая страница задавала вид заголовков сама (разный размер/жирность/цвет)
   и выравнивание заголовка могло не совпадать с выравниванием ячейки. */
.dataTables_wrapper table.dataTable thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: #566a7f;
    vertical-align: middle;
    text-align: center !important;
    line-height: 1.3;
}

/* Выравнивание заголовка всегда следует за выравниванием самой ячейки th —
   вручную проставлять justify-content-* больше не обязательно.
   Порядок: правило уровня строки (tr) слабее правил уровня ячейки (th). */
thead tr.text-center > th .dt-th-title {
    justify-content: center;
}

th.text-center .dt-th-title {
    justify-content: center !important;
}

th.text-start .dt-th-title {
    justify-content: flex-start !important;
}

th.text-end .dt-th-title,
th[style*="text-align: right"] .dt-th-title,
th[style*="text-align:right"] .dt-th-title {
    justify-content: flex-end !important;
}

/* Название любой колонки центрируется независимо от выравнивания данных в tbody.
   Более специфичное правило намеренно перекрывает legacy justify-content-end/start. */
.dataTables_wrapper table.dataTable thead th .dt-th-title {
    align-items: center;
    justify-content: center !important;
    text-align: center;
}

/* Контролы внутри ячеек шапки не наследуют жирность заголовка и выглядят одинаково
   независимо от того, каким классом их пометила страница. */
.dt-th-filter .form-control,
.dt-th-filter .form-select,
.dt-th-filter .mp-multiselect-toggle,
.dt-th-filter .mp-multiselect-clear {
    font-weight: 400;
    font-size: 0.78rem;
}

/* Плотные таблицы SaaS-панели не нуждаются в сплошной сетке вертикальных линий —
   это читается как "тяжёлый"/неаккуратный вид. Оставляем только горизонтальные
   разделители строк (уже даёт table-bordered достаточно визуальной структуры без
   вертикальных линий) + чуть более заметную границу под шапкой. Действует только
   внутри .dataTables_wrapper, чтобы не задеть обычные (не-DataTables) таблицы в приложении. */
.dataTables_wrapper table.table-bordered > :not(caption) > * > * {
    border-left: 0;
    border-right: 0;
}

.dataTables_wrapper table.table-bordered > thead {
    border-bottom: 2px solid #d9dee3;
}

/* Плотность строк задаёт общий класс .mp-table-compact, который initMpDataTable
   добавляет любой рабочей таблице. table-sm больше не меняет вертикальный ритм:
   Юнит-План и остальные разделы используют один масштаб данных. */

/* Числовые/узкие колонки — единая ширина по умолчанию вместо того, чтобы разные страницы
   переопределяли один и тот же класс .col-number разными значениями (75px/60px и т.д.).
   Если колонке реально нужна другая ширина — модификатор .col-number-sm, а не переопределение. */
.col-number {
    width: 90px !important;
}

.col-number-sm {
    width: 64px !important;
}

/* Базовая панель массовых действий. В актуальных DataTables-экранах она встраивается
   в правый flex-блок тулбара; плоское оформление также сохраняет совместимость со
   страницами, которые ещё используют компонент отдельно. */
.card-bulk-bar-flat {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Панель массовых действий липнет под навбаром (точный top задаёт JS applyStickyTops):
   счётчик выделения и кнопки видны при любом вертикальном скролле таблицы.
   Общий токен держит панель выше табличной шапки, но ниже глобальной навигации. */
.bulk-bar-sticky {
    position: sticky;
    z-index: var(--mp-z-table-actions, 30);
    margin-bottom: 0.5rem;
}