/* SPACING FIX - Restore tight spacing throughout the app */

/* Fix MediaList spacing issues */
.media-list .media-item > .media-details > .song-name {
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
}

.media-list .media-item > .media-details > .container {
    line-height: 1.1 !important;
    margin-top: 0 !important;
}

.media-list .media-item > .media-details > .container > .artist,
.media-list .media-item > .media-details > .container > .album {
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
}

/* Fix playlist item spacing */
.media-list .media-item.playlist-item > .media-details > .song-name {
    margin-bottom: 2px !important;
}

/* Fix artist item spacing */
.media-list .media-item.artist-item > .media-details > .song-name {
    margin-bottom: 0 !important;
}

/* Fix miniplayer footer spacing - balanced approach */
.main > .main_footer > .playback > .container > .track-info {
    justify-content: center !important;
    gap: 1px !important;
}

.main > .main_footer > .playback > .container > .track-info > .track-name {
    line-height: 1.2 !important;
    margin-top: 0px !important;
    margin-bottom: 1px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.main > .main_footer > .playback > .container > .track-info > .artist {
    line-height: 1.2 !important;
    margin-bottom: 1px !important;
    margin-top: 0px !important;
    font-size: 0.75rem !important;
}

.main > .main_footer > .playback > .container > .track-info > .album {
    line-height: 1.2 !important;
    margin-top: 0px !important;
    font-size: 0.75rem !important;
}

/* Fix mobile miniplayer spacing */
@media only screen and (max-width: 1024px) {
    .main > .main_footer > .playback > .container > .track-info {
        justify-content: center !important;
        gap: 0 !important;
    }

    .main > .main_footer > .playback > .container > .track-info > .track-name {
        margin-bottom: -2px !important;
        margin-top: 1px !important;
        line-height: 0.95 !important;
        font-size: 0.75rem !important;
    }

    .main > .main_footer > .playback > .container > .track-info > .artist {
        margin-bottom: -2px !important;
        margin-top: 0px !important;
        line-height: 0.95 !important;
        font-size: 0.7rem !important;
    }

    .main > .main_footer > .playback > .container > .track-info > .album {
        margin-top: 0px !important;
        line-height: 0.95 !important;
        font-size: 0.7rem !important;
    }
}

/* Fix sidebar spacing if needed */
.sidenav .nav-item {
    line-height: 1.2 !important;
}

/* Fix discover page spacing */
.discovery-section .media-list .media-item > .media-details > .song-name {
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
}

.discovery-section .media-list .media-item > .media-details > .container {
    line-height: 1.1 !important;
}

/* Fix search results spacing */
.search-results .media-list .media-item > .media-details > .song-name {
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
}

.search-results .media-list .media-item > .media-details > .container {
    line-height: 1.1 !important;
}

/* Fix any remaining excessive spacing */
.media-item .media-details * {
    line-height: 1.2 !important;
}

/* Ensure track count spacing is tight */
.track-count {
    line-height: 1.1 !important;
    margin-top: 1px !important;
}

/* Fix divider spacing */
.media-list .media-item > .media-details > .container > .divider {
    margin: 0 4px !important;
    margin-top: 2px !important;
}/* AG
GRESSIVE MINIPLAYER SPACING FIX */
/* Force ultra-compact spacing in the miniplayer */

.main > .main_footer > .playback > .container {
    align-items: center !important;
    padding: 8px 10px !important;
}

.main > .main_footer > .playback > .container > .track-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
}

/* Ultra-tight text spacing */
.main > .main_footer > .playback > .container > .track-info > * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.0 !important;
}

/* Specific element spacing */
.main > .main_footer > .playback > .container > .track-info > .track-name {
    margin-bottom: -1px !important;
}

.main > .main_footer > .playback > .container > .track-info > .artist {
    margin-top: -1px !important;
    margin-bottom: -1px !important;
}

.main > .main_footer > .playback > .container > .track-info > .album {
    margin-top: -1px !important;
}

/* Override any conflicting styles */
.main_footer .track-info,
.main_footer .track-info * {
    line-height: 1.0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure text elements are tightly packed */
.main_footer .track-info > .track-name + .artist {
    margin-top: -2px !important;
}

.main_footer .track-info > .artist + .album {
    margin-top: -2px !important;
}

/* Mobile ultra-compact */
@media only screen and (max-width: 768px) {
    .main > .main_footer > .playback > .container > .track-info > .track-name {
        line-height: 0.9 !important;
        margin-bottom: -2px !important;
    }

    .main > .main_footer > .playback > .container > .track-info > .artist {
        line-height: 0.9 !important;
        margin-top: -1px !important;
        margin-bottom: -2px !important;
    }

    .main > .main_footer > .playback > .container > .track-info > .album {
        line-height: 0.9 !important;
        margin-top: -1px !important;
    }
}/* M
INIPLAYER CONTROLS AND TIMER CENTERING */
/* Fix the controls and timer alignment */

.main > .main_footer > .playback > .container {
    align-items: center !important;
    padding: 10px !important;
    min-height: 70px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

/* Center the controls section - bring closer to duration */
.main > .main_footer > .playback > .container > .controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
}

/* Center the duration/timer - bring closer to controls */
.main > .main_footer > .playback > .container > .duration {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    margin-left: 4px !important;
}

/* Ensure track info has proper clickable areas */
.main > .main_footer > .playback > .container > .track-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
}

/* Make text elements properly clickable */
.main > .main_footer > .playback > .container > .track-info > .track-name {
    cursor: pointer !important;
    padding: 2px 4px !important;
    margin: -2px -4px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
    min-height: 20px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.main > .main_footer > .playback > .container > .track-info > .track-name:hover {
    background-color: rgba(var(--font-color-rgb), 0.05) !important;
}

.main > .main_footer > .playback > .container > .track-info > .artist {
    cursor: pointer !important;
    padding: 1px 4px !important;
    margin: -1px -4px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
    min-height: 18px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

.main > .main_footer > .playback > .container > .track-info > .artist:hover {
    background-color: rgba(var(--font-color-rgb), 0.05) !important;
}

.main > .main_footer > .playback > .container > .track-info > .album {
    cursor: pointer !important;
    padding: 1px 4px !important;
    margin: -1px -4px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
    min-height: 18px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

.main > .main_footer > .playback > .container > .track-info > .album:hover {
    background-color: rgba(var(--font-color-rgb), 0.05) !important;
}

/* Mobile adjustments */
@media only screen and (max-width: 768px) {
    .main > .main_footer > .playback > .container {
        padding: 8px !important;
        min-height: 65px !important;
    }

    .main > .main_footer > .playback > .container > .track-info > .track-name {
        font-size: 0.78rem !important;
        min-height: 18px !important;
    }

    .main > .main_footer > .playback > .container > .track-info > .artist,
    .main > .main_footer > .playback > .container > .track-info > .album {
        font-size: 0.72rem !important;
        min-height: 16px !important;
    }

    .main > .main_footer > .playback > .container > .controls {
        gap: 12px !important;
    }

    .main > .main_footer > .playback > .container > .duration {
        font-size: 0.7rem !important;
    }
}/*
 MOBILE HEADER FIX - Ensure header is always visible */
/* Force header visibility on all screen sizes */

.main > .main_header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: var(--bg-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 8px 16px !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.main > .main_header > .primary {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.main > .main_header > .primary > .return_icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
}

.main > .main_header > .primary > .return_icon:hover {
    background-color: var(--bg-color-tertiary) !important;
}

.main > .main_header > .primary > .container {
    flex: 1 !important;
    min-width: 0 !important;
}

.main > .main_header > .primary > .container > .page_title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--font-color) !important;
    line-height: 1.2 !important;
}

.main > .main_header > .primary > .container > .page_title > .text {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* Header Dropdown Styles */
.main > .main_header > .primary > .container > .page_title {
    position: relative !important;
}

.main > .main_header > .primary > .container > .page_title > .text.header-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: color 0.2s ease !important;
}

.main > .main_header > .primary > .container > .page_title > .text.header-dropdown-trigger:hover {
    color: var(--color-accent) !important;
}

.header-dropdown-icon {
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
}

.header-dropdown-icon.open {
    transform: rotate(180deg) !important;
}

.header-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    background-color: var(--bg-color-secondary) !important;
    border: 1px solid var(--bg-color-tertiary) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 1000 !important;
    min-width: 200px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    padding: 6px !important;
}

.header-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: var(--font-color) !important;
    transition: all 0.2s ease !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.header-dropdown-item:hover {
    background-color: var(--bg-color-tertiary) !important;
    color: var(--color-accent) !important;
    text-decoration: none !important;
}

.header-dropdown-item.active {
    background-color: var(--color-accent-bg) !important;
    color: var(--color-accent) !important;
}

.header-dropdown-item .header-dropdown-icon {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-dropdown-label {
    flex: 1 !important;
    white-space: nowrap !important;
}

/* Mobile optimizations for header dropdown */
@media only screen and (max-width: 768px) {
    .header-dropdown-menu {
        min-width: 250px !important;
        max-width: calc(100vw - 24px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .header-dropdown-item {
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
    }
    
    .main > .main_header > .primary > .container > .page_title > .text.header-dropdown-trigger {
        font-size: 1rem !important;
    }
}

.main > .main_header > .secondary {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* Offline Mode Indicator in Header */
.main > .main_header > .secondary > .offline-mode-container {
    display: flex !important;
    align-items: center !important;
    padding: 4px !important;
}

.main > .main_header > .secondary > .offline-mode-container .offline-mode-indicator.orb {
    margin: 0 !important;
}

.main > .main_header > .secondary > .offline-mode-container .connection-orb {
    width: 10px !important;
    height: 10px !important;
}

/* Legacy compact mode styles (kept for Settings page) */
.main > .main_header > .secondary > .offline-mode-container .offline-mode-indicator.compact {
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: 200px !important;
}

.main > .main_header > .secondary > .offline-mode-container .offline-mode-indicator.compact .connection-status {
    padding: 2px 6px !important;
    font-size: 11px !important;
}

.main > .main_header > .secondary > .offline-mode-container .offline-mode-indicator.compact .cache-status {
    display: none !important; /* Hide cache details in compact mode */
}

.main > .main_header > .secondary > .offline-mode-container .offline-mode-indicator.compact .cache-refresh-progress {
    padding: 2px 6px !important;
    font-size: 10px !important;
}

.main > .main_header > .secondary > .offline-mode-container .offline-mode-indicator.compact .progress-bar {
    width: 40px !important;
    height: 3px !important;
}

/* Mobile-specific header styles */
@media only screen and (max-width: 768px) {
    .main > .main_header {
        padding: 8px 12px !important;
    }
    
    .main > .main_header > .secondary > .sidenav_toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 32px !important;
        height: 32px !important;
        cursor: pointer !important;
        border-radius: 6px !important;
        transition: background-color 0.2s ease !important;
        gap: 3px !important;
    }
    
    .main > .main_header > .secondary > .sidenav_toggle:hover {
        background-color: var(--bg-color-tertiary) !important;
    }
    
    .main > .main_header > .secondary > .sidenav_toggle > .bar {
        height: 2px !important;
        width: 14px !important;
        background-color: var(--font-color) !important;
        border-radius: 1px !important;
        transition: all 0.2s ease !important;
    }
}

/* Ensure header is always above content */
.main > .main_content {
    position: relative !important;
    z-index: 1 !important;
}

/* Fix any potential header hiding issues */
@media only screen and (max-width: 1024px) {
    .main > .main_header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .main > .main_header > .primary > .return_icon {
        display: flex !important;
    }
    
    .main > .main_header > .secondary > .sidenav_toggle {
        display: flex !important;
    }
}/*
 EMERGENCY MOBILE HEADER VISIBILITY FIX */
/* Force the header to be visible on all devices */

.main > .main_header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: var(--bg-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 12px 16px !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
    max-height: none !important;
    height: auto !important;
}

/* Force primary section visibility */
.main > .main_header > .primary {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Force secondary section visibility */
.main > .main_header > .secondary {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* Force hamburger menu visibility on mobile */
.main > .main_header > .secondary > .sidenav_toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
    gap: 3px !important;
    background: transparent !important;
    border: none !important;
}

.main > .main_header > .secondary > .sidenav_toggle:hover {
    background-color: var(--bg-color-tertiary) !important;
}

.main > .main_header > .secondary > .sidenav_toggle > .bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 2px !important;
    width: 16px !important;
    background-color: var(--font-color) !important;
    border-radius: 1px !important;
    transition: all 0.2s ease !important;
}

/* Force back button visibility */
.main > .main_header > .primary > .return_icon {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
}

/* Force page title visibility */
.main > .main_header > .primary > .container > .page_title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--font-color) !important;
    line-height: 1.2 !important;
}

/* Mobile specific overrides */
@media only screen and (max-width: 768px) {
    .main > .main_header {
        display: flex !important;
        padding: 10px 12px !important;
        min-height: 52px !important;
    }
    
    .main > .main_header > .secondary > .sidenav_toggle {
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
    }
    
    .main > .main_header > .secondary > .sidenav_toggle > .bar {
        width: 18px !important;
        height: 2px !important;
    }
}/* IPH
ONE SAFE AREA FIX - Position header below Dynamic Island */
.main > .main_header {
    top: 0 !important;
    padding-top: env(safe-area-inset-top, 12px) !important;
    margin-top: 0 !important;
}

/* Hide hamburger menu on desktop - only show on mobile */
@media only screen and (min-width: 769px) {
    .main > .main_header > .secondary > .sidenav_toggle {
        display: none !important;
    }
}

/* iPhone specific positioning */
@media only screen and (max-width: 768px) {
    .main > .main_header {
        position: sticky !important;
        top: 0 !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
        padding-bottom: 12px !important;
        margin-top: 0 !important;
        background: var(--bg-color) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }
    
    /* Ensure hamburger menu is visible on mobile */
    .main > .main_header > .secondary > .sidenav_toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Extra safe area handling for iPhone */
@supports (padding: max(0px)) {
    @media only screen and (max-width: 768px) {
        .main > .main_header {
            padding-top: max(env(safe-area-inset-top, 0px), 12px) !important;
        }
    }
}

/* PWA specific fixes for iPhone */
@media only screen and (max-width: 768px) and (display-mode: standalone) {
    .main > .main_header {
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
        background: rgba(var(--bg-color-rgb), 0.95) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    }
}/* IPHO
NE SIDEBAR SPACING FIX */
/* Move main navigation items closer to volume area */

@media only screen and (max-width: 768px) {
    /* Reduce the bottom margin of the main navigation content */
    .sidenav > .sidenav_wrapper > .sidenav_content {
        margin-bottom: 8px !important;
    }
    
    /* Ensure the footer (volume area) stays in place */
    .sidenav > .sidenav_wrapper > .sidenav_footer {
        position: sticky !important;
        bottom: 0 !important;
        margin-top: auto !important;
    }
    
    /* Tighten spacing between navigation items */
    .sidenav > .sidenav_wrapper > .sidenav_content > ul > li {
        margin-bottom: 2px !important;
    }
    
    /* Reduce padding in navigation links for tighter spacing */
    .sidenav > .sidenav_wrapper > .sidenav_content > ul > li > a {
        padding: 5px 10px !important;
    }
    
    /* Ensure the sidebar wrapper uses flexbox properly */
    .sidenav > .sidenav_wrapper {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Make sure content area doesn't take up too much space */
    .sidenav > .sidenav_wrapper > .sidenav_content {
        flex: 0 1 auto !important;
    }
}/*
 IPHONE SIDEBAR SAFE AREA FIX */
/* Ensure sidebar content is visible below the status bar */

@media only screen and (max-width: 768px) {
    /* Fix sidebar wrapper positioning to account for iPhone safe area */
    .sidenav > .sidenav_wrapper {
        padding-top: env(safe-area-inset-top, 0px) !important;
        top: 0 !important;
    }
    
    /* Ensure the header (logo) is visible */
    .sidenav > .sidenav_wrapper > .sidenav_header {
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
        padding-bottom: 8px !important;
        margin-bottom: 10px !important;
        background-color: var(--bg-color-secondary) !important;
    }
    
    /* Make sure the logo is properly sized and visible */
    .sidenav > .sidenav_wrapper > .sidenav_header > .logo {
        width: 48px !important;
        height: 48px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure navigation items are visible */
    .sidenav > .sidenav_wrapper > .sidenav_content {
        padding-top: 0 !important;
        margin-top: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Make sure individual nav items are visible */
    .sidenav > .sidenav_wrapper > .sidenav_content > ul > li {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure nav links are visible and properly sized */
    .sidenav > .sidenav_wrapper > .sidenav_content > ul > li > a {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        margin: 0 12px !important;
        padding: 6px 10px !important;
        border-radius: 6px !important;
    }
}

/* PWA specific fixes for iPhone sidebar */
@media only screen and (max-width: 768px) and (display-mode: standalone) {
    .sidenav > .sidenav_wrapper {
        padding-top: env(safe-area-inset-top, 20px) !important;
    }
    
    .sidenav > .sidenav_wrapper > .sidenav_header {
        padding-top: calc(env(safe-area-inset-top, 20px) + 12px) !important;
    }
}

/* Extra safe area support */
@supports (padding: max(0px)) {
    @media only screen and (max-width: 768px) {
        .sidenav > .sidenav_wrapper {
            padding-top: max(env(safe-area-inset-top, 0px), 20px) !important;
        }
        
        .sidenav > .sidenav_wrapper > .sidenav_header {
            padding-top: max(env(safe-area-inset-top, 0px) + 16px, 36px) !important;
        }
    }
}/*
 MOBILE DOWNLOAD BUTTON POSITIONING */
/* Move download buttons to the right side on mobile for easier interaction */

@media only screen and (max-width: 768px) {
    /* Restructure media item layout for mobile */
    .media-list .media-item {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        padding: 8px !important;
        margin: 0 -8px !important;
    }
    
    /* Position media details to take up most space */
    .media-list .media-item > .media-details {
        flex: 1 !important;
        min-width: 0 !important;
        margin-right: 8px !important;
    }
    
    /* Move download button container to the right side */
    .media-list .media-item .download-state-container {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-left: 0 !important;
        z-index: 10 !important;
    }
    
    /* Style the mobile download button */
    .media-list .media-item .simple-download-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--accent-color) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        min-width: 70px !important;
        min-height: 40px !important;
        gap: 2px !important;
    }
    
    .media-list .media-item .simple-download-btn:hover {
        background: var(--brand-color) !important;
        transform: scale(1.05) !important;
    }
    
    /* Style download progress indicator for mobile */
    .media-list .media-item .download-progress-indicator {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffc107 !important;
        color: #000 !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        min-width: 70px !important;
        min-height: 40px !important;
        gap: 4px !important;
    }
    
    /* Style download complete indicator for mobile */
    .media-list .media-item .download-complete-indicator {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: #28a745 !important;
        color: white !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        min-width: 70px !important;
        min-height: 40px !important;
        gap: 2px !important;
    }
    
    /* Style other download states for mobile */
    .media-list .media-item .download-status-indicator {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #6c757d !important;
        color: white !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        min-width: 70px !important;
        min-height: 40px !important;
    }
    
    /* Ensure media indicators don't interfere */
    .media-list .media-item > .media-indicators {
        margin-right: 90px !important;
    }
    
    /* Hide the inline download link on mobile */
    .media-list .media-item .simple-download-link {
        display: none !important;
    }
    
    /* Adjust spinner for mobile */
    .media-list .media-item .download-progress-indicator .spinner {
        width: 14px !important;
        height: 14px !important;
        border-width: 2px !important;
    }
}

/* Desktop - keep original inline positioning */
@media only screen and (min-width: 769px) {
    .media-list .media-item .download-state-container {
        position: static !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
    }
}/* C
OMPACT MOBILE DOWNLOAD BUTTONS - OVERRIDE */
/* Small circular buttons that don't interfere with song readability */

@media only screen and (max-width: 768px) {
    /* Override previous mobile download button styles */
    .media-list .media-item .download-state-container {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-left: 0 !important;
        z-index: 10 !important;
    }
    
    /* Compact circular download button */
    .media-list .media-item .simple-download-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--accent-color) !important;
        color: white !important;
        border: none !important;
        border-radius: 50% !important;
        padding: 0 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }
    
    .media-list .media-item .simple-download-btn:hover {
        background: var(--brand-color) !important;
        transform: scale(1.1) !important;
    }
    
    /* Compact circular progress indicator */
    .media-list .media-item .download-progress-indicator {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffc107 !important;
        color: #000 !important;
        border-radius: 50% !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    /* Compact circular complete indicator */
    .media-list .media-item .download-complete-indicator {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #28a745 !important;
        color: white !important;
        border-radius: 50% !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }
    
    /* Compact circular status indicator */
    .media-list .media-item .download-status-indicator {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #6c757d !important;
        color: white !important;
        border-radius: 50% !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }
    
    /* Ensure media details have full space */
    .media-list .media-item > .media-details {
        flex: 1 !important;
        min-width: 0 !important;
        margin-right: 4px !important;
        padding-right: 40px !important;
    }
    
    /* Adjust media indicators positioning */
    .media-list .media-item > .media-indicators {
        margin-right: 40px !important;
    }
    
    /* Compact spinner for progress */
    .media-list .media-item .download-progress-indicator .spinner {
        width: 10px !important;
        height: 10px !important;
        border-width: 1px !important;
        border-top-color: #000 !important;
        margin-bottom: 1px !important;
    }
    
    /* Show only essential text in progress */
    .media-list .media-item .download-progress-indicator {
        font-size: 8px !important;
        line-height: 1 !important;
    }
    
    /* Hide text in complete state, just show checkmark */
    .media-list .media-item .download-complete-indicator {
        font-size: 14px !important;
    }
}