/* Optimized Palette */
$primary: #00FF41;    /* Matrix Green */
$accent: #008F11;     /* Deeper Emerald for contrast */
$bg-dark: #0A0A0A;    /* Pure black for depth */
$surface: #161616;    /* Dark slate for panels */

Screen {
    background: $bg-dark;
    color: #E0E0E0;
}

/* --- TOP SECTION --- */

#sidebar {
    width: 25%; /* Slightly narrower for a more modern look */
    height: 100%;
    background: $surface;
    border-right: $accent;
    margin: 1 0 0 1;
}

#sidebar-title {
    width: 100%;
    height: 3;
    content-align: center middle;
    text-style: bold;
    background: $accent;
    color: black;
}

#main-zone {
    width: 75%;
    height: 100%;
    border: double $accent;
    margin: 1 1 0 0;
    /* Centers the visualizer and song label perfectly */
    align: center middle; 
}

#Visualizer {
    width: 100%;
    height: 5;
    content-align: center middle;
    color: $primary;
}

#now-playing {
    width: 100%;
    content-align: center middle;
    text-style: bold italic;
    color: $primary;
    margin-top: 1;
}

/* --- FOOTER SECTION (The Fix) --- */

#footer-zone {
    layout: horizontal;
    height: 5;
    dock: bottom;
    background: $surface;
    /* This ensures children are vertically and horizontally centered */
    align: center middle; 
    padding: 0 4;
    border-top: $accent;
}

#progress {
    width: 60%; /* Fixed width ensures it stays centered between times */
    height: auto;
    /* Removes the default percentage text if it's cluttering the bar */
    content-align: center middle;
}

/* Smooth Progress Bar Colors */
ProgressBar > .progress--bar {
    color: $primary;
    background: $accent 30%; /* Subtle "track" color */
}

/* Smooth Percentage Label */
ProgressBar > .progress--percentage {
    color: $primary;
    text-style: bold;
    margin-left: 1;
}

#time-elapsed, #time-total {
    width: 10;
    text-align: center;
    color: $primary;
    text-style: bold;
}