/* === Finaler Fix für Video-Labels & Branding === */

:root {
  --aurel-green: #C5F52B;
  --aurel-dark: #2d403c;
}

/* 1. DARK THEME LOGIK */
body.dark_theme {
    background-color: var(--aurel-dark) !important;
}

body.dark_theme .menu-item-icon, 
body.dark_theme .link-text {
    color: var(--aurel-green) !important;
}

/* 2. LIGHT THEME LOGIK */
body:not(.dark_theme) {
    background-color: #ffffff !important;
}

body:not(.dark_theme) .menu-item-icon, 
body:not(.dark_theme) .link-text {
    color: var(--aurel-dark) !important;
}

/* 3. AKTIVER REITER (Sidebar) */
body .nav-menu li.link-item.active,
body .nav-menu li.link-item.active .menu-item-icon,
body .nav-menu li.link-item.active .link-text {
    background-color: var(--aurel-green) !important;
    color: var(--aurel-dark) !important;
}

/* 4. FIX: VIDEO-LABELS OHNE HINTERGRUND */
/* Wir erzwingen Transparenz für Titel und Metadaten unter/auf Videos */
.media-item-title, 
.video-title,
.media-item-info,
.item-content h3,
.item-content h3 span,
.video-card-details span {
    background-color: transparent !important;
    background: transparent !important;
    /* Hier optional die Textfarbe anpassen, damit sie auf Weiß/Dunkelgrün lesbar ist */
}

/* Textfarbe für Video-Titel im Dark Mode */
body.dark_theme .media-item-title, 
body.dark_theme .video-title {
    color: #ffffff !important;
}

/* Textfarbe für Video-Titel im Light Mode */
body:not(.dark_theme) .media-item-title, 
body:not(.dark_theme) .video-title {
    color: var(--aurel-dark) !important;
}

/* 5. HEADER & NAVBAR */
#app-header, .navbar {
    background-color: var(--aurel-dark) !important;
    border-bottom: 2px solid var(--aurel-green) !important;
}

/* === LOGO-SWITCH: DARK & LIGHT MODE === */

/* 1. Standard: Dark Mode Logo (oder wenn dark_theme aktiv ist) */
body.dark_theme .logo {
    background-image: url('/static/images/logo_dark.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    min-width: 180px !important;
    height: 40px !important;
    display: flex !important;
}

/* 2. Light Mode Logo: Hier laden wir die alternative Datei */
body:not(.dark_theme) .logo {
    background-image: url('/static/images/logo_light.svg') !important; /* Name deiner Datei für hellen Hintergrund */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    min-width: 180px !important;
    height: 40px !important;
    display: flex !important;
}

/* Sicherstellen, dass der Link den Platz ausfüllt */
.logo a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-indent: -9999px !important;
}