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


.fi-section {margin-bottom: 15px}



/* logo */
.fi-topbar-start .fi-logo {
    padding-right: 10px;
}

/* display */
.flex { display: flex; }
.inline-flex { display: inline-flex; }

/* flex */
.flex-1 { flex: 1 1 0%; }
.min-w-0 { min-width: 0; }

/* alignment */
.items-center { align-items: center; }

/* gap utilities */
.gap-0 { gap: 0px; }
.gap-x-0 { column-gap: 0px; }
.gap-y-0 { row-gap: 0px; }

.gap-px { gap: 1px; }
.gap-x-px { column-gap: 1px; }
.gap-y-px { row-gap: 1px; }

.gap-0\.5 { gap: 0.125rem; }
.gap-x-0\.5 { column-gap: 0.125rem; }
.gap-y-0\.5 { row-gap: 0.125rem; }

.gap-1 { gap: 0.25rem; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-y-1 { row-gap: 0.25rem; }

.gap-1\.5 { gap: 0.375rem; }
.gap-x-1\.5 { column-gap: 0.375rem; }
.gap-y-1\.5 { row-gap: 0.375rem; }

.gap-2 { gap: 0.5rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-y-2 { row-gap: 0.5rem; }

.gap-2\.5 { gap: 0.625rem; }
.gap-x-2\.5 { column-gap: 0.625rem; }
.gap-y-2\.5 { row-gap: 0.625rem; }

.gap-3 { gap: 0.75rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-y-3 { row-gap: 0.75rem; }

.gap-3\.5 { gap: 0.875rem; }
.gap-x-3\.5 { column-gap: 0.875rem; }
.gap-y-3\.5 { row-gap: 0.875rem; }

.gap-4 { gap: 1rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-4 { row-gap: 1rem; }

.gap-5 { gap: 1.25rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-5 { row-gap: 1.25rem; }

/* spacing */
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.mt-2 { margin-top: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }

/* typography sizes */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }

/* font weight */
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* alignment helpers */
.text-right-col { text-align: right !important; }

/* border radius */
.rounded-lg { border-radius: 0.5rem; }

/* effects */
.transition { transition: all 0.2s ease-in-out; }

/* text colors */
.text-gray-950 { color: #030712; }
.text-gray-700 { color: #374151; }
.text-gray-600 { color: #4b5563; }
.text-gray-400 { color: #9ca3af; }
.text-gray-200 { color: #e5e7eb; }
.text-white { color: #ffffff; }

.text-primary-700 { color: #1d4ed8; }
.text-primary-600 { color: #bb4d00; }
.text-primary-400 { color: #60a5fa; }

/* background colors */
.bg-primary-50 { background-color: #f4f4f5; }
.bg-primary-950 { background-color: #172554; }
.bg-primary-400\/10 { background-color: rgba(96, 165, 250, 0.1); }

/* hover */
.hover\:text-primary-600:hover { color: #2563eb; }

/* dark mode */
.dark .dark\:text-gray-200 { color: #e5e7eb; }
.dark .dark\:text-gray-400 { color: #9ca3af; }
.dark .dark\:text-primary-400 { color: #60a5fa; }
.dark .dark\:text-white { color: #ffffff; }

.dark .dark\:bg-primary-950 { background-color: #172554; }
.dark .dark\:bg-primary-400\/10 { background-color: rgba(96, 165, 250, 0.1); }

.dark .dark\:hover\:text-primary-400:hover { color: #60a5fa; }

/* prose */
.prose {
    color: #374151;
    line-height: 1.75;
}

.prose-sm {
    font-size: 0.875rem;
}

.max-w-none {
    max-width: none;
}

.dark .dark\:prose-invert {
    color: #e5e7eb;
}



/* Общий стиль для группы в 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;
    }
}