:root {
    --page-bg: #f5f5f5;
    --card-bg: #F5F5F5;
    --text-primary: #1C1C1C;
    --text-secondary: #808080;
    --highlight: #FF2D55;
    --border-color: #EAEAEA;
    --gray-light: #F3F3F3;
    --primary-purple: #8B5CF6;
    --font-main: "Plus Jakarta Sans", sans-serif;
    --sidebar-width: 250px;
    --navbar-height: 70px;
    --nav-item-active:#EEDE0E;
}


    


.sidebar {
    display: none;
}

@media (min-width: 768px) {
    .header {
        display: none;
    }
    
    .sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        width: var(--sidebar-width);
        height: 100vh;
        background: #ffffff;
        color: var(--text-primary);
        z-index: 1000;
        overflow-y: auto;
        border-right: 1px solid var(--border-color);
    }

    .sidebar-header {
        padding: 1.5rem 2rem;
    }

    .sidebar-logo {
        height: 36px;
        width: auto;
    }
        .sidebar .nav-item {
        flex-direction: row;     
        align-items: center;
        gap: 12px;
        opacity: 1;
        margin-bottom: 12px;
    }
    .sidebar-nav {
        flex: 1;
        padding: 1.5rem 0;
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0.875rem 2rem;
        color: #808080;
        text-decoration: none;
        font-size: 18px;
        font-weight: 600;
        transition: all 0.2s ease;
        background: transparent;
        margin-bottom: 8px;
    }

    .nav-icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
    }

    .nav-icon {
        width: 20px;
        height: 20px;
        filter: brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(88%);
        transition: filter 0.2s ease;
    }

    /* Active state */
    .nav-item.active {
        background-color:  var(--nav-item-active);
        color: #000000;
    }

    .nav-item.active .nav-icon {
        filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
    }

}