/* custom.css для стилизации кастомного меню каталога в Filament sidebar */



/* Общий стиль для группы в sidebar (fi-sidebar-group) */
.fi-sidebar-group.custom {
    margin-top: 1rem; /* Отступ сверху для разделения групп */
    padding: 0.5rem 0; /* Внутренние отступы */
    border-top: 1px solid #e5e7eb; /* Разделительная линия сверху */
}

/* Заголовок группы (fi-sidebar-group-label, например, "Каталог (20)" или название категории) */
.fi-sidebar-group.custom .fi-sidebar-group-label {
    font-size: 0.875rem; /* Размер шрифта (text-sm) */
    font-weight: 600; /* Полужирный */
    color: #4b5563; /* Темно-серый цвет */
    /* padding: 0.25rem 1rem; /* Отступы */
    text-transform: uppercase; /* Верхний регистр для акцента */
    /* letter-spacing: 0.05em;  Разрядка букв */
}

/* Список элементов группы (fi-sidebar-group-items) */
.fi-sidebar-group-items.custom {
    margin-top: 0.25rem; /* Отступ сверху от заголовка */
}

/* Элемент списка (fi-sidebar-item) */
.fi-sidebar-item.custom {
    border-radius: 0.375rem; /* Закругленные углы */
    overflow: hidden; /* Чтобы hover не выходил за пределы */
}

/* Элемент списка (fi-sidebar-item) */
.fi-sidebar-item.custom {
    position: relative; /* Для позиционирования, если нужно кастомизировать маркеры */
    margin-bottom: 0.15rem; /* Отступ между элементами */
    list-style: disc; /* Убеждаемся, что точки применяются */
}

/* Кастомизация маркера (точки) с помощью ::marker (если нужно изменить цвет/размер) */
.fi-sidebar-item.custom::marker {
    color: #6b7280; /* Серый цвет точки */
    font-size: 1rem; /* Размер точки */
}


/* Ссылка в элементе (fi-sidebar-item-link) */
.fi-sidebar-item-link {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Отступ между иконкой и текстом */
    padding: 0.2rem 0.2rem; /* Уменьшенные отступы для компактности */
    font-size: 0.875rem; /* text-sm */
    color: #374151; /* Темный текст */
    transition: background-color 0.2s ease, color 0.2s ease; /* Плавные переходы */
}

.fi-sidebar-item-link:hover {
    background-color: #f3f4f6; /* Светлый фон при ховере */
    color: #1f2937; /* Темнее текст при ховере */
}

/* Активный элемент (fi-active) */
.fi-sidebar-group.custom .fi-active {
    background-color: #fef3c7; /* Желтый фон (Amber theme) */
    color: #d97706; /* Оранжевый текст */
    font-weight: 700; /* Жирный шрифт */
    box-shadow: inset 0 0 0 1px #fbbf24; /* Легкая рамка для акцента */
}

/* Иконка в элементе (fi-sidebar-item-icon) */
.fi-sidebar-group.custom .fi-sidebar-item-icon {
    height: 1.25rem; /* h-5 */
    width: 1.25rem; /* w-5 */
    color: #6b7280; /* Серый цвет */
    flex-shrink: 0; /* Не сжимается */
}

/* Счетчики в лейблах (например, количество продуктов в скобках) */
.fi-sidebar-group.custom .fi-sidebar-item-link span {
    margin-left: 0.25rem; /* Отступ для счетчика */
    font-size: 0.75rem; /* Меньший размер (text-xs) */
    color: #9ca3af; /* Светло-серый */
    font-weight: 400; /* Обычный вес */
}

/* Специальный стиль для "← Назад" (если лейбл содержит '← Назад') */
.fi-sidebar-group.custom .fi-sidebar-item-link:contains('← Назад') {
    color: #3b82f6; /* Синий цвет для ссылки назад */
    font-weight: 500; /* Средний вес */
}

.fi-sidebar-group.custom .fi-sidebar-item-link:contains('← Назад'):hover {
    color: #2563eb; /* Темнее при ховере */
}

/* Для вложенных групп (если есть подуровни в будущем) */
.fi-sidebar-group.custom .fi-sidebar-group.custom {
    margin-left: 1rem; /* Отступ для иерархии */
    border-left: 2px solid #d1d5db; /* Вертикальная линия для вложенности */
    padding-left: 0.5rem;
}

/* Темная тема (dark mode) адаптации */
.dark .fi-sidebar-group.custom {
    border-top-color: #374151; /* Темная линия */
}

.dark .fi-sidebar-group-label {
    color: #9ca3af; /* Светло-серый в dark */
}

.dark .fi-sidebar-item-link {
    color: #d1d5db; /* Светлый текст */
}

.dark .fi-sidebar-item-link:hover {
    background-color: #374151; /* Темный фон ховера */
    color: #f3f4f6;
}

.dark .fi-active {
    background-color: #713f12; /* Темный желтый для Amber */
    color: #fbbf24;
}

.dark .fi-sidebar-item-icon {
    color: #9ca3af;
}

/* Раздел "Дополнительно" (если нужно стилизовать отдельно) */
.px-3.py-4.mt-6.border-t.border-gray-200.dark:border-gray-700 {
    background-color: #f9fafb; /* Светлый фон */
    border-radius: 0.5rem; /* Закругления */
    margin-bottom: 1rem; /* Отступ снизу */
}

.dark .px-3.py-4.mt-6.border-t.border-gray-200.dark:border-gray-700 {
    background-color: #1f2937; /* Темный фон */
}

/* Адаптация для мобильных (если sidebar сворачивается) */
@media (max-width: 768px) {
    .fi-sidebar-group.custom {
        margin-top: 0.5rem;
    }
    .fi-sidebar-item-link {
        padding: 0.5rem 0.75rem;
    }
}