/**
 * Datei: darkmode.css
 * Theme: MietPortalo Theme
 * Autor: MARKS MEDIA
 *
 * Zweck:
 *   Einheitliches Farbhandling für Hell- und Dunkelmodus.
 *   - Automatisch via prefers-color-scheme
 *   - Manuell via .dark-mode / .light-mode
 *   - Alle Farben flexibel über CSS-Variablen steuerbar
 *   - Keine festen Farbwerte: nur sinnvolle Fallbacks
 */

html {
	color-scheme: light dark;
}

/* ============================================================
   1. Automatischer Dark Mode (Systemvorgabe)
============================================================ */
@media (prefers-color-scheme: dark) {
	html:not(.light-mode) {
		/* Hauptfarben (Fallbacks, Customizer überschreibt) */
		--color-1: var(--mietp-primary-dark, #66b2ff);
		--color-2: var(--mietp-secondary-dark, #ff6666);
		--color-3: var(--mietp-accent-dark, #ffd65a);
		--color-4: var(--mietp-text-dark, #f0f0f0);
		--color-5: var(--mietp-text-muted-dark, #cccccc);
		--color-6: var(--mietp-border-dark, #444444);
		--color-7: var(--mietp-surface-dark, #1B2838);
		--color-8: var(--mietp-background-dark, #101824);

		/* Struktur */
		--header-bg: var(--mietp-header-bg-dark, #1B2838);
		--header-text: var(--mietp-header-text-dark, #f0f0f0);
		--header-border: var(--mietp-header-border-dark, #333333);

		--footer-bg-top: var(--mietp-footer-top-dark, #1f1f1f);
		--footer-bg-bottom: var(--mietp-footer-bottom-dark, #141414);
		--footer-text: var(--mietp-footer-text-dark, #dddddd);

		--block-bg: var(--mietp-block-bg-dark, #242424);
		--block-border: var(--mietp-block-border-dark, #444444);
	}

	html:not(.light-mode) body {
		background: var(--color-8);
		color: var(--color-4);
	}
}

/* ============================================================
   2. Manueller Dark Mode (.dark-mode)
============================================================ */
html.dark-mode,
html.dark-mode body {
	--color-1: var(--mietp-primary-dark, #66b2ff);
	--color-2: var(--mietp-secondary-dark, #ff6666);
	--color-3: var(--mietp-accent-dark, #ffd65a);
	--color-4: var(--mietp-text-dark, #f0f0f0);
	--color-5: var(--mietp-text-muted-dark, #cccccc);
	--color-6: var(--mietp-border-dark, #444444);
	--color-7: var(--mietp-surface-dark, #1B2838);
	--color-8: var(--mietp-background-dark, #101824);

	--header-bg: var(--mietp-header-bg-dark, #1B2838);
	--header-text: var(--mietp-header-text-dark, #f0f0f0);
	--header-border: var(--mietp-header-border-dark, #333333);

	--footer-bg-top: var(--mietp-footer-top-dark, #1f1f1f);
	--footer-bg-bottom: var(--mietp-footer-bottom-dark, #141414);
	--footer-text: var(--mietp-footer-text-dark, #dddddd);

	--block-bg: var(--mietp-block-bg-dark, #242424);
	--block-border: var(--mietp-block-border-dark, #444444);
}

/* ============================================================
   3. Manueller Light Mode (.light-mode)
============================================================ */
html.light-mode,
html.light-mode body {
	--color-1: var(--mietp-primary, #006699);
	--color-2: var(--mietp-secondary, #cc3333);
	--color-3: var(--mietp-accent, #f7b91a);
	--color-4: var(--mietp-text, #333333);
	--color-5: var(--mietp-text-muted, #555555);
	--color-6: var(--mietp-border, #cccccc);
	--color-7: var(--mietp-surface, #f5f5f5);
	--color-8: var(--mietp-background, #ffffff);

	--header-bg: var(--mietp-header-bg, var(--color-8));
	--header-text: var(--mietp-header-text, var(--color-4));
	--header-border: var(--mietp-header-border, var(--color-6));

	--footer-bg-top: var(--mietp-footer-top, #16344A);
	--footer-bg-bottom: var(--mietp-footer-bottom, #142532);
	--footer-text: var(--mietp-footer-text, #ffffff);

	--block-bg: var(--mietp-block-bg, #ffffff);
	--block-border: var(--mietp-block-border, #dddddd);
}

/* ============================================================
   4. Gemeinsame Elemente (nutzen aktuelle Variablen)
============================================================ */
body {
	background: var(--color-8);
	color: var(--color-4);
	transition: background-color 0.3s ease, color 0.3s ease;
}

header.site-header {
	background: var(--header-bg);
	color: var(--header-text);
	border-bottom: 1px solid var(--header-border);
}

#site-footer {
	background: linear-gradient(to bottom, var(--footer-bg-top), var(--footer-bg-bottom));
	color: var(--footer-text);
	border-top: 1px solid var(--block-border);
}

.mp-white-block {
	background: var(--block-bg);
	border: 1px solid var(--block-border);
}

.mp-pill {
	background: var(--color-7);
	color: var(--color-4);
	border: 1px solid var(--color-6);
}
.mp-pill.active {
	background: var(--color-1);
	color: #fff;
}

.mp-button-primary {
	background: var(--color-1);
	color: #fff;
}
.mp-button-primary:hover {
	background: var(--color-2);
}
.mp-button-secondary {
	background: var(--color-7);
	color: var(--color-4);
	border-color: var(--color-6);
}
.mp-button-secondary:hover {
	background: var(--color-1);
	color: #fff;
}

input,
textarea,
select {
	color: var(--color-4);
	border-bottom: 1px solid var(--color-6);
	background: transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
input:focus,
textarea:focus,
select:focus {
	border-bottom-color: var(--color-1);
}

/* ============================================================
   5. Darkmode Toggle
============================================================ */
#mp-darkmode-toggle {
	background: var(--color-7);
	color: var(--color-4);
	border: 1px solid var(--color-6);
	border-radius: 50%;
	width: 34px;
	height: 34px;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#mp-darkmode-toggle:hover {
	background: var(--color-1);
	color: #fff;
}

/* ============================================================
   6. Feinjustierungen (Dark Mode)
============================================================ */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
	color: var(--mietp-text-dark, #f0f0f0) !important;
	background: var(--mietp-surface-dark, #2a2a2a) !important;
	border-bottom: 1px solid var(--mietp-border-dark, #555) !important;
}
html.dark-mode ::placeholder {
	color: #aaa !important;
}

html.dark-mode .mp-pill {
	background: var(--mietp-surface-dark, #2d2d2d) !important;
	color: var(--mietp-text-muted-dark, #ddd) !important;
	border: 1px solid var(--mietp-border-dark, #444) !important;
}
html.dark-mode .mp-pill:hover,
html.dark-mode .mp-pill.active {
	background: var(--color-1) !important;
	color: #fff !important;
	border-color: var(--color-1) !important;
}

html.dark-mode .gm-style,
html.dark-mode .gm-style iframe {
	filter: brightness(0.6) contrast(1.1) saturate(0.8);
}

html.dark-mode .mp-white-block,
html.dark-mode .mp-white-block * {
	color: var(--mietp-text-dark, #e5e5e5) !important;
}
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
	color: #fff !important;
}