/* admin.css */

/* Стили для табов админки */
.admin-tab {
    padding: 0.75rem 1.5rem;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
}
.admin-tab:hover {
    background-color: #f3f4f6;
}
.admin-tab.active-tab {
    color: #dc2626;
    border-color: #dc2626;
}

/* Стили для печати (скрывают элементы, которые не должны быть на распечатке) */
@media print {
    .no-print {
        display: none !important;
    }
    body {
        background-color: #fff; /* Белый фон для печати */
    }
    /* Добавлены стили для печати фона */
    body.print-background-design {
        background-image: url('/img/print_background_pattern.png'); /* Путь к вашему фону */
        background-repeat: repeat; /* Замостить фон */
        background-size: 150px 150px; /* Размер фона */
    }
}

/* Адаптивная группа кнопок для панели администратора */
.btn-group-responsive {
    display: flex;
    flex-direction: column; /* Располагаем вертикально на маленьких экранах */
    gap: 10px; /* Отступ между кнопками */
    width: 100%;
}
@media (min-width: 640px) { /* sm breakpoint */
    .btn-group-responsive {
        flex-direction: row; /* Располагаем горизонтально на больших экранах */
        align-items: center;
        justify-content: flex-end; /* Выравниваем по правому краю */
        gap: 15px; /* Больший отступ */
        width: auto; /* Занимаем только необходимую ширину */
    }
}
.btn-group-responsive button {
    width: 100%; /* Полная ширина на маленьких экранах */
    flex-shrink: 0; /* Запрещаем сжиматься */
}
@media (min-width: 640px) {
    .btn-group-responsive button {
        width: auto; /* Автоматическая ширина на больших экранах */
        flex-grow: 0;
    }
}

/* Специальный стиль для комбинации кнопки выбора файла */
.file-input-group-responsive {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Растягиваем элементы, чтобы заполнить ширину */
    gap: 10px;
    flex-grow: 1;
}
@media (min-width: 640px) {
    .file-input-group-responsive {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }
    .file-input-group-responsive button {
        width: auto;
    }
    .file-input-group-responsive span {
        flex-grow: 1; /* Имя файла занимает доступное пространство */
        text-align: left;
    }
}

/* Стили модальных окон */
.modal {
    background-color: rgba(0, 0, 0, 0.75); /* Затемненный фон */
    z-index: 50; /* Убеждаемся, что модальное окно поверх другого контента */
}
.modal-content {
    width: 95%; /* Регулируем ширину для маленьких экранов */
    max-width: 768px; /* Эквивалентно max-w-2xl */
    max-height: 95vh; /* Убеждаемся, что модальное окно помещается по высоте экрана */
    overflow-y: auto; /* Включаем прокрутку для содержимого модального окна */
    padding: 20px; /* Регулируем отступы */
}
@media (min-width: 768px) {
    .modal-content {
        max-width: 900px; /* Большая максимальная ширина для md-экранов и выше */
        padding: 40px;
    }
}

/* Специфические стили для предпросмотра изображения в модальном окне продукта */
.product-modal-image-preview {
    width: 100%; /* Изображение заполняет свой контейнер */
    height: auto; /* Сохраняем соотношение сторон */
    max-height: 200px; /* Ограничиваем высоту для предпросмотра */
    object-fit: contain; /* Убеждаемся, что все изображение видно */
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Специфические стили для элементов категорий */
.category-item {
    background-color: #f0f4f8; /* Светлый фон */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
    flex-wrap: wrap; /* Разрешаем перенос на маленьких экранах */
    gap: 10px; /* Отступ между элементами */
}
.category-item:hover {
    background-color: #e2e8f0; /* Светлее при наведении */
}
.category-item .category-name {
    flex-grow: 1; /* Позволяем названию категории занимать пространство */
}
.category-item .category-actions {
    display: flex;
    gap: 5px; /* Отступ между кнопками действий */
    align-items: center;
}
.category-order-input {
    width: 60px; /* Регулируем ширину по необходимости */
    text-align: center;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 10px;
}

/* Исправление для изображения в списке продуктов, чтобы оно было прямоугольным */
#product-list img {
    border-radius: 0.25rem; /* Закругленные углы, эквивалент rounded-lg */
    width: 180px; /* Увеличиваем ширину */
    height: 90px;  /* Устанавливаем высоту, чтобы было прямоугольным */
    object-fit: cover; /* Важно: изображение заполняет указанные размеры, обрезая лишнее */
}

/* Дополнительные адаптивные стили */

/* Общие контейнеры: уменьшаем padding на мобильных */
body {
    padding: 1rem;
}
@media (min-width: 768px) { /* md breakpoint */
    body {
        padding: 2rem;
    }
}

/* Заголовки: уменьшаем размер на мобильных */
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
}
@media (min-width: 768px) {
    h1 {
        font-size: 3rem;
    }
    h2 {
        font-size: 2rem;
    }
}

/* Формы и поля ввода: убедимся, что они хорошо выглядят на маленьких экранах */
input[type="text"],
input[type="number"],
input[type="email"],
textarea,
select {
    width: 100%; /* Занимают всю доступную ширину */
    box-sizing: border-box; /* Учитываем padding и border в общей ширине */
    margin-bottom: 1rem; /* Добавляем отступ между полями */
}

/* Модальные окна: более агрессивные настройки для маленьких экранов */
.modal-content {
    margin: 1rem; /* Немного отступа от краев экрана */
}
@media (max-width: 767px) {
    .modal-content {
        padding: 15px; /* Уменьшаем padding внутри модалки на мобильных */
    }
    .modal-content h2 {
        font-size: 1.75rem; /* Уменьшаем заголовок модалки */
    }
}

/* Секции управления: на маленьких экранах могут быть узкими */
.bg-white.p-6 {
    padding: 1rem; /* Уменьшаем padding для секций на мобильных */
}

/* Кнопки: Stacked buttons on small screens */
.flex.justify-end.space-x-4.mt-6 {
    flex-direction: column;
    gap: 10px;
    margin-top: 1rem;
}
.flex.justify-end.space-x-4.mt-6 button {
    width: 100%;
}
@media (min-width: 640px) {
    .flex.justify-end.space-x-4.mt-6 {
        flex-direction: row;
        gap: 1rem;
    }
    .flex.justify-end.space-x-4.mt-6 button {
        width: auto;
    }
}

/* Элементы списка ингредиентов/вкусов/категорий: */
/* Теперь центрируем содержимое на мобильных */
.category-item,
#ingredients-list > div, /* Это ваш div.bg-gray-100 */
#tastes-list > div {
    flex-direction: column; /* По умолчанию располагаем элементы вертикально */
    align-items: center; /* Центрируем элементы по горизонтали */
    padding: 0.75rem;
    text-align: center; /* Центрируем текст внутри элементов */
}

/* Элементы внутри flex-контейнера (изображение + название, и кнопки) */
.category-item > div,
#ingredients-list > div > div,
#tastes-list > div > div {
    width: 100%; /* Занимают всю ширину */
    justify-content: center; /* Центрируем содержимое внутренних flex-блоков */
}

/* Специфические стили для кнопок действий внутри элементов списка */
.category-item .category-actions,
#ingredients-list > div .flex.gap-2,
#tastes-list > div .flex.gap-2 {
    width: 100%;
    justify-content: center; /* Центрируем кнопки действий */
    margin-top: 0.5rem;
}

@media (min-width: 768px) { /* На экранах побольше делаем их горизонтальными */
    .category-item,
    #ingredients-list > div,
    #tastes-list > div {
        flex-direction: row;
        align-items: center; /* Возвращаем выравнивание по центру по вертикали */
        justify-content: space-between; /* Возвращаем распределение пространства */
        padding: 10px;
        text-align: left; /* Возвращаем выравнивание текста по левому краю */
    }
    .category-item .flex-grow.flex.items-center.gap-2.flex-wrap,
    #ingredients-list > div .flex.items-center.gap-2, /* Внутренний блок с картинкой и текстом */
    #tastes-list > div .flex.items-center.gap-2 {
        flex-wrap: nowrap;
        justify-content: flex-start; /* Возвращаем выравнивание по левому краю */
    }
    .category-item .category-actions,
    #ingredients-list > div .flex.gap-2,
    #tastes-list > div .flex.gap-2 {
        width: auto; /* Автоматическая ширина */
        margin-top: 0;
        justify-content: flex-start; /* Выравнивание по левому краю */
    }
}

/* Контролы для загрузки изображений */
.file-input-group-responsive input[type="file"] {
    display: none; /* Скрываем стандартный инпут файла */
}

/* Табы навигации */
#admin-tabs {
    flex-wrap: wrap; /* Позволяем табам переноситься на новую строку */
}
.admin-tab {
    flex-basis: auto; /* Адаптивная ширина */
    text-align: center;
}
@media (max-width: 639px) { /* Дополнительные стили для очень маленьких экранов (ниже sm) */
    .admin-tab {
        width: 100%; /* Табы на всю ширину на очень маленьких */
        border-bottom: none; /* Убираем нижнюю границу между табами */
    }
    .admin-tab.active-tab {
        border-bottom: 3px solid #dc2626; /* Сохраняем активную границу */
    }
}

/* Стили для выбора языка и ссылки на сайт в хедере */
header .flex-col.sm\:flex-row.items-center.gap-4 {
    /* На мобильных (по умолчанию) */
    width: 100%; /* Занимаем всю ширину */
    align-items: center; /* Центрируем элементы внутри себя */
}
header .flex-col.sm\:flex-row.items-center.gap-4 > * {
    width: 100%; /* Переключатель языка и ссылка занимают всю доступную ширину */
    text-align: center; /* Центрируем текст внутри этих элементов */
}
@media (min-width: 640px) { /* Начиная со 'sm' breakpoint */
    header .flex-col.sm\:flex-row.items-center.gap-4 {
        width: auto; /* Возвращаем автоматическую ширину */
        flex-direction: row; /* Выстраиваем в ряд */
        justify-content: flex-end; /* Выравниваем по правому краю */
    }
    header .flex-col.sm\:flex-row.items-center.gap-4 > * {
        width: auto; /* Возвращаем автоматическую ширину для элементов */
        text-align: left; /* Возвращаем выравнивание текста по левому краю */
    }
    #to-site-link {
        padding: 0.5rem 1rem; /* Стандартный padding для ссылки на больших экранах */
        border: none; /* Убираем бордер для ссылки на больших экранах */
    }
}
#admin-lang-switcher-select {
    appearance: none; /* Убираем стандартные стрелки селекта */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25em;
    padding-right: 2.5rem; /* Добавляем отступ справа, чтобы стрелка не перекрывала текст */
}