/* Sidebar Enhancements - Professional Classic Styles */

/* Hide Scrollbar but Keep Scrolling Functionality - Sidebar Container */
#logo-sidebar::-webkit-scrollbar,
#logo-sidebar *::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
    display: none !important;
}

#logo-sidebar::-webkit-scrollbar-track,
#logo-sidebar *::-webkit-scrollbar-track {
    background: transparent !important;
    display: none !important;
}

#logo-sidebar::-webkit-scrollbar-thumb,
#logo-sidebar *::-webkit-scrollbar-thumb {
    background: transparent !important;
    display: none !important;
}

/* Firefox - Hide Scrollbar */
#logo-sidebar,
#logo-sidebar * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Ensure scrolling still works */
#logo-sidebar {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide scrollbar on inner scrollable div */
#logo-sidebar > div {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#logo-sidebar > div::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

/* Collapsible Group Styles - Professional Nested Hierarchy */
details.sidebar-category summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

details.sidebar-category summary::-webkit-details-marker {
    display: none;
}

details.sidebar-category summary::marker {
    display: none;
}

details.sidebar-category[open] summary {
    margin-bottom: 0.5rem;
}

/* Smooth rotation for chevron icon */
details.sidebar-category summary svg {
    transition: transform 200ms ease-in-out;
}

details.sidebar-category[open] summary svg {
    transform: rotate(180deg);
}

/* Category Headers - Distinguished Style */
details.sidebar-category summary {
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid transparent;
    font-weight: 600;
}

.dark details.sidebar-category summary {
    background: rgba(255, 255, 255, 0.04);
}

details.sidebar-category[open] summary {
    border-left-color: #d97706; /* vedic-gold */
    background: rgba(217, 119, 6, 0.08);
}

.dark details.sidebar-category[open] summary {
    background: rgba(217, 119, 6, 0.12);
}

details.sidebar-category summary:hover {
    background: rgba(0, 0, 0, 0.06);
    border-left-color: #d97706;
}

.dark details.sidebar-category summary:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Nested Menu Indentation with subtle border */
details.sidebar-category ul {
    border-left: 2px solid rgba(209, 213, 219, 0.3);
    margin-left: 0.5rem;
    padding-left: 0.75rem;
}

.dark details.sidebar-category ul {
    border-left-color: rgba(75, 85, 99, 0.4);
}

/* Lock Icon Styling */
.text-purple-400 {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Uniform Font Styles */
#logo-sidebar {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Sidebar Menu Items - Uniform Styling */
#logo-sidebar ul li a {
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Smooth Hover Effects */
#logo-sidebar ul li a:not(.active):hover {
    background-color: rgba(243, 244, 246, 0.8);
    transform: translateX(2px);
    padding-left: 0.75rem;
}

.dark #logo-sidebar ul li a:not(.active):hover {
    background-color: rgba(55, 65, 81, 0.6);
}

/* Active State Enhancement */
#logo-sidebar ul li a.active,
#logo-sidebar ul li a[class*="bg-vedic-gold"] {
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);
}

/* Icon Transitions */
#logo-sidebar svg {
    transition: transform 0.2s ease, color 0.2s ease;
}

#logo-sidebar ul li a:hover svg {
    transform: scale(1.1);
}

/* Hide All Badges */
#logo-sidebar .badge,
#logo-sidebar span[class*="inline-flex"][class*="items-center"][class*="justify-center"][class*="px-"],
#logo-sidebar .ml-auto {
    display: none !important;
}

/* Responsive Design - Mobile First */
@media (max-width: 640px) {
    #logo-sidebar {
        width: 16rem; /* 256px - fixed width */
        max-width: 85vw; /* Max 85% of viewport */
        top: 0;
    }
    
    /* Ensure sidebar is hidden by default on mobile */
    #logo-sidebar {
        transform: translateX(-100%);
    }
    
    /* When drawer is open */
    #logo-sidebar:not(.-translate-x-full),
    #logo-sidebar[aria-hidden="false"],
    body.drawer-open #logo-sidebar {
        transform: translateX(0) !important;
    }
    
    /* Ensure sidebar is visible when not hidden */
    #logo-sidebar.translate-x-0 {
        transform: translateX(0) !important;
    }
    
    /* Logo sizing for mobile */
    #logo-sidebar .logo-container {
        padding: 0.75rem;
    }
    
    #logo-sidebar .logo-container span {
        font-size: 1.125rem; /* 18px */
    }
    
    /* Ensure backdrop is visible when sidebar is open */
    #drawer-backdrop:not(.hidden),
    body.drawer-open #drawer-backdrop {
        display: block !important;
    }
    
    /* Prevent body scroll when sidebar is open on mobile */
    body.drawer-open {
        overflow: hidden;
    }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
    #logo-sidebar {
        width: 16rem; /* 256px */
    }
}

/* Desktop */
@media (min-width: 1025px) {
    #logo-sidebar {
        width: 16rem; /* 256px */
        top: 4rem; /* 64px - below header */
        height: calc(100vh - 4rem); /* Full height minus header */
    }
}

/* Large devices - Sidebar positioning */
@media (min-width: 640px) {
    /* Ensure sidebar starts below navbar */
    #logo-sidebar {
        top: 4rem; /* 64px - below navbar */
        height: calc(100vh - 4rem);
    }
}

/* Ensure sidebar doesn't overlap content on small screens */
@media (max-width: 640px) {
    main {
        margin-left: 0 !important;
    }
}

/* Touch-friendly spacing for mobile */
@media (max-width: 640px) {
    #logo-sidebar ul li a {
        padding: 0.75rem 1rem; /* Larger touch targets */
        min-height: 44px; /* iOS recommended touch target */
    }
    
    /* Ensure logo is visible on mobile */
    #logo-sidebar .logo-container {
        position: sticky;
        top: 0;
        background: inherit;
    }
}

/* Ensure sidebar content doesn't overflow */
#logo-sidebar {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    overscroll-behavior: contain; /* Prevent scroll chaining */
}

/* Icon and Text Spacing - Consistent */
#logo-sidebar ul li a svg + span {
    margin-left: 0.75rem; /* 12px - consistent spacing */
}

/* Ensure proper spacing for all menu items */
#logo-sidebar ul li a {
    gap: 0.75rem; /* Use gap for flexbox spacing */
}

/* Responsive logo sizing */
@media (max-width: 640px) {
    #logo-sidebar .logo-container span {
        font-size: 1rem; /* Smaller on mobile */
    }
}

@media (min-width: 641px) {
    #logo-sidebar .logo-container span {
        font-size: 1.25rem; /* Standard size */
    }
}

/* Section Headers */
#logo-sidebar .section-header {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(107, 114, 128);
}

.dark #logo-sidebar .section-header {
    color: rgb(156, 163, 175);
}

/* Current Chart Name - Special Emphasis */
#logo-sidebar .chart-name {
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: -0.02em;
}

/* Smooth Transitions for All Interactive Elements */
#logo-sidebar * {
    transition-property: color, background-color, border-color, transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Focus States for Accessibility */
#logo-sidebar ul li a:focus {
    outline: 2px solid rgba(217, 119, 6, 0.5);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* Spacing Consistency */
#logo-sidebar ul {
    gap: 0.125rem;
}

#logo-sidebar ul li {
    margin-bottom: 0.125rem;
}

/* Classic Professional Typography */
#logo-sidebar {
    --sidebar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --sidebar-font-size-base: 0.875rem;
    --sidebar-font-weight-normal: 500;
    --sidebar-font-weight-semibold: 600;
    --sidebar-font-weight-bold: 700;
    --sidebar-letter-spacing-tight: -0.01em;
    --sidebar-letter-spacing-normal: 0;
    --sidebar-letter-spacing-wide: 0.05em;
}