/* ==========================================================
   BUILD 11.9.2 — ENVIRONMENT SCALE & VISIBILITY FIX
   ========================================================== */

body {
    --environment-image: url("../assets/environments/midnight-static/dashboard.webp");
    --environment-position: center center;
    --environment-overlay: 0.78;
}

body[data-studio-environment="dashboard"] {
    --environment-image: url("../assets/environments/midnight-static/dashboard.webp");
    --environment-position: center center;
}
body[data-studio-environment="songs"] {
    --environment-image: url("../assets/environments/midnight-static/songs.webp");
    --environment-position: center center;
}
body[data-studio-environment="setlists"] {
    --environment-image: url("../assets/environments/midnight-static/setlists.webp");
    --environment-position: center center;
}
body[data-studio-environment="rehearsals"] {
    --environment-image: url("../assets/environments/midnight-static/rehearsals.webp");
    --environment-position: center center;
    --environment-overlay: 0.72;
}
body[data-studio-environment="library"] {
    --environment-image: url("../assets/environments/midnight-static/library.webp");
    --environment-position: center center;
}
body[data-studio-environment="band"],
body[data-studio-environment="members"] {
    --environment-image: url("../assets/environments/midnight-static/backstage.webp");
    --environment-position: center center;
}
body[data-studio-environment="settings"] {
    --environment-image: url("../assets/environments/midnight-static/settings.webp");
    --environment-position: center center;
}

/* Confine the cinematic image to the workspace, not the sidebar. */
body::before {
    position: fixed;
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--sidebar-width, 250px);

    content: "";

    background-image:
        linear-gradient(
            rgba(7, 8, 10, var(--environment-overlay)),
            rgba(5, 6, 8, calc(var(--environment-overlay) + 0.08))
        ),
        radial-gradient(
            circle at 50% 25%,
            rgba(190, 123, 42, 0.13),
            transparent 46%
        ),
        var(--environment-image);

    background-repeat: no-repeat;
    background-position: center, center, var(--environment-position);
    background-size: cover;
    filter: saturate(0.86) contrast(1.02);
    transition:
        background-image 260ms ease,
        background-position 320ms ease;
}

body::after {
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--sidebar-width, 250px);

    pointer-events: none;
    content: "";

    background:
        radial-gradient(
            ellipse at 50% 42%,
            transparent 30%,
            rgba(0, 0, 0, 0.15) 68%,
            rgba(0, 0, 0, 0.44) 100%
        );
}

body,
.studio-app,
.workspace {
    background: transparent;
}

.workspace,
.studio-app {
    position: relative;
}

.studio-app {
    z-index: 1;
}

.sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(7, 9, 11, 0.97),
            rgba(6, 8, 10, 0.94)
        );
    backdrop-filter: blur(14px);
}

.topbar {
    background: rgba(12, 14, 17, 0.76);
    backdrop-filter: blur(18px);
}

@media (max-width: 1050px) {
    body::before,
    body::after {
        left: var(--sidebar-width, 220px);
    }
}

@media (max-width: 760px) {
    body::before,
    body::after {
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        transition: none;
    }
}