/* Custom Filament Admin Styling - v3 Fixes */
:root {
    --primary-red: #fc0d1b;
    --primary-red-dark: #cc0a15;
    --primary-red-light: #ff4d58;
}

/* Sidebar Active Item - Stronger Selectors for Filament v3 */
.fi-sidebar-item-active>a,
.fi-sidebar-item-active>button,
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(145deg, var(--primary-red), var(--primary-red-dark)) !important;
    background-color: var(--primary-red) !important;
    color: #ffffff !important;
    --c-text-gray-950: #ffffff;
    /* Filament variable override */
    box-shadow:
        3px 3px 6px rgba(0, 0, 0, 0.2),
        -1px -1px 2px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px);
    border-radius: 0.5rem;
    font-weight: 700 !important;
}

.fi-sidebar-item-active>a span,
.fi-sidebar-item-active>button span {
    color: #ffffff !important;
}

.fi-sidebar-item-active>a:hover,
.fi-sidebar-item-active>button:hover {
    transform: translateY(-2px);
    box-shadow:
        4px 4px 8px rgba(0, 0, 0, 0.25),
        -1px -1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* Active Icon Color */
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: white !important;
}

/* Inactive Items Hover Effect */
.fi-sidebar-item:not(.fi-sidebar-item-active)>a:hover,
.fi-sidebar-item:not(.fi-sidebar-item-active)>button:hover {
    background-color: rgba(252, 13, 27, 0.05) !important;
    color: var(--primary-red) !important;
}

.fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-icon {
    color: #6b7280;
    /* Gray-500 default */
}

.fi-sidebar-item:not(.fi-sidebar-item-active):hover .fi-sidebar-item-icon {
    color: var(--primary-red) !important;
}

/* Sidebar Background (Optional - plain white is default, but we can add subtle texture if needed) */
/* .fi-sidebar { background-color: ... } */

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

.fi-sidebar-header .fi-logo {
    color: white !important;
}

/* Navbar Styling */
.fi-topbar {
    background: var(--primary-red) !important;
    background-color: var(--primary-red) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.fi-topbar .fi-btn {
    color: white !important;
}

.fi-user-menu-trigger {
    color: white !important;
}

.fi-topbar nav {
    background-color: transparent !important;
}

/* Input Focus Rings - Global */
.fi-input:focus-within,
.fi-select:focus-within,
input:focus,
select:focus,
textarea:focus {
    --tw-ring-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
}

/* Primary Buttons */
.fi-btn-primary {
    background-color: var(--primary-red) !important;
    --tw-ring-color: var(--primary-red) !important;
}

.fi-btn-primary:hover {
    background-color: var(--primary-red-dark) !important;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border: 1px solid var(--primary-red);
    /* Red Border for Track */
}

::-webkit-scrollbar-thumb {
    background: var(--primary-red);
    /* Solid Red Thumb */
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-red-dark);
}

/* Sidebar Specific overrides - ensure they match the global red style */
.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
    border-left: 1px solid var(--primary-red);
    /* Subtle separator */
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--primary-red);
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: var(--primary-red-dark);
}