/**
 * DME Community - gemeinsame CSS-Variablen und Basis-Utilities - Reskin "Bunker Net".
 * Von allen Modul-Stylesheets als Dependency genutzt (Handle: dmc-community).
 *
 * Wrapper-Klasse: .dmc  -> jedes Modul rendert seinen Frontend-Output in einem
 * Element mit class="dmc ..." damit die Variablen/Resets greifen.
 *
 * Dunkles, taktisches Survival-Theme: Glassmorphism, Cyan-Glow, Chakra Petch
 * (Display/UI) + Manrope (Body). Die Variablen-NAMEN bleiben unveraendert, damit
 * alle Module den neuen Look automatisch erben. Das Forum (.dmc-forum-bunker)
 * ueberschreibt diese Basis mit eigenen Tokens.
 */

.dmc {
	/* Bunker-Net-Palette (Variablennamen beibehalten, nur Werte angepasst) */
	--dmc-accent: #22d3ee;
	--dmc-accent-dim: rgba(34, 211, 238, 0.16);
	--dmc-gold: #fbbf24;
	--dmc-bg: #070b0e;
	--dmc-bg2: #0a1116;
	--dmc-card: rgba(18, 28, 34, 0.55);
	--dmc-border: rgba(110, 200, 210, 0.13);
	--dmc-muted: #7e949c;
	--dmc-red: #fb7185;
	--dmc-blue: #22d3ee;
	--dmc-text: #d6e4e8;

	/* Zusaetzliche Bunker-Net-Tokens */
	--dmc-cyan-br: #5eeaff;
	--dmc-teal: #2dd4bf;
	--dmc-line2: rgba(110, 200, 210, 0.26);
	--dmc-glass2: rgba(22, 34, 41, 0.70);

	--dmc-radius: 14px;
	--dmc-glow: 0 0 0 1px rgba(110, 200, 210, 0.26), 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 26px rgba(34, 211, 238, 0.12);
	--dmc-gap: 16px;

	position: relative;
	z-index: 0;
	color: var(--dmc-text);
	font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	line-height: 1.55;
	box-sizing: border-box;
}

.dmc *,
.dmc *::before,
.dmc *::after {
	box-sizing: border-box;
}

/* Sehr dezenter Ambient-Glow (Cyan/Teal) - mit Maske, die INNERHALB der Box
   auf 0 laeuft, damit keine harte Kante entsteht. Liegt hinter dem Inhalt.
   Das Forum bringt seinen eigenen Ambient via .dmc-forum-bunker mit. */
.dmc::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(58% 48% at 14% 4%, rgba(34, 211, 238, 0.06), transparent 60%),
		radial-gradient(55% 45% at 88% 0%, rgba(45, 212, 191, 0.05), transparent 62%);
	-webkit-mask-image: radial-gradient(88% 76% at 50% 42%, #000 0%, #000 34%, transparent 74%);
	mask-image: radial-gradient(88% 76% at 50% 42%, #000 0%, #000 34%, transparent 74%);
}

/* Layout-Container - dezent, transparent, kein harter Kasten */
.dmc-wrap {
	background: transparent;
	border: 1px solid var(--dmc-border);
	border-radius: 16px;
	padding: 20px;
}

/* Cards - Glassmorphism */
.dmc-card {
	background: var(--dmc-card);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid var(--dmc-border);
	border-radius: 16px;
	padding: 16px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.4);
}

.dmc-card + .dmc-card {
	margin-top: 12px;
}

/* Headings / muted text */
.dmc h1,
.dmc h2,
.dmc h3 {
	color: #fff;
	margin: 0 0 12px;
	font-family: 'Chakra Petch', 'Manrope', sans-serif;
	font-weight: 700;
	letter-spacing: .03em;
}

.dmc-muted {
	color: var(--dmc-muted);
}

.dmc-accent {
	color: var(--dmc-accent);
}

.dmc-gold {
	color: var(--dmc-gold);
}

.dmc a {
	color: var(--dmc-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}

.dmc a:hover {
	color: var(--dmc-cyan-br);
	text-decoration: none;
}

/* Buttons - Glass */
.dmc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--dmc-border);
	border-radius: 12px;
	background: rgba(110, 200, 210, 0.06);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	/* Textfarbe + kein Unterstrich gegen Theme-Link-Styles erzwingen (Lesbarkeit). */
	color: var(--dmc-text) !important;
	font-family: 'Chakra Petch', sans-serif;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
	text-decoration: none !important;
	line-height: 1.2;
}

.dmc-btn:hover, .dmc-btn:focus {
	border-color: var(--dmc-line2);
	color: var(--dmc-cyan-br) !important;
	box-shadow: 0 0 0 1px var(--dmc-line2), 0 0 18px rgba(34, 211, 238, 0.18);
	text-decoration: none !important;
}

.dmc-btn-primary,
.dmc-btn-primary:hover,
.dmc-btn-primary:focus {
	background: linear-gradient(135deg, var(--dmc-accent), var(--dmc-teal));
	border-color: transparent;
	color: #04141a !important; /* dunkler Text auf Cyan/Teal, immer lesbar */
	font-weight: 700;
	box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 8px 22px rgba(34, 211, 238, 0.22);
}

.dmc-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px rgba(94, 234, 255, 0.5), 0 10px 30px rgba(34, 211, 238, 0.4);
}

.dmc-btn-danger,
.dmc-btn-danger:hover,
.dmc-btn-danger:focus {
	border-color: rgba(251, 113, 133, 0.5);
	color: var(--dmc-red) !important;
	background: rgba(251, 113, 133, 0.08);
}

.dmc-btn-danger:hover {
	box-shadow: 0 0 16px rgba(251, 113, 133, 0.2);
}

.dmc-btn[disabled],
.dmc-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Form-Felder - dunkler Glass mit Cyan-Fokus-Glow */
.dmc-input,
.dmc-textarea,
.dmc-select {
	width: 100%;
	padding: 9px 12px;
	background: rgba(7, 11, 14, 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--dmc-border);
	border-radius: 12px;
	color: var(--dmc-text);
	font-family: 'Manrope', sans-serif;
}

.dmc-input::placeholder,
.dmc-textarea::placeholder {
	color: var(--dmc-muted);
	opacity: 0.8;
}

.dmc-input:focus,
.dmc-textarea:focus,
.dmc-select:focus {
	outline: none;
	border-color: var(--dmc-accent);
	box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12), 0 0 22px rgba(34, 211, 238, 0.14);
}

.dmc-textarea {
	min-height: 120px;
	resize: vertical;
}

.dmc-field {
	margin-bottom: 14px;
}

.dmc-field label {
	display: block;
	margin-bottom: 6px;
	color: var(--dmc-muted);
	font-family: 'Chakra Petch', sans-serif;
	font-weight: 600;
	letter-spacing: .02em;
	font-size: 0.9em;
}

/* Status-Pills */
.dmc-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-family: 'Chakra Petch', sans-serif;
	font-size: 0.78em;
	font-weight: 700;
	background: var(--dmc-glass2);
	color: var(--dmc-muted);
	border: 1px solid var(--dmc-border);
}

.dmc-pill-accent {
	color: var(--dmc-accent);
	border-color: var(--dmc-line2);
}

.dmc-pill-gold {
	color: var(--dmc-gold);
	border-color: rgba(251, 191, 36, 0.5);
}

.dmc-pill-red {
	color: var(--dmc-red);
	border-color: rgba(251, 113, 133, 0.5);
}

.dmc-pill-blue {
	color: var(--dmc-blue);
	border-color: var(--dmc-line2);
}

/* Ungelesen-/Counter-Badge */
.dmc-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--dmc-red);
	color: #04141a;
	font-family: 'Chakra Petch', sans-serif;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1;
}

/* Toast / Inline-Meldungen */
.dmc-toast-host {
	position: fixed;
	right: 18px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 99999;
}

.dmc-toast {
	background: var(--dmc-glass2);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--dmc-border);
	border-left: 3px solid var(--dmc-accent);
	border-radius: 12px;
	padding: 12px 16px;
	color: var(--dmc-text);
	box-shadow: var(--dmc-glow);
	max-width: 340px;
	animation: dmc-toast-in 0.18s ease;
}

.dmc-toast-error {
	border-left-color: var(--dmc-red);
}

@keyframes dmc-toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.dmc-notice {
	border-radius: 12px;
	padding: 10px 14px;
	margin: 10px 0;
	border: 1px solid var(--dmc-border);
	background: var(--dmc-glass2);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.dmc-notice-error {
	border-color: rgba(251, 113, 133, 0.5);
	color: var(--dmc-red);
}

.dmc-notice-ok {
	border-color: rgba(45, 212, 191, 0.5);
	color: var(--dmc-teal);
}

/* Helfer */
.dmc-hidden { display: none !important; }
.dmc-flex { display: flex; gap: var(--dmc-gap); }
.dmc-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dmc-grid { display: grid; gap: var(--dmc-gap); }

/* Dezente Cyan-Scrollbars innerhalb von Community-Bereichen */
.dmc * {
	scrollbar-width: thin;
	scrollbar-color: rgba(34, 211, 238, 0.3) transparent;
}

.dmc *::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.dmc *::-webkit-scrollbar-track {
	background: transparent;
}

.dmc *::-webkit-scrollbar-thumb {
	background: rgba(34, 211, 238, 0.22);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

.dmc *::-webkit-scrollbar-thumb:hover {
	background: rgba(34, 211, 238, 0.4);
	background-clip: padding-box;
}

/* ======================================================== *
 *  Responsive (Mobile) - nur Ueberschreibungen, kein Desktop-Eingriff
 * ======================================================== */
@media (max-width: 600px) {
	/* Container-Padding reduzieren, mehr Platz auf kleinen Screens */
	.dmc-wrap {
		padding: 14px;
	}

	.dmc-card {
		padding: 12px;
	}

	/* Toolbar/Filterzeilen umbrechen statt abschneiden */
	.dmc-flex,
	.dmc-flex-between {
		flex-wrap: wrap;
	}

	/* Touch-Targets >= 40px */
	.dmc-btn {
		min-height: 40px;
	}

	/* Eingabefelder mit komfortabler Touch-Hoehe */
	.dmc-input,
	.dmc-textarea,
	.dmc-select {
		min-height: 40px;
	}

	/* Toasts spannen ueber die Breite, nicht rechts abgeschnitten */
	.dmc-toast-host {
		left: 12px;
		right: 12px;
		bottom: 12px;
	}

	.dmc-toast {
		max-width: none;
	}
}

@media (max-width: 420px) {
	.dmc-wrap {
		padding: 10px;
	}
}

/* === Mobile-Lesbarkeit (<=640px) === */
@media (max-width: 640px) {
	/* 1) Grundtext-Mindestgroesse: verhindert Android-Schrumpfen.
	   font-size in px statt em, damit em-basierte Kinder eine lesbare Basis erben. */
	.dmc {
		font-size: 15px;
		line-height: 1.6;
	}

	/* Lange Strings (Links, IDs, Steam-Namen, URLs) sicher umbrechen */
	.dmc,
	.dmc p,
	.dmc a,
	.dmc li,
	.dmc td,
	.dmc h1,
	.dmc h2,
	.dmc h3 {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Sekundaere/dimmed Labels, Meta- und Feldbeschriftungen >= 13px */
	.dmc-muted,
	.dmc-field label {
		font-size: 13px;
	}

	/* Tags/Pills/Status-Labels >= 13px (vorher 0.78em ~ 11.7px) */
	.dmc-pill,
	.dmc-pill-accent,
	.dmc-pill-gold,
	.dmc-pill-red,
	.dmc-pill-blue {
		font-size: 13px;
	}

	/* Counter-/Ungelesen-Badge: kleinste UI-Schrift auf 12px anheben (vorher 0.72em ~ 10.8px) */
	.dmc-count {
		font-size: 12px;
	}

	/* Buttons: lesbare, gut antippbare Beschriftung */
	.dmc-btn {
		font-size: 14px;
	}

	/* Eingaben mind. 16px -> verhindert iOS/Android-Auto-Zoom und bleibt lesbar */
	.dmc-input,
	.dmc-textarea,
	.dmc-select,
	.dmc-input::placeholder,
	.dmc-textarea::placeholder {
		font-size: 16px;
	}

	/* Toasts/Hinweise klar lesbar */
	.dmc-toast,
	.dmc-notice {
		font-size: 14px;
	}

	/* 2) Ueberlauf-Sicherheit: Wurzel-/Hauptcontainer nie breiter als Viewport */
	.dmc,
	.dmc-wrap,
	.dmc-card {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		overflow-wrap: anywhere;
	}

	/* Grosse horizontale Paddings mobil reduzieren */
	.dmc-wrap {
		padding-left: 12px;
		padding-right: 12px;
	}

	.dmc-card {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* 3) Breite Grids mobil einspaltig, damit nichts ueber den Rand laeuft */
	.dmc-grid {
		grid-template-columns: 1fr;
	}

	/* Tabellen-/Code-artige Inhalte horizontal scrollbar statt Viewport sprengen */
	.dmc table,
	.dmc pre {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}