/* DK-LAN Dark Theme (einheitlich) */
body.dark-theme {
  --bg-body: #0b1020;
  --bg-menu: rgba(17, 24, 39, 0.92);
  --bg-panel: rgba(255, 255, 255, 0.10);
  --bg-panel-strong: rgba(255, 255, 255, 0.14);

  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-muted: rgba(255, 255, 255, 0.60);

  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);

  --accent: rgba(59, 130, 246, 0.90);         /* blau */
  --danger: rgba(239, 68, 68, 0.90);
  --success: rgba(34, 197, 94, 0.85);

	/* Buttons */
	--btn-primary: var(--accent);
	--btn-primary-hover: rgba(37, 99, 235, 0.95);

	--btn-danger: rgba(239, 68, 68, 0.95);
	--btn-danger-hover: rgba(220, 38, 38, 0.95);

	--menu-hover: rgba(255, 255, 255, 0.08);
	--menu-active: rgba(59, 130, 246, 0.30);
	
	/* Success Buttons */
  --btn-success: var(--success);
  --btn-success-hover: color-mix(in srgb, var(--success) 80%, black);
}

/* Body */
body.dark-theme {
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
}

/* Menüflächen (Topbar + Sidebar) */
body.dark-theme .dkMenuSurface {
  background: var(--bg-menu) !important;
}
body.dark-theme #dkSidebar {
  border-right: 1px solid var(--border) !important;
}

/* Typische Panels/Boxen (deine häufig genutzten Tailwind-Flächen) */
body.dark-theme .bg-white\/10,
body.dark-theme .bg-gray-800\/30,
body.dark-theme .bg-gray-800\/40,
body.dark-theme .bg-gray-800\/50,
body.dark-theme .bg-gray-900\/60,
body.dark-theme .bg-gray-900\/95 {
  background: var(--bg-panel) !important;
  border-color: var(--border) !important;
}

/* Inputs */
body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
  background: rgba(0, 0, 0, 0.25) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
body.dark-theme input:focus,
body.dark-theme select:focus,
body.dark-theme textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Menü: Hover/Active (nutzt deine neuen Variablen) */
body.dark-theme .hover\:bg-\[var\(--menu-hover\)\]:hover {
  background: var(--menu-hover) !important;
}
body.dark-theme .bg-\[var\(--menu-active\)\] {
  background: var(--menu-active) !important;
}