/* Helles Design (weiß mit Lila-Blau). Gilt, wenn theme.js data-mode="light" setzt (Auswahl „Hell“ oder „Automatisch“ bei hellem System).
   Steht als letztes Stylesheet; überschreibt nur Variablen und fest eingetragene Dunkelfarben. */
html[data-mode="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --panel: #ffffff;
  --panel-2: #f5f5f7;
  --panel-3: #ebebf0;
  --text: #1d1d1f;
  --muted: #5f5f66;
  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.2);
  --accent: #5b6ae0;
  --accent-ink: #ffffff;
  --focus: #4350c4;
  --green: #1f8a4d;
  --green-soft: rgba(31, 138, 77, 0.12);
  --red: #d93a32;
  --red-soft: rgba(217, 58, 50, 0.1);
  --orange: #c26a0b;
  --orange-soft: rgba(194, 106, 11, 0.13);
  --purple: #6a4fd8;
  --purple-soft: rgba(106, 79, 216, 0.12);
  --live: #fde8e6;
  --live-text: #b3261e;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(20, 20, 60, 0.07);
  --glass: rgba(255, 255, 255, 0.78);
  --hud: #4b59d6; --hud-2: #9b5de5; --hud-dim: rgba(91, 106, 224, 0.14); --hud-line: rgba(91, 106, 224, 0.3);
}
html[data-mode="light"] body { background: var(--bg); color: var(--text); }
html[data-mode="light"] ::selection { background: rgba(91, 106, 224, 0.22); }
html[data-mode="light"] ::placeholder { color: #8e8e95; }

/* fest eingetragene Dunkelfarben ersetzen */
html[data-mode="light"] .btn:hover:not(:disabled) { background: #e1e1e8; }
html[data-mode="light"] .btn-primary:hover:not(:disabled) { background: var(--accent); }
html[data-mode="light"] .btn-ghost:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); }
html[data-mode="light"] .btn-primary { box-shadow: 0 6px 18px rgba(91, 106, 224, 0.3); }
html[data-mode="light"] .nav-link.active { background: rgba(91, 106, 224, 0.12); color: var(--text); }
html[data-mode="light"] .shell-user { background: rgba(0, 0, 0, 0.04); }
html[data-mode="light"] .tag { background: rgba(0, 0, 0, 0.06); }
html[data-mode="light"] .tag.overdue, html[data-mode="light"] .tag.nophone { background: var(--red-soft); color: #b3261e; }
html[data-mode="light"] .tag.due { background: var(--orange-soft); color: #8a4b00; }
html[data-mode="light"] .tag.choice { color: var(--purple); }
html[data-mode="light"] tbody tr:hover td { background: rgba(0, 0, 0, 0.03); }
html[data-mode="light"] .msg.ok, html[data-mode="light"] .rec-status.ok, html[data-mode="light"] .toast.ok .icon { color: #1a7a44; }
html[data-mode="light"] .msg.err, html[data-mode="light"] .rec-status.err, html[data-mode="light"] .toast.err .icon { color: #b3261e; }
html[data-mode="light"] .rec-warn, html[data-mode="light"] .rec-status.live { color: #8a4b00; }
html[data-mode="light"] .rec-status.live { color: var(--live-text); }
html[data-mode="light"] .btn-warn, html[data-mode="light"] .badge-state.warn { color: #8a4b00; }
html[data-mode="light"] .badge-state.live { color: #1a7a44; }
html[data-mode="light"] .badge-state.err, html[data-mode="light"] .error-state { color: #b3261e; }
html[data-mode="light"] .badge-state.idle { color: var(--muted); }
html[data-mode="light"] .seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
html[data-mode="light"] .readonly-banner { color: #8a4b00; }
html[data-mode="light"] .toast { box-shadow: 0 12px 40px rgba(20, 20, 60, 0.18); }
html[data-mode="light"] dialog.panel-dlg, html[data-mode="light"] dialog.crm-dlg { box-shadow: 0 30px 80px rgba(20, 20, 60, 0.25); }
html[data-mode="light"] dialog.panel-dlg::backdrop, html[data-mode="light"] dialog.crm-dlg::backdrop, html[data-mode="light"] dialog::backdrop { background: rgba(30, 30, 50, 0.35); }
html[data-mode="light"] dialog.crm-dlg.side { box-shadow: -20px 0 60px rgba(20, 20, 60, 0.2); }
html[data-mode="light"] .avatar { background: var(--panel-3); }
html[data-mode="light"] code { background: var(--panel-3); }

/* Dialer */
html[data-mode="light"] .topbar, html[data-mode="light"] .session-bar { background: var(--glass); }
html[data-mode="light"] .syncbar.warn { color: #8a4b00; }
html[data-mode="light"] .syncbar.err, html[data-mode="light"] .error-msg { color: #b3261e; }
html[data-mode="light"] .sum-phone dd.warn { color: #b3261e; }
html[data-mode="light"] .countdown-num { color: #1a7a44; }
html[data-mode="light"] .btn-call { box-shadow: 0 6px 16px rgba(31, 138, 77, 0.3); }
html[data-mode="light"] .outcome.selected { box-shadow: 0 0 0 3px rgba(91, 106, 224, 0.35); }
html[data-mode="light"] .o-not-reached { background: #5a6270; }

/* Cockpit */
html[data-mode="light"] .hud {
  background:
    radial-gradient(900px 260px at 12% -10%, rgba(91, 106, 224, 0.14), transparent 60%),
    radial-gradient(700px 240px at 100% 110%, rgba(155, 93, 229, 0.12), transparent 60%),
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px) 0 0 / 28px 100%,
    #ffffff;
  box-shadow: var(--shadow);
}
html[data-mode="light"] .hud-card { background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 2px rgba(20, 20, 60, 0.05); }
html[data-mode="light"] .hud-live { box-shadow: 0 0 8px rgba(91, 106, 224, 0.6); }
html[data-mode="light"] .hud-track { stroke: rgba(0, 0, 0, 0.08); }
html[data-mode="light"] .hud-arc { filter: drop-shadow(0 0 4px rgba(91, 106, 224, 0.4)); }
html[data-mode="light"] .hud-grid { stroke: rgba(0, 0, 0, 0.07); }
html[data-mode="light"] .hud-bar { fill-opacity: 0.5; }
html[data-mode="light"] .hud-bar.today { fill-opacity: 0.95; filter: drop-shadow(0 0 4px rgba(91, 106, 224, 0.4)); }
html[data-mode="light"] .hud-line { filter: drop-shadow(0 0 3px rgba(155, 93, 229, 0.5)); }
html[data-mode="light"] .hud-dot { fill: #e0a100; filter: drop-shadow(0 0 3px rgba(224, 161, 0, 0.6)); }
html[data-mode="light"] .hud-legend .dot::before { background: #e0a100; box-shadow: none; }
html[data-mode="light"] .hud-ft { background: rgba(0, 0, 0, 0.07); }
html[data-mode="light"] .hud-fbar { box-shadow: none; }
html[data-mode="light"] .hud-money-v { background: linear-gradient(90deg, #1d1d1f, var(--hud)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Logo (hell auf transparent) im hellen Design dunkel zeigen */
html[data-mode="light"] .shell-logo, html[data-mode="light"] .auth-logo { filter: invert(1); }

/* Cockpit lebendig: helle Varianten */
html[data-mode="light"] .hud-sweep { background: linear-gradient(90deg, transparent, rgba(91, 106, 224, 0.10), transparent); }
html[data-mode="light"] .hud-tip { background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 28px rgba(20, 20, 60, 0.18); }
html[data-mode="light"] .hud-day-detail, html[data-mode="light"] .hud-ticker { background: rgba(0, 0, 0, 0.03); }
html[data-mode="light"] .hud-day.sel .hud-bar { stroke: #1d1d1f; stroke-opacity: 0.4; }
html[data-mode="light"] .hud-card:hover { box-shadow: 0 10px 30px rgba(20, 20, 60, 0.12); }
html[data-mode="light"] a.hud-frow:hover, html[data-mode="light"] a.hud-frow:focus-visible { background: rgba(91, 106, 224, 0.08); }
html[data-mode="light"] .hud-ring-wrap.done .hud-arc { stroke: #1f8a4d; filter: drop-shadow(0 0 5px rgba(31, 138, 77, 0.5)); }