/* ==========================================================================
   1. VARIABLES & THEME DEFINITIONS
   ========================================================================== */
:root {
    /* DEFAULT (DARK) THEME */
    --primary-color: #3c60ff;
    --primary-light: #CF66FF;
    --surface-color: #2D2D2D;
    --background-color: #121212;
    --text-color: #E0E0E0;
    --text-color-secondary: #B3B3B3;
    --shadow-small: 0 2px 4px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
    --shadow-medium: 0 4px 8px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
    --header-height: auto;
}

.light-mode {
    --primary-color: #1976D2;
    --primary-light: #42A5F5;
    --surface-color: #FFFFFF;
    --background-color: #F5F5F5;
    --text-color: #212121;
    --text-color-secondary: #757575;
    --shadow-small: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-medium: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

/* ==========================================================================
   2. GLOBAL STYLES
   ========================================================================== */
* { box-sizing: border-box; }

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
    overflow: hidden; 
}

h3 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--text-color-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   3. HEADER & MAIN CONTROLS
   ========================================================================== */
header#control-panel {
    background-color: var(--surface-color);
    box-shadow: var(--shadow-small);
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 !important;
    position: relative;
    border-bottom: 1px solid var(--text-color-secondary);
}

header#control-panel h2 {
    padding: 10px 15px 0 15px;
    margin: 0;
}

#play-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 10px;
}

/* Large Tablet-Friendly Buttons */
#play-controls .material-icon-button {
    width: 75px;
    height: 75px;
    background-color: var(--surface-color);
    border-radius: 8px;
    border: 1px solid var(--text-color-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
}

#play-controls .material-icon-button i.material-icons {
    font-size: 64px;
}

#play-pause-button {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

#master-volume-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 20px;
    margin-right: 20px;
}

#master-volume-slider {
    width: 300px;
    height: 24px;
    cursor: pointer;
    background: var(--text-color-secondary);
    border-radius: 4px;
    appearance: none;
}

#master-volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: var(--shadow-small);
}

#global-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    padding-right: 15px;
}

/* Progress Bar */
#progress-container {
    width: 100%;
    height: 24px; 
    background-color: #222;
    cursor: pointer;
    margin-top: auto;
    border-top: 1px solid var(--text-color-secondary);
}

#progress-bar {
    width: 0%;
    height: 100%;
    background-color: #4caf50;
    transition: width 0.1s linear, background-color 0.3s ease; 
}

/* ==========================================================================
   4. LAYOUT & PANELS
   ========================================================================== */
#app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#main-content {
    display: flex;
    flex-direction: row;
    flex: 1;
    padding: 10px;
    gap: 10px;
    overflow: hidden;
}

#lists-container {
    display: flex;
    flex-direction: column;
    flex: 3;
    gap: 10px;
    overflow: hidden;
}

#lists-split-top {
    display: flex;
    flex-direction: row;
    flex: 1; /* Takes up all available height above the pad */
    gap: 10px;
    min-height: 0; /* Critical for scrolling */
}

#right-sidebar-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 250px;
    max-width: 300px;
    gap: 10px;
}

.panel {
    background-color: var(--surface-color);
    border-radius: 8px;
    box-shadow: var(--shadow-small);
    padding: 15px;
    overflow-y: auto;
    min-height: 0;
    border: 1px solid var(--text-color-secondary);
}

/* ==========================================================================
   5. COMPONENT: BUTTONS & INPUTS
   ========================================================================== */
.material-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: var(--shadow-small);
    transition: background-color 0.2s, box-shadow 0.2s;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.material-button:hover {
    background-color: var(--primary-light);
    box-shadow: var(--shadow-medium);
}

.material-icon-button {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
}

.material-icon-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Theme Toggle */
.theme-switch {
    display: flex;
    align-items: center;
    gap: 10px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--text-color-secondary);
    transition: 0.4s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px; width: 16px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(24px); }

/* ==========================================================================
   6. PLAYLIST PANEL (High Specificity Fix)
   ========================================================================== */
#playlist-panel {
    flex: 1;
    min-width: 0;
}

#playlist-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Use High Specificity ID selector to ensure grid override works */
#playlist-list .playlist-item {
    display: grid !important;
    /* Col 1: Content (flexible), Col 2: Reorder Buttons (fixed) */
    grid-template-columns: 1fr 40px;
    /* Row 1: Title, Row 2: Controls */
    grid-template-rows: auto auto; 
    
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--text-color-secondary);
    background-color: var(--background-color);
    transition: background-color 0.2s;
}


#playlist-list .playlist-item.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-small);
}
#playlist-list .playlist-item.active .material-icons,
#playlist-list .playlist-item.active label {
    color: white; 
}

/* 1. Title: Row 1, Column 1 */
#playlist-list .playlist-item .playlist-title {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 1.1em;
    padding-bottom: 5px;
    
    /* Ensure wrapping */
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* 2. Controls: Row 2, Column 1 */
#playlist-list .playlist-item .playlist-controls {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    font-size: 13px;
    justify-content: flex-start;
    
    border-top: 1px dashed var(--text-color-secondary);
    padding-top: 8px;
    opacity: 0.9;
}

/* 3. Reorder: Row 1 & 2 (Span), Column 2 */
#playlist-list .playlist-item .playlist-reorder-controls {
    grid-column: 2 / 3;
    grid-row: 1 / 3; /* Spans both rows on the right */
    
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    height: 100%;
    
    border-left: 1px solid var(--text-color-secondary);
    padding-left: 5px;
}

#playlist-list .playlist-item .playlist-reorder-controls .material-icon-button {
    width: 24px;
    height: 24px;
}

/* Inputs */
#playlist-list .playlist-item .playlist-controls input[type="number"],
#playlist-list .playlist-item .playlist-controls input[type="checkbox"] {
    padding: 4px;
    background-color: var(--surface-color);
    border: 1px solid var(--text-color-secondary);
    color: var(--text-color);
    border-radius: 3px;
}
#playlist-list .playlist-item .playlist-controls input[type="number"] {
    width: 50px;
    text-align: center;
}

/* Drag Styling */
.playlist-item.dragging {
    opacity: 0.5;
    background-color: var(--surface-color-hover);
    border: 2px dashed var(--primary-color);
}

.drop-placeholder {
    height: 10px;
    background-color: var(--primary-light);
    border: 1px solid var(--primary-color);
    margin: 8px 0;
    border-radius: 2px;
}

/*SHOW NOTES*/
#show-notes-panel {
    flex: 1; /* Share width 50/50 with playlist */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#show-notes-area {
    flex: 1; /* Fill the panel */
    width: 100%;
    background-color: transparent; /* Seamless look */
    color: var(--text-color);
    border: none;
    resize: none; /* User shouldn't resize manualy */
    font-family: 'Roboto', sans-serif; /* Clean font */
    font-size: 1.2em; /* Large, readable text */
    line-height: 1.5;
    padding: 10px 5px;
    outline: none; /* Remove blue focus glow */
}

#show-notes-area::placeholder {
    color: var(--text-color-secondary);
    opacity: 0.5;
}

/* --- Show Notes Header Styling --- */
.notes-header {
    display: flex;
    justify-content: flex-start; /* Groups Title and Buttons on the left */
    align-items: center;
    gap: 15px; /* Adds space between the "Set Notes" text and the buttons */
    border-bottom: 1px solid var(--text-color-secondary);
    padding-bottom: 5px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.notes-header h3 {
    border-bottom: none; 
    margin: 0;
    padding: 0;
    /* Ensures the header text doesn't accidentally block the buttons */
    line-height: 1; 
}

/* (The rest of your button styles remain the same) */
.font-control-wrapper {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0.8;
}

.small-icon-button {
    width: 28px;
    height: 28px;
    background-color: var(--background-color);
    border: 1px solid var(--text-color-secondary);
    color: var(--text-color);
    border-radius: 4px; /* Matches the rest of the UI */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.small-icon-button:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.small-icon-button i {
    font-size: 16px;
}

/* ==========================================================================
   7. MEDIA PAD (Horizontal Strip Fix)
   ========================================================================== */

#media-pad-panel {
    flex: 0 0 auto;
    height: 180px;  /* Fixed height for the strip */
    display: flex;
    flex-direction: column;
    padding: 10px; /* Slightly reduced padding to maximize space */
}

/* Reduce header spacing specifically for this compact panel */
#media-pad-panel h3 {
    margin-bottom: 5px; 
    padding-bottom: 5px;
}

#media-pad-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding: 0 0 5px 0; /* Space for scrollbar */
    flex: 1; /* Grid takes all remaining height */
    
    /* CRITICAL FIX: Stretch items to full height to ensure uniformity */
    align-items: stretch; 
}

.media-pad-item-container {
    position: relative;
    min-width: 160px;
    width: 160px;
    
    /* Layout: Vertical Stack */
    display: flex;
    flex-direction: column;
    gap: 4px;
    
    /* Ensure it respects the parent's stretch */
    height: auto; 
}

.media-pad-button {
    /* CRITICAL FIXES for Height */
    height: auto;   /* Remove fixed pixel height */
    flex: 1;        /* Grow to fill all available space */
    min-height: 0;  /* Allow shrinking if text is very long */
    
    /* Text centering */
    display: flex;
    justify-content: center;
    align-items: center;
    
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
}

.pad-mode-selector {
    /* Keep selector fixed size at bottom */
    flex: 0 0 auto; 
    height: 28px;
    font-size: 12px;
}

.media-pad-button:hover {
    background-color: #616161;
    box-shadow: var(--shadow-medium);
}

.media-pad-button[data-mode="over"] { background-color: #3F51B5; } 
.media-pad-button[data-mode="stop"] { background-color: #424242; }

.media-pad-button.is-playing {
    background-color: #4CAF50 !important;
    border-color: #81C784;
    animation: pulse-border 1.5s infinite;
}

.remove-pad-item {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    z-index: 10;
    border-radius: 0 0 0 4px;
}
.remove-pad-item:hover { background-color: red; }

/* ==========================================================================
   8. DEFAULT DISPLAY PANEL
   ========================================================================== */
#default-display-panel {
    min-height: 250px;
    display: flex;
    flex-direction: column;
}

#default-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
#default-panel-header h3 {
    border-bottom: none;
    margin: 0;
    padding: 0;
}

#default-media-dropzone {
    flex: 1;
    border: 2px dashed var(--text-color-secondary);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    background-color: #000;
    overflow: hidden;
}

#default-media-dropzone.drag-over {
    border-color: var(--primary-color);
    background-color: rgba(187, 134, 252, 0.1);
}

#default-media-dropzone img,
#default-media-dropzone video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    z-index: 1;
}

#default-display-text {
    position: relative;
    z-index: 2;
    color: var(--text-color-secondary);
    font-style: italic;
}

/* ==========================================================================
   9. MEDIA LIBRARY & LISTS
   ========================================================================== */
#media-library-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--text-color-secondary);
    padding-bottom: 5px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.library-header h3 {
    border-bottom: none;
    margin: 0;
}

#media-library-list {
    overflow-y: auto;
    flex: 1;
}

.media-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.media-list li {
    padding: 8px;
    margin-bottom: 4px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.1s;
    overflow: hidden;
}

.media-list li:hover {
    background-color: rgba(0,0,0,0.05);
}

.media-list li > div:first-child {
    flex: 1;
    min-width: 0;
    margin-right: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.media-list li > div:first-child span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.media-controls {
    display: flex;
    gap: 8px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ==========================================================================
   10. MODALS & UTILS
   ========================================================================== */
.mapping-active {
    background-color: var(--primary-color) !important;
    color: white !important;
    animation: mapping-pulse 1s infinite;
}

@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

@keyframes mapping-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ==========================================================================
   SCROLLBAR STYLING
   ========================================================================== */

/* Firefox Standard */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--text-color-secondary) var(--surface-color);
}

/* WebKit (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
    width: 10px;      /* Vertical scrollbar width */
    height: 10px;     /* Horizontal scrollbar height */
}

*::-webkit-scrollbar-track {
    background: transparent; /* Seamless background */
    margin: 4px 0;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--text-color-secondary); /* Handle color */
    border-radius: 10px; /* Fully rounded handle */
    border: 2px solid var(--surface-color); /* Creates visual "padding" */
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color); /* Interactive highlight color */
}

/* Corner where horizontal and vertical scrollbars meet */
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ==========================================================================
   SHOW CLOCK STYLES
   ========================================================================== */
/* --- Add this to your style.css --- */

/* Wrapper to stack Clock and Notes vertically */
#right-column-stack {
    display: flex;
    flex-direction: column;
    flex: 1;        /* Take up 50% width (same as playlist) */
    gap: 10px;      /* Space between Clock and Notes */
    min-width: 0;   /* Prevent flex overflow */
    min-height: 0;  /* Critical for scrolling */
}

/* Update Clock Panel to look like a main panel */
#show-clock-panel {
    /* Remove previous margin (handled by gap now) */
    margin-bottom: 0; 
    
    /* Ensure it doesn't grow, just takes needed space */
    flex: 0 0 auto;
    
    /* Flex layout for the content inside (Time Left, Controls Right) */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#clock-display {
    font-family: 'Digital-7 Mono', monospace; /* Digital Segment-style font */
    font-size: 80px;                 /* Much larger */
    line-height: 1;                  /* Tighter vertical spacing */
    color: #ff3333;                  /* Bright LED Red */
    /*ext-shadow: 0 0 10px rgba(255, 0, 0, 0.6); /* Red Glow Effect */
    letter-spacing: 4px;
    padding-left: 10px;
    
    /* Ensure it doesn't jump around when numbers change */
    min-width: 220px; 
    text-align: center;
}

#clock-controls {
    display: flex;
    gap: 8px;
}

#clock-controls .material-icon-button {
    width: 32px;
    height: 32px;
}

/* Light Mode Override for Clock */
.light-mode #clock-display {
    color: var(--primary-color);
}

/* --- WAVEFORM STYLES --- */
#waveform-canvas {
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.2); /* Darker background for contrast */
    display: block; /* Removes inline spacing gaps */
    border-top: 1px solid var(--text-color-secondary);
    cursor: crosshair; /* Hint that it represents precision */
}

/* ==========================================================================
   FIXED PLAYLIST HEADER STYLES
   ========================================================================== */

/* 1. Turn the panel into a Flex Column */
#playlist-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Disable the default panel scrollbar */
}

/* 2. Define the Header (Fixed at top) */
.playlist-header {
    flex: 0 0 auto; /* Don't grow or shrink */
    margin-bottom: 5px;
    
    /* Optional: Add a subtle border to separate it from the moving list */
    border-bottom: 1px solid var(--text-color-secondary); 
}

/* Remove the default border from the H3 since the wrapper now handles it */
.playlist-header h3 {
    border-bottom: none;
    margin-bottom: 5px;
    padding-bottom: 0;
}

/* 3. Make the List take all remaining space and scroll */
#playlist-list {
    flex: 1;            /* Grow to fill space */
    overflow-y: auto;   /* Scroll ONLY this element */
    min-height: 0;      /* Critical Flexbox fix for scrolling */
    
    /* Optional: Add some padding at the bottom so the last item isn't tight */
    padding-bottom: 10px; 
}

/* Add to style.css */

/* Blackout Button Active State */
#blackout-button.active {
    background-color: #f44336 !important; /* Red */
    color: white !important;
    border-color: #d32f2f !important;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(244, 67, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
}