/* Layout Background & Contrast */
:root {
    --sidebar-bg-light: #f9fafb; /* gray-50 */
    --sidebar-bg-dark: #0f172a; /* slate-900 */
    --content-bg-light: #ffffff; /* white */
    --content-bg-dark: #1e293b; /* slate-800 */
}

/* Light Mode */
[data-theme*='light'] #sidebar {
    background-color: var(--sidebar-bg-light);
}

[data-theme*='light'] .main-wrapper {
    background-color: var(--content-bg-light);
}

/* Dark Mode */
[data-theme*='dark'] #sidebar {
    background-color: var(--sidebar-bg-dark);
}

[data-theme*='dark'] .main-wrapper {
    background-color: var(--content-bg-dark);
}

/* Fallback for systems without explicit theme */
@media (prefers-color-scheme: light) {
    #sidebar {
        background-color: var(--sidebar-bg-light);
    }
    .main-wrapper {
        background-color: var(--content-bg-light);
    }
}

@media (prefers-color-scheme: dark) {
    #sidebar {
        background-color: var(--sidebar-bg-dark);
    }
    .main-wrapper {
        background-color: var(--content-bg-dark);
    }
}

/* Custom Scrollbar Utilities */

/* 1. Fully Hidden (for mobile horizontal lists) */
.scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

/* 2. Smart Scrollbar (Hidden on Mobile, Thin on Desktop) */
.scrollbar-smart {
    /* Mobile Default: Hidden */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-smart::-webkit-scrollbar {
    display: none;
}

/* Desktop styles for Smart Scrollbar */
@media (min-width: 768px) {
    .scrollbar-smart {
        -ms-overflow-style: auto;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent; /* Firefox thumb/track */
    }

    .dark .scrollbar-smart {
        scrollbar-color: #475569 transparent;
    }

    .scrollbar-smart::-webkit-scrollbar {
        display: block;
        width: 6px;
        height: 6px;
    }

    .scrollbar-smart::-webkit-scrollbar-track {
        background: transparent;
    }

    .scrollbar-smart::-webkit-scrollbar-thumb {
        background-color: #cbd5e1; /* Slate-300 */
        border-radius: 20px;
    }

    .scrollbar-smart::-webkit-scrollbar-thumb:hover {
        background-color: #94a3b8; /* Slate-400 */
    }

    /* Dark mode scrollbar */
    .dark .scrollbar-smart::-webkit-scrollbar-thumb {
        background-color: #475569; /* Slate-600 */
    }

    .dark .scrollbar-smart::-webkit-scrollbar-thumb:hover {
        background-color: #64748b; /* Slate-500 */
    }
}