@media (min-width: 1200px) {
	    /* 1. Define the widths */
:root {
    --side-expanded: 280px; /* Adjust to match your current width */
    --side-collapsed: 70px;
    --anim-speed: 0.3s;
}

/* 2. Transition settings for Sidebar and Player */
.sidebar, .player {
    transition: width var(--anim-speed) ease !important;
    overflow: hidden !important;
}

/* 3. The Collapse Logic */
.sidebar--collapsed {
    width: var(--side-collapsed) !important;
}

/* Shrink the player when the sidebar next to it is collapsed */
.sidebar--collapsed + .player,
.sidebar--collapsed ~ .player {
    width: var(--side-collapsed) !important;
}

/* 4. Hide only the text and player details (Logo is removed from this list) */
.sidebar--collapsed span, 
.sidebar--collapsed ~ .player .player__content,
.sidebar--collapsed ~ .player .player__cover {
    display: none !important;
}

/* 5. Keep the Logo size locked and center the icons */
.sidebar--collapsed .sidebar__logo {
    display: block !important; /* Ensures it stays visible */
    padding: 20px 25px 20px 25px;
}

.sidebar--collapsed .sidebar__nav-link {
    display: flex;
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0px;
}

.sidebar--collapsed .sidebar__nav-link svg {
    margin-right: 0 !important;
}

/* The Collapse Override */
/* When the sidebar has the collapsed class, we target the sibling .main */
@media (min-width: 1200px) {
    .sidebar--collapsed ~ .main {
        padding: 0 0 60px 70px !important;
    }
}


/* When Body has the class, shift everything */
.sidebar-is-collapsed .sidebar {
    width: var(--side-collapsed) !important;
}

/* Player Sync */
.sidebar-is-collapsed .player {
    width: var(--side-collapsed) !important;
    padding: 0;
}

/* Main Content Sync */
@media (min-width: 1200px) {
    .sidebar-is-collapsed .main {
        padding-left: 70px !important;
    }
}

/* 1. Add the transition to the main area */
.main {
    transition: all var(--anim-speed) ease !important;
}

/* 2. Ensure the media query shift is smooth */
@media (min-width: 1200px) {
    /* Normal state (expanded) */
    .main {
        padding-left: var(--side-expanded) !important;
    }

    /* Collapsed state (hovering away) */
    .sidebar-is-collapsed .main {
        padding-left: var(--side-collapsed) !important;
    }
}


/* 1. Prevent the player from creating a page-level horizontal scroll */
.player {
    overflow: hidden !important;
    max-width: var(--side-expanded); /* Keep it contained */
}

/* 2. Ensure internal content doesn't 'push' the width during transition */
.player__content, 
.player__track,
.player__artist {
    white-space: nowrap !important; /* Force text onto one line */
    overflow: hidden !important;
    text-overflow: ellipsis; /* Adds '...' if text is too long */
}

/* 3. Global fix: Kill any potential horizontal spill on the body */
body {
    overflow-x: hidden !important;
    width: 100%;
}



/* Ensure the transition exists so it slides smoothly */
.header, .header__content {
    transition: all var(--anim-speed) ease !important;
}

@media (min-width: 1200px) {
    /* When Body has the class, force the header to the left */
    .sidebar-is-collapsed .header {
        left: 70px !important; /* Shifts the whole bar left */
        padding-left: 0 !important; /* Clears original gap */
        width: calc(100% - 70px) !important; /* Fills the rest of the screen */
    }

    /* If the inner content has a fixed margin/padding, kill it here */
    .sidebar-is-collapsed .header__content {
        padding-left: 15px !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
}

.sidebar {
    /* 1. Prevent scrollbars from ever appearing */
    overflow: hidden !important; 
    
    /* 2. Ensure text doesn't wrap and push height down during transition */
    white-space: nowrap !important;
}

/* Also apply it to the nav container inside if it has its own height */
.sidebar__nav {
    overflow: hidden !important;
}

/* Ensure icons stay locked and don't cause a horizontal shift */
.sidebar__nav-link svg {
    flex-shrink: 0 !important;
}
}