/* XLinic Enhanced Double Sidebar Theme */

/* ================================================
   SIDEBAR RAIL (Left Icon Column)
   ================================================ */

.fi-sidebar-rail {
    position: relative;
}

/* Subtle gradient overlay for depth */
.fi-sidebar-rail::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
}

/* Rail navigation scrollbar */
.fi-sidebar-rail-nav::-webkit-scrollbar {
    width: 3px;
}

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

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

.fi-sidebar-rail-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Rail button hover glow effect */
.fi-sidebar-rail-btn {
    position: relative;
    overflow: visible;
}

.fi-sidebar-rail-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle at center, var(--c-primary-500) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 16px;
    z-index: -1;
}

.fi-sidebar-rail-btn:hover::before {
    opacity: 0.15;
}

/* ================================================
   SIDEBAR PANEL (Right Menu Column)
   ================================================ */

.fi-sidebar-panel {
    position: relative;
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
}

.dark .fi-sidebar-panel {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

/* Panel scrollbar */
.fi-sidebar-panel-nav::-webkit-scrollbar {
    width: 4px;
}

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

.fi-sidebar-panel-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.dark .fi-sidebar-panel-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.fi-sidebar-panel-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

.dark .fi-sidebar-panel-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ================================================
   QUICK ACCESS BUTTONS
   ================================================ */

.fi-quick-access-btn {
    position: relative;
    overflow: hidden;
}

.fi-quick-access-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.fi-quick-access-btn:hover::before {
    left: 100%;
}

/* Color-specific hover states */
.fi-quick-access-btn:hover.hover\:bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

.fi-quick-access-btn:hover.hover\:bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.fi-quick-access-btn:hover.hover\:bg-violet-50 {
    background-color: rgba(139, 92, 246, 0.1) !important;
}

.fi-quick-access-btn:hover.hover\:bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

/* ================================================
   MENU ITEMS
   ================================================ */

.fi-sidebar-item {
    position: relative;
}

/* Hover lift effect */
.fi-sidebar-item:hover {
    transform: translateX(2px);
}

/* Active item glow */
.fi-sidebar-item.bg-primary-50 {
    box-shadow: 0 0 0 1px rgba(var(--c-primary-500), 0.1),
                0 1px 3px rgba(var(--c-primary-500), 0.1);
}

/* Sub-items connecting line animation */
.fi-sidebar-subitem {
    position: relative;
}

.fi-sidebar-subitem::before {
    content: '';
    position: absolute;
    left: -11px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: currentColor;
    opacity: 0.2;
    transition: all 0.2s ease;
}

.fi-sidebar-subitem:hover::before {
    width: 10px;
    opacity: 0.4;
}

/* ================================================
   TRANSITIONS & ANIMATIONS
   ================================================ */

/* Smooth transitions for all interactive elements */
.fi-sidebar,
.fi-sidebar-rail,
.fi-sidebar-panel,
.fi-sidebar-item,
.fi-sidebar-subitem,
.fi-quick-access-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Alpine.js collapse transition */
[x-collapse] {
    transition-property: height, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 1024px) {
    .fi-sidebar-rail {
        width: 64px !important;
    }

    .fi-sidebar-panel {
        width: 280px !important;
    }

    .fi-sidebar-rail-btn span {
        font-size: 8px;
    }
}

/* ================================================
   BADGE STYLING
   ================================================ */

.fi-sidebar-item .rounded {
    animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* ================================================
   DARK MODE ENHANCEMENTS
   ================================================ */

.dark .fi-sidebar-rail {
    background: linear-gradient(180deg, #111827 0%, #030712 100%);
}

.dark .fi-sidebar-panel {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.05);
}

/* ================================================
   FOCUS STATES (Accessibility)
   ================================================ */

.fi-sidebar-rail-btn:focus-visible,
.fi-sidebar-item:focus-visible,
.fi-quick-access-btn:focus-visible {
    outline: 2px solid var(--c-primary-500);
    outline-offset: 2px;
}

/* ================================================
   ICON SIZING UTILITIES
   ================================================ */

.w-4\.5 {
    width: 1.125rem;
}

.h-4\.5 {
    height: 1.125rem;
}