/* =========================================
   AUDIO PLAYER DESIGN SYSTEM
   ========================================= */
:root {
    --row-color-1: #ffffff; /* Row Color 1: White */
    --row-color-2: #f4f4f4; /* Row Color 2: Light Gray */
    
    --bg-color: #eef2f5;
    --container-bg: #ffffff;
    --text-color: #333333;
    --active-bg: #ffd700; /* Gold highlight for playing track */
    --border-color: #dddddd;
}

/* Dark Mode Overrides */
body.dark-theme {
    --bg-color: #121212;
    --container-bg: #1a1a1a;
    --text-color: #e0e0e0;
    --border-color: #333333;
    /* Dimming alternating colors for dark mode readability */
    --row-color-1: #1e1e1e; 
    --row-color-2: #252525;
    --active-bg: #b8860b; 
}

/* Base Styles */
body { 
    font-family: Arial, sans-serif; 
    max-width: 650px; 
    margin: 40px auto; 
    padding: 20px; 
    background: var(--bg-color); 
    color: var(--text-color); 
    transition: background 0.3s, color 0.3s; 
}
.player-container { 
    background: var(--container-bg); 
    padding: 25px; 
    border-radius: 8px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    text-align: center; 
    transition: background 0.3s; 
}

/* App Branding */
.audio-branding { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto 22px auto; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); text-decoration: none; }
.audio-branding-logo { width: 78px; height: auto; flex: 0 0 auto; display: block; object-fit: contain; }
.audio-branding-banner { max-width: min(100%, 460px); height: auto; display: block; object-fit: contain; }
@media (max-width: 520px) {
    body { margin: 16px auto; padding: 12px; }
    .player-container { padding: 18px 14px; }
    .audio-branding { gap: 10px; margin-bottom: 18px; padding-bottom: 14px; }
    .audio-branding-logo { width: 54px; }
    .audio-branding-banner { max-width: calc(100% - 64px); }
}

@media (max-width: 375px) {
    .player-container .theme-toggle {
        padding: 8px 5px !important;
    }
}


/* Header & Controls */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.track-title { font-weight: bold; color: #007bff; word-break: break-all; font-size: 1.2em; margin: 0; display: none; opacity: 0; transition: opacity 0.4s ease; }
.track-title.player-active { display: block; opacity: 1; }
.theme-toggle { background: #333; color: #fff; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 0.9em; margin-left: auto; }
body.dark-theme .theme-toggle { background: #f4f4f9; color: #333; }

.search-bar { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1em; box-sizing: border-box; background: var(--container-bg); color: var(--text-color); }
audio { width: 100%; margin: 10px 0 20px 0; outline: none; display: none; opacity: 0; transition: opacity 0.4s ease; }
audio.player-active { display: block; opacity: 1; }

/* Breadcrumbs */
.breadcrumbs { text-align: left; margin-bottom: 15px; padding: 10px; background: rgba(0,0,0,0.05); border-radius: 4px; font-size: 0.9em; border: 1px solid var(--border-color); }
.bc-link { color: #007bff; cursor: pointer; text-decoration: none; font-weight: bold; }
.bc-link:hover { text-decoration: underline; }

/* Playlist */
.playlist { list-style: none; padding: 0; margin: 0; text-align: left; max-height: 400px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 4px; }
.playlist li { padding: 12px 10px; cursor: pointer; display: flex; justify-content: flex-start; align-items: center; gap: 10px; color: var(--text-color); }

/* Alternating Row Colors using CSS Variables */
.playlist li:nth-child(odd) { background-color: var(--row-color-1); }
.playlist li:nth-child(even) { background-color: var(--row-color-2); }

/* Active Track Override */
.playlist li.active { background-color: #0d6b3f !important; font-weight: bold; color: #fff !important; border-left: 5px solid #064c2d; }
.playlist li:hover { opacity: 0.8; }

.folder-icon { font-size: 1.2em; }
.file-icon { font-size: 1.2em; opacity: 0.8; }
.hidden { display: none !important; }

/* Alternating text colors on playlist rows */
.player-container .playlist li .item-text, ul.playlist li .item-text { flex: 1; font-weight: 900 !important; }
.playlist li:nth-child(odd) .item-text { color: #0d6b3f !important; font-weight: 900 !important; }
.playlist li:nth-child(even) .item-text { color: #00b0f0 !important; font-weight: 900 !important; }
.playlist li.active .item-text { color: #ffffff !important; }
body.dark-theme .playlist li:nth-child(odd) .item-text { color: #0d6b3f !important; }
body.dark-theme .playlist li:nth-child(even) .item-text { color: #00b0f0 !important; }
body.dark-theme .playlist li.active .item-text { color: #ffffff !important; }

/* Action Button Styles */
.action-btn { background: none; border: none; cursor: pointer; color: var(--text-color); opacity: 0.5; margin-left: auto; transition: opacity 0.2s; padding: 5px; display: flex; align-items: center; justify-content: center; }
.action-btn:hover { opacity: 1; }
.action-btn svg { width: 18px; height: 18px; }