@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

/* Sidebar Styling - Blue Theme */
.fi-sidebar {
    @apply transition-all duration-300 ease-in-out bg-primary-700 dark:bg-primary-900 border-r border-primary-800 dark:border-primary-950;
}

.fi-sidebar .fi-sidebar-header .fi-logo {
    @apply text-white font-bold;
}

.fi-sidebar .fi-sidebar-header {
    @apply flex-row-reverse justify-between items-center px-4 py-6 border-b border-white/10;
}

/* Sidebar Item Buttons (Normal/Hover/Active) */
.fi-sidebar .fi-sidebar-item-button,
.fi-sidebar .fi-sidebar-item-btn {
    @apply !transition-all !duration-200 !rounded-lg !mx-2 !my-0.5;
    background-color: transparent !important;
    color: white !important;
}

/* Default state: White text and icons inside sidebar ONLY */
.fi-sidebar .fi-sidebar-item-button *,
.fi-sidebar .fi-sidebar-item-btn *,
.fi-sidebar .fi-sidebar-item-button span,
.fi-sidebar .fi-sidebar-item-btn span,
.fi-sidebar .fi-sidebar-item-button svg,
.fi-sidebar .fi-sidebar-item-btn svg,
.fi-sidebar .fi-icon {
    color: white !important;
    --c-400: theme('colors.white') !important;
    --c-500: theme('colors.white') !important;
    --c-600: theme('colors.white') !important;
}

/* Hover and Active states: White background, Blue-500 text and icons */
.fi-sidebar .fi-sidebar-item-button:hover,
.fi-sidebar .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item.fi-active>.fi-sidebar-item-button,
.fi-sidebar .fi-sidebar-item.fi-active>.fi-sidebar-item-btn,
.fi-sidebar .fi-sidebar-item-button.fi-active,
.fi-sidebar .fi-sidebar-item-btn.fi-active {
    @apply !bg-white;
}

.fi-sidebar .fi-sidebar-item-button:hover *,
.fi-sidebar .fi-sidebar-item-btn:hover *,
.fi-sidebar .fi-sidebar-item.fi-active * {
    color: theme('colors.blue.500') !important;
    --c-400: theme('colors.blue.500') !important;
    --c-500: theme('colors.blue.500') !important;
    --c-600: theme('colors.blue.500') !important;
}

/* Group labels and collapse icons visibility on blue sidebar */
.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-group-collapse-icon {
    @apply !text-white/70 !transition-colors !duration-200 !text-[10px] !uppercase !tracking-wider !font-bold !px-4 !mb-2;
}

.fi-sidebar .fi-sidebar-group-button:hover .fi-sidebar-group-collapse-icon {
    color: white !important;
}

/* Topbar Styling */
.fi-topbar {
    @apply !bg-blue-700 !transition-colors !duration-200;
}

.fi-topbar .fi-logo,
.fi-topbar .fi-icon-btn,
.fi-topbar .fi-topbar-item-label,
.fi-topbar .fi-icon {
    @apply !text-white !transition-colors !duration-200;
}

.fi-main {
    @apply bg-gray-50/50 dark:bg-zinc-950;
}

.fi-card {
    @apply border-none shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 transition-shadow duration-300;
}

.fi-card:hover {
    @apply shadow-md ring-gray-950/10 dark:ring-white/20;
}

.fi-btn {
    @apply transition-all active:scale-[0.98];
}

.progress-bar {
    @apply h-4 w-full bg-gray-100 dark:bg-gray-800 rounded-full shadow-inner overflow-hidden
}

.progress-bar-value {
    @apply flex h-full items-center justify-center bg-primary-600 dark:bg-primary-500 rounded-r-full shadow-inner text-xs font-bold text-white;
}