/* ==========================================================================
   7.5. КАРТОЧКИ ФОРМОВКИ (PRODUCTION STEP CARDS)
   ========================================================================== */

/* Базовая карточка-шаг */
.card-step {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
}

.card-step:hover {
    box-shadow: var(--shadow-md);
}

/* Акцентная полоска сверху */
.card-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: var(--border);
}

/* Цветовые модификаторы — акцентная полоска + лёгкий оттенок */
.card-step.card-success::before {
    background: var(--success);
}

.card-step.card-success {
    border-color: var(--success-border);
    background: linear-gradient(180deg, var(--success-bg) 0%, var(--card-bg) 40%);
}

.card-step.card-alt::before {
    background: var(--primary);
}

.card-step.card-alt {
    border-color: rgba(59, 130, 246, 0.2);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.04) 0%, var(--card-bg) 40%);
}

.card-step.card-warning::before {
    background: var(--warning);
}

.card-step.card-warning {
    border-color: var(--warning-border);
    background: linear-gradient(180deg, var(--warning-bg) 0%, var(--card-bg) 40%);
}

/* Заголовок карточки */
.step-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.01em;
}

/* Тело карточки — растягивается */
.step-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Внутри step-body отступы управляются gap, поэтому убираем margin у form-group */
.step-body .form-group {
    margin-bottom: 0;
}

/* Подвал карточки — прижат к низу */
.step-footer {
    margin-top: auto;
    padding-top: 12px;
}

/* Нормы замесов — блок внутри step-body */
.mix-norms-block {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    padding: 10px;
    border-radius: 8px;
    min-height: 60px;
}

/* Иконка-заглушка в TomSelect-опции продукции */
.prod-ts-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--surface-hover);
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 14px;
}

/* ==========================================================================
   8. СПЕЦИФИЧНЫЕ СТИЛИ МОДУЛЕЙ
   ========================================================================== */

/* --- Авторизация --- */
#login-screen {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--sidebar-bg);
    color: white;
}

.login-box {
    background: var(--surface);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    color: var(--text-main);
    width: 320px;
}

.login-box input {
    display: block;
    margin: 15px auto;
    padding: 12px 16px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    background: var(--surface-alt);
    color: var(--text-main);
    outline: none;
}

.login-box input:focus {
    border-color: var(--primary);
}

/* --- Дашборд --- */
.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 70px;
    margin-bottom: 15px;
}

.chart-container {
    flex-grow: 1;
    position: relative;
    height: 400px;
    width: 100%;
}

.expense-list {
    height: 400px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    margin-top: 15px;
    padding-right: 5px;
}

.expense-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--surface-hover);
}

/* --- Конструктор себестоимости (Unit-economics) --- */
.dashboard-tabs-content {
    max-height: 1500px;
    opacity: 1;
}

.collapsed-panel {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.dashboard-tabs-nav .cost-card {
    background-color: var(--surface-alt);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1.5px solid transparent !important;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.dashboard-tabs-nav .cost-card:hover {
    background-color: var(--surface-hover);
    transform: translateY(-2px);
}

.dashboard-tabs-nav .cost-card.tab-active {
    background-color: var(--surface);
    box-shadow: var(--shadow-md);
    z-index: 10;
    border-color: var(--active-border-color, var(--primary)) !important;
}

.dash-drill-container {
    background-color: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

/* Адаптация под темную тему */
[data-theme="dark"] .dashboard-tabs-nav .cost-card {
    border-color: var(--border) !important;
}

/* --- Финансы --- */
.finance-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
}

.finance-header-title-wrap {
    min-width: 0;
}

.finance-page-title {
    line-height: 1.2;
}

.finance-section-title {
    margin: 2px 0 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.finance-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.finance-actions-primary,
.finance-actions-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

#transactions-table th:last-child,
#transactions-table td:last-child {
    padding-right: 12px;
}

.finance-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--surface);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}

.finance-period-day-nav .finance-period-shift-btn {
    min-width: 34px;
    padding: 4px 10px;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.account-card-modern {
    background-color: var(--surface);
    padding: 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    border: 1px solid var(--border);
    opacity: 0.85;
}

.account-card-modern:hover {
    transform: translateY(-2px);
    opacity: 1;
    box-shadow: var(--shadow-md);
}

.account-card-modern.selected {
    border: 2px solid var(--primary);
    opacity: 1;
    background-color: var(--surface-alt);
}

.invoice-alert-row {
    border-left: 4px solid var(--warning);
    background-color: var(--warning-bg) !important;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.summary-card {
    background-color: var(--surface);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.summary-title {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: bold;
}

.summary-value {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-main);
    margin-top: 5px;
}

.summary-card.total {
    background-color: var(--success);
    border-color: var(--success);
    color: white;
}

.summary-card.total .summary-title,
.summary-card.total .summary-value {
    color: white;
}

@media (max-width: 1100px) {
    .finance-header-row {
        align-items: stretch;
        flex-direction: column;
    }

    .finance-toolbar {
        width: 100%;
    }

    .finance-actions-row {
        align-items: stretch;
    }

    .finance-actions-primary,
    .finance-actions-secondary {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .finance-toolbar {
        padding: 8px 10px;
    }

    .finance-actions-row {
        padding: 8px;
    }

    .finance-actions-primary .btn,
    .finance-actions-secondary .btn {
        width: 100%;
        justify-content: flex-start;
    }
}

/* --- Оборудование --- */
.eq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.eq-card {
    border-top: 4px solid var(--primary);
}

.entity-link:hover {
    background-color: transparent;
    /* Removed background color */
    color: var(--primary-dark);
    text-decoration: underline;
    text-decoration-style: dashed;
}

.progress-container {
    width: 100%;
    height: 8px;
    background-color: var(--surface-alt);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--border);
}

.progress-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.status-pill-eq {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.status-pill-eq.active {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.status-pill-eq.repair {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

.status-pill-eq.off {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

/* --- Кадры (Табель и Аккордеоны) --- */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 10px;
}

.accordion-body {
    display: none;
    padding: 24px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-bottom: 24px;
    overflow: hidden;
}

.accordion-body.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.ts-cell {
    width: 28px;
    height: 28px;
    text-align: center;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    border: 1px solid transparent;
}

.ts-cell:hover {
    border-color: var(--primary);
    transform: scale(1.1);
}

.table-dep-section {
    background-color: var(--surface-alt) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--primary);
}

.ts-cell.status-present {
    background-color: var(--success);
    color: white;
}

.ts-cell.status-weekend {
    background-color: var(--surface-alt);
    color: var(--text-muted);
}

.ts-cell.status-sick {
    background-color: var(--warning);
    color: white;
}

.ts-cell.status-vacation {
    background-color: var(--info);
    color: white;
}

.ts-cell.status-absent {
    background-color: var(--danger);
    color: white;
}

.summary-card.office {
    border-left: 5px solid var(--primary);
}

.summary-card.shop {
    border-left: 5px solid var(--warning);
}

.summary-card.security {
    border-left: 5px solid var(--info);
}

.payouts-footer {
    background: var(--surface-alt);
    padding: 15px !important;
    text-align: right;
    border-top: 2px solid var(--border);
}

.badge-closed {
    background: var(--surface-hover);
    color: var(--text-muted);
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: bold;
    border: 1px solid var(--border);
}

.tax-control-group {
    margin-right: 20px;
    font-size: 13px;
    color: var(--text-muted);
}

/* --- Рецепты (Синхронизация и копирование) --- */
.sync-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    border-bottom: 1px solid var(--border);
}

.sync-list-item:hover {
    background-color: var(--surface-hover);
}

.sync-list-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#mass-copy-targets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

/* --- Продажи и Канбан --- */
.sales-col-qty {
    width: 80px;
}

.sales-filter-grid {
    grid-template-columns: 2fr 2fr 2fr 2fr auto !important;
}

.kanban-card {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, background-color 0.2s;
}

.kanban-card:hover {
    background-color: var(--surface-hover) !important;
    transform: translateY(-2px);
}

.kanban-column {
    background-color: var(--surface-alt);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.input-modern.price-dealer {
    border-color: var(--info) !important;
    color: var(--info) !important;
}

/* --- Справочники (Бейджи) --- */
.badge-prod {
    background-color: var(--primary);
    color: white;
}

.badge-mat {
    background-color: var(--surface-alt);
    color: var(--text-main);
    border: 1px solid var(--border);
}

[data-theme="dark"] .badge-mat {
    background-color: var(--surface-hover);
    color: var(--text-muted);
}

/* --- Темная тема: специфичные фиксы --- */
[data-theme="dark"] .table-container {
    box-shadow: none;
}

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-main);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}



[data-theme="dark"] .revenue-card-bg {
    background: linear-gradient(135deg, #1e3a8a, #4c1d95) !important;
}

/* ==========================================================================
   11. СПЕЦИФИЧНЫЕ СТИЛИ ПРОДАЖ (ВКЛАДКИ И МЕНЮ)
   ========================================================================== */

/* Вкладки (Табы) в продажах */
.sales-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 15px;
    flex-wrap: wrap;
}

.sales-tab-btn {
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-weight: bold;
    color: var(--text-muted);
    transition: 0.2s;
}

.sales-tab-btn:hover {
    background: var(--surface-hover);
}

.sales-tab-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.sales-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.sales-tab-content.active {
    display: block;
}

/* Выпадающее меню "Инструменты и Отчеты" */
.action-dropdown {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: -10px;
}

.action-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--surface);
    min-width: 230px;
    box-shadow: var(--shadow-lg);
    border-radius: 8px;
    border: 1px solid var(--border);
    z-index: 100;
    overflow: hidden;
    animation: fadeIn 0.2s ease-in-out;
}

.action-dropdown-content button {
    width: 100%;
    text-align: left;
    padding: 12px 15px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    color: var(--text-main);
    /* Исправлено под темную тему */
    font-size: 13px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-dropdown-content button:hover {
    background-color: var(--surface-hover);
    color: var(--primary);
    padding-left: 20px;
}

.action-dropdown-content button:last-child {
    border-bottom: none;
}

.action-dropdown:hover .action-dropdown-content {
    display: block;
}



/* ==========================================================================
   14. КАДРЫ И ТАБЕЛЬ (TIMESHEET & ACCORDION)
   ========================================================================== */
.timesheet-container {
    max-height: 70vh;
    /* Ограничиваем высоту для скролла */
    overflow-y: auto;
    overflow-x: auto;
}

/* Возвращаем стрелочке правильный вид, если где-то перебили */
.accordion-button {
    display: flex !important;
}

/* ==========================================================================
   15. МОДУЛЬ ЗАРПЛАТЫ — ШАПКА РАСЧЕТОВ И НЕПОЛНЫЙ ДЕНЬ
   ========================================================================== */

/* Шапка внутри аккордеона "Расчет выплат": текст + инпут + кнопка в одну строку */
.payroll-mega-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px;
    margin-bottom: 15px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.payroll-mega-toolbar .input-modern {
    width: auto;
    flex-shrink: 0;
}

.payroll-month-input {
    min-width: 150px;
    font-weight: bold;
}

.payroll-search-input {
    min-width: 180px;
    max-width: 220px;
}

.payroll-dep-select {
    min-width: 120px;
}

.payroll-mega-toolbar .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.payroll-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
}

.payroll-header-formula {
    font-size: 12px;
    margin: 0 0 8px 0;
}

.payroll-reopen-btn {
    display: none;
    border-color: var(--danger);
    color: var(--danger);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ячейка табеля: Неполный день (partial) */
.ts-cell.status-partial {
    background: repeating-linear-gradient(45deg,
            var(--success),
            var(--success) 4px,
            rgba(16, 185, 129, 0.55) 4px,
            rgba(16, 185, 129, 0.55) 8px);
    color: white;
    font-size: 10px;
}

/* Модальное окно: блок выбора множителя (доли смены) */
.multiplier-block {
    align-items: flex-start;
    gap: 15px;
    margin: 10px 0;
    padding: 10px;
    background: var(--warning-bg);
    border-radius: 6px;
    border: 1px solid var(--warning-border);
    flex-wrap: wrap;
}

.multiplier-block-row {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.multiplier-block-label {
    font-size: 13px;
    font-weight: bold;
    color: var(--warning-text);
    margin: 0;
}

.multiplier-radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
}

.multiplier-radio-label input[type="radio"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Итого за день — результат пересчёта в модалке */
.modal-day-result-row {
    width: 100%;
    text-align: left;
    font-weight: bold;
    font-size: 14px;
    color: var(--text-main);
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed var(--warning-border);
}

.modal-day-result-value {
    color: var(--primary);
}

/* Блок автоштрафа за прогул */
.penalty-check-block {
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 10px;
    background: var(--danger-bg);
    border-radius: 6px;
    border: 1px solid var(--danger-border);
}

.penalty-check-block input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.penalty-check-block label {
    font-size: 13px;
    color: var(--danger-text);
    font-weight: bold;
    cursor: pointer;
}

/* ============================================================
   16. МОДУЛЬ СКЛАДА И СУШИЛКИ
   ============================================================ */

/* Шапка модуля: заголовок + кнопки */
.inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.inventory-header h2 {
    margin: 0 0 5px 0;
}

.inventory-header .inventory-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.inventory-actions {
    display: flex;
    gap: 10px;
}

/* Панель фильтров по складам */
.inventory-filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* Обёртка таблицы остатков */
.inventory-table-wrapper {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
}

.inventory-table-wrapper .table-container {
    margin: 0;
}

.inventory-table-wrapper table {
    width: 100%;
    margin: 0;
}

/* Ширина колонок таблицы */
.inv-col-wh {
    width: 15%;
}

.inv-col-batch {
    width: 15%;
}

.inv-col-name {
    width: 35%;
}

.inv-col-qty {
    width: 10%;
    text-align: right;
}

.inv-col-unit {
    width: 10%;
}

.inv-col-actions {
    width: 15%;
    text-align: right;
}

/* Ячейка номера партии */
.inv-batch-cell {
    color: var(--primary);
    font-weight: bold;
}

/* Ячейка остатка (обычный режим) */
.inv-qty-cell {
    font-weight: bold;
    font-size: 15px;
    text-align: right;
}

/* Ячейка единицы измерения */
.inv-unit-cell {
    color: var(--text-muted);
}

/* Ячейка действий */
.inv-actions-cell {
    text-align: right;
}

/* Пустыш-заглушка */
.inv-empty-row {
    text-align: center;
    color: var(--text-muted);
    padding: 30px;
}

/* Badge склада */
.inv-wh-badge {
    background: var(--surface-hover);
    color: var(--text-muted);
}

/* Компактные кнопки действий в строке таблицы */
.inv-action-btn {
    padding: 4px 8px;
    font-size: 12px;
}

/* Кнопка распалубки (синяя) */
.inv-btn-demold {
    padding: 4px 8px;
    font-size: 12px;
}

/* Кнопка утилизации (красная обводка) */
.inv-btn-dispose {
    padding: 4px 8px;
    font-size: 12px;
    color: var(--danger-text);
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

/* Кнопка перемещения (красная обводка без фона) */
.inv-btn-move {
    padding: 4px 8px;
    font-size: 12px;
    color: var(--danger);
    border-color: var(--danger);
}

/* Режим инвентаризации: инпут фактического остатка */
.audit-qty-input {
    width: 100px;
    padding: 4px;
    text-align: right;
    font-weight: bold;
    border: 2px solid var(--primary);
    margin: 0;
    background: var(--surface);
    color: var(--text-main);
}

/* Инфо-блок в модалках склада */
.inv-modal-info {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.inv-modal-info .inv-modal-product {
    font-size: 15px;
}

.inv-modal-info .inv-modal-batch {
    margin-top: 5px;
    color: var(--primary);
    font-weight: bold;
}

.inv-modal-info .inv-modal-stock {
    margin-top: 5px;
    color: var(--text-muted);
}

.inv-modal-info .inv-modal-stock-value {
    font-size: 16px;
    color: var(--text-main);
}

/* Лейбл красного цвета (для полей опасных действий) */
.inv-label-danger {
    color: var(--danger);
    font-weight: bold;
}

.inv-label-success {
    color: var(--success);
    font-weight: bold;
}

.inv-label-warning {
    color: var(--warning-text);
    font-weight: bold;
}

/* Скрытый элемент (кнопка сохранения инвентаризации) */
.inv-hidden {
    display: none;
}

/* Кнопка фильтра Склад №7 (Резервы) */
.inv-reserve-btn {
    border-color: var(--warning-border);
    color: var(--warning-text);
    background: var(--warning-bg);
}

.inv-reserve-btn.active {
    background: var(--warning-text);
    color: #fff;
    border-color: var(--warning-text);
}

/* Колонка заказа в таблице */
.inv-col-order {
    width: 15%;
}

/* Badge номера заказа */
.inv-order-badge {
    background: var(--primary);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* Кнопка управления резервом */
.inv-btn-reserve {
    padding: 4px 8px;
    font-size: 12px;
    color: var(--primary);
    border-color: var(--primary);
}

/* ============================================================ */
/* --- 17. МОДУЛЬ ПРОДАЖ ---                                    */
/* ============================================================ */

/* --- 17.1 Шапка модуля --- */
.sales-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.sales-header h2 {
    margin: 0 0 5px 0;
}

.sales-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.sales-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sales-btn-docs {
    padding: 8px 16px;
    border-color: var(--info);
    color: var(--info);
}

.sales-btn-return {
    padding: 8px 16px;
    border-color: var(--warning);
    color: var(--warning);
}

.sales-btn-tools {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    background: var(--surface-alt);
}

.sales-dropdown-arrow {
    font-size: 10px;
}

.sales-btn-1c {
    color: var(--success);
    font-weight: bold;
    background: var(--success-bg);
}

/* --- 17.2 Checkout Layout (TOP ERP REDESIGN) --- */
.sales-checkout-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sales-header-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sales-border-right {
    border-right: 1px dashed var(--border);
}

.sales-header-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
}

.sales-action-panel {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sales-action-panel:not(.sales-hidden) {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    justify-content: center;
    width: 100%;
}

.sales-spec-search-bar {
    background: var(--surface);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes slideDownIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sales-spec-actions-active {
    animation: slideDownIn 0.3s forwards;
}

.sales-col-qty-input {
    width: 100px;
}

.sales-col-price-input {
    width: 140px;
}

.sales-btn-add {
    padding: 10px 24px;
    margin-bottom: 0;
}

.sales-btn-profit {
    border-color: var(--warning-border);
    color: var(--warning-text);
    padding: 8px;
    min-width: 40px;
}

.sales-footer-right {
    width: 350px;
}

.sales-spec-search-bar {
    background: var(--surface);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sales-panel-left {
    margin: 0;
    border-top: 4px solid var(--primary);
}

.sales-panel-right {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.sales-section-title {
    margin-top: 0;
}

.sales-section-sub-title {
    margin: 0 0 10px 0;
    color: var(--text-muted);
}

.sales-input-row {
    display: flex;
    gap: 5px;
}

.sales-btn-icon {
    padding: 0 10px;
}

.sales-btn-info-icon {
    padding: 0 12px;
    border-color: var(--info);
    color: var(--info);
}

.sales-flex-grow {
    flex-grow: 1;
}

.sales-two-cols {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start;
}

.sales-separator-top {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--border);
}

.sales-section-dashed {
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 15px;
}

.m-0 {
    margin: 0;
}

.sales-mb-sm {
    margin-bottom: 10px;
}

.sales-payment-block {
    margin-bottom: 15px;
}

/* Убираем стрелки инпутов в панели спецификации продаж */
#sale-spec-actions input[type="number"]::-webkit-outer-spin-button,
#sale-spec-actions input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    /* Стандартное свойство */
    margin: 0;
}

#sale-spec-actions input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    /* Стандартное свойство */
}



/* --- 17.3 Клиентская карточка --- */
.sales-client-info {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background: var(--danger-bg);
    border: 1px dashed var(--danger-border);
    border-radius: 6px;
    font-size: 13px;
}

.sales-client-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.sales-label-danger {
    color: var(--danger-text);
}

.sales-debt-value {
    color: var(--danger);
}

.sales-pallets-value {
    color: var(--warning-text);
}

.sales-btn-act {
    width: 100%;
    margin-top: 5px;
    padding: 4px;
    font-size: 12px;
    border-color: var(--danger-border);
    color: #db2777;
}

/* --- 17.4 Договоры --- */
.sales-contract-group {
    display: none;
    margin-top: 15px;
    padding: 10px;
    background: var(--surface-alt);
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.sales-label-muted {
    color: var(--text-muted);
    font-size: 12px;
}

.sales-label-warning-bold {
    color: var(--warning-text);
    font-weight: bold;
}

/* --- 17.5 Поиск товара (TomSelect) --- */
.sales-unit-hint {
    color: var(--primary);
    font-weight: bold;
}

.sales-stock-hint-wrapper {
    min-height: 16px;
    margin-top: 4px;
}

.sales-stock-hint {
    color: var(--text-muted);
    font-size: 11px;
}

.sales-stock-free {
    color: var(--success);
    font-weight: bold;
}

.sales-stock-reserved {
    color: var(--warning-text);
    font-weight: bold;
}

.sales-cost-btn-wrap {
    margin-bottom: 10px;
}

.sales-btn-cost {
    border-color: var(--warning-text);
    color: var(--warning-text);
    font-weight: bold;
    display: none;
}

.sales-btn-add-to-cart {
    width: 100%;
    border-color: var(--primary);
    color: var(--primary);
    margin-top: 10px;
}

/* --- 17.6 Корзина (Cart) --- */
.sales-cart-wrapper {
    flex-grow: 1;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
}

.sales-cart-table {
    margin: 0;
    width: 100%;
}

.sales-cart-table th {
    padding: 10px;
}

.sales-th-discount {
    color: var(--danger);
}

.sales-empty-cell {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

.sales-cart-row {
    border-bottom: 1px solid var(--surface-alt);
}

.sales-cart-price-input {
    width: 70px;
    padding: 4px;
    text-align: center;
}

.sales-cart-discount-input {
    width: 60px;
    padding: 4px;
    text-align: center;
    color: var(--danger);
}

.sales-cart-sum {
    text-align: right;
    font-weight: bold;
    color: var(--primary);
}

.sales-cart-remove {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 16px;
}

/* --- 17.7 Итоги / Прибыль --- */
.sales-totals-block {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 15px;
}

.sales-totals-label {
    font-size: 13px;
    color: var(--text-muted);
}

.sales-input-sm {
    padding: 6px;
}

.sales-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 5px;
}

.sales-grand-total {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    color: var(--primary);
    margin-top: 10px;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}

.sales-original-sum {
    color: var(--text-muted);
    font-size: 14px;
    display: none;
    margin-right: 10px;
}

/* Блок прибыли */
.sales-profit-block {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profit-positive {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
}

.profit-negative {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
}

.profit-title-positive {
    color: var(--success-text);
    font-weight: bold;
    font-size: 14px;
}

.profit-title-negative {
    color: var(--danger-text);
    font-weight: bold;
    font-size: 14px;
}

.profit-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.profit-value {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.profit-value-positive {
    color: var(--success);
}

.profit-value-negative {
    color: var(--danger);
}

.profit-badge {
    margin-top: 5px;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    color: white;
    font-weight: bold;
    display: inline-block;
}

.profit-badge-positive {
    background: var(--success);
}

.profit-badge-negative {
    background: var(--danger);
}

/* --- 17.8 Доверенность --- */
.sales-poa-block {
    background: var(--danger-bg);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--danger-border);
}

.sales-poa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.sales-poa-title {
    font-weight: bold;
    color: var(--danger-text);
    font-size: 13px;
}

.sales-poa-checkbox-label {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--danger);
    font-weight: bold;
}

.sales-poa-select {
    border-color: var(--danger-border);
}

.sales-btn-poa-add {
    padding: 0 12px;
    border-color: var(--danger-border);
}

.sales-poa-comment {
    display: none;
    margin-top: 10px;
}

.sales-poa-comment-input {
    border-color: var(--danger);
    background: var(--surface);
}

.sales-advance-input {
    border-color: var(--warning);
    background: var(--warning-bg);
}

/* --- 17.9 Кнопки действий --- */
.sales-action-bar {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.sales-btn-checkout {
    flex: 2;
    padding: 12px;
    font-size: 16px;
}

/* --- 17.10 Карточка заказов / Фильтры --- */
.sales-card-flush {
    margin: 0;
    min-height: 400px;
}

.sales-view-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.sales-filter-bar {
    background: var(--surface-alt);
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.sales-filter-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.sales-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
    flex: 1 1 150px;
}
.sales-filter-field--chips { flex: 1.5 1 200px; }
.sales-filter-field--period { flex: 2 1 260px; }

.sales-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sales-filter-input {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-main);
    font-size: 13px;
    transition: border-color 0.18s, box-shadow 0.18s;
    width: 100%;
    box-sizing: border-box;
}
.sales-filter-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.13);
}

/* Навигационный мини-календарь */
.sales-period-nav {
    display: flex;
    align-items: center;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    height: 42px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
.sales-period-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 42px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sales-period-arrow:hover { background: var(--surface-hover); color: var(--primary); }
.sales-period-label {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    user-select: none;
}
.sales-period-label:hover { color: var(--primary); }
.sales-period-control { width: 100%; }

/* Стили внутри sales-period-nav (из renderHistoryPeriodUI) */
.sales-period-nav select {
    height: 42px; padding: 0 8px;
    border: none; background: transparent;
    color: var(--text-main); font-size: 13px; font-weight: 500;
    cursor: pointer; flex: 1;
}
.sales-period-nav select:focus { outline: none; }
.sales-period-nav input[type="date"],
.sales-period-nav input[type="text"] {
    height: 40px; padding: 0 8px;
    border: none; background: transparent;
    color: var(--text-main); font-size: 13px; flex: 1; min-width: 0;
}
.sales-period-nav input[type="date"]:focus,
.sales-period-nav input[type="text"]:focus { outline: none; }

/* === Итого-бар (количество + сумма) === */
.sales-totals-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-alt);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    flex-wrap: wrap;
}
.sales-totals-bar:empty { display: none; }
.sales-totals-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sales-totals-stat .stat-label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 12px;
}
.sales-totals-stat .stat-value {
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}
.sales-totals-stat .stat-value.accent-green { color: var(--success); }


/* Pill-chips статуса оплаты — высота как input-modern */
.sales-status-chips { display: flex; gap: 6px; flex-wrap: nowrap; height: 42px; align-items: center; }
.sales-chip {
    padding: 0 14px;
    height: 32px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.sales-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--surface-hover); }
.sales-chip--active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.sales-chip--active:hover { opacity: 0.9; color: #fff; }


/* Кнопка сброса фильтров */
.sales-filter-reset {
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    align-self: flex-end;
}
.sales-filter-reset:hover { border-color: var(--danger); color: var(--danger); }

/* === sales-filter-row: горизонтальная строка фильтров (flex, 1 строка) === */
.sales-filter-row {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: nowrap;
    overflow-x: auto;
}

/* Ширины колонок фильтра */
.sales-filter-row .sf-search  { flex: 1.2; min-width: 140px; }
.sales-filter-row .sf-client  { flex: 1.2; min-width: 130px; }
.sales-filter-row .sf-product { flex: 1;   min-width: 120px; }
.sales-filter-row .sf-period  { flex: 1.4; min-width: 170px; }
.sales-filter-row .sf-status  { flex: 1.5; min-width: 180px; }
.sales-filter-row .sf-reset   { flex: 0 0 auto; align-self: flex-end; height: 42px; }

/* form-group внутри строки — без margin */
.sales-filter-row .form-group { margin-bottom: 0; min-width: 0; }

/* input-modern внутри строки — полная ширина поля */
.sales-filter-row .input-modern { width: 100%; }



/* --- 17.11 Таблица заказов --- */
.sales-table-full {
    width: 100%;
}

.sales-col-date {
    width: 15%;
}

.sales-col-doc {
    width: 15%;
}

.sales-col-client {
    width: 25%;
}

.sales-col-items {
    width: 20%;
}

.sales-col-status {
    width: 10%;
    text-align: center;
}

.sales-col-actions {
    width: 15%;
    text-align: right;
}

.sales-col-vol {
    width: 15%;
    text-align: center;
}

.sales-col-sum {
    width: 15%;
    text-align: right;
}

/* Строка в таблице заказов */
.sales-order-row {
    transition: background-color 0.2s;
}

.sales-order-row:hover {
    background-color: var(--surface-hover);
}

.sales-order-date {
    color: var(--text-muted);
    font-size: 13px;
}

.sales-order-deadline {
    color: var(--warning-text);
    font-weight: bold;
}

.sales-order-doc-link {
    color: var(--info);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.sales-order-doc-link:hover {
    text-decoration: underline;
}

.sales-order-amount {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-main);
}

.sales-order-client {
    font-weight: bold;
}

.sales-order-address {
    font-size: 11px;
    color: var(--text-muted);
}

.sales-order-items {
    font-size: 12px;
    max-width: 250px;
    vertical-align: top;
}

.sales-order-actions-cell {
    text-align: right;
    min-width: 250px;
    vertical-align: middle;
}

.sales-order-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    align-items: center;
}

.sales-btn-sm {
    padding: 4px 8px;
    font-size: 12px;
}

.sales-btn-xs {
    padding: 2px 5px;
    font-size: 10px;
}

.sales-btn-xs-cancel {
    padding: 2px 5px;
    font-size: 11px;
}

.sales-btn-sm-info {
    color: var(--info);
    border-color: var(--info);
}

.sales-btn-sm-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.sales-btn-sm-success {
    color: var(--success);
    border-color: var(--success);
}

/* --- 17.12 Badges статусов --- */
.sales-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
}

.badge-shipping {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid #bae6fd;
}

.badge-queued {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid #fde047;
}

.badge-paid {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid #bbf7d0;
    margin-top: 5px;
}

.badge-debt {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid #fecaca;
    margin-top: 5px;
}

.badge-advance {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
    margin-top: 5px;
}

.badge-unpaid {
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid #e2e8f0;
    margin-top: 5px;
}

/* Баланс клиента */
.sales-balance-badge {
    margin-top: 5px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 4px;
}

.balance-overpaid {
    color: var(--success-text);
    background: var(--success-bg);
    border: 1px solid var(--success-border);
}

.balance-debt {
    color: var(--danger-text);
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
}

.balance-zero {
    color: var(--text-muted);
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.sales-projected {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.sales-projected-positive {
    color: var(--success);
}

.sales-projected-negative {
    color: var(--danger);
}

/* --- 17.13 Пагинация --- */
.sales-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 10px;
    background: var(--surface-alt);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sales-page-info {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- 17.14 Kanban --- */
.sales-kanban-board {
    display: none;
    gap: 20px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 10px;
    min-height: 500px;
}

.kanban-column {
    flex: 1;
    min-width: 320px;
    background: var(--surface-alt);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid var(--border);
}

.kanban-column-processing {
    background: var(--success-bg);
    border-color: var(--success-border);
}

.kanban-column-title {
    margin: 0 0 15px 0;
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}

.kanban-title-processing {
    color: var(--success);
}

.kanban-count {
    background: var(--surface-hover);
    color: var(--text-main);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.kanban-count-processing {
    background: var(--success-border);
    color: var(--success-text);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.kanban-items-container {
    min-height: 400px;
}

.kanban-card {
    background: var(--surface);
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 0 1px 2px var(--shadow-sm);
    cursor: grab;
    user-select: none;
    border: 1px solid var(--surface-alt);
}

.kanban-card-pending {
    border-left: 5px solid #3b82f6;
}

.kanban-card-processing {
    border-left: 5px solid var(--success);
}

.kanban-card-header {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}

.kanban-card-client {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text-main);
    font-size: 14px;
}

.kanban-card-items {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--surface-alt);
    padding-top: 10px;
}

.kanban-card-total {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
}

.kanban-card-btn {
    background: var(--surface-alt);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: 0.2s;
}

.kanban-card-btn:hover {
    background: var(--info-bg);
}

/* --- 17.15 Архив --- */
.sales-date-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.sales-date-shortcuts {
    font-size: 11px;
}

.sales-date-shortcuts a {
    color: var(--primary);
    text-decoration: none;
    padding: 0 3px;
}

.sales-date-shortcuts a:hover {
    text-decoration: underline;
}

.sales-date-input {
    background: var(--surface);
    cursor: pointer;
}

.sales-hist-row {
    transition: background-color 0.2s;
}

.sales-hist-row:hover {
    background-color: var(--surface-hover);
}

.sales-hist-date {
    color: var(--text-muted);
    font-size: 13px;
}

.sales-hist-doc {
    color: var(--primary);
    font-weight: bold;
}

.sales-hist-sum {
    text-align: right;
    color: var(--success);
    font-weight: bold;
}

.sales-hist-actions {
    text-align: right;
    min-width: 250px;
}

/* --- 17.16 Утилиты --- */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* ==========================================================================
   18. ДАШБОРД (Кодовое имя: dashboard.ejs)
   ========================================================================== */
.dash-header-btn {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: 0.3s;
}

.dash-header-btn:hover {
    background: var(--surface-hover);
}

/* Границы (Цветные обводки) */
.dash-border-primary {
    border-bottom: 4px solid var(--primary);
}

.dash-border-warning {
    border-bottom: 4px solid var(--warning);
}

.dash-border-danger {
    border-bottom: 4px solid var(--danger);
}

/* Карточка Склада */
.dash-stock-card {
    border-top: 4px solid var(--info);
    transition: 0.3s;
    padding: 0 !important;
}

.dash-stock-title {
    margin: 0;
    font-size: 16px;
    color: var(--info);
}

.dash-accordion-body {
    padding: 0 15px 15px 15px;
    border-top: 1px dashed var(--border);
}

.cursor-pointer {
    cursor: pointer;
}

/* Поиск */
.dash-main-search {
    font-size: 15px;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.dash-search-container {
    border-left: 4px solid var(--primary);
}

.dash-panel-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

/* Три Кита (Вкладки) */
.dash-triad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    --active-border-color: transparent;
}

.dash-tab-card {
    cursor: pointer;
    transition: 0.3s;
    margin-bottom: 0 !important;
}

.dashboard-tabs-nav .cost-card {
    background-color: var(--surface-hover);
    /* 👈 Системный фон неактивной вкладки */
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-sm) !important;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.dashboard-tabs-nav .cost-card.tab-active {
    background-color: var(--surface);
    /* 👈 Системный фон активной вкладки */
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-md) !important;
    z-index: 10;
    border: 1.5px solid var(--active-border-color) !important;
}

#drilldown-container {
    background-color: var(--surface);
    /* 👈 Фон выезжающей панели подстраивается под тему */
}

.dash-tab-success {
    border-top: 4px solid var(--success);
}

.dash-tab-warning {
    border-top: 4px solid var(--warning);
}

.dash-tab-primary {
    border-top: 4px solid var(--primary);
}

.dash-tab-title {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 16px;
}

.dash-tab-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.dash-tab-val {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Слайдер-панели */
.dash-panel-success {
    border-left: 4px solid var(--success);
}

.dash-panel-warning {
    border-left: 4px solid var(--warning);
}

.dash-panel-primary {
    border-left: 4px solid var(--primary);
}

.btn-sm-pad {
    padding: 6px 12px;
}

/* Финансовая модель */
.dash-finance-card {
    border-left: 5px solid var(--warning);
    max-width: 700px;
}

.dash-finance-tax-box {
    text-align: right;
    background: var(--surface-alt);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px dashed var(--primary);
}

.dash-tax-input-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 3px;
}

.dash-tax-input {
    width: 60px;
    height: 28px;
    padding: 2px 5px;
    text-align: center;
}

.dash-finance-input-box {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 15px;
}

.dash-finance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: start;
}

.dash-finance-result-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-hover);
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed var(--border);
    margin-bottom: 15px;
}

.dashboard-tabs-content {
    max-height: 1500px;
    opacity: 1;
}

.collapsed-panel {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Дополнительные глобальные утилиты */
.align-end {
    align-items: flex-end;
}

.font-16 {
    font-size: 16px;
}

.font-24 {
    font-size: 24px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.pl-15 {
    padding-left: 15px;
}

.pr-15 {
    padding-right: 15px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.text-primary {
    color: var(--primary);
}

/* Колонки таблиц (%) */
.w-4 {
    width: 4%;
}

.w-8 {
    width: 8%;
}

.w-9 {
    width: 9%;
}

.w-10 {
    width: 10%;
}

.w-12 {
    width: 12%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-35 {
    width: 35%;
}

/* --- JS HTML генерация Дашборда --- */
.dash-warn-card {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid var(--danger-border);
    padding: 15px;
    border-radius: 8px;
}

.dash-success-card {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
    padding: 15px;
    border-radius: 8px;
}

.dash-search-tx-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px 8px 30px;
    border-bottom: 1px solid var(--surface-hover);
}

.dash-search-tx-info {
    flex-grow: 1;
    min-width: 0;
    padding-right: 15px;
}

.dash-text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-search-tx-amount {
    font-weight: bold;
    color: var(--danger);
    white-space: nowrap;
    margin-right: 15px;
}

.dash-search-cat-header {
    background: var(--surface-alt);
    padding: 8px 15px 8px 20px;
    font-weight: bold;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}

.dash-search-group-wrap {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.dash-drill-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--surface-hover);
    cursor: pointer;
    transition: 0.2s;
}

.dash-drill-tx {
    padding: 12px 15px;
    border-bottom: 1px dashed var(--border);
}

.dash-bulk-bar {
    display: none;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 2px solid var(--primary);
    padding: 10px 15px;
    z-index: 5;
}

.dash-tx-wrapper {
    max-height: 420px;
    overflow-y: auto;
    position: relative;
}

/* ==========================================================================
   19. ФИНАНСЫ И КАССА (finance.ejs и finance.js)
   ========================================================================== */
.finance-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
    align-items: start;
}

/* CRITICAL: This allows grid items to shrink below their internal canvas width */
.finance-charts-grid>div {
    min-width: 0;
    min-height: 0;
}

.finance-chart-container {
    position: relative;
    /* CRITICAL: Traps the absolute positioning of Chart.js */
    height: 250px;
    width: 100%;
    min-height: 0;
    /* CRITICAL: Prevents flex/grid blowout */
}

.finance-invoices-wrap {
    margin-bottom: 20px;
}

.finance-search-input {
    width: 350px;
}

.finance-summary-bar {
    background: var(--surface-hover);
    border: 1px solid var(--primary);
    border-left: 4px solid var(--primary);
    padding: 12px 15px;
    border-radius: 8px;
    align-items: center;
    justify-content: space-between;
}

.finance-summary-count {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--surface);
    padding: 4px 8px;
    border-radius: 4px;
}

.finance-btn-reset {
    padding: 4px 10px;
    font-size: 12px;
    border: none;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.finance-btn-reset:hover {
    background: var(--surface-alt);
}

.finance-table {
    table-layout: fixed;
    word-break: break-word;
}

.finance-limit-select {
    padding: 2px 5px;
    min-height: 30px;
    width: 70px;
}

/* --- JS HTML генерация Финансов --- */
.finance-alert-danger {
    background: var(--danger-bg);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--danger-border);
    border-left: 5px solid var(--danger);
    animation: fadeIn 0.5s;
}

.finance-alert-danger h4 {
    margin: 0 0 5px 0;
    color: var(--danger-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.finance-alert-success {
    background: var(--success-bg);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--success-border);
    border-left: 5px solid var(--success);
    animation: fadeIn 0.5s;
}

.finance-alert-success h4 {
    margin: 0 0 5px 0;
    color: var(--success-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.finance-alert-text {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.5;
}

.finance-margin-grid {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.finance-margin-card {
    background: var(--surface);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.finance-pnl-wrap {
    background: var(--surface-alt);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.finance-pnl-header {
    margin-top: 0;
    text-align: center;
    color: var(--text-main);
}

.finance-pnl-toolbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
    background: var(--surface);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.finance-pnl-date-badge {
    text-align: center;
    margin-bottom: 25px;
}

.finance-pnl-date-badge span {
    background: var(--surface-alt);
    color: var(--primary);
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 13px;
    border: 1px solid var(--primary);
}

.finance-pnl-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 5px;
}

.finance-pnl-total-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background: var(--surface-alt);
    border-right: 3px solid transparent;
    margin-bottom: 20px;
    align-items: center;
}

.finance-pnl-result-row {
    display: flex;
    justify-content: space-between;
    padding: 25px 20px;
    border-radius: 8px;
    align-items: center;
    border: 2px solid transparent;
}

.cp-card-box {
    background: var(--surface);
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}

.cp-card-stat {
    flex: 1.2;
    text-align: center;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 0 10px;
}

.cp-card-money {
    flex: 1.2;
    padding-left: 15px;
    text-align: right;
}

.cp-flag-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
}

/* CRM profile styles */
.crm-tx-row {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.crm-tx-right {
    text-align: right;
    width: 45%;
    padding-right: 10px;
    font-weight: 500;
}

.crm-tx-amount {
    font-weight: bold;
    white-space: nowrap;
}

.crm-inv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

/* Дополнительные классы CRM-профиля (заменяют inline-стили) */
.badge-role { background: var(--surface-alt); color: var(--primary); }
.crm-profile-header .btn-crm-delete { border-color: var(--danger); color: var(--danger); }
.crm-profile-header .btn-crm-delete:hover { background: var(--danger); color: white; }

/* Широкая модальная карточка контрагента */
#app-modal .modal-content { max-width: 1000px; width: 95%; }

.crm-profile-card {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 15px;
}

.crm-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.crm-profile-title {
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
}

.crm-profile-info {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.crm-toggle-header {
    margin: 0 0 5px 0;
    cursor: pointer;
    background: var(--surface-alt);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}

.crm-toggle-content {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--surface);
}

.crm-block-header {
    margin: 0 0 10px 0;
}

.crm-list-box {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    background: var(--surface);
    margin-bottom: 15px;
}

.crm-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.crm-history-box {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 600px;
    overflow-y: auto;
    background: var(--surface);
}

/* --- Таблица транзакций (renderTransactionsTable) --- */
.tx-row-system {
    opacity: 0.6;
    background-color: var(--surface-alt);
    color: var(--text-muted);
}

.tx-account-label {
    font-size: 11px;
    font-weight: bold;
    display: block;
    margin-top: 3px;
}

.tx-actions-cell {
    text-align: center;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    align-items: center;
    min-width: 96px;
    white-space: nowrap;
}

.tx-locked-badge {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: bold;
    background: var(--surface-alt);
    padding: 4px 8px;
    border-radius: 4px;
}

/* --- counterpartiesModal layout --- */
.cp-modal-filter-bar {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cp-modal-filter-flex {
    flex: 1;
    min-width: 200px;
}

.cp-list-container {
    max-height: 550px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- imprest widget --- */
.imprest-item-row {
    display: grid;
    grid-template-columns: 2fr 3fr 3fr auto;
    gap: 10px;
    align-items: start;
    background: var(--surface-alt);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* ==========================================================================
   20. ПРОИЗВОДСТВО И ФОРМОВКА
   ========================================================================== */

/* --- Шапка модуля --- */
.prod-date-input {
    width: 140px;
    cursor: pointer;
}

.prod-header-datepicker {
    margin: 0;
}

.prod-shift-group {
    margin: 0;
    width: 250px;
}

/* --- Сетка шагов (3 колонки: Формовка / Основной замес / Лицевой замес) --- */
.prod-steps-grid {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
}

/* --- Превью объёма (итого м²/шт) --- */
.prod-volume-preview {
    font-weight: 900;
    font-size: 16px;
    padding: 10px;
    background: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--success-border);
}

/* --- Кнопка добавления в партию --- */
.prod-add-btn {
    height: 42px;
    font-size: 14px;
    font-weight: 700;
}

/* --- Норма смешивания (блок) --- */
.prod-mix-norms-main {
    background: var(--surface-alt);
}

.prod-mix-norms-face {
    background: var(--warning-bg);
}

/* --- Секция истории партий --- */
.prod-history-card {
    margin-top: 20px;
}

.prod-history-card .table-modern {
    table-layout: fixed;
}

.prod-search-wrap {
    position: relative;
    width: 350px;
}

.prod-search-icon {
    position: absolute;
    left: 12px;
    top: 10px;
    opacity: 0.5;
    pointer-events: none;
}

.prod-search-input {
    padding-left: 35px;
    margin: 0;
    border-radius: 20px;
}

/* --- Заголовки таблицы истории (сортируемые) --- */
.prod-th-sortable {
    cursor: pointer;
}

.prod-th-date {
    cursor: pointer;
    color: var(--primary);
}

/* --- Подвал таблицы (итоги смены) --- */
.prod-tfoot-summary {
    background: var(--surface-alt);
    font-weight: bold;
    border-top: 2px solid var(--border);
}

.prod-tfoot-label {
    text-align: right;
    padding: 12px;
}

.prod-tfoot-volume {
    padding: 12px;
    color: var(--primary);
}

.prod-tfoot-cost {
    padding: 12px;
    color: var(--danger);
}

.prod-tfoot-actions {
    text-align: right;
    padding: 12px;
}

/* --- production.js dynamic elements --- */
/* Calendar styles */
.prod-cal-active {
    font-weight: bold;
    color: var(--primary);
}

.prod-cal-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--success);
    border-radius: 50%;
}

/* --- inventory.js calendar dots (Drying warehouse) --- */
.inv-cal-dot-receipt {
    position: absolute;
    bottom: 2px;
    left: calc(50% - 4px);
    width: 4px;
    height: 4px;
    background-color: var(--success);
    border-radius: 50%;
}

.inv-cal-dot-expense {
    position: absolute;
    bottom: 2px;
    left: calc(50% + 2px);
    width: 4px;
    height: 4px;
    background-color: var(--warning);
    border-radius: 50%;
}

/* Template Editor */
.prod-tpl-hint {
    font-size: 11px;
    margin-bottom: 5px;
    opacity: 0.8;
}

.prod-tpl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 4px 0;
}

.prod-tpl-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.prod-tpl-input {
    width: 75px;
    padding: 2px 5px;
    text-align: right;
    margin: 0;
    font-weight: bold;
    font-size: 13px;
    border: 1px solid var(--border);
}

.prod-tpl-unit {
    font-size: 11px;
    width: 15px;
    text-align: left;
}

/* Session Products */
.prod-session-empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 15px;
    border: 1px dashed var(--border);
    border-radius: 6px;
}

.prod-session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* History Statuses */
.prod-badge-draft {
    background: var(--warning);
    color: #000;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 6px;
}

.prod-row-draft {
    border-left: 3px solid var(--warning) !important;
}

/* Batch Details */
.prod-details-td {
    padding: 0;
    background: var(--surface-alt);
    border-bottom: 3px solid var(--primary);
}

.prod-details-wrap {
    padding: 30px;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-main);
}

.prod-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 15px;
}

.prod-details-title {
    margin: 0;
    font-size: 20px;
    color: var(--text-main);
}

.prod-details-vol {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.prod-details-cost-label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.prod-details-cost-val {
    font-size: 32px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.prod-details-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
}

.prod-cost-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.prod-cost-card {
    background: white;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

.prod-cost-card-mat {
    border-left: 5px solid var(--success);
}

.prod-cost-card-mach {
    border-left: 5px solid var(--warning);
}

.prod-cost-card-mold {
    border-left: 5px solid #007bff;
}

.prod-cost-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.prod-cost-title {
    font-weight: bold;
    color: var(--text-muted);
}

.prod-cost-val {
    font-size: 16px;
}

.prod-cost-bar-bg {
    background: var(--surface-hover);
    height: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
}

.prod-cost-bar-fill {
    height: 100%;
    background: var(--success);
}

.prod-cost-unit-mat {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px;
    border-radius: 6px;
    background: var(--surface-alt);
}

.prod-cost-unit-mach {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px;
    border-radius: 6px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
}

.prod-cost-unit-mold {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px;
    border-radius: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.prod-mat-table-wrap {
    background: var(--surface);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.prod-mat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.prod-mat-title {
    margin: 0;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.prod-mat-badge {
    background: var(--surface-hover);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.prod-table-modern {
    width: 100%;
    border-collapse: collapse;
}

.prod-th-styled {
    padding: 12px;
    border-bottom: 2px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
    text-align: left;
    background: var(--surface-alt);
}

.prod-th-right {
    text-align: right;
}

.prod-tr-styled {
    border-bottom: 1px solid var(--border);
}

.prod-td-styled {
    padding: 12px;
}

.prod-td-right {
    text-align: right;
}

.prod-mat-name {
    font-weight: 600;
    color: var(--text-main);
}

.prod-tfoot-styled {
    background: var(--surface-hover);
    border-top: 2px solid var(--border);
    font-weight: 900;
    color: var(--text-main);
}

.prod-tfoot-td {
    padding: 15px 12px;
}

/* MRP Dashboard */
.mrp-plan-row {
    border-bottom: 1px solid var(--border);
}

.mrp-plan-qty {
    text-align: right;
    color: var(--primary);
    font-weight: bold;
    font-size: 14px;
}

.mrp-deficit-row {
    border-bottom: 1px solid var(--border);
}

.mrp-card-block {
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
}

.mrp-card-header {
    background: var(--surface-alt);
    padding: 12px 15px;
    border-bottom: 2px solid var(--info);
}

.mrp-card-title {
    margin: 0;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mrp-title-badge {
    background: var(--info);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
}

/* Template Modal Table */
.prod-tpl-edit-th {
    padding: 12px 10px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    text-align: left;
}

.prod-tpl-edit-tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.prod-tpl-edit-tr:hover {
    background: var(--surface-alt);
}

.prod-tpl-edit-add-wrap {
    background: var(--surface-alt);
    padding: 18px;
    border-radius: 10px;
    border: 1px dashed var(--border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   21. СКЛАДЫ И СУШИЛКА
   ========================================================================== */

.inv-filter-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.inv-stock-card {
    border-top: 4px solid var(--info);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

/* Width utilities for stock table columns */
.inv-col-wh {
    width: 10%;
}

.inv-col-batch {
    width: 12%;
}

.inv-col-name {
    width: auto;
}

.inv-col-qty {
    width: 12%;
}

.inv-col-unit {
    width: 8%;
}

.inv-col-actions {
    width: 12%;
}

/* Grid utilities */
.inv-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.inv-grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Buttons */
.inv-reserve-btn {
    border-color: var(--warning);
    color: var(--warning-text);
}

.inv-reserve-btn.active {
    background-color: var(--warning);
    color: #000;
}

.inv-reserve-btn:hover {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

.inv-hidden {
    display: none !important;
}

.inv-toolbar {
    align-items: flex-end;
    row-gap: 8px;
}

.inv-toolbar-btn,
.inv-toolbar-upload .inv-toolbar-btn,
.inv-toolbar-dropdown .inv-toolbar-btn {
    height: 38px;
    white-space: nowrap;
}

.inv-toolbar-date .input-modern {
    margin: 0;
}

.inv-toolbar-dropdown {
    position: relative;
}

.inv-toolbar-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    z-index: 1200;
}

#stock-mod .inv-stock-card-compact table td,
#stock-mod .inv-stock-card-compact table th {
    padding: 6px 9px;
    min-height: 34px;
    vertical-align: middle;
}

/* Плотность таблиц склада (как в отчетах: компакт/стандарт с сохранением в localStorage) */
#stock-mod.inv-density-compact .table-modern th,
#stock-mod.inv-density-compact .table-modern td {
    padding-top: 6px;
    padding-bottom: 6px;
}

#stock-mod.inv-density-compact #inventory-table td,
#stock-mod.inv-density-compact #drying-history-table td {
    font-size: 12.5px;
}

#stock-mod.inv-density-standard .table-modern th,
#stock-mod.inv-density-standard .table-modern td {
    padding-top: 10px;
    padding-bottom: 10px;
}

#stock-mod.inv-density-standard #inventory-table td,
#stock-mod.inv-density-standard #drying-history-table td {
    font-size: 13.5px;
}

#stock-mod .inv-name-cell {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#stock-mod .inv-actions-cell .btn {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 12px;
}

#stock-mod .inv-reserve-order-cell {
    min-width: 360px;
    line-height: 1.3;
}

#stock-mod #inventory-thead .inv-col-order {
    width: 34%;
    min-width: 360px;
}

#stock-mod .inv-reserve-order-main {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

#stock-mod .inv-reserve-order-link {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

#stock-mod .inv-reserve-order-link:hover {
    text-decoration: underline;
}

#stock-mod .inv-reserve-order-client {
    font-size: 12px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

#stock-mod .inv-reserve-order-metrics {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#stock-mod #inventory-table .inv-reserve-row td {
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: middle;
}

#stock-mod #inventory-table .inv-reserve-row--deficit td {
    background: color-mix(in srgb, var(--danger) 5%, var(--surface) 95%);
}

#stock-mod .inv-reserve-deficit-chip {
    display: inline-block;
    margin: 0 6px 2px 0;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: color-mix(in srgb, var(--danger) 76%, var(--text-main) 24%);
    background: color-mix(in srgb, var(--danger) 12%, var(--surface) 88%);
    border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--border) 62%);
}

#stock-mod .inv-reserve-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 10px;
    align-items: end;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}

#stock-mod .inv-reserve-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#stock-mod .inv-reserve-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    font-size: 12px;
}

#stock-mod .inv-reserve-presets {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#stock-mod .inv-reserve-presets .btn.active {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, var(--surface) 86%);
}

#stock-mod .inv-filter-panel .filter-btn {
    border-color: color-mix(in srgb, var(--border) 78%, var(--primary) 22%);
    color: color-mix(in srgb, var(--text-main) 80%, var(--primary) 20%);
    background: var(--surface);
}

#stock-mod .inv-filter-panel .filter-btn.active {
    background: color-mix(in srgb, var(--primary) 16%, var(--surface) 84%);
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border) 42%);
    color: var(--primary);
    font-weight: 600;
}

#stock-mod .inv-toolbar-btn {
    border-color: color-mix(in srgb, var(--border) 82%, var(--primary) 18%);
}

#stock-mod .inv-demold-done-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--success) 38%, var(--border) 62%);
    background: color-mix(in srgb, var(--success) 11%, var(--surface) 89%);
    color: color-mix(in srgb, var(--success) 70%, var(--text-main) 30%);
    font-weight: 700;
    font-size: 12px;
}

#stock-mod .inv-demold-packaging-check {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 10px 12px;
    line-height: 1.45;
}

#stock-mod .inv-pack-deficit-top {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 9px;
}

#stock-mod .inv-pack-deficit-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border) 65%);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface) 92%);
    color: color-mix(in srgb, var(--danger) 72%, var(--text-main) 28%);
    font-size: 11px;
    font-weight: 600;
}

#stock-mod .inv-pack-check-title {
    font-weight: 700;
    margin-bottom: 8px;
}

#stock-mod .inv-pack-check-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#stock-mod .inv-pack-check-table th,
#stock-mod .inv-pack-check-table td {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
    padding: 6px 4px;
}

#stock-mod .inv-pack-check-table th {
    color: var(--text-muted);
    font-weight: 600;
    text-align: left;
}

#stock-mod .inv-pack-check-table td.inv-pack-col-num {
    text-align: right;
    white-space: nowrap;
}

#stock-mod .inv-pack-status-ok {
    color: var(--success);
    font-weight: 600;
}

#stock-mod .inv-pack-status-bad {
    color: var(--danger);
    font-weight: 700;
}

#stock-mod .inv-history-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    border-radius: 0 0 8px 8px;
}

#stock-mod #drying-history-table tr td {
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 1.32;
}

#stock-mod #drying-history-table tr {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
}

#stock-mod .inv-btn-demold-enterprise {
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border) 45%, var(--primary) 55%);
    background: color-mix(in srgb, var(--surface) 70%, var(--primary) 30%);
    color: var(--primary-contrast, #fff);
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.14s ease;
}

#stock-mod .inv-btn-demold-enterprise:hover {
    background: color-mix(in srgb, var(--surface) 55%, var(--primary) 45%);
    border-color: color-mix(in srgb, var(--border) 35%, var(--primary) 65%);
}

#stock-mod .inv-btn-demold-enterprise:active {
    transform: translateY(0.5px);
}

#stock-mod .inv-btn-demold-enterprise.has-deficit {
    border-color: color-mix(in srgb, var(--danger) 65%, var(--border) 35%);
    background: color-mix(in srgb, var(--danger) 18%, var(--surface) 82%);
    color: color-mix(in srgb, var(--danger) 78%, var(--text-main) 22%);
}

#stock-mod .inv-demold-deficit-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger);
    margin-left: 6px;
    vertical-align: middle;
}

#stock-mod .inv-btn-grade2-kit {
    border-color: color-mix(in srgb, var(--warning) 55%, var(--border) 45%);
    color: color-mix(in srgb, var(--warning-text) 70%, var(--text-main) 30%);
    background: color-mix(in srgb, var(--warning-bg) 65%, var(--surface) 35%);
}

#stock-mod .inv-btn-grade2-kit:hover {
    border-color: color-mix(in srgb, var(--warning) 70%, var(--border) 30%);
}

#stock-mod .inv-grade2-kit-box {
    margin-top: 8px;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--surface-alt);
}

#stock-mod .inv-grade2-kit-list {
    margin-top: 8px;
}

#stock-mod .inv-grade2-kit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent 15%);
}

@media (max-width: 820px) {
    #stock-mod .inv-reserve-controls {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
    #stock-mod .inv-history-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12px !important;
    }
    /* Скрываем навигацию, сайдбар, модалки, кнопки действий */
    .sidebar,
    .top-header,
    .navbar,
    .modal,
    .modal-backdrop,
    .toast-container,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-action,
    #stock-mod .inv-filter-panel,
    #stock-mod #inventory-search,
    #stock-mod .card-header .btn,
    #stock-mod .inv-actions-cell,
    #stock-mod .inv-toolbar,
    #stock-mod .table-container .flex-between,
    .inv-toolbar,
    .inv-toolbar-btn,
    .filter-panel,
    .filter-btn,
    .sales-action-bar,
    .fab-button,
    [data-action],
    [onclick] {
        display: none !important;
    }
    /* Модуль на всю ширину */
    .module,
    #stock-mod.module {
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    /* Карточки без теней */
    .card,
    #stock-mod .inv-stock-card {
        box-shadow: none !important;
        border: none !important;
        background: #fff !important;
    }
    /* Таблица на 100% */
    .table-modern,
    #stock-mod table {
        width: 100% !important;
        background: #fff !important;
        color: #000 !important;
    }
    .table-modern th,
    .table-modern td,
    #stock-mod th,
    #stock-mod td {
        border: 1px solid #ccc !important;
        color: #000 !important;
        background: #fff !important;
        padding: 6px 8px !important;
    }
    .table-modern th {
        font-weight: 700 !important;
        background: #f0f0f0 !important;
    }
    /* Ссылки — чёрным */
    a {
        color: #000 !important;
        text-decoration: none !important;
    }
    /* Точная цветопередача */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

@media (max-width: 1200px) {
    .inv-toolbar {
        align-items: flex-start;
        justify-content: flex-end;
        row-gap: 10px;
        column-gap: 8px;
    }

    .inv-toolbar-date {
        order: 1;
    }

    #btn-audit-mode {
        order: 2;
    }

    #audit-controls {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-end;
    }

    .inv-toolbar .hide-in-audit {
        order: 4;
    }
}

/* ==========================================================================
   22. ПРОДАЖИ И ИНВОЙСЫ
   ========================================================================== */
.sales-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.sales-tab-btn {
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    font-weight: bold;
    color: var(--text-muted);
    transition: 0.2s;
    white-space: nowrap;
}

.sales-tab-btn:hover {
    background: var(--surface-alt);
}

.sales-tab-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.sales-tab-content {
    display: none;
}

.sales-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.sales-hidden {
    display: none !important;
}

/* Checkout Grid — vertical single column */
.sales-checkout-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sales-two-cols {
    grid-template-columns: 1fr 1fr;
}

/* ─── Панель подбора товара (Кол-во / Цена / Итог | Кнопки) ─── */
.sales-qty-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 14px 24px;
    background: var(--surface-alt);
    border-radius: 10px;
    border: 1px solid var(--border);
    flex-wrap: wrap;
}

.sales-qty-fields {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.sales-qty-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sales-qty-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.sales-qty-input {
    width: 100px;
    height: 38px;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-main);
    font-size: 14px;
    padding: 0 8px;
}

.sales-price-input {
    width: 120px;
    height: 38px;
    text-align: right;
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-main);
    font-size: 14px;
    padding: 0 10px;
}

.sales-qty-input:focus,
.sales-price-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.15);
}

.sales-qty-meta {
    line-height: 1.3;
}

.sales-qty-unit {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: var(--primary);
}

.sales-qty-stock {
    font-size: 11px;
    color: var(--text-muted);
}

.sales-qty-currency {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.sales-live-preview-pill {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sales-live-cost {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary);
    white-space: nowrap;
}

.sales-qty-separator {
    width: 1px;
    align-self: stretch;
    min-height: 38px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 4px;
}

.sales-qty-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.sales-btn-calc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-width: 170px;
    padding: 0 20px;
    font-size: 13px;
}

.sales-btn-add {
    height: 38px;
    min-width: 200px;
    padding: 0 30px;
    font-weight: 700;
    font-size: 14px;
}
/* --- 22.4 Стабильное выпадающее меню --- */
.sales-dropdown {
    position: relative;
    display: inline-block;
}

.sales-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--surface);
    min-width: 240px;
    /* Немного расширил для удобства */
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    /* Подняли выше всех элементов */
    border-radius: 8px;
    top: 100%;
    /* Плотно прижимаем к кнопке */
    right: 0;
    border: 1px solid var(--border);
    padding: 5px 0;
    /* Внутренний отступ для красоты */
}

/* 🚀 "Невидимый мост" — устраняет закрытие при движении мыши в зазоре */
.sales-dropdown-content::before {
    content: "";
    position: absolute;
    top: -15px;
    /* Заходит под основную кнопку на 15px */
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

/* Стили кнопок внутри меню (исправляет сжатый вид на скриншоте) */
.sales-dropdown-content button {
    color: var(--text-main);
    padding: 10px 16px;
    display: flex;
    /* Чтобы иконка и текст были в ряд */
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}

.sales-dropdown-content button:hover {
    background-color: var(--surface-hover);
    color: var(--primary);
}

/* Показ при наведении */
.sales-dropdown:hover .sales-dropdown-content {
    display: block;
}

/* Kanban Styles Extension */
.sales-kanban-board {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.kanban-column {
    background: var(--surface-alt);
    border-radius: 10px;
    min-width: 320px;
    flex: 1;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.kanban-column-title {
    margin: 0;
    padding: 15px;
    background: var(--surface);
    border-bottom: 2px solid var(--border);
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px 10px 0 0;
}

.kanban-count {
    background: var(--border);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
}

.kanban-items-container {
    padding: 15px;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- 22.5 Компактная панель иконок (Action Bar) --- */
.sales-input-group {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: stretch;
}

.sales-input-select-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.sales-action-bar {
    flex: 0 0 auto;
    width: max-content;
    display: flex;
    align-items: stretch;
    /* ⬅️ ДОБАВЛЕНО: Растягиваем дочерние элементы по вертикали */
    gap: 2px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
}

.sales-action-bar .btn-action {
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 0 8px;
    margin: 0;
    height: 100%;
    /* ⬅️ ДОБАВЛЕНО: Кнопка забирает всю доступную высоту */
    min-height: 36px;
    /* ⬅️ ДОБАВЛЕНО: Страховка от схлопывания в Safari/Firefox */
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-action-bar .btn-action:hover {
    background: var(--surface-hover);
}

.sales-action-divider {
    width: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* ==========================================================================
   23. КАДРЫ И ЗАРПЛАТА (HR & Payroll Module)
   ========================================================================== */

/* --- 23.1 Аккордеоны (цветная левая полоса по типу) --- */
.hr-accordion-success {
    border-left: 4px solid var(--success);
}

.hr-accordion-danger {
    border-left: 4px solid var(--danger);
}

.hr-accordion-primary {
    border-left: 4px solid var(--primary);
}

.hr-accordion-warning {
    border-left: 4px solid var(--warning);
}

/* --- 23.2 Панель инструментов (фильтры и кнопки) --- */
.hr-toolbar-panel {
    padding: 10px;
    border-radius: 8px;
}

.hr-toolbar-filters {
    max-width: 600px;
}

/* --- 23.3 Выпадающий список отдела --- */
.hr-dep-select {
    width: 150px;
}

/* --- 23.4 Колонка действий (фиксированная ширина) --- */
.hr-action-col {
    width: 80px;
}

/* --- 23.5 Колонка сотрудника в ведомости --- */
.hr-employee-col {
    width: 20%;
}

/* --- 23.6 Поле выбора месяца в табеле --- */
.hr-month-picker {
    width: 160px;
    font-weight: bold;
}

/* --- 23.7 Поиск по табелю (ограниченная ширина) --- */
.hr-ts-search {
    max-width: 250px;
}

/* --- 23.8 Подсказка-легенда кликов по ячейкам --- */
.hr-hint-text {
    font-size: 11px;
    max-width: 120px;
    line-height: 1.2;
    color: var(--text-muted);
}

/* --- 23.9 Контейнер табеля (горизонтальный скролл) --- */
.hr-timesheet-wrapper {
    overflow-x: auto;
}

/* --- 23.10 Таблица табеля (фиксированная мин. ширина для горизонтального скролла) --- */
.hr-timesheet-table {
    min-width: 1200px;
}

/* --- 23.11 Ячейка загрузки (заглушка) --- */
.hr-loading-cell {
    padding: 20px;
}

/* --- 23.12 Секция уволенных сотрудников (фон-предупреждение) --- */
.hr-fired-section {
    background: var(--danger-bg);
}

/* --- 23.13 Таблица табеля: заголовки и ячейки --- */
.hr-ts-sticky-name {
    position: sticky;
    top: 0;
    left: 0;
    background: var(--surface-alt);
    z-index: 30;
    border-right: 2px solid var(--border);
    min-width: 250px;
    vertical-align: middle;
}

.hr-ts-day-th {
    position: sticky;
    top: 0;
    z-index: 20;
    text-align: center;
    padding: 6px 2px;
    min-width: 35px;
    border-bottom: 2px solid var(--border);
    background: var(--surface-alt);
}

.hr-ts-day-name {
    font-size: 10px;
    opacity: 0.8;
    font-weight: normal;
    margin-bottom: 3px;
}

.hr-ts-weekend-head {
    color: var(--danger);
}

.hr-ts-today-head {
    color: var(--primary);
    font-weight: 800;
    border-bottom: 2px solid var(--primary) !important;
}

.hr-ts-summary-head {
    position: sticky;
    top: 0;
    z-index: 20;
    text-align: right;
    background: var(--surface-alt);
    border-left: 2px solid var(--border);
    vertical-align: middle;
}

.hr-ts-dept-row {
    background: var(--surface-hover);
    font-weight: bold;
    padding: 8px 15px;
    color: var(--text-main);
}

/* --- 23.14 Sticky-ячейка имени сотрудника в табеле --- */
.hr-ts-sticky-cell {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 10;
    border-right: 2px solid var(--border);
    padding: 8px 15px;
}

/* --- 23.15 Ячейка дня табеля --- */
.hr-ts-cell-td {
    padding: 4px;
    border-bottom: 1px solid var(--border);
}

.hr-weekend-bg {
    background: var(--surface-alt);
}

.hr-today-cell {
    border-left: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
    background: var(--surface-hover);
}

.hr-ts-cell-wrap {
    position: relative;
    width: max-content;
    margin: 0 auto;
}

.hr-fired-faded {
    opacity: 0.4;
}

.hr-cell-active {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.hr-cell-locked {
    cursor: not-allowed;
}

/* --- 23.16 Индикаторные точки (премия/штраф) в ячейках --- */
.hr-ts-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.hr-ts-dot-bonus {
    top: -2px;
    right: -2px;
    background: var(--success);
}

.hr-ts-dot-penalty {
    bottom: -2px;
    right: -2px;
    background: var(--danger);
}

/* --- 23.17 Итоговая ячейка табеля (справа) --- */
.hr-ts-summary-cell {
    text-align: right;
    padding: 8px 12px;
    background: var(--surface-alt);
    border-left: 2px solid var(--border);
}

/* --- 23.18 Строка выплат: статусы и ячейки --- */
.hr-payout-positive {
    background: var(--success-bg);
    color: var(--success-text);
}

.hr-payout-negative {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.hr-adj-cell {
    cursor: pointer;
    background: var(--warning-bg);
}

.hr-adj-btn {
    padding: 4px;
    font-size: 12px;
}

.hr-pay-btn {
    padding: 6px 12px;
    font-size: 12px;
}

/* --- 23.19 Кнопки действий в строках таблиц --- */
.hr-row-btn {
    padding: 4px 8px;
    font-size: 12px;
    display: flex;
    justify-content: center;
}

.hr-fired-row {
    opacity: 0.8;
}

/* --- 23.20 Бейдж отдела в таблице сотрудников --- */
.hr-dept-badge {
    background: var(--surface-hover);
    color: var(--text-main);
    font-size: 11px;
    border: 1px solid var(--border);
}

/* --- 23.21 Поле налогов в подвале таблицы выплат --- */
.hr-taxes-input {
    width: 120px;
    text-align: right;
}

/* --- 23.22 Форма сотрудника: выделенные секции --- */
.hr-form-cash-block {
    background: var(--success-bg);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed var(--success);
    grid-column: span 2;
}

.hr-form-official-block {
    background: var(--surface-alt);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed var(--text-muted);
    grid-column: span 2;
}

.hr-form-status-block {
    background: var(--danger-bg);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed var(--danger);
    grid-column: span 2;
}

.hr-form-balance-block {
    background: var(--surface-hover);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed var(--primary);
    grid-column: span 2;
}

.hr-form-live-balance {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 13px;
}

/* --- 23.23 Модал выдачи зарплаты --- */
.hr-payout-hero {
    background: var(--success-bg);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--success-border);
    margin-bottom: 20px;
    text-align: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.hr-payout-hero-label {
    font-size: 13px;
    color: var(--success-text);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}

.hr-payout-hero-amount {
    font-size: 36px;
    font-weight: 900;
    color: var(--success);
    margin: 10px 0;
}

.hr-debt-block {
    background: var(--warning-bg);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--warning-border);
    margin-bottom: 15px;
}

/* --- 23.24 Сдельная ЗП: модал начисления --- */
.hr-piece-info-block {
    background: var(--bg-main);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.hr-piece-fund-label {
    font-size: 13px;
    color: var(--primary);
    font-weight: bold;
}

.hr-piece-fund-value {
    color: var(--primary);
    font-size: 24px;
}

.hr-piece-crew-scroll {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.hr-piece-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

/* --- 23.25 Adj modal --- */
.hr-adj-history-block {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.hr-adj-new-block {
    border: 1px dashed var(--warning);
    padding: 15px;
    border-radius: 8px;
    background: var(--warning-bg);
}

/* --- 23.26 Доп. элементы --- */
.hr-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.position-sticky-top {
    position: sticky;
    top: 0;
}

.z-10 {
    z-index: 10;
}

/* ============================================================
   24. СПРАВОЧНИКИ (REFERENCES)
   ============================================================ */

/* --- 24.1 Панель фильтров: сетка 2fr 1fr 1fr --- */
.dict-filter-grid {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.dict-filter-grid > .form-group {
    margin-bottom: 0;
    min-width: 0;
}

.dict-filter-grid > .form-group:first-child {
    flex: 2 1 0;
}

.dict-filter-grid > .form-group:nth-child(2),
.dict-filter-grid > .form-group:nth-child(3) {
    flex: 1 1 0;
}

@media (max-width: 768px) {
    .dict-filter-grid {
        flex-direction: column;
    }

    .dict-filter-grid > .form-group:first-child,
    .dict-filter-grid > .form-group:nth-child(2),
    .dict-filter-grid > .form-group:nth-child(3) {
        flex: 1 1 auto;
    }
}

/* --- 24.2 Панель формы (карточка) с синей левой границей. Видимость: d-none в HTML + classList в references.js --- */
.dict-form-panel {
    border-left: 4px solid var(--primary);
    position: relative;
}

/* --- 24.3 Поле артикула — подсветка основным цветом --- */
.dict-article-input {
    border-color: var(--primary);
    background-color: var(--bg-main);
}

/* --- 24.4 Обёртка datalist-инпута с кнопкой раскрытия --- */
.dict-datalist-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dict-datalist-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #64748b;
    font-size: 12px;
    padding: 5px;
}

/* --- 24.5 Блок сдельной ставки (зелёный дашборд) --- */
.dict-piece-rate-block {
    background: var(--surface-bg);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed var(--success);
}

/* --- 24.6 Блок архитектуры составов (серый) --- */
.dict-mix-block {
    background: var(--surface-alt);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* --- 24.7 Сетка 2-колонки состава (шаблоны слоёв) --- */
.dict-mix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* --- 24.8 Кнопка сохранения позиции --- */
.dict-save-btn {
    height: 42px;
}

/* --- 24.9 Колонки таблицы Справочника --- */
.dict-col-id {
    width: 5%;
}

.dict-col-type {
    width: 8%;
}

.dict-col-cat {
    width: 15%;
}

.dict-col-article {
    width: 12%;
}

.dict-col-name {
    width: 30%;
}

.dict-col-unit {
    width: 10%;
}

.dict-col-price {
    width: 10%;
}

.dict-col-actions {
    width: 10%;
}

/* --- 24.10 Дополнительные утилиты, специфичные для модуля --- */
.mb-0 {
    margin-bottom: 0;
}

.mb-5 {
    margin-bottom: 5px;
}

.line-height-12 {
    line-height: 1.2;
}

/* --- 24.11 Строка таблицы --- */
.ref-table-row {
    transition: background 0.15s;
}

.ref-table-row:hover {
    background: var(--surface-hover);
}

/* --- 24.12 Ячейка артикула (моноширинный шрифт) --- */
.dict-article-cell {
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    color: var(--primary);
}

/* --- 24.13 Бейдж «Продукция» --- */
.badge-product {
    background: var(--primary-bg, rgba(59, 130, 246, 0.12));
    color: var(--primary);
    border: 1px solid var(--primary);
}

/* --- 24.14 Бейдж «Сырье / Материал» --- */
.badge-material {
    background: var(--surface-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* --- 24.15 Кнопки действий в строке таблицы --- */
.dict-row-btn {
    padding: 4px 8px;
    font-size: 12px;
}

/* --- 24.16 Утилиты, специфичные для модуля --- */
.text-border {
    color: var(--border);
}

.font-normal {
    font-weight: normal;
}

.mr-5 {
    margin-right: 5px;
}

/* ============================================================
   25. ЗАКУПКИ И ПРИЕМКА (PURCHASE)
   ============================================================ */

/* --- 25.0 Сетка формы закупки (6 колонок) --- */
.pur-form-grid {
    grid-template-columns: repeat(6, 1fr);
}

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

/* --- 25.1 Главная панель прихода --- */
.pur-main-panel {
    border-left: 4px solid var(--primary);
}

/* --- 25.2 Информер по материалу (остатки) --- */
.pur-material-infobox {
    margin-top: 6px;
    font-size: 12px;
    padding: 6px 10px;
    background: var(--surface-alt);
    border-radius: 6px;
    border: 1px dashed var(--border);
}

/* --- 25.3 Поиск поставщика (рядом кнопка +) --- */
.pur-supplier-flex {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.pur-supplier-btn {
    padding: 0 18px;
    font-weight: bold;
    font-size: 16px;
    border-color: var(--border);
    color: var(--primary);
}

/* --- 25.4 Блок с чекбоксом доставки --- */
.pur-delivery-toggle-wrap {
    margin-top: 5px;
    padding-top: 15px;
    border-top: 1px dashed var(--border);
}

.pur-delivery-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: bold;
    color: var(--primary);
    margin: 0;
}

.pur-delivery-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* --- 25.5 Поля доставки --- */
.pur-delivery-fields-grid {
    grid-column: span 3;
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    gap: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 5px;
}

/* --- 25.6 Финальный итог (Итого за сырье) --- */
.pur-summary-box {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: var(--surface-alt);
    border-radius: 8px;
    border: 1px dashed var(--border);
}

.pur-total-input {
    width: 140px;
    margin: 0;
    text-align: right;
    font-size: 18px;
    font-weight: 900;
    color: var(--primary);
}

/* --- 25.7 Кнопки формы --- */
.pur-submit-flex {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.pur-btn-ok {
    padding: 14px;
    font-weight: bold;
}

.pur-btn-cancel {
    padding: 14px;
    border-color: var(--danger);
    color: var(--danger);
    font-weight: bold;
}

/* --- 25.8 История приходов (шапка) --- */
.pur-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.pur-search-wrap {
    position: relative;
    width: 350px;
}

.pur-search-icon {
    position: absolute;
    left: 12px;
    top: 10px;
    opacity: 0.5;
}

.pur-search-input {
    padding-left: 35px;
    margin: 0;
    border-radius: 20px;
}

/* --- 25.9 Таблица истории: Итоги за день (футер) --- */
.pur-daily-summary-foot {
    background: var(--surface-alt);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.pur-daily-summary-row td {
    padding: 15px 10px;
}

.pur-th-date {
    color: var(--primary);
}

.pur-date-input {
    width: 140px;
    cursor: pointer;
}

/* --- 25.10 Утилиты --- */
.mb-2 {
    margin-bottom: 2px;
}

.min-w-0 {
    min-width: 0;
}

.d-block {
    display: block;
}

.w-25 {
    width: 25%;
}

.w-10 {
    width: 10%;
}

/* --- 25.11 UI-утилиты для JS (Flatpickr, Модалки, Таблицы) --- */
.pur-active-date-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--success);
    border-radius: 50%;
}

.pur-modal-details-box {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 6px;
    border: 1px dashed var(--border);
}

.pur-modal-total-box {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}

.pur-table-row:hover {
    background: var(--surface-hover);
}

.pur-row-btn {
    padding: 4px 8px;
    font-size: 14px;
}

.white-space-nowrap {
    white-space: nowrap;
}

.border-border {
    border-color: var(--border);
}

/* ============================================================
   26. ДОКУМЕНТЫ И РЕЕСТР (DOCS REGISTRY)
   ============================================================ */

/* --- 26.1 Панель фильтров реестра --- */
.docs-filter-panel {
    padding: 10px;
    border-radius: 8px;
    flex-wrap: wrap;
    gap: 10px;
}

.docs-filter-group {
    gap: 10px;
    flex-grow: 1;
}

/* --- 26.2 Элементы фильтра --- */
.docs-client-select {
    min-width: 250px;
}

.docs-apply-btn {
    padding: 8px 15px;
}

/* --- 26.3 Опции (чекбокс) --- */
.docs-option-wrap {
    display: inline-block;
    margin-left: 15px;
    margin-bottom: 0;
}

.docs-option-label {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- 26.4 Таблица реестра: Ширины колонок --- */
.docs-col-check {
    width: 40px;
    text-align: center;
}

.docs-col-date {
    width: 140px;
}

.docs-col-docnum {
    width: 150px;
}

.docs-col-total {
    min-width: 160px;
}

.docs-col-author {
    min-width: 180px;
}

.docs-col-status {
    min-width: 140px;
}

.docs-col-actions {
    width: 45px;
}

/* --- 26.5 Стили рендера таблицы JS --- */
.docs-tbl-row {
    transition: background 0.15s;
}

.docs-tbl-row:hover {
    background: var(--surface-hover);
}

.docs-locked-icon {
    cursor: help;
}

.docs-locked-row {
    background-color: var(--surface-alt);
    color: var(--text-muted);
}

.docs-cancelled-row {
    color: #94a3b8;
    text-decoration: line-through;
    opacity: 0.7;
}

.docs-delete-btn {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 14px;
}
.sales-client-card { background: var(--bg-surface); transition: all 0.2s ease; }
.sales-client-card:hover { border-color: var(--primary) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.client-stat-box { flex: 1; min-width: 120px; }
.flex-align-end { display: flex; align-items: flex-end; justify-content: flex-end; }

/* ==========================================================================
   DASHBOARD REFACTORING (AUDIT-011) 
   ========================================================================== */

/* Utility: Layout */
.w-full { width: 100%; }
.m-0 { margin: 0; }
.mr-10 { margin-right: 10px; }
.p-0 { padding: 0; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.h-26 { height: 26px; }
.font-600 { font-weight: 600; }
.block { display: block; }
.mb-10 { margin-bottom: 10px; }

/* Grid Components */
.dash-form-grid-2 {
    grid-template-columns: 1fr 1fr;
}

/* Accordion States */
.dash-acc-icon {
    user-select: none;
}
.dash-acc-body {
    padding: 0 15px 15px 15px;
    border-top: 1px dashed var(--border);
}
.dash-widget-list {
    font-size: 13px;
    color: var(--text-muted);
}
.dash-widget-list-tall {
    min-height: 50px;
}

/* Drilldown Specific */
.dash-drill-container-wrap {
    overflow: hidden;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
}
.dashboard-tabs-content {
    display: flex;
    width: 300%;
    transition: transform 0.4s ease-in-out, max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    align-items: flex-start;
    overflow: hidden;
}
.dash-tab-panel {
    width: 33.333%;
    box-sizing: border-box;
}
.dash-tab-panel-1 { padding-right: 20px; }
.dash-tab-panel-2 { padding-right: 10px; padding-left: 10px; }
.dash-tab-panel-3 { padding-left: 20px; }

/* Dashboard Typography & Decorations */
.dash-financial-header {
    text-transform: uppercase;
}
.dash-info-badge {
    background: var(--info-bg);
    border-radius: 4px;
}
.dash-heavy-amount {
    font-weight: 900;
    line-height: 1;
}

/* Inputs */
.dash-period-input { padding: 4px 6px; font-size: 13px; border-radius: 6px; height: 32px; }
.dash-period-input-date { width: 130px; }


/* ==========================================================================
   PRODUCTION & RECIPES REFACTORING (AUDIT-011) 
   ========================================================================== */

/* Layout & Utils */
.w-120 { width: 120px; }
.w-140 { width: 140px; }
.w-60 { width: 60px; }
.w-80 { width: 80px; }
.h-auto { height: auto; }
.w-12p { width: 12%; }
.w-13p { width: 13%; }
.w-15p { width: 15%; }
.w-30p { width: 30%; }
.italic { font-style: italic; }
.table-footer { display: table-footer-group; }
.table-cell { display: table-cell; }

/* Production Specific */
.prod-chart-bar-warning { border-color: var(--warning-text); color: var(--warning-text); }
.prod-chart-bar-primary { border-color: var(--primary); }
.prod-status-info { font-size: 16px; font-weight: bold; white-space: nowrap; margin-right: 5px; }
.prod-total-table-row { font-weight: bold; text-align: right; }
.prod-total-table-row td { border-bottom: 2px solid var(--border); }
.prod-print-col-hidden { display: none; width: 12%; } 

/* Recipes Specific */
.rec-filter-container { display: flex; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 18px; }
.rec-primary-outline { border-color: var(--primary); color: var(--primary); }
.rec-action-btn { font-weight: 600; border-radius: 8px; padding: 10px 20px; }
.rec-grid-header { grid-template-columns: minmax(300px, 1fr) minmax(600px, 2fr); align-items: start; gap: 20px; }
.rec-section-title { border-left: 3px solid color-mix(in srgb, var(--primary) 70%, var(--border) 30%); font-size: 16px; }
.rec-dash-box { background: var(--surface); padding: 12px; border-radius: 8px; border: 1px dashed var(--border); margin-top: 15px; }
.rec-step-header { font-size: 15px; font-weight: bold; padding-top: 10px; border-top: 1px dashed var(--border); }
.rec-step-footer { align-items: center; padding-bottom: 20px; border-bottom: 1px dashed var(--border); }
.rec-badge { padding: 6px 12px; font-size: 13px; font-weight: bold; border-radius: 6px; }
.rec-cost-panel { margin-top: 15px; margin-bottom: 25px; background: var(--surface-alt); padding: 20px; border-radius: 8px; }
.rec-cost-param { display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap; }
#recipe-mod .card > h3 {
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 14px;
}
#recipe-mod #recipe-editor-area #recipe-editor-title {
    margin-bottom: 0;
    line-height: 1.25;
}
#recipe-mod .rec-page-head h2 {
    margin-bottom: 8px;
}
#recipe-mod .rec-main-tabs {
    max-width: min(100%, 800px);
    margin-bottom: 0;
}
#recipe-mod .rec-main-tab {
    flex: 1 1 220px;
    min-height: 44px;
    font-weight: 600;
    border-radius: 10px;
}
#recipe-mod .recipe-mode-sheet {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border) 86%, var(--primary) 14%);
    background: color-mix(in srgb, var(--surface-alt) 92%, var(--primary) 8%);
}
body.dark-theme #recipe-mod .recipe-mode-sheet {
    background: color-mix(in srgb, var(--surface-alt) 90%, var(--primary) 10%);
}
#recipe-mod .rec-sheet-toolbar {
    gap: 10px;
}
#recipe-mod .rec-sheet-toolbar .btn {
    font-weight: 600;
}
#recipe-mod .rec-sheet-lead {
    max-width: 85ch;
    line-height: 1.45;
}
#recipe-mod .rec-page-subtitle {
    color: color-mix(in srgb, var(--text-muted) 88%, var(--text-main) 12%);
    max-width: 72ch;
}
#recipe-mod .rec-top-mass-apply-btn {
    padding: 7px 12px;
    min-height: 34px;
    font-size: 13px;
    border-color: color-mix(in srgb, var(--border) 75%, var(--primary) 25%);
    color: var(--text-muted);
    background: var(--surface);
}
#recipe-mod .rec-top-mass-apply-btn:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border) 50%);
}
#recipe-mod .rec-summary-card {
    border: 1px solid color-mix(in srgb, var(--border) 85%, var(--primary) 15%);
}
#recipe-mod .rec-editor-toolbar {
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
}
#recipe-mod .rec-editor-toolbar .btn {
    min-height: 40px;
    border-radius: 8px;
    font-weight: 600;
}
#recipe-mod .rec-primary-action {
    min-width: 132px;
}
#recipe-mod .rec-secondary-action {
    color: color-mix(in srgb, var(--text-main) 75%, var(--primary) 25%);
    border-color: color-mix(in srgb, var(--border) 55%, var(--primary) 45%);
    background: var(--surface);
}
#recipe-mod .rec-secondary-action:hover {
    border-color: color-mix(in srgb, var(--primary) 65%, var(--border) 35%);
    background: color-mix(in srgb, var(--surface) 70%, var(--primary) 6%);
}
#recipe-mod .rec-add-toggle-btn {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border) 55%);
    color: var(--primary);
    font-weight: 700;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 75%, var(--surface-alt) 25%);
    transform: translateY(0);
    transition: border-color 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
#recipe-mod .rec-add-toggle-btn:hover,
#recipe-mod .rec-add-toggle-btn.is-open {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--surface) 40%, var(--primary) 8%);
}
#recipe-mod .rec-add-toggle-btn:active {
    transform: translateY(0.5px) scale(0.998);
}
#recipe-mod .rec-add-toggle-icon {
    font-size: 12px;
    color: var(--text-muted);
}
#recipe-mod .rec-add-panel {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                margin-top 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
#recipe-mod .rec-add-panel.is-open {
    margin-top: 15px;
    max-height: 260px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#recipe-mod .rec-add-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.35fr) minmax(180px, 1fr) minmax(120px, 0.72fr) 96px;
    gap: 12px;
    align-items: end;
}
#recipe-mod .rec-add-row .form-group {
    min-width: 0;
}
#recipe-mod .rec-add-row .input-modern {
    width: 100%;
}
#recipe-mod .rec-add-submit-btn {
    width: 96px;
    min-width: 96px;
    height: 42px;
    white-space: nowrap;
    justify-self: end;
    align-self: end;
    padding-left: 10px;
    padding-right: 10px;
}

#recipe-mod .rec-add-col-material .ts-wrapper,
#recipe-mod .rec-add-col-material .ts-wrapper .ts-control {
    width: 100%;
}
.rec-table-input { width: 80px; text-align: right; padding: 6px 10px; font-weight: bold; color: var(--primary); }
.rec-delete-btn { padding: 4px 8px; font-size: 13px; color: var(--danger); border-color: var(--danger); }
.rec-modal-content { max-height: 480px; overflow-y: auto; padding-right: 10px; }
.rec-acc-item { margin-bottom: 15px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.rec-acc-header { background: var(--surface-alt); padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.rec-acc-body { padding: 15px; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--surface); }
.rec-danger-btn { background: var(--danger); border-color: var(--danger); color: white; }
.rec-guidance-box { font-size: 13px; margin-top: 15px; background: var(--surface-alt); padding: 15px 30px; border-radius: 6px; color: var(--text-main); max-height: 140px; overflow-y: auto; border: 1px dashed var(--border); }
.rec-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rec-dropdown-list { max-height: 250px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.rec-cell-padding { padding: 12px 15px; }
.rec-cell-right { text-align: right; }
.rec-cell-center { text-align: center; }
.rec-layer-select { min-width: 150px; }
.rec-layer-header-cell { padding: 10px 15px; background: var(--surface-alt); font-weight: 700; }
.rec-inline-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.rec-inline-label-strong { font-weight: 700; }
.rec-inline-label-success { font-size: 13px; font-weight: 700; margin: 0; color: var(--success); }
.rec-checkbox-md { width: 16px; height: 16px; }
.rec-checkbox-sm { width: 15px; height: 15px; }
.rec-btn-wide { padding: 0 20px; }
.rec-btn-min-140 { min-width: 140px; }

/* Умный аудит рецептур — карточки групп (Экран 1) */
.rec-audit-group-card {
    border-left: 4px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.rec-audit-card--red { border-left-color: var(--danger); }
.rec-audit-card--yellow { border-left-color: color-mix(in srgb, var(--warning) 75%, var(--border) 25%); }
.rec-audit-card--green { border-left-color: var(--success); }
.rec-audit-screen-1 { padding-right: 6px; }

.rec-audit-screen-2-wrap {
    position: relative;
}
.rec-audit-screen-2-inner {
    max-height: min(62vh, 560px);
    overflow-y: auto;
    padding-right: 6px;
}
.rec-audit-category-filter-wrap .rec-filter-label,
.rec-audit-matrix-filter-wrap .rec-filter-label {
    display: block;
    margin-bottom: 4px;
}
.rec-audit-matrix-select {
    padding: 6px 10px;
    max-width: 100%;
}
.rec-audit-matrix-check-list {
    max-height: min(28vh, 200px);
    overflow-y: auto;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-alt) 40%, transparent 60%);
}
.rec-audit-two-col {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.35fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 720px) {
    .rec-audit-two-col {
        grid-template-columns: 1fr;
    }
}
.rec-audit-col-left .rec-audit-prow-list {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    background: color-mix(in srgb, var(--surface-alt) 55%, transparent 45%);
    max-height: min(52vh, 480px);
    overflow-y: auto;
}
.rec-audit-prow {
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--card-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rec-audit-prow:hover {
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border) 75%);
}
.rec-audit-prow--active {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border) 45%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent 88%);
}
.rec-audit-prow-name,
.text-ellipsis-single {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.rec-audit-prow-make-ref {
    margin-top: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.rec-audit-prow:hover .rec-audit-prow-make-ref,
.rec-audit-prow:focus-within .rec-audit-prow-make-ref {
    opacity: 1;
}
.rec-audit-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
}
.rec-audit-badge--ref {
    background: color-mix(in srgb, var(--primary) 14%, transparent 86%);
    color: var(--primary);
}

.rec-audit-layer-card--ok {
    border-left: 4px solid var(--success);
}
.rec-audit-layer-card--bad {
    border-left: 4px solid var(--danger);
}
.rec-audit-layer-card--pig {
    border-left: 4px solid color-mix(in srgb, var(--success) 70%, var(--warning) 30%);
}

.rec-audit-layer-breakdown-btn {
    border: none;
    background: transparent;
    padding: 2px 6px;
    margin: 0 -2px;
    cursor: pointer;
    color: var(--danger);
    border-radius: 6px;
    line-height: 1;
}
.rec-audit-layer-breakdown-btn:hover {
    background: color-mix(in srgb, var(--danger) 14%, transparent 86%);
}
.rec-audit-layer-breakdown-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.rec-audit-layer-break-scroll {
    max-height: min(50vh, 420px);
    overflow-y: auto;
    padding-right: 6px;
}

.rec-audit-diff-list {
    color: var(--text-main);
    line-height: 1.45;
}
.rec-audit-pigment-note {
    background: color-mix(in srgb, var(--success) 8%, transparent 92%);
    border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border) 72%);
}

/* fixed + высокий z-index: не перекрывается overflow modal-body и клики доходят до чекбоксов */
.rec-audit-sync-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
    padding-top: max(12px, 8vh);
    background: color-mix(in srgb, var(--surface) 20%, rgba(0, 0, 0, 0.45) 80%);
    backdrop-filter: blur(2px);
    pointer-events: auto;
}
.rec-audit-sync-dialog {
    position: relative;
    z-index: 10051;
    width: min(440px, 100%);
    max-height: min(72vh, 560px);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
}
.rec-audit-sync-native-cb {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary, #2563eb);
}
.rec-audit-sync-products {
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    pointer-events: auto;
}
.rec-audit-sync-layers {
    pointer-events: auto;
}

.rec-panel { background: var(--surface-alt); padding: 15px; border-radius: 8px; }
.rec-panel-compact { padding: 12px; }
.rec-panel-title { margin-top: 0; margin-bottom: 10px; font-weight: 600; }
.rec-help-text { font-size: 13px; color: var(--text-muted); }

.rec-compare-workbench .rec-bom-workflow-details summary {
    cursor: pointer;
    user-select: none;
    color: var(--primary);
}
.rec-compare-workbench .rec-bom-workflow-details[open] summary {
    margin-bottom: 4px;
}

.rec-compare-workbench input.bomrc-mini-qty {
    max-width: 110px;
    text-align: right;
}
.rec-filter-label { font-size: 11px; font-weight: 700; }
.rec-filter-select { padding: 6px; font-size: 14px; }
.rec-grid-1 { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rec-row-between { display: flex; justify-content: space-between; align-items: center; }
.rec-col-6 { display: flex; flex-direction: column; gap: 6px; }
.rec-layer-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.rec-progress-track { background: var(--border); border-radius: 8px; height: 12px; overflow: hidden; margin-bottom: 15px; }
.rec-progress-bar { background: var(--primary); height: 100%; width: 0%; transition: width 0.3s ease; border-radius: 8px; }
.rec-progress-log { max-height: 200px; overflow-y: auto; font-size: 13px; line-height: 1.8; }
#recipe-mod .rec-compare-workbench.rec-modal-content { max-height: min(72vh, 640px); }
#recipe-mod .rec-compare-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#recipe-mod .rec-compare-panel { margin-top: 8px; }
#recipe-mod .rec-compare-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
#recipe-mod .rec-compare-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-alt); }
#recipe-mod .rec-compare-chip.ok { border-color: color-mix(in srgb, var(--success) 45%, var(--border) 55%); color: var(--success); }
#recipe-mod .rec-compare-chip.warn { border-color: color-mix(in srgb, var(--warning) 50%, var(--border) 50%); color: color-mix(in srgb, var(--warning) 85%, var(--text-main) 15%); }
#recipe-mod .rec-compare-chip.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--border) 55%); color: var(--danger); }
#recipe-mod .rec-compare-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; max-height: 280px; overflow-y: auto; }
#recipe-mod .rec-compare-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#recipe-mod .rec-compare-table th { position: sticky; top: 0; background: var(--surface-alt); z-index: 1; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
#recipe-mod .rec-compare-table td { padding: 6px 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%); vertical-align: top; }
#recipe-mod .rec-compare-row-onlya { background: color-mix(in srgb, var(--danger) 7%, transparent 93%); }
#recipe-mod .rec-compare-row-onlyb { background: color-mix(in srgb, var(--primary) 7%, transparent 93%); }
#recipe-mod .rec-compare-row-qty { background: color-mix(in srgb, var(--warning) 9%, transparent 91%); }
#recipe-mod .rec-compare-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; margin-bottom: 10px; }
#recipe-mod .rec-compare-filters .form-group { margin-bottom: 0; }
#recipe-mod .rec-compare-subtitle { font-size: 12px; font-weight: 700; margin: 12px 0 6px; color: var(--text-muted); }
#recipe-mod .rec-mtx-wrap { overflow: auto; max-height: min(52vh, 420px); border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; }
#recipe-mod .rec-mtx-table { border-collapse: separate; border-spacing: 0; font-size: 11px; min-width: 100%; }
#recipe-mod .rec-mtx-table th,
#recipe-mod .rec-mtx-table td { border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent 15%); border-right: 1px solid color-mix(in srgb, var(--border) 85%, transparent 15%); padding: 4px 6px; text-align: center; white-space: nowrap; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
#recipe-mod .rec-mtx-corner { position: sticky; left: 0; z-index: 3; background: var(--surface-alt); min-width: 120px; text-align: left !important; }
#recipe-mod .rec-mtx-rowhead { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left !important; font-weight: 600; max-width: 140px !important; }
#recipe-mod .rec-mtx-colhead { position: sticky; top: 0; z-index: 2; background: var(--surface-alt); font-weight: 600; }
#recipe-mod .rec-mtx-colhead:first-of-type { z-index: 4; }
#recipe-mod .rec-mtx-diag { background: color-mix(in srgb, var(--border) 35%, var(--surface) 65%); color: var(--text-muted); }
#recipe-mod .rec-mtx-eq { background: color-mix(in srgb, var(--success) 12%, transparent 88%); font-weight: 700; }
#recipe-mod .rec-mtx-yld { background: color-mix(in srgb, var(--warning) 14%, transparent 86%); font-weight: 700; }
#recipe-mod .rec-mtx-diff { background: color-mix(in srgb, var(--danger) 10%, transparent 90%); font-weight: 700; }
#recipe-mod .rec-mtx-legend { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.rec-col-drag { width: 36px; text-align: center; }
.rec-drag-cell { width: 36px; }
.rec-drag-handle { cursor: grab; font-weight: 700; color: var(--text-muted); user-select: none; }
.rec-row-draggable:hover .rec-drag-handle { color: var(--primary); }
.rec-row-dragging { opacity: 0.6; }
.rec-row-drop-target { outline: 2px dashed color-mix(in srgb, var(--primary) 60%, var(--border) 40%); outline-offset: -2px; }
#recipe-mod .table-container thead th {
    font-size: 12px;
    letter-spacing: 0.2px;
    font-weight: 600;
    color: color-mix(in srgb, var(--text-muted) 80%, var(--text-main) 20%);
    border-bottom: 1px solid var(--border);
}
#recipe-mod .table-container tbody td {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent 12%);
    vertical-align: middle;
}
#recipe-mod .rec-delete-btn {
    color: color-mix(in srgb, var(--danger) 80%, var(--text-main) 20%);
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border) 55%);
    background: transparent;
}
#recipe-mod .rec-delete-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 7%, transparent 93%);
}
#recipe-mod .rec-drag-handle {
    opacity: 0.62;
    transition: opacity 0.16s ease, color 0.2s ease;
}
#recipe-mod .rec-row-draggable:hover .rec-drag-handle {
    opacity: 1;
}

@media (max-width: 1280px) {
    #recipe-mod .rec-add-row {
        grid-template-columns: minmax(210px, 1.2fr) minmax(165px, 0.95fr) minmax(110px, 0.7fr) 92px;
    }
    #recipe-mod .rec-add-submit-btn {
        width: 92px;
        min-width: 92px;
    }
}

@media (max-width: 1024px) {
    .rec-grid-header {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    #recipe-mod .rec-add-row {
        grid-template-columns: 1fr 1fr;
    }
    #recipe-mod .rec-add-col-material {
        grid-column: 1 / -1;
    }
    #recipe-mod .rec-add-submit-btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    #recipe-mod .rec-add-row {
        grid-template-columns: 1fr;
    }
}

/* Recipes module UI polish (strictly scoped) */
#recipe-mod .rec-add-row .input-modern,
#recipe-mod .rec-add-row .ts-control {
    min-height: 42px;
}

#recipe-mod .rec-add-row .ts-wrapper.single .ts-control {
    padding-top: 8px;
    padding-bottom: 8px;
}

#recipe-mod .rec-add-row .input-modern::placeholder {
    color: color-mix(in srgb, var(--text-muted) 85%, var(--text-main) 15%);
    opacity: 1;
}

#recipe-mod #recipe-material-layer.rec-select-placeholder {
    color: var(--text-muted);
}

body.dark-theme #recipe-mod .rec-add-row .input-modern::placeholder {
    color: color-mix(in srgb, var(--text-muted) 55%, var(--text-main) 45%);
}

/* Forms */
.input-left-rounded { border-radius: 8px 0 0 8px; }
.input-right-rounded { border-radius: 0 8px 8px 0; }

.opacity-60 { opacity: 0.6; }
.opacity-50 { opacity: 0.5; }
.no-pointer { pointer-events: none; }
.whitespace-nowrap { white-space: nowrap; }
.border-bottom-dashed { border-bottom: 2px solid var(--border) !important; }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.flex-2 { flex: 2; }
.min-w-200 { min-width: 200px; }
.min-w-120 { min-width: 120px; }
.min-w-140 { min-width: 140px; }
.h-42 { height: 42px; }
.px-25 { padding-left: 25px; padding-right: 25px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.bg-surface-alt { background: var(--surface-alt); }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.border-dashed { border: 1px dashed var(--border); }
.border-rounded { border-radius: 6px; }
.bg-border { background: var(--border); }
.text-main { color: var(--text-main); }
.bg-warning { background: var(--warning); }
.text-warning { color: var(--warning-text); }

/* --- Утилиты для компонентов рецептур (замена inline-стилей) --- */
/* Скролл-контейнер: список эталонного сравнения (specificity > #recipe-mod .rec-compare-table-wrap) */
#recipe-mod .rec-compare-table-wrap.rec-compare-body-scroll { max-height: 320px; }
/* Скролл-контейнер: мини-редактор пары */
#recipe-mod .rec-compare-table-wrap.rec-mini-editor-scroll { max-height: 240px; }
/* Кнопка экспорта в строке вкладок — прижата к правому краю */
.rec-ml-auto { margin-left: auto; }
/* Ячейка-чекбокс в заголовке таблицы эталона */
.rec-chk-col { width: 42px; }
/* Элемент, занимающий всю ширину сетки (grid full-span) */
.rec-grid-full { grid-column: 1 / -1; }

/* --- Dirty-state бейдж редактора рецептов (BOM-режим) --- */
#recipe-mod #recipe-editor-badge.rec-badge-dirty {
    background: color-mix(in srgb, var(--warning) 14%, var(--surface-alt) 86%);
    border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--border) 58%);
    color: color-mix(in srgb, var(--warning-text) 90%, var(--text-main) 10%);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    animation: rec-dirty-pulse 2.4s ease-in-out infinite;
}
@keyframes rec-dirty-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.7; }
}

.hidden-print-frame { position:absolute; width:0; height:0; border:none; }



/* ==========================================================================
   ADMIN HUB — Центр Управления
   ========================================================================== */

/* Табы админки */
.admin-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 12px;
    flex-wrap: wrap;
}

.admin-tab {
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    transition: all 0.2s;
}

.admin-tab:hover { background: var(--surface-hover); }
.admin-tab.active { background: var(--primary); color: white; border-color: var(--primary); }

/* Панели контента */
.admin-panel { display: none; animation: fadeIn 0.3s ease; }
.admin-panel.active { display: block; }

/* Секции */
.admin-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-section-header h3 { margin: 0; font-size: 16px; }
.admin-actions { display: flex; gap: 8px; }

/* Карточки */
.admin-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.admin-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.admin-card-icon { font-size: 36px; margin-bottom: 10px; }
.admin-card-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.admin-card-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }

/* Метрики */
.admin-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.admin-metric {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.admin-metric-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.admin-metric-value { font-size: 18px; font-weight: 700; color: var(--text-main); }
.admin-metric-value small { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.admin-metric-value.text-success { color: var(--success); }
.admin-metric-value.text-danger { color: var(--danger); }

/* Прогресс-бар метрик */
.admin-metric-bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.admin-metric-fill {
    height: 100%;
    background: var(--success);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.admin-metric-fill.warning { background: var(--warning); }
.admin-metric-fill.danger { background: var(--danger); }

/* Терминал для логов */
.admin-terminal {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.admin-terminal pre {
    color: #c9d1d9;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.admin-log-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Экспорт — сетка кнопок */
.admin-export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.admin-export-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.admin-export-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.admin-export-icon { font-size: 28px; }

/* Бейджи действий */
.badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; display: inline-block; }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-info { background: rgba(59, 130, 246, 0.1); color: var(--primary); }

/* Пагинация */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Input в настройках */
.admin-setting-input {
    max-width: 300px;
}

/* ==========================================================================
   КАРТОЧКА ПРОСЛЕЖИВАЕМОСТИ ПАРТИИ (Batch Traceability Card)
   ========================================================================== */
.batch-modal {
    max-width: 820px;
}

.batch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.batch-header-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
}

.batch-header-badges {
    display: flex;
    gap: 8px;
    align-items: center;
}

.batch-status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.batch-status-drying {
    background: var(--success-bg);
    color: var(--success);
}

.batch-status-partial {
    background: var(--warning-bg);
    color: var(--warning);
}

.batch-status-closed {
    background: var(--surface-alt);
    color: var(--text-muted);
}

.batch-age-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    background: var(--surface-alt);
    color: var(--text-secondary);
}

.batch-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.batch-order-card,
.batch-progress-card,
.batch-section-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
}

.batch-order-card {
    border-left: 4px solid var(--primary);
}

.batch-progress-bar {
    width: 100%;
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 0;
}

.batch-progress-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--success), var(--primary));
    transition: width 0.5s ease;
    width: 0;
}

.batch-progress-fill-pct-0 { width: 0%; }
.batch-progress-fill-pct-5 { width: 5%; }
.batch-progress-fill-pct-10 { width: 10%; }
.batch-progress-fill-pct-15 { width: 15%; }
.batch-progress-fill-pct-20 { width: 20%; }
.batch-progress-fill-pct-25 { width: 25%; }
.batch-progress-fill-pct-30 { width: 30%; }
.batch-progress-fill-pct-35 { width: 35%; }
.batch-progress-fill-pct-40 { width: 40%; }
.batch-progress-fill-pct-45 { width: 45%; }
.batch-progress-fill-pct-50 { width: 50%; }
.batch-progress-fill-pct-55 { width: 55%; }
.batch-progress-fill-pct-60 { width: 60%; }
.batch-progress-fill-pct-65 { width: 65%; }
.batch-progress-fill-pct-70 { width: 70%; }
.batch-progress-fill-pct-75 { width: 75%; }
.batch-progress-fill-pct-80 { width: 80%; }
.batch-progress-fill-pct-85 { width: 85%; }
.batch-progress-fill-pct-90 { width: 90%; }
.batch-progress-fill-pct-95 { width: 95%; }
.batch-progress-fill-pct-100 { width: 100%; }

.batch-section-card {
    margin-top: 15px;
}

.batch-section-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.batch-movement-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.batch-movement-row:last-child {
    border-bottom: none;
}

.batch-movement-in {
    color: var(--success);
    font-weight: bold;
}

.batch-movement-out {
    color: var(--warning);
    font-weight: bold;
}

.batch-cost-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.batch-cost-row:last-child {
    border-bottom: none;
    font-weight: 900;
    font-size: 14px;
    padding-top: 10px;
}

.batch-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.batch-analytics-item {
    text-align: center;
    padding: 12px 10px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.batch-analytics-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.batch-analytics-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    text-transform: uppercase;
}

/* =========================================================
   /* ==========================================================================
   7.5. КАРТОЧКИ ФОРМОВКИ (PRODUCTION STEP CARDS)
   ========================================================================== */

/* Базовая карточка-шаг */
.card-step {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
}

.card-step:hover {
    box-shadow: var(--shadow-md);
}

/* Акцентная полоска сверху */
.card-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: var(--border);
}

/* Цветовые модификаторы — акцентная полоска + лёгкий оттенок */
.card-step.card-success::before {
    background: var(--success);
}

.card-step.card-success {
    border-color: var(--success-border);
    background: linear-gradient(180deg, var(--success-bg) 0%, var(--card-bg) 40%);
}

.card-step.card-alt::before {
    background: var(--primary);
}

.card-step.card-alt {
    border-color: rgba(59, 130, 246, 0.2);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.04) 0%, var(--card-bg) 40%);
}

.card-step.card-warning::before {
    background: var(--warning);
}

.card-step.card-warning {
    border-color: var(--warning-border);
    background: linear-gradient(180deg, var(--warning-bg) 0%, var(--card-bg) 40%);
}

/* Заголовок карточки */
.step-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.01em;
}

/* Тело карточки — растягивается */
.step-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Внутри step-body отступы управляются gap, поэтому убираем margin у form-group */
.step-body .form-group {
    margin-bottom: 0;
}

/* Подвал карточки — прижат к низу */
.step-footer {
    margin-top: auto;
    padding-top: 12px;
}

/* Нормы замесов — блок внутри step-body */
.mix-norms-block {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    padding: 10px;
    border-radius: 8px;
    min-height: 60px;
}

/* Иконка-заглушка в TomSelect-опции продукции */
.prod-ts-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--surface-hover);
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 14px;
}

/* ==========================================================================
   8. СПЕЦИФИЧНЫЕ СТИЛИ МОДУЛЕЙ
   ========================================================================== */

/* --- Авторизация --- */
#login-screen {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--sidebar-bg);
    color: white;
}

.login-box {
    background: var(--surface);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    color: var(--text-main);
    width: 320px;
}

.login-box input {
    display: block;
    margin: 15px auto;
    padding: 12px 16px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    background: var(--surface-alt);
    color: var(--text-main);
    outline: none;
}

.login-box input:focus {
    border-color: var(--primary);
}

/* --- Дашборд --- */
.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 70px;
    margin-bottom: 15px;
}

.chart-container {
    flex-grow: 1;
    position: relative;
    height: 400px;
    width: 100%;
}

.expense-list {
    height: 400px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    margin-top: 15px;
    padding-right: 5px;
}

.expense-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--surface-hover);
}

/* --- Конструктор себестоимости (Unit-economics) --- */
.dashboard-tabs-content {
    max-height: 1500px;
    opacity: 1;
}

.collapsed-panel {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.dashboard-tabs-nav .cost-card {
    background-color: var(--surface-alt);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1.5px solid transparent !important;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.dashboard-tabs-nav .cost-card:hover {
    background-color: var(--surface-hover);
    transform: translateY(-2px);
}

.dashboard-tabs-nav .cost-card.tab-active {
    background-color: var(--surface);
    box-shadow: var(--shadow-md);
    z-index: 10;
    border-color: var(--active-border-color, var(--primary)) !important;
}

.dash-drill-container {
    background-color: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

/* Адаптация под темную тему */
[data-theme="dark"] .dashboard-tabs-nav .cost-card {
    border-color: var(--border) !important;
}

/* --- Финансы --- */
.finance-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--surface);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}

.finance-period-day-nav .finance-period-shift-btn {
    min-width: 34px;
    padding: 4px 10px;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.account-card-modern {
    background-color: var(--surface);
    padding: 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    border: 1px solid var(--border);
    opacity: 0.85;
}

.account-card-modern:hover {
    transform: translateY(-2px);
    opacity: 1;
    box-shadow: var(--shadow-md);
}

.account-card-modern.selected {
    border: 2px solid var(--primary);
    opacity: 1;
    background-color: var(--surface-alt);
}

.invoice-alert-row {
    border-left: 4px solid var(--warning);
    background-color: var(--warning-bg) !important;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.summary-card {
    background-color: var(--surface);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.summary-title {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: bold;
}

.summary-value {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-main);
    margin-top: 5px;
}

.summary-card.total {
    background-color: var(--success);
    border-color: var(--success);
    color: white;
}

.summary-card.total .summary-title,
.summary-card.total .summary-value {
    color: white;
}

/* --- Оборудование --- */
.eq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.eq-card {
    border-top: 4px solid var(--primary);
}

.entity-link:hover {
    background-color: transparent;
    /* Removed background color */
    color: var(--primary-dark);
    text-decoration: underline;
    text-decoration-style: dashed;
}

.progress-container {
    width: 100%;
    height: 8px;
    background-color: var(--surface-alt);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--border);
}

.progress-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.status-pill-eq {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.status-pill-eq.active {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.status-pill-eq.repair {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

.status-pill-eq.off {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

/* --- Кадры (Табель и Аккордеоны) --- */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 10px;
}

.accordion-body {
    display: none;
    padding: 24px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-bottom: 24px;
    overflow: hidden;
}

.accordion-body.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.ts-cell {
    width: 28px;
    height: 28px;
    text-align: center;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    border: 1px solid transparent;
}

.ts-cell:hover {
    border-color: var(--primary);
    transform: scale(1.1);
}

.table-dep-section {
    background-color: var(--surface-alt) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--primary);
}

.ts-cell.status-present {
    background-color: var(--success);
    color: white;
}

.ts-cell.status-weekend {
    background-color: var(--surface-alt);
    color: var(--text-muted);
}

.ts-cell.status-sick {
    background-color: var(--warning);
    color: white;
}

.ts-cell.status-vacation {
    background-color: var(--info);
    color: white;
}

.ts-cell.status-absent {
    background-color: var(--danger);
    color: white;
}

.summary-card.office {
    border-left: 5px solid var(--primary);
}

.summary-card.shop {
    border-left: 5px solid var(--warning);
}

.summary-card.security {
    border-left: 5px solid var(--info);
}

.payouts-footer {
    background: var(--surface-alt);
    padding: 15px !important;
    text-align: right;
    border-top: 2px solid var(--border);
}

.badge-closed {
    background: var(--surface-hover);
    color: var(--text-muted);
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: bold;
    border: 1px solid var(--border);
}

.tax-control-group {
    margin-right: 20px;
    font-size: 13px;
    color: var(--text-muted);
}

/* --- Рецепты (Синхронизация и копирование) --- */
.sync-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    border-bottom: 1px solid var(--border);
}

.sync-list-item:hover {
    background-color: var(--surface-hover);
}

.sync-list-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#mass-copy-targets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

/* --- Продажи и Канбан --- */
.sales-col-qty {
    width: 80px;
}

.sales-filter-grid {
    grid-template-columns: 2fr 2fr 2fr 2fr auto !important;
}

.kanban-card {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, background-color 0.2s;
}

.kanban-card:hover {
    background-color: var(--surface-hover) !important;
    transform: translateY(-2px);
}

.kanban-column {
    background-color: var(--surface-alt);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.input-modern.price-dealer {
    border-color: var(--info) !important;
    color: var(--info) !important;
}

/* --- Справочники (Бейджи) --- */
.badge-prod {
    background-color: var(--primary);
    color: white;
}

.badge-mat {
    background-color: var(--surface-alt);
    color: var(--text-main);
    border: 1px solid var(--border);
}

[data-theme="dark"] .badge-mat {
    background-color: var(--surface-hover);
    color: var(--text-muted);
}

/* --- Темная тема: специфичные фиксы --- */
[data-theme="dark"] .table-container {
    box-shadow: none;
}

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-main);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}



[data-theme="dark"] .revenue-card-bg {
    background: linear-gradient(135deg, #1e3a8a, #4c1d95) !important;
}

/* ==========================================================================
   11. СПЕЦИФИЧНЫЕ СТИЛИ ПРОДАЖ (ВКЛАДКИ И МЕНЮ)
   ========================================================================== */

/* Вкладки (Табы) в продажах */
.sales-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 15px;
    flex-wrap: wrap;
}

.sales-tab-btn {
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-weight: bold;
    color: var(--text-muted);
    transition: 0.2s;
}

.sales-tab-btn:hover {
    background: var(--surface-hover);
}

.sales-tab-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.sales-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.sales-tab-content.active {
    display: block;
}

/* Выпадающее меню "Инструменты и Отчеты" */
.action-dropdown {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: -10px;
}

.action-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--surface);
    min-width: 230px;
    box-shadow: var(--shadow-lg);
    border-radius: 8px;
    border: 1px solid var(--border);
    z-index: 100;
    overflow: hidden;
    animation: fadeIn 0.2s ease-in-out;
}

.action-dropdown-content button {
    width: 100%;
    text-align: left;
    padding: 12px 15px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    color: var(--text-main);
    /* Исправлено под темную тему */
    font-size: 13px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-dropdown-content button:hover {
    background-color: var(--surface-hover);
    color: var(--primary);
    padding-left: 20px;
}

.action-dropdown-content button:last-child {
    border-bottom: none;
}

.action-dropdown:hover .action-dropdown-content {
    display: block;
}



/* ==========================================================================
   14. КАДРЫ И ТАБЕЛЬ (TIMESHEET & ACCORDION)
   ========================================================================== */
.timesheet-container {
    max-height: 70vh;
    /* Ограничиваем высоту для скролла */
    overflow-y: auto;
    overflow-x: auto;
}

/* Возвращаем стрелочке правильный вид, если где-то перебили */
.accordion-button {
    display: flex !important;
}

/* ==========================================================================
   15. МОДУЛЬ ЗАРПЛАТЫ — ШАПКА РАСЧЕТОВ И НЕПОЛНЫЙ ДЕНЬ
   ========================================================================== */

/* Шапка внутри аккордеона "Расчет выплат": текст + инпут + кнопка в одну строку */
.payroll-mega-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px;
    margin-bottom: 15px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.payroll-mega-toolbar .input-modern {
    width: auto;
    flex-shrink: 0;
}

.payroll-month-input {
    min-width: 150px;
    font-weight: bold;
}

.payroll-search-input {
    min-width: 180px;
    max-width: 220px;
}

.payroll-dep-select {
    min-width: 120px;
}

.payroll-mega-toolbar .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.payroll-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
}

.payroll-header-formula {
    font-size: 12px;
    margin: 0 0 8px 0;
}

.payroll-reopen-btn {
    display: none;
    border-color: var(--danger);
    color: var(--danger);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ячейка табеля: Неполный день (partial) */
.ts-cell.status-partial {
    background: repeating-linear-gradient(45deg,
            var(--success),
            var(--success) 4px,
            rgba(16, 185, 129, 0.55) 4px,
            rgba(16, 185, 129, 0.55) 8px);
    color: white;
    font-size: 10px;
}

/* Модальное окно: блок выбора множителя (доли смены) */
.multiplier-block {
    align-items: flex-start;
    gap: 15px;
    margin: 10px 0;
    padding: 10px;
    background: var(--warning-bg);
    border-radius: 6px;
    border: 1px solid var(--warning-border);
    flex-wrap: wrap;
}

.multiplier-block-row {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.multiplier-block-label {
    font-size: 13px;
    font-weight: bold;
    color: var(--warning-text);
    margin: 0;
}

.multiplier-radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
}

.multiplier-radio-label input[type="radio"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Итого за день — результат пересчёта в модалке */
.modal-day-result-row {
    width: 100%;
    text-align: left;
    font-weight: bold;
    font-size: 14px;
    color: var(--text-main);
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed var(--warning-border);
}

.modal-day-result-value {
    color: var(--primary);
}

/* Блок автоштрафа за прогул */
.penalty-check-block {
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 10px;
    background: var(--danger-bg);
    border-radius: 6px;
    border: 1px solid var(--danger-border);
}

.penalty-check-block input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.penalty-check-block label {
    font-size: 13px;
    color: var(--danger-text);
    font-weight: bold;
    cursor: pointer;
}

/* ============================================================
   16. МОДУЛЬ СКЛАДА И СУШИЛКИ
   ============================================================ */

/* Шапка модуля: заголовок + кнопки */
.inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.inventory-header h2 {
    margin: 0 0 5px 0;
}

.inventory-header .inventory-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.inventory-actions {
    display: flex;
    gap: 10px;
}

/* Панель фильтров по складам */
.inventory-filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* Обёртка таблицы остатков */
.inventory-table-wrapper {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
}

.inventory-table-wrapper .table-container {
    margin: 0;
}

.inventory-table-wrapper table {
    width: 100%;
    margin: 0;
}

/* Ширина колонок таблицы */
.inv-col-wh {
    width: 15%;
}

.inv-col-batch {
    width: 15%;
}

.inv-col-name {
    width: 35%;
}

.inv-col-qty {
    width: 10%;
    text-align: right;
}

.inv-col-unit {
    width: 10%;
}

.inv-col-actions {
    width: 15%;
    text-align: right;
}

/* Ячейка номера партии */
.inv-batch-cell {
    color: var(--primary);
    font-weight: bold;
}

/* Ячейка остатка (обычный режим) */
.inv-qty-cell {
    font-weight: bold;
    font-size: 15px;
    text-align: right;
}

/* Ячейка единицы измерения */
.inv-unit-cell {
    color: var(--text-muted);
}

/* Ячейка действий */
.inv-actions-cell {
    text-align: right;
}

/* Пустыш-заглушка */
.inv-empty-row {
    text-align: center;
    color: var(--text-muted);
    padding: 30px;
}

/* Badge склада */
.inv-wh-badge {
    background: var(--surface-hover);
    color: var(--text-muted);
}

/* Компактные кнопки действий в строке таблицы */
.inv-action-btn {
    padding: 4px 8px;
    font-size: 12px;
}

/* Кнопка распалубки (синяя) */
.inv-btn-demold {
    padding: 4px 8px;
    font-size: 12px;
}

/* Кнопка утилизации (красная обводка) */
.inv-btn-dispose {
    padding: 4px 8px;
    font-size: 12px;
    color: var(--danger-text);
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

/* Кнопка перемещения (красная обводка без фона) */
.inv-btn-move {
    padding: 4px 8px;
    font-size: 12px;
    color: var(--danger);
    border-color: var(--danger);
}

/* Режим инвентаризации: инпут фактического остатка */
.audit-qty-input {
    width: 100px;
    padding: 4px;
    text-align: right;
    font-weight: bold;
    border: 2px solid var(--primary);
    margin: 0;
    background: var(--surface);
    color: var(--text-main);
}

/* Инфо-блок в модалках склада */
.inv-modal-info {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.inv-modal-info .inv-modal-product {
    font-size: 15px;
}

.inv-modal-info .inv-modal-batch {
    margin-top: 5px;
    color: var(--primary);
    font-weight: bold;
}

.inv-modal-info .inv-modal-stock {
    margin-top: 5px;
    color: var(--text-muted);
}

.inv-modal-info .inv-modal-stock-value {
    font-size: 16px;
    color: var(--text-main);
}

/* Лейбл красного цвета (для полей опасных действий) */
.inv-label-danger {
    color: var(--danger);
    font-weight: bold;
}

.inv-label-success {
    color: var(--success);
    font-weight: bold;
}

.inv-label-warning {
    color: var(--warning-text);
    font-weight: bold;
}

/* Скрытый элемент (кнопка сохранения инвентаризации) */
.inv-hidden {
    display: none;
}

/* Кнопка фильтра Склад №7 (Резервы) */
.inv-reserve-btn {
    border-color: var(--warning-border);
    color: var(--warning-text);
    background: var(--warning-bg);
}

.inv-reserve-btn.active {
    background: var(--warning-text);
    color: #fff;
    border-color: var(--warning-text);
}

/* Колонка заказа в таблице */
.inv-col-order {
    width: 15%;
}

/* Badge номера заказа */
.inv-order-badge {
    background: var(--primary);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* Кнопка управления резервом */
.inv-btn-reserve {
    padding: 4px 8px;
    font-size: 12px;
    color: var(--primary);
    border-color: var(--primary);
}

/* ============================================================ */
/* --- 17. МОДУЛЬ ПРОДАЖ ---                                    */
/* ============================================================ */

/* --- 17.1 Шапка модуля --- */
.sales-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.sales-header h2 {
    margin: 0 0 5px 0;
}

.sales-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.sales-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sales-btn-docs {
    padding: 8px 16px;
    border-color: var(--info);
    color: var(--info);
}

.sales-btn-return {
    padding: 8px 16px;
    border-color: var(--warning);
    color: var(--warning);
}

.sales-btn-tools {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    background: var(--surface-alt);
}

.sales-dropdown-arrow {
    font-size: 10px;
}

.sales-btn-1c {
    color: var(--success);
    font-weight: bold;
    background: var(--success-bg);
}

/* --- 17.2 Checkout Layout (TOP ERP REDESIGN) --- */
.sales-checkout-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sales-header-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sales-border-right {
    border-right: 1px dashed var(--border);
}

.sales-header-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
}

.sales-action-panel {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sales-action-panel:not(.sales-hidden) {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    justify-content: center;
    width: 100%;
}

.sales-spec-search-bar {
    background: var(--surface);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes slideDownIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sales-spec-actions-active {
    animation: slideDownIn 0.3s forwards;
}

.sales-col-qty-input {
    width: 100px;
}

.sales-col-price-input {
    width: 140px;
}

.sales-btn-add {
    padding: 10px 24px;
    margin-bottom: 0;
}

.sales-btn-profit {
    border-color: var(--warning-border);
    color: var(--warning-text);
    padding: 8px;
    min-width: 40px;
}

.sales-footer-right {
    width: 350px;
}

.sales-spec-search-bar {
    background: var(--surface);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sales-panel-left {
    margin: 0;
    border-top: 4px solid var(--primary);
}

.sales-panel-right {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.sales-section-title {
    margin-top: 0;
}

.sales-section-sub-title {
    margin: 0 0 10px 0;
    color: var(--text-muted);
}

.sales-input-row {
    display: flex;
    gap: 5px;
}

.sales-btn-icon {
    padding: 0 10px;
}

.sales-btn-info-icon {
    padding: 0 12px;
    border-color: var(--info);
    color: var(--info);
}

.sales-flex-grow {
    flex-grow: 1;
}

.sales-two-cols {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start;
}

.sales-separator-top {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--border);
}

.sales-section-dashed {
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 15px;
}

.m-0 {
    margin: 0;
}

.sales-mb-sm {
    margin-bottom: 10px;
}

.sales-payment-block {
    margin-bottom: 15px;
}

/* Убираем стрелки инпутов в панели спецификации продаж */
#sale-spec-actions input[type="number"]::-webkit-outer-spin-button,
#sale-spec-actions input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    /* Стандартное свойство */
    margin: 0;
}

#sale-spec-actions input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    /* Стандартное свойство */
}



/* --- 17.3 Клиентская карточка --- */
.sales-client-info {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background: var(--danger-bg);
    border: 1px dashed var(--danger-border);
    border-radius: 6px;
    font-size: 13px;
}

.sales-client-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.sales-label-danger {
    color: var(--danger-text);
}

.sales-debt-value {
    color: var(--danger);
}

.sales-pallets-value {
    color: var(--warning-text);
}

.sales-btn-act {
    width: 100%;
    margin-top: 5px;
    padding: 4px;
    font-size: 12px;
    border-color: var(--danger-border);
    color: #db2777;
}

/* --- 17.4 Договоры --- */
.sales-contract-group {
    display: none;
    margin-top: 15px;
    padding: 10px;
    background: var(--surface-alt);
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.sales-label-muted {
    color: var(--text-muted);
    font-size: 12px;
}

.sales-label-warning-bold {
    color: var(--warning-text);
    font-weight: bold;
}

/* --- 17.5 Поиск товара (TomSelect) --- */
.sales-unit-hint {
    color: var(--primary);
    font-weight: bold;
}

.sales-stock-hint-wrapper {
    min-height: 16px;
    margin-top: 4px;
}

.sales-stock-hint {
    color: var(--text-muted);
    font-size: 11px;
}

.sales-stock-free {
    color: var(--success);
    font-weight: bold;
}

.sales-stock-reserved {
    color: var(--warning-text);
    font-weight: bold;
}

.sales-cost-btn-wrap {
    margin-bottom: 10px;
}

.sales-btn-cost {
    border-color: var(--warning-text);
    color: var(--warning-text);
    font-weight: bold;
    display: none;
}

.sales-btn-add-to-cart {
    width: 100%;
    border-color: var(--primary);
    color: var(--primary);
    margin-top: 10px;
}

/* --- 17.6 Корзина (Cart) --- */
.sales-cart-wrapper {
    flex-grow: 1;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
}

.sales-cart-table {
    margin: 0;
    width: 100%;
}

.sales-cart-table th {
    padding: 10px;
}

.sales-th-discount {
    color: var(--danger);
}

.sales-empty-cell {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

.sales-cart-row {
    border-bottom: 1px solid var(--surface-alt);
}

.sales-cart-price-input {
    width: 70px;
    padding: 4px;
    text-align: center;
}

.sales-cart-discount-input {
    width: 60px;
    padding: 4px;
    text-align: center;
    color: var(--danger);
}

.sales-cart-sum {
    text-align: right;
    font-weight: bold;
    color: var(--primary);
}

.sales-cart-remove {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 16px;
}

/* --- 17.7 Итоги / Прибыль --- */
.sales-totals-block {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 15px;
}

.sales-totals-label {
    font-size: 13px;
    color: var(--text-muted);
}

.sales-input-sm {
    padding: 6px;
}

.sales-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 5px;
}

.sales-grand-total {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    color: var(--primary);
    margin-top: 10px;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}

.sales-original-sum {
    color: var(--text-muted);
    font-size: 14px;
    display: none;
    margin-right: 10px;
}

/* Блок прибыли */
.sales-profit-block {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profit-positive {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
}

.profit-negative {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
}

.profit-title-positive {
    color: var(--success-text);
    font-weight: bold;
    font-size: 14px;
}

.profit-title-negative {
    color: var(--danger-text);
    font-weight: bold;
    font-size: 14px;
}

.profit-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.profit-value {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.profit-value-positive {
    color: var(--success);
}

.profit-value-negative {
    color: var(--danger);
}

.profit-badge {
    margin-top: 5px;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    color: white;
    font-weight: bold;
    display: inline-block;
}

.profit-badge-positive {
    background: var(--success);
}

.profit-badge-negative {
    background: var(--danger);
}

/* --- 17.8 Доверенность --- */
.sales-poa-block {
    background: var(--danger-bg);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--danger-border);
}

.sales-poa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.sales-poa-title {
    font-weight: bold;
    color: var(--danger-text);
    font-size: 13px;
}

.sales-poa-checkbox-label {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--danger);
    font-weight: bold;
}

.sales-poa-select {
    border-color: var(--danger-border);
}

.sales-btn-poa-add {
    padding: 0 12px;
    border-color: var(--danger-border);
}

.sales-poa-comment {
    display: none;
    margin-top: 10px;
}

.sales-poa-comment-input {
    border-color: var(--danger);
    background: var(--surface);
}

.sales-advance-input {
    border-color: var(--warning);
    background: var(--warning-bg);
}

/* --- 17.9 Кнопки действий --- */
.sales-action-bar {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.sales-btn-checkout {
    flex: 2;
    padding: 12px;
    font-size: 16px;
}

/* --- 17.10 Карточка заказов / Фильтры --- */
.sales-card-flush {
    margin: 0;
    min-height: 400px;
}

.sales-view-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

/* sales-filter-bar — см. основные стили выше (line ~1815) */


/* --- 17.11 Таблица заказов --- */
.sales-table-full {
    width: 100%;
}

.sales-col-date {
    width: 15%;
}

.sales-col-doc {
    width: 15%;
}

.sales-col-client {
    width: 25%;
}

.sales-col-items {
    width: 20%;
}

.sales-col-status {
    width: 10%;
    text-align: center;
}

.sales-col-actions {
    width: 15%;
    text-align: right;
}

.sales-col-vol {
    width: 15%;
    text-align: center;
}

.sales-col-sum {
    width: 15%;
    text-align: right;
}

/* Строка в таблице заказов */
.sales-order-row {
    transition: background-color 0.2s;
}

.sales-order-row:hover {
    background-color: var(--surface-hover);
}

.sales-order-date {
    color: var(--text-muted);
    font-size: 13px;
}

.sales-order-deadline {
    color: var(--warning-text);
    font-weight: bold;
}

.sales-order-doc-link {
    color: var(--info);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.sales-order-doc-link:hover {
    text-decoration: underline;
}

.sales-order-amount {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-main);
}

.sales-order-client {
    font-weight: bold;
}

.sales-order-address {
    font-size: 11px;
    color: var(--text-muted);
}

.sales-order-items {
    font-size: 12px;
    max-width: 250px;
    vertical-align: top;
}

.sales-order-actions-cell {
    text-align: right;
    min-width: 250px;
    vertical-align: middle;
}

.sales-order-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    align-items: center;
}

.sales-btn-sm {
    padding: 4px 8px;
    font-size: 12px;
}

.sales-btn-sm-info {
    color: var(--info);
    border-color: var(--info);
}

.sales-btn-sm-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.sales-btn-sm-success {
    color: var(--success);
    border-color: var(--success);
}

/* --- 17.12 Badges статусов --- */
.sales-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
}

.badge-shipping {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid #bae6fd;
}

.badge-queued {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid #fde047;
}

.badge-paid {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid #bbf7d0;
    margin-top: 5px;
}

.badge-debt {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid #fecaca;
    margin-top: 5px;
}

.badge-advance {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
    margin-top: 5px;
}

.badge-unpaid {
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid #e2e8f0;
    margin-top: 5px;
}

/* Баланс клиента */
.sales-balance-badge {
    margin-top: 5px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 4px;
}

.balance-overpaid {
    color: var(--success-text);
    background: var(--success-bg);
    border: 1px solid var(--success-border);
}

.balance-debt {
    color: var(--danger-text);
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
}

.balance-zero {
    color: var(--text-muted);
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.sales-projected {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.sales-projected-positive {
    color: var(--success);
}

.sales-projected-negative {
    color: var(--danger);
}

/* --- 17.13 Пагинация --- */
.sales-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 10px;
    background: var(--surface-alt);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sales-page-info {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- 17.14 Kanban --- */
.sales-kanban-board {
    display: none;
    gap: 20px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 10px;
    min-height: 500px;
}

.kanban-column {
    flex: 1;
    min-width: 320px;
    background: var(--surface-alt);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid var(--border);
}

.kanban-column-processing {
    background: var(--success-bg);
    border-color: var(--success-border);
}

.kanban-column-title {
    margin: 0 0 15px 0;
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}

.kanban-title-processing {
    color: var(--success);
}

.kanban-count {
    background: var(--surface-hover);
    color: var(--text-main);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.kanban-count-processing {
    background: var(--success-border);
    color: var(--success-text);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.kanban-items-container {
    min-height: 400px;
}

.kanban-card {
    background: var(--surface);
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 0 1px 2px var(--shadow-sm);
    cursor: grab;
    user-select: none;
    border: 1px solid var(--surface-alt);
}

.kanban-card-pending {
    border-left: 5px solid #3b82f6;
}

.kanban-card-processing {
    border-left: 5px solid var(--success);
}

.kanban-card-header {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}

.kanban-card-client {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text-main);
    font-size: 14px;
}

.kanban-card-items {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--surface-alt);
    padding-top: 10px;
}

.kanban-card-total {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
}

.kanban-card-btn {
    background: var(--surface-alt);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: 0.2s;
}

.kanban-card-btn:hover {
    background: var(--info-bg);
}

/* --- 17.15 Архив --- */
.sales-date-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.sales-date-shortcuts {
    font-size: 11px;
}

.sales-date-shortcuts a {
    color: var(--primary);
    text-decoration: none;
    padding: 0 3px;
}

.sales-date-shortcuts a:hover {
    text-decoration: underline;
}

.sales-date-input {
    background: var(--surface);
    cursor: pointer;
}

.sales-hist-row {
    transition: background-color 0.2s;
}

.sales-hist-row:hover {
    background-color: var(--surface-hover);
}

.sales-hist-date {
    color: var(--text-muted);
    font-size: 13px;
}

.sales-hist-doc {
    color: var(--primary);
    font-weight: bold;
}

.sales-hist-sum {
    text-align: right;
    color: var(--success);
    font-weight: bold;
}

.sales-hist-actions {
    text-align: right;
    min-width: 250px;
}

/* --- 17.16 Утилиты --- */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* ==========================================================================
   18. ДАШБОРД (Кодовое имя: dashboard.ejs)
   ========================================================================== */
.dash-header-btn {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: 0.3s;
}

.dash-header-btn:hover {
    background: var(--surface-hover);
}

/* Границы (Цветные обводки) */
.dash-border-primary {
    border-bottom: 4px solid var(--primary);
}

.dash-border-warning {
    border-bottom: 4px solid var(--warning);
}

.dash-border-danger {
    border-bottom: 4px solid var(--danger);
}

/* Карточка Склада */
.dash-stock-card {
    border-top: 4px solid var(--info);
    transition: 0.3s;
    padding: 0 !important;
}

.dash-stock-title {
    margin: 0;
    font-size: 16px;
    color: var(--info);
}

.dash-accordion-body {
    padding: 0 15px 15px 15px;
    border-top: 1px dashed var(--border);
}

.cursor-pointer {
    cursor: pointer;
}

/* Поиск */
.dash-main-search {
    font-size: 15px;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.dash-search-container {
    border-left: 4px solid var(--primary);
}

.dash-panel-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

/* Три Кита (Вкладки) */
.dash-triad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    --active-border-color: transparent;
}

.dash-tab-card {
    cursor: pointer;
    transition: 0.3s;
    margin-bottom: 0 !important;
}

.dashboard-tabs-nav .cost-card {
    background-color: var(--surface-hover);
    /* 👈 Системный фон неактивной вкладки */
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-sm) !important;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.dashboard-tabs-nav .cost-card.tab-active {
    background-color: var(--surface);
    /* 👈 Системный фон активной вкладки */
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-md) !important;
    z-index: 10;
    border: 1.5px solid var(--active-border-color) !important;
}

#drilldown-container {
    background-color: var(--surface);
    /* 👈 Фон выезжающей панели подстраивается под тему */
}

.dash-tab-success {
    border-top: 4px solid var(--success);
}

.dash-tab-warning {
    border-top: 4px solid var(--warning);
}

.dash-tab-primary {
    border-top: 4px solid var(--primary);
}

.dash-tab-title {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 16px;
}

.dash-tab-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.dash-tab-val {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Слайдер-панели */
.dash-panel-success {
    border-left: 4px solid var(--success);
}

.dash-panel-warning {
    border-left: 4px solid var(--warning);
}

.dash-panel-primary {
    border-left: 4px solid var(--primary);
}

.btn-sm-pad {
    padding: 6px 12px;
}

/* Финансовая модель */
.dash-finance-card {
    border-left: 5px solid var(--warning);
    max-width: 700px;
}

.dash-finance-tax-box {
    text-align: right;
    background: var(--surface-alt);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px dashed var(--primary);
}

.dash-tax-input-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 3px;
}

.dash-tax-input {
    width: 60px;
    height: 28px;
    padding: 2px 5px;
    text-align: center;
}

.dash-finance-input-box {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 15px;
}

.dash-finance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: start;
}

.dash-finance-result-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-hover);
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed var(--border);
    margin-bottom: 15px;
}

.dashboard-tabs-content {
    max-height: 1500px;
    opacity: 1;
}

.collapsed-panel {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Дополнительные глобальные утилиты */
.align-end {
    align-items: flex-end;
}

.font-16 {
    font-size: 16px;
}

.font-24 {
    font-size: 24px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.text-primary {
    color: var(--primary);
}

/* Колонки таблиц (%) */
.w-4 {
    width: 4%;
}

.w-8 {
    width: 8%;
}

.w-9 {
    width: 9%;
}

.w-10 {
    width: 10%;
}

.w-12 {
    width: 12%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-35 {
    width: 35%;
}

/* --- JS HTML генерация Дашборда --- */
.dash-warn-card {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid var(--danger-border);
    padding: 15px;
    border-radius: 8px;
}

.dash-success-card {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
    padding: 15px;
    border-radius: 8px;
}

.dash-search-tx-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px 8px 30px;
    border-bottom: 1px solid var(--surface-hover);
}

.dash-search-tx-info {
    flex-grow: 1;
    min-width: 0;
    padding-right: 15px;
}

.dash-text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-search-tx-amount {
    font-weight: bold;
    color: var(--danger);
    white-space: nowrap;
    margin-right: 15px;
}

.dash-search-cat-header {
    background: var(--surface-alt);
    padding: 8px 15px 8px 20px;
    font-weight: bold;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}

.dash-search-group-wrap {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.dash-drill-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--surface-hover);
    cursor: pointer;
    transition: 0.2s;
}

.dash-drill-tx {
    padding: 12px 15px;
    border-bottom: 1px dashed var(--border);
}

.dash-bulk-bar {
    display: none;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 2px solid var(--primary);
    padding: 10px 15px;
    z-index: 5;
}

.dash-tx-wrapper {
    max-height: 420px;
    overflow-y: auto;
    position: relative;
}

/* ==========================================================================
   19. ФИНАНСЫ И КАССА (finance.ejs и finance.js)
   ========================================================================== */
.finance-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
    align-items: start;
}

/* CRITICAL: This allows grid items to shrink below their internal canvas width */
.finance-charts-grid>div {
    min-width: 0;
    min-height: 0;
}

.finance-chart-container {
    position: relative;
    /* CRITICAL: Traps the absolute positioning of Chart.js */
    height: 250px;
    width: 100%;
    min-height: 0;
    /* CRITICAL: Prevents flex/grid blowout */
}

.finance-invoices-wrap {
    margin-bottom: 20px;
}

.finance-search-input {
    width: 350px;
}

.finance-summary-bar {
    background: var(--surface-hover);
    border: 1px solid var(--primary);
    border-left: 4px solid var(--primary);
    padding: 12px 15px;
    border-radius: 8px;
    align-items: center;
    justify-content: space-between;
}

.finance-summary-count {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--surface);
    padding: 4px 8px;
    border-radius: 4px;
}

.finance-btn-reset {
    padding: 4px 10px;
    font-size: 12px;
    border: none;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.finance-btn-reset:hover {
    background: var(--surface-alt);
}

.finance-table {
    table-layout: fixed;
    word-break: break-word;
}

.finance-limit-select {
    padding: 2px 5px;
    min-height: 30px;
    width: 70px;
}

/* --- JS HTML генерация Финансов --- */
.finance-alert-danger {
    background: var(--danger-bg);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--danger-border);
    border-left: 5px solid var(--danger);
    animation: fadeIn 0.5s;
}

.finance-alert-danger h4 {
    margin: 0 0 5px 0;
    color: var(--danger-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.finance-alert-success {
    background: var(--success-bg);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--success-border);
    border-left: 5px solid var(--success);
    animation: fadeIn 0.5s;
}

.finance-alert-success h4 {
    margin: 0 0 5px 0;
    color: var(--success-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.finance-alert-text {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.5;
}

.finance-margin-grid {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.finance-margin-card {
    background: var(--surface);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.finance-pnl-wrap {
    background: var(--surface-alt);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.finance-pnl-header {
    margin-top: 0;
    text-align: center;
    color: var(--text-main);
}

.finance-pnl-toolbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
    background: var(--surface);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.finance-pnl-date-badge {
    text-align: center;
    margin-bottom: 25px;
}

.finance-pnl-date-badge span {
    background: var(--surface-alt);
    color: var(--primary);
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 13px;
    border: 1px solid var(--primary);
}

.finance-pnl-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 5px;
}

.finance-pnl-total-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background: var(--surface-alt);
    border-right: 3px solid transparent;
    margin-bottom: 20px;
    align-items: center;
}

.finance-pnl-result-row {
    display: flex;
    justify-content: space-between;
    padding: 25px 20px;
    border-radius: 8px;
    align-items: center;
    border: 2px solid transparent;
}

.cp-card-box {
    background: var(--surface);
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}

.cp-card-stat {
    flex: 1.2;
    text-align: center;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 0 10px;
}

.cp-card-money {
    flex: 1.2;
    padding-left: 15px;
    text-align: right;
}

.cp-flag-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
}

/* CRM profile styles */
.crm-tx-row {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.crm-tx-right {
    text-align: right;
    width: 45%;
    padding-right: 10px;
    font-weight: 500;
}

.crm-tx-amount {
    font-weight: bold;
    white-space: nowrap;
}

.crm-inv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

/* Дополнительные классы CRM-профиля (заменяют inline-стили) */
.badge-role { background: var(--surface-alt); color: var(--primary); }
.crm-profile-header .btn-crm-delete { border-color: var(--danger); color: var(--danger); }
.crm-profile-header .btn-crm-delete:hover { background: var(--danger); color: white; }

/* Широкая модальная карточка контрагента */
#app-modal .modal-content { max-width: 1000px; width: 95%; }

.crm-profile-card {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 15px;
}

.crm-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.crm-profile-title {
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
}

.crm-profile-info {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.crm-toggle-header {
    margin: 0 0 5px 0;
    cursor: pointer;
    background: var(--surface-alt);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}

.crm-toggle-content {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--surface);
}

.crm-block-header {
    margin: 0 0 10px 0;
}

.crm-list-box {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    background: var(--surface);
    margin-bottom: 15px;
}

.crm-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.crm-history-box {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 600px;
    overflow-y: auto;
    background: var(--surface);
}

/* --- Таблица транзакций (renderTransactionsTable) --- */
.tx-row-system {
    opacity: 0.6;
    background-color: var(--surface-alt);
    color: var(--text-muted);
}

.tx-account-label {
    font-size: 11px;
    font-weight: bold;
    display: block;
    margin-top: 3px;
}

.tx-actions-cell {
    text-align: center;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    align-items: center;
    min-width: 96px;
    white-space: nowrap;
}

.tx-locked-badge {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: bold;
    background: var(--surface-alt);
    padding: 4px 8px;
    border-radius: 4px;
}

/* --- counterpartiesModal layout --- */
.cp-modal-filter-bar {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cp-modal-filter-flex {
    flex: 1;
    min-width: 200px;
}

.cp-list-container {
    max-height: 550px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- imprest widget --- */
.imprest-item-row {
    display: grid;
    grid-template-columns: 2fr 3fr 3fr auto;
    gap: 10px;
    align-items: start;
    background: var(--surface-alt);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* ==========================================================================
   20. ПРОИЗВОДСТВО И ФОРМОВКА
   ========================================================================== */

/* --- Шапка модуля --- */
.prod-date-input {
    width: 140px;
    cursor: pointer;
}

.prod-header-datepicker {
    margin: 0;
}

.prod-shift-group {
    margin: 0;
    width: 250px;
}

/* --- Сетка шагов (3 колонки: Формовка / Основной замес / Лицевой замес) --- */
.prod-steps-grid {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
}

/* --- Превью объёма (итого м²/шт) --- */
.prod-volume-preview {
    font-weight: 900;
    font-size: 16px;
    padding: 10px;
    background: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--success-border);
}

/* --- Кнопка добавления в партию --- */
.prod-add-btn {
    height: 42px;
    font-size: 14px;
    font-weight: 700;
}

/* --- Норма смешивания (блок) --- */
.prod-mix-norms-main {
    background: var(--surface-alt);
}

.prod-mix-norms-face {
    background: var(--warning-bg);
}

/* --- Секция истории партий --- */
.prod-history-card {
    margin-top: 20px;
}

.prod-history-card .table-modern {
    table-layout: fixed;
}

.prod-search-wrap {
    position: relative;
    width: 350px;
}

.prod-search-icon {
    position: absolute;
    left: 12px;
    top: 10px;
    opacity: 0.5;
    pointer-events: none;
}

.prod-search-input {
    padding-left: 35px;
    margin: 0;
    border-radius: 20px;
}

/* --- Заголовки таблицы истории (сортируемые) --- */
.prod-th-sortable {
    cursor: pointer;
}

.prod-th-date {
    cursor: pointer;
    color: var(--primary);
}

/* --- Подвал таблицы (итоги смены) --- */
.prod-tfoot-summary {
    background: var(--surface-alt);
    font-weight: bold;
    border-top: 2px solid var(--border);
}

.prod-tfoot-label {
    text-align: right;
    padding: 12px;
}

.prod-tfoot-volume {
    padding: 12px;
    color: var(--primary);
}

.prod-tfoot-cost {
    padding: 12px;
    color: var(--danger);
}

.prod-tfoot-actions {
    text-align: right;
    padding: 12px;
}

/* --- production.js dynamic elements --- */
/* Calendar styles */
.prod-cal-active {
    font-weight: bold;
    color: var(--primary);
}

.prod-cal-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--success);
    border-radius: 50%;
}

/* --- inventory.js calendar dots (Drying warehouse) --- */
.inv-cal-dot-receipt {
    position: absolute;
    bottom: 2px;
    left: calc(50% - 4px);
    width: 4px;
    height: 4px;
    background-color: var(--success);
    border-radius: 50%;
}

.inv-cal-dot-expense {
    position: absolute;
    bottom: 2px;
    left: calc(50% + 2px);
    width: 4px;
    height: 4px;
    background-color: var(--warning);
    border-radius: 50%;
}

/* Template Editor */
.prod-tpl-hint {
    font-size: 11px;
    margin-bottom: 5px;
    opacity: 0.8;
}

.prod-tpl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 4px 0;
}

.prod-tpl-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.prod-tpl-input {
    width: 75px;
    padding: 2px 5px;
    text-align: right;
    margin: 0;
    font-weight: bold;
    font-size: 13px;
    border: 1px solid var(--border);
}

.prod-tpl-unit {
    font-size: 11px;
    width: 15px;
    text-align: left;
}

/* Session Products */
.prod-session-empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 15px;
    border: 1px dashed var(--border);
    border-radius: 6px;
}

.prod-session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* History Statuses */
.prod-badge-draft {
    background: var(--warning);
    color: #000;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 6px;
}

.prod-row-draft {
    border-left: 3px solid var(--warning) !important;
}

/* Batch Details */
.prod-details-td {
    padding: 0;
    background: var(--surface-alt);
    border-bottom: 3px solid var(--primary);
}

.prod-details-wrap {
    padding: 30px;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-main);
}

.prod-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 15px;
}

.prod-details-title {
    margin: 0;
    font-size: 20px;
    color: var(--text-main);
}

.prod-details-vol {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.prod-details-cost-label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.prod-details-cost-val {
    font-size: 32px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.prod-details-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
}

.prod-cost-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.prod-cost-card {
    background: white;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

.prod-cost-card-mat {
    border-left: 5px solid var(--success);
}

.prod-cost-card-mach {
    border-left: 5px solid var(--warning);
}

.prod-cost-card-mold {
    border-left: 5px solid #007bff;
}

.prod-cost-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.prod-cost-title {
    font-weight: bold;
    color: var(--text-muted);
}

.prod-cost-val {
    font-size: 16px;
}

.prod-cost-bar-bg {
    background: var(--surface-hover);
    height: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
}

.prod-cost-bar-fill {
    height: 100%;
    background: var(--success);
}

.prod-cost-unit-mat {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px;
    border-radius: 6px;
    background: var(--surface-alt);
}

.prod-cost-unit-mach {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px;
    border-radius: 6px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
}

.prod-cost-unit-mold {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px;
    border-radius: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.prod-mat-table-wrap {
    background: var(--surface);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.prod-mat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.prod-mat-title {
    margin: 0;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.prod-mat-badge {
    background: var(--surface-hover);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.prod-table-modern {
    width: 100%;
    border-collapse: collapse;
}

.prod-th-styled {
    padding: 12px;
    border-bottom: 2px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
    text-align: left;
    background: var(--surface-alt);
}

.prod-th-right {
    text-align: right;
}

.prod-tr-styled {
    border-bottom: 1px solid var(--border);
}

.prod-td-styled {
    padding: 12px;
}

.prod-td-right {
    text-align: right;
}

.prod-mat-name {
    font-weight: 600;
    color: var(--text-main);
}

.prod-tfoot-styled {
    background: var(--surface-hover);
    border-top: 2px solid var(--border);
    font-weight: 900;
    color: var(--text-main);
}

.prod-tfoot-td {
    padding: 15px 12px;
}

/* MRP Dashboard */
.mrp-plan-row {
    border-bottom: 1px solid var(--border);
}

.mrp-plan-qty {
    text-align: right;
    color: var(--primary);
    font-weight: bold;
    font-size: 14px;
}

.mrp-deficit-row {
    border-bottom: 1px solid var(--border);
}

.mrp-card-block {
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
}

.mrp-card-header {
    background: var(--surface-alt);
    padding: 12px 15px;
    border-bottom: 2px solid var(--info);
}

.mrp-card-title {
    margin: 0;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mrp-title-badge {
    background: var(--info);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
}

/* Template Modal Table */
.prod-tpl-edit-th {
    padding: 12px 10px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    text-align: left;
}

.prod-tpl-edit-tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.prod-tpl-edit-tr:hover {
    background: var(--surface-alt);
}

.prod-tpl-edit-add-wrap {
    background: var(--surface-alt);
    padding: 18px;
    border-radius: 10px;
    border: 1px dashed var(--border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   21. СКЛАДЫ И СУШИЛКА
   ========================================================================== */

.inv-filter-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.inv-stock-card {
    border-top: 4px solid var(--info);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

/* Width utilities for stock table columns */
.inv-col-wh {
    width: 10%;
}

.inv-col-batch {
    width: 12%;
}

.inv-col-name {
    width: auto;
}

.inv-col-qty {
    width: 12%;
}

.inv-col-unit {
    width: 8%;
}

.inv-col-actions {
    width: 12%;
}

/* Grid utilities */
.inv-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.inv-grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Buttons */
.inv-reserve-btn {
    border-color: var(--warning);
    color: var(--warning-text);
}

.inv-reserve-btn.active {
    background-color: var(--warning);
    color: #000;
}

.inv-reserve-btn:hover {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

/* Reserve Transparency Badge */
.inv-reserve-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    vertical-align: middle;
}

.inv-reserve-badge:hover {
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    transform: translateY(-1px);
}

.inv-reserve-badge-slot {
    display: inline;
}

/* Reserve Detail Modal */
.inv-reserve-detail-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.inv-reserve-detail-metric {
    flex: 1;
    min-width: 140px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    text-align: center;
}

.inv-reserve-detail-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.inv-reserve-detail-value {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
}

.inv-reserve-detail-value--reserved {
    color: #b45309;
}

.inv-reserve-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.inv-reserve-detail-table thead th {
    padding: 10px 12px;
    background: var(--surface-alt);
    border-bottom: 2px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inv-reserve-detail-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.inv-reserve-detail-row:hover {
    background: var(--surface-alt);
}

.inv-hidden {
    display: none !important;
}

.inv-toolbar {
    align-items: flex-end;
    row-gap: 8px;
}

.inv-toolbar-btn,
.inv-toolbar-upload .inv-toolbar-btn,
.inv-toolbar-dropdown .inv-toolbar-btn {
    height: 38px;
    white-space: nowrap;
}

.inv-toolbar-date .input-modern {
    margin: 0;
}

.inv-toolbar-dropdown {
    position: relative;
}

.inv-toolbar-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    z-index: 1200;
}

@media (max-width: 1200px) {
    .inv-toolbar {
        align-items: flex-start;
        justify-content: flex-end;
        row-gap: 10px;
        column-gap: 8px;
    }

    .inv-toolbar-date {
        order: 1;
    }

    #btn-audit-mode {
        order: 2;
    }

    #audit-controls {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-end;
    }

    .inv-toolbar .hide-in-audit {
        order: 4;
    }
}

/* ==========================================================================
   22. ПРОДАЖИ И ИНВОЙСЫ
   ========================================================================== */
.sales-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.sales-tab-btn {
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    font-weight: bold;
    color: var(--text-muted);
    transition: 0.2s;
    white-space: nowrap;
}

.sales-tab-btn:hover {
    background: var(--surface-alt);
}

.sales-tab-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.sales-tab-content {
    display: none;
}

.sales-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.sales-hidden {
    display: none !important;
}

/* Checkout Grid — vertical single column */
.sales-checkout-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sales-two-cols {
    grid-template-columns: 1fr 1fr;
}

/* ─── Панель подбора товара (Кол-во / Цена / Итог | Кнопки) ─── */
.sales-qty-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 14px 24px;
    background: var(--surface-alt);
    border-radius: 10px;
    border: 1px solid var(--border);
    flex-wrap: wrap;
}

.sales-qty-fields {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.sales-qty-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sales-qty-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.sales-qty-input {
    width: 100px;
    height: 38px;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-main);
    font-size: 14px;
    padding: 0 8px;
}

.sales-price-input {
    width: 120px;
    height: 38px;
    text-align: right;
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-main);
    font-size: 14px;
    padding: 0 10px;
}

.sales-qty-input:focus,
.sales-price-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.15);
}

.sales-qty-meta {
    line-height: 1.3;
}

.sales-qty-unit {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: var(--primary);
}

.sales-qty-stock {
    font-size: 11px;
    color: var(--text-muted);
}

.sales-qty-currency {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.sales-live-preview-pill {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sales-live-cost {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary);
    white-space: nowrap;
}

.sales-qty-separator {
    width: 1px;
    align-self: stretch;
    min-height: 38px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 4px;
}

.sales-qty-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.sales-btn-calc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-width: 170px;
    padding: 0 20px;
    font-size: 13px;
}

.sales-btn-add {
    height: 38px;
    min-width: 200px;
    padding: 0 30px;
    font-weight: 700;
    font-size: 14px;
}
/* --- 22.4 Стабильное выпадающее меню --- */
.sales-dropdown {
    position: relative;
    display: inline-block;
}

.sales-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--surface);
    min-width: 240px;
    /* Немного расширил для удобства */
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    /* Подняли выше всех элементов */
    border-radius: 8px;
    top: 100%;
    /* Плотно прижимаем к кнопке */
    right: 0;
    border: 1px solid var(--border);
    padding: 5px 0;
    /* Внутренний отступ для красоты */
}

/* 🚀 "Невидимый мост" — устраняет закрытие при движении мыши в зазоре */
.sales-dropdown-content::before {
    content: "";
    position: absolute;
    top: -15px;
    /* Заходит под основную кнопку на 15px */
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

/* Стили кнопок внутри меню (исправляет сжатый вид на скриншоте) */
.sales-dropdown-content button {
    color: var(--text-main);
    padding: 10px 16px;
    display: flex;
    /* Чтобы иконка и текст были в ряд */
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}

.sales-dropdown-content button:hover {
    background-color: var(--surface-hover);
    color: var(--primary);
}

/* Показ при наведении */
.sales-dropdown:hover .sales-dropdown-content {
    display: block;
}

/* Kanban Styles Extension */
.sales-kanban-board {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.kanban-column {
    background: var(--surface-alt);
    border-radius: 10px;
    min-width: 320px;
    flex: 1;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.kanban-column-title {
    margin: 0;
    padding: 15px;
    background: var(--surface);
    border-bottom: 2px solid var(--border);
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px 10px 0 0;
}

.kanban-count {
    background: var(--border);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
}

.kanban-items-container {
    padding: 15px;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- 22.5 Компактная панель иконок (Action Bar) --- */
.sales-input-group {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: stretch;
}

.sales-input-select-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.sales-action-bar {
    flex: 0 0 auto;
    width: max-content;
    display: flex;
    align-items: stretch;
    /* ⬅️ ДОБАВЛЕНО: Растягиваем дочерние элементы по вертикали */
    gap: 2px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
}

.sales-action-bar .btn-action {
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 0 8px;
    margin: 0;
    height: 100%;
    /* ⬅️ ДОБАВЛЕНО: Кнопка забирает всю доступную высоту */
    min-height: 36px;
    /* ⬅️ ДОБАВЛЕНО: Страховка от схлопывания в Safari/Firefox */
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-action-bar .btn-action:hover {
    background: var(--surface-hover);
}

.sales-action-divider {
    width: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* ==========================================================================
   23. КАДРЫ И ЗАРПЛАТА (HR & Payroll Module)
   ========================================================================== */

/* --- 23.1 Аккордеоны (цветная левая полоса по типу) --- */
.hr-accordion-success {
    border-left: 4px solid var(--success);
}

.hr-accordion-danger {
    border-left: 4px solid var(--danger);
}

.hr-accordion-primary {
    border-left: 4px solid var(--primary);
}

.hr-accordion-warning {
    border-left: 4px solid var(--warning);
}

/* --- 23.2 Панель инструментов (фильтры и кнопки) --- */
.hr-toolbar-panel {
    padding: 10px;
    border-radius: 8px;
}

.hr-toolbar-filters {
    max-width: 600px;
}

/* --- 23.3 Выпадающий список отдела --- */
.hr-dep-select {
    width: 150px;
}

/* --- 23.4 Колонка действий (фиксированная ширина) --- */
.hr-action-col {
    width: 80px;
}

/* --- 23.5 Колонка сотрудника в ведомости --- */
.hr-employee-col {
    width: 20%;
}

/* --- 23.6 Поле выбора месяца в табеле --- */
.hr-month-picker {
    width: 160px;
    font-weight: bold;
}

/* --- 23.7 Поиск по табелю (ограниченная ширина) --- */
.hr-ts-search {
    max-width: 250px;
}

/* --- 23.8 Подсказка-легенда кликов по ячейкам --- */
.hr-hint-text {
    font-size: 11px;
    max-width: 120px;
    line-height: 1.2;
    color: var(--text-muted);
}

/* --- 23.9 Контейнер табеля (горизонтальный скролл) --- */
.hr-timesheet-wrapper {
    overflow-x: auto;
}

/* --- 23.10 Таблица табеля (фиксированная мин. ширина для горизонтального скролла) --- */
.hr-timesheet-table {
    min-width: 1200px;
}

/* --- 23.11 Ячейка загрузки (заглушка) --- */
.hr-loading-cell {
    padding: 20px;
}

/* --- 23.12 Секция уволенных сотрудников (фон-предупреждение) --- */
.hr-fired-section {
    background: var(--danger-bg);
}

/* --- 23.13 Таблица табеля: заголовки и ячейки --- */
.hr-ts-sticky-name {
    position: sticky;
    top: 0;
    left: 0;
    background: var(--surface-alt);
    z-index: 30;
    border-right: 2px solid var(--border);
    min-width: 250px;
    vertical-align: middle;
}

.hr-ts-day-th {
    position: sticky;
    top: 0;
    z-index: 20;
    text-align: center;
    padding: 6px 2px;
    min-width: 35px;
    border-bottom: 2px solid var(--border);
    background: var(--surface-alt);
}

.hr-ts-day-name {
    font-size: 10px;
    opacity: 0.8;
    font-weight: normal;
    margin-bottom: 3px;
}

.hr-ts-weekend-head {
    color: var(--danger);
}

.hr-ts-today-head {
    color: var(--primary);
    font-weight: 800;
    border-bottom: 2px solid var(--primary) !important;
}

.hr-ts-summary-head {
    position: sticky;
    top: 0;
    z-index: 20;
    text-align: right;
    background: var(--surface-alt);
    border-left: 2px solid var(--border);
    vertical-align: middle;
}

.hr-ts-dept-row {
    background: var(--surface-hover);
    font-weight: bold;
    padding: 8px 15px;
    color: var(--text-main);
}

/* --- 23.14 Sticky-ячейка имени сотрудника в табеле --- */
.hr-ts-sticky-cell {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 10;
    border-right: 2px solid var(--border);
    padding: 8px 15px;
}

/* --- 23.15 Ячейка дня табеля --- */
.hr-ts-cell-td {
    padding: 4px;
    border-bottom: 1px solid var(--border);
}

.hr-weekend-bg {
    background: var(--surface-alt);
}

.hr-today-cell {
    border-left: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
    background: var(--surface-hover);
}

.hr-ts-cell-wrap {
    position: relative;
    width: max-content;
    margin: 0 auto;
}

.hr-fired-faded {
    opacity: 0.4;
}

.hr-cell-active {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.hr-cell-locked {
    cursor: not-allowed;
}

/* --- 23.16 Индикаторные точки (премия/штраф) в ячейках --- */
.hr-ts-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.hr-ts-dot-bonus {
    top: -2px;
    right: -2px;
    background: var(--success);
}

.hr-ts-dot-penalty {
    bottom: -2px;
    right: -2px;
    background: var(--danger);
}

/* --- 23.17 Итоговая ячейка табеля (справа) --- */
.hr-ts-summary-cell {
    text-align: right;
    padding: 8px 12px;
    background: var(--surface-alt);
    border-left: 2px solid var(--border);
}

/* --- 23.18 Строка выплат: статусы и ячейки --- */
.hr-payout-positive {
    background: var(--success-bg);
    color: var(--success-text);
}

.hr-payout-negative {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.hr-adj-cell {
    cursor: pointer;
    background: var(--warning-bg);
}

.hr-adj-btn {
    padding: 4px;
    font-size: 12px;
}

.hr-pay-btn {
    padding: 6px 12px;
    font-size: 12px;
}

/* --- 23.19 Кнопки действий в строках таблиц --- */
.hr-row-btn {
    padding: 4px 8px;
    font-size: 12px;
    display: flex;
    justify-content: center;
}

.hr-fired-row {
    opacity: 0.8;
}

/* --- 23.20 Бейдж отдела в таблице сотрудников --- */
.hr-dept-badge {
    background: var(--surface-hover);
    color: var(--text-main);
    font-size: 11px;
    border: 1px solid var(--border);
}

/* --- 23.21 Поле налогов в подвале таблицы выплат --- */
.hr-taxes-input {
    width: 120px;
    text-align: right;
}

/* --- 23.22 Форма сотрудника: выделенные секции --- */
.hr-form-cash-block {
    background: var(--success-bg);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed var(--success);
    grid-column: span 2;
}

.hr-form-official-block {
    background: var(--surface-alt);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed var(--text-muted);
    grid-column: span 2;
}

.hr-form-status-block {
    background: var(--danger-bg);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed var(--danger);
    grid-column: span 2;
}

.hr-form-balance-block {
    background: var(--surface-hover);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed var(--primary);
    grid-column: span 2;
}

.hr-form-live-balance {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 13px;
}

/* --- 23.23 Модал выдачи зарплаты --- */
.hr-payout-hero {
    background: var(--success-bg);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--success-border);
    margin-bottom: 20px;
    text-align: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.hr-payout-hero-label {
    font-size: 13px;
    color: var(--success-text);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}

.hr-payout-hero-amount {
    font-size: 36px;
    font-weight: 900;
    color: var(--success);
    margin: 10px 0;
}

.hr-debt-block {
    background: var(--warning-bg);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--warning-border);
    margin-bottom: 15px;
}

/* --- 23.24 Сдельная ЗП: модал начисления --- */
.hr-piece-info-block {
    background: var(--bg-main);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.hr-piece-fund-label {
    font-size: 13px;
    color: var(--primary);
    font-weight: bold;
}

.hr-piece-fund-value {
    color: var(--primary);
    font-size: 24px;
}

.hr-piece-crew-scroll {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.hr-piece-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

/* --- 23.25 Adj modal --- */
.hr-adj-history-block {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.hr-adj-new-block {
    border: 1px dashed var(--warning);
    padding: 15px;
    border-radius: 8px;
    background: var(--warning-bg);
}

/* --- 23.26 Доп. элементы --- */
.hr-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.position-sticky-top {
    position: sticky;
    top: 0;
}

.z-10 {
    z-index: 10;
}

/* ============================================================
   24. СПРАВОЧНИКИ (REFERENCES)
   ============================================================ */

/* --- 24.1 dict-filter-grid: см. основной блок выше (flex-row + responsive) --- */

/* --- 24.2 Панель формы (карточка) с синей левой границей. Видимость: d-none в HTML + classList в references.js --- */
.dict-form-panel {
    border-left: 4px solid var(--primary);
    position: relative;
}

/* --- 24.3 Поле артикула — подсветка основным цветом --- */
.dict-article-input {
    border-color: var(--primary);
    background-color: var(--bg-main);
}

/* --- 24.4 Обёртка datalist-инпута с кнопкой раскрытия --- */
.dict-datalist-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dict-datalist-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #64748b;
    font-size: 12px;
    padding: 5px;
}

/* --- 24.5 Блок сдельной ставки (зелёный дашборд) --- */
.dict-piece-rate-block {
    background: var(--surface-bg);
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed var(--success);
}

/* --- 24.6 Блок архитектуры составов (серый) --- */
.dict-mix-block {
    background: var(--surface-alt);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* --- 24.7 Сетка 2-колонки состава (шаблоны слоёв) --- */
.dict-mix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* --- 24.8 Кнопка сохранения позиции --- */
.dict-save-btn {
    height: 42px;
}

/* --- 24.9 Колонки таблицы Справочника --- */
.dict-col-id {
    width: 5%;
}

.dict-col-type {
    width: 8%;
}

.dict-col-cat {
    width: 15%;
}

.dict-col-article {
    width: 12%;
}

.dict-col-name {
    width: 30%;
}

.dict-col-unit {
    width: 10%;
}

.dict-col-price {
    width: 10%;
}

.dict-col-actions {
    width: 10%;
}

/* --- 24.10 Дополнительные утилиты, специфичные для модуля --- */
.mb-0 {
    margin-bottom: 0;
}

.mb-5 {
    margin-bottom: 5px;
}

.line-height-12 {
    line-height: 1.2;
}

/* --- 24.11 Строка таблицы --- */
.ref-table-row {
    transition: background 0.15s;
}

.ref-table-row:hover {
    background: var(--surface-hover);
}

/* --- 24.12 Ячейка артикула (моноширинный шрифт) --- */
.dict-article-cell {
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    color: var(--primary);
}

/* --- 24.13 Бейдж «Продукция» --- */
.badge-product {
    background: var(--primary-bg, rgba(59, 130, 246, 0.12));
    color: var(--primary);
    border: 1px solid var(--primary);
}

/* --- 24.14 Бейдж «Сырье / Материал» --- */
.badge-material {
    background: var(--surface-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* --- 24.15 Кнопки действий в строке таблицы --- */
.dict-row-btn {
    padding: 4px 8px;
    font-size: 12px;
}

/* --- 24.16 Утилиты, специфичные для модуля --- */
.text-border {
    color: var(--border);
}

.font-normal {
    font-weight: normal;
}

.mr-5 {
    margin-right: 5px;
}

/* ============================================================
   25. ЗАКУПКИ И ПРИЕМКА (PURCHASE)
   ============================================================ */

/* --- 25.0 Сетка формы закупки (6 колонок) --- */
.pur-form-grid {
    grid-template-columns: repeat(6, 1fr);
}

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

/* --- 25.1 Главная панель прихода --- */
.pur-main-panel {
    border-left: 4px solid var(--primary);
}

/* --- 25.2 Информер по материалу (остатки) --- */
.pur-material-infobox {
    margin-top: 6px;
    font-size: 12px;
    padding: 6px 10px;
    background: var(--surface-alt);
    border-radius: 6px;
    border: 1px dashed var(--border);
}

/* --- 25.3 Поиск поставщика (рядом кнопка +) --- */
.pur-supplier-flex {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.pur-supplier-btn {
    padding: 0 18px;
    font-weight: bold;
    font-size: 16px;
    border-color: var(--border);
    color: var(--primary);
}

/* --- 25.4 Блок с чекбоксом доставки --- */
.pur-delivery-toggle-wrap {
    margin-top: 5px;
    padding-top: 15px;
    border-top: 1px dashed var(--border);
}

.pur-delivery-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: bold;
    color: var(--primary);
    margin: 0;
}

.pur-delivery-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* --- 25.5 Поля доставки --- */
.pur-delivery-fields-grid {
    grid-column: span 3;
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 8px;
    gap: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 5px;
}

/* --- 25.6 Финальный итог (Итого за сырье) --- */
.pur-summary-box {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: var(--surface-alt);
    border-radius: 8px;
    border: 1px dashed var(--border);
}

.pur-total-input {
    width: 140px;
    margin: 0;
    text-align: right;
    font-size: 18px;
    font-weight: 900;
    color: var(--primary);
}

/* --- 25.7 Кнопки формы --- */
.pur-submit-flex {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.pur-btn-ok {
    padding: 14px;
    font-weight: bold;
}

.pur-btn-cancel {
    padding: 14px;
    border-color: var(--danger);
    color: var(--danger);
    font-weight: bold;
}

/* --- 25.8 История приходов (шапка) --- */
.pur-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.pur-search-wrap {
    position: relative;
    width: 350px;
}

.pur-search-icon {
    position: absolute;
    left: 12px;
    top: 10px;
    opacity: 0.5;
}

.pur-search-input {
    padding-left: 35px;
    margin: 0;
    border-radius: 20px;
}

/* --- 25.9 Таблица истории: Итоги за день (футер) --- */
.pur-daily-summary-foot {
    background: var(--surface-alt);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.pur-daily-summary-row td {
    padding: 15px 10px;
}

.pur-th-date {
    color: var(--primary);
}

.pur-date-input {
    width: 140px;
    cursor: pointer;
}

/* --- 25.10 Утилиты --- */
.mb-2 {
    margin-bottom: 2px;
}

.min-w-0 {
    min-width: 0;
}

.d-block {
    display: block;
}

.w-25 {
    width: 25%;
}

.w-10 {
    width: 10%;
}

/* --- 25.11 UI-утилиты для JS (Flatpickr, Модалки, Таблицы) --- */
.pur-active-date-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--success);
    border-radius: 50%;
}

.pur-modal-details-box {
    background: var(--surface-alt);
    padding: 15px;
    border-radius: 6px;
    border: 1px dashed var(--border);
}

.pur-modal-total-box {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}

.pur-table-row:hover {
    background: var(--surface-hover);
}

.pur-row-btn {
    padding: 4px 8px;
    font-size: 14px;
}

.white-space-nowrap {
    white-space: nowrap;
}

.border-border {
    border-color: var(--border);
}

/* ============================================================
   26. ДОКУМЕНТЫ И РЕЕСТР (DOCS REGISTRY)
   ============================================================ */

/* --- 26.1 Панель фильтров реестра --- */
.docs-filter-panel {
    padding: 10px;
    border-radius: 8px;
    flex-wrap: wrap;
    gap: 10px;
}

.docs-filter-group {
    gap: 10px;
    flex-grow: 1;
}

/* --- 26.2 Элементы фильтра --- */
.docs-client-select {
    min-width: 250px;
}

.docs-apply-btn {
    padding: 8px 15px;
}

/* --- 26.3 Опции (чекбокс) --- */
.docs-option-wrap {
    display: inline-block;
    margin-left: 15px;
    margin-bottom: 0;
}

.docs-option-label {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- 26.4 Таблица реестра: Ширины колонок --- */
.docs-col-check {
    width: 40px;
    text-align: center;
}

.docs-col-date {
    width: 140px;
}

.docs-col-docnum {
    width: 150px;
}

.docs-col-total {
    min-width: 160px;
}

.docs-col-author {
    min-width: 180px;
}

.docs-col-status {
    min-width: 140px;
}

.docs-col-actions {
    width: 45px;
}

/* --- 26.5 Стили рендера таблицы JS --- */
.docs-tbl-row {
    transition: background 0.15s;
}

.docs-tbl-row:hover {
    background: var(--surface-hover);
}

.docs-locked-icon {
    cursor: help;
}

.docs-locked-row {
    background-color: var(--surface-alt);
    color: var(--text-muted);
}

.docs-cancelled-row {
    color: #94a3b8;
    text-decoration: line-through;
    opacity: 0.7;
}

.docs-delete-btn {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 14px;
}
.sales-client-card { background: var(--bg-surface); transition: all 0.2s ease; }
.sales-client-card:hover { border-color: var(--primary) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.client-stat-box { flex: 1; min-width: 120px; }
.flex-align-end { display: flex; align-items: flex-end; justify-content: flex-end; }

/* ==========================================================================
   DASHBOARD REFACTORING (AUDIT-011) 
   ========================================================================== */

/* Utility: Layout */
.w-full { width: 100%; }
.m-0 { margin: 0; }
.mr-10 { margin-right: 10px; }
.p-0 { padding: 0; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.h-26 { height: 26px; }
.font-600 { font-weight: 600; }
.block { display: block; }
.mb-10 { margin-bottom: 10px; }

/* Grid Components */
.dash-form-grid-2 {
    grid-template-columns: 1fr 1fr;
}

/* Accordion States */
.dash-acc-icon {
    user-select: none;
}
.dash-acc-body {
    padding: 0 15px 15px 15px;
    border-top: 1px dashed var(--border);
}
.dash-widget-list {
    font-size: 13px;
    color: var(--text-muted);
}
.dash-widget-list-tall {
    min-height: 50px;
}

/* Drilldown Specific */
.dash-drill-container-wrap {
    overflow: hidden;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
}
.dashboard-tabs-content {
    display: flex;
    width: 300%;
    transition: transform 0.4s ease-in-out, max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    align-items: flex-start;
    overflow: hidden;
}
.dash-tab-panel {
    width: 33.333%;
    box-sizing: border-box;
}
.dash-tab-panel-1 { padding-right: 20px; }
.dash-tab-panel-2 { padding-right: 10px; padding-left: 10px; }
.dash-tab-panel-3 { padding-left: 20px; }

/* Dashboard Typography & Decorations */
.dash-financial-header {
    text-transform: uppercase;
}
.dash-info-badge {
    background: var(--info-bg);
    border-radius: 4px;
}
.dash-heavy-amount {
    font-weight: 900;
    line-height: 1;
}

/* Inputs */
.dash-period-input { padding: 4px 6px; font-size: 13px; border-radius: 6px; height: 32px; }
.dash-period-input-date { width: 130px; }


/* ==========================================================================
   PRODUCTION & RECIPES REFACTORING (AUDIT-011) 
   ========================================================================== */

/* Layout & Utils */
.w-120 { width: 120px; }
.w-140 { width: 140px; }
.w-60 { width: 60px; }
.w-80 { width: 80px; }
.h-auto { height: auto; }
.w-12p { width: 12%; }
.w-13p { width: 13%; }
.w-15p { width: 15%; }
.w-30p { width: 30%; }
.italic { font-style: italic; }
.table-footer { display: table-footer-group; }
.table-cell { display: table-cell; }

/* Production Specific */
.prod-chart-bar-warning { border-color: var(--warning-text); color: var(--warning-text); }
.prod-chart-bar-primary { border-color: var(--primary); }
.prod-status-info { font-size: 16px; font-weight: bold; white-space: nowrap; margin-right: 5px; }
.prod-total-table-row { font-weight: bold; text-align: right; }
.prod-total-table-row td { border-bottom: 2px solid var(--border); }
.prod-print-col-hidden { display: none; width: 12%; } 

/* Recipes Specific */
.rec-filter-container { display: flex; gap: 15px; border-bottom: 2px solid var(--border); padding-bottom: 30px; margin-bottom: 30px; }
.rec-primary-outline { border-color: var(--primary); color: var(--primary); }
.rec-action-btn { font-weight: bold; border-radius: 8px; padding: 12px 24px; }
.rec-grid-header { grid-template-columns: 1fr 2fr; align-items: start; gap: 24px; }
.rec-section-title { border-left: 4px solid var(--primary); font-size: 16px; }
.rec-dash-box { background: var(--surface); padding: 12px; border-radius: 8px; border: 1px dashed var(--border); margin-top: 15px; }
.rec-step-header { font-size: 15px; font-weight: bold; padding-top: 10px; border-top: 1px dashed var(--border); }
.rec-step-footer { align-items: center; padding-bottom: 20px; border-bottom: 1px dashed var(--border); }
.rec-badge { padding: 6px 12px; font-size: 13px; font-weight: bold; border-radius: 6px; }
.rec-cost-panel { margin-top: 15px; margin-bottom: 25px; background: var(--surface-alt); padding: 20px; border-radius: 8px; }
.rec-cost-param { display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap; }
.rec-table-input { width: 80px; text-align: right; padding: 6px 10px; font-weight: bold; color: var(--primary); }
.rec-delete-btn { padding: 4px 8px; font-size: 13px; color: var(--danger); border-color: var(--danger); }
.rec-modal-content { max-height: 480px; overflow-y: auto; padding-right: 10px; }
.rec-acc-item { margin-bottom: 15px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.rec-acc-header { background: var(--surface-alt); padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.rec-acc-body { padding: 15px; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--surface); }
.rec-danger-btn { background: var(--danger); border-color: var(--danger); color: white; }
.rec-guidance-box { font-size: 13px; margin-top: 15px; background: var(--surface-alt); padding: 15px 30px; border-radius: 6px; color: var(--text-main); max-height: 140px; overflow-y: auto; border: 1px dashed var(--border); }
.rec-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rec-dropdown-list { max-height: 250px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }

/* Forms */
.input-left-rounded { border-radius: 8px 0 0 8px; }
.input-right-rounded { border-radius: 0 8px 8px 0; }

.opacity-60 { opacity: 0.6; }
.opacity-50 { opacity: 0.5; }
.no-pointer { pointer-events: none; }
.whitespace-nowrap { white-space: nowrap; }
.border-bottom-dashed { border-bottom: 2px solid var(--border) !important; }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.flex-2 { flex: 2; }
.min-w-200 { min-width: 200px; }
.min-w-120 { min-width: 120px; }
.min-w-140 { min-width: 140px; }
.h-42 { height: 42px; }
.px-25 { padding-left: 25px; padding-right: 25px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.bg-surface-alt { background: var(--surface-alt); }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.border-dashed { border: 1px dashed var(--border); }
.border-rounded { border-radius: 6px; }
.bg-border { background: var(--border); }
.text-main { color: var(--text-main); }
.bg-warning { background: var(--warning); }
.text-warning { color: var(--warning-text); }

.hidden-print-frame { position:absolute; width:0; height:0; border:none; }



/* ==========================================================================
   ADMIN HUB — Центр Управления
   ========================================================================== */

/* Табы админки */
.admin-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 12px;
    flex-wrap: wrap;
}

.admin-tab {
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    transition: all 0.2s;
}

.admin-tab:hover { background: var(--surface-hover); }
.admin-tab.active { background: var(--primary); color: white; border-color: var(--primary); }

/* Панели контента */
.admin-panel { display: none; animation: fadeIn 0.3s ease; }
.admin-panel.active { display: block; }

/* Секции */
.admin-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-section-header h3 { margin: 0; font-size: 16px; }
.admin-actions { display: flex; gap: 8px; }

/* Карточки */
.admin-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.admin-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.admin-card-icon { font-size: 36px; margin-bottom: 10px; }
.admin-card-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.admin-card-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }

/* Метрики */
.admin-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.admin-metric {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.admin-metric-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.admin-metric-value { font-size: 18px; font-weight: 700; color: var(--text-main); }
.admin-metric-value small { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.admin-metric-value.text-success { color: var(--success); }
.admin-metric-value.text-danger { color: var(--danger); }

/* Прогресс-бар метрик */
.admin-metric-bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.admin-metric-fill {
    height: 100%;
    background: var(--success);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.admin-metric-fill.warning { background: var(--warning); }
.admin-metric-fill.danger { background: var(--danger); }

/* Терминал для логов */
.admin-terminal {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.admin-terminal pre {
    color: #c9d1d9;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.admin-log-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Экспорт — сетка кнопок */
.admin-export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.admin-export-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.admin-export-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.admin-export-icon { font-size: 28px; }

/* Бейджи действий */
.badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; display: inline-block; }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-info { background: rgba(59, 130, 246, 0.1); color: var(--primary); }

/* Пагинация */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Input в настройках */
.admin-setting-input {
    max-width: 300px;
}

/* ==========================================================================
   КАРТОЧКА ПРОСЛЕЖИВАЕМОСТИ ПАРТИИ (Batch Traceability Card)
   ========================================================================== */
.batch-modal {
    max-width: 820px;
}

.batch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.batch-header-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
}

.batch-header-badges {
    display: flex;
    gap: 8px;
    align-items: center;
}

.batch-status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.batch-status-drying {
    background: var(--success-bg);
    color: var(--success);
}

.batch-status-partial {
    background: var(--warning-bg);
    color: var(--warning);
}

.batch-status-closed {
    background: var(--surface-alt);
    color: var(--text-muted);
}

.batch-age-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    background: var(--surface-alt);
    color: var(--text-secondary);
}

.batch-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.batch-order-card,
.batch-progress-card,
.batch-section-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
}

.batch-order-card {
    border-left: 4px solid var(--primary);
}

.batch-progress-bar {
    width: 100%;
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 0;
}

.batch-progress-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--success), var(--primary));
    transition: width 0.5s ease;
}

.batch-section-card {
    margin-top: 15px;
}

.batch-section-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.batch-movement-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.batch-movement-row:last-child {
    border-bottom: none;
}

.batch-movement-in {
    color: var(--success);
    font-weight: bold;
}

.batch-movement-out {
    color: var(--warning);
    font-weight: bold;
}

.batch-cost-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.batch-cost-row:last-child {
    border-bottom: none;
    font-weight: 900;
    font-size: 14px;
    padding-top: 10px;
}

.batch-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.batch-analytics-item {
    text-align: center;
    padding: 12px 10px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.batch-analytics-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.batch-analytics-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    text-transform: uppercase;
}

/* =========================================================
   MOVEMENT CARDS (ИНВЕНТАРИЗАЦИОННАЯ КАРТОЧКА ДВИЖЕНИЯ)
   ========================================================= */
.movement-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.movement-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.movement-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.movement-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mc-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.mc-badge-in {
    background-color: var(--success);
}

.mc-badge-out {
    background-color: var(--warning);
}

.mc-badge-transfer {
    background-color: var(--primary);
}

.movement-route {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface-alt);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.movement-route-arrow {
    color: var(--primary);
    font-size: 16px;
    font-weight: bold;
}

.movement-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}


.movement-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; position: relative; overflow: hidden; }
.movement-card .mc-left { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.movement-card .mc-right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 150px; gap: 4px; }
.mc-meta { display: flex; gap: 15px; font-size: 13px; color: var(--text-muted); }
.mc-route-badge { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.movement-route-arrow { color: var(--text-muted); font-size: 12px; }
.mc-link .chip { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--bg-surface-alt); border: 1px solid var(--border); border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; transition: all 0.2s ease; margin-top: 4px; }
.mc-link .chip:hover { background: var(--primary-light); border-color: var(--primary); }
.mc-desc { font-size: 13px; color: var(--text); font-style: italic; }
.mc-amount { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
.mc-amount.in { color: var(--success); }
.mc-amount.out { color: var(--danger); }
.mc-balance { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.mc-finance { font-size: 12px; color: var(--text-muted); opacity: 0.85; }

.movement-card .mc-left { gap: 10px; }
.movement-card .mc-right { gap: 8px; }
.mc-meta { margin-bottom: 2px; }
.mc-route-badge { margin: 4px 0; }
.movement-route-arrow { margin: 0 4px; }

/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f (\u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442 inline-\u0441\u0442\u0438\u043b\u0438) */
.chip-sep { display: inline-block; width: 4px; }
.mc-amount-sm { font-size: 13px; color: var(--text-muted); }
.mc-summary-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 5px 0; }
.mc-summary-balance { font-size: 15px; color: var(--text-main); }
.mc-summary-balance b { font-size: 16px; font-weight: 700; }
.mc-summary-totals { display: flex; gap: 20px; align-items: center; font-size: 13px; }

/* --- Банковский реестр (Новый дизайн Карточки Движения) --- */
.mc-start-balance {
    background: var(--surface-alt);
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 13px;
    color: var(--text-main);
    display: flex;
}

/* --- Группировка и монолитность --- */
.mc-group-header {
    background: var(--surface-alt);
    padding: 8px 12px;
    margin-top: 15px;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    font-weight: bold;
    color: var(--text-main);
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
    align-items: center;
}

.mc-gh-date { color: var(--text-muted); font-weight: normal; }
.mc-gh-client { color: var(--text-muted); font-weight: normal; }

/* Компактная строка (Строгая двухстрочная Grid-сетка) */
.movement-card.mc-compact {
    padding: 8px 12px;
    margin-bottom: 0;
    border-radius: 0;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: transparent; /* Убираем сплошную заливку */
    display: grid;
    grid-template-columns: 75px 100px 1fr 160px 150px;
    row-gap: 4px;
    column-gap: 10px;
    align-items: baseline; /* Выравнивание по верхней базовой линии */
    font-size: 12px;
}

.movement-card.mc-compact:last-child {
    border-radius: 0 0 6px 6px;
    margin-bottom: 12px;
}

.mc-compact-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Колонки первой строки */
.mc-col-time { grid-column: 1; color: var(--text-main); }
.mc-col-user { grid-column: 2; color: var(--text-muted); }
.mc-col-amount {
    grid-column: 4;
    text-align: right;
    font-weight: 700;
    font-size: 13px;
}
.mc-col-balance {
    grid-column: 5;
    text-align: right;
    color: var(--text-muted);
}

/* Раскраска цифр (Вместо заливки фона) */
.mc-col-amount.text-success { color: var(--success); }
.mc-col-amount.text-danger { color: var(--danger); }

/* --- Вторая строка: Описание (Строгая защита от переноса) --- */
.movement-card.mc-compact .mc-col-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--text-main);
    font-size: 13px;
    padding-top: 4px;
    display: block; 
    width: 100%;
    min-width: 0; /* Обязательно для работы ellipsis внутри Grid-ячейки */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

/* --- Премиальная ссылка (Без подчеркиваний, нативный сдвиг) --- */
.movement-card.mc-compact .mc-col-desc .mc-link-text {
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline; /* Строго inline для монолитной строки, запрет на перенос */
    position: relative; /* Позволяет делать сдвиг (top) без transform и inline-block */
    top: 0;
    transition: top 0.2s ease, color 0.2s ease;
}

.movement-card.mc-compact .mc-col-desc .mc-link-text:hover {
    color: var(--primary-dark);
    text-decoration: none;
    top: -1px; /* Эффект левитации при hover, работающий даже на inline элементах */
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .movement-card.mc-compact {
        grid-template-columns: 1fr 1fr;
    }
    .mc-col-time { grid-column: 1; }
    .mc-col-user { grid-column: 2; text-align: right; align-items: flex-end; }
    .mc-col-amount { grid-column: 1; text-align: left; align-items: flex-start; }
    .mc-col-balance { grid-column: 2; }
}

/* Жёсткий каркас модалки истории движения */
#modal-item-history .modal-content {
    max-height: 90vh;
}

#modal-item-history .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Выключаем скролл самого body, чтобы фильтры не уезжали */
    max-height: none; /* сброс базовых 75vh из .modal-body */
}

#modal-item-history .filter-panel {
    flex-shrink: 0; /* Жестко фиксируем высоту панели фильтров */
}

#modal-item-history .history-feed-container {
    flex: 1;
    min-height: 0; /* Обязательно для работы flex скролла */
    overflow-y: auto; /* Включаем локальный скролл ленты транзакций */
}

#modal-item-history .modal-footer {
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background-color: var(--surface);
}

#history-table-body {
    display: flex;
    flex-direction: column;
}

/* --- Утилиты для Sales модуля (Избавление от инлайн стилей) --- */
.bg-surface-alt { background: var(--bg-surface-alt); }
.border-b { border-bottom: 1px solid var(--border-color); }
.border-b-2 { border-bottom: 2px solid var(--border-color); }

/* ==========================================================================
   EQUIPMENT MODULE — семантические классы (замена инлайн-стилей)
   ========================================================================== */

/* Карточка с акцентной полосой сверху */
.eq-card-accent {
    border-top: 4px solid var(--primary);
    padding: 0;
}

/* Ширина колонок таблицы оборудования */
.eq-col-id { width: 50px; }
.eq-col-resource { width: 220px; }

/* Ячейка-заглушка при загрузке */
.eq-loading-cell { padding: 30px; }

/* Модалки оборудования */
.eq-modal-md { max-width: 500px; }
.eq-modal-sm { max-width: 450px; }

/* Сетка 3 колонки (стоимость / план / факт) */
.eq-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Подсказка под полями ресурса */
.eq-hint-text {
    font-size: 11px;
    margin-bottom: 15px;
}

/* Название оборудования в модалке ТО */
.eq-maint-name {
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 15px;
}

/* Группа сброса счётчика износа */
.eq-reset-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--danger-bg);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--danger-border);
}

.eq-reset-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.eq-reset-label {
    color: var(--danger-text);
    margin: 0;
    cursor: pointer;
    font-size: 13px;
}

/* ==========================================================================
   FINANCE MODULE — утилита для period-selector
   ========================================================================== */
.finance-period-selector {
    display: flex;
    gap: 8px;
}

/* Цвет суммы: положительная / отрицательная */
.fin-sum-positive { color: var(--success); }
.fin-sum-negative { color: var(--danger); }
.border-t-2 { border-top: 2px solid var(--border-color); }
.border-r { border-right: 1px solid var(--border-color); }
.border-r-dashed { border-right: 1px dashed var(--border-color); }
.border-b-dashed { border-bottom: 1px dashed var(--border-color); }
.border-dashed { border: 1px dashed var(--border-color); }
.border-primary { border-color: var(--primary); }
.border-success { border-color: var(--success); }

.text-orange { color: #e65100; }
body.dark-theme .text-orange { color: #ff9800; } /* Dark mode compatibility */

.text-warning-dark { color: #b45309; }
body.dark-theme .text-warning-dark { color: #fcd34d; }

.alert-warning { background: #fffbeb; border: 1px solid #fde68a; }
body.dark-theme .alert-warning { background: rgba(217, 119, 6, 0.1); border-color: rgba(217, 119, 6, 0.3); }

.bg-success { background: #059669; }
.text-white { color: #fff; }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }
.text-warning { color: var(--warning-text); }
.text-muted { color: var(--text-muted); }

.font-10 { font-size: 10px; }
.font-11 { font-size: 11px; }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-22 { font-size: 22px; }
.font-26 { font-size: 26px; }

.font-600 { font-weight: 600; }
.font-700, .font-bold { font-weight: 700; }
.font-900 { font-weight: 900; }

.td-center { text-align: center; }
.td-right { text-align: right; }
.text-left { text-align: left; }
.text-uppercase { text-transform: uppercase; }

.line-height-1 { line-height: 1; }
.line-height-1-2 { line-height: 1.2; }

.padding-6 { padding: 6px; }
.padding-8 { padding: 8px; }
.padding-10 { padding: 10px; }
.padding-15 { padding: 15px; }
.padding-y-4 { padding: 4px 0; }
.padding-7-6 { padding: 7px 6px; }
.padding-7-10 { padding: 7px 10px; }

.mt-3 { margin-top: 3px; }
.mt-5 { margin-top: 5px; }
.mt-20 { margin-top: 20px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.pb-6 { padding-bottom: 6px; }
.pb-8 { padding-bottom: 8px; }

.w-70 { width: 70px; }
.w-80 { width: 80px; }

.border-radius-6 { border-radius: 6px; }
.border-radius-8 { border-radius: 8px; }

.d-block { display: block; }
.badge-surface { background: var(--bg-surface-alt); padding: 4px 8px; border-radius: 6px; }
.bg-surface-hover { background: var(--surface-hover); }

/* --- Конец утилит Sales --- */

/* Production utility */
.shift-error-alert {
    white-space: pre-line;
    font-size: 14px;
    border-left: 5px solid #ef4444;
    background: #fef2f2;
    color: #991b1b;
    padding: 14px 18px;
    border-radius: 8px;
    margin: 12px 0;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

/* Finance table mobile fit: keep action buttons visible */
@media (max-width: 900px) {
    #transactions-table th:last-child,
    #transactions-table td:last-child {
        width: 110px;
        min-width: 110px;
        padding-right: 14px;
    }

    #transactions-table .tx-actions-cell {
        min-width: 88px;
        gap: 4px;
        justify-content: flex-end;
    }

    #transactions-table .tx-actions-cell .btn {
        padding: 4px;
        min-width: 28px;
        line-height: 1;
    }

    #transactions-table .tx-action-btn {
        width: 26px;
        height: 26px;
    }
}

.tx-amount-cell {
    padding-right: 14px;
}

.tx-file-input {
    display: none;
}

.tx-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-main);
    text-decoration: none;
    cursor: pointer;
    transition: 0.15s ease;
    line-height: 1;
}

.tx-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.tx-action-btn-attach {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface-alt);
}

.tx-action-btn-primary {
    border-color: var(--primary);
    color: var(--primary);
}

.tx-action-btn-danger {
    border-color: var(--danger);
    color: var(--danger);
}

/* Reports module */
#reports-mod {
    --reports-panel-top: 0px;
    --reports-filter-gap-y: 10px;
    --reports-filter-gap-x: 12px;
    --reports-extra-field-basis: 168px;
    --reports-actions-min: 260px;
}

.reports-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reports-filter-card {
    position: sticky !important;
    top: var(--reports-panel-top, 0px);
    z-index: 100;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    background: var(--card-bg);
    margin-top: 0;
    scroll-margin-top: 0;
}

.reports-filters-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 10px 12px;
}

.reports-filters-grid-main {
    grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(210px, 1fr) minmax(360px, 1.6fr);
}

#reports-mod .reports-filter-row--primary {
    min-width: 0;
}

/* Вторая полоса фильтров: одинаковая для всех отчётов — flex с переносами (2 ряда на широком экране, 3+ при сужении) */
#reports-mod #reports-extra-filters.reports-filter-row--extra {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--reports-filter-gap-y) var(--reports-filter-gap-x);
}

#reports-mod #reports-extra-filters.reports-filter-row--extra > .form-group {
    flex: 1 1 var(--reports-extra-field-basis);
    min-width: 0;
    max-width: 100%;
}

#reports-mod #reports-extra-filters.reports-filter-row--extra > .reports-actions-slot {
    flex: 5 1 var(--reports-actions-min);
    min-width: min(100%, var(--reports-actions-min));
    max-width: 100%;
}

#reports-mod.reports-type-sales_analytics #reports-extra-filters.reports-filter-row--extra > .form-group:not(.reports-actions-slot) {
    flex: 1 1 140px;
}

.reports-filters-grid .form-group {
    gap: 4px;
}

.reports-filters-grid .form-group label {
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted);
    margin-bottom: 0;
}

#reports-mod .reports-filter-row--extra .form-group > label {
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted);
    margin-bottom: 0;
}

.reports-filters-grid .input-modern,
.reports-filter-actions .input-modern,
#reports-mod .reports-filter-row--extra .input-modern {
    height: 34px;
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Reports: выравниваем TomSelect по высоте остальных инпутов */
#reports-mod .reports-filter-card .ts-wrapper .ts-control {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 32px 0 10px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
}

#reports-mod .reports-filter-card .ts-wrapper.single .ts-control .item {
    font-size: 12px !important;
    line-height: 1.2 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* В отчётах поле поиска должно оставаться вводимым всегда */
#reports-mod .reports-filter-card .ts-wrapper.single .ts-control input {
    display: inline-block !important;
    width: 100% !important;
    min-width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

#reports-mod .reports-filter-card .ts-wrapper .clear-button {
    right: 8px !important;
    font-size: 16px !important;
}

#reports-mod .reports-filter-card .ts-dropdown {
    min-width: 360px !important;
    max-width: 540px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

#reports-mod .reports-filter-card .ts-dropdown .option {
    font-size: 12px !important;
    line-height: 1.35 !important;
    padding: 7px 10px !important;
    white-space: normal !important;
    word-break: break-word;
}

.reports-quick-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.reports-quick-row .btn {
    min-width: 62px;
}

/* Период: на промежуточных ширинах держим навигацию и «День/месяц» в одной линии (сжимаем поле даты); перенос только на очень узких экранах */
.reports-period-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#reports-mod #reports-fg-period {
    min-width: 0;
}

.reports-period-nav {
    display: grid;
    grid-template-columns: 34px minmax(72px, 1fr) 34px;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}

.reports-period-row .btn {
    height: 34px;
    min-width: 34px;
    padding: 0;
    line-height: 1;
}

.reports-period-display-wrap {
    position: relative;
    min-width: 0;
}

.reports-period-display-wrap #reports-period-display {
    width: 100%;
    padding-right: 34px;
}

.reports-period-icon-btn {
    position: absolute;
    right: 2px;
    top: 2px;
    bottom: 2px;
    width: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
}

.reports-period-icon-btn:hover {
    background: var(--surface-hover);
    color: var(--text-main);
}

.reports-period-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#reports-mod .reports-period-mode-select {
    width: auto;
    min-width: 104px;
    max-width: 140px;
    flex: 0 0 auto;
}

.reports-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reports-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px;
}

.reports-tab-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-main);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.reports-tab-btn:hover {
    background: color-mix(in srgb, var(--surface-alt) 70%, var(--surface) 30%);
}

.reports-tab-btn.active {
    border-color: color-mix(in srgb, var(--primary) 70%, var(--border) 30%);
    background: color-mix(in srgb, var(--primary) 16%, var(--surface) 84%);
    color: var(--text-main);
}

.reports-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.reports-kpi-card {
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 10px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--surface-alt) 55%, var(--surface) 45%);
}

.reports-kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.reports-kpi-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.reports-total-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-size: 12px;
}

.reports-hidden {
    display: none !important;
}

.reports-warning {
    padding: 10px 12px;
    border: 1px solid var(--warning);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    color: var(--text-main);
    border-radius: 8px;
    font-size: 13px;
}

.reports-preset-select {
    min-width: 220px;
    max-width: 340px;
    display: inline-block;
    vertical-align: middle;
}

.reports-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.reports-actions-slot {
    display: block;
}

.reports-actions-label {
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted);
    visibility: hidden;
    margin-bottom: 0;
    user-select: none;
}

.reports-actions-slot .reports-filter-actions {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    flex-wrap: wrap;
    row-gap: 8px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.reports-actions-slot .reports-actions-label {
    display: none;
}

.reports-filter-actions-main,
.reports-filter-actions-presets {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.reports-filter-actions-main {
    flex: 0 1 auto;
    min-width: min-content;
}

.reports-filter-actions-presets {
    margin-left: 0;
    justify-content: flex-end;
    flex: 0 1 auto;
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
}

.reports-actions-slot .reports-filter-actions-presets {
    flex-shrink: 1;
}

.reports-actions-slot .reports-filter-actions .btn {
    height: 34px;
    min-height: 34px;
    padding: 0 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.reports-actions-slot .reports-preset-select {
    min-width: 0;
    width: auto;
    max-width: min(100%, 200px);
    flex: 1 1 120px;
    box-sizing: border-box;
}

#reports-mod.reports-type-osv_products #reports-filter-stock-balance {
    width: min(100%, 300px);
}

#reports-mod.reports-type-osv_products #reports-filter-stock-valuation {
    width: min(100%, 320px);
}

@media (max-width: 1360px) {
    .reports-filters-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
    .reports-filters-grid-main {
        grid-template-columns: repeat(3, minmax(210px, 1fr));
    }
}

.reports-regulatory-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 8px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-alt) 55%, transparent);
}

.reports-reg-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-main);
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    font-weight: 500;
}

.reports-reg-checkbox input[type='checkbox'] {
    margin: 0;
}

.reports-reg-source {
    min-width: 220px;
    height: 28px;
    font-size: 12px;
    padding: 4px 8px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 10px;
}

.reports-runs-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.reports-runs-filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 8px;
}

.reports-runs-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.reports-runs-summary::-webkit-details-marker {
    display: none;
}

.reports-runs-summary::after {
    content: '▸';
    color: var(--text-muted);
    font-size: 12px;
    margin-left: 10px;
    transition: transform 0.2s ease;
}

#reports-runs-accordion[open] .reports-runs-summary::after {
    transform: rotate(90deg);
}

.reports-filter-hint {
    display: none;
}

.reports-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-main);
}

.reports-inline-check input[type='checkbox'] {
    margin: 0;
}

.reports-inline-check-pill {
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-alt) 62%, var(--surface) 38%);
    white-space: nowrap;
    max-width: 100%;
    font-size: 11.5px;
}

.reports-actions-slot .reports-inline-check-pill {
    min-height: 34px;
    height: auto;
    margin-right: 0;
}

/* Аналитика продаж: компактнее поля (flex-basis задан выше); чекбоксы с переносом текста */

#reports-mod.reports-type-sales_analytics #reports-fg-include-returns {
    min-width: min(100%, 168px);
    flex: 1 1 168px;
}

#reports-mod.reports-type-sales_analytics #reports-fg-include-returns .reports-fg-include-returns-pill {
    white-space: normal;
    line-height: 1.25;
    min-height: 34px;
    padding: 4px 8px;
    align-items: flex-start;
}

/* Минимальная ширина — меньше риска наезда на чекбокс возвратов при узком контейнере */
#reports-mod.reports-type-sales_analytics #reports-fg-sa-overhead {
    flex: 1 1 200px;
    min-width: min(100%, 180px);
}

#reports-mod .reports-sa-overhead-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    flex-wrap: nowrap;
}

#reports-mod .reports-sa-overhead-toggle {
    flex: 0 0 auto;
    height: 34px !important;
    padding: 0 12px;
    align-items: center;
    margin: 0;
}

#reports-mod .reports-sa-overhead-rate-input {
    min-width: 88px;
    flex: 0 1 108px;
    max-width: 120px;
    width: 100%;
}

#reports-mod .reports-sa-overhead-unit {
    flex: 0 0 auto;
    font-weight: 600;
}

#reports-mod.reports-type-sales_analytics #reports-fg-sa-include-taxes {
    max-width: min(188px, 100%);
}

#reports-mod.reports-type-sales_analytics #reports-fg-sa-include-taxes .reports-inline-check-pill {
    white-space: normal;
    line-height: 1.25;
    min-height: 34px;
    padding: 4px 8px;
}

/* Не даём flex-строке растягивать поле ставки на всю ширину экрана */
#reports-mod.reports-type-sales_analytics #reports-fg-sa-tax-rate {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 88px;
    align-self: flex-end;
}

#reports-mod .reports-sa-tax-check {
    width: 100%;
}

#reports-mod .reports-sa-tax-rate-input {
    width: 100%;
    max-width: 72px;
    box-sizing: border-box;
}

#reports-mod .reports-sales-analytics-topn-toolbar,
#reports-mod .reports-sa-forecast-horizon-bar {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 12px;
    background: color-mix(in srgb, var(--surface-alt) 35%, var(--surface) 65%);
}

#reports-mod .reports-sales-analytics-topn-toolbar:not(.reports-hidden),
#reports-mod .reports-sa-forecast-horizon-bar:not(.reports-hidden) {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
}

#reports-mod .reports-sa-topn-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

#reports-mod .reports-sa-topn-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    line-height: 1.2;
}

#reports-mod .reports-sa-topn-select {
    width: auto;
    min-width: 120px;
    max-width: 200px;
}

#reports-mod .reports-pagination-bar:not(.reports-hidden) {
    display: flex !important;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

/* Reports: бухгалтерская таблица с фиксированной шапкой и "первой колонкой" */
.reports-preview-card {
    overflow: visible;
}

.reports-preview-scroll {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible !important;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 4px;
    position: relative;
}

#reports-table {
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#reports-table[data-report-type='osv_counterparties'] {
    table-layout: fixed;
}

#reports-table[data-report-type='osv_materials'],
#reports-table[data-report-type='osv_products'] {
    table-layout: fixed;
}

#reports-table[data-report-type='turnover_finance'] {
    table-layout: fixed;
}

#reports-table[data-report-type='inventory_register'] {
    table-layout: fixed;
}

#reports-table[data-report-type='osv_counterparties'] col.reports-col-cpty-main {
    width: 30%;
}

#reports-table[data-report-type='osv_counterparties'] col.reports-col-cpty-num {
    width: 8.75%;
}

#reports-table[data-report-type='osv_materials'] col.reports-col-stock-main,
#reports-table[data-report-type='osv_products'] col.reports-col-stock-main {
    width: 24%;
}

#reports-table[data-report-type='osv_materials'] col.reports-col-stock-warehouse,
#reports-table[data-report-type='osv_products'] col.reports-col-stock-warehouse {
    width: 20%;
}

#reports-table[data-report-type='osv_materials'] col.reports-col-stock-unit,
#reports-table[data-report-type='osv_products'] col.reports-col-stock-unit {
    width: 6%;
}

#reports-table[data-report-type='osv_materials'] col.reports-col-stock-num,
#reports-table[data-report-type='osv_products'] col.reports-col-stock-num {
    width: 6.25%;
}

#reports-table[data-report-type='turnover_finance'] col.reports-col-turnover-type { width: 14%; }
#reports-table[data-report-type='turnover_finance'] col.reports-col-turnover-category { width: 46%; }
#reports-table[data-report-type='turnover_finance'] col.reports-col-turnover-count { width: 14%; }
#reports-table[data-report-type='turnover_finance'] col.reports-col-turnover-amount { width: 26%; }

#reports-table[data-report-type='inventory_register'] col.reports-col-register-date { width: 8%; }
#reports-table[data-report-type='inventory_register'] col.reports-col-register-warehouse { width: 16%; }
#reports-table[data-report-type='inventory_register'] col.reports-col-register-item { width: 24%; }
#reports-table[data-report-type='inventory_register'] col.reports-col-register-unit { width: 5%; }
#reports-table[data-report-type='inventory_register'] col.reports-col-register-type { width: 17%; }
#reports-table[data-report-type='inventory_register'] col.reports-col-register-qty { width: 10%; }
#reports-table[data-report-type='inventory_register'] col.reports-col-register-batch { width: 12%; }
#reports-table[data-report-type='inventory_register'] col.reports-col-register-note { width: 8%; }

#reports-table[data-report-type='inventory_register'] tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
}

#reports-table[data-report-type='inventory_register'] tbody td:nth-child(2),
#reports-table[data-report-type='inventory_register'] tbody td:nth-child(7) {
    white-space: nowrap;
}

#reports-table[data-report-type='inventory_register'] tbody td:nth-child(7) .reports-cell-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.reports-register-links {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    align-items: center;
}

#reports-table th,
#reports-table td {
    white-space: nowrap;
    border-right: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

#reports-table th:last-child,
#reports-table td:last-child {
    border-right: none;
}

#reports-table th {
    font-size: 11px;
    letter-spacing: 0.01em;
}

#reports-table td {
    font-size: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

#reports-table tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: color-mix(in srgb, var(--surface-alt) 85%, var(--surface) 15%);
    box-shadow: inset 0 1px 0 var(--border);
}

#reports-table thead th {
    position: relative;
    z-index: 90;
    background: color-mix(in srgb, var(--surface-alt) 74%, var(--surface) 26%);
    color: var(--text-main);
    font-weight: 700;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 96%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 82%, transparent), 0 6px 14px -14px rgba(0, 0, 0, 0.55);
    padding: 10px 12px;
    will-change: transform;
}

#reports-table thead th .reports-sort-head-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
    text-align: inherit;
}

#reports-table thead th .reports-sort-head-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

#reports-table thead th .reports-sort-head-btn.active {
    color: color-mix(in srgb, var(--text) 85%, var(--accent) 15%);
}

#reports-table thead th .reports-sort-arrow {
    font-size: .75rem;
    line-height: 1;
    opacity: .9;
}

#reports-table thead tr.reports-head-summary th {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
    text-align: center;
}

.reports-head-summary-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.reports-head-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    background: color-mix(in srgb, var(--surface) 88%, var(--surface-alt) 12%);
    color: var(--text-main);
    font-weight: 500;
}

.reports-head-summary-item strong {
    font-weight: 700;
}

.reports-head-summary-item-positive strong {
    color: var(--ok, #22c55e);
}

.reports-head-summary-item-negative strong {
    color: var(--danger, #ef4444);
}

.reports-head-summary-item-neutral strong {
    color: var(--text-muted);
}

#reports-table thead tr.reports-head-groups th {
    font-size: 11.5px;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: var(--text-main);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: color-mix(in srgb, var(--surface-alt) 78%, var(--surface) 22%);
    text-align: center;
}

#reports-table thead tr.reports-head-groups th.reports-head-group-main {
    text-transform: none;
    font-size: 12px;
}

.reports-head-group-date {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    color: var(--text);
}

#reports-table thead tr.reports-head-details th {
    font-size: 11px;
    font-weight: 700;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 96%, transparent);
}

#reports-table thead tr.reports-head-level2 th,
#reports-table thead tr.reports-head-level3 th {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
}

#reports-table thead tr.reports-head-level2 th.reports-head-level2-group {
    text-transform: uppercase;
    letter-spacing: 0.015em;
}

#reports-table thead tr.reports-head-level3 th {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

#reports-table td.reports-num,
#reports-table th.reports-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#reports-table thead th.reports-col-debit,
#reports-table tfoot th.reports-col-debit {
    background: color-mix(in srgb, var(--surface-alt) 88%, #3b82f6 12%);
}

#reports-table thead th.reports-col-credit,
#reports-table tfoot th.reports-col-credit {
    background: color-mix(in srgb, var(--surface-alt) 90%, #ef4444 10%);
}

#reports-table tbody td.reports-col-debit {
    background: color-mix(in srgb, var(--surface) 95%, #3b82f6 5%);
}

#reports-table tbody td.reports-col-credit {
    background: color-mix(in srgb, var(--surface) 96%, #ef4444 4%);
}

#reports-table tbody tr.reports-row-income td:not(.reports-col-main) {
    background: color-mix(in srgb, var(--surface) 94%, #3b82f6 6%);
}

#reports-table tbody tr.reports-row-expense td:not(.reports-col-main) {
    background: color-mix(in srgb, var(--surface) 95%, #ef4444 5%);
}

#reports-table.reports-table-osv td.reports-col-main {
    position: sticky;
    left: 0;
    z-index: 3;
    background: color-mix(in srgb, var(--surface) 90%, var(--surface-alt) 10%);
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--border) 82%, transparent);
}

/* Вертикальное «прилипание» шапки — через JS (transform); только горизонтальный sticky */
#reports-table.reports-table-osv thead th.reports-col-main {
    position: sticky;
    left: 0;
    top: auto;
    z-index: 91;
    background: color-mix(in srgb, var(--surface-alt) 85%, var(--surface) 15%);
    border-right: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 82%, transparent), 0 6px 14px -14px rgba(0, 0, 0, 0.55);
}

#reports-table.reports-table-osv thead th.reports-col-main + th,
#reports-table.reports-table-osv tbody td.reports-col-main + td {
    border-left: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    box-shadow: none;
}

#reports-table.reports-table-osv td.reports-col-main,
#reports-table.reports-table-osv th.reports-col-main {
    min-width: 280px;
    max-width: 420px;
}

#reports-table[data-report-type='osv_counterparties'] td.reports-col-main,
#reports-table[data-report-type='osv_counterparties'] th.reports-col-main {
    min-width: 0;
    max-width: none;
    width: 30%;
}

#reports-table[data-report-type='osv_materials'] td.reports-col-main,
#reports-table[data-report-type='osv_materials'] th.reports-col-main,
#reports-table[data-report-type='osv_products'] td.reports-col-main,
#reports-table[data-report-type='osv_products'] th.reports-col-main {
    min-width: 0;
    max-width: none;
}

.reports-cell-link {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
}

.reports-cell-link:hover {
    color: var(--primary-hover);
}

.reports-cell-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

.reports-num-link:hover,
.reports-cell-link-main:hover {
    background: color-mix(in srgb, var(--surface-alt) 72%, transparent);
}

.reports-num-link {
    width: 100%;
    text-align: right;
}

.reports-num-link.reports-num-zero {
    color: var(--text-muted);
}

#reports-table td.reports-num-zero,
#reports-table th.reports-num-zero {
    color: var(--text-muted);
}

#reports-table td.reports-num-neg,
#reports-table th.reports-num-neg,
.reports-num-link.reports-num-neg {
    color: var(--danger);
}

#reports-table td.reports-num-pos,
#reports-table th.reports-num-pos,
.reports-num-link.reports-num-pos {
    color: var(--text-main);
}

.reports-cell-link-main {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.reports-drilldown-table th,
.reports-drilldown-table td {
    font-size: 12px;
    padding: 6px 8px;
}

.reports-drilldown-table {
    width: 100%;
    table-layout: fixed;
}

.reports-drilldown-table .reports-dd-col-date { width: 14%; }
.reports-drilldown-table .reports-dd-col-type { width: 8%; }
.reports-drilldown-table .reports-dd-col-amount { width: 12%; }
.reports-drilldown-table .reports-dd-col-account { width: 13%; }
.reports-drilldown-table .reports-dd-col-category { width: 15%; }
.reports-drilldown-table .reports-dd-col-base { width: 16%; }
.reports-drilldown-table .reports-dd-col-note { width: 22%; }

.reports-drilldown-table td.reports-dd-col-category,
.reports-drilldown-table td.reports-dd-col-base,
.reports-drilldown-table td.reports-dd-col-note {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.reports-drilldown-table .reports-dd-type-cell {
    font-weight: 600;
}

.reports-drilldown-table tr.reports-dd-row-income td.reports-dd-type-cell,
.reports-drilldown-table tr.reports-dd-row-income td.reports-dd-col-amount {
    color: color-mix(in srgb, var(--text-main) 78%, #16a34a 22%);
    background: color-mix(in srgb, var(--surface) 94%, #16a34a 6%);
}

.reports-drilldown-table tr.reports-dd-row-expense td.reports-dd-type-cell,
.reports-drilldown-table tr.reports-dd-row-expense td.reports-dd-col-amount {
    color: color-mix(in srgb, var(--text-main) 80%, #ef4444 20%);
    background: color-mix(in srgb, var(--surface) 95%, #ef4444 5%);
}

#reports-table.reports-density-compact th,
#reports-table.reports-density-compact td {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 6px;
    padding-right: 6px;
    line-height: 1.15;
}

#reports-table.reports-density-standard th,
#reports-table.reports-density-standard td {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1.35;
}

@media (max-width: 1280px) {
    #reports-table.reports-table-osv th,
    #reports-table.reports-table-osv td {
        padding: 6px 8px;
        font-size: 12px;
    }
    #reports-table.reports-table-osv td.reports-col-main,
    #reports-table.reports-table-osv th.reports-col-main {
        min-width: 220px;
        max-width: 320px;
    }
    #reports-table[data-report-type='osv_materials'] td.reports-col-main,
    #reports-table[data-report-type='osv_materials'] th.reports-col-main,
    #reports-table[data-report-type='osv_products'] td.reports-col-main,
    #reports-table[data-report-type='osv_products'] th.reports-col-main {
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 980px) {
    .reports-filters-grid {
        grid-template-columns: 1fr 1fr;
    }
    .reports-filter-card {
        position: static;
        top: auto;
    }
    #reports-mod .reports-filter-row--primary > .form-group {
        min-width: 0;
    }
    /* Слот действий — отдельная полоса: не сжимать кнопки с фильтрами в одну линию */
    #reports-mod #reports-extra-filters.reports-filter-row--extra > .reports-actions-slot {
        flex: 1 1 100%;
        min-width: 0;
    }
    .reports-actions-slot .reports-filter-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }
    .reports-filter-actions-main,
    .reports-filter-actions-presets {
        flex-wrap: wrap;
    }
    .reports-filter-actions-presets {
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* Период: перенос «День/месяц» под блок даты только на очень узком экране */
@media (max-width: 520px) {
    #reports-mod .reports-period-row {
        flex-wrap: wrap;
    }
    #reports-mod .reports-period-nav {
        flex: 1 1 100%;
    }
    #reports-mod .reports-period-mode-select {
        flex: 1 1 100%;
        max-width: none;
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .reports-filters-grid {
        grid-template-columns: 1fr;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .reports-runs-filters {
        grid-template-columns: 1fr;
    }
    .reports-actions-slot .reports-filter-actions .btn,
    .reports-actions-slot .reports-filter-actions .reports-preset-select {
        width: 100%;
        max-width: none;
    }
    .reports-filter-actions-main,
    .reports-filter-actions-presets {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Production module safeguard:
   keep 3 step cards in one row on desktop, regardless of generic .form-grid rules. */
#prod-mod .prod-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

/* ============================================================
   Purchase Form Layout Normalization
   ============================================================ */
#purchase-mod .pur-form-grid {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 12px 14px;
    align-items: start;
}

#purchase-mod .pur-form-grid .form-group {
    min-width: 0;
}

#purchase-mod .pur-price-qty-group {
    align-self: start;
}

#purchase-mod .pur-price-qty-title {
    margin-bottom: 2px;
}

#purchase-mod .pur-price-qty-grid {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
    gap: 10px;
}

/* Визуальный ритм: ключевые параметры читаются первым взглядом */
#purchase-mod .pur-main-panel .form-group > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

#purchase-mod .pur-main-panel .input-modern {
    min-height: 36px;
}

#purchase-mod .pur-price-qty-group {
    padding: 8px 10px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-alt);
}

#purchase-mod .pur-price-qty-group .form-group > label {
    color: var(--text-muted);
    font-weight: 600;
}

#purchase-mod .pur-material-group .ts-wrapper.focus .ts-control,
#purchase-mod .pur-material-group .ts-wrapper.focus .ts-control input {
    border-color: var(--primary);
    background: var(--surface);
}

#purchase-mod #purchase-price,
#purchase-mod #purchase-qty {
    font-size: 15px;
    font-weight: 700;
}

#purchase-mod .pur-price-source-hint {
    margin-top: 5px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

#purchase-mod .pur-delivery-label {
    font-size: 13px;
}

#purchase-mod .pur-delivery-fields-grid .form-group > label {
    font-size: 11.5px;
}

#purchase-mod .pur-summary-box .font-16 {
    font-size: 17px;
}

#purchase-mod .pur-total-input {
    min-height: 40px;
    font-size: 20px;
    letter-spacing: 0.2px;
}

/* Чекбокс доставки всегда на собственной строке, чтобы не спорить с ценой/количеством */
#purchase-mod .pur-delivery-toggle-wrap {
    grid-column: span 2;
}

/* Поля доставки занимают всю ширину текущей сетки */
#purchase-mod .pur-delivery-fields-grid {
    grid-column: 1 / -1;
}

@media (max-width: 1280px) {
    #purchase-mod .pur-form-grid {
        grid-template-columns: repeat(4, minmax(140px, 1fr));
    }
    #purchase-mod .col-span-3,
    #purchase-mod .col-span-2 {
        grid-column: span 2;
    }
    #purchase-mod .pur-delivery-toggle-wrap {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    #purchase-mod .pur-form-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
    #purchase-mod .col-span-3,
    #purchase-mod .col-span-2 {
        grid-column: span 2;
    }
    #purchase-mod .pur-delivery-fields-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    #purchase-mod .pur-form-grid {
        grid-template-columns: 1fr;
    }
    #purchase-mod .col-span-3,
    #purchase-mod .col-span-2 {
        grid-column: span 1;
    }
    #purchase-mod .pur-price-qty-grid {
        grid-template-columns: 1fr;
    }
    #purchase-mod .pur-history-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #purchase-mod .pur-search-wrap {
        width: 100%;
    }
    #purchase-mod .pur-summary-box {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #purchase-mod .pur-total-input {
        width: 100%;
        text-align: left;
    }
}

/* ============================================================
   Модуль продаж — вкладка «Новый заказ» (композиция и ритм UI)
   ============================================================ */
#sales-mod.sales-module-root {
    --sales-section-gap: 16px;
    --sales-card-radius: 12px;
    --sales-control-min-h: 40px;
}

#sales-mod .sales-page-header {
    align-items: flex-start;
    gap: 14px;
}

#sales-mod .sales-page-subtitle {
    max-width: 40rem;
    line-height: 1.35;
}

#sales-mod .sales-toolbar-btn {
    min-height: 38px;
    padding-left: 14px;
    padding-right: 14px;
    font-weight: 600;
    font-size: 13px;
}

#sales-mod .sales-tabs-modern {
    gap: 8px;
    margin-bottom: var(--sales-section-gap);
    padding-bottom: 12px;
    border-bottom-width: 1px;
}

#sales-mod .sales-tabs-modern .sales-tab-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
}

/* Flex только у активной вкладки иначе #id перебивает .sales-tab-content { display:none } */
#sales-mod .sales-tab-content.active.sales-checkout-column {
    display: flex;
    flex-direction: column;
    gap: var(--sales-section-gap);
}

#sales-mod .sales-checkout-card {
    border-radius: var(--sales-card-radius);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--border) 55%, transparent);
}

#sales-mod .sales-checkout-card-client {
    padding: 18px 20px;
}

#sales-mod .sales-order-date-input {
    min-height: var(--sales-control-min-h);
    min-width: 152px;
}

#sales-mod .sales-order-date-label {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
}

#sales-mod .sales-new-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    align-items: stretch;
}

#sales-mod .sales-new-order-col-main,
#sales-mod .sales-new-order-col-side {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#sales-mod .sales-new-order-col-main {
    min-width: 0;
}

#sales-mod .sales-new-order-col-side {
    padding: 14px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-alt) 88%, var(--surface) 12%);
    border: 1px dashed color-mix(in srgb, var(--border) 90%, var(--primary) 10%);
    justify-content: flex-start;
}

#sales-mod .sales-side-date {
    margin-bottom: 12px;
    flex-shrink: 0;
}

#sales-mod .sales-side-date .sales-order-date-input {
    max-width: 100%;
}

#sales-mod .sales-label-strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
}

#sales-mod .sales-label-accent {
    display: block;
    font-weight: 700;
    color: color-mix(in srgb, var(--warning-text) 82%, var(--text-main) 18%);
    margin-bottom: 6px;
}

#sales-mod .min-h-control {
    min-height: var(--sales-control-min-h);
}

#sales-mod .sales-contract-select-wrap {
    min-width: 180px;
}

#sales-mod .sales-icon-btn {
    width: 42px;
    min-width: 42px;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#sales-mod .sales-contract-actions {
    gap: 8px;
}

#sales-mod .sales-client-row .ts-wrapper,
#sales-mod .sales-new-order-col .ts-wrapper,
#sales-mod .sales-contract-select-wrap .ts-wrapper {
    width: 100%;
    min-width: 0;
}

#sales-mod .sales-spec-actions-wrap {
    border-top-color: color-mix(in srgb, var(--border) 75%, transparent);
}

#sales-mod .sales-cart-shell {
    overflow: hidden;
}

#sales-mod .sales-cart-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-weight: 700;
}

#sales-mod .sales-cart-table tbody td {
    vertical-align: middle;
}

#sales-mod .sales-cart-num-cell-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
}

#sales-mod .sales-cart-num-cell-input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sales-control-min-h, 40px);
    width: 100%;
}

#sales-mod .sales-cart-num-cell-sub {
    min-height: 1.35em;
    line-height: 1.35;
    width: 100%;
    text-align: center;
}

#sales-mod .sales-cart-inline-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}

#sales-mod .sales-cart-inline-num .sales-cart-qty-input {
    width: 5.25rem;
    min-width: 4.25rem;
    min-height: var(--sales-control-min-h, 40px);
    flex: 0 0 auto;
}

#sales-mod .sales-cart-unit-inline {
    white-space: nowrap;
    line-height: 1.2;
}

#sales-mod .sales-cart-td-num .sales-cart-price-input,
#sales-mod .sales-cart-td-num .sales-cart-discount-input {
    min-height: var(--sales-control-min-h, 40px);
}

#sales-mod .sales-cart-hint {
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid color-mix(in srgb, var(--primary) 42%, var(--border) 58%);
    background: color-mix(in srgb, var(--surface) 86%, var(--surface-alt) 14%);
}

#sales-mod .sales-cart-summary-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

#sales-mod .sales-cart-summary-card {
    background: color-mix(in srgb, var(--surface) 90%, var(--surface-alt) 10%);
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

#sales-mod .sales-cart-summary-card--pay {
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--primary) 9%, var(--surface) 91%) 0%,
        color-mix(in srgb, var(--surface-alt) 50%, var(--surface) 50%) 100%
    );
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border) 58%);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--primary) 14%, transparent);
}

#sales-mod .sales-cart-summary-card-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.3;
}

#sales-mod .sales-cart-summary-card-value {
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-main);
}

#sales-mod .sales-cart-summary-card-hint {
    margin-top: auto;
    line-height: 1.35;
    max-width: 16rem;
}

#sales-mod .sales-cart-summary-finance-toggle {
    padding: 6px 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 65%, var(--surface-alt) 35%);
}

#sales-mod .sales-cart-summary-pay-nums {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
}

#sales-mod .sales-cart-summary-pay-nums strong {
    font-weight: 800;
    letter-spacing: -0.02em;
}

#sales-mod .sales-cart-details-after-summary {
    border-top-color: color-mix(in srgb, var(--border) 75%, transparent);
}

/* Детализация рентабельности по позициям (корзина продаж) */
#sales-mod .sales-profit-section {
    margin-top: 4px;
}

#sales-mod .sales-profit-section-head {
    margin-bottom: 14px;
}

#sales-mod .sales-profit-section-title {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
    line-height: 1.2;
}

#sales-mod .sales-profit-section-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
    max-width: 42rem;
}

#sales-mod .sales-profit-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#sales-mod .sales-profit-card {
    background: color-mix(in srgb, var(--surface-alt) 70%, var(--surface) 30%);
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--primary) 12%);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#sales-mod .sales-profit-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

#sales-mod .sales-profit-card-name {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.015em;
    line-height: 1.35;
}

#sales-mod .sales-profit-card-meta {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

#sales-mod .sales-profit-card-revenue-block {
    flex-shrink: 0;
}

#sales-mod .sales-profit-card-revenue-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

#sales-mod .sales-profit-card-revenue-value {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
}

#sales-mod .sales-profit-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

#sales-mod .sales-profit-metric {
    background: color-mix(in srgb, var(--surface) 88%, var(--surface-alt) 12%);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

#sales-mod .sales-profit-metric-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.25;
}

#sales-mod .sales-profit-metric-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
    word-break: break-word;
}

#sales-mod .sales-profit-metric--accent {
    border-color: color-mix(in srgb, var(--warning-text) 28%, var(--border) 72%);
    background: color-mix(in srgb, var(--warning-text) 6%, var(--surface) 94%);
}

#sales-mod .sales-profit-metric--accent .sales-profit-metric-value {
    color: color-mix(in srgb, var(--warning-text) 92%, var(--text-main) 8%);
}

#sales-mod .sales-profit-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 4px;
}

#sales-mod .sales-profit-foot-cost {
    font-size: 12px;
    color: var(--text-muted);
}

#sales-mod .sales-profit-foot-cost strong {
    color: var(--text-main);
    font-weight: 800;
}

#sales-mod .sales-profit-foot-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

#sales-mod .sales-profit-foot-badge--ok {
    background: color-mix(in srgb, var(--success) 14%, var(--surface) 86%);
    color: color-mix(in srgb, var(--success-text) 90%, var(--text-main) 10%);
}

#sales-mod .sales-profit-foot-badge--bad {
    background: color-mix(in srgb, var(--danger) 14%, var(--surface) 86%);
    color: color-mix(in srgb, var(--danger-text) 92%, var(--text-main) 8%);
}

#sales-mod .sales-profit-foot-badge--flat {
    background: var(--surface-alt);
    color: var(--text-muted);
}

#sales-mod .sales-profit-total-strip {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--border);
}

#sales-mod .sales-profit-total-strip--gain {
    background: color-mix(in srgb, var(--success) 8%, var(--surface-alt) 92%);
    border-color: color-mix(in srgb, var(--success) 35%, var(--border) 65%);
}

#sales-mod .sales-profit-total-strip--loss {
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-alt) 92%);
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border) 65%);
}

#sales-mod .sales-profit-total-strip--flat {
    background: var(--surface-alt);
}

#sales-mod .sales-profit-total-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    max-width: 22rem;
    line-height: 1.35;
}

#sales-mod .sales-profit-total-strip--gain .sales-profit-total-value {
    color: color-mix(in srgb, var(--success-text) 94%, var(--text-main) 6%);
}

#sales-mod .sales-profit-total-strip--loss .sales-profit-total-value {
    color: color-mix(in srgb, var(--danger-text) 94%, var(--text-main) 6%);
}

#sales-mod .sales-profit-total-strip--flat .sales-profit-total-value {
    color: var(--text-main);
}

#sales-mod .sales-profit-total-value {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

@media (max-width: 900px) {
    #sales-mod .sales-profit-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#sales-mod .sales-checkout-primary-btn {
    min-height: 48px;
    border-radius: 10px;
}

#sales-mod .sales-section-body .form-group > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    #sales-mod .sales-new-order-grid {
        grid-template-columns: 1fr;
    }

    #sales-mod .sales-new-order-col-main,
    #sales-mod .sales-new-order-col-side {
        min-height: 0;
    }

    #sales-mod .sales-page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    #sales-mod .sales-page-header {
        flex-direction: column;
    }
}

@media (max-width: 880px) {
    #sales-mod .sales-cart-summary-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    #sales-mod .sales-order-date-slot {
        align-self: stretch;
    }

    #sales-mod .sales-order-date-input {
        width: 100%;
    }
}

/* ==========================================================================
   UI cleanup batch: dashboard carousel, dash widgets, sales, recipes, reports
   ========================================================================== */

/* ----- Dashboard drilldown carousel ----- */
#drilldown-container.dash-carousel {
    overflow: hidden;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 12px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    --dash-drill-border: transparent;
    border: 1.5px solid var(--dash-drill-border);
}

#dashboard-tabs-content.dash-carousel-inner {
    display: flex;
    width: 300%;
    align-items: flex-start;
    overflow: hidden;
    --dash-tab-offset: 0%;
    transform: translateX(var(--dash-tab-offset));
    transition:
        transform 0.4s ease-in-out,
        max-height 0.4s ease-in-out,
        opacity 0.4s ease-in-out;
}

.dash-slide {
    width: 33.333%;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

.dash-drill-panel-card {
    border-color: var(--dash-panel-accent, var(--border));
    transition: border-color 0.25s ease;
}

/* Dashboard widget rows (repl. inline hover) */
.dash-widget-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.dash-widget-row:hover {
    background: var(--surface-hover);
}

.dash-widget-row-ar {
    border-bottom: 1px solid var(--border);
}

.dash-widget-row-stock {
    border-bottom: 1px dashed var(--border);
}

.dash-widget-ar-amt {
    padding-top: 5px;
}

.dash-widget-stock-name {
    max-width: 70%;
    min-width: 0;
}

.dash-widget-stock-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-widget-stock-qty-cell {
    min-width: 80px;
    text-align: right;
}

.dash-widget-stock-qty-num {
    font-weight: 900;
    font-size: 14px;
}

/* ----- Reports modal stack over drilldown ----- */
.modal-overlay.reports-batch-modal-front {
    z-index: 10020;
}

.modal-overlay.reports-batch-card-modal-front {
    z-index: 10021;
}

.reports-accent-orange {
    color: #fd7e14 !important;
}

.reports-cost-right-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ----- Recipes: muted disabled control ----- */
select.input-modern.is-visually-muted,
.input-modern.is-visually-muted {
    opacity: 0.5;
}

/* ----- Sales: cart profit banner ----- */
#cart-profit-header.sales-profit-header {
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
    border-top: 3px solid transparent;
}

#cart-profit-header.sales-profit-header--profit {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-top-color: #66bb6a;
}

#cart-profit-header.sales-profit-header--loss {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    border-top-color: #ef5350;
}

#cart-profit-margin.sales-profit-margin-chip {
    color: #fff;
}

#cart-profit-margin.sales-profit-margin-chip--profit {
    background: #1b5e20;
}

#cart-profit-margin.sales-profit-margin-chip--loss {
    background: #b71c1c;
}

.sales-profit-breakdown-inner {
    padding: 6px 18px 10px;
    border-radius: 8px;
}

.sales-profit-breakdown-inner--profit {
    background: rgba(232, 245, 233, 0.38);
}

.sales-profit-breakdown-inner--loss {
    background: rgba(255, 235, 238, 0.38);
}

.sales-profit-bd-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}

.sales-profit-breakdown-inner--profit .sales-profit-bd-row {
    border-bottom-color: #a5d6a7;
}

.sales-profit-breakdown-inner--loss .sales-profit-bd-row {
    border-bottom-color: #ef9a9a;
}

/* Kanban drag */
.kanban-card.kanban-card--dragging {
    opacity: 0.4;
}

.kanban-column.kanban-col--drag-over {
    background: #e2e8f0;
}

/* Price import CSV highlights */
.price-dealer.sales-price-input--import-dealer,
.price-basic.sales-price-input--import-dealer {
    background-color: var(--success-bg) !important;
    border: 1px solid #22c55e !important;
}

.price-basic.sales-price-input--import-basic {
    background-color: #eff6ff !important;
    border: 1px solid #3b82f6 !important;
}

/* Return modal layout */
.form-grid.sales-return-prod-grid {
    grid-template-columns: 2fr 1fr 1fr;
}

.form-grid.sales-contract-grid-pair {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sales-modal-pad-xs {
    padding: 5px;
}

/* Pricelist toolbar */
.overflow-auto.pr-10.sales-pricelist-scroll {
    max-height: 60vh;
}

.flex-row.gap-10.sales-pricelist-toolbar-inner {
    gap: 15px;
}

.input-modern.sales-pricelist-search {
    max-width: 250px;
    padding: 4px 10px;
}

th.sales-th-130 {
    width: 130px;
}

.flex-row.gap-10.sales-price-toolbar-grow {
    flex: 1;
    min-width: 250px;
}

/* Live calc modal (sales) */
.sales-live-calc-pad {
    padding: 8px 4px;
}

.sales-calc-micro-label {
    letter-spacing: 0.5px;
}

.sales-calc-card-reset {
    padding: 0;
    overflow: hidden;
}

.overflow-x-auto.sales-calc-x-scroll {
    overflow-x: auto;
}

.table-modern.sales-calc-table-mini {
    min-width: 520px;
    font-size: 12px;
}

tr.sales-calc-tr-sep {
    border-bottom: 1px solid var(--bg-surface-hover);
}

tr.sales-calc-tr-bold {
    font-weight: 900;
}

.cursor-help.sales-cursor-help {
    cursor: help;
}

.flex-col.gap-14.sales-calc-stack-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.calc-card.sales-calc-accent-primary {
    border-left: 4px solid var(--primary);
}

.calc-card.sales-calc-accent-warn-orange {
    border-left: 4px solid #ff9800;
}

.calc-card.sales-calc-accent-danger {
    border-left: 4px solid var(--danger);
}

.flex-between.sales-calc-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sales-ship-tr {
    border-bottom: 1px solid var(--border);
}

td.sales-ship-td {
    padding: 8px;
}

td.sales-ship-td-center-bold {
    padding: 8px;
    text-align: center;
    font-weight: bold;
}

td.sales-ship-td-center {
    padding: 8px;
    text-align: center;
}

.form-grid.sales-ship-poa-grid {
    grid-column: 1 / -1;
}

.btn.btn-outline.sales-btn-pad-x {
    padding: 0 15px;
}

input[type="checkbox"].sales-chk-16 {
    width: 16px;
    height: 16px;
}

.d-flex.gap-10.flex-wrap.mb-15.sales-ship-footer-dash {
    border-bottom: 1px dashed var(--border);
    padding-bottom: 15px;
}

.border-top.sales-contract-sep-dashed {
    border-top: 1px dashed var(--border);
    margin: 20px 0;
}

label.doc-section-title.sales-contract-kicker {
    color: var(--primary);
}

.input-modern.sales-contract-bank-select {
    flex: 1;
    min-width: 0;
}

td.sales-empty-muted {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

table.sales-pallet-score-table {
    width: 100%;
    border-collapse: collapse;
}

th.sales-pallet-th-num {
    padding: 10px;
    text-align: right;
}

.overflow-hidden.h-100.border-radius-4.sales-score-bar-fill {
    background: linear-gradient(90deg, #38bdf8, #3b82f6);
}

.p-25.border-radius-12.text-center.mb-20.shadow-sm.text-white.sales-stat-hero-banner {
    background: linear-gradient(135deg, #3b82f6, var(--info));
}

.bg-surface-hover.border.border-radius-8.p-15.flex-shrink-0.sales-log-card-col {
    min-width: 320px;
    max-width: 320px;
}

h4.border-bottom.pb-8.mb-15.sales-logistics-date-title {
    border-bottom-style: solid;
    border-bottom-width: 3px;
}

h4.sales-logistics-date-title--today {
    border-bottom-color: #ef4444 !important;
}

h4.sales-logistics-date-title--usual {
    border-bottom-color: #38bdf8 !important;
}

.form-group.sales-export-label-left {
    text-align: left;
}

.sales-top-item-name {
    max-width: 65%;
}

.sales-reserve-empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

#sales-mod .sales-cart-extra-field-max {
    max-width: 22rem;
}