/* custom filament theme to match the design */

/* Make the sidebar dark with a beautiful gradient */
.fi-sidebar {
    background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%) !important;
    border-right: none !important;
}

/* Sidebar Logo / Header */
.fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar Text and Icons */
.fi-sidebar-item-label, .fi-sidebar-item-icon {
    color: #cbd5e1 !important; /* Slate 300 */
}

/* Sidebar Group Labels (Catalog, Sales, etc.) */
.fi-sidebar-group-label {
    color: #94a3b8 !important; /* Slate 400 */
    font-weight: 600 !important;
}

/* Active Sidebar Item */
.fi-sidebar-item-active > a, .fi-sidebar-item-active > button {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.5rem !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* Hover on Sidebar Items */
.fi-sidebar-item > a:hover, .fi-sidebar-item > button:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.fi-sidebar-item > a:hover .fi-sidebar-item-label,
.fi-sidebar-item > a:hover .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* Force the logo text to be white in sidebar */
.fi-sidebar .fi-logo {
    color: #ffffff !important;
}

/* Logo in topbar (mobile view) should be dark blue */
.fi-topbar .fi-logo {
    color: #1e3a8a !important;
}

/* Make sure active state is clearly distinguished */
.fi-sidebar-item-active > a, .fi-sidebar-item-active > button {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.5rem !important;
}

/* Make sure the main content area has the light gray background */
.fi-main {
    background-color: #f8fafc !important;
}