/* Превью в таблице 100x100 */
.img-preview-wrap {
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 2px;
}

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

/* Строгая таблица */
.table-clean {
    font-size: 0.9rem;
}

    .table-clean thead th {
        background: #fff;
        color: #888;
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 1px;
        border-bottom: 1px solid #eee;
        padding: 12px;
    }

    .table-clean td {
        border-bottom: 1px solid #f9f9f9;
        padding: 12px;
    }

/* Ограничение модального окна */
#tmzLargeModal .modal-dialog {
    max-width: 95vw;
    margin: 10px auto;
}

#tmzLargeModal .modal-body {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: 15px;
}

/*fixes started*/

/* Строка ~32: Ограничиваем общую высоту правой колонки и убираем внешний скролл */
#tmzLargeModal .col-lg-3.border-start {
    max-height: 550px !important;
    overflow: hidden !important; /* ИСПРАВЛЕНО: Полностью убирает внешнюю (вторую) полосу прокрутки колонки */
    display: flex !important;
    flex-direction: column !important;
}

/* Строка ~45: Внутренний контейнер списка товаров — скроллится строго только он один */
#tmzLargeModal .flex-grow-1.overflow-auto {
    max-height: calc(550px - 120px) !important; /* ИСПРАВЛЕНО: Фиксирует чистую высоту под список */
    overflow-y: auto !important; /* Оставляем ОДИН аккуратный скроллбар для товаров */
    overflow-x: hidden !important;
}


/*fixes ended*/

.canvas-container {
    background: #1a1a1a;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#tmz-predict-products-cnt .active {
    background-color: #212529 !important;
    border-color: #212529 !important;
}

.custom-pagination .page-link {
    color: #495057;
    border: 1px solid #eee;
    margin: 0 2px;
    border-radius: 4px !important;
    padding: 5px 10px;
    transition: all 0.2s;
}

.custom-pagination .page-item.active .page-link {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

.custom-pagination .page-link:hover:not(.active) {
    background-color: #f8f9fa;
    color: #000;
}

/*04-06-26*/
/* ================= ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ ИНТЕГРАЦИИ БЭКЕНДА И ХОЛСТА ================= */

/* Корректное масштабирование интерактивного холста */
#tmzCanvas {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

/* Фиксация высоты боковой панели скролла продуктов нейросети */
#tmz-predict-products-cnt {
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 4px;
}

    /* Стилизация полосы прокрутки для панели продуктов */
    #tmz-predict-products-cnt::-webkit-scrollbar {
        width: 6px;
    }

    #tmz-predict-products-cnt::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    #tmz-predict-products-cnt::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }

        #tmz-predict-products-cnt::-webkit-scrollbar-thumb:hover {
            background: #aaa;
        }

    /* Плавный интерактивный ховер для элементов списка продуктов */
    #tmz-predict-products-cnt .list-group-item {
        transition: all 0.15s ease-in-out;
        border-left: 3px solid transparent !important;
    }

        #tmz-predict-products-cnt .list-group-item:hover:not(.active) {
            background-color: #f8f9fa;
            border-left-color: #ced4da !important;
            padding-left: 14px !important;
        }

/* Подсветка акционных строк (класс ftx из старого MVC) */
/* Пастельный синий фон для строк с акционным товаром (вместо красного) */
.table-danger-light, .ftx {
    background-color: rgba(13, 110, 253, 0.04) !important; /* Легкий синий оттенок */
}

    /* Насыщенный синий маркер-полоса на левом краю первой ячейки строки */
    .ftx td:first-child {
        border-left: 4px solid #0d6efd !important; /* Фирменный синий Bootstrap 5 */
    }

/* Светлые пастельные тона для статусов отклонения координат (в стиле .table-clean) */
.table-clean td.table-info {
    background-color: #e8f4fd !important;
    color: #0b5ed7;
    font-weight: 600;
}

.table-clean td.table-warning {
    background-color: #fff8e6 !important;
    color: #9a6e00;
    font-weight: 600;
}

.table-clean td.table-danger {
    background-color: #fde8e8 !important;
    color: #dc3545;
    font-weight: 600;
}

/* Компактное поле ввода для замечаний аудита */
.s-comment-text {
    font-size: 0.85rem;
    resize: none;
    border: 1px solid #eee;
}

    .s-comment-text:focus {
        border-color: #212529;
        box-shadow: none;
    }

/* ================= ИДЕАЛЬНОЕ ВЫРАВНИВАНИЕ КАЛЕНДАРЯ JQUERY UI ================= */

/* Основной контейнер календаря */
#jqueryUiDatePicker {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 0 !important;
}

    /* Шапка календаря — превращаем в гибкий Flexbox */
    #jqueryUiDatePicker .ui-datepicker-header {
        background: #212529 !important; /* Темный стильный фон */
        color: #ffffff !important;
        border: none !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* Разносит стрелки по бокам, а текст в центр */
        padding: 12px 16px !important;
        position: relative !important;
    }

    /* Блок с названием месяца и года — строго по центру */
    #jqueryUiDatePicker .ui-datepicker-title {
        margin: 0 auto !important;
        text-align: center !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        order: 2; /* Помещает текст между стрелками */
    }

    /* Кнопки навигации Назад и Вперед */
    #jqueryUiDatePicker .ui-datepicker-prev,
    #jqueryUiDatePicker .ui-datepicker-next {
        position: static !important; /* Отменяем старое абсолютное позиционирование */
        transform: none !important;
        width: 32px !important;
        height: 32px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        transition: background-color 0.2s ease;
    }

    /* Порядок кнопок в flex-контейнере */
    #jqueryUiDatePicker .ui-datepicker-prev {
        order: 1;
    }

    #jqueryUiDatePicker .ui-datepicker-next {
        order: 3;
    }

        #jqueryUiDatePicker .ui-datepicker-prev:hover,
        #jqueryUiDatePicker .ui-datepicker-next:hover {
            background: rgba(255, 255, 255, 0.2) !important;
        }

        /* Скрываем системные иконки-картинки и текст */
        #jqueryUiDatePicker .ui-icon,
        #jqueryUiDatePicker .ui-datepicker-prev span,
        #jqueryUiDatePicker .ui-datepicker-next span {
            display: none !important;
        }

        /* Рисуем аккуратные минималистичные стрелочки-иконки через CSS */
        #jqueryUiDatePicker .ui-datepicker-prev::after,
        #jqueryUiDatePicker .ui-datepicker-next::after {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            border-top: 2px solid #ffffff !important;
            border-left: 2px solid #ffffff !important;
        }

    /* Стрелочка назад (<) */
    #jqueryUiDatePicker .ui-datepicker-prev::after {
        transform: rotate(-45deg);
        margin-left: 2px;
    }

    /* Стрелочка вперед (>) */
    #jqueryUiDatePicker .ui-datepicker-next::after {
        transform: rotate(135deg);
        margin-right: 2px;
    }

    /* Если кнопка заблокирована (ui-state-disabled), мягко скрываем её */
    #jqueryUiDatePicker .ui-datepicker-prev.ui-state-disabled,
    #jqueryUiDatePicker .ui-datepicker-next.ui-state-disabled {
        opacity: 0.2 !important;
        cursor: default !important;
        background: transparent !important;
    }

    /* Сетка календаря (таблица дней) */
    #jqueryUiDatePicker .ui-datepicker-calendar {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        margin: 12px 0 !important;
    }

        #jqueryUiDatePicker .ui-datepicker-calendar th {
            padding: 8px 0 !important;
            text-align: center !important;
        }

        #jqueryUiDatePicker .ui-datepicker-calendar td {
            padding: 6px 0 !important;
            text-align: center !important;
        }

        /* Названия дней недели (ПН, ВТ, СР...) */
        #jqueryUiDatePicker .ui-datepicker-calendar th span {
            color: #adb5bd !important;
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

    /* Зеленые круглые дни с фотоотчетами */
    #jqueryUiDatePicker .has-photos a {
        background-color: #198754 !important; /* Уютный зеленый из Bootstrap 5 */
        color: #ffffff !important;
        border-radius: 50% !important;
        font-weight: 700 !important;
        width: 34px !important;
        height: 34px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 3px 6px rgba(25, 135, 84, 0.35) !important;
        transition: background-color 0.15s ease, transform 0.1s ease;
    }

        #jqueryUiDatePicker .has-photos a:hover {
            background-color: #146c43 !important;
            transform: scale(1.08);
        }

    /* Обычные числа (без фотоотчетов) */
    #jqueryUiDatePicker .ui-state-default {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        margin: 0 auto !important;
        border: none !important;
        background: transparent !important;
        color: #343a40 !important;
        text-decoration: none !important;
        font-size: 0.9rem;
    }

    /* Интерактивный ховер для обычных чисел */
    #jqueryUiDatePicker tbody td:not(.has-photos) a:hover {
        background-color: #f1f3f5 !important;
        color: #212529 !important;
        border-radius: 50% !important;
    }