/* Add these styles to your existing dark mode CSS (inside @media (prefers-color-scheme: dark)) */

/* Mobile sidebar overlay */
@media (prefers-color-scheme: dark) {
    .aiz-top-menu-sidebar .overlay.dark {
        background-color: rgba(0, 0, 0, 0.7) !important;
    }
    
    .collapse-sidebar {
        background-color: var(--bg-card) !important;
        color: var(--text-primary) !important;
    }
    
    /* Navigation user info */
    .nav-user-info {
        background-color: var(--bg-card) !important;
    }
    
    .nav-user-info h4,
    .nav-user-info .text-reset {
        color: var(--text-primary) !important;
    }
    
    .nav-user-info .hov-text-primary:hover {
        color: var(--primary) !important;
    }
    
    /* Separator line */
    .collapse-sidebar hr {
        border-color: var(--border-color) !important;
    }
    
    /* Search input in mobile menu */
    .collapse-sidebar .search-input-box .form-control {
        background-color: var(--bg-input) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    
    .collapse-sidebar .search-input-box svg path {
        fill: var(--text-muted) !important;
    }
    
    /* Nav tabs in mobile menu */
    .collapse-sidebar .nav-tabs {
        border-color: var(--border-color) !important;
    }
    
    .collapse-sidebar .nav-tabs .nav-link {
        color: var(--text-secondary) !important;
        border-color: var(--border-color) !important;
    }
    
    .collapse-sidebar .nav-tabs .nav-link.active {
        background-color: var(--bg-card) !important;
        border-color: var(--border-color) var(--border-color) var(--bg-card) !important;
        color: var(--primary) !important;
    }
    
    /* Menu items in mobile sidebar */
    .collapse-sidebar .header_menu_links {
        color: var(--text-primary) !important;
        border-bottom: 1px solid var(--border-light) !important;
    }
    
    .collapse-sidebar .header_menu_links:hover,
    .collapse-sidebar .header_menu_links.active {
        color: var(--primary) !important;
        background-color: var(--light) !important;
    }
    
    /* Category items in mobile menu */
    .collapse-sidebar .category-item {
        border-color: var(--border-color) !important;
    }
    
    .collapse-sidebar .category-name {
        color: var(--text-primary) !important;
    }
    
    .collapse-sidebar .category-name:hover {
        color: var(--primary) !important;
    }
    
    /* Toggle button in category */
    .collapse-sidebar .toggle-subcategory {
        color: var(--text-primary) !important;
    }
    
    .collapse-sidebar .toggle-subcategory:hover {
        color: var(--primary) !important;
    }
    
    /* Subcategory list */
    .collapse-sidebar .subcategory-list {
        background-color: var(--bg-sidebar) !important;
        border-left: 1px solid var(--border-color) !important;
    }
    
    .collapse-sidebar .subcategory-list li a {
        color: var(--text-secondary) !important;
        border-color: var(--border-light) !important;
    }
    
    .collapse-sidebar .subcategory-list li a:hover {
        color: var(--primary) !important;
        background-color: var(--light) !important;
    }
    
    /* Close button in mobile menu */
    .collapse-sidebar .btn.btn-sm.p-4.hide-top-menu-bar {
        background-color: var(--bg-card) !important;
    }
    
    .collapse-sidebar .btn.btn-sm.p-4.hide-top-menu-bar .las.la-times {
        color: var(--primary) !important;
    }
    
    /* Text colors override for specific classes */
    .collapse-sidebar .text-dark,
    .collapse-sidebar h4.text-dark {
        color: var(--text-primary) !important;
    }
    
    .collapse-sidebar .text-primary {
        color: var(--primary) !important;
    }
    
    .collapse-sidebar .border-soft-light {
        border-color: var(--border-light) !important;
    }
    
    /* Modal inside sidebar */
    .aiz-top-menu-sidebar .modal-content {
        background-color: var(--bg-card) !important;
        color: var(--text-primary) !important;
    }
    
    /* User avatar border */
    .nav-user-img.border {
        border-color: var(--border-color) !important;
    }
    
    /* SVG icon in guest state */
    .collapse-sidebar .nav-user-info svg path {
        fill: var(--text-secondary) !important;
    }
    
    /* Tab content area */
    .collapse-sidebar .tab-content {
        background-color: var(--bg-card) !important;
    }
    
    /* Active link indicator */
    .collapse-sidebar .header_menu_links.active::before {
        background-color: var(--primary) !important;
    }
    
    /* Nested category items */
    .collapse-sidebar .category-tree li {
        border-color: var(--border-light) !important;
    }
    
    .collapse-sidebar .category-tree li a {
        color: var(--text-secondary) !important;
    }
    
    .collapse-sidebar .category-tree li a:hover {
        color: var(--primary) !important;
        background-color: var(--light) !important;
    }
    
    /* Button styles in mobile menu */
    .collapse-sidebar .btn {
        background-color: var(--bg-input) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    
    .collapse-sidebar .btn:hover {
        background-color: var(--light) !important;
    }
    
    /* Input placeholder color */
    .collapse-sidebar input::placeholder {
        color: var(--text-muted) !important;
    }
    
    /* Scrollbar for mobile menu */
    .collapse-sidebar.c-scrollbar-light::-webkit-scrollbar {
        width: 6px;
    }
    
    .collapse-sidebar.c-scrollbar-light::-webkit-scrollbar-track {
        background: var(--bg-sidebar);
    }
    
    .collapse-sidebar.c-scrollbar-light::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 3px;
    }
    
    .collapse-sidebar.c-scrollbar-light::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
    }
    
    /* Specific overrides for text-dark classes in mobile menu */
    .collapse-sidebar [class*="text-dark"],
    .collapse-sidebar .fs-13.text-dark,
    .collapse-sidebar .h5.text-dark,
    .collapse-sidebar .header_menu_links.text-dark {
        color: var(--text-primary) !important;
    }
    
    /* Hover effects */
    .collapse-sidebar .hov-text-primary:hover {
        color: var(--primary) !important;
    }
    
    .collapse-sidebar .hov-opacity-100:hover {
        opacity: 1 !important;
    }
    
    /* Active states */
    .collapse-sidebar .active {
        color: var(--primary) !important;
    }
    
    /* Border overrides */
    .collapse-sidebar .border-right {
        border-right-color: var(--border-light) !important;
    }
    
    .collapse-sidebar .border-bottom {
        border-bottom-color: var(--border-color) !important;
    }
    
    /* Modal backdrop */
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.7) !important;
    }
}

/* Additional specific fixes for mobile menu */
@media (prefers-color-scheme: dark) and (max-width: 991px) {
    .aiz-top-menu-sidebar {
        background-color: rgba(0, 0, 0, 0.5) !important;
    }
    
    .collapse-sidebar {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Ensure all text is visible */
    .collapse-sidebar * {
        color: var(--text-primary) !important;
    }
    
    /* Override any inline styles */
    .collapse-sidebar .nav-user-info a[style*="color"] {
        color: var(--text-primary) !important;
    }
    
    /* Category tree specific */
    .category-tree .subcategory-list {
        background-color: var(--bg-sidebar) !important;
    }
    
    .category-tree li {
        border-left-color: var(--border-color) !important;
    }
}

/* Add to your dark mode CSS */
@media (prefers-color-scheme: dark) {
    .c-scrollbar-light {
        scrollbar-color: var(--border-color) var(--bg-sidebar) !important;
    }
    
    .c-scrollbar-light::-webkit-scrollbar-track {
        background: var(--bg-sidebar) !important;
    }
    
    .c-scrollbar-light::-webkit-scrollbar-thumb {
        background: var(--border-color) !important;
    }
    
    .c-scrollbar-light::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted) !important;
    }
}

@media (prefers-color-scheme: dark) {
    /* Utility classes for opacity */
    .opacity-60 {
        opacity: 0.8 !important; /* Slightly increase opacity for better visibility in dark mode */
    }
    
    /* SVG icon colors */
    svg path[fill="#91919b"],
    svg path[fill="#b5b5bf"] {
        fill: var(--text-secondary) !important;
    }
    
    /* Border utilities */
    .border-width-2 {
        border-width: 2px !important;
    }
    
    /* Animation fixes */
    .hov-animate-outline:focus {
        outline-color: var(--primary) !important;
    }
    
    /* Ensure all anchor tags are properly colored */
    a:not(.btn):not(.badge) {
        color: var(--text-primary) !important;
    }
    
    a:not(.btn):not(.badge):hover {
        color: var(--primary) !important;
    }
    
    /* Specific for menu links */
    .header_menu_links {
        transition: all 0.3s ease !important;
    }
}