/* ========================================
   DESKTOP-SPECIFIC STYLES
   ======================================== */

@media (min-width: 769px) {

    /* ========================================
     DESKTOP LAYOUT
     ======================================== */

    .desktop-layout {
        display: block;
        min-height: 100vh;
        background: #F3F4F6;
        /* Clean light gray */
        position: relative;
    }

    /* ========================================
     DESKTOP SIDEBAR (FIXED)
     ======================================== */

    .desktop-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 260px;
        /* Slightly narrower for sleekness */
        background: #FFFFFF;
        border-right: 1px solid #E5E7EB;
        display: flex;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02);
    }

    .sidebar-header {
        padding: 24px;
        height: 80px;
        /* Fixed height for alignment */
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F3F4F6;
    }

    .sidebar-logo {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
    }

    .sidebar-logo-icon {
        width: 36px;
        height: 36px;
        background: #2563eb;
        /* Indigo */
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.25rem;
        font-weight: bold;
    }

    .sidebar-logo-text {
        font-size: 1.25rem;
        font-weight: 700;
        color: #111827;
        /* Gray 900 */
        letter-spacing: -0.025em;
    }

    .sidebar-nav {
        flex: 1;
        padding: 24px 16px;
        overflow-y: auto;
    }

    .sidebar-nav-section {
        margin-bottom: 32px;
    }

    .sidebar-nav-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: #9CA3AF;
        /* Gray 400 */
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 12px;
        padding-left: 12px;
    }

    .sidebar-nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        color: #4B5563;
        /* Gray 600 */
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.2s ease;
        margin-bottom: 4px;
        font-size: 0.95rem;
        font-weight: 500;
        line-height: 1.5;
    }

    .sidebar-nav-item:hover {
        background: #F9FAFB;
        color: #111827;
    }

    .sidebar-nav-item.active {
        background: #EEF2FF;
        /* Indigo 50 */
        color: #2563eb;
        /* Indigo 600 */
        font-weight: 600;
    }

    /* CRITICAL FIX: Icon Sizing */
    .sidebar-nav-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .sidebar-footer {
        padding: 20px;
        border-top: 1px solid #E5E7EB;
        background: #FFFFFF;
    }

    .sidebar-user {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .sidebar-user:hover {
        background: #F3F4F6;
    }

    .sidebar-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #2563eb;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .sidebar-user-info {
        flex: 1;
        overflow: hidden;
    }

    .sidebar-user-name {
        font-size: 0.9rem;
        font-weight: 600;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-user-email {
        font-size: 0.8rem;
        color: #6B7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ========================================
     DESKTOP MAIN CONTENT
     ======================================== */

    .desktop-main {
        margin-left: 260px;
        /* Matches Sidebar Width */
        min-height: 100vh;
        width: auto;
        padding-bottom: 100px;
        /* Space for player */
    }

    .desktop-header {
        position: sticky;
        top: 0;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid #E5E7EB;
        padding: 16px 32px;
        z-index: 900;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Search Bar Styles */
    .desktop-header-search {
        position: relative;
        width: 100%;
        max-width: 400px;
    }

    .desktop-search-input {
        width: 100%;
        height: 42px;
        padding: 0 16px 0 40px;
        /* Left padding for icon */
        border: 1px solid #E5E7EB;
        border-radius: 99px;
        /* Pill shape */
        background: #F9FAFB;
        font-size: 0.95rem;
        color: #111827;
        transition: all 0.2s;
    }

    .desktop-search-input:focus {
        background: #FFFFFF;
        border-color: #2563eb;
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .desktop-search-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        color: #9CA3AF;
        pointer-events: none;
    }

    .desktop-content {
        padding: 32px 40px;
        max-width: 1400px;
        /* Max content width */
        margin: 0 auto;
    }

    /* ========================================
     DESKTOP MUSIC GRID & CARDS
     ======================================== */

    .desktop-music-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        /* Responsive Grid */
        gap: 24px;
        margin-top: 24px;
    }

    .music-card-desktop {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        padding: 16px;
        transition: all 0.2s ease;
        cursor: pointer;
        position: relative;
    }

    .music-card-desktop:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        border-color: #D1D5DB;
    }

    .music-card-desktop-artwork {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 8px;
        background: #F3F4F6;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        overflow: hidden;
        position: relative;
    }

    /* Simple Play Overlay - No heavy gradients */
    .music-card-play-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .music-card-desktop:hover .music-card-play-overlay {
        opacity: 1;
    }

    .music-card-play-btn {
        width: 50px;
        height: 50px;
        background: #2563eb;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transform: scale(0.9);
        transition: transform 0.2s;
    }

    .music-card-desktop:hover .music-card-play-btn {
        transform: scale(1);
    }

    .music-card-desktop-title {
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .music-card-desktop-meta {
        font-size: 0.85rem;
        color: #6B7280;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* ========================================
     DESKTOP PLAYER
     ======================================== */

    .desktop-player {
        position: fixed;
        bottom: 0;
        left: 260px;
        /* Match sidebar */
        right: 0;
        height: 90px;
        background: #FFFFFF;
        border-top: 1px solid #E5E7EB;
        padding: 0 32px;
        z-index: 1000;
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 24px;
        align-items: center;
    }

    /* Reset scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: #D1D5DB;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #9CA3AF;
    }

    /* ========================================
     AUTH MODALS (DESKTOP ONLY)
     ======================================== */

    .auth-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .auth-modal-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    .auth-modal-container {
        background: #FFFFFF;
        width: 100%;
        max-width: 480px;
        border-radius: 24px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        position: relative;
        overflow: hidden;
        transform: scale(0.9) translateY(20px);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    .auth-modal-backdrop.active .auth-modal-container {
        transform: scale(1) translateY(0);
    }

    .auth-modal-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #F3F4F6;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #4B5563;
        transition: all 0.2s;
        z-index: 10;
        border: none;
    }

    .auth-modal-close:hover {
        background: #E5E7EB;
        color: #111827;
        transform: rotate(90deg);
    }

    .auth-modal-body {
        padding: 40px;
        overflow-y: auto;
    }

    .auth-modal-body .page-wrapper,
    .auth-modal-body .mobile-header,
    .auth-modal-body .mobile-nav,
    .auth-modal-body .desktop-sidebar,
    .auth-modal-body .desktop-only:not(.auth-modal-container),
    .auth-modal-body .mobile-only {
        display: none !important;
    }

    .auth-modal-body .container {
        padding: 0 !important;
        max-width: 100% !important;
        margin-top: 0 !important;
    }

    .auth-modal-body .card {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        margin-top: 0 !important;
    }

    .auth-modal-body main {
        padding-top: 0 !important;
    }
}