/* MDJ HQ Safe Blue Sidebar v0.3.0
   Scope: sidebar only. No layout, body, Livewire, PWA, or dashboard overrides. */

.fi-sidebar {
    background: linear-gradient(180deg, #123d8d 0%, #0f3478 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.fi-sidebar-header {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

.fi-sidebar-nav,
.fi-sidebar-group,
.fi-sidebar-group-items {
    background: transparent !important;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header button,
.fi-sidebar-close-button,
.fi-sidebar-collapse-button {
    color: #ffffff !important;
}

.fi-sidebar-group-label,
.fi-sidebar-group-button,
.fi-sidebar-group-collapse-button {
    color: #cfe0ff !important;
}

.fi-sidebar-item,
.fi-sidebar-item.fi-active,
.fi-sidebar-item-active {
    background: transparent !important;
}

.fi-sidebar-item-button {
    color: #f8fbff !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 0.75rem !important;
    transition: background-color 160ms ease, color 160ms ease !important;
}

.fi-sidebar-item-label {
    color: inherit !important;
}

.fi-sidebar-item-icon {
    color: #dbeafe !important;
}

.fi-sidebar-item-button:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.09) !important;
    background-image: none !important;
}

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

.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button,
.fi-sidebar-item-button[aria-current="page"] {
    color: #ffffff !important;
    background: rgba(80, 150, 255, 0.22) !important;
    background-image: none !important;
    box-shadow: inset 3px 0 0 #d6a84b !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon {
    color: #ffffff !important;
}

.fi-sidebar-item-badge {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.24);
    border-radius: 999px;
}

@media (max-width: 1023px) {
    .fi-sidebar {
        background: linear-gradient(180deg, #123d8d 0%, #0f3478 100%) !important;
    }
}

/* MDJ_SIDEBAR_CONTRAST_V031 */
.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-group-button,
.fi-sidebar .fi-sidebar-group-collapse-button {
    color: #e7-sidebar-group-button,
.fi-sidebar .fi-sidebar-group-collapse-button {
    color: #e7f0ff !important;
}

.fi-sidebar .fi-sidebar-nav .fi-sidebar-item .fi-sidebar-item-button {
    color: #ffffff !important;
    background-color: transparent !important;
    background-image: none !important;
}

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

.fi-sidebar .fi-sidebar-nav .fi-sidebar-item .fi-sidebar-item-button:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.fi-sidebar .fi-sidebar-nav .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar .fi-sidebar-nav .fi-sidebar-item-active > .fi-sidebar-item-button,
.fi-sidebar .fi-sidebar-nav .fi-sidebar-item-button.fi-active,
.fi-sidebar .fi-sidebar-nav .fi-sidebar-item-button[aria-current="page"] {
    color: #123d8d !important;
    background-color: #dbeafe !important;
    background-image: none !important;
    box-shadow: inset 4px 0 0 #d6a84b !important;
}

.fi-sidebar .fi-sidebar-nav .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-nav .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-nav .fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-nav .fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-nav .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-nav .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon {
    color: #123d8d !important;
}

/* MDJ SIDEBAR DARK MODE v0.3.2 */
html.dark .fi-sidebar {
    background-color: #0f172a !important;
    border-right: 1px solid #26324a !important;
}

html.dark .fi-sidebar-nav {
    background-color: transparent-color: transparent !important;
}

html.dark .fi-sidebar .fi-sidebar-group-label,
html.dark .fi-sidebar .fi-sidebar-group-button,
html.dark .fi-sidebar .fi-sidebar-group-collapse-button {
    color: #93c5fd !important;
}

html.dark .fi-sidebar .fi-sidebar-item-label,
html.dark .fi-sidebar .fi-sidebar-item-icon {
    color: #f8fafc !important;
}

html.dark .fi-sidebar .fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
html.dark .fi-sidebar .fi-sidebar-item-active > .fi-sidebar-item-button,
html.dark .fi-sidebar .fi-sidebar-item-button[aria-current="page"] {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    box-shadow: inset 4px 0 0 #d6a84b !important;
}

html.dark .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html.dark .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
html.dark .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label,
html.dark .fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon,
html.dark .fi-sidebar .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label,
html.dark .fi-sidebar .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon {
    color: #ffffff !important;
}

html.dark .fi-sidebar ::-webkit-scrollbar-thumb {
    background-color: #475569 !important;
}