/* SIDEBAR COMPONENT - ULTRA THIN WITH PERFECT ANIMATION */
/* Fixed version that works consistently on tablet and desktop */

/* Force Mantine AppShell to not interfere */
[data-mantine-component="AppShellNavbar"] {
    display: none !important;
}

/* Base sidebar container - ULTRA THIN */
.sidebar-container {
    position: fixed !important;
    left: 0 !important;
    top: 60px !important;
    height: calc(100vh - 60px) !important;
    background-color: var(--mantine-color-white) !important;
    color: var(--mantine-color-gray-8) !important;
    z-index: 1001 !important;
    overflow: hidden !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1) !important;
    border-right: 1px solid var(--mantine-color-gray-3) !important;
    border-top: none !important;
    pointer-events: auto !important;
    
    /* SLOWER PREMIUM ANIMATIONS */
    transition: 
        box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
        width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    
    /* DEFAULT COLLAPSED STATE - ULTRA THIN */
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
}

.sidebar-container:hover {
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15) !important;
    
    /* EXPANDED STATE ON HOVER */
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
}

/* Sidebar content container */
.sidebar-container .sidebar-content {
    padding: 8px 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Navigation links base styles */
.sidebar-container .compact-nav-link {
    display: flex !important;
    align-items: center !important;
    margin: 1px 2px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: var(--mantine-color-gray-8) !important;
    min-height: 40px !important;
    position: relative !important;
    overflow: hidden !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: calc(100% - 4px) !important;
    
    /* FASTER TRANSITIONS - Items stay in place */
    transition: 
        background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    
    /* COLLAPSED STATE - CENTERED */
    padding: 10px 14px !important; /* (48-20)/2 = 14px for perfect centering */
    justify-content: center !important;
}

.sidebar-container:hover .compact-nav-link {
    /* EXPANDED STATE - LEFT ALIGNED */
    padding: 10px 16px !important;
    justify-content: flex-start !important;
}

/* Navigation link hover states */
.sidebar-container .compact-nav-link:hover {
    background-color: var(--mantine-color-gray-1) !important;
    color: var(--mantine-color-gray-8) !important;
    text-decoration: none !important;
    transform: translateX(1px) !important; /* Subtle slide effect when collapsed */
}

.sidebar-container:hover .compact-nav-link:hover {
    transform: translateX(0px) !important; /* Reset transform when sidebar expanded */
    background-color: var(--mantine-color-gray-1) !important;
    color: var(--mantine-color-gray-8) !important;
    text-decoration: none !important;
}

.sidebar-container .compact-nav-link.active {
    background-color: var(--mantine-color-blue-0) !important;
    color: var(--mantine-color-blue-6) !important;
    font-weight: 600 !important;
}

.sidebar-container .compact-nav-link.active:hover {
    background-color: var(--mantine-color-blue-0) !important;
    color: var(--mantine-color-blue-6) !important;
}

/* Icons - PERFECTLY CENTERED WHEN COLLAPSED */
.sidebar-container .compact-nav-link .nav-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    margin-right: 0 !important; /* No margin when collapsed */
    
    /* FASTER ICON TRANSITIONS - Icons stay in place */
    transition: margin-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.sidebar-container:hover .compact-nav-link .nav-icon {
    margin-right: 12px !important; /* Add margin when expanded */
}

/* Text labels - SMOOTH FADE ANIMATION */
.sidebar-container .compact-nav-link .nav-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    color: inherit !important;
    margin-left: 0 !important;
    
    /* COLLAPSED STATE - COMPLETELY HIDDEN */
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    position: absolute !important;
    left: -9999px !important; /* Move far off-screen */
    
    /* FASTER TEXT TRANSITIONS - Clean appear/disappear */
    transition: 
        opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
        visibility 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
        width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.sidebar-container:hover .compact-nav-link .nav-label {
    /* EXPANDED STATE - VISIBLE AND POSITIONED RIGHT */
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    max-width: none !important;
    position: relative !important;
    left: 0 !important;
    margin-left: 8px !important; /* Move text a bit to the right */
    
    /* SMOOTH ENTRANCE */
    transition: 
        opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, 
        visibility 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, 
        width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Section headers */
.sidebar-container .nav-section-divider {
    padding: 8px !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
}

.sidebar-container .section-title {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--mantine-color-gray-6) !important;
    letter-spacing: 0.5px !important;
    
    /* COLLAPSED STATE - HIDDEN */
    opacity: 0 !important;
    transform: translateY(-5px) !important; /* Start slightly above */
    
    /* FASTER ENTRANCE ANIMATION */
    transition: 
        opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.sidebar-container:hover .section-title {
    /* EXPANDED STATE - VISIBLE */
    opacity: 1 !important;
    transform: translateY(0px) !important; /* Slide down into place */
    
    /* FASTER ENTRANCE FOR RESPONSIVENESS */
    transition: 
        opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s,
        transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s !important;
}

/* Active state colors */
.sidebar-container .compact-nav-link.active .nav-icon,
.sidebar-container .compact-nav-link.active .nav-label {
    color: var(--mantine-color-blue-6) !important;
}

/* Remove tooltips */
.sidebar-container .compact-nav-link::after {
    display: none !important;
}

/* SUB-NAVIGATION (Page Details) - Hidden when collapsed */
.sidebar-container .drill-down-container {
    /* COLLAPSED STATE - COMPLETELY HIDDEN */
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
    
    /* FASTER TRANSITIONS */
    transition: 
        opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        visibility 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        max-height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.sidebar-container:hover .drill-down-container {
    /* EXPANDED STATE - VISIBLE */
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    
    /* DELAYED ENTRANCE */
    transition: 
        opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s,
        visibility 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s,
        height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        max-height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Page Details header styling */
.sidebar-container .drill-down-header {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--mantine-color-gray-6) !important;
    letter-spacing: 0.5px !important;
}

/* MOBILE STYLES - Hide sidebar completely (phones and small tablets) */
@media (max-width: 900px) {
    .sidebar-container {
        transform: translateX(-100%) !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }
}

/* TABLET & DESKTOP STYLES - Sidebar with animation */
/* LARGE TABLET SPECIFIC: 901px-1200px */
@media screen and (min-width: 901px) and (max-width: 1200px) {
    /* Force sidebar properties on tablet */
    .sidebar-container {
        display: block !important;
        position: fixed !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        
        /* FASTER TABLET ANIMATIONS - Items stay in place */
        transition: 
            width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
    
    .sidebar-container:hover {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        
        /* ENHANCED SHADOW ON HOVER */
        box-shadow: 6px 0 20px rgba(0, 0, 0, 0.2) !important;
        
        transition: 
            width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
}

/* DESKTOP SPECIFIC: 1201px+ */
@media screen and (min-width: 1201px) {
    /* Force sidebar properties on desktop */
    .sidebar-container {
        display: block !important;
        position: fixed !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        
        /* FASTER DESKTOP ANIMATIONS - Items stay in place */
        transition: 
            width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
    
    .sidebar-container:hover {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        
        /* ENHANCED SHADOW ON HOVER */
        box-shadow: 6px 0 20px rgba(0, 0, 0, 0.2) !important;
        
        transition: 
            width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
}