/* ==========================================================================
   1. GLOBAL RESET & BASE THEME
   ========================================================================== */
body { 
    font-family: Arial, sans-serif; 
    background: #0f0f0f; 
    color: #fff; 
    margin: 0; 
    padding: 20px; 
}

/* Nav Header styling used on protected pages */
.nav-header { 
    max-width: 1100px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-bottom: 10px; 
    border-bottom: 1px solid #2d2d2d; 
}
.nav-header h1 { 
    font-size: 1.4em; color: #3b9eff; margin: 0; 
}
.logout-link { 
    color: #aaa; text-decoration: none; font-size: 0.9em; border: 1px solid #444; padding: 5px 12px; border-radius: 4px; 
}
.logout-link:hover { 
    color: #ff4d4d; border-color: #ff4d4d; 
}

h2, h3 { 
    margin: 0 0 15px 0; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; 
}
h2 { color: #3b9eff; text-align: center; }
h3 { font-size: 1.1em; color: #aaa; }

/* ==========================================================================
   2. FORMS & AUTHENTICATION CONTAINER (index.php)
   ========================================================================== */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 85vh;
}
.auth-container { 
    background: #1a1a1a; 
    padding: 30px; 
    border-radius: 8px; 
    border: 1px solid #2d2d2d; 
    width: 100%; 
    max-width: 380px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
}
.form-group { 
    margin-bottom: 15px; 
}
label { 
    display: block; margin-bottom: 5px; color: #aaa; font-size: 0.9em; 
}
input, select { 
    width: 100%; padding: 10px; background: #111; border: 1px solid #333; border-radius: 4px; color: #fff; box-sizing: border-box; font-size: 1em; 
}
input:focus, select:focus { 
    border-color: #3b9eff; outline: none; 
}
select option { 
    background: #1a1a1a; color: #fff; 
}
.toggle-text { 
    text-align: center; margin-top: 15px; font-size: 0.85em; color: #888; 
}
.toggle-text span { 
    color: #3b9eff; cursor: pointer; text-decoration: underline; 
}
.error-banner { 
    background: #721c24; border: 1px solid #f5c6cb; color: #f8d7da; padding: 10px; border-radius: 4px; font-size: 0.85em; margin-bottom: 15px; text-align: center; 
}

/* ==========================================================================
   3. APP DASHBOARD CORE STRUCTURE (dashboard.php)
   ========================================================================== */
.app-container { 
    display: flex; 
    max-width: 1100px; 
    margin: 20px auto; 
    gap: 20px; 
    align-items: flex-start; 
}
.search-column { 
    flex: 1; 
    background: #1a1a1a; 
    padding: 20px; 
    border-radius: 8px; 
    border: 1px solid #2d2d2d; 
}
.player-column { 
    flex: 1.2; 
    background: #1a1a1a; 
    padding: 20px; 
    border-radius: 8px; 
    border: 1px solid #2d2d2d; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

/* Tool Panels & Utility Layouts */
.input-row { 
    display: flex; gap: 10px; margin-bottom: 15px; 
}
.controls-panel { 
    display: flex; flex-direction: column; align-items: center; gap: 15px; background: #111; padding: 15px; border-radius: 6px; border: 1px solid #222; 
}
.progress-container { 
    width: 100%; display: flex; align-items: center; gap: 10px; font-size: 0.85em; color: #888; 
}
.progress-bar { 
    flex-grow: 1; height: 5px; background: #333; border-radius: 3px; cursor: pointer; position: relative; 
}
.progress-fill { 
    height: 100%; width: 0%; background: #3b9eff; border-radius: 3px; box-shadow: 0 0 8px #3b9eff; 
}
.buttons-row { 
    display: flex; align-items: center; gap: 15px; 
}

/* Button Elements */
.btn { 
    background: #222; border: 1px solid #333; color: #aaa; font-size: 1.2em; padding: 8px 14px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; 
}
.btn:hover { color: #fff; background: #2a2a2a; }
.btn-play { font-size: 1.8em; padding: 8px 20px; color: #fff; }
.btn-add { background: #004b9a; border: 1px solid #3b9eff; color: white; padding: 0 15px; border-radius: 4px; cursor: pointer; }
.btn-add:disabled { background: #222; border-color: #444; color: #666; cursor: not-allowed; }
.btn.active { 
    color: #fff; background: #004b9a; border-color: #3b9eff; box-shadow: 0 0 10px rgba(59, 158, 255, 0.4); 
}

/* Dynamic Track Layouts */
.list-wrapper { 
    overflow-y: auto; 
    max-height: 400px; 
    border: 1px solid #2d2d2d; 
    border-radius: 4px; 
    background: #111; 
    width: 100%;             /* FORCE wrapper to stay in the column lines */
    box-sizing: border-box;  /* Include border/padding inside the width calculation */
}

.track-list { 
    list-style: none; padding: 0; margin: 0; 
}
.track-item { 
    padding: 12px 15px; 
    border-bottom: 1px solid #222; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 10px; 
    background: #151515; 
    user-select: none; 
    width: 100%;             /* Forces the row to match the wrapper width */
    max-width: 100%;         /* Restricts it from ballooning outward */
    box-sizing: border-box;  /* Keeps internal padding from creating blowout */
}
.track-item:hover { background: #222; }

.queue-item { cursor: grab; }
.queue-item.active { 
    background: #1c2d42; color: #3b9eff; font-weight: bold; border-left: 4px solid #3b9eff; 
}
.queue-item.dragging { opacity: 0.4; background: #333; }
.drag-handle { color: #444; font-size: 1.1em; }
.btn-remove { background: none; border: none; color: #555; cursor: pointer; font-size: 1.1em; }
.btn-remove:hover { color: #ff4d4d; }

/* ==========================================================================
   4. ANIMATED LAUNCHER OVERLAY
   ========================================================================== */
.launcher-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0f0f0f;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.launcher-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.launcher-logo {
    font-size: 1.8em;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 30px;
    text-shadow: 0 0 15px rgba(59, 158, 255, 0.6);
    animation: pulseGlow 2s infinite ease-in-out;
}
.launcher-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    border-top-color: #3b9eff;
    border-right-color: #3b9eff;
    animation: spin 1s infinite linear;
    box-shadow: 0 0 15px rgba(59, 158, 255, 0.2);
}
.launcher-status {
    margin-top: 20px;
    font-size: 0.9em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes pulseGlow {
    0%, 100% { opacity: 0.8; text-shadow: 0 0 10px rgba(59, 158, 255, 0.4); }
    50% { opacity: 1; text-shadow: 0 0 25px rgba(59, 158, 255, 0.8); }
}

/* ==========================================================================
   5. MOBILE RESPONSIVE OVERRIDES
   ========================================================================== */
@media screen and (max-width: 768px) {
    body { padding: 10px; }
    .auth-wrapper { height: auto; margin-top: 40px; }
    
    .app-container { 
        flex-direction: column; 
        align-items: stretch;   
        margin: 10px auto;
        gap: 15px;
    }
    .search-column, .player-column {
        flex: none; width: 100%; box-sizing: border-box; 
    }
    .player-column { order: 1; }
    .search-column { order: 2; }
    .list-wrapper { max-height: 250px; }
}

/* ==========================================================================
   6. NOW PLAYING CONDITIONAL MARQUEE SYSTEM
   ========================================================================== */

.now-playing-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;

    margin-bottom: 5px;
    padding: 10px 14px;

    background: #151515;
    border: 1px solid #222;
    border-radius: 6px;

    display: block;

    /* CRITICAL FIX */
    min-width: 0;
}

#now-playing {
    display: block;

    margin: 0;

    font-size: 1.2em;
    font-weight: 600;
    color: #fff;

    text-transform: none;
    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    /* CRITICAL FIX */
    min-width: 0;
}

/* ONLY activate when JS detects overflow */
#now-playing.marquee-active {
    display: inline-block;
    width: max-content;
    min-width: 100%;

    padding-left: 100%;

    overflow: visible;
    text-overflow: unset;

    animation: skyboxMarqueeLoop 18s linear infinite;
}

/* Pause on hover */
.now-playing-container:hover #now-playing.marquee-active {
    animation-play-state: paused;
}

/* Smooth GPU scrolling */
@keyframes skyboxMarqueeLoop {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Prevent flex children from stretching entire dashboard */
.player-column {
    min-width: 0;
    overflow: hidden;
}

/* Queue item overflow protection */
.track-item {
    min-width: 0;
    overflow: hidden;
}

.track-item span {
    display: inline-block;     /* Gives the span a structured box format */
    max-width: 75%;            /* Restricts it so it leaves 25% room for your X button */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   7. DEDICATED ARTWORK PANEL SYSTEM
   ========================================================================== */

.media-hero {
    width: 100%;
    height: 220px;

    overflow: hidden;

    border-radius: 10px;
    border: 1px solid #222;

    background: #111;

    position: relative;

    box-sizing: border-box;
}

#track-art {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: opacity 0.35s ease;
}

/* ==========================================================================
   8. QUEUE TITLE OVERFLOW FIX
   ========================================================================== */

.track-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
    box-sizing: border-box;
}

.queue-click-zone {
    display: flex;
    align-items: center;
    gap: 10px;

    flex: 1;
    min-width: 0;

    overflow: hidden;
}

.track-title {
    flex: 1;
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-remove {
    flex-shrink: 0;

    width: 32px;
    min-width: 32px;

    text-align: center;
}