/* === LIGHT THEME (Sandstein & Anthrazit) - V2 FIX === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* Nur aktiv, wenn Body die Klasse "light-mode" hat */
body.light-mode {
    /* Variablen überschreiben */
    --primary-dark: #F7F2EC;    /* Hintergrund: Sandstein (Warmes Beige) */
    --secondary-dark: #FCFBF9;  /* Sektionen: Leinen (Fast Weiß) */
    --panel-bg: #FFFFFF;        /* Dashboard Panels: Reinweiß */
    --text-light: #3D4752;      /* Haupttext: Anthrazit (Dunkelgrau) */
    --text-muted: #6A747D;      /* Sekundärtext: Mittelgrau */
    --accent-color: #D95B43;    /* Akzent: Terrakotta Rot */
    --accent-hover: #C04A31;    /* Akzent Hover */
    --border-color: #EAE0D3;    /* Ränder: Sand-Ton */
    
    font-family: 'Poppins', 'Roboto', sans-serif;
    background-color: var(--primary-dark);
    color: var(--text-light);
}

/* --- HEADER & FOOTER & NAV (Dunkel für Kontrast) --- */
body.light-mode header,
body.light-mode footer,
body.light-mode nav {
    background-color: #3D4752 !important; /* Anthrazit Hintergrund */
    border-color: #4a5561 !important;
    color: #EAE0D3 !important; /* Helle Schrift auf dunklem Grund */
}

/* Links & Icons im Header/Footer MÜSSEN hell sein */
body.light-mode .header-logo-text {
    /* Logo lassen wir so, Text-Gradient wirkt auch auf Dunkel */
}

body.light-mode .nav-links li a,
body.light-mode footer p,
body.light-mode footer a,
body.light-mode .header-icons button,
body.light-mode .hamburger-menu {
    color: #EAE0D3 !important; /* Heller Sand-Ton */
}

body.light-mode .nav-links li a:hover,
body.light-mode footer a:hover,
body.light-mode .header-icons button:hover,
body.light-mode .hamburger-menu:hover {
    color: #FFFFFF !important; /* Weiß bei Hover */
}

body.light-mode #theme-toggle-btn {
    color: #EAE0D3 !important; /* Sonne/Mond Icon hell */
}

/* --- SECTIONS (Hintergründe hell) --- */
body.light-mode .content-section {
    background-color: var(--secondary-dark);
}

/* Überschriften dunkel */
body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4,
body.light-mode strong {
    color: #3D4752 !important;
}

/* --- SERVICE TAGS & LISTEN (Waren vorher schwarz) --- */
/* Die "Weitere Services" Liste */
body.light-mode .all-services li {
    background-color: #FFFFFF !important; /* Weiß statt Schwarz */
    color: #3D4752 !important; /* Dunkle Schrift */
    border: 1px solid #EAE0D3 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Öffnungszeiten Karten */
body.light-mode .hours-grid div {
    background-color: #F7F2EC !important; /* Sandstein */
    color: #3D4752 !important;
    border: 1px solid #EAE0D3;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* Kontakt Boxen */
body.light-mode .contact-info-block {
    background-color: #F7F2EC !important;
    color: #3D4752 !important;
    border: 1px solid #EAE0D3;
}
body.light-mode .contact-info-block p {
    color: #3D4752 !important; /* Erzwingt dunkle Schrift im Kontaktblock */
}

/* Service Karten (Grid) */
body.light-mode .service-card {
    background-color: #FFFFFF !important;
    border-color: #EAE0D3 !important;
}
body.light-mode .service-card p {
    color: #6A747D !important;
}

/* --- DASHBOARD ELEMENTE (Schwarze Boxen entfernen) --- */
body.light-mode .dashboard-container {
    background-color: #FFFFFF !important;
    border: 1px solid #EAE0D3;
}

/* Überschreibt alle Inline-Styles mit "background: #222" oder Klassen */
body.light-mode [style*="background:#222"],
body.light-mode [style*="background: #222"],
body.light-mode [style*="background:#333"], 
body.light-mode [style*="background: #333"],
body.light-mode .stat-card,
body.light-mode .card,
body.light-mode #target-bar-container {
    background-color: #F7F2EC !important; /* Sandstein statt Schwarz */
    color: #3D4752 !important;
    border: 1px solid #EAE0D3 !important;
}

/* Spezifische Texte im Dashboard korrigieren */
body.light-mode #target-bar-container span[style*="color:#fff"],
body.light-mode .stat-card h3[style*="color:#888"],
body.light-mode label {
    color: #3D4752 !important;
}

/* Tabellen Header & Zeilen */
body.light-mode #invoices-header,
body.light-mode .dashboard-list-item {
    background-color: #FFFFFF !important;
    color: #3D4752 !important;
    border-bottom: 1px solid #EAE0D3 !important;
}

/* --- FORMULARE & INPUTS (Weiß auf Weiß beheben) --- */
body.light-mode input,
body.light-mode textarea,
body.light-mode select,
body.light-mode .dashboard-container input,
body.light-mode .dashboard-container textarea,
body.light-mode .dashboard-container select {
    background-color: #FFFFFF !important; /* Weißer Hintergrund */
    color: #3D4752 !important; /* DUNKLE SCHRIFT! */
    border: 1px solid #ccc !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
    color: #999 !important; /* Platzhalter Grau */
}

body.light-mode input:focus,
body.light-mode textarea:focus,
body.light-mode select:focus {
    border-color: var(--accent-color) !important;
    background-color: #fff !important;
}

/* Deaktivierte Inputs (beim Bearbeiten) */
body.light-mode input:disabled {
    background-color: #f0f0f0 !important;
    color: #888 !important;
}

/* --- BUTTONS & KLEINIGKEITEN --- */
body.light-mode .btn-secondary {
    color: #3D4752 !important;
    border-color: #ccc !important;
}
body.light-mode .btn-secondary:hover {
    background-color: #EAE0D3 !important;
}

/* Tabs aktiv */
body.light-mode .btn-secondary.active,
body.light-mode .tab-link.active {
    color: var(--accent-color) !important;
    border-bottom-color: var(--accent-color) !important;
}

/* Modal Popup */
body.light-mode .modal-content {
    background-color: #FFFFFF !important;
    color: #3D4752 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
body.light-mode .modal-close {
    color: #3D4752 !important; /* Schließen Kreuz dunkel */
}


/* 1. Header Titel (Logo) scharf und klar machen */
body.light-mode .header-logo-text {
    background: none !important; /* Entfernt den unscharfen Farbverlauf */
    -webkit-text-fill-color: #EAE0D3 !important; /* Füllt den Text mit der hellen Sandfarbe */
    color: #EAE0D3 !important;
    text-shadow: none !important; /* Entfernt Weichzeichner-Schatten */
    font-weight: 700;
}

/* 2. Hero Bild/Video (Grauschleier entfernen) */
body.light-mode .hero-image {
    opacity: 1 !important; /* Volle Deckkraft! Kein Durchscheinen des weißen Hintergrunds */
    mix-blend-mode: normal !important;
}

/* 3. Text auf dem Hero-Bild wieder WEISS machen */
/* Da das Auto-Bild dunkel ist, muss der Text hier weiß bleiben, auch im Light-Mode */
body.light-mode .hero-content h1,
body.light-mode .hero-content p {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8) !important; /* Starker Schatten für Lesbarkeit */
}

/* 1. Rote Buttons wieder kräftig machen (Original-Rot zurückholen) */
body.light-mode {
    --accent-color: #e60023 !important; /* Dein Original-Rot */
    --accent-hover: #ff3355 !important;
}

/* 2. Header Logo: Original-Farbverlauf zurück, aber SCHARF */
body.light-mode .header-logo-text {
    /* Dein Original Farbverlauf */
    background: linear-gradient(to bottom, #AA4444 0%, #800020 25%, #0066B3 75%, #4080B0 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    
    /* WICHTIG: Text-Shadow entfernen -> Das macht es scharf */
    text-shadow: none !important;
    
    /* Trick: Minimaler weißer Schein außenrum, damit es auf dem dunklen Grau lesbar bleibt */
    filter: drop-shadow(0 0 1px rgba(255,255,255,0.3));
}
/* --- FIX: Text-Lesbarkeit (Über uns & Karriere) --- */

/* 1. Den Container (Box) einfärben wie bei Kontakt */
body.light-mode .static-content-wrapper {
    background-color: #F7F2EC !important; /* Sandstein Hintergrund */
    border: 1px solid #EAE0D3 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; /* Leichter Schatten */
}

/* 2. Schriftfarbe für ALLE Textblöcke auf Dunkel-Anthrazit zwingen */
/* Das repariert Karriere, Über Uns, Impressum und Datenschutz */
body.light-mode .section-content-area p,
body.light-mode .static-content-wrapper p,
body.light-mode .static-content-wrapper div,
body.light-mode #career-content-area, 
body.light-mode #career-content-area div,
body.light-mode [data-editable-key] {
    color: #3D4752 !important; /* Anthrazit statt Weiß/Grau */
    text-shadow: none !important;
}

/* 3. Überschriften in diesen Boxen */
body.light-mode .static-content-wrapper h2,
body.light-mode .static-content-wrapper h3 {
    color: #3D4752 !important; /* Dunkle Überschrift */
    text-shadow: none !important;
}

/* --- FIX: DASHBOARD & INTERFACE ELEMENTS --- */

/* 1. Statistiken: Tabs & Filter sichtbar machen */
body.light-mode #stats-controls-wrapper .btn-link {
    color: #6A747D !important; /* Inaktive Tabs: Grau */
}
body.light-mode #stats-controls-wrapper .btn-link.active {
    color: var(--accent-color) !important; /* Aktiver Tab: Rot */
    border-bottom-color: var(--accent-color) !important;
}
/* Filter Buttons (Heute, Gestern...) */
body.light-mode .stats-filter .filter-btn {
    background-color: #FFFFFF !important;
    color: #3D4752 !important;
    border: 1px solid #EAE0D3 !important;
}
body.light-mode .stats-filter .filter-btn.active {
    background-color: var(--accent-color) !important;
    color: #FFFFFF !important;
    border-color: var(--accent-color) !important;
}

/* 2. Rechnung erstellen Modal (War schwarz, jetzt Sand) */
body.light-mode #invoice-modal .modal-content,
body.light-mode #invoice-form {
    background-color: #F7F2EC !important; /* Sandstein */
    color: #3D4752 !important;
}
/* Die Tabelle in der Rechnung */
body.light-mode .invoice-items-wrapper {
    background-color: #FFFFFF !important;
    border: 1px solid #EAE0D3 !important;
}
body.light-mode #invoice-items-table th,
body.light-mode #invoice-items-table td {
    color: #3D4752 !important;
    border-bottom-color: #EAE0D3 !important;
}
/* Summen unten rechts */
body.light-mode .invoice-summary {
    color: #3D4752 !important;
}

/* 3. Aktions-Buttons (Bearbeiten/Löschen/Drucken - Icons) */
body.light-mode .list-item-actions button, 
body.light-mode .btn-secondary {
    background-color: #FFFFFF !important;
    border: 1px solid #EAE0D3 !important;
    color: #3D4752 !important; /* Dunkle Icons */
}
body.light-mode .list-item-actions button:hover,
body.light-mode .btn-secondary:hover {
    background-color: var(--accent-color) !important;
    color: #FFFFFF !important; /* Weiße Icons bei Hover */
    border-color: var(--accent-color) !important;
}

/* 4. Leistungen (Schwarze Balken entfernen) */
/* Container für "Weitere Services" */
body.light-mode #additional-services-form-container div[style*="background:#222"] {
    background-color: #F7F2EC !important; /* Sandstein */
    color: #3D4752 !important;
    border: 1px solid #EAE0D3;
}
/* Die Tags selbst */
body.light-mode .tag-item {
    background-color: #EAE0D3 !important; /* Dunklerer Sand */
    color: #3D4752 !important;
}
/* Die Überschriften der Kategorien (Akkordeon) */
body.light-mode #products-list-container div[style*="background: #333"],
body.light-mode #products-list-container div[style*="background:#333"] {
    background-color: #EAE0D3 !important; /* Header: Dunkler Sand */
    color: #3D4752 !important;
    border-bottom: 1px solid #fff !important;
}
/* Die Liste der Produkte (Inhalt) */
body.light-mode #products-list-container div[style*="background: #111"] {
    background-color: #FFFFFF !important; /* Inhalt: Weiß */
    border-bottom: 1px solid #EAE0D3 !important;
}
/* Inputs in der Liste sichtbar machen */
body.light-mode .dashboard-list-item input {
    color: #3D4752 !important;
}

/* 5. Öffnungszeiten (Stempel-Bereich) */
body.light-mode #hours-form div[style*="background-color: #222"],
body.light-mode #hours-form div[style*="background-color: #111"] {
    background-color: #EAE0D3 !important; /* Dunkler Sand-Kasten */
    border: 1px solid #D95B43 !important; /* Roter Rand für Akzent */
    color: #3D4752 !important;
}
/* Überschrift im Stempel-Kasten */
body.light-mode #hours-form h4 {
    color: #3D4752 !important;
}

/* --- FIX V3: HARTE SCHWARZE BOXEN ÜBERSCHREIBEN --- */

/* 1. RECHNUNG ERSTELLEN MODAL (War schwarz) */
/* Wir zwingen das Modal auf Sandfarbe */
body.light-mode .dashboard-modal .modal-content {
    background-color: #F7F2EC !important; /* Sandstein */
    color: #3D4752 !important; /* Dunkle Schrift */
    border: 1px solid #EAE0D3 !important;
}
/* Damit man die Titel im Modal sieht */
body.light-mode .dashboard-modal h3,
body.light-mode .dashboard-modal h4 {
    color: #3D4752 !important;
}

/* 2. LEISTUNGEN VERWALTEN (Der Eingabe-Kasten oben) */
/* Der JS-Code setzt hier style="background:#222", das überschreiben wir */
body.light-mode #settings-content-products > div:first-child {
    background-color: #F7F2EC !important;
    border: 1px solid #EAE0D3 !important;
    color: #3D4752 !important;
}

/* 3. LEISTUNGEN LISTE (Akkordeon Header & Inhalt) */
/* Die Balken (Kategorien), die im JS #333 sind */
body.light-mode #products-list-container div[style*="background:#333"],
body.light-mode #products-list-container div[style*="background: #333"] {
    background-color: #3D4752 !important; /* Anthrazit für Header (guter Kontrast) */
    color: #FFFFFF !important; /* Weiße Schrift darauf */
    border-bottom: 1px solid #4a5561 !important;
}
/* Die Einträge (Items), die im JS #111 sind */
body.light-mode #products-list-container div[style*="background:#111"],
body.light-mode #products-list-container div[style*="background: #111"] {
    background-color: #FFFFFF !important; /* Weiß für den Inhalt */
    color: #3D4752 !important;
    border-bottom: 1px solid #EAE0D3 !important;
}

/* 4. WEITERE SERVICES (Der Kasten) */
body.light-mode #additional-services-form-container > div {
    background-color: #F7F2EC !important;
    border: 1px solid #EAE0D3 !important;
    color: #3D4752 !important;
}
/* Die Titel darin */
body.light-mode #additional-services-form-container h3,
body.light-mode #additional-services-form-container p {
    color: #3D4752 !important;
}

/* 5. ÖFFNUNGSZEITEN (Der Stempel-Kasten oben) */
/* JS nutzt hier style="background-color: #111" */
body.light-mode #hours-form > div:first-child {
    background-color: #F7F2EC !important;
    border: 1px solid #EAE0D3 !important;
}
body.light-mode #hours-form h4 {
    color: #3D4752 !important;
}

/* 6. INPUTS IN DIESEN KÄSTEN SICHTBAR MACHEN */
/* Da der Hintergrund jetzt hell ist, müssen die Inputs weiß mit dunkler Schrift sein */
body.light-mode #hours-form input,
body.light-mode #settings-content-products input,
body.light-mode #settings-content-products select,
body.light-mode #additional-services-form-container input {
    background-color: #FFFFFF !important;
    border: 1px solid #ccc !important;
    color: #3D4752 !important;
}
/* --- ULTIMATE FIX V4 (Basiert auf Konsole-Screenshots) --- */

/* 1. RECHNUNG & MODAL INPUTS (Die schwarzen Felder im Screenshot) */
/* Wir zielen genau auf die ID und nutzen !important, um das alte CSS zu überschreiben */
body.light-mode #invoice-modal input,
body.light-mode #invoice-modal select,
body.light-mode #invoice-modal textarea,
body.light-mode .dashboard-modal input,
body.light-mode .dashboard-modal select,
body.light-mode .dashboard-modal textarea {
    background-color: #FFFFFF !important; /* Weiß */
    color: #3D4752 !important; /* Dunkle Schrift */
    border: 1px solid #ccc !important;
    box-shadow: none !important;
}

/* 2. LEISTUNGEN LISTE (Die dunkelgrauen Balken mit rgb(51,51,51)) */
/* Der Inspector zeigte diesen speziellen Farbwert */
body.light-mode #products-list-container div[style*="rgb(51, 51, 51)"],
body.light-mode #products-list-container div[style*="background: rgb(51, 51, 51)"],
body.light-mode #products-list-container div[style*="background:#333"],
body.light-mode #products-list-container div[style*="background: #333"] {
    background-color: #3D4752 !important; /* Anthrazit Header */
    color: #FFFFFF !important;
    border-bottom: 1px solid #4a5561 !important;
}

/* Der Inhalt der Liste (Schwarz/Dunkel) */
body.light-mode #products-list-container div[style*="background:#111"],
body.light-mode #products-list-container div[style*="background: #111"] {
    background-color: #FFFFFF !important; /* Weiß */
    color: #3D4752 !important;
    border-bottom: 1px solid #EAE0D3 !important;
}

/* 3. TAGS / WEITERE SERVICES (Der schwarze Kasten #000) */
/* Im Screenshot war .tag-container schwarz */
body.light-mode .tag-container {
    background-color: #FFFFFF !important; /* Weiß statt Schwarz */
    border: 1px solid #EAE0D3 !important;
    color: #3D4752 !important;
}

/* Die Tags selbst (Waren dunkel) */
body.light-mode .tag-item {
    background-color: #EAE0D3 !important; /* Sand */
    color: #3D4752 !important; /* Dunkle Schrift */
    border: 1px solid #ccc !important;
}

/* Das X zum Löschen im Tag */
body.light-mode .tag-item .remove-tag {
    color: #D95B43 !important; /* Rot */
}

/* 4. SUCHLEISTE LEISTUNGEN (Im Screenshot noch lila/dunkel) */
body.light-mode #prod-search {
    background-color: #FFFFFF !important;
    color: #3D4752 !important;
    border: 1px solid #ccc !important;
}
/* --- FINISH-LINE FIX V5 (Final Screenshots) --- */

/* 1. "Leistung auswählen" Modal (Die schwarzen Balken) */
/* Wir zielen auf die ID und dann auf die DIVs darin */
body.light-mode #picker-list > div {
    background-color: #3D4752 !important; /* Anthrazit für die Header */
    color: #FFFFFF !important;
    border-bottom: 1px solid #4a5561 !important;
}

/* Die Unter-Elemente, falls sie auch dunkel sind */
body.light-mode #picker-list > div > div {
    background-color: #FFFFFF !important; /* Weiß für die Items */
    color: #3D4752 !important;
}
body.light-mode #picker-list > div > div:hover {
    background-color: #F7F2EC !important; /* Sand beim Hovern */
}


/* 2. PDF-Vorschau Button (Jetzt Blau statt Grau) */
/* Wir überschreiben den Inline-Style, den das JS setzt */
body.light-mode #generate-invoice-pdf-btn {
    background-color: #3498db !important; /* Blau */
    border: 1px solid #2980b9 !important; /* Dunklerer blauer Rand */
    color: #fff !important;
}
body.light-mode #generate-invoice-pdf-btn:hover {
    background-color: #2980b9 !important; /* Dunkleres Blau bei Hover */
}

/* 3. MONATSZIEL-Leiste (Der Kasten war schwarz) */
/* Wir überschreiben den JS-Style für den Container */
body.light-mode #target-bar-container {
    background-color: #F7F2EC !important; /* Sand */
    border: 1px solid #EAE0D3 !important;
}

/* Der innere Balken (wo die Prozentzahl steht) */
body.light-mode #target-bar-container > div:last-child {
    background-color: #FFFFFF !important; /* Weißer Hintergrund statt #111 */
    border: 1px solid #EAE0D3;
}

/* Der Text im Balken (War schwarz und unsichtbar) */
body.light-mode #target-bar-container div[style*="color:#000"] {
    color: #3D4752 !important; /* Dunkelgrauer Text */
    -webkit-text-stroke: 0.5px #FFFFFF; /* Minimaler weißer Rand für Kontrast auf dem Balken */
}
/* --- LIGHT THEME BUTTON FIX --- */
body.light-mode .btn-save {
    background-color: #27ae60 !important;
    color: #fff !important;
}
body.light-mode .btn-save:hover {
    background-color: #229954 !important;
}
body.light-mode .btn-pdf {
    background-color: #3498db !important;
    color: #fff !important;
}
body.light-mode .btn-pdf:hover {
    background-color: #2980b9 !important;
}
/* --- FINAL LIGHT THEME FIXES (Buttons & Tabs) --- */

/* 1. PDF & Abbrechen Buttons im Light Mode */
body.light-mode .btn-pdf {
    background-color: #3498db !important; /* Blau */
    color: #fff !important;
}
body.light-mode .btn-pdf:hover {
    background-color: #2980b9 !important;
}
body.light-mode .btn-cancel {
    background-color: #FFFFFF !important;
    color: #3D4752 !important;
    border: 1px solid #ccc !important;
}
body.light-mode .btn-cancel:hover {
    background-color: #f0f0f0 !important;
}

/* 2. Statistik-Tabs im Light Mode */
body.light-mode .stats-sub-tabs .btn-link {
    color: #6A747D !important; /* Grau */
}
body.light-mode .stats-sub-tabs .btn-link:hover {
    color: #3D4752 !important; /* Dunkelgrau */
}
body.light-mode .stats-sub-tabs .btn-link.active {
    color: var(--accent-color) !important; /* Rot */
    border-bottom-color: var(--accent-color) !important;
}
/* --- FINALE FIXES V6 (Zahnrad & Icons) --- */

/* 1. Zahnrad-Button im Light-Mode sichtbar machen */
body.light-mode #invoice-settings-btn {
    color: #3D4752 !important; /* Dunkelgrau statt weiß */
}
body.light-mode #invoice-settings-btn:hover {
    color: var(--accent-color) !important; /* Rot bei Hover */
}

/* 2. Hintergrund des "Tabellenansicht anpassen"-Modals */
body.light-mode #invoice-cols-modal .modal-content {
    background-color: #F7F2EC !important; /* Sandstein */
    color: #3D4752 !important;
}
/* Titel darin dunkel machen */
body.light-mode #invoice-cols-modal h3 {
    color: #3D4752 !important;
}
/* Trennlinie sichtbar machen */
body.light-mode #invoice-cols-modal div[style*="border-top"] {
    border-top-color: #EAE0D3 !important;
}
/* Labels (Deine Auswahl, Verfügbare Spalten) */
body.light-mode .cols-label {
    color: #6A747D !important;
}

/* 3. Drucken- und Löschen-Icons einfärben (für beide Themes) */
/* Wir machen das direkt im Haupt-CSS, da es für beide gilt */

/* --- GLOBALE ICON-FARBEN (in style.css einfügen) --- */

/* Drucken-Icon (Blau) */
.list-item-actions .fa-print {
    color: #3498db !important;
}
.list-item-actions button:hover .fa-print {
    color: #fff !important; /* Weiß bei Hover */
}

/* Löschen-Icon (Rot) */
.list-item-actions .fa-trash {
    color: #e60023 !important;
}
.list-item-actions button:hover .fa-trash {
    color: #fff !important; /* Weiß bei Hover */
}
/* --- FIX V7: "Tabellenansicht anpassen" Modal --- */
body.light-mode .cols-selection-area {
    background-color: #FFFFFF !important; /* Weißer Hintergrund statt #1a1a1a */
    border: 1px solid #EAE0D3 !important; /* Sandfarbener Rand */
}

/* Die "Verfügbare Spalten" Box, die transparent war */
body.light-mode #cols-available-area {
    background-color: transparent !important; /* Bleibt transparent */
    border: none !important;
}

/* Die Tags (Gelb & Grau) anpassen */
/* Gelbe (Aktive) Tags */
body.light-mode .col-tag.active {
    background-color: #EAE0D3 !important; /* Heller Sand-Ton */
    color: #3D4752 !important; /* Dunkle Schrift */
    border: 1px solid #ccc;
    box-shadow: none;
}
body.light-mode .col-tag.active::after {
    color: #3D4752 !important;
}

/* Graue (Verfügbare) Tags */
body.light-mode .col-tag.available {
    background-color: #FFFFFF !important; /* Weiß */
    color: #3D4752 !important;
    border: 1px solid #ccc !important;
}
body.light-mode .col-tag.available:hover {
    background-color: #f0f0f0 !important;
    color: #3D4752 !important;
    border-color: #bbb !important;
}

/* --- MOBILE CARD VIEW FIX FÜR LIGHT MODE --- */

@media screen and (max-width: 992px) {
    
    /* 1. Hintergrund der Karten (Rechnungen & Kunden) */
    body.light-mode .dashboard-list-item {
        background-color: #FFFFFF !important; /* Weißer Hintergrund */
        border: 1px solid #EAE0D3 !important; /* Sandfarbener Rand */
        color: #3D4752 !important; /* Dunkle Schrift */
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; /* Dezenter Schatten */
    }

    /* 2. Trennlinien innerhalb der Karte */
    body.light-mode .dashboard-list-item > span, 
    body.light-mode .dashboard-list-item > small {
        border-bottom-color: #EAE0D3 !important; /* Helle Trennlinie */
        color: #3D4752 !important;
    }

    /* 3. Labels (Kunde:, Datum: etc.) */
    body.light-mode .dashboard-list-item > span::before,
    body.light-mode .dashboard-list-item > small::before {
        color: #6A747D !important; /* Mittelgrau statt Hellgrau */
    }

    /* 4. RECHNUNG ERSTELLEN MODAL (Mobile Ansicht) */
    /* Die Karten dort auch hell machen */
    body.light-mode #invoice-items-table tr {
        background-color: #FFFFFF !important;
        border: 1px solid #EAE0D3 !important;
    }

    /* Labels dort */
    body.light-mode #invoice-items-table td::before {
        color: #6A747D !important;
    }

    /* Trennlinien */
    body.light-mode #invoice-items-table td:nth-child(1) {
        border-bottom-color: #EAE0D3 !important;
    }

    /* Inputs in der Karte */
    body.light-mode #invoice-items-table input {
        background-color: #F7F2EC !important; /* Leicht abgedunkeltes Weiß (Sand) für Kontrast */
        border: 1px solid #ccc !important;
        color: #3D4752 !important;
    }
}