body {
    margin: 0;
    padding: 20px;
}

body.light-theme {
    background-color: #fff;
    color: #000;
}

body.dark-theme {
    background-color: #444653;
    color: #fff;
}

.dark-theme .container {
    background-color: #565867;
}

.dark-theme .form-control {
    background-color: #2f3542;
    color: #fff;
    border-color: #fff;
}

body.dark-theme .btn-outline-primary {
    color: #fff;
    border-color: #fff;
}

body.dark-theme .btn-outline-primary:hover {
    color: #333;
    background-color: #fff;
}

body.dark-theme .form-control::placeholder {
    color: #fff;
}

body.dark-theme .btn-link {
    color: #fff;
}

body.dark-theme .btn-link:hover {
    color: #ddd;
}

body.dark-theme .btn-outline-primary {
    color: #fff !important;
    background-color: #343a40 !important;
    border-color: #343a40 !important;
}

body.dark-theme .btn-outline-primary:active,
body.dark-theme .btn-outline-primary.active {
    color: #343a40 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

body.dark-theme .btn-outline-primary:hover {
    color: #343a40 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

.dark-theme .form-control:focus {
    background-color: #222;
    color: #fff;
    border-color: #888;
}

body.dark-theme .table,
body.dark-theme .admin-container {
    background-color: #444653;
    color: #d3d3d3;
}

body.dark-theme .table th,
body.dark-theme .table tr,
body.dark-theme .table td {
    background-color: #222;
    color: #d3d3d3;
    border-color: #555;
}

body.dark-theme .table thead th {
    background-color: #2f3542;
    color: #fff;
}

body.dark-theme .table tbody tr td {
    color: #fff;
}

.dark-theme .btn {
    color: #fff !important;
}

.dark-theme .btn-warning {
    color: #000 !important;
}

.dark-theme .btn-light {
    color: #000 !important;
}

.dark-theme .btn:hover {
    background-color: #1c86ee;
}

.dark-theme a {
    color: #1e90ff;
}

.dark-theme .list-group {
    background-color: #444653;
    color: #d3d3d3;
}

.dark-theme .list-group-item {
    background-color: #222;
    border-color: #555;
}

/* Изменить цвет текста для элементов управления */
.dark-theme .dataTables_length label,
.dark-theme .dataTables_filter label,
.dark-theme .dataTables_info,
.dark-theme .dataTables_paginate {
    color: #fff;
}

/* Изменить фон и цвет текста для активной кнопки навигации */
.dark-theme .dataTables_paginate .paginate_button.current,
.dark-theme .dataTables_paginate .paginate_button.current:hover {
    color: #fff;
    background-color: #666;
}

/* Изменение основного стиля кнопок */
.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: none;
    border: none;
    color: #fff;
    padding: 10px 20px;
    margin: 0;
    transition: background 0.3s ease;
    font-size: 14px;
}

/* Стилизация активной кнопки */
.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none;
    color: #fff;
}

/* Стилизация кнопок при наведении */
.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none;
    color: #fff;
}

/* Изменение стиля для disabled кнопок */
.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #444;
    color: #aaa;
    cursor: not-allowed;
}

/* Дополнительные стили для темной темы */
body.dark-theme .table tbody tr.new-order {
    background-color: #6c2e1f !important; /* светло-красный фон */
    color: #fff !important; /* белый текст */
}

body.dark-theme .table tbody tr.new-order td {
    background-color: #6c2e1f !important; /* светло-красный фон для ячеек */
    color: #fff !important; /* белый текст */
}

body.dark-theme .table tbody tr.cancelled-order {
    background-color: #a3871c !important; /* Желто-коричневый фон */
    color: #fff !important; /* Белый текст */
}

body.dark-theme .table tbody tr.cancelled-order td {
    background-color: #a3871c !important; /* Желто-коричневый фон */
    color: #fff !important; /* Белый текст */
}

h1, h2 {
    color: #333;
}


.theme-toggle {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}



form {
    width: 100%; /* Форма занимает всю ширину контейнера */
}

.mb-2 {
    margin-bottom: 1rem; /* Убираем лишние отступы, если класс mb-2 задаёт их слишком большими */
}

table {
    width: 100%; /* Таблица занимает всю ширину контейнера */
    table-layout: auto; /* Ячейки автоматически подстраиваются под содержимое */
    border-collapse: collapse; /* Схлопываем границы таблицы для чистого вида */
}

th, td {
    border: 1px solid #ccc;
    padding: 5px; /* Отступы внутри ячеек */
    text-align: left; /* Выравнивание текста влево */
}

th {
    background-color: #f2f2f2;
}

.admin-container {
    padding: 10px;
}

.additional-info {
    position: absolute;
    background-color: #CD5C5C;
    top: 0;
    right: 0;
    padding: 10px;
}

#usersTable_with_debt tr:nth-child(n+5) {
    display: none;
}

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

.tablinks {
    background-color: #f2f2f2;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 16px;
    width: calc(100% / {{ categories|length }});
    box-sizing: border-box;
    text-align: center;
}

.tablinks:hover {
    background-color: #ddd;
}

.tablinks.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.uploaded-data {
    flex-basis: 48%;
}

.similar-products {
    flex-basis: 48%;
}


/* Скрываем стрелки для Chrome, Safari, Edge и Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Скрываем стрелки для Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

@media (max-width: 576px) {
    /* Уменьшение размера заголовков */
    h1, h2, h3, h4, h5, h6 {
        font-size: 14px;
    }

    th, td {
        font-size: 14px; /* Уменьшаем шрифт на мобильных */
    }

    /* Уменьшение размера текста в таблице */
    .table td, .table th {
        font-size: 14px;
        padding: 9px;
        width: auto;
    }

    .tablinks {
        width: auto;
        margin: 2px; /* Уменьшенные отступы */
        padding: 0.5rem 0.75rem; /* Уменьшенный внутренний отступ */
        font-size: 0.875rem; /* Уменьшенный шрифт */
    }

    /* Уменьшение размера строк ввода */
    input[type="text"], input[type="number"], input[type="password"], input[type="date"], textarea {
        font-size: 14px;
        padding: 6px;
        width: 90%;
    }

    /* Уменьшение размера кнопок */
    button, input[type="submit"], input[type="reset"] {
        font-size: 14px;
        padding: 6px 12px;

    }

    .category-btn {
        margin: 0.2px; /* Уменьшенный отступ */
        padding: 3px 6px; /* Ещё компактнее на маленьких экранах */
        font-size: 10px; /* Уменьшенный шрифт */
    }

    #increaseFontBtn {
        display: none;
    }
}

/* Базовый стиль кнопок */
.category-btn {
    margin: 4px; /* Уменьшенный отступ */
    padding: 0.5rem 0.75rem; /* Компактный внутренний отступ */
    font-size: 1rem; /* Базовый размер текста */
    border-radius: 4px; /* Закругленные углы */
    white-space: nowrap; /* Чтобы текст кнопок не переносился */
}


/* Чтобы строка с заказом, где статус равен "Новый", была визуально выделена светло-красным */
.new-order {
    background-color: #f8d7da !important; /* светло-красный фон с переопределением */
    color: #721c24 !important; /* темно-красный цвет текста */
}

/* Стили для строки с заказом "Отменён" */
.cancelled-order {
    background-color: #fff3cd !important; /* Светло-желтый фон */
    color: #856404 !important; /* Темно-желтый текст */
}


/* Скрываем все дополнительные поля и элементы управления на мобильных устройствах */
@media (max-width: 767px) {
    .extra-info {
        display: none;
    }

    .large-text {
        display: none;
    }

    .small-text {
        display: block;
    }

    th, td {
        font-size: 14px; /* Уменьшаем шрифт на мобильных */
    }

    .category-btn {
        margin: 1.5px; /* Уменьшенный отступ */
        padding: 2px 6px; /* Ещё компактнее на маленьких экранах */
        font-size: 14px; /* Уменьшенный шрифт */
    }

    #increaseFontBtn {
        display: none;
    }

    .container-fluid {
      width: 100vw;  /* 100% от ширины окна просмотра */
      margin: 0;     /* Убираем любые внешние отступы */
      padding: 0;    /* Убираем любые внутренние отступы */
    }
}


/* выделение строки с новинкой */
.highlight-row {
    background-color: LightSkyBlue !important;
}


/* Пагинация чтобы не нагружать сервер */
.pagination {
    display: flex;
    padding: 0;
    list-style: none;
}