/* SIDEBAR CONTAINER (Unchanged) */
.sidebar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--background-gradient);
    box-shadow: var(--box-shadow-border);
    border-radius: var(--border-radius-1);
    height: 4rem;
    width: 100%;
}

/* FLEX NAVIGATION LAYOUT */
.sidebar ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    padding: 0;
    flex-wrap: nowrap;
}

/* ICON LINK */
.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-decoration: none;
    color: var(--font-primary-clr);
    padding: 10px;
    transition: 0.4s;
}

/* ICON CONTAINER */
.nav-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-background);
    border-radius: var(--border-radius-full);
    transition: background 0.4s ease-in-out;
}

/* ICON IMAGE */
.nav-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    transition: filter 0.4s ease-in-out;
    filter: var(--icon-clr-1);
}

@media (width < 400px) {
    .nav-icon img {
        width: 20px;
        height: 20px;
    }
}

/* MOBILE HOVER EFFECT - SLIDES UP */
.nav-text {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    /* Starts slightly lower */
    background: var(--font-highlight-1);
    color: var(--font-tertiary-clr);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-7);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.nav-link:hover .nav-text {
    opacity: 1;
    transform: translateX(-50%) translateY(0px);
    /* Smoothly slides up */
}

/* HOVER EFFECT */
.nav-link:hover .nav-icon {
    background: var(--font-highlight-1);
    /* Changes icon background */
}

.nav-link:hover .nav-icon img {
    filter: brightness(0) invert(1);
    /* Makes the icon white when hovering */
}

@media (max-width: 450px) {
    .sidebar ul {
        width: auto;
        gap: 1rem;
    }
}

@media (max-width: 400px) {
    .sidebar ul {
        width: auto;
        gap: .5rem;
    }

    .nav-icon {
        height: 32.5px;
        width: 32.5px;
    }
}

/* DESKTOP VIEW - VERTICAL NAVIGATION */
@media (min-width: 1000px) {
    .sidebar {
        width: 80px;
        height: fit-content;
        display: flex;
        border-radius: var(--border-radius-2);
        padding: 10px 0;
        transform: translateY(-125px);
        z-index: 10;
    }

    .sidebar ul {
        flex-direction: column;
        gap: 0rem;
        align-items: center;
    }

    .nav-link {
        padding: 15px 0;
        position: relative;
    }

    /* HOVER EFFECT - TEXT MOVES SMOOTHLY TO THE RIGHT */
    .nav-link:hover .nav-text {
        opacity: 1;
        left: calc(100% + 15px);
        /* Moves text further right on hover */
        top: 50%;
        /* Ensures it stays centered */
    }

    .nav-text {
        top: 50%;
        left: calc(100%);
        transform: translateY(-50%) translateX(-25px);
        /* Starts inside the icon */
        opacity: 0;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .nav-link:hover .nav-text {
        opacity: 1;
        transform: translateY(-50%) translateX(5px);
        /* Slides out smoothly */
    }
}


/* STYLES FOR SCROLLING */
/* Make Active State Match Hover */
.nav-link.active {
    /* Same as hover */
    opacity: 1;
}

/* Apply the same icon effect when active */
.nav-link.active .nav-icon {
    background: var(--font-highlight-1);
}

.nav-link.active .nav-icon img {
    filter: brightness(0) invert(1);
    /* Make icon white */
}