:root {
    --primary-color: #4f46e5;
}

/* Dark Mode Transitions */
body,
.bg-white,
.bg-slate-50,
.text-slate-900 {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Overrides */
html.dark body {
    background-color: #0f172a;
    /* slate-900 */
    color: #f8fafc;
    /* slate-50 */
}

html.dark .bg-white {
    background-color: #1e293b;
    /* slate-800 */
    color: #f8fafc;
    /* slate-50 */
    border-color: #334155;
    /* slate-700 */
}

html.dark .bg-slate-50 {
    background-color: #0f172a;
    /* slate-900 */
}

html.dark .text-slate-900 {
    color: #f1f5f9;
    /* slate-100 */
}

html.dark .text-slate-500 {
    color: #94a3b8;
    /* slate-400 */
}

html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-gray-200 {
    border-color: #334155;
    /* slate-700 */
}

html.dark .bg-slate-100 {
    background-color: #1e293b;
    /* slate-800 */
}

/* Glassmorphism adjustments for dark mode */
html.dark .backdrop-blur-sm {
    background-color: rgba(30, 41, 59, 0.7);
}

/* Sidebar Dark Mode */
html.dark aside {
    background-color: #1e293b;
    border-color: #334155;
}

html.dark aside .text-slate-900 {
    color: white;
}

html.dark aside .hover\:bg-slate-50:hover {
    background-color: #334155;
}

html.dark aside .hover\:text-slate-900:hover {
    color: white;
}

/* Mobile Responsive Sidebar */
@media (max-width: 768px) {
    aside {
        position: fixed !important;
        left: -100% !important;
        top: 0;
        bottom: 0;
        z-index: 100;
        width: 250px !important;
        transition: left 0.3s ease !important;
        box-shadow: 10px 0 15px -3px rgba(0, 0, 0, 0.1);
        background-color: white !important;
    }

    html.dark aside {
        background-color: #1e293b !important;
    }

    aside.mobile-open {
        left: 0 !important;
    }

    aside .hidden.lg\:block,
    aside span.hidden.lg\:block {
        display: block !important;
    }

    aside nav span {
        display: inline !important;
    }

    .hamburger-btn {
        display: flex !important;
    }

    header {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
    }

    .sidebar-overlay.active {
        display: block;
    }
}

/* Desktop Collapsed Sidebar */
@media (min-width: 769px) {
    aside.desktop-collapsed {
        width: 80px !important;
    }

    aside.desktop-collapsed .hidden.lg\:block,
    aside.desktop-collapsed span.hidden.lg\:block,
    aside.desktop-collapsed nav span {
        display: none !important;
    }

    aside.desktop-collapsed .px-6.mb-8,
    aside.desktop-collapsed .px-6.mb-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center !important;
    }
}

.hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    cursor: pointer;
}