/* ================================================================
   DATENKERN Interface Theme
   ZIP reference implementation layer: enterprise light/dark shell,
   shared customer + Datenkern team panel styling.
   ================================================================ */

:root {
  color-scheme: dark;
  --brand: #c43a66;
  --brand-dark: #9f284e;
  --brand-deeper: #7d1f3d;
  --brand-light: rgba(196, 58, 102, 0.10);
  --brand-glow: rgba(196, 58, 102, 0.18);
  --brand-glow-lg: rgba(196, 58, 102, 0.28);
  --accent-pink: #d4688a;
  --accent-blue: #b75d7f;
  --accent-blue-l: rgba(183, 93, 127, 0.10);
  --bg-body: #0f0d11;
  --bg-card: rgba(23, 19, 25, 0.90);
  --bg-surface: rgba(31, 26, 33, 0.94);
  --bg-hover: rgba(196, 58, 102, 0.16);
  --bg-active: rgba(196, 58, 102, 0.24);
  --bg-muted: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.12);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.18);
  --border-focus: rgba(236, 72, 153, 0.45);
  --text-heading: #f6f1f4;
  --text-body: #e5d9df;
  --text-secondary: #b7a8b0;
  --text-muted: #8f7f88;
  --blue: #c43a66;
  --blue-light: rgba(196, 58, 102, 0.10);
  --red: #ef4444;
  --red-light: rgba(239, 68, 68, 0.10);
  --green: #00a878;
  --green-light: rgba(0, 168, 120, 0.11);
  --yellow: #f59e0b;
  --yellow-light: rgba(245, 158, 11, 0.13);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.32);
  --shadow-sm: 0 14px 32px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.02);
  --shadow-md: 0 22px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.03);
  --shadow-lg: 0 34px 86px rgba(0,0,0,.54), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-brand: 0 14px 32px rgba(159, 40, 78, 0.20);
  --sidebar-bg-a: rgba(19, 16, 20, 0.98);
  --sidebar-bg-b: rgba(12, 10, 14, 0.99);
  --sidebar-radial: rgba(196, 58, 102, 0.08);
  --sidebar-border: rgba(255, 255, 255, 0.10);
  --sidebar-link-color: rgba(233, 224, 229, 0.76);
  --sidebar-link-hover-bg: rgba(196, 58, 102, 0.10);
  --sidebar-link-hover-color: #ffffff;
  --sidebar-group-label: rgba(228, 214, 222, 0.56);
  --sidebar-brand-name-color: #f7f1f4;
  --sidebar-brand-tagline-color: #c6b2bb;
  --sidebar-user-border: rgba(255, 255, 255, 0.12);
  --sidebar-user-bg: rgba(255, 255, 255, 0.04);
  --sidebar-active-a: rgba(196, 58, 102, 0.92);
  --sidebar-active-b: rgba(159, 40, 78, 0.84);
  --sidebar-active-border: rgba(196, 58, 102, 0.32);
  --sidebar-active-dot: #f2c4d3;
  --sidebar-active-dot-glow: rgba(196, 58, 102, 0.42);
  --sidebar-line-a: #c43a66;
  --sidebar-line-b: #d4688a;
  --font-ui: "Inter", "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Sora", "SF Pro Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 360ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --sidebar-w: 292px;
  --topbar-h: 72px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-body: #131115;
  --bg-card: rgba(28, 24, 30, 0.88);
  --bg-surface: rgba(37, 31, 39, 0.92);
  --bg-hover: rgba(196, 58, 102, 0.14);
  --bg-active: rgba(196, 58, 102, 0.20);
  --bg-muted: rgba(148, 163, 184, 0.10);
  --border: rgba(148, 163, 184, 0.16);
  --border-light: rgba(148, 163, 184, 0.09);
  --border-medium: rgba(148, 163, 184, 0.22);
  --text-heading: #f8fafc;
  --text-body: #dce7f7;
  --text-secondary: #a7b7cf;
  --text-muted: #8190a8;
  --brand: #d4688a;
  --brand-dark: #b14f72;
  --brand-light: rgba(212, 104, 138, 0.17);
  --brand-glow: rgba(212, 104, 138, 0.30);
  --brand-glow-lg: rgba(212, 104, 138, 0.42);
  --blue: #d4688a;
  --blue-light: rgba(212, 104, 138, 0.18);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-sm: 0 14px 34px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.015);
  --shadow-md: 0 22px 54px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-lg: 0 34px 86px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.035);
  --sidebar-bg-a: rgba(25, 20, 27, 0.98);
  --sidebar-bg-b: rgba(16, 13, 18, 0.99);
  --sidebar-radial: rgba(212, 104, 138, 0.18);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-link-color: rgba(226, 232, 240, 0.72);
  --sidebar-link-hover-bg: rgba(212, 104, 138, 0.14);
  --sidebar-link-hover-color: #ffffff;
  --sidebar-group-label: rgba(203, 213, 225, 0.58);
  --sidebar-brand-name-color: #f8fafc;
  --sidebar-brand-tagline-color: #9eb4d2;
  --sidebar-user-border: rgba(255,255,255,.09);
  --sidebar-user-bg: rgba(255,255,255,.035);
  --sidebar-active-a: rgba(196, 58, 102, 0.90);
  --sidebar-active-b: rgba(159, 40, 78, 0.80);
  --sidebar-active-border: rgba(212, 104, 138, 0.34);
  --sidebar-active-dot: #f6c9d7;
  --sidebar-active-dot-glow: rgba(212, 104, 138, 0.60);
  --sidebar-line-a: #c43a66;
  --sidebar-line-b: #d4688a;
}

html[data-theme="pink"] {
  color-scheme: dark;
  --bg-body: #0b090d;
  --bg-card: rgba(22, 16, 24, 0.92);
  --bg-surface: rgba(30, 22, 32, 0.95);
  --bg-hover: rgba(236, 72, 153, 0.16);
  --bg-active: rgba(244, 114, 182, 0.24);
  --bg-muted: rgba(255,255,255,.05);
  --border: rgba(236, 72, 153, 0.24);
  --border-light: rgba(236, 72, 153, 0.14);
  --border-medium: rgba(236, 72, 153, 0.28);
  --text-heading: #fde7f3;
  --text-body: #f2d8e6;
  --text-secondary: #d3a9bf;
  --text-muted: #a87f95;
  --brand: #ec4899;
  --brand-dark: #db2777;
  --brand-deeper: #be185d;
  --brand-light: rgba(236, 72, 153, 0.14);
  --brand-glow: rgba(236, 72, 153, 0.24);
  --brand-glow-lg: rgba(236, 72, 153, 0.36);
  --accent-pink: #f472b6;
  --accent-blue: #ec4899;
  --blue: #ec4899;
  --blue-light: rgba(236, 72, 153, 0.10);
  --red: #fb7185;
  --red-light: rgba(251, 113, 133, 0.12);
  --green: #4ade80;
  --green-light: rgba(74, 222, 128, 0.12);
  --yellow: #fbbf24;
  --yellow-light: rgba(251, 191, 36, 0.13);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 14px 34px rgba(0,0,0,.40), 0 0 0 1px rgba(236,72,153,.06);
  --shadow-md: 0 22px 54px rgba(0,0,0,.48), 0 0 0 1px rgba(236,72,153,.10);
  --shadow-lg: 0 34px 84px rgba(0,0,0,.58), 0 0 0 1px rgba(236,72,153,.16);
  --sidebar-bg-a: rgba(21, 14, 22, 0.98);
  --sidebar-bg-b: rgba(12, 8, 14, 0.99);
  --sidebar-radial: rgba(236, 72, 153, 0.20);
  --sidebar-border: rgba(236, 72, 153, 0.20);
  --sidebar-link-color: rgba(245,226,236,.80);
  --sidebar-link-hover-bg: rgba(236, 72, 153, 0.10);
  --sidebar-link-hover-color: #ffffff;
  --sidebar-group-label: rgba(230,190,210,.58);
  --sidebar-brand-name-color: #fbe7f0;
  --sidebar-brand-tagline-color: #d8a9bf;
  --sidebar-user-border: rgba(236,72,153,.20);
  --sidebar-user-bg: rgba(255,255,255,.04);
  --sidebar-active-a: rgba(236,72,153,.90);
  --sidebar-active-b: rgba(219,39,119,.82);
  --sidebar-active-border: rgba(236,72,153,.30);
  --sidebar-active-dot: #f472b6;
  --sidebar-active-dot-glow: rgba(244,114,182,.60);
  --sidebar-line-a: #ec4899;
  --sidebar-line-b: #f472b6;
}

body.portal-body,
body.dk-team-interface,
body.dk-login-page {
  background:
    radial-gradient(circle at 14% 4%, rgba(196, 58, 102, 0.07), transparent 28rem),
    radial-gradient(circle at 88% 10%, rgba(212, 104, 138, 0.05), transparent 24rem),
    linear-gradient(135deg, #050506 0%, #0a0a0b 58%, #030304 100%);
  color: var(--text-body);
  position: relative;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-theme="dark"] body.portal-body,
html[data-theme="dark"] body.dk-team-interface,
html[data-theme="dark"] body.dk-login-page {
  background:
    radial-gradient(circle at 14% 0%, rgba(196, 58, 102, 0.10), transparent 28rem),
    radial-gradient(circle at 86% 8%, rgba(159, 40, 78, 0.07), transparent 24rem),
    linear-gradient(135deg, #030304 0%, #09090a 46%, #020203 100%);
}

html[data-theme="pink"] body.portal-body,
html[data-theme="pink"] body.dk-team-interface,
html[data-theme="pink"] body.dk-login-page {
  background:
    radial-gradient(circle at 14% 0%, rgba(236, 72, 153, 0.12), transparent 30rem),
    radial-gradient(circle at 86% 8%, rgba(244, 114, 182, 0.09), transparent 24rem),
    radial-gradient(circle at 48% 78%, rgba(236, 72, 153, 0.05), transparent 22rem),
    linear-gradient(135deg, #020203 0%, #070708 48%, #010102 100%);
}

body.portal-body::after,
body.dk-team-interface::after,
body.dk-login-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.18) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 74% 34%, rgba(255,255,255,.12) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 58% 76%, rgba(255,255,255,.14) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 86% 62%, rgba(255,255,255,.08) 0 1.1px, transparent 2.1px);
  opacity: .28;
  animation: dkDreamSparkle 10s ease-in-out infinite alternate;
}

html[data-theme="pink"] body.portal-body::after,
html[data-theme="pink"] body.dk-team-interface::after,
html[data-theme="pink"] body.dk-login-page::after {
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.24) 0 1.7px, transparent 2.7px),
    radial-gradient(circle at 74% 34%, rgba(255,255,255,.18) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 58% 76%, rgba(255,255,255,.20) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 86% 62%, rgba(255,255,255,.12) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 36% 64%, rgba(255,210,242,.12) 0 1.4px, transparent 2.4px);
  opacity: .34;
  animation: dkDreamSparklePrincess 7.4s ease-in-out infinite alternate;
}

@keyframes dkDreamSparkle {
  0% { opacity: .2; filter: drop-shadow(0 0 1px rgba(255,255,255,.16)); }
  100% { opacity: .34; filter: drop-shadow(0 0 4px rgba(255,182,229,.20)); }
}

@keyframes dkDreamSparklePrincess {
  0% { opacity: .28; filter: drop-shadow(0 0 2px rgba(255,255,255,.20)); }
  100% { opacity: .42; filter: drop-shadow(0 0 6px rgba(255,158,227,.28)); }
}

#dk-portal-bg-canvas { opacity: 0.52; mix-blend-mode: multiply; }
html[data-theme="dark"] #dk-portal-bg-canvas { opacity: 0.42; mix-blend-mode: screen; }
html[data-theme="pink"] #dk-portal-bg-canvas { opacity: 0.34; mix-blend-mode: multiply; }

.card,
.pk-kpi,
.stat-card,
.pk-table-wrap,
.table-wrap,
.empty-state {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.card:hover,
.pk-kpi:hover,
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-header { background: linear-gradient(180deg, rgba(255,255,255,.32), transparent); }
html[data-theme="dark"] .card-header { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); }

.btn-primary,
.dk-btn-primary,
.dk-btn.dk-btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--brand) 34%, transparent) !important;
}
.btn-primary:hover,
.dk-btn-primary:hover,
.dk-btn.dk-btn-primary:hover { box-shadow: 0 18px 38px color-mix(in srgb, var(--brand) 44%, transparent) !important; }
html[data-theme="pink"] .btn-primary,
html[data-theme="pink"] .dk-btn-primary,
html[data-theme="pink"] .dk-btn.dk-btn-primary {
  box-shadow: 0 14px 30px rgba(236,72,153,.44), 0 0 0 1px rgba(255,255,255,.12) inset !important;
}
html[data-theme="pink"] .btn-primary:hover,
html[data-theme="pink"] .dk-btn-primary:hover,
html[data-theme="pink"] .dk-btn.dk-btn-primary:hover {
  box-shadow: 0 20px 44px rgba(236,72,153,.54), 0 0 22px rgba(244,114,182,.45) !important;
}
.btn-secondary,
.dk-btn-secondary,
.dk-btn.dk-btn-secondary {
  background: var(--bg-card) !important;
  color: var(--text-body) !important;
  border-color: var(--border-medium) !important;
}

.module-hero {
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.75rem 2rem;margin-bottom:2rem;
  background:linear-gradient(135deg,rgba(255,20,147,.15) 0%,rgba(15,12,41,.85) 60%);
  border:1px solid rgba(255,20,147,.25);border-radius:16px;
}
.module-hero h1 { font-size:1.5rem;font-weight:800;color:#fff4fb;margin:0 0 .3rem; }
.module-kicker { font-size:.7rem;font-weight:700;color:rgba(199,210,254,.5);letter-spacing:.06em;text-transform:uppercase;margin:0 0 .5rem; }
.module-actions { display:flex;align-items:center;gap:.6rem;flex-shrink:0;flex-wrap:wrap; }

.badge-primary,
.badge-info { background: var(--blue-light); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 32%, transparent); }
.badge-success { background: var(--green-light); color: #00946d; }
.badge-warning { background: var(--yellow-light); color: #b77900; }
.badge-danger { background: var(--red-light); color: var(--red); }
.badge-demo { background: rgba(234,179,8,.15); color: #eab308; border:1px solid rgba(234,179,8,.3); text-transform:uppercase; font-weight:700; font-size:.68rem; letter-spacing:.04em; }
html[data-theme="dark"] .badge-success { color: #34d399; }
html[data-theme="dark"] .badge-warning { color: #fbbf24; }
html[data-theme="dark"] .badge-danger { color: #fb7185; }

.sidebar {
  width: var(--sidebar-w);
  background:
    linear-gradient(180deg, var(--sidebar-bg-a) 0%, var(--sidebar-bg-b) 100%),
    radial-gradient(circle at top, var(--sidebar-radial), transparent 22rem);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 14px 0 50px rgba(7, 17, 29, 0.22);
}
.sidebar::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sidebar-line-a), var(--sidebar-line-b), transparent);
}
.sidebar-brand {
  min-height: 224px;
  height: auto;
  padding: 1.6rem 1.35rem 1.35rem;
  justify-content: center;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-brand-link,
.dk-brand {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.35rem;
  width: 100%;
}
.sidebar-brand-logo,
.dk-brand img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px color-mix(in srgb, var(--brand) 36%, transparent));
}
.sidebar-brand-icon { display: none; }
.sidebar-brand-name,
.dk-brand-name {
  display: block;
  font-size: 1.58rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.105em;
  color: var(--sidebar-brand-name-color);
  text-transform: uppercase;
}
.sidebar-brand-tagline,
.dk-brand-tagline {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.135em;
  color: var(--sidebar-brand-tagline-color);
  text-transform: uppercase;
  margin-top: 0.12rem;
}
.sidebar-nav { padding: 0.95rem 0.8rem; }
.sidebar-group-label { padding: 1.05rem 0.68rem 0.42rem; color: var(--sidebar-group-label); }
.sidebar-link {
  min-height: 42px;
  margin: 0.14rem 0;
  padding: 0.62rem 0.78rem;
  border-radius: 12px;
  color: var(--sidebar-link-color);
}
.sidebar-link:hover { background: var(--sidebar-link-hover-bg); color: var(--sidebar-link-hover-color); }
.sidebar-link.active {
  background: linear-gradient(135deg, var(--sidebar-active-a), var(--sidebar-active-b));
  border: 1px solid var(--sidebar-active-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px color-mix(in srgb, var(--brand) 30%, transparent);
}
.sidebar-link.active::before { background: var(--sidebar-active-dot); box-shadow: 0 0 16px var(--sidebar-active-dot-glow); }
.sidebar-footer { border-top-color: var(--sidebar-border); padding: 0.9rem 1rem 1.1rem; }
.sidebar-user-mini { border: 1px solid var(--sidebar-user-border); background: var(--sidebar-user-bg); }
.sidebar-user-avatar,
.topbar-avatar { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 10px 22px color-mix(in srgb, var(--brand) 34%, transparent); }

.topbar {
  left: var(--sidebar-w);
  height: var(--topbar-h);
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.045);
}
html[data-theme="dark"] .topbar {
  background: rgba(7, 17, 29, 0.72);
  border-bottom-color: rgba(148, 163, 184, 0.14);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.24);
}
html[data-theme="pink"] .topbar {
  background: rgba(19, 8, 29, 0.76);
  border-bottom-color: rgba(236, 72, 153, 0.22);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
}
.main-content {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  padding: 2rem;
}
.topbar-bell,
.topbar-user,
.topbar-logout,
.area-switcher,
.dk-theme-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.dk-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: var(--text-secondary);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.dk-theme-toggle:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 36%, transparent); transform: translateY(-1px); }
.dk-theme-toggle svg { width: 17px; height: 17px; }
.dk-theme-toggle .moon { display: none; }
html[data-theme="dark"] .dk-theme-toggle .sun { display: none; }
html[data-theme="dark"] .dk-theme-toggle .moon { display: block; }
.dk-theme-toggle .spark { display: none; }
html[data-theme="pink"] .dk-theme-toggle .sun,
html[data-theme="pink"] .dk-theme-toggle .moon { display: none; }
html[data-theme="pink"] .dk-theme-toggle .spark { display: block; }

.stat-card::after,
.pk-kpi::after { background: linear-gradient(90deg, var(--brand), var(--brand-dark)); }
.stat-icon,
.pk-kpi-icon { background: var(--blue-light); color: var(--brand); }
.stat-value,
.pk-kpi-val { color: var(--text-heading); }

.dk-table th,
th { background: color-mix(in srgb, var(--bg-surface) 84%, transparent); }
.table-wrap { overflow-x: auto; }
input,
select,
textarea,
.form-control,
.dk-form-input,
.dk-form-select,
.dk-form-textarea { background: var(--bg-surface); color: var(--text-body); }
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.dk-form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }

.dk-team-interface {
  --brand: #ec4899;
  --brand-dark: #c026d3;
  --brand-light: rgba(236,72,153,.16);
  --brand-glow: rgba(236,72,153,.28);
  --accent-pink: #f472b6;
  --accent-blue: #d4688a;
}
.dk-team-interface .dk-area-banner.team { background: linear-gradient(90deg, #050506, #9f284e, #050506); }
.dk-team-interface .topbar { background: rgba(255,255,255,.78) !important; border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .dk-team-interface .topbar { background: rgba(7,17,29,.72) !important; }
html[data-theme="pink"] .dk-team-interface .topbar { background: rgba(19,8,29,.76) !important; }
.dk-team-interface .main-content { background: transparent !important; }
.dk-team-interface .sidebar-link.active { color: #fff !important; }
.dk-team-interface .btn-primary,
.dk-team-interface .btn.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important; }

.dk-login-page .dk-login-sitebrand img { max-height: 42px; width: auto; }
.dk-login-page .dk-logo-icon { background-image: url('/assets/brand/datenkern_emblem_transparent.png'); background-size: contain; background-position: center; background-repeat: no-repeat; color: transparent; box-shadow: none; }
.dk-login-page .dk-logo-text { text-transform: uppercase; letter-spacing: .08em; }

/* ── Hamburger Button ── */
#mobileMenuButton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: var(--text-body, #cbd5e1);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  padding: 0;
  margin-right: .5rem;
}
#mobileMenuButton:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
html[data-theme="light"] #mobileMenuButton {
  border-color: rgba(0,0,0,.12);
  color: #374151;
}
html[data-theme="light"] #mobileMenuButton:hover {
  background: rgba(0,0,0,.06);
}

/* ── Sidebar Overlay ── */
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 149;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#sidebarOverlay.visible {
  display: block;
}

@media (max-width: 1024px) {
  :root { --sidebar-w: 292px; }
  .topbar { left: 0; }
  .main-content { margin-left: 0; padding: 1.15rem; }
  .sidebar { transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 150; }
  .sidebar.open { transform: translateX(0); }
  #mobileMenuButton { display: flex; }
}

@media (max-width: 768px) {
  .sidebar-brand { min-height: 190px; }
  .sidebar-brand-logo,
  .dk-brand img { width: 92px; height: 92px; }
  .sidebar-brand-name,
  .dk-brand-name { font-size: 1.28rem; }
  .sidebar-brand-tagline,
  .dk-brand-tagline { font-size: .55rem; }
  .topbar { padding: 0 .9rem; }
  .topbar-area-chips { display: none; }
}

/* ================================================================
   BLACK + NEON PINK GLOBAL OVERRIDE (systemweit)
   ================================================================ */
html[data-theme="pink"],
html[data-theme="pink"]:root {
  --bg-main: #000000;
  --bg-page: #030003;
  --bg-sidebar: #050005;
  --bg-panel: #070007;
  --bg-card: #090009;
  --pink-main: #ff007f;
  --pink-hot: #ff1493;
  --pink-neon: #ff2da8;
  --pink-soft: rgba(255, 20, 147, 0.18);
  --pink-border: rgba(255, 20, 147, 0.65);
  --pink-glow: 0 0 18px rgba(255, 20, 147, 0.65);
  --text-main: #ffffff;
  --text-muted: #c9a7bb;

  --bg-body: var(--bg-page);
  --bg-surface: var(--bg-panel);
  --brand: var(--pink-main);
  --brand-dark: #d6006c;
  --brand-deeper: #a90057;
  --accent-pink: var(--pink-hot);
  --accent-blue: var(--pink-neon);
  --blue: var(--pink-hot);
  --blue-light: var(--pink-soft);
  --border: var(--pink-border);
  --border-light: rgba(255, 20, 147, 0.35);
  --border-medium: rgba(255, 20, 147, 0.5);
  --border-focus: rgba(255, 20, 147, 0.72);
  --text-heading: var(--text-main);
  --text-body: #ffeef8;
  --text-secondary: var(--text-muted);
  --text-muted: #c9a7bb;
  --sidebar-bg-a: #050005;
  --sidebar-bg-b: #020002;
  --sidebar-link-hover-bg: rgba(255, 20, 147, 0.16);
  --sidebar-active-a: rgba(255, 20, 147, 0.95);
  --sidebar-active-b: rgba(255, 45, 168, 0.82);
  --sidebar-active-border: rgba(255, 20, 147, 0.65);
  --shadow-brand: 0 0 18px rgba(255, 20, 147, 0.45);
}

html[data-theme="pink"] body,
html[data-theme="pink"] body.portal-body,
html[data-theme="pink"] body.dk-team-interface,
html[data-theme="pink"] body.dk-login-page {
  background: #000 !important;
  color: var(--text-main);
}

html[data-theme="pink"] .sidebar,
html[data-theme="pink"] .dk-sidebar,
html[data-theme="pink"] .sidebar-nav {
  background: linear-gradient(180deg, #050005 0%, #030003 54%, #000000 100%) !important;
  border-color: rgba(255, 20, 147, 0.28) !important;
}

html[data-theme="pink"] .sidebar-link.active,
html[data-theme="pink"] .dk-side-link.active {
  background: linear-gradient(135deg, rgba(255, 20, 147, 0.38), rgba(255, 45, 168, 0.22)) !important;
  border: 1px solid rgba(255, 20, 147, 0.65) !important;
  box-shadow: 0 0 14px rgba(255, 20, 147, 0.35) !important;
  color: #fff !important;
}

html[data-theme="pink"] .topbar,
html[data-theme="pink"] .portal-topbar,
html[data-theme="pink"] .dk-topbar {
  background: #050005 !important;
  border-color: rgba(255, 20, 147, 0.35) !important;
}

html[data-theme="pink"] .card,
html[data-theme="pink"] .pk-kpi,
html[data-theme="pink"] .panel,
html[data-theme="pink"] .table-wrap,
html[data-theme="pink"] .modal-content {
  background: #090009 !important;
  border-color: rgba(255, 20, 147, 0.35) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 20, 147, 0.14), 0 0 14px rgba(255, 20, 147, 0.16) !important;
}

html[data-theme="pink"] .btn-primary,
html[data-theme="pink"] .btn-go,
html[data-theme="pink"] .kk-hero-btn-primary,
html[data-theme="pink"] .pk-btn-primary {
  background: linear-gradient(135deg, #ff007f, #ff2da8) !important;
  border-color: #ff1493 !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(255, 20, 147, 0.45) !important;
}

html[data-theme="pink"] input,
html[data-theme="pink"] select,
html[data-theme="pink"] textarea,
html[data-theme="pink"] .form-control {
  background: #070007 !important;
  border-color: rgba(255, 20, 147, 0.35) !important;
  color: #fff4fb !important;
}

html[data-theme="pink"] input:focus,
html[data-theme="pink"] select:focus,
html[data-theme="pink"] textarea:focus,
html[data-theme="pink"] .form-control:focus {
  border-color: #ff1493 !important;
  box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.25), 0 0 16px rgba(255, 20, 147, 0.35) !important;
}

html[data-theme="pink"] .badge-info,
html[data-theme="pink"] .badge-primary,
html[data-theme="pink"] .status-info,
html[data-theme="pink"] .pk-kpi.blue .pk-kpi-icon,
html[data-theme="pink"] .pk-avatar.blue {
  background: rgba(255, 20, 147, 0.18) !important;
  border-color: rgba(255, 20, 147, 0.55) !important;
  color: #ff7cc7 !important;
}

html[data-theme="pink"] table th,
html[data-theme="pink"] table td,
html[data-theme="pink"] .table th,
html[data-theme="pink"] .table td {
  border-color: rgba(255, 20, 147, 0.24) !important;
}