/* === Общие стили === */
body {
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
}

.page-head {
    padding: 20px 10px;
}

    .page-head h1 {
        font-size: 2rem;
        margin: 0;
        word-wrap: break-word;
    }

/* === Таблица товаров === */
.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
}

    .table thead th {
        background-color: #e9ecef;
        vertical-align: middle;
        font-size: 0.9rem;
    }

    .table tbody td {
        vertical-align: middle;
        font-size: 0.875rem;
    }

.img-fluid {
    max-height: 80px;
    object-fit: contain;
}

.discount-row {
    background-color: #d0ecff;
    color: #0c5460;
    font-size: 0.8rem;
}

.discount-box {
    border-radius: 0.375rem;
    background-color: #0d6efd;
    color: #fff;
    padding: 0.5rem;
    margin: 0.25rem 0;
    font-size: 0.85rem;
}

    .discount-box strong {
        font-size: 0.9rem;
    }

.form-inline {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

    .form-inline input[type="text"] {
        text-align: center;
        width: 50px;
    }

/* Стили DataTables */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin-bottom: 0.5rem;
}

.dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    margin-top: 1rem;
}

/* Кнопки сортировки */
.d-flex.flex-wrap .btn {
    margin: 2px 0;
}

/* === Адаптивность === */

/* Планшеты (992px ↓) */
@media (max-width: 991px) {
    .table tbody td,
    .table thead th {
        font-size: 0.85rem;
    }

    .img-fluid {
        max-height: 60px;
    }

    .discount-box {
        font-size: 0.8rem;
        padding: 0.4rem;
    }

    .form-inline input[type="text"] {
        width: 45px;
    }

    .d-flex.flex-wrap {
        align-items: flex-start;
    }
}

/* Мобильные (768px ↓) */
@media (max-width: 767px) {
    .page-head h1 {
        font-size: 1.5rem;
    }

    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .table thead,
        .table tbody,
        .table tr,
        .table th,
        .table td {
            display: block;
        }

        .table thead {
            display: none; /* скрываем шапку */
        }

        .table tbody tr {
            margin-bottom: 15px;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 10px;
        }

        .table tbody td {
            text-align: right;
            padding-left: 50%;
            position: relative;
        }

            .table tbody td::before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                width: 45%;
                padding-right: 10px;
                font-weight: 500;
                text-align: left;
            }

    .img-fluid {
        max-height: 50px;
    }

    .discount-box {
        font-size: 0.75rem;
        padding: 0.3rem;
    }

    .form-inline input[type="text"] {
        width: 40px;
    }
}

/* Очень маленькие экраны (480px ↓) */
@media (max-width: 480px) {
    .page-head h1 {
        font-size: 1.5rem;
    }

    .img-fluid {
        max-height: 50px;
    }

    .discount-box {
        font-size: 0.7rem;
        padding: 0.25rem;
    }

    .form-inline input[type="text"] {
        width: 35px;
    }
}