﻿.table-container {
    margin-top: 0px;
    max-height: 730px;
    --max-width: 1225px;
    min-width: 900px;
}

    .table-container table th.row-style {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        border-bottom: 0;
    }

    .table-container table td.row-style {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 19px;
        margin-left: 5px;
        margin-right: 5px;
    }
/* Шапка таблицы */
.thead-primary {
    background-color: #e3eaf1 !important;
    color: #475569 !important;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #cbd5e0 !important;
    text-transform: uppercase;
    padding: 12px 8px !important;
}

    .thead-primary th {
        background-color: #e3eaf1 !important;
        color: #475569 !important;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        border-bottom: 2px solid #cbd5e0 !important;
        text-transform: uppercase;
        padding: 12px 8px !important;
    }

.table-solid-modal {
    margin-top: 5px;
    min-height: 210px;
    max-height: 300px;
    overflow: auto;
    position: relative;
    border-radius: 5px;
    background-color: aliceblue;
}

.table-solid {
    margin-right: 5px;
    margin-top: 105px;
    min-height: 722px;
    max-height: 722px;
    min-width: 400px;
    overflow: auto;
    position: relative;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px; /* Более современное скругление */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
    /* Улучшаем саму таблицу внутри этого контейнера */
    .table-solid table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Делаем текст в строках черным и четким */
    .table-solid td {
        color: #1e293b !important; /* Глубокий графитовый */
        font-size: 0.85rem;
        padding: 10px 12px !important;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    /* Стилизация заголовков (номера заказов, даты) */
    .table-solid th {
        background-color: #f8fafc !important;
        color: #475569 !important;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        padding: 12px !important;
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom: 2px solid #3b82f6 !important; /* Акцентная синяя линия */
    }

    /* Выделение выбранной строки (активный заказ) */
    .table-solid tr.selected-row,
    .table-solid tr:active {
        background-color: #cadef7 !important;
        box-shadow: inset 4px 0 0 #3b82f6; /* Индикатор выбора слева */
    }

    /* Эффект при наведении */
    .table-solid tr:hover:not(.selected-row) {
        background-color: #f1f5f9 !important;
    }

    /* Основной текст в таблицах */
    .table-solid td,
    .table-solid span {
        --color: #000000 !important; /* Глубокий темный цвет */
        font-weight: 500; /* Чуть плотнее для четкости */
    }

        /* Усиливаем контраст для заблокированных (readonly) полей */
        .table-solid td:disabled,
        .table-solid .text-truncate {
            color: #0f172a !important;
        }

    /* Разделение строк тонкими линиями вместо тяжелых границ */
    .table-solid tbody tr {
        border-bottom: 1px solid #e2e8f0;
        transition: all 0.2s ease;
    }

        /* Эффект при наведении — делаем строку активной */
        .table-solid tbody tr:hover {
            box-shadow: inset 4px 0 0 #3b82f6; /* Синяя полоска слева при наведении */
        }

    .table-solid thead th {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 1rem 0.5rem;
        border-bottom: 2px solid #edf2f7;
    }

@media (max-width: 640px) {
    .table-container {
        position: relative;
        max-height: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .table-solid {
        min-height: 300px;
        max-height: 300px;
        overflow-x: hidden;
        top: 40px;
        border: 0;
        z-index: 1;
    }





    .card-table {
        overflow-x: auto;
        overflow-y: hidden;
        top: -20px;
    }
        /* Скрываем заголовки таблицы */
        .card-table thead {
            display: none;
        }

        /* Делаем тело таблицы flex-контейнером для удобного скролла */
        .card-table tbody {
            display: flex;
            flex-direction: row; /* Карточки выстраиваются в ряд для свайпа */
            gap: 15px;
            padding: 10px;
            overflow-x: auto; /* Включаем горизонтальный свайп */
            scroll-snap-type: x mandatory; /* Эффект "прилипания" карточки */
            -webkit-overflow-scrolling: touch;
        }

        /* Превращаем каждую строку в карточку */
        .card-table tr {
            display: flex;
            flex-direction: column;
            min-width: 280px; /* Ширина карточки */
            max-width: 320px;
            background: #ffffff;
            border-radius: 16px !important;
            padding: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            border: 1px solid #e0e6ed !important;
            scroll-snap-align: center;
            position: relative;
            align-items: center;
            text-align: center;
        }

        /* Убираем стандартные паддинги ячеек */
        .card-table td {
            display: block;
            border: none !important;
            padding: 4px 0 !important;
        }
            /* Стилизация номера (Serial) */
            .card-table td:nth-child(2) {
                order: -1; /* Поднимаем номер в самый верх */
                font-size: 0.8rem;
                color: #6c757d;
            }
            /* Стилизация штрихкода в шапке карточки */
            .card-table td:nth-child(3) { /* Barcode */
                font-weight: 800;
                color: #0078d4;
                font-size: 1.1rem;
                border-bottom: 1px solid #f0f3f7 !important;
                margin-bottom: 8px;
            }


    /* Компактный блок с весом и стоимостью */
    .badge-amount {
        display: inline-block !important;
        background: #f8f9fa;
        padding: 4px 10px !important;
        border-radius: 8px;
        font-weight: normal;
        color: #666;
        margin-right: 5px;
        font-size: 0.85rem;
    }

    /* Блок чекбоксов (иконки оплаты/срочности) */
    .row-style {
        display: flex !important;
        justify-content: flex-start;
        gap: 15px;
        margin: 10px 0;
        padding: 10px 0 !important;
        border-top: 1px dashed #eee !important;
    }

    /* Позиционирование статуса в углу */
    .card-table td:last-child {
        position: absolute;
        top: 16px;
        right: 16px;
    }
    /* Скрываем пустые колонки, если они мешают верстке */
    .card-table td:empty {
        display: none;
    }
}
