/* Wertlok-Design „Hell mit Navy-Akzenten“ (Anmutung der Erklaervideos, aber
   hell fuer den Alltag): ruhiger, leicht blaugrauer Grund, weisse Karten mit
   feinem Rand und weichem Schatten, Navy fuer Ueberschriften und aktive
   Navigation, Symbole im Kreis mit Akzent-Ring.

   Farben kommen aus dem Mandanten-Branding (--itk-navy, --itk-coral), damit
   White-Label erhalten bleibt. Logos bleiben unveraendert.

   Aktiv mit <html class="wl-neu"> — seit 2026-10-26 fuer alle (admin/design.py). Die
   Seiten bleiben unveraendert — dieses Stylesheet verfeinert die Tailwind-
   Klassen. Spezifitaet "html.wl-neu .x" schlaegt die Tailwind-CDN-Regeln.
   Vorgaenger „Navy Glass“ (dunkel) siehe Git-Historie (0477f98). */

html.wl-neu {
  --wl-grund-a: #eef2f8;
  --wl-grund-b: #f7f9fc;
  --wl-rand: color-mix(in srgb, var(--itk-navy) 10%, white);
  --wl-rand-fein: color-mix(in srgb, var(--itk-navy) 6%, white);
  --wl-flaeche: color-mix(in srgb, var(--itk-navy) 3.5%, white);
  --wl-hover: color-mix(in srgb, var(--itk-navy) 6%, white);
  --wl-schatten: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px color-mix(in srgb, var(--itk-navy) 6%, transparent);
  --wl-text: #1c2440;
}

/* ---------- Grundflaeche ---------- */
html.wl-neu {
  background: linear-gradient(180deg, var(--wl-grund-a) 0%, var(--wl-grund-b) 420px) fixed;
  min-height: 100%;
}
html.wl-neu body, html.wl-neu body.bg-itk-bg { background: transparent !important; }
html.wl-neu .bg-itk-bg { background: transparent !important; }

/* ---------- Schrift ---------- */
html.wl-neu h1 { color: var(--itk-navy); letter-spacing: -.01em; }
html.wl-neu h2, html.wl-neu h3 { color: var(--wl-text); }
html.wl-neu .text-slate-900 { color: var(--wl-text) !important; }

/* ---------- Karten ---------- */
html.wl-neu main .bg-white {
  border-color: var(--wl-rand) !important;
}
html.wl-neu .rounded-xl.bg-white, html.wl-neu .rounded-lg.bg-white {
  box-shadow: 0 0 0 1px var(--wl-rand), var(--wl-schatten) !important;
}
html.wl-neu .rounded-xl { border-radius: 14px; }
html.wl-neu .shadow, html.wl-neu .shadow-sm { box-shadow: 0 0 0 1px var(--wl-rand), var(--wl-schatten) !important; }
html.wl-neu .hover\:shadow-md:hover { box-shadow: 0 0 0 1px var(--wl-rand), 0 10px 28px color-mix(in srgb, var(--itk-navy) 12%, transparent) !important; }
html.wl-neu .ring-slate-100, html.wl-neu .ring-slate-200 { --tw-ring-color: var(--wl-rand) !important; }

/* Tabellenkoepfe und Zwischenflaechen leicht navy getoent statt grau */
html.wl-neu .bg-slate-50, html.wl-neu .bg-slate-50\/70 { background-color: var(--wl-flaeche) !important; }
html.wl-neu .hover\:bg-slate-50:hover, html.wl-neu .hover\:bg-slate-100:hover { background-color: var(--wl-hover) !important; }
html.wl-neu .border-slate-100, html.wl-neu .border-slate-200,
html.wl-neu .divide-slate-100 > * + *, html.wl-neu .divide-slate-200 > * + * { border-color: var(--wl-rand-fein) !important; }
/* Tabellenkoepfe sachlich: keine Versalien/Sperrung, gedecktes Grau */
html.wl-neu thead, html.wl-neu thead th {
  text-transform: none !important; letter-spacing: normal !important;
  color: #5b6478 !important; font-weight: 500;
}
html.wl-neu thead.text-xs, html.wl-neu thead .text-xs { font-size: .8125rem !important; }

/* Status-Kennzeichen: statt Pastell-Pille ein farbiger Punkt vor normalem
   Text (wirkt ruhiger, weniger „generiert“). Greift auf die kleinen farbigen
   Badges (py-0.5 + helle Statusflaeche); Code-Chips (font-mono) bleiben. */
html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"]):is([class*="bg-green-1"], [class*="bg-green-5"], [class*="bg-red-1"], [class*="bg-red-5"],
  [class*="bg-amber-1"], [class*="bg-amber-5"], [class*="bg-yellow-1"], [class*="bg-orange-1"],
  [class*="bg-slate-100"], [class*="bg-slate-200"], [class*="bg-sky-1"], [class*="bg-blue-1"],
  [class*="bg-purple-1"], [class*="bg-pink-1"], [class*="bg-emerald-1"]):not([class*="font-mono"]) {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  display: inline-flex; align-items: center; gap: .45em; font-weight: 500; white-space: nowrap;
}
html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"]):is([class*="bg-green-1"], [class*="bg-green-5"], [class*="bg-red-1"], [class*="bg-red-5"],
  [class*="bg-amber-1"], [class*="bg-amber-5"], [class*="bg-yellow-1"], [class*="bg-orange-1"],
  [class*="bg-slate-100"], [class*="bg-slate-200"], [class*="bg-sky-1"], [class*="bg-blue-1"],
  [class*="bg-purple-1"], [class*="bg-pink-1"], [class*="bg-emerald-1"]):not([class*="font-mono"])::before {
  content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 9999px; background: currentColor;
}
html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"])[class*="bg-red-"]:not([class*="font-mono"])::before { background: #ef4444; }
html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"])[class*="bg-green-"]:not([class*="font-mono"])::before { background: #22c55e; }
html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"]):is([class*="bg-amber-"], [class*="bg-yellow-"], [class*="bg-orange-"]):not([class*="font-mono"]) { color: #b45309 !important; }
html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"]):is([class*="bg-amber-"], [class*="bg-yellow-"], [class*="bg-orange-"]):not([class*="font-mono"])::before { background: #f59e0b; }
html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"]):is([class*="bg-slate-100"], [class*="bg-slate-200"]):not([class*="font-mono"]) { color: #64748b !important; }
html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"]):is([class*="bg-slate-100"], [class*="bg-slate-200"]):not([class*="font-mono"])::before { background: #cbd5e1; }

html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"])[class*="bg-purple-"]:not([class*="font-mono"])::before { background: #a855f7; }
html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"])[class*="bg-pink-"]:not([class*="font-mono"])::before { background: #ec4899; }
html.wl-neu span:is([class*="py-0.5"], [class*="py-1 "], [class$="py-1"])[class*="px-"]:not([class*="min-w-"])[class*="bg-emerald-"]:not([class*="font-mono"])::before { background: #10b981; }

/* ---------- Formulare ---------- */
html.wl-neu input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
html.wl-neu select, html.wl-neu textarea { border-color: var(--wl-rand) !important; }
html.wl-neu input:focus, html.wl-neu select:focus, html.wl-neu textarea:focus {
  outline: none; border-color: var(--itk-coral) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--itk-coral) 22%, transparent) !important;
}
html.wl-neu input[type=checkbox], html.wl-neu input[type=radio] { accent-color: var(--itk-navy); }

/* ---------- Knoepfe ---------- */
html.wl-neu .bg-itk-coral { box-shadow: 0 2px 8px color-mix(in srgb, var(--itk-coral) 30%, transparent); }
html.wl-neu .bg-itk-navy { box-shadow: 0 2px 8px color-mix(in srgb, var(--itk-navy) 25%, transparent); }

/* ---------- Seitenleiste: hell, aktiver Punkt navy ---------- */
html.wl-neu #sidebar {
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--wl-rand) !important;
}
html.wl-neu #sidebar .bg-itk-coral-light {
  background: var(--itk-navy) !important; color: #fff !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--itk-navy) 25%, transparent);
}
html.wl-neu #sidebar .bg-itk-coral-light svg { color: var(--itk-coral) !important; }
html.wl-neu #sidebar .hover\:bg-slate-100:hover { background: var(--wl-hover) !important; }

/* ---------- Kennzahl-Kacheln: Symbol im Kreis mit Akzent-Ring (wie Video) ---------- */
html.wl-neu .wl-ikon {
  border-radius: 9999px !important;
  background: #fff !important;
  color: var(--itk-navy) !important;
  box-shadow: 0 0 0 1.5px var(--itk-coral), 0 0 0 5px color-mix(in srgb, var(--itk-coral) 12%, transparent);
}
html.wl-neu .wl-ikon.bg-red-100 { color: #dc2626 !important; box-shadow: 0 0 0 1.5px #f87171, 0 0 0 5px rgba(248, 113, 113, .14); }
html.wl-neu .wl-ikon.bg-green-50 { color: #16a34a !important; box-shadow: 0 0 0 1.5px #4ade80, 0 0 0 5px rgba(74, 222, 128, .14); }

/* ---------- Kleinteile ---------- */
html.wl-neu .wl-nur-alt { display: none !important; }
html.wl-neu .wl-nur-neu { display: revert !important; }
html.wl-neu ::-webkit-scrollbar { width: 10px; height: 10px; }
html.wl-neu ::-webkit-scrollbar-thumb { background: var(--wl-rand); border-radius: 10px; }
html.wl-neu ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Login-Seite ---------- */
html.wl-neu .wl-login-karte {
  margin-top: 9vh; padding: 2.5rem 2.25rem; border-radius: 18px;
  box-shadow: 0 0 0 1px var(--wl-rand), 0 24px 60px color-mix(in srgb, var(--itk-navy) 12%, transparent) !important;
}
html.wl-neu .wl-login-karte input:not([type=checkbox]) { border-radius: 10px; padding: .65rem .85rem; }
html.wl-neu .wl-login-karte button[type=submit] {
  border-radius: 10px; padding: .7rem; font-weight: 600; background: var(--itk-navy) !important;
}
html.wl-neu .wl-login-karte label { color: #475569; }

/* ---------- Layout-Designer (eigene Vollbildseite) ---------- */
html.wl-neu body.bg-slate-100 { background: transparent !important; }
html.wl-neu #arbeitsbereich:not(.karo) { background: var(--wl-grund-a); }
html.wl-neu body > header.h-16 { border-color: var(--wl-rand) !important; box-shadow: 0 1px 0 var(--wl-rand-fein), 0 4px 16px color-mix(in srgb, var(--itk-navy) 5%, transparent); }
html.wl-neu .kb:hover, html.wl-neu .schiene-kn:hover, html.wl-neu .ebene:hover { background: var(--wl-hover); }
html.wl-neu .kb.an, html.wl-neu .schiene-kn.an, html.wl-neu .ebene.an {
  background: var(--itk-navy) !important; color: #fff !important;
}
html.wl-neu .schiene-kn.an .ikon, html.wl-neu .kb.an .ikon { color: var(--itk-coral); }
html.wl-neu .trenner { background: var(--wl-rand); }
html.wl-neu #kn-abbrechen { background: #fff !important; box-shadow: inset 0 0 0 1px var(--wl-rand); }
html.wl-neu .pop { border-radius: 14px; border-color: var(--wl-rand); box-shadow: 0 0 0 1px var(--wl-rand-fein), 0 18px 48px color-mix(in srgb, var(--itk-navy) 16%, transparent); }
html.wl-neu .liste-kn { border-color: var(--wl-rand); border-radius: 10px; }
html.wl-neu .liste-kn:hover { border-color: var(--itk-navy); }
html.wl-neu .feld input[type=text], html.wl-neu .feld input[type=number], html.wl-neu .feld select, html.wl-neu .feld textarea { border-radius: 8px; }