/* Extra small breakpoint styles (<576px) */
@media (max-width: 576px) {
    /* AdminSongManagement container */
    #grid-container {
        width: 100%;
        height: calc(100vh - 6rem);
    }

    /* SongPlayer - Container adjustments for extra small screens */
    .song-player-container {
        grid-template-rows: 1fr 80px;
    }

        .song-player-container .song-header {
            padding: 16px;
        }

        .song-player-container .player-bar {
            padding: 8px 12px;
            gap: 4px;
        }

    /* SongPlayer extra small adjustments */
    .song-title {
        font-size: 24px;
    }

    .player-controls {
        gap: 2px;
    }

    .volume-bar-container {
        width: 50px;
    }

    /* MusicLibrary extra small adjustments */
    .music-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .music-library-container {
        padding: 16px;
    }

    /* Featured Music Carousel - XS breakpoint: show 1.2 cards with peek */
    .featured-music-carousel {
        gap: 12px;
        padding-right: 16px;
    }

    .featured-music-carousel .music-card {
        /* 1.2 cards visible: 100vw / 1.2 = 83.33vw per card, minus padding/gap */
        width: calc(100vw / 1.2 - 32px);
        min-width: calc(100vw / 1.2 - 32px);
    }

    /* NavMenu */
    .cart-link {
        margin-right: 70px;
    }

    /* MainLayout top-row adjustments */
    .top-row {
        justify-content: space-between;
    }

        .top-row a, .top-row .btn-link {
            margin-left: 0;
        }

    .album-art {
        width: 85px;
        object-fit: cover;
        border-radius: 4px;
    }

    .title-container {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .song-title {
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        margin: 0 5px 0 5px;
        padding: 0;
    }

    .track-list {
        width: 100%;
        border-collapse: collapse;
        color: #b3b3b3;
        font-size: 8px;
    }

        .track-list thead {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .track-list th {
            font-size: 8px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 6px 12px;
            text-align: left;
        }

            .track-list th.track-number {
                width: 50px;
                text-align: center;
            }

            .track-list th.track-image {
                width: 60px;
                padding-left: 0;
                padding-right: 0;
            }

            .track-list th.track-duration {
                width: 80px;
                text-align: right;
            }

            .track-list th.track-actions {
                width: 50px;
            }

    .track-row {
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .track-row:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .track-row.current-track {
            background-color: rgba(29, 185, 84, 0.2);
        }

        .track-row td {
            padding: 8px 12px;
        }

            .track-row td.track-number {
                text-align: center;
                position: relative;
            }

    .track-index {
        display: inline;
    }

    .track-play-btn {
        display: none;
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 0;
        width: 16px;
        height: 16px;
    }

        .track-play-btn svg {
            width: 16px;
            height: 16px;
        }

    .track-row:hover .track-index {
        display: none;
    }

    .track-row:hover .track-play-btn {
        display: inline;
    }

    .track-row.current-track .track-index {
        display: none;
    }

    /* Playing Indicator */
    .playing-indicator {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 2px;
        height: 16px;
    }

        .playing-indicator span {
            width: 3px;
            background-color: #1db954;
            border-radius: 1px;
            animation: soundBars 0.5s ease infinite alternate;
        }

            .playing-indicator span:nth-child(1) {
                height: 60%;
                animation-delay: 0s;
            }

            .playing-indicator span:nth-child(2) {
                height: 100%;
                animation-delay: 0.1s;
            }

            .playing-indicator span:nth-child(3) {
                height: 40%;
                animation-delay: 0.2s;
            }

    @keyframes soundBars {
        0% {
            height: 20%;
        }

        100% {
            height: 100%;
        }
    }

    .track-image {
        padding: 8px !important;
    }

    .track-thumbnail {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 2px;
    }

    .track-thumbnail-placeholder {
        width: 40px;
        height: 40px;
        background: #282828;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
    }

        .track-thumbnail-placeholder svg {
            width: 24px;
            height: 24px;
            fill: #b3b3b3;
        }

    /* Stream Count on Card */
    .card-stream-count {
        display: flex;
        align-items: center;
        gap: 3px;
        color: #b3b3b3;
        font-size: 10px;
        margin-bottom: 4px;
    }

    .stream-icon {
        width: 10px;
        height: 10px;
        fill: currentColor;
    }

    /* SongPlayer - Player controls compact layout */
    .song-player-container .controls-wrapper {
        gap: 2px;
        margin-bottom: 4px;
        max-width: 100%;
    }

    .song-player-container .time-spacer {
        display: none;
        min-width: 0;
    }

    .song-player-container .player-controls-row {
        gap: 4px;
        width: 100%;
    }

    .song-player-container .player-controls {
        gap: 2px;
    }

    .song-player-container .volume-controls {
        gap: 4px;
    }

    .song-player-container .control-button {
        width: 28px;
        height: 28px;
    }

    .song-player-container .control-icon {
        width: 14px;
        height: 14px;
    }

    .song-player-container .play-button-small {
        width: 28px;
        height: 28px;
    }

    .song-player-container .play-icon-small {
        width: 14px;
        height: 14px;
    }

    .song-player-container .progress-container {
        gap: 4px;
        max-width: 100%;
    }

    .song-player-container .time-display {
        min-width: 28px;
        font-size: 10px;
    }

    .song-player-container .volume-bar-container {
        width: 50px;
    }

    .song-player-container .action-controls {
        flex-wrap: wrap;
        gap: 12px;
    }

    .song-player-container .cart-button-large {
        padding: 8px 16px;
        font-size: 12px;
    }

    .song-player-container .cart-icon-large {
        width: 16px;
        height: 16px;
    }

    /* AlbumPlayer - Container adjustments for extra small screens */
    .album-player-spotify-container {
        grid-template-rows: auto auto auto 1fr 65px;
        height: calc(100vh - 115px);
    }

        .album-player-spotify-container .album-image-title-row {
            padding: 8px 12px;
        }

        .album-player-spotify-container .action-buttons-row {
            padding: 4px 12px;
        }

        .album-player-spotify-container .status-info-row {
            padding: 4px 12px;
        }

        .album-player-spotify-container .player-bar {
            padding: 6px 8px;
            gap: 2px;
        }

        /* AlbumPlayer - Player controls compact layout */
        .album-player-spotify-container .controls-wrapper {
            gap: 2px;
            margin-bottom: 4px;
            max-width: 100%;
        }

        .album-player-spotify-container .time-spacer {
            display: none;
            min-width: 0;
        }

        .album-player-spotify-container .player-controls-row {
            gap: 4px;
            width: 100%;
        }

        .album-player-spotify-container .player-controls {
            gap: 2px;
        }

        .album-player-spotify-container .volume-controls {
            gap: 4px;
        }

        .album-player-spotify-container .control-button {
            width: 28px;
            height: 28px;
        }

        .album-player-spotify-container .control-icon {
            width: 14px;
            height: 14px;
        }

        .album-player-spotify-container .play-button-small {
            width: 28px;
            height: 28px;
        }

        .album-player-spotify-container .play-icon-small {
            width: 14px;
            height: 14px;
        }

        .album-player-spotify-container .progress-container {
            gap: 4px;
            max-width: 100%;
        }

        .album-player-spotify-container .time-display {
            min-width: 28px;
            font-size: 10px;
        }

        .album-player-spotify-container .volume-bar-container {
            width: 50px;
        }

        .album-player-spotify-container .action-controls {
            flex-wrap: wrap;
            gap: 12px;
        }

        .album-player-spotify-container .cart-button-large {
            padding: 8px 16px;
            font-size: 12px;
        }

        .album-player-spotify-container .cart-icon-large {
            width: 16px;
            height: 16px;
        }

    /* AlbumPlayer - Make action buttons smaller on XS */
    .album-player-spotify-container .play-button-large {
        width: 36px;
        height: 36px;
    }

    .album-player-spotify-container .play-icon {
        width: 20px;
        height: 20px;
    }

    .album-player-spotify-container .cart-button-large {
        padding: 6px 12px;
        font-size: 11px;
    }

    .album-player-spotify-container .cart-button-large span {
        display: none;
    }

    .album-player-spotify-container .cart-button-large.in-cart span {
        display: inline;
    }

    .album-player-spotify-container .fb-share-btn {
        padding: 6px 10px;
        font-size: 11px;
        gap: 4px;
    }

    .album-player-spotify-container .fb-share-btn .fb-icon {
        width: 14px;
        height: 14px;
    }

    .album-player-spotify-container .fb-share-btn .share-text {
        display: none;
    }

    /* Make status text smaller */
    .album-player-spotify-container .preview-label,
    .album-player-spotify-container .subscription-badge {
        font-size: 11px;
    }

    .album-player-spotify-container .subscription-badge svg {
        width: 12px;
        height: 12px;
    }

    .album-player-spotify-container .album-track-info {
        font-size: 11px;
    }

    /* Make track preview badge smaller on XS screens */
    .track-preview-badge {
        font-size: 8px;
        padding: 1px 4px;
        margin-left: 4px;
    }

    /* Now Playing info smaller */
    .album-player-spotify-container .now-playing-info {
        display: none;
    }

    /* Hide like/dislike buttons on XS to save space */
    .album-player-spotify-container .track-like-dislike {
        /*display: none;*/
    }

    .app-logo {
        height: 30px;
    }

    .action-controls {        
        gap: 8px;
        height: auto;
    }

    /* Album image smaller on XS */
    .album-player-spotify-container .album-art {
        width: 70px;
        height: 70px;
    }

    /* Title container adjustments */
    .album-player-spotify-container .title-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .album-player-spotify-container .song-title {
        font-size: 14px;
        margin: 0;
    }

    .home-container {
        padding: 2rem 0rem;
        max-width: 1200px;
        margin: 0 auto;
    }
}