/* analyCLIQ shared CSS */

/* CSS Variables - Light Mode */
:root {
  /* Brand colours */
  --cp-primary:          #6366f1;
  --cp-primary-dark:     #4f46e5;
  --cp-primary-light:    #eef2ff;
  --cp-secondary:        #06b6d4;
  --cp-success:          #10b981;
  --cp-warning:          #f59e0b;
  --cp-danger:           #ef4444;

  /* Surfaces */
  --cp-bg:               #f8fafc;
  --cp-card-bg:          #ffffff;
  --cp-input-bg:         #ffffff;
  --cp-border:           #e2e8f0;

  /* Typography */
  --cp-text:             #1e293b;
  --cp-text-muted:       #64748b;

  /* Shadows – Stufen 0–3 (via --cp-shadow-level-* Aliases) */
  --cp-shadow-0:         none;
  --cp-shadow-1:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --cp-shadow-2:         0 4px 12px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.07);
  --cp-shadow-3:         0 10px 25px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.10);
  --cp-shadow-0-lg:      none;
  --cp-shadow-1-lg:      0 10px 25px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.05);
  --cp-shadow-2-lg:      0 14px 35px rgba(0,0,0,.16), 0 6px 16px rgba(0,0,0,.09);
  --cp-shadow-3-lg:      0 20px 50px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.13);
  /* Active shadow – overrideable via Design-Panel */
  --cp-shadow:           var(--cp-shadow-1);
  --cp-shadow-lg:        var(--cp-shadow-1-lg);

  /* Navbar */
  --cp-navbar-bg:        #ffffff;
  --cp-navbar-text:      #1e293b;
  --cp-navbar-border:    #e2e8f0;

  /* Charts */
  --cp-chart-grid:       rgba(0,0,0,.05);
  --cp-chart-text:       #64748b;
  --cp-chart-border:     #ffffff;

  /* ── Template-Design-Vars (via Admin-Panel anpassbar) ── */
  --cp-radius-card:      12px;    /* Ecken: 4px / 12px / 20px */
  --cp-border-width-card: 1px;    /* Rahmen: 0px / 1px / 2px */
}

/* Dark mode tokens via OS preference */
@media (prefers-color-scheme: dark) {
  :root {
    --cp-primary:          #818cf8;
    --cp-primary-dark:     #6366f1;
    --cp-primary-light:    rgba(129, 140, 248, 0.12);
    --cp-secondary:        #22d3ee;
    --cp-success:          #34d399;
    --cp-warning:          #fbbf24;
    --cp-danger:           #f87171;

    --cp-bg:               #0f172a;
    --cp-card-bg:          #1e293b;
    --cp-input-bg:         #0f172a;
    --cp-border:           #334155;

    --cp-text:             #e2e8f0;
    --cp-text-muted:       #94a3b8;

    --cp-shadow:           0 2px 8px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
    --cp-shadow-lg:        0 12px 40px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);

    --cp-navbar-bg:        #1e293b;
    --cp-navbar-text:      #e2e8f0;
    --cp-navbar-border:    #334155;

    --cp-chart-grid:       rgba(255,255,255,.06);
    --cp-chart-text:       #94a3b8;
    --cp-chart-border:     #1e293b;
  }
}

/* Dark mode tokens via JS data-theme="dark" */
html[data-theme="dark"] {
  --cp-primary:          #818cf8;
  --cp-primary-dark:     #6366f1;
  --cp-primary-light:    rgba(129, 140, 248, 0.12);
  --cp-secondary:        #22d3ee;
  --cp-success:          #34d399;
  --cp-warning:          #fbbf24;
  --cp-danger:           #f87171;

  --cp-bg:               #0f172a;
  --cp-card-bg:          #1e293b;
  --cp-input-bg:         #0f172a;
  --cp-border:           #334155;

  --cp-text:             #e2e8f0;
  --cp-text-muted:       #94a3b8;

  --cp-shadow:           0 2px 8px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
  --cp-shadow-lg:        0 12px 40px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);

  --cp-navbar-bg:        #1e293b;
  --cp-navbar-text:      #e2e8f0;
  --cp-navbar-border:    #334155;

  --cp-chart-grid:       rgba(255,255,255,.06);
  --cp-chart-text:       #94a3b8;
  --cp-chart-border:     #1e293b;
}

/* Base */
body {
  color: var(--cp-text);
  background: var(--cp-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Typography */
h1, h2, h3, h4, h5, h6 { color: var(--cp-text); }
a { color: var(--cp-primary); }
a:hover { color: var(--cp-primary-dark); }
.text-muted   { color: var(--cp-text-muted) !important; }
.text-primary { color: var(--cp-primary) !important; }
.text-success { color: var(--cp-success) !important; }
.text-danger  { color: var(--cp-danger)  !important; }
.text-warning { color: var(--cp-warning) !important; }
.text-info    { color: var(--cp-secondary) !important; }

/* Card */
.cp-card {
  background: var(--cp-card-bg);
  border: var(--cp-border-width-card) solid var(--cp-border) !important;
  border-radius: var(--cp-radius-card);
  box-shadow: var(--cp-shadow);
  transition: box-shadow 0.2s;
}
.cp-card:hover { box-shadow: var(--cp-shadow-lg); }

/* Bootstrap card surfaces */
.card {
  background-color: var(--cp-card-bg);
  border-color: var(--cp-border);
  color: var(--cp-text);
}
.card-header, .card-footer {
  background-color: transparent;
  border-color: var(--cp-border);
  color: var(--cp-text);
}

/* Forms */
.form-control,
.form-select {
  background-color: var(--cp-input-bg);
  color: var(--cp-text);
  border-color: var(--cp-border);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--cp-input-bg);
  color: var(--cp-text);
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.form-control::placeholder { color: var(--cp-text-muted); opacity: 1; }
.form-label { color: var(--cp-text); }
.input-group-text {
  background-color: var(--cp-card-bg);
  border-color: var(--cp-border);
  color: var(--cp-text-muted);
}

/* Date input calendar icon */
@media (prefers-color-scheme: dark) {
  input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(.8); }
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(.8);
}

/* Buttons */
.btn { transition: all 0.15s ease; }
.btn-primary {
  background-color: var(--cp-primary);
  border-color: var(--cp-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--cp-primary-dark);
  border-color: var(--cp-primary-dark);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.22);
}
.btn-outline-secondary {
  color: var(--cp-text-muted);
  border-color: var(--cp-border);
}
.btn-outline-secondary:hover {
  background-color: var(--cp-primary-light);
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}
.btn-outline-primary {
  color: var(--cp-primary);
  border-color: var(--cp-primary);
}
.btn-outline-primary:hover {
  background-color: var(--cp-primary);
  color: #fff;
}

/* Navbar */
nav.cp-navbar {
  background-color: var(--cp-navbar-bg) !important;
  border-bottom: 1px solid var(--cp-navbar-border);
  color: var(--cp-navbar-text);
  box-shadow: var(--cp-shadow);
}
nav.cp-navbar .navbar-brand,
nav.cp-navbar .navbar-brand span,
nav.cp-navbar #navUserName { color: var(--cp-navbar-text) !important; }
nav.cp-navbar .btn-outline-light {
  color: var(--cp-navbar-text) !important;
  border-color: var(--cp-navbar-border) !important;
}
nav.cp-navbar .btn-outline-light:hover {
  background-color: var(--cp-primary-light) !important;
  color: var(--cp-primary) !important;
  border-color: var(--cp-primary) !important;
}
nav.cp-navbar .btn-outline-secondary {
  color: var(--cp-navbar-text) !important;
  border-color: var(--cp-navbar-border) !important;
}
nav.cp-navbar .btn-outline-secondary:hover {
  background-color: var(--cp-primary-light) !important;
  color: var(--cp-primary) !important;
  border-color: var(--cp-primary) !important;
}
nav.cp-navbar .btn-link { color: var(--cp-navbar-text) !important; }
nav.cp-navbar .text-muted { color: var(--cp-text-muted) !important; }

/* Sidebar */
#sidebar {
  background: var(--cp-card-bg);
  border-right: 1px solid var(--cp-border);
  flex-shrink: 0;
  width: 230px;
  min-height: calc(100vh - 56px);
  transition: transform 0.25s ease;
}

/* Navigation Side Bar */
.nav-side .nav-link {
  color: var(--cp-text-muted);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s;
}
.nav-side .nav-link:hover {
  background: var(--cp-primary-light);
  color: var(--cp-primary);
}
.nav-side .nav-link.active {
  background: var(--cp-primary-light);
  color: var(--cp-primary);
  font-weight: 600;
}
.nav-section {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text-muted);
  padding: 16px 12px 4px;
}

/* Nav tabs */
.nav-tabs { border-bottom: 2px solid var(--cp-border); }
.nav-tabs .nav-link {
  color: var(--cp-text-muted);
  border-radius: 8px 8px 0 0;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link.active {
  color: var(--cp-primary);
  font-weight: 600;
  border-bottom-color: var(--cp-primary);
  background: none;
}
.nav-tabs .nav-link:hover:not(.active) {
  color: var(--cp-primary);
  background: var(--cp-primary-light);
}

/* Tables */
.table {
  --bs-table-color: var(--cp-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--cp-border);
  --bs-table-striped-bg: rgba(99,102,241,.04);
  --bs-table-hover-bg: var(--cp-primary-light);
}

/* Badges */
.badge { font-weight: 500; letter-spacing: 0.02em; }

/* Alerts */
.alert { border-color: var(--cp-border); }

/* Modals */
.modal-content {
  background-color: var(--cp-card-bg);
  border-color: var(--cp-border);
  color: var(--cp-text);
}
.modal-header, .modal-footer { border-color: var(--cp-border); }

/* Dropdowns */
.dropdown-menu {
  background-color: var(--cp-card-bg);
  border-color: var(--cp-border);
  box-shadow: var(--cp-shadow-lg);
}
.dropdown-item { color: var(--cp-text); }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--cp-primary-light);
  color: var(--cp-primary);
}
.dropdown-item:active { background-color: var(--cp-primary); color: #fff; }
.dropdown-divider { border-color: var(--cp-border); }

/* Pagination */
.pagination .page-link {
  background-color: var(--cp-card-bg);
  border-color: var(--cp-border);
  color: var(--cp-text);
}
.pagination .page-link:hover {
  background-color: var(--cp-primary-light);
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}
.pagination .page-item.active .page-link {
  background-color: var(--cp-primary);
  border-color: var(--cp-primary);
}

/* KPI Cards */
.kpi-card {
  position: relative;
  overflow: hidden;
  padding: 20px 18px;
  border-radius: var(--cp-radius-card);
  background: var(--cp-card-bg);
  border: var(--cp-border-width-card) solid var(--cp-border);
  box-shadow: var(--cp-shadow);
}
.kpi-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cp-primary);
  border-radius: 12px 0 0 12px;
}
.kpi-card.kpi-v::before { background: var(--cp-secondary); }
.kpi-card.kpi-d::before { background: var(--cp-warning); }
.kpi-card.kpi-b::before { background: var(--cp-danger); }
.kpi-card.kpi-b.good::before { background: var(--cp-success); }
.kpi-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.8rem;
  opacity: 0.07;
  pointer-events: none;
}
.kpi-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cp-text-muted);
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--cp-text);
  line-height: 1.1;
  margin-bottom: 4px;
}

/* Chart container */
.chart-container { position: relative; min-height: 220px; }

/* Utility */
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
.card-title-sm {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive sidebar */
@media (max-width: 767px) {
  #sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    z-index: 999;
    height: calc(100vh - 56px);
    transform: translateX(-100%);
  }
  #sidebar.show { transform: translateX(0); }
  #sidebarOverlay {
    display: none;
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(0,0,0,.4);
    z-index: 998;
  }
  #sidebarOverlay.show { display: block; }
}

/* ================================================================== */
/* Dark mode component overrides (JS-forced via data-theme="dark")     */
/* ================================================================== */

html[data-theme="dark"] body { color: var(--cp-text); background: var(--cp-bg); }

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--cp-text); font-weight: 700; }

html[data-theme="dark"] a { color: #93c5fd; }
html[data-theme="dark"] a:hover { color: #bfdbfe; }

html[data-theme="dark"] .text-muted   { color: var(--cp-text-muted) !important; }
html[data-theme="dark"] .text-primary { color: #93c5fd !important; }
html[data-theme="dark"] .text-success { color: var(--cp-success) !important; }
html[data-theme="dark"] .text-danger  { color: var(--cp-danger)  !important; }
html[data-theme="dark"] .text-warning { color: var(--cp-warning) !important; }
html[data-theme="dark"] .text-info    { color: var(--cp-secondary) !important; }

/* Navigation */
html[data-theme="dark"] .nav-section {
  color: var(--cp-text-muted);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
html[data-theme="dark"] .nav-link { color: var(--cp-text-muted); transition: all 0.15s ease; }
html[data-theme="dark"] .nav-link:hover {
  color: var(--cp-text);
  background-color: var(--cp-primary-light);
  border-radius: 6px;
}
html[data-theme="dark"] .nav-link.active {
  color: #93c5fd;
  font-weight: 600;
  background-color: var(--cp-primary-light);
}
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--cp-border); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--cp-text-muted); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--cp-primary);
  border-bottom-color: var(--cp-primary);
  background-color: transparent;
}
html[data-theme="dark"] .nav-side { color: var(--cp-text); }

/* Tables */
html[data-theme="dark"] .table { color: var(--cp-text); }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: rgba(129,140,248,.08) !important;
  color: var(--cp-text);
}

/* Badges */
html[data-theme="dark"] .badge                { background-color: #334155 !important; color: var(--cp-text) !important; }
html[data-theme="dark"] .badge.bg-primary     { background-color: #6366f1 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-secondary   { background-color: #475569 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-success     { background-color: #059669 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-danger      { background-color: #dc2626 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-warning     { background-color: #d97706 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-info        { background-color: #0891b2 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-dark        { background-color: #0f172a !important; color: var(--cp-text) !important; }

/* Alerts */
html[data-theme="dark"] .alert         { background-color: var(--cp-card-bg); border-color: var(--cp-border); color: var(--cp-text); }
html[data-theme="dark"] .alert-success { background-color: rgba(5,150,105,.15);   border-color: #059669; color: #6ee7b7; }
html[data-theme="dark"] .alert-danger  { background-color: rgba(220,38,38,.15);   border-color: #dc2626; color: #fca5a5; }
html[data-theme="dark"] .alert-warning { background-color: rgba(217,119,6,.15);   border-color: #d97706; color: #fde68a; }
html[data-theme="dark"] .alert-info    { background-color: rgba(8,145,178,.15);   border-color: #0891b2; color: #67e8f9; }
html[data-theme="dark"] .alert-primary { background-color: rgba(129,140,248,.15); border-color: #818cf8; color: #c7d2fe; }

/* Pre / code */
html[data-theme="dark"] pre,
html[data-theme="dark"] code { background-color: #0a0f1a; color: #94a3b8; border-color: #334155; }
html[data-theme="dark"] pre.bg-dark { background-color: #0a0f1a !important; color: #94a3b8; }

/* Pagination */
html[data-theme="dark"] .pagination .page-link { background-color: var(--cp-card-bg); border-color: var(--cp-border); color: var(--cp-text); }
html[data-theme="dark"] .pagination .page-link:hover { background-color: var(--cp-primary-light); border-color: var(--cp-primary); color: var(--cp-primary); }
html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--cp-primary); border-color: var(--cp-primary); color: #fff; }

/* Outline-light buttons (navbar) */
html[data-theme="dark"] .btn-outline-light {
  color: var(--cp-navbar-text) !important;
  border-color: var(--cp-border) !important;
}
html[data-theme="dark"] .btn-outline-light:hover {
  background-color: var(--cp-primary-light) !important;
  color: var(--cp-primary) !important;
  border-color: var(--cp-primary) !important;
}

/* Colored buttons */
html[data-theme="dark"] .btn-success { background-color: #059669; border-color: #059669; color: #fff; }
html[data-theme="dark"] .btn-danger  { background-color: #dc2626; border-color: #dc2626; color: #fff; }
html[data-theme="dark"] .btn-warning { background-color: #d97706; border-color: #d97706; color: #fff; }
html[data-theme="dark"] .btn-info    { background-color: #0891b2; border-color: #0891b2; color: #fff; }
html[data-theme="dark"] .btn-success:hover { background-color: #0d9488; border-color: #0d9488; box-shadow: 0 0 10px rgba(5,150,105,.3); }
html[data-theme="dark"] .btn-danger:hover  { background-color: #ef4444; border-color: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,.3); }
html[data-theme="dark"] .btn-warning:hover { background-color: #f59e0b; border-color: #f59e0b; box-shadow: 0 0 10px rgba(245,158,11,.3); }
html[data-theme="dark"] .btn-info:hover    { background-color: #06b6d4; border-color: #06b6d4; box-shadow: 0 0 10px rgba(6,182,212,.3); }
html[data-theme="dark"] .btn-primary:hover { box-shadow: 0 0 12px rgba(129,140,248,.35); }

/* Preset date-range buttons */
html[data-theme="dark"] .preset-btn { background-color: var(--cp-card-bg); border-color: var(--cp-border); color: var(--cp-text); }
html[data-theme="dark"] .preset-btn:hover { background-color: var(--cp-primary-light); border-color: var(--cp-primary); color: var(--cp-primary); }

/* KPI values */
html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] .period-value { color: #93c5fd; font-weight: 800; }
html[data-theme="dark"] .kpi-label,
html[data-theme="dark"] .period-label,
html[data-theme="dark"] .card-title-sm { color: var(--cp-text-muted) !important; }

/* Icons / emojis */
html[data-theme="dark"] svg { filter: brightness(1.1); }
html[data-theme="dark"] .kpi-icon { filter: brightness(1.15) contrast(1.1); opacity: 0.09; }

/* Modal close button */
html[data-theme="dark"] .btn-close { filter: invert(1) brightness(.8); }

/* Scrollbar (webkit) */
html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ================================================================== */
/* Dark mode – Bootstrap utility class overrides                        */
/* .bg-light / .table-light / .text-dark look wrong in dark mode       */
/* ================================================================== */

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white   { background-color: var(--cp-card-bg) !important; color: var(--cp-text) !important; }
html[data-theme="dark"] .bg-dark    { background-color: #0a0f1a !important; }
html[data-theme="dark"] .text-dark  { color: var(--cp-text) !important; }
html[data-theme="dark"] .text-black { color: var(--cp-text) !important; }
html[data-theme="dark"] .border     { border-color: var(--cp-border) !important; }
html[data-theme="dark"] .table-light {
  --bs-table-bg: rgba(129,140,248,.04) !important;
  --bs-table-color: var(--cp-text) !important;
}
html[data-theme="dark"] .table-dark {
  --bs-table-bg: #0a0f1a !important;
  --bs-table-color: var(--cp-text-muted) !important;
}

/* ================================================================== */
/* Light-Mode – vollständiger Variablen-Reset                          */
/* Überschreibt @media(prefers-color-scheme:dark) auf Systemebene     */
/* Kopplungen: navbar-bg = card-bg, navbar-text = text, etc.           */
/* ================================================================== */
html[data-theme="light"] {
  /* Brandfarben */
  --cp-primary:          #6366f1;
  --cp-primary-dark:     #4f46e5;
  --cp-primary-light:    #eef2ff;
  --cp-secondary:        #06b6d4;
  --cp-success:          #10b981;
  --cp-warning:          #f59e0b;
  --cp-danger:           #ef4444;

  /* Hintergründe (Flächen) */
  --cp-bg:               #f8fafc;       /* Seitenhintergrund:  hell-grau */
  --cp-card-bg:          #ffffff;       /* Boxen/Karten:       weiß      */
  --cp-input-bg:         #ffffff;       /* Formular-Felder:    weiß      */

  /* Linienfarbe */
  --cp-border:           #e2e8f0;       /* Rahmenlinien:       hell-grau */

  /* Schriftfarben */
  --cp-text:             #1e293b;       /* Fließtext:          dunkel    */
  --cp-text-muted:       #64748b;       /* Nebentext:          mittel    */

  /* Schatten (leicht) */
  --cp-shadow:           0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --cp-shadow-lg:        0 10px 25px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.05);

  /* Menüleiste */
  --cp-navbar-bg:        #ffffff;       /* Headerfarbe:        weiß      */
  --cp-navbar-text:      #1e293b;       /* Header-Schrift:     dunkel    */
  --cp-navbar-border:    #e2e8f0;       /* Header-Linie:       hell      */

  /* Charts */
  --cp-chart-grid:       rgba(0,0,0,.05);
  --cp-chart-text:       #64748b;
  --cp-chart-border:     #ffffff;
}

/* Light-Mode: KPI-Werte in dunkler Schrift (nicht das blaue Dark-Mode-Override) */
html[data-theme="light"] .kpi-value,
html[data-theme="light"] .period-value { color: var(--cp-text); }

/* Light-Mode: Bootstrap-Utility-Resets */
html[data-theme="light"] .bg-light { background-color: #f1f5f9 !important; }
html[data-theme="light"] .bg-white { background-color: #ffffff !important; }
html[data-theme="light"] .text-dark { color: #1e293b !important; }
html[data-theme="light"] .text-black { color: #0f172a !important; }
html[data-theme="light"] .border { border-color: #e2e8f0 !important; }

/* Light-Mode: Scrollbar zurücksetzen */
html[data-theme="light"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Light-Mode: Calendar-Picker zurücksetzen */
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

/* Light-Mode: Modal-Close zurücksetzen */
html[data-theme="light"] .btn-close { filter: none; }

/* Light-Mode: Pre/Code zurücksetzen */
html[data-theme="light"] pre,
html[data-theme="light"] code { background-color: #f8fafc; color: #1e293b; border-color: #e2e8f0; }

/* ================================================================== */
/* Icon-Modus: cp-em = emoji, cp-bi = Bootstrap Icon                   */
/* Standard: Emoji sichtbar, BI ausgeblendet.                          */
/* html[data-icons="modern"]: BI sichtbar, Emoji ausgeblendet.         */
/* ================================================================== */

/* Emoji-Icon-Wrapper */
.cp-em { display: inline; }

/* Bootstrap Icon Wrapper – standardmäßig unsichtbar */
.cp-bi { display: none; }

/* Modern Icon Modus */
html[data-icons="modern"] .cp-em { display: none; }
html[data-icons="modern"] .cp-bi { display: inline-block; vertical-align: -.125em; }

/* Im modernen Modus: KPI-Icons via Bootstrap Icons (erben font-size + opacity vom .kpi-icon) */
html[data-icons="modern"] .kpi-icon .cp-bi { font-size: inherit; }