body.with_sidebar{
    margin-left: 80px;
}

/* --- SIDEBAR PANEL --- */
#sidebar {
    width: 300px;
    height: 100%;
    background: #514d4d;
    color: white;
    position: fixed;
    top: 0;
    left: -290px; /* stay slightly offscreen so toggle area is free */
    padding: 20px;
    transition: left 0.3s ease-in-out;
    z-index: 9999;
    pointer-events: none; /* prevent sidebar from blocking clicks when closed */
    overflow: hidden;
}

#sidebarToggle {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #FF0B55;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10000;
    font-size: 24px;  
    padding: 15px; 
}

#toggleSidebar {
    display: none;
}

/* Sidebar slides in when toggled */
#toggleSidebar:checked ~ #sidebar {
    left: 0;
    opacity: 1;
    pointer-events: auto; /* enable clicking inside sidebar */
}

#toggleSidebar:checked + #sidebarToggle {
    transform: translateY(-50%) rotate(180deg);
}

/* "Show Library" */
.bigButton {
    display: block;
    padding: 12px;
    text-align: center;
    background: #363636;
    color: white;
    margin-top: 20px;
    margin-bottom: 30px;
    border-radius: 5px;
    text-decoration: none;
}

.bigButton:hover {
    background: #000000;
}

/* Button "Show Library" is only visible when sidebar is open */
#toggleSidebar:not(:checked) ~ #sidebar .bigButton {
    display: none;
}

/* "Show Playlist" */
.create {
    padding: 12px;
    background: #363636;
    color: white;
    border-radius: 5px;
    text-decoration: none;
}

.create:hover {
    background: #000000;
}

/* Button " + Playlist " is only visible when sidebar is open */
#toggleSidebar:not(:checked) ~ #sidebar .create {
    display: none;
}