/* Основные стили проекта CRM TechBar.
   Объединённый CSS (таблицы, мобильная версия, комментарии, поле СБ). */

/* Кнопка выхода в навбаре — стиль как у nav-link */
.navbar .nav-item form button.nav-link {
    color: rgba(255, 255, 255, 0.75);
}
.navbar .nav-item form button.nav-link:hover {
    color: #fff;
}

/* Редактируемые поля — визуальные подсказки */
.editable-date,
.editable-comment,
.editable-internal-comment,
.sb-date-editable {
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.editable-date {
    border-bottom: 1px dashed var(--bs-primary);
    padding: 2px 4px;
    border-radius: 3px;
}

.editable-date:hover,
.editable-date:focus-visible {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.22);
}

/* Плановая дата на «Главная»: цветная рамка снаружи — пунктир снизу у вложенного поля не дублируем */
.table tbody .planned-date-display .editable-date {
    border-bottom: none;
    padding: 0 2px;
}

.editable-comment:hover,
.editable-comment:focus-visible,
.editable-internal-comment:hover,
.editable-internal-comment:focus-visible {
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.22);
}

.sb-date-editable:hover,
.sb-date-editable:focus-visible {
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.22);
}

/* Выпадающие списки — поверх таблиц и панелей; ниже модалки Bootstrap и тостов. */
.choices.is-open {
    position: relative;
    z-index: 1040;
}
.choices__list--dropdown {
    z-index: 1040 !important;
}
.dropdown-menu {
    z-index: 1040 !important;
}
/* Календарь Flatpickr (в т.ч. в модалке «Новая заявка»): выше .modal (1055), иначе попап не виден */
.flatpickr-calendar {
    z-index: 1080 !important;
}

/* Вне dashboard можно временно раскрывать overflow для выпадающих Choices.
   Внутри dashboard-таблиц это вызывает reflow/скачки, там оставляем overflow стабильным. */
.table-responsive.table-responsive--choices-open:not(.dashboard-table-prefs) {
    overflow: visible !important;
}

.table td {
    vertical-align: middle;
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
}

.nav-tabs .nav-link {
    font-weight: 600 !important;
    white-space: nowrap;
}

/* Панель фильтров: подписи внутри полей, сетка на десктопе */
.filter-fields-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: stretch;
}

.filter-fields-row .input-group {
    flex: 1 1 auto;
    min-width: 120px;
}

.filter-fields-row .input-group-text {
    white-space: nowrap;
}

/* Панель фильтров: 3 колонки × 2 строки, компактная высота */
.filter-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 0.2rem 0.25rem;
    align-items: stretch;
}
.filter-grid-cell {
    display: flex;
    flex-direction: column;
    gap: 0.175rem;
    min-height: 0;
}
.filter-grid-cell .input-group {
    width: 100%;
    display: flex;
    align-items: stretch;
    min-height: 18px;
}
.filter-grid-cell .input-group-text {
    display: flex;
    align-items: center;
    min-width: 7.5rem;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.06rem 0.125rem;
    font-size: 0.8rem;
}
.filter-grid-cell .input-group > .form-control,
.filter-grid-cell .input-group > .form-select,
.filter-grid-cell .input-group > .choices {
    flex: 1;
    min-width: 0;
    padding: 0.06rem 0.125rem;
    font-size: 0.8125rem;
}
.filter-panel-grid .choices__inner {
    min-height: 10px;
    padding: 0.06rem 0.05rem;
    font-size: 0.8rem;
}
/* z-index выпадающих Choices — см. глобальный блок выше */
/* Текст в выпадающих списках — в одну строку */
.choices .choices__inner,
.choices .choices__item,
.choices__list--dropdown .choices__item,
.status-select,
.category-select,
select.form-select {
    white-space: nowrap !important;
}
/* Скругление ячеек выпадающих списков */
.choices .choices__inner {
    border-radius: 0.375rem;
}
/* Choices в ячейках таблицы (статус, категория) — фиксированная высота */
.choices--table-cell .choices__inner {
    height: 38px;
    min-height: 38px;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    font-size: 12px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Статус в таблице (дашборд): жирный шрифт в поле и в списке вариантов; категория без изменений */
.table tbody select.form-select.status-select,
.table tbody .choices.choices--table-cell:has(select.status-select) .choices__inner,
.table tbody .choices.choices--table-cell:has(select.status-select) .choices__list--single .choices__item,
.table tbody .choices.choices--table-cell:has(select.status-select) .choices__list--dropdown .choices__item {
    font-weight: 700 !important;
}

/* Нативный статус-select больше не стилизуем отдельно:
   единый внешний вид теперь дает Choices в dropdown-system.css. */

.choices__list--dropdown .choices__list,
.choices__list--dropdown .choices__item {
    border-radius: 0.25rem;
}
.choices__list--dropdown .choices__item {
    padding: 4px 8px;
    line-height: 1.35;
}
.choices__list--dropdown .choices__item:first-child {
    border-radius: 0.25rem 0.25rem 0 0;
}
.choices__list--dropdown .choices__item:last-child {
    border-radius: 0 0 0.25rem 0.25rem;
}

/* Статус / категория в таблице: выпадающий список не уже ячейки — по самой длинной подписи */
.choices--table-cell.is-open .choices__list--dropdown {
    width: max-content !important;
    min-width: 100%;
    max-width: min(96vw, 42rem);
    box-sizing: border-box;
}
.choices--table-cell .choices__list--dropdown > .choices__list {
    width: max-content;
    min-width: 100%;
    max-width: none;
}
.choices--table-cell .choices__list--dropdown .choices__item {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

/* Поиск по Гос. номеру — чуть крупнее на планшетах и десктопе (на мобильных — компактная подсказка, см. max-width:767px) */
@media screen and (min-width: 768px) {
    .filter-panel-grid .input-group .form-control.filter-gov {
        font-size: 1rem !important;
    }
}
.filter-grid-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
/* Вкладка «Главная»: «Выгрузить» у правого края панели фильтров */
.filter-grid-actions-main-export {
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}
.filter-grid-actions-main-export .btn-export-main-xlsx {
    flex-shrink: 0;
}

/* Новая заявка: контрагент и кнопка + выровнены по высоте */
#newRequestModal .input-group {
    align-items: stretch;
}
#newRequestModal .input-group .form-select,
#newRequestModal .input-group .choices {
    flex: 1;
    min-width: 0;
}
#newRequestModal .input-group .choices .choices__inner {
    height: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
#newRequestModal .input-group .btn {
    flex-shrink: 0;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width: 576px) {
    .filter-panel-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        grid-auto-rows: 1fr;
    }
    .filter-grid-actions {
        grid-column: 1 / -1;
    }
    /* Выравнивание строк: все ячейки в одной строке — одинаковая высота */
    .filter-grid-cell:not(.filter-grid-actions) {
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: 0.175rem;
        align-items: stretch;
    }
    .filter-grid-cell:not(.filter-grid-actions) .input-group {
        min-height: 0;
    }
}

/* Компактная панель поиска и сортировки на десктопе */
@media screen and (min-width: 769px) {
    .filter-panel-grid {
        padding: 0.1rem 0.15rem;
        gap: 0.1rem;
    }
    .filter-grid-cell {
        gap: 0.1rem;
    }
    .filter-panel-grid .input-group .form-control,
    .filter-panel-grid .input-group .form-select {
        padding: 0.075rem 0.15rem;
        font-size: 0.8125rem;
        height: auto;
    }
    .filter-panel-grid .input-group-text {
        min-width: 8rem;
        padding: 0.075rem 0.15rem;
        font-size: 0.8rem;
    }
    .filter-panel-grid .btn {
        padding: 0.075rem 0.2rem;
        font-size: 0.8125rem;
    }
}

/* Панель управления: фильтры/сортировка в одну строку на широких экранах */
@media screen and (min-width: 1200px) {
    [id^="filterPanel-"] {
        overflow-x: auto;
        overflow-y: visible;
    }
    .filter-panel-grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.25rem;
    }
    .filter-grid-cell:not(.filter-grid-actions) {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0.25rem;
        flex: 1 1 0;
        min-width: 0;
    }
    .filter-grid-cell:not(.filter-grid-actions) .input-group {
        flex: 1 1 0;
        min-width: 11rem;
    }
    /* Узкая минимальная ширина только у полей ввода; у dropdown с подписью оставляем запас */
    [id^="filterPanel-"].filter-panel-compact .filter-grid-cell:not(.filter-grid-actions) .input-group:has(> .form-control) {
        min-width: 9rem;
    }
    .filter-grid-actions {
        grid-column: auto;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        align-items: center;
    }
    .filter-grid-actions-main-export {
        width: auto;
        justify-content: flex-start;
    }

    /* Компактный режим: подпись скрываем только у текстовых полей (есть placeholder); у выпадающих подпись остаётся */
    [id^="filterPanel-"].filter-panel-compact .input-group > .filter-field-label:has(+ .form-control) {
        display: none !important;
    }
    [id^="filterPanel-"].filter-panel-compact .input-group > .filter-field-label:has(+ .form-control) + .form-control {
        border-radius: var(--bs-border-radius) !important;
    }
    [id^="filterPanel-"].filter-panel-compact .filter-grid-actions .btn {
        min-width: 2rem;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    [id^="filterPanel-"].filter-panel-compact .filter-grid-actions .btn .bi {
        font-size: 1.05rem;
        line-height: 1;
    }
}

.table td:first-child,
.table td[data-label="Гос. номер"] {
    font-weight: 700 !important;
}

.table td.cell-copy-gov {
    cursor: pointer;
}
.table td.cell-copy-gov:hover {
    text-decoration: underline;
}

/* ===== Панель управления: читаемость ===== */
#myTab {
    gap: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

#myTab .nav-link {
    border-radius: 8px 8px 0 0;
    color: var(--app-text-secondary);
    padding: 0.55rem 0.9rem;
}

#myTab .nav-link.active {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-tertiary-bg);
    color: var(--bs-primary);
}

/* Панель управления (мобильные): один ряд — список разделов + действия, без горизонтальных «вкладок 1С» */
@media screen and (max-width: 767.98px) {
    .crm-dashboard-page .crm-dashboard-toolbar-row {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem;
    }
    .crm-dashboard-page .crm-dashboard-mobile-tab-select {
        min-width: 0;
        flex: 1 1 45%;
        max-width: none;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        font-size: 0.8125rem;
        line-height: 1.2;
    }
    .crm-dashboard-page .crm-dashboard-toolbar-row .form-check.form-switch {
        padding-left: 2.15rem;
    }
    .crm-dashboard-page .crm-dashboard-toolbar-row .form-check-input {
        width: 1.85rem;
        margin-left: -2.15rem;
    }
    .crm-dashboard-page .crm-dashboard-toolbar-row #dashboardChoicesToggleLabel {
        font-size: 0.68rem;
        max-width: 3.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    .crm-dashboard-page .crm-dashboard-direction {
        margin-bottom: 0.45rem !important;
    }
    .crm-dashboard-page .crm-dashboard-direction .btn-group .btn {
        padding: 0.2rem 0.42rem;
        font-size: 0.78rem;
    }
    .crm-dashboard-page #myTabContent.crm-dashboard-tab-content {
        margin-top: 0.35rem !important;
    }
    .crm-dashboard-page .tab-pane > .filter-panel-grid.filter-panel-compact {
        margin-bottom: 0.2rem !important;
    }

    /* Строка «Поиск» в фильтрах: ниже высота поля и чекбокса под ним */
    .crm-dashboard-page [id^="filterPanel-"] {
        padding: 0.15rem 0.22rem;
    }
    .crm-dashboard-page [id^="filterPanel-"] .filter-search-field-wrap .input-group-text,
    .crm-dashboard-page [id^="filterPanel-"] .filter-search-field-wrap .form-control.filter-gov {
        height: auto;
        min-height: 1.72rem;
        line-height: 1.2;
        padding-top: 0.12rem;
        padding-bottom: 0.12rem;
    }
    .crm-dashboard-page .filter-search-field-wrap .form-check {
        margin-top: 0.15rem !important;
        display: flex;
        align-items: flex-start;
        gap: 0.35rem;
        min-width: 0;
    }
    .crm-dashboard-page .filter-search-field-wrap .form-check-label {
        font-size: 0.74rem;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .crm-dashboard-page .filter-search-field-wrap .form-check-input {
        width: 0.85rem;
        height: 0.85rem;
        margin-top: 0.12rem;
        flex-shrink: 0;
    }
}

[id^="filterPanel-"] {
    position: relative;
    z-index: 10;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-secondary-bg);
    border-radius: 10px;
    padding: 0.3rem 0.35rem;
}

[id^="filterPanel-"] .input-group-text {
    font-weight: 600;
    background: var(--crm-surface-elevated);
}

[id^="filterPanel-"] .btn {
    white-space: nowrap;
}

/* Панель фильтров: одинаковая высота инпутов/селектов/кнопок */
[id^="filterPanel-"] .input-group-text,
[id^="filterPanel-"] .input-group .form-control,
[id^="filterPanel-"] .input-group .form-select,
[id^="filterPanel-"] .input-group .choices__inner,
[id^="filterPanel-"] .btn {
    height: 2rem;
    min-height: 2rem;
    box-sizing: border-box;
    line-height: 1.15;
}
[id^="filterPanel-"] .input-group .choices[data-type*="select-one"]::after {
    top: 50%;
    transform: translateY(-50%);
}
[id^="filterPanel-"] .filter-grid-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Меню фильтров поверх липкой шапки таблицы (дашборд).
   При Popper strategy:fixed класс w-100 даёт 100% ширины viewport — отменяем. */
[id^="filterPanel-"] .dropdown-menu {
    z-index: 1060;
    width: auto !important;
    max-width: min(100vw - 1.5rem, 28rem);
    box-sizing: border-box;
}

.tab-pane .table-responsive {
    border: 1px solid var(--bs-secondary-bg);
    border-radius: 10px;
    background: var(--crm-surface-elevated);
}

.tab-pane .table {
    margin-bottom: 0;
}

.tab-pane .table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--crm-table-header-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
}

/* Таблицы в карточках (Номенклатура, Автомобили и т.д.) — фон шапки и границы из темы, без «белого» Bootstrap */
main .card > .card-body .table thead th {
    background: var(--crm-table-header-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--app-text-secondary);
    font-size: 0.8125rem;
}

/* Карточка + таблица (Номенклатура, Автомобили, Работы): фон как у card-body, без «серого» tbody из CDN Bootstrap */
main .card > .card-body > .table-responsive {
    background-color: var(--bs-card-bg, var(--bs-body-bg));
}

main .card > .card-body .table:not(.table-dark) {
    --bs-table-bg: var(--bs-card-bg, var(--bs-body-bg));
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

/* Страница «Статистика и отчёты»: строка с фильтрами и выпадающими списками — выше заголовков таблиц */
#statsReportsTabContent .row.mb-3.align-items-end {
    position: relative;
    z-index: 10;
}

/* Выравнивание высоты: поля ввода, выпадающие списки и кнопки на всех вкладках */
#statsReportsTabContent .form-control,
#statsReportsTabContent .form-select,
#statsReportsTabContent .row.mb-3 .btn,
#statsReportsTabContent .btn-group .btn {
    height: 38px;
    box-sizing: border-box;
}
#statsReportsTabContent .row.mb-3 .btn,
#statsReportsTabContent .btn-group .btn {
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Вкладка Отчёты: одинаковая высота блоков таблицы и диаграммы */
#reports .row.g-3.align-items-stretch .stats-table-wrapper,
#reports .row.g-3.align-items-stretch .col-md-6:last-child .flex-grow-1 {
    min-height: 320px;
}

.tab-pane .table tbody tr:hover {
    box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), 0.05);
}

.cell-readonly {
    background: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.08) !important;
}

@media screen and (max-width: 768px) {
    /* Обёртка таблицы: не скролл, а карточки */
    .table-responsive {
        overflow-x: visible !important;
    }

    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        border-bottom: 2px solid var(--bs-border-color);
        padding-bottom: 0;
        margin-bottom: 10px;
        scrollbar-width: thin;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    .nav-tabs .nav-link {
        font-weight: 600 !important;
        padding: 8px 12px;
        font-size: 14px;
        border: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

    .nav-tabs .nav-link.active {
        border-bottom: 3px solid var(--bs-primary);
    }

    .nav-tabs::-webkit-scrollbar {
        height: 3px;
    }

    .nav-tabs::-webkit-scrollbar-track {
        background: var(--crm-scrollbar-track);
    }

    .nav-tabs::-webkit-scrollbar-thumb {
        background: var(--bs-primary);
        border-radius: 3px;
    }

    /* Карточки на мобильных: таблица как блоки, заголовки по вертикали через data-label */
    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        display: block !important;
    }

    .table-responsive thead {
        display: none !important;
    }

    .table-responsive tbody tr {
        border: 1px solid var(--bs-border-color);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 8px 10px;
        background-color: var(--crm-surface-elevated);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    .table-responsive td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 6px 4px;
        border: none;
        border-bottom: 1px solid var(--crm-line-soft);
        font-size: 13px;
        text-align: right;
        min-height: 34px;
    }

    .table-responsive td:last-child {
        border-bottom: none;
    }

    /* Подпись слева (заголовок по вертикали для каждой карточки) */
    .table-responsive td:before {
        content: attr(data-label) !important;
        font-weight: 600;
        color: var(--bs-link-hover-color);
        text-align: left;
        padding-right: 8px;
        width: 42%;
        font-size: 12px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.2;
    }

    .table-responsive td[data-label="Гос. номер"] {
        font-weight: 700 !important;
    }

    .table-responsive td select {
        width: 58%;
        margin-left: auto;
        text-align: left;
        font-size: 12px;
        padding: 4px 6px;
        height: auto;
    }

    .table-responsive td input[type="checkbox"] {
        width: auto;
        margin-right: 0;
        margin-left: auto;
        transform: scale(1);
    }

    .table-responsive td .editable-date,
    .table-responsive td .editable-comment {
        width: 58%;
        text-align: left;
        display: inline-block;
        font-size: 12px;
        padding: 4px 6px;
    }

    /* Ячейка «Комментарий»: шире поле и удобная зона нажатия на мобильных */
    .table-responsive td[data-label="Комментарий"] {
        min-height: 44px;
        padding: 8px 5px;
        align-items: flex-start;
    }

    .table-responsive td[data-label="Комментарий"]:before {
        width: 28%;
        padding-top: 4px;
    }

    .table-responsive td[data-label="Комментарий"] .dashboard-comment-clamp,
    .table-responsive td[data-label="Внутренний комментарий"] .dashboard-comment-clamp {
        width: 70%;
        min-height: 36px;
        padding: 8px 10px;
        font-size: 13px;
        display: block;
        box-sizing: border-box;
    }

    .table-responsive td span:not(.sb-placeholder) {
        width: 58%;
        text-align: left;
        font-size: 12px;
        white-space: normal;
        word-break: break-word;
    }

    /* Даты по срокам: окраска и размер — вне общего правила «все span 58%» (ломало фон/рамку в карточке) */
    .table-responsive td .reglament-date-display,
    .table-responsive td .planned-date-display {
        width: auto !important;
        max-width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

    .table-responsive td .planned-date-display .editable-date {
        width: auto !important;
        max-width: 100%;
    }

    /* Ячейка «Согласование СБ»: контейнер и чекбокс всегда видны на мобильных */
    .table-responsive td[data-label="Согласование СБ"] {
        min-height: 36px;
    }

    .table-responsive td[data-label="Согласование СБ"] .sb-container,
    .table-responsive td[data-label="Согласование СБ"] .d-flex {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: 60%;
        margin-left: auto;
        min-width: 0;
    }

    .table-responsive td[data-label="Согласование СБ"] input[type="checkbox"].sb-checkbox {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        margin: 0;
        display: inline-block;
        opacity: 1;
    }

    .sb-container {
        width: 60%;
        margin-left: auto;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
    }

    .sb-container .sb-checkbox {
        margin-left: 0;
        margin-right: 5px;
    }

    .sb-date-editable {
        font-size: 11px;
        padding: 1px 3px;
        width: 100%;
        text-align: right;
    }

    .table-responsive td .badge,
    .table-responsive td .text-muted {
        font-size: 10px;
    }

    .table-responsive td button {
        width: 60%;
        font-size: 11px;
        padding: 2px 6px;
        margin-left: auto;
    }

    /* Choices «Статус» / «Категория»: ширина по самой длинной строке, текст в одну строку; если не влезает — прокрутка, не перенос */
    .table-responsive .choices--table-cell.is-open .choices__list--dropdown {
        left: auto !important;
        right: 0 !important;
        width: max-content !important;
        min-width: 100%;
        max-width: calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    .table-responsive .choices--table-cell .choices__list--dropdown > .choices__list {
        width: max-content;
        min-width: 100%;
        max-width: none;
    }
    .table-responsive .choices--table-cell .choices__list--dropdown .choices__item {
        white-space: nowrap !important;
    }

/* Исполнители: селект роли и список вариантов — по длине текста */
.executors-page .choices--fit-content {
    width: max-content;
    min-width: 220px;
}
.executors-page .executor-role-col {
    width: 1%;
    white-space: nowrap;
}
.executors-page .choices--fit-content .choices__inner {
    width: max-content;
    min-width: 220px;
}
.executors-page .executor-role-select {
    width: max-content;
    min-width: 220px;
}
.executors-page .choices--fit-content .choices__list--single {
    padding-right: 1.6rem;
}
.executors-page .choices--fit-content .choices__list--single .choices__item {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}
.executors-page .choices--fit-content.is-open .choices__list--dropdown {
    width: max-content;
    min-width: 100%;
    max-width: calc(100vw - 1rem);
    overflow-x: auto;
}
.executors-page .choices--fit-content .choices__list--dropdown .choices__item,
.executors-page .executor-role-select option {
    white-space: nowrap;
}

    @media screen and (max-width: 480px) {
        .table-responsive td {
            font-size: 12px;
            padding: 3px 4px;
        }

        .table-responsive td:before {
            width: 30%;
            font-size: 11px;
        }

        .table-responsive td select,
        .table-responsive td .editable-date,
        .table-responsive td span:not(.sb-placeholder) {
            width: 65%;
            font-size: 11px;
        }

        .table-responsive td .reglament-date-display,
        .table-responsive td .planned-date-display {
            width: auto !important;
        }

        .table-responsive td .planned-date-display .editable-date {
            width: auto !important;
        }

        .table-responsive td[data-label="Комментарий"]:before {
            width: 26%;
        }

        .table-responsive td[data-label="Комментарий"] .dashboard-comment-clamp,
        .table-responsive td[data-label="Внутренний комментарий"] .dashboard-comment-clamp {
            width: 72%;
            min-height: 40px;
            padding: 10px 12px;
            font-size: 12px;
        }
    }
}

@media screen and (min-width: 992px) {
    .container {
        max-width: 95% !important;
    }

    .table td,
    .table th {
        padding: 0.5rem;
        font-size: 14px;
    }

    .table td:first-child,
    .table th:first-child {
        padding-left: 0.75rem;
    }

    .table td:last-child,
    .table th:last-child {
        padding-right: 0.75rem;
    }

    .table select.form-select-sm,
    .table .status-select {
        font-size: 14px;
        padding: 0.15rem 1.0rem 0.25rem 0.5rem;
        min-width: 130px;
        height: 28px;
        min-height: 28px;
        box-sizing: border-box;
        padding: 0.15rem 0.15rem 0.15rem 0.15rem;
        line-height: 1.25;
    }

    .table input[type="checkbox"] {
        transform: scale(1.2);
        margin: 0 auto;
        display: block;
    }
}

@media screen and (min-width: 1400px) {
    .container {
        max-width: 98% !important;
    }

    .table td,
    .table th {
        font-size: 14px;
        padding: 0.6rem;
    }
}

.comment-container {
    max-width: 300px;
    position: relative;
}

.editable-comment,
.editable-internal-comment {
    display: inline-block;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.45;
    padding: 2px 4px;
    background-color: var(--bs-tertiary-bg);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9375rem;
}

.editable-comment:hover,
.editable-internal-comment:hover {
    background-color: var(--bs-secondary-bg);
}

/* Пустой комментарий: увеличиваем зону клика и показываем подсказку */
.editable-comment:empty,
.editable-internal-comment:empty {
    display: inline-block;
    min-width: 220px;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px dashed var(--bs-border-color);
    background: var(--crm-surface-elevated);
}

.editable-comment:empty::before {
    content: "Нажмите дважды, чтобы добавить комментарий";
    color: var(--app-text-tertiary);
    font-size: 0.85em;
}

.editable-internal-comment:empty::before {
    content: "Нажмите дважды, чтобы добавить внутренний комментарий";
    color: var(--app-text-tertiary);
    font-size: 0.85em;
}

.sb-cell {
    min-width: 200px;
}

.sb-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.sb-date-editable {
    cursor: pointer;
    padding: 2px 4px;
    background-color: var(--bs-tertiary-bg);
    border-radius: 3px;
    font-size: 0.9em;
}

.sb-date-editable:hover {
    background-color: var(--bs-secondary-bg);
}

.sb-placeholder {
    color: var(--app-text-tertiary);
    font-style: italic;
}

.sb-edit-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Toast-уведомления */
.toast-container .toast {
    min-width: 280px;
}
.toast-container .toast.bg-danger .toast-header { background-color: rgba(220, 53, 69, 0.2); }
.toast-container .toast.bg-warning .toast-header {
    background-color: rgba(255, 193, 7, 0.2);
    color: var(--bs-emphasis-color, #333);
}

/* Шапка: раскладка без Bootstrap .d-flex на контейнере — иначе display:flex!important ломает grid на мобильных */
.app-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* ========== Мобильная адаптация: общие улучшения ========== */
@media screen and (max-width: 767px) {
    body {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }

    main.container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        margin-top: 0.75rem;
    }

    /* Панель управления: компактный заголовок и кнопки для экономии места */
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.5rem !important;
    }

    .d-flex.justify-content-between.align-items-center.mb-3 h2 {
        font-size: 1.1rem;
        margin-bottom: 0;
        flex: 1 1 auto;
    }

    .d-flex.justify-content-between.align-items-center.mb-3 > div {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        justify-content: flex-end;
    }

    .d-flex.justify-content-between.align-items-center.mb-3 .btn {
        min-height: 34px;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        min-width: auto;
    }

    /* Поиск по гос. номеру — всегда виден на мобильных, вне кнопки «Показать фильтры» */
    .filter-gov-mobile {
        margin-bottom: 0.5rem;
    }
    .filter-gov-mobile .input-group {
        min-height: 34px;
    }
    .filter-gov-mobile .input-group-text {
        padding: 0.25rem 0.4rem;
        font-size: 0.8rem;
    }
    .filter-gov-mobile .form-control {
        padding: 0.25rem 0.4rem;
        font-size: 1.75rem;
    }

    /* Фильтры: сворачиваемые и более компактные */
    .filter-panel-collapsible.collapsed-mobile {
        display: none;
    }

    .filter-toggle-btn {
        width: 100%;
        border-radius: 8px;
        font-size: 0.85rem;
    }

    .filter-panel-grid {
        margin-bottom: 0.5rem !important;
        grid-template-columns: 1fr;
    }

    .filter-panel-grid .input-group .input-group-text {
        padding: 0.05rem 0.1rem;
        font-size: 0.8rem;
        min-width: 5.5rem;
        background: var(--crm-surface-elevated);
    }

    .filter-panel-grid .input-group .form-control,
    .filter-panel-grid .input-group .form-select,
    .filter-panel-grid .filter-grid-actions .btn {
        min-height: 14px;
        padding: 0.05rem 0.1rem;
        font-size: 0.8125rem;
    }
    /* Подсказка влезает в строку; при вводе — крупнее для госномера */
    .filter-panel-grid .input-group .form-control.filter-gov:not(:placeholder-shown) {
        font-size: 1.15rem !important;
        line-height: 1.2;
    }

    .crm-dashboard-page .filter-search-field-wrap .input-group-text {
        min-width: 4.25rem;
        max-width: 32%;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

    .filter-panel-grid .input-group .form-control,
    .filter-panel-grid .input-group .form-select {
        min-width: 0;
    }

    .filter-panel-grid .filter-grid-actions .btn {
        min-width: 48px;
    }

    .filter-grid-actions {
        grid-column: 1 / -1;
    }

    /* Вкладки дашборда: чуть крупнее tap-зона */
    #myTab .nav-link {
        padding: 10px 14px;
        font-size: 14px;
        border-radius: 10px 10px 0 0;
    }

    /* Компактная карточка: первая строка = гос.номер + контрагент без labels */
    .table-responsive tbody tr {
        display: flex !important;
        flex-wrap: wrap;
        position: relative;
    }

    .table-responsive tbody tr td {
        width: 100%;
    }

    .table-responsive tbody tr td[data-label="Гос. номер"],
    .table-responsive tbody tr td[data-label="Контрагент"] {
        width: 50%;
        border-bottom: none;
        padding-top: 2px;
        padding-bottom: 6px;
        min-height: 24px;
    }

    .table-responsive tbody tr td[data-label="Гос. номер"]:before,
    .table-responsive tbody tr td[data-label="Контрагент"]:before {
        content: "" !important;
        display: none !important;
    }

    .table-responsive tbody tr td[data-label="Гос. номер"] {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        font-size: 14px;
        font-weight: 700 !important;
        padding-right: 42%;
    }

    .table-responsive tbody tr td[data-label="Контрагент"] {
        position: absolute;
        top: 8px;
        right: 10px;
        width: auto;
        max-width: 40%;
        justify-content: flex-end;
        text-align: right;
        font-size: 12px;
        color: var(--app-text-tertiary);
        padding: 0;
    }

    /* Модальные окна на весь экран на маленьких экранах */
    .modal-fullscreen-sm-down .modal-dialog {
        max-width: none;
        margin: 0;
    }

    .modal-fullscreen-sm-down .modal-content {
        min-height: 100vh;
        border-radius: 0;
    }

    .modal-fullscreen-sm-down .modal-footer .btn {
        min-height: 44px;
    }

    /* Навбар и логотип компактнее на мобильных (текст без изменений) */
    .navbar {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .navbar .container-fluid {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    .navbar-brand img {
        height: 36px;
        width: 36px;
        max-width: 36px;
    }

    /* Шапка: строка 1 — меню + бренд + колокольчик; строка 2 — поиск на всю ширину */
    .app-topbar-inner.app-topbar-inner--stack-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 0.35rem;
        row-gap: 0.25rem;
        align-items: center;
    }
    .app-topbar-inner.app-topbar-inner--stack-search .app-topbar-leading {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        justify-self: start;
    }
    .app-topbar-inner.app-topbar-inner--stack-search .crm-topbar-search {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none !important;
        width: 100%;
    }
    .app-topbar-inner.app-topbar-inner--stack-search .app-topbar-notify {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin-left: 0 !important;
    }
    .app-topbar-menu-btn {
        min-width: 2.45rem;
        min-height: 2.45rem;
        padding: 0.3rem !important;
    }
    .app-topbar-menu-btn .bi-list {
        font-size: 1.45rem !important;
        line-height: 1 !important;
    }
    .app-topbar-notify .btn {
        padding: 0.2rem 0.35rem;
    }
    .app-topbar-inner #crmGlobalSearchInput {
        font-size: 0.8125rem;
    }
    .app-topbar-inner #crmGlobalSearchInput::placeholder {
        font-size: 0.75rem;
        letter-spacing: -0.01em;
    }
}

@media screen and (max-width: 480px) {
    main.container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .navbar .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .navbar-brand img {
        height: 32px;
        width: 32px;
        max-width: 32px;
    }
}

/* Поиск разделов в боковом меню (светлая панель, токены ui-appearance) */
.site-nav-search-input {
    background-color: var(--crm-surface-elevated, #fff) !important;
    color: var(--app-shell-text, #212529) !important;
    border-color: var(--app-shell-border, var(--bs-border-color)) !important;
}

.site-nav-search-input::placeholder {
    color: var(--app-shell-muted, #6c757d);
}

.site-nav-search-input:focus {
    background-color: var(--crm-surface-elevated, #fff) !important;
    border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.45) !important;
    color: var(--app-shell-text, #212529) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12);
}

/* Дашборд: липкая шапка таблицы; ширина колонок — dashboard-tableprefs.js */
.dashboard-table-prefs table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--crm-table-header-bg, var(--bs-tertiary-bg));
    box-shadow: 0 1px 0 var(--bs-border-color);
}

.dashboard-table-prefs thead th .crm-dashboard-colresize {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    margin-right: -5px;
    height: 100%;
    cursor: col-resize;
    z-index: 6;
}

/* «Комментарий» / «Внутренний комментарий» в панелях: не более 2 строк, полный текст по «ещё...»
   !important — перебивает глобальные .editable-comment { display:inline-block; white-space:pre-wrap } */
.dashboard-table-prefs .dashboard-comment-clamp {
    min-width: 0;
    max-width: 100%;
}
.dashboard-table-prefs .dashboard-comment-clamp:not(.is-expanded) .dashboard-comment-text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    word-break: break-word !important;
    white-space: normal !important;
}
.dashboard-table-prefs .dashboard-comment-clamp.is-expanded .dashboard-comment-text {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
}
.dashboard-table-prefs .dashboard-comment-more {
    font-size: 12px;
    line-height: 1.25;
    margin-top: 2px;
    user-select: none;
}

/*
 * Дашборд (широкий экран): верхняя панель и вкладки не уезжают при прокрутке;
 * вертикальная прокрутка только в блоке .dashboard-table-prefs (шапка таблицы — sticky).
 * На мобильных (≤768px) без изменений: карточки и прокрутка страницы как раньше.
 */
@media screen and (min-width: 769px) {
    html:has(.crm-dashboard-page),
    body:has(.crm-dashboard-page) {
        height: 100%;
        overflow: hidden;
    }

    body:has(.crm-dashboard-page) {
        display: flex;
        flex-direction: column;
    }

    body:has(.crm-dashboard-page) > nav.app-topbar {
        flex-shrink: 0;
    }

    body:has(.crm-dashboard-page) main.container-fluid {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .crm-dashboard-page {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .crm-dashboard-page > .d-flex.justify-content-between {
        flex-shrink: 0;
    }

    #myTabContent.crm-dashboard-tab-content {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #myTabContent.crm-dashboard-tab-content > .tab-pane {
        flex: 1 1 auto;
        min-height: 0;
        /* visible — иначе выпадающие фильтров обрезаются по границе вкладки и оказываются «под» таблицей */
        overflow: visible;
        display: none;
        flex-direction: column;
    }

    #myTabContent.crm-dashboard-tab-content > .tab-pane.active {
        display: flex !important;
    }

    #myTabContent.crm-dashboard-tab-content > .tab-pane > .filter-panel-grid {
        flex-shrink: 0;
    }

    #myTabContent.crm-dashboard-tab-content > .tab-pane > .dashboard-table-prefs.table-responsive {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    /* Для dashboard всегда держим стабильный контекст прокрутки,
       чтобы открытие dropdown не меняло геометрию вкладки. */
    #myTabContent.crm-dashboard-tab-content > .tab-pane > .dashboard-table-prefs.table-responsive {
        overflow: auto !important;
    }
}

/* Dashboard styles moved from runtime JS injection:
   apply at first paint to avoid staged layer/reflow effect on refresh. */
td.cell-readonly .editable-date,
td.cell-readonly .dashboard-comment-text.editable-comment,
td.cell-readonly .dashboard-comment-text.editable-internal-comment {
    cursor: default;
    pointer-events: none;
    opacity: 0.9;
}
td.cell-readonly .dashboard-comment-more {
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
}
td.cell-readonly .status-select,
td.cell-readonly .category-select {
    pointer-events: none;
    opacity: 0.8;
}
.sb-cell {
    min-width: 120px;
}
#requestDetailsOffcanvas {
    width: 30vw;
    max-width: none;
}
.request-detail-card {
    border: 1px solid var(--bs-secondary-bg);
    border-radius: 10px;
    background: var(--bs-tertiary-bg);
    padding: 12px 14px;
    position: relative;
}
.request-detail-edit-action {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
}
.request-detail-row + .request-detail-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--bs-border-color);
}
.request-detail-label {
    color: var(--app-text-tertiary);
    font-size: 12px;
    margin-bottom: 2px;
}
.request-detail-value {
    color: var(--app-text-primary);
    font-size: 14px;
    word-break: break-word;
}
.request-detail-row--category-sb {
    flex-wrap: nowrap;
    margin-top: 2px;
    padding-top: 4px;
    margin-bottom: 0;
}
#requestDetailsOffcanvas .request-detail-label--inline {
    white-space: nowrap;
}
#requestDetailsOffcanvas .request-detail-label--compact {
    font-size: 11px;
    line-height: 1.15;
    margin-bottom: 0;
    letter-spacing: -0.01em;
}
#requestDetailsOffcanvas .request-detail-row--category-sb .request-detail-col--category {
    margin-left: auto;
}
#requestDetailsOffcanvas .detail-category-select {
    font-size: 0.75rem;
    padding: 0.12rem 1.75rem 0.12rem 0.35rem;
    line-height: 1.2;
    min-height: 1.65rem;
}
#requestDetailsOffcanvas .detail-category-readonly {
    font-size: 0.75rem;
    line-height: 1.2;
}
.request-detail-topline-contractor {
    flex-basis: auto;
}
@media (max-width: 576px) {
    .request-detail-topline-contractor {
        width: 100%;
        flex-basis: 100%;
        text-align: right !important;
    }
}
/* Согласование СБ: компактный блок */
#requestDetailsOffcanvas .request-detail-label--sb {
    margin-bottom: 0;
    line-height: 1.15;
}
#requestDetailsOffcanvas .request-detail-value--sb {
    margin-top: 0;
}
#requestDetailsOffcanvas .detail-sb-readonly {
    font-size: 0.75rem;
    line-height: 1.25;
}
#requestDetailsOffcanvas .detail-sb-edit .detail-sb-edit-row {
    row-gap: 0.15rem;
    column-gap: 0.25rem;
}
#requestDetailsOffcanvas .detail-sb-form-check {
    min-height: 0;
    padding-left: 1em;
    margin-bottom: 0 !important;
}
#requestDetailsOffcanvas .detail-sb-check-label {
    font-size: 0.7rem;
    line-height: 1.2;
}
#requestDetailsOffcanvas .detail-sb-checkbox {
    width: 0.85em;
    height: 0.85em;
    margin-top: 0.1em;
}
#requestDetailsOffcanvas .detail-sb-save-btn {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    line-height: 1.2;
    border-radius: 0.2rem;
    flex-shrink: 0;
}
#requestDetailsOffcanvas #detailSbDatetime.detail-sb-datetime-input,
#requestDetailsOffcanvas .detail-sb-datetime-input {
    width: auto;
    max-width: 100%;
    min-width: 7.5rem;
    box-sizing: border-box;
    font-size: 0.7rem;
    padding: 0.1rem 0.3rem;
    line-height: 1.2;
    min-height: 1.55rem;
    margin-bottom: 0 !important;
}
.history-row-clickable {
    cursor: pointer;
}
.history-row-clickable:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}
.request-history-item {
    position: relative;
    border: 1px solid var(--bs-secondary-bg);
    border-radius: 10px;
    background: var(--crm-surface-elevated);
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.request-history-time {
    color: var(--bs-primary);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 4px;
}
.request-history-status {
    font-weight: 600;
}
.request-history-changes-list {
    padding-left: 1.1rem;
    margin: 0;
}
.request-history-changes {
    color: var(--app-text-primary);
}
.request-history-main {
    font-size: 13px;
    color: var(--app-text-primary);
    line-height: 1.4;
    margin-bottom: 4px;
    word-break: break-word;
}
.request-history-internal {
    word-break: break-word;
    line-height: 1.35;
    border-left: 2px solid var(--bs-border-color);
    padding-left: 8px;
}
.request-history-manager {
    color: var(--app-text-tertiary);
    font-size: 12px;
}
.request-history-empty {
    color: var(--app-text-tertiary);
    font-size: 13px;
    border: 1px dashed var(--bs-border-color);
    border-radius: 10px;
    padding: 12px;
    background: var(--crm-surface-elevated);
}
@media (max-width: 1200px) {
    #requestDetailsOffcanvas {
        width: 40vw;
    }
}
@media (max-width: 768px) {
    #requestDetailsOffcanvas {
        width: 100vw;
    }
}