/*=============================================
  Workspace CSS - Stable & Final Solution
  Explicitly Structured & Labeled
==============================================*/

/* --- Global Layout --- */
.workspace-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Sidebar & Detail Pane --- */
.workspace-sidebar,
.workspace-detail-pane {
    position: fixed;
    top: 56px;
    bottom: 60px;
    width: 250px;
    overflow-y: auto;
    z-index: 9999;
    background-color: #121212 !important;
    padding: 10px;
    color: #ffffff !important;
}

.workspace-sidebar {
    left: 0;
}

.workspace-detail-pane {
    right: 0;
}

/* --- Main Content Area --- */
.workspace-main {
    margin-top: 0 !important;
    margin-bottom: 70px !important;
    margin-left: 250px !important;
    margin-right: 250px !important;
}

/* --- Sidebar Menu Items --- */
.workspace-sidebar .sidebar-menu {
    padding: 0;
    margin: 0;
}

.workspace-sidebar .sidebar-menu .nav-item {
    margin-bottom: 10px;
}

.workspace-sidebar .sidebar-menu .nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
    background-color: #181818 !important; /* Explicitly darker buttons matching Spotify exactly */
    color: #ffffff !important;
    border-radius: 10px !important;
    transition: background-color 0.3s ease !important;
}

.workspace-sidebar .sidebar-menu .nav-link:hover {
    background-color: #282828 !important; /* Explicitly matching Spotify hover effect exactly */
}

.workspace-sidebar .sidebar-icon {
    font-size: 1.4rem !important;
}

.workspace-sidebar .sidebar-text {
    font-size: 1rem !important;
    margin-left: 10px !important;
}

/* --- Detail Pane Menu Items --- */
.workspace-detail-pane .detail-pane-menu .detail-pane-text {
    color: #ffffff !important;
}




/* --- Responsive Adjustments --- */

/* Tablet: Icons only */

@media (max-width: 991px) 
{
    .workspace-sidebar {
        width: 70px !important;
        padding: 10px 0 !important; /* Explicitly remove horizontal padding */
    }

    .workspace-sidebar .sidebar-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Explicitly center menu items */
        padding: 0 !important;
        margin: 0 !important;
    }

    .workspace-sidebar .sidebar-text {
        display: none !important; /* Hide labels explicitly */
    }

    .workspace-sidebar .nav-link {
        width: 100%; /* Ensure nav-links take full sidebar width */
        justify-content: center !important; /* Explicitly center icons horizontally */
        padding: 10px 0 !important; /* Remove unnecessary horizontal padding explicitly */
    }

    .workspace-sidebar .sidebar-icon {
        font-size: 1.6rem !important;
        margin: 0 !important; /* Explicitly remove margins to center perfectly */
        }

    .workspace-detail-pane {
        display: none !important;
    }

    .workspace-main {
        margin-left: 70px !important;
        margin-right: 0 !important;
    }
}


/* Mobile: Sidebar at top horizontally (final explicit simplified correction) */
/* Corrected explicit solution */
@media (max-width: 767px) {
    .workspace-main {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Explicitly remove top padding from sidebar-menu (p-3 is causing gap) */
    .workspace-sidebar .sidebar-menu {
        padding-top: 0 !important; /* explicitly remove top padding (1rem from p-3) */
        padding-bottom: 0 !important; /* optionally remove bottom padding for consistency */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Additional explicit resets for clean layout */
    .workspace-sidebar,
    .workspace-sidebar .container-fluid,
    .workspace-sidebar .navbar-collapse,
    .workspace-sidebar .navbar-nav {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .workspace-sidebar {
        position: sticky !important;
        top: 40px !important; /* directly below header */
        z-index: 9998 !important;
        background-color: #121212 !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-bottom: 40px !important;
    }

    .workspace-sidebar .sidebar-menu {
        flex-direction: row !important;
        justify-content: space-around !important;
        width: 100% !important;
        display: flex !important;
    }

    .workspace-sidebar .sidebar-menu .nav-link {
        padding: 5px 3px !important;
        font-size: 0.8rem !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .workspace-sidebar .sidebar-icon {
        font-size: 1.2rem !important;
        margin-bottom: 2px !important;
    }

    .workspace-sidebar .sidebar-text {
        font-size: 1.0rem !important;
        display: inline !important;
    }

    .workspace-detail-pane {
        display: none !important;
    }

    .workspace-main {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .banner-image-container {
        margin: 0 !important;
    }

    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Explicitly remove unwanted horizontal padding from container-fluid */
.workspace-main .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}