/* /Components/Albums/AlbumPage.razor.rz.scp.css */

.album-header[b-gr1r3djn8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.album-info[b-gr1r3djn8a] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.track[b-gr1r3djn8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
}

.track-actions[b-gr1r3djn8a] {
    display: flex;
    gap: 0.5rem;
}

button[b-gr1r3djn8a] {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

button:hover[b-gr1r3djn8a] {
    opacity: 0.8;
}

/* 📱 Mobile Responsive */
@media (max-width: 600px) {
    .album-header[b-gr1r3djn8a] {
        text-align: center;
    }

    .album-art[b-gr1r3djn8a] {
        width: 100px;
        height: 100px;
        margin-top: 0.5rem;
    }

    .play-all[b-gr1r3djn8a] {
        align-self: center;
    }

    .track-actions[b-gr1r3djn8a] {
        margin-top: 0.5rem;
    }
}

/* 📱 Mobile Responsive */
@media (max-width: 400px) {
    .track[b-gr1r3djn8a] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1rem 0;
    }

    .track-actions[b-gr1r3djn8a] {
        margin-top: 0.5rem;
    }
}
/* /Components/MediaPlayer.razor.rz.scp.css */
.media-player[b-8ofxhwxpdn] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1rem;
    border-radius: 8px;
    width: 100%;
}

.album-art img[b-8ofxhwxpdn] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
}

.track-info[b-8ofxhwxpdn] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.track-title[b-8ofxhwxpdn] {
    font-size: 1.1rem;
    font-weight: bold;
}

.track-artist[b-8ofxhwxpdn] {
    font-size: 0.9rem;
    opacity: 0.8;
}

.controls[b-8ofxhwxpdn] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.queue[b-8ofxhwxpdn] {
    text-align: right;
    [role=group] {
        align-items: center;
    }
}


button:hover[b-8ofxhwxpdn] {
    opacity: 0.8;
}

/* 📱 Mobile Layout */
@media (max-width: 600px) {
    .media-player[b-8ofxhwxpdn] {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.5rem;
    }

    .album-art[b-8ofxhwxpdn] {
        display: flex;
        justify-content: center;
    }

    .track-info[b-8ofxhwxpdn] {
        text-align: center;
    }

    .controls[b-8ofxhwxpdn] {
        justify-content: center;
    }

    .queue[b-8ofxhwxpdn] {
        text-align: center;
        [role=group] {
            justify-content: center;
        }
    }
}