/**
 * Music Library - Responsive Styles
 * 
 * Ce fichier contient les media queries pour adapter l'interface musicale
 * aux différentes tailles d'écran (desktop, tablette, mobile).
 * 
 * @module assets/css/responsive
 * @version 1.0.0
 */

/* Tablette (max-width: 1024px) */
@media (max-width: 1024px) {
    .music-layout {
        grid-template-columns: 200px 1fr;
        gap: var(--music-spacing-md);
    }

    .music-sidebar {
        padding: var(--music-spacing-md);
    }

    .sidebar-section h3 {
        font-size: 0.6875rem;
    }

    .sidebar-link,
    .sidebar-link-add {
        padding: var(--music-spacing-xs) var(--music-spacing-sm);
        font-size: 0.8125rem;
    }

    .sidebar-icon {
        font-size: 1rem;
        width: 20px;
    }

    .music-player {
        grid-template-columns: 1fr;
        gap: var(--music-spacing-md);
    }

    .player-controls-center {
        order: -1;
    }

    .player-volume-container {
        justify-content: center;
    }

    .alphabet-nav {
        gap: 2px;
        padding: var(--music-spacing-sm);
    }

    .alphabet-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .music-layout {
        grid-template-columns: 1fr;
        gap: var(--music-spacing-md);
        padding-bottom: 180px; /* Plus d'espace pour le lecteur mobile */
    }

    .music-sidebar {
        position: static;
        border-radius: var(--music-radius);
        margin-bottom: var(--music-spacing-md);
    }

    .sidebar-section {
        margin-bottom: var(--music-spacing-md);
    }

    .music-main {
        padding: var(--music-spacing-md);
    }

    .music-header {
        flex-direction: column;
        gap: var(--music-spacing-sm);
    }

    .search-container {
        width: 100%;
    }

    .btn-reindex {
        width: 100%;
        justify-content: center;
    }

    /* Alphabet Navigation - Scrollable */
    .alphabet-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: var(--music-spacing-sm);
        gap: var(--music-spacing-xs);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .alphabet-nav::-webkit-scrollbar {
        height: 4px;
    }

    .alphabet-nav::-webkit-scrollbar-track {
        background: var(--music-bg-primary);
    }

    .alphabet-nav::-webkit-scrollbar-thumb {
        background: var(--music-border);
        border-radius: 2px;
    }

    .alphabet-btn {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
    }

    /* Track Cards */
    .track-card {
        padding: var(--music-spacing-sm);
        gap: var(--music-spacing-sm);
    }

    .track-cover {
        width: 40px;
        height: 40px;
    }

    .track-title {
        font-size: 0.8125rem;
    }

    .track-artist {
        font-size: 0.6875rem;
    }

    .track-actions {
        opacity: 1; /* Toujours visible sur mobile */
    }

    .track-action-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    /* Artist/Album Cards */
    .artist-card,
    .album-card {
        padding: var(--music-spacing-md);
    }

    .artist-avatar,
    .album-cover-large {
        width: 80px;
        height: 80px;
    }

    /* Music Player Mobile */
    .music-player {
        padding: var(--music-spacing-md);
        grid-template-columns: 1fr;
        gap: var(--music-spacing-sm);
    }

    .player-track-info {
        gap: var(--music-spacing-sm);
    }

    .player-cover {
        width: 48px;
        height: 48px;
    }

    .player-title {
        font-size: 0.8125rem;
    }

    .player-artist {
        font-size: 0.6875rem;
    }

    .player-controls-center {
        order: 2;
        gap: var(--music-spacing-md);
        padding: var(--music-spacing-sm) 0;
    }

    .player-btn {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }

    .player-btn-play {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .player-progress-container {
        order: 1;
        margin-top: 0;
        gap: var(--music-spacing-sm);
    }

    .player-time {
        font-size: 0.6875rem;
        min-width: 35px;
    }

    .player-volume-container {
        order: 3;
        justify-content: center;
        padding-top: var(--music-spacing-sm);
        border-top: 1px solid var(--music-border);
    }

    .player-volume-slider {
        width: 120px;
    }

    /* Stats Bar */
    .stats-bar {
        flex-direction: column;
        gap: var(--music-spacing-md);
    }

    .stat-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        gap: var(--music-spacing-xs);
    }

    .pagination-btn {
        padding: var(--music-spacing-xs) var(--music-spacing-sm);
        font-size: 0.75rem;
    }

    .pagination-info {
        width: 100%;
        text-align: center;
        font-size: 0.75rem;
    }

    /* Section Titles */
    .section-title {
        font-size: 1.25rem;
    }

    .letter-header {
        font-size: 1.125rem;
    }

    .artist-group-header {
        font-size: 0.875rem;
    }

    .artist-group-tracks {
        margin-left: var(--music-spacing-md);
    }
}

/* Petit Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .music-layout {
        padding-bottom: 200px;
    }

    .music-sidebar {
        padding: var(--music-spacing-sm);
    }

    .sidebar-section h3 {
        font-size: 0.625rem;
    }

    .sidebar-link,
    .sidebar-link-add {
        padding: var(--music-spacing-xs);
        font-size: 0.75rem;
        gap: var(--music-spacing-sm);
    }

    .sidebar-icon {
        font-size: 0.875rem;
        width: 18px;
    }

    .music-main {
        padding: var(--music-spacing-sm);
    }

    .search-input {
        padding: var(--music-spacing-sm) var(--music-spacing-md);
        padding-right: 36px;
        font-size: 0.8125rem;
    }

    .alphabet-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .track-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .track-cover {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .track-info {
        width: 100%;
    }

    .track-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .music-player {
        padding: var(--music-spacing-sm);
    }

    .player-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .player-btn-play {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .player-volume-slider {
        width: 100px;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .music-layout {
        padding-bottom: 140px;
    }

    .music-player {
        padding: var(--music-spacing-sm) var(--music-spacing-md);
    }

    .player-controls-center {
        gap: var(--music-spacing-sm);
    }

    .player-btn-play {
        width: 44px;
        height: 44px;
    }
}

/* Large Desktop (min-width: 1440px) */
@media (min-width: 1440px) {
    .music-layout {
        grid-template-columns: 280px 1fr;
        gap: var(--music-spacing-xl);
    }

    .music-sidebar {
        padding: var(--music-spacing-xl);
    }

    .music-main {
        padding: var(--music-spacing-xl);
    }

    .music-player {
        padding: var(--music-spacing-lg) var(--music-spacing-xl);
    }

    .player-volume-slider {
        width: 120px;
    }
}

/* Print Styles */
@media print {
    .music-sidebar,
    .music-player,
    .alphabet-nav,
    .track-actions,
    .btn-reindex {
        display: none !important;
    }

    .music-layout {
        grid-template-columns: 1fr;
    }

    .music-main {
        border: none;
        box-shadow: none;
    }
}