/* SCHWATZGELB.DE - CUSTOM THEME (Anti-Blau & Augenfreundlich)
*/

:root, :root.dark {
    /* Blau wird komplett gekillt und durch edles Schwarz/Dunkelgrau ersetzt */
    --blue: #111111 !important;
    --dark-blue: #000000 !important;
    --icon-blue: #FDE100 !important; /* Icons leuchten in dezentem BVB-Gelb */
    --iconPrimary: #FDE100 !important;
    --link: #FDE100 !important;

    /* Hintergrund- und Oberflächenfarben (angenehmes Dark-Theme) */
    --background: #141d24 !important;
    --surfacePrimary: #1c262e !important;
    --surfaceSecondary: #27323b !important;
    --hover: rgba(253, 225, 0, 0.08) !important; /* Gelber Schimmer beim Drüberfahren */
    
    /* Textfarben */
    --textPrimary: rgba(255, 255, 255, 0.7) !important;
    --textSecondary: rgba(255, 255, 255, 0.95) !important;
}

/* --- Login-Seite (Dezent & Schick) --- */
body#login {
    background-color: #0b1014 !important;
}

body#login form {
    background-color: var(--surfacePrimary) !important;
    border: 1px solid #3a4754 !important;
    border-top: 3px solid #FDE100 !important; /* Nur eine feine gelbe Kante oben */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 6px !important;
}

body#login h1 {
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
}

/* --- Buttons (Nicht mehr stechend gelb!) --- */
.button, button, input[type="submit"], body#login input[type="submit"] {
    background: #27323b !important; /* Dunkler Button */
    color: #ffffff !important;
    border: 1px solid #3a4754 !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

/* Erst beim Drüberfahren (Hover) wird der Button gelb */
.button:hover, button:hover, input[type="submit"]:hover {
    background: #FDE100 !important;
    color: #000000 !important;
    border-color: #FDE100 !important;
}

.button--flat {
    color: #ffffff !important;
}
.button--flat:hover {
    color: #FDE100 !important;
    background: transparent !important;
}

/* --- Header & Navigation --- */
header {
    background: #0b1014 !important;
    border-bottom: 1px solid #FDE100 !important; /* Feine gelbe Trennlinie unter dem Header */
}

/* Suchleiste anpassen */
#search #input {
    background: #1c262e !important;
    border: 1px solid #27323b !important;
}

/* --- Dateiliste & Markierungen --- */
#listing .item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Wenn eine Datei oder ein Ordner MARKIERT ist (Aria-Selected) */
#listing .item[aria-selected="true"], 
.file-list li[aria-selected="true"] {
    background: #27323b !important; /* Dunkelgrauer Hintergrund für Markierung */
    color: #FDE100 !important; /* Text wird gelb */
    border-left: 3px solid #FDE100 !important; /* Gelber Balken links */
}

/* Das Mehrfach-Auswahl-Menü unten, wenn man mehrere Dateien wählt */
#listing #multiple-selection {
    background-color: #0b1014 !important;
    border-top: 2px solid #FDE100 !important;
}

/* --- System-Meldungen (Toasts) von Blau auf Schwarz umfärben --- */
.Vue-Toastification__toast--default, 
.Vue-Toastification__toast--info {
    background-color: #1c262e !important;
    border-left: 5px solid #FDE100 !important;
    color: #ffffff !important;
}

/* --- Ladebalken & Uploads --- */
.progress div, 
.upload-files .file .file-progress div {
    background-color: #FDE100 !important; /* Gelber, dünner Fortschrittsbalken */
}

/* Info-Texte & Icons */
.info-icon, .shell__prompt i {
    color: #FDE100 !important;
}