/* style.css */

/* --- GRUNDLAGEN --- */
body {
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: white;
    background-color: #000;
}

/* Header fixed */

#header-fixed-wrapper {
    position: fixed;
    top: -8px;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #000; /* Verhindert das Durchscheinen der Realität beim Scrollen */
    padding: 10px 20px;
    box-sizing: border-box;
    /* border-bottom: 2px solid #222; */ /* Eine feine Linie zur Abgrenzung Eurer Macht */
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
	margin-top: 5px;
	margin-bottom: -6px;
    margin: 0; 
}

/* Form-Elemente */

/* --- DROP-DOWN RESTAURATION (Exakt wie Vorher.png) --- */
#drive-select {
    background-color: #2f1800;
    color: #ffcc66; 
    border: 1px solid #ff9900;
    padding: 10px;
    padding: 4px 8px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    width: 250px;
	/* width: auto;  */
    /* max-width: 300px; */
}

#drive-select option {
    background: #2f1800;
    color: #fff;
}

#drive-select:focus {
    border-color: #ff9900;
    outline: none;
}

#app-container {
    max-width: 1900px;
    width: 100%;
    margin: 0 auto;
    margin-top: -15px;
    padding-bottom: 160px;
}

.main-layout {
	display: flex; gap: 20px;
    display: flex;
    gap: 20px;
    height: calc(112vh - 250px); /* Nutzt fast die gesamte Höhe minus Header/Player */
    overflow: hidden; /* Verhindert das Rollen der gesamten Seite */
    margin-top: 79px;
}

.explorer-side, .playlist-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%; /* Füllt die main-layout Höhe aus */
}

h1 {
    text-align: center;
    color: #0af;
    margin-bottom: 30px;
    font-size: 15px;
}

h2 {
    border-bottom: 2px solid #333;
    padding-bottom: 4px;
    margin-bottom: 2px;
    color: #0af;
    font-size: 16px;
}

h3 {
    margin-top: 6px;
    margin-bottom: 3px;
    color: #ffa700;
    font-size: 16px;
	background-color: #1a1b3d;
}

h4 {
	margin-top: 10px;
    margin-bottom: 2px;
    color: #ff9422;
}

/* --- KARTEN / CONTAINER --- */

.card {
    background: #000;
    /* border: 1px solid #222; */
    padding: 0px;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* Playlist bereinigen */

.purge-btn:hover {
    background: #800000 !important; /* Ein tiefes Blutrot bei Annäherung */
    border-color: #ff4444 !important;
    color: #fff !important;
}

/* --- FORMULARELEMENTE --- */
label {
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
    /* cursor: pointer; */
}

input[type="text"], select {
    /* width: 100%; */
    padding: 0px;
    margin-top: 5px;
    box-sizing: border-box;
    background-color: #390800;
    border: 1px solid #dd8500;
    color: #ffa27e;
    /* border-radius: 4px; */
    height: 25px;
    font-size: 15px;
    font-weight: 700;
}

input[type="text"]:focus {
    border: 1px solid #ff0080;
    outline: none;
    background-color: #4d0227;
    width: 60px !important;
}

select:focus {
    border: 1px solid #ff0080;
    outline: none;
    background-color: #4d0227;
    width: 172px !important;
}




/* Getrenntes Rollen */

/* Explorer-Look */
.explorer-container { background: #000; /* border: 1px solid #1a1a1a; */ }

.explorer-container, #playlist-zone {
    flex: 1;
    overflow-y: auto; /* Aktiviert den unabhängigen Scrollbalken */
    padding-right: 5px;
    padding-bottom: 150px !important; /* Großzügiger Freiraum, damit nichts am Player klebt */
    box-sizing: border-box;
}

/* Ein schönerer Scrollbar */
.explorer-container::-webkit-scrollbar, #playlist-zone::-webkit-scrollbar {
    width: 8px;
}
.explorer-container::-webkit-scrollbar-thumb, #playlist-zone::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

.file-row { 
    display: flex; 
    /* display: grid; */
    grid-template-columns: 60px 80px 1fr 1fr; 
    font-size: 0.9em;
    background: #0a0a0f; 
    border-bottom: 1px solid #1a1a2a; 
    border-radius: 3px;
    align-items: center; 
    padding: 4px 0;
    padding: 6px 10px 6px 30px; 
    color: #ff9814; 
    margin: 2px 0;
}

.folder-row { 
    background: linear-gradient(to bottom, #2a1a0a, #1a0a00);
    border: 1px solid #3d2b1f; 
    margin: 2px 0; 
    display: flex; 
    align-items: center; 
    cursor: pointer; 
    padding: 0px; 
    color: #dd9300; 
    font-weight: bold;
    height: 33px;
}

.file-row:hover { background: #151525; }

.add-folder-icon {color: #b1a01a;font-size:26px;font-weight: 700;margin-top: -8px;}

.add-song-icon {color: #1bad7f;font-size:26px;font-weight: 700;margin-top: -12px;}

.play-btn {background: transparent;color: #0070ff;/* font-size:26px; */font-weight: 700;margin-top: -8px;}

.add-btn {background: transparent;color: #ff0;}

.purge-btn {margin-left: -20px;}

.sub-content { margin-left: 20px; border-left: 1px solid #b57500; display: none; }
.icon { width: 24px; margin-right: 10px; text-align: center; }
.name-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* OrdnerAnsicht Icons */

/* Erzwungene Symmetrie für die Button-Container */
.action-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Rechtsbündig ausrichten */
    gap: 0; /* Wir steuern den Platz über die Slots */
}

/* Die Buttons selbst neutralisieren */
.action-btns button {
	color: #0070ff;
    background: none !important;
	font-size: 26px;
    border: none !important;
	border-radius: 3px;
    padding: 0 !important;
	padding: 4px 10px;
    margin: 0 !important;
	margin-left: 5px;
    cursor: pointer;
    width: 100%;
    height: 100%;
	height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-folder-icon:hover, .add-song-icon:hover, .play-btn:hover, .add-btn:hover {color:#ff0000;}

/* Playlist-Grid */
.Playlist_Header {
	background-color:#1a1b3d;
	width: 949px;
}

#playlist-zone { min-height: 200px; width: 100%; background-color: #000; margin-top: 6px; }

/* Der High-End Container-Fix */
.playlist-item {
    display: grid !important; 
    display: flex !important;
    grid-template-columns: 50px 70px 1fr 50px; 
    background: #000; 
    align-items: center !important;
    width: 100%;
    height: 45px;
    padding: 4px 0;
    margin-bottom: 3px; 
    outline: none !important;
}

.playlist-item,
.mode-btn,
button,
label {
    user-select: none;
}

.active-track {
    border: 1px solid #d37500 !important;
    background: #2d0000 !important;
}

/* --- SORTABLEJS SPEZIAL-KLASSEN --- */

/* Platzhalter im DOM (wo das Element landen wird) */
.sortable-ghost {
    visibility: hidden !important; opacity: 0.3; background: #00ffcc !important;
}

/* Das Element, das gerade "fliegt" */
.sortable-drag {
    position: fixed !important; 
    pointer-events: none;
    background-color: #0f3d2e !important;
    color: #eafff3 !important;
    opacity: 1 !important;
    border: 2px solid #2ecc71;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.8),
        0 0 25px rgba(46, 204, 113, 0.8);
    z-index: 9999;
}

/* Das ausgewählte Element im Hintergrund */
.sortable-chosen {
    opacity: 1 !important;
    background-color: #002601 !important;
}



/* Medien Player */

/* Controls & Buttons */
.video-controls { display: flex; flex-direction: column; padding: 0 2%; }

/* Die oberste Reihe im Footer als Flex-Container */
.top-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 15px !important;
    padding: 5px 10px !important;
	margin-bottom: 5px;
}

.buttons { display: flex; gap: 8px; }

.btn-ctrl, .play-pause, .stop, .mute, .vol-dec, .vol-inc, .pip-button {
    background: #222;
    border: 1px solid #444;
    color: #ffcc00;
    padding: 5px 12px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 3px;
}

.btn-ctrl:hover { border-color: #00ffcc; color: #00ffcc; }

.time-container { color: #49cbff; font-family: monospace; font-size: 20px; margin-right: 10px; }

/* Der Fortschritt - ZUSTAND 1: BLAU */
.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #f28900;
    width: 0%;
    z-index: 2;
}

/* Der Cache (Buffer) - ZUSTAND 2: PINK */
.progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #b8000d; 
    width: var(--cache-width, 0%); /* Wird vom JS gesteuert */
    z-index: 1;
}

/* Die Innovative SeekBar */
.progress {
    width: 96%;
    height: 12px;
    background: #3963ff; /* ZUSTAND 3: ORANGE (Hintergrund/Rest) */
    margin: 10px auto;
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
}

/* --- PLAYER-STIL --- */
/* Player-Bar */

#player-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 76px;
    background: #000;
    padding: 10px 0;
    border-top: 0px solid #00ffcc;
    z-index: 9999;
}

.btn-skip {
    background: #222; border: 1px solid #444; color: #00ffcc;
    padding: 4px 12px; cursor: pointer; font-size: 14px; border-radius: 2px;
}

.btn-skip {
    padding: 8px 12px;
    cursor: pointer;
    background: #222;
    border: 1px solid #444;
    color: #00ffcc;
    border-radius: 2px;
}

.btn-skip {
    padding: 0px 8px;
    background: #222;
    border: 1px solid #444;
    color: #fd9c1e;
    cursor: pointer;
    font-weight: bold;
}

.btn-skip:hover { background: #333; border-color: #00ffcc; }

.btn-skip:hover {
    background: #333;
}

audio {width: 90%; height: 32px; }

/* TV-Style Volume OSD */
.volume-display {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid #444;
    color: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    min-width: 150px;
}

/* .volume-bar-inner {
    height: 4px;
    background: #00ffcc;
    margin-top: 8px;
    width: 0%;
    transition: width 0.1s;
} */

/* Video */

#Video_Container {
    position: fixed;
    top: 51%; left: 50%;
    width: 100vw;
    height: calc(108vh - 180px); 
    /* z-index: 5000; */
    display: none;
    background: #000000; 
    justify-content: center;
    align-items: center;
    pointer-events: none;
    overflow: hidden;
            transform: translate(-50%, -50%);
}

/* Diese Klasse wird nur bei Videos aktiv */
#Video_Container.active {
    display: flex;
}

#main-player {
    pointer-events: auto; /* ...außer auf das Video selbst! */
    width: 108%;
    height: 108%;
    /* Das Geheimnis: Das Video füllt den Platz aus, behält aber sein Seitenverhältnis */
    object-fit: contain; 
    /* box-shadow: 0 0 30px rgba(0, 210, 255, 0.2); */
}

/* ============================================================
   VORSCHAU-STRUKTUR (DRAG-AND-DROP) - GÖTTLICHE EDITION
   ============================================================ */

.draggable-list {
    display: flex;
    flex-direction: column;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.list-header {
    display: grid;
    grid-template-columns: 50px 70px 1fr 50px;
    font-weight: bold;
    /* color: #fff; */
    /* border-bottom: 2px solid #00ffcc; */
    padding-bottom: 8px;
}

/* Kopfzeile der Vorschau - Synchronisiert auf 60px Griffbereich */
.list-header {
    display: grid;
    grid-template-columns: 60px 80px 1fr 1fr; /* 60px Greifraum | Typ | Vorher | Nachher */
    font-weight: bold;
    /* border-bottom: 2px solid #555; */
    padding: 5px 0;
    margin-bottom: 5px;
}

.list-header {
    display: grid;
    grid-template-columns: 50px 70px 1fr 50px;
    font-weight: bold;
    color: #a9dd25;
    /* border-bottom: 2px solid #00ffcc; */
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 1px;
}


/* Einzelne Zeile in der Vorschau */


/* Nur verschiebbare Elemente */
.draggable-item {
    cursor: grab;
    background-color: #0e0707;
    border: 1px solid #471a00;
    transition: background-color 0.1s ease;
}

/* Gesamte Zeile hervorheben bei Hover */
.draggable-item:hover {
    /* background-color: #1e0d35; */
    /* background-color: #0f3d2e !important; */
    /* color: #eafff3 !important; */
    opacity: 1 !important;
    border: 2px solid #ffa500;
    box-shadow: 0 0 0 1px rgb(255 177 0), 0 0 25px rgb(255 165 0);
    z-index: 9999;
}

/* --- DER GRIFF (DIE GREIFZONE) --- */
.drag-handle { cursor: grab; text-align: center; color: #00ffcc; font-size: 20px; }

.drag-handle {
    display: block;
    width: 100%;       /* Nutzt die vollen 60px der Grid-Spalte */
    height: 100%;      /* Füllt die Zeilenhöhe aus */
    text-align: center;
    color: #5681ff;       /* Startfarbe: Gelb */
    font-size: 33px;
    cursor: grab;
    transition: all 0.2s ease;
}

.drag-handle:hover {color: #ff0;}

/* Sofortiger Glow beim Hover über die 60px-Zone */
.draggable-item:hover .drag-handle {
    color: #00ff00; /* Wechselt zu Grün */
    text-shadow: 
        0 0 8px #00ff00, 
        0 0 20px #00ff00;
}

/* Während des tatsächlichen Greifens (Active/Grabbed) */
.drag-handle:active, 
.sortable-drag .drag-handle {
    cursor: grabbing;
    color: #00ff00;
    background-color: rgba(0, 255, 0, 0.05); /* Dezentes Leuchten der Zone */
    text-shadow: 
        0 0 10px #00ff00, 
        0 0 25px #00ff00;
}

/* Statische Elemente (Ordner oder Dateien ohne Nummerierung) */
.static-item {
    cursor: default;
    background-color: #050112;
    border: none;
}

/* Spalten-Styling */

.col-type { color: #00ffcc; font-style: italic; font-size: 0.9em; text-align: center; }

.col-type {
    padding-left: 5px;
    font-style: italic;
    color: #00ffbb;
}

.col-old {
    color: #ffbf00;
}

.col-new {
    color: #00bf00;
    font-weight: 500;
}

.col-name { 
    flex: 1 1 auto !important; /* Nimmt sich den Platz, schrumpft aber nicht unter den Inhalt */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
    padding: 0 10px; cursor: pointer; color: #b8dd2c; 
}

.col-name:hover { color: #ffca00; }

.eq-flyout {
    position: fixed;
    top: 48.2%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 10001;
    background: #000;
    /* border-top: 2px solid #ed5700;
    border-left: 2px solid #ed5700;
    border-right: 2px solid #bb7900;
    border-bottom: 2px solid #bb7900; */
border-radius: 13px 13px 13px 13px;
    padding: 30px;
    display: none;
box-shadow: 0px 6px 10px -1px rgba(204, 0, 0, 1), 1px -3px 10px 2px rgba(250, 133, 0, 1);
    pointer-events: auto;
    min-width: 800px;
}

.eq-flyout.active {
    display: block;
    transform: translate(-50%, -50%) scale(1);
}

/* 28 Fach EQ Styles  */


/* Der Container mit Skalen-Hintergrundbild und Knöpfen */
.eq-container {
    display: flex;
    gap: 0; 
    padding: 20px;
    /* HIER DAS HINTERGRUNDBILD (Skala/Raster) EINTRAGEN */
    background:  url('../images/EQ_Skala_BG_Standard.png') no-repeat center center;
    background-size: cover; 
    /* border: 1px solid #00f2ff; */
    border-radius: 8px;
    justify-content: center;
    align-items: center; 
    min-height: 250px; 
}

.eq-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55px; /* Eure gewählte Breite für perfekte Abstände */
    height: 220px; 
    justify-content: flex-end;
    background: transparent; /* Muss transparent sein, damit man die Skala sieht! */
    color: #ffcc00;
}

/* Der Slider-Pfad (Track) - Wir machen ihn unsichtbar, damit nur Euer Bild zählt */
.eq-slider input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 200px;
    height: 6px;
    background: rgba(255, 255, 255, 0.05); /* Nur ein Hauch von Grau, oder 'transparent' */
    border-radius: 3px;
    outline: none;
    transform: rotate(-90deg);
    margin: 95px -85px; 
    cursor: pointer;
}

/* DER GÖTTLICHE PNG-KNOPF (Chrome, Edge, Safari) */
.eq-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 32px; /* Passt die Größe an Euer PNG an */
    width: 32px;
    /* HIER DAS PNG FÜR DEN REGLERKNOPF EINTRAGEN */
    background: url('../images/Slider_Knopf_Standard.png') no-repeat center center;
    background-size: contain;
    border: none; /* Keine hässlichen Standard-Ränder mehr */
    box-shadow: none; /* Falls Euer Bild bereits Schatten hat */
    transition: transform 0.1s ease-in-out;
}

/* PNG-KNOPF (Firefox) */
.eq-slider input[type=range]::-moz-range-thumb {
    height: 32px;
    width: 32px;
    background: url('../images/Slider_Knopf_Standard.png') no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
}

.eq-slider input[type=range]:hover::-webkit-slider-thumb {
    height: 32px;
    width: 32px;
    background: url('../images/Slider_Knopf_Standard_hover.png') no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
}

.eq-slider input[type=range]:active::-webkit-slider-thumb {
    height: 32px;
    width: 32px;
    background: url('../images/Slider_Knopf_Standard_active.png') no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
}

/* VU / Peak Meter */

/* Der heilige Altar der Visualisierung */
#VU_PEAK_Container {
    margin-left: 439px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#audio-player {
    margin-bottom: 20px;
}

/* Meter-Container (Exakt 1388px Breite) */
#meter-container {
    width: 1388px;
    height: 70px;
    position: relative;
    /* background: url('VU_BG.png.png') no-repeat center center; */
    background-size: contain; /* Damit Eure Schrift perfekt skaliert */
    margin-bottom: 20px;
    border: 1px solid #333; /* Ein subtiler Rahmen für die Unendlichkeit */
}

.meter {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    padding: 0 5px; /* Kleiner Puffer für die Enden */
    box-sizing: border-box;
}

/* Die VU-Leisten (Eure harmonische Mitte) */


/* #VU_Stereo_Core_Linear {
    gap: 0; 
    background:  url('VU_BG_Linear.png') no-repeat center center;
    height: 118px; 
} */

/* #VU_Stereo_Core_Log {
    gap: 0; 
    background:  url('VU_BG_Log.png') no-repeat center center;
    height: 118px; 
} */

/* Grundlegende Container-Stile */
.vu-core-container {
    gap: 0;
    height: 118px;
    padding: 20px 20px 10px 20px;
    border-bottom: 0px solid #000;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.3s ease; /* Ein sanfter Übergang beim Umschalten */
}

/* Die zwei spezifischen Hintergründe */
.scale-linear {
    background: url('../images/VU_BG_Linear.png') no-repeat center center;
}

.scale-log {
    background: url('../images/VU_BG_Log.png') no-repeat center center;
}


/* vu-track */

/* #VU_Stereo_Core {
    width: 1802px;
    height: 118px;
    background: url('VU_BG.png') no-repeat center center;
    background-size: contain;
    border: 1px solid #fff;
} */

.vu-meter {
    height: 5px;
}

.vu-meter-left {
    top: 5px; /* Präzise Positionierung über der Skala */
}

.vu-meter-right {
    bottom: 5px; /* Präzise Positionierung unter der Skala */
}

/* Die Peak-Leisten (Eure schnellen Krieger) */
.peak-meter {
    height: 7px;
}

.peak-meter-left {
    top: 15px;
}

.peak-meter-right {
    bottom: 15px;
}

/* Die einzelnen LED-Segmente */
.led {
    /* height: 100%; */
    height: 10px;
    width: 5px;
    flex-grow: 1; /* Füllt die 1388px dynamisch aus */
    margin-right: 1px; /* Ein Hauch von Zwischenraum für den Hardware-Look */
    transition: background-color 0.05s, box-shadow 0.05s;
    background-color: rgba(255, 255, 255, 0.05); /* Der "Aus"-Zustand: Ein edles Glimmen */
}

/* Der Peak-Hold Marker */
.peak-hold {
    position: absolute;
    width: 4px;
    height: 100%;
    background-color: #FF00FF;
    box-sizing: border-box;
    box-shadow: 0 0 10px #FF00FF, 0 0 20px #FF00FF;
    z-index: 10;
    transition: left 0.1s ease-out; /* Geschmeidiges Gleiten */
}


/* Lautstärkeregler */

        #volume-container {
            flex-grow: 1;
            position: relative;
            height: 22px;
        }
        #radio-name {
            position: absolute;
            left: 40px;
            top: 50%;
            transform: translateY(-50%);
            color: #000;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;
            z-index: 1;
            user-select: none;
			font-weight:700;
        }
        #volume-slider-container {
            width: calc(100% - 10px);
            height: 22px;
            position: absolute;
            top: 0;
            right: 0;
            background-color: black;
        }
        #volume-slider-track {
            width: 100%;
            height: 22px;
background: linear-gradient(to right, #ad3c00 0%,#c6a303 38%,#005e03 51%,#0034d3 67%,#84007b 81%,#600000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad3c00', endColorstr='#600000',GradientType=1 );
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        #volume-slider-thumb {
            width: 6px;
            height: 22px;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 100%;
            cursor: pointer;
        }
#volume-display {
	width: 30px;
	height: 22px;
	background-color: #600001;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight:700;
	cursor: pointer;
	user-select: none;
    margin-left: -20px;
}





/* Linker Block: Tasten behalten ihre natürliche Breite */
.player-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-shrink: 0 !important; /* Darf nicht schrumpfen */
}

/* Mittlerer Block: Der Titel-Container */
#current-title-container {
    flex-grow: 1 !important; /* Nimmt allen freien Platz ein */
    text-align: center !important;
    overflow: hidden !important; /* Alles was zu lang ist, wird versteckt */
    min-width: 100px !important;
}

/* Der Titel selbst: Abschneiden bei Überlänge */
#current-title {
	flex-grow: 1;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Die magischen drei Punkte ... */
    color: #00f2ff !important;
    font-size: 1.1em;
    font-weight: bold !important;
	margin-left: 15px;
}

/* Rechter Block: Export/Import fest an den rechten Rand */
.playlist-modes-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important; /* Darf niemals nach rechts aus dem Bild geschoben werden */
}

.export-input-field {
    all: unset !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    flex: none !important;
    width: 180px !important;
    min-width: 180px !important; 
    max-width: 180px !important;
    height: 24px !important;
    padding: 0 12px !important;
    background: #250d0d !important; 
    color: #00f2ff !important;
    border: 1px solid #ff9900 !important;
    font-size: 0.9em !important;
    font-family: sans-serif !important;
    cursor: text !important;
    transition: border-color 0.3s ease !important;
}

.export-input-field:focus {
    width: 180px !important; 
    min-width: 180px !important;
    max-width: 180px !important;
    border-color: #ff9900 !important; 
    background: #250d0d !important;
    /* box-shadow: 0 0 8px rgba(0, 242, 255, 0.5) !important; */
    color: #fff !important;
    outline: none !important;
}

/* Platzhalter */
.export-input-field::placeholder {
    color: #555 !important;
    font-style: italic !important;
}

/* CSS was irgendwie nicht wirkt */

.add-folder-btn {
    background: none;
    border: 1px solid #0af;
    color: #0af;
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.8em;
}



/* Neues Flyout für VU/Peek Settings */

.settings-panel {background-color:#000;}

/* Der Master-Titel des Flyouts */

/* 1. LABEL: Die Bezeichnung des Reglers (Giftgelb) */
.label-text { 
    color: #ff9b00 !important; 
    margin-right: 8px;
    font-size: 17px;
    font-weight: 700;
}

/* 2. WERT: Die reine Zahl (Orange-Gelb) */
.value-text { 
    color: #ffc30d !important; 
    font-weight: bold;
    margin-right: 4px; /* Platz zur Einheit */
    font-size: 17px;
    font-weight: 700;
}

/* 3. MASSEINHEIT: "ms" oder "(dB)" (Dunkles Orange) */
.unit-text { 
    color: #ff9b00 !important; 
    font-size: 17px;
    font-weight: 700;
}

/* --- HEADER --- */
.settings-header {
    color: #00f2ff !important;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* --- LAYOUT (320px & Horizontale Dominanz) --- */
.vu-master-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 30px;
    padding: 0px 0;
}

.vu-control-unit {
    width: 320px;
    flex: 0 0 320px;
}

/* --- SLIDER TRACKS MIT ORIGINAL-VERLÄUFEN --- */
.vu-slider {
    -webkit-appearance: none;
    width: 106%;
    height: 12px;
    border-radius: 6px;
    outline: none;
    margin-top: 10px;
}

.track-attack { background: linear-gradient(90deg, #ff9500 0.00%, #a34f00 48.73%, #803900 100.00%); }
.track-vu     { background: linear-gradient(270deg, #ff9500 0.00%, #a34f00 48.73%, #803900 100.00%); }
.track-peak   { background: linear-gradient(270deg, #ff9500 0.00%, #a45000 49.61%, #03d100 50.20%, #a24e00 50.96%, #803900 100.00%); }
.track-hold   { background: linear-gradient(90deg, #ff9500 0.00%, #cc6e00 29.33%, #03d100 30.01%, #c86b00 30.60%, #a34f00 48.73%, #803900 100.00%); }
.track-global { background: linear-gradient(90deg, #ff0000 0.00%, #b81246 33.43%, #03d100 34.12%, #b0144f 34.58%, #0040ff 100.00%); }

/* PNG-KNOPF */
.vu-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: url('../images/Slider_Knopf_Settings.png') no-repeat center;
    background-size: contain;
    cursor: pointer;
    margin-top: 0px;
}

/* UNTERE LEISTE */
.vu-bottom-bar {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 10px;
}




.icon-btn {background-color:#000;}
.settings-panel {margin-left:30px;}



/* Mode BTN */

.mode-btn {
	padding: 1px 12px;
	background: #250d0d;
	color: #aaa;
	border: 1px solid #ff9900;
	/* border-radius: 25px; */
	cursor: pointer;
	transition: all 0.3s;
	font-size: 0.9em;
}
		
.mode-btn:hover {
	background: #000;
	color: #fff;
    border-top: 1px solid #ff5300;
    border-left: 1px solid #ff5300;
    border-right: 1px solid #ef0000;
    border-bottom: 1px solid #ef0000;
}

input:checked + .mode-btn {
	background: #008080;
	color: #fff;
	border-color: #00f2ff;
	box-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
}



.EQ_btn {
    /* padding: 5px 12px; */
    transition: all 0.7s;
    font-size: 0.9em;
	background-color: #000;
	height:26px;
    width: 125px;
    color: #00bfb8;
    border: none;
    cursor: pointer;
    border-radius: 105px 0px 105px 0px;
    box-shadow: 0px 6px 10px -1px rgba(204, 0, 0, 1), 1px -3px 10px 2px rgba(250, 133, 0, 1), inset -1px 3px 13px 6px rgba(27, 18, 161, 0.73);
    margin-top: 8px;
}

.EQ_btn:hover {
    transition: all 0.7s;
    font-size: 0.9em;
	background-color: #000;
	height:26px;
    width: 125px;
    color: #00bfb8;
    border: none;
    cursor: pointer;
    border-radius: 105px 0px 105px 0px;
    box-shadow: 0px 6px 10px -1px rgb(133 0 255), 1px -3px 10px 2px rgb(202 0 250), inset -1px 3px 13px 6px rgba(27, 18, 161, 0.73);
}

/* Radio und Checkbox Knöpfe */

/* Inputs verstecken */
.controls input[type="radio"],
.controls input[type="checkbox"] {
    display: none;
}

/* Labels als Buttons */
.controls .btn-label {
    display: inline-block;
    cursor: pointer;
    background: none;
    border: 1px solid #735500;
    color: #8c6000;
    padding: 2px 8px;
    font-size: 10px;
    margin-top: 4px;
	font-size:14px;
}

/* Hover-Effekt */
.controls .btn-label:hover {
    color: #4da5ff;
    /* background-color: #550000; */
    /* transform: translateY(-1px); */
}

/* Aktiv / checked Zustand */
.controls input[type="radio"]:checked + .btn-label,
.controls input[type="checkbox"]:checked + .btn-label {
    background-color: none;
    color: #ffca00;
	font-size:14px;
}

/* Optional: kleinere Unit-Text */
.controls .unit-text {
    font-size: 0.8em;
    opacity: 0.8;
    margin-left: 2px;
}



.vu-btn {
    cursor: pointer;
    background: none;
    border: 1px solid #735500;
    color: #8c6000;
    padding: 2px 8px;
	font-size:14px;
    margin-top: 4px;
}

.vu-btn:hover {color: #ffca00;}


/* EQ Presets */

/* Das Raster für die 40 Buttons */
.preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 8px;
    padding: 0px;
    background: #000;
    border-radius: 8px;
    margin-bottom: 3px;
    margin-top: 8px;
}

.preset-button {
    background: #2f0000;
    color: #ffb300;
    border: 1px solid #6d130e;
    padding: 2px 2px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preset-button:hover {
    background: #5d0000;
    border-color: #e57526;
    color: #fff;
}

/* Leere Slots wirken bescheiden */
.preset-button.empty {
    /* opacity: 0.5; */
    /* font-style: italic; */
    color: #848700;
    background: #000000;
    border-color: #223308;
}

.preset-button.empty:hover {
    /* opacity: 0.5; */
    /* font-style: italic; */
    color: #f9ff00;
    background: #003300;
    border-color: #177511;
}

/* Der Speicher-Modus-Warnhinweis */
#save-checkbox:checked + label {
    color: #ff4444;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
}

#Steuerung_Container {
    padding: 0px;
    /* border-top: 1px solid #333; */
    display: flex;
    justify-content: center;
}

/* Der Button, der das aktive Preset repräsentiert */
.preset-button.active-preset {
    background-color: #fff702;
    background-image: linear-gradient(180deg, #b97a00 0%, #533100 100%);
    color: #fff;
    border: 1px solid #b67800;
}

/* Ein kleiner Glanz-Effekt beim Drüberfahren (Hover) */
.preset-button.active-preset:hover {
    background-color: #fff702;
    background-image: linear-gradient(180deg, #046fff 0%, #1714d7 100%);
    color: #fff;
    border: 1px solid #4587ff;
}

.eq-reset-btn {
    cursor: pointer;
    background: none;
    border: 1px solid #006cb3;
    color: #00a1f0;
    padding: 2px 8px;
    font-size: 10px;
}

.EQ_Preset_Save {
	color:#5487ff;
}

/* Jeder Slot bekommt eine exakte, unumstößliche Breite */
.converter-slot, .delete-slot, .play-slot, .add-slot {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px; /* Einheitsmaß für alle Spalten */
    height: 30px;
}


/* Playlist Songs Counter */
#playlist-counter-container {
    /* display: inline-block; */
	position: absolute;
    margin-left: 50%;
    font-weight: bold;
    letter-spacing: 1px;
	margin-top:44px;
}

/* .playlist-counter-bracket {
    color: #ffffff;
} */

/* #playlist-counter-value {
    color: #ffff00;
} */

/* .playlist-counter-text {
    color: #00ff00;
} */

.counter_current_song_label   { color:#ffac62; }
.counter_current_song_value   { color:#3effd4; }
.counter_songs_separator      { color:#84b4ff; font-weight:900; }
.counter_total_song_label     { color:#ffac62; }
.counter_total_value          { color:#3effd4; }
.counter_separator            { color:#fff; font-weight:900; }
.counter_total_time_label     { color:#ffa9ec; }
.counter_total_time_value     { color:#ff77b5; }
.counter_time_separator       { color:#84b4ff; font-weight:900; }
.counter_remaining_time_label { color:#ffc85f; }
.counter_remaining_time_value { color:#ffa700; }

#playlist-current-index {
    font-weight: bold;
    text-shadow: 0 0 5px #ff0055;
}

/* M3U Code Editor Modal */

/* Das Overlay, das alles abdunkelt */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000;
}

/* Der eigentliche Inhaltskasten */
.modal-content {
    background: #090f2b;
    padding: 20px;
    border: 2px solid #0a59bb;
    width: 80%;
    max-width: 800px;
    border-radius: 8px;
    box-shadow: 0 0 20px #0d6fe9;
}

/* Der Editor */
.dark-code-editor {
    width: 96.8%;
    height: 300px;
    background: #000;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    border: 1px solid #377eff;
    padding: 11px;
    resize: vertical;
}
.dark-code-editor:focus {
    border: 1px solid #8c66ff;outline: none;
}

.modal-title {
    margin-top: -12px;
    margin-bottom: 3px;
    color: #ffa700;
    font-size: 16px;
    background-color: #090f2b;
    margin-bottom: 8px;
}

/* Die Knöpfe */
.btn-primary {
    background: #253900;
    color: #ffbf00;
    cursor: pointer;
    padding: 5px 10px;
    border: none;
    font-size: 16px;
    font-weight: 700;
}

.btn-secondary {
    background: #5d2605;
    color: #ffbf00;
    cursor: pointer;
    padding: 5px 12px;
    border: none;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 700;
}

.btn-primary:hover {
	color:#0f0;
}

.btn-secondary:hover {
	color:#f00;
}



.col-duration {font-size:15px;}

/* Fixiert die restlichen Spalten, damit sie nicht wandern */
.drag-handle, .col-type, .col-duration, .remove-btn {
    flex-shrink: 0 !important; /* Diese Spalten dürfen NIEMALS schrumpfen */
}



/* ######################### */

::-webkit-scrollbar {
    width: 4px; /* Breite des vertikalen Scrollbalkens */
    height: 10px; /* Höhe des horizontalen Scrollbalkens */
    background-color: #000000; /* KÖRPER: Schwarz, wie befohlen! */
}

/* Der Griff (Thumb), der auf- und abgleitet */
::-webkit-scrollbar-thumb {
    background-color: #e6b800; /* THUMB: Gold, wie befohlen! */
    border-radius: 5px; /* Optionale Abrundung */
    border: 2px solid #000000; /* Etwas Puffer zur Schiene (muss die Farbe der Schiene haben) */
}

/* Der Griff beim Hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #ffca00; /* Etwas dunkleres Gold beim Überfahren */
}

/* Der Bereich zwischen Thumb und Scroll-Ende */
::-webkit-scrollbar-track {
    background-color: #000000; /* Der Hintergrund (Schiene) ist ebenfalls Schwarz */
}

/* --- FIREFOX STYLING (Minimalistisch) --- */

/* Firefox verwendet eigene Properties für Basis-Styling */
* {
    /* SCROLLBAR: Der Thumb (Griff) */
    scrollbar-color: #e6b800 #000000; /* [Thumb-Farbe] [Track-Farbe] */
    
    /* SCROLLBAR-BREITE: */
    scrollbar-width: none; /* 'auto' | 'thin' | 'none' */
}