/* Womo Dashboard – zentrale Gestaltung, Version 2, individuelle Akzentfarbe */
:root {
  color-scheme: light dark;
  --womo-accent: #0f766e;
  --womo-accent-strong: #115e59;
  --womo-accent-bright: #14b8a6;
  --womo-accent-soft: #ccfbf1;
  --womo-accent-border: #5eead4;
  --womo-focus: #0d9488;
  --womo-page-bg: #f8fafc;
  --womo-surface: #ffffff;
  --womo-surface-raised: #f1f5f9;
  --womo-text: #0f172a;
  --womo-muted: #475569;
  --womo-line: #cbd5e1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --womo-accent: #2dd4bf;
    --womo-accent-strong: #5eead4;
    --womo-accent-bright: #14b8a6;
    --womo-accent-soft: #134e4a;
    --womo-accent-border: #0f766e;
    --womo-focus: #5eead4;
    --womo-page-bg: #0b1220;
    --womo-surface: #111c2e;
    --womo-surface-raised: #1e293b;
    --womo-text: #f1f5f9;
    --womo-muted: #cbd5e1;
    --womo-line: #334155;
  }
}
html { accent-color: var(--womo-accent); }
body { accent-color: var(--womo-accent); }
h1, h2, h3, h4, .section-title, .card-title, [data-womo-heading] {
  color: var(--womo-accent-strong) !important;
  text-decoration-color: var(--womo-accent);
  text-underline-offset: .2em;
}
:where(h1,h2,[data-womo-heading]) { text-wrap: balance; }
:where(button,input,select,textarea,a,[tabindex]):focus-visible {
  outline: 2px solid var(--womo-focus) !important;
  outline-offset: 2px;
}
/* Akzentfarben der üblichen Tailwind-Buttons werden vereinheitlicht. */
.bg-teal-600, .hover\:bg-teal-700:hover,
.bg-cyan-600, .hover\:bg-cyan-700:hover,
.bg-blue-600, .hover\:bg-blue-700:hover,
.bg-indigo-600, .hover\:bg-indigo-700:hover,
.bg-violet-600, .hover\:bg-violet-700:hover,
.bg-purple-600, .hover\:bg-purple-700:hover,
.bg-sky-600, .hover\:bg-sky-700:hover {
  background-color: var(--womo-accent) !important;
}
.text-teal-600, .text-teal-700, .text-cyan-600, .text-blue-600,
.text-indigo-600, .text-violet-600, .text-purple-600, .text-sky-600,
.dark\:text-teal-300, .dark\:text-cyan-300, .dark\:text-blue-300,
.dark\:text-indigo-300, .dark\:text-violet-300 { color: var(--womo-accent) !important; }
.border-teal-500, .border-teal-600, .border-emerald-500, .border-cyan-500 {
  border-color: var(--womo-accent) !important;
}
/* Wiederkehrende Abschnittsköpfe/Karten erhalten einen sichtbaren Petrol-Akzent. */
.section-title, .card-title, [data-womo-heading] {
  border-left: 3px solid var(--womo-accent);
  padding-left: .55rem;
}
/* Fallback für einfache Seiten ohne eigenes Farbsystem; bestehende App-Layouts bleiben erhalten. */
.womo-theme-surface { background: var(--womo-surface); color: var(--womo-text); border-color: var(--womo-line); }
.womo-theme-muted { color: var(--womo-muted); }


/* Sichtbarer Petrol-Akzent: auch die im Dashboard verwendeten Cyan-Klassen erfassen. */
.bg-cyan-500, .bg-teal-500, .hover\:bg-cyan-600:hover,
.hover\:border-cyan-500\/50:hover, .border-cyan-500,
.border-cyan-500\/20, .border-cyan-500\/30 {
  border-color: var(--womo-accent) !important;
}
.bg-cyan-500 { background-color: var(--womo-accent) !important; }
.text-cyan-400, .text-cyan-300, .group:hover .group-hover\:text-cyan-400 {
  color: var(--womo-accent) !important;
}
.bg-cyan-500\/10, .bg-teal-500\/10 { background-color: color-mix(in srgb, var(--womo-accent) 12%, transparent) !important; }

/* Der Systemmodus soll auch die vorhandenen, fest verdrahteten Dashboard-Flächen umstellen. */
@media (prefers-color-scheme: light) {
  :root { color-scheme: light; }
  body.bg-slate-950, body[class~="bg-slate-950"] {
    background-color: var(--womo-page-bg) !important; color: var(--womo-text) !important;
  }
  .bg-slate-950, .bg-slate-900, .bg-slate-800,
  [class~="bg-slate-950"], [class~="bg-slate-900"], [class~="bg-slate-800"] {
    background-color: var(--womo-surface) !important;
  }
  .border-slate-800, .border-slate-700, .border-slate-600,
  [class~="border-slate-800"], [class~="border-slate-700"] {
    border-color: var(--womo-line) !important;
  }
  .text-slate-100, .text-slate-200, .text-slate-300,
  [class~="text-slate-100"], [class~="text-slate-200"], [class~="text-slate-300"] {
    color: var(--womo-text) !important;
  }
  .text-slate-400, .text-slate-500,
  [class~="text-slate-400"], [class~="text-slate-500"] { color: var(--womo-muted) !important; }
  .bg-cyan-500\/10, .bg-cyan-500\/20 { background-color: #ccfbf1 !important; }
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

/* Dynamische Akzentfarbe aus index.html: fängt häufige Utility-Farben der Apps ab. */
.bg-emerald-500, .bg-emerald-600, .bg-teal-500, .bg-teal-600, .bg-cyan-500, .bg-cyan-600,
.bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600, .bg-violet-500, .bg-violet-600,
.bg-purple-500, .bg-purple-600, .bg-sky-500, .bg-sky-600,
.hover\:bg-emerald-600:hover, .hover\:bg-teal-700:hover, .hover\:bg-cyan-600:hover,
.hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover, .hover\:bg-violet-700:hover,
.hover\:bg-purple-700:hover, .hover\:bg-sky-700:hover { background-color: var(--womo-accent) !important; }
.text-emerald-400, .text-emerald-500, .text-emerald-600, .text-teal-400, .text-teal-500,
.text-cyan-300, .text-cyan-400, .text-blue-400, .text-indigo-400, .text-violet-400,
.text-purple-400, .text-sky-400 { color: var(--womo-accent) !important; }
.border-emerald-500, .border-teal-500, .border-cyan-500, .border-blue-500, .border-indigo-500,
.border-violet-500, .border-purple-500, .border-sky-500 { border-color: var(--womo-accent) !important; }

/* Live-Vorschau der Farbauswahl in index.html */
#womo-theme-live-preview { --womo-preview-bg:#f1f7f6; --womo-preview-card:#ffffff; --womo-preview-tile:#edf6f4; --womo-preview-line:#dce7e5; --womo-preview-text:#173b3a; }
@media (prefers-color-scheme: dark) { #womo-theme-live-preview { --womo-preview-bg:#151e23; --womo-preview-card:#202d33; --womo-preview-tile:#293a40; --womo-preview-line:#394850; --womo-preview-text:#edf5f6; } }
#womo-theme-live-preview { color:var(--womo-preview-text); }

/* v3: zentrale Akzentfarbe auch an Apps mit eigenen CSS-Variablen weitergeben.
   Statistik verwendet --accent/--accent2 für Tabs, Diagramme und Primärbuttons. */
:root {
  --accent: var(--womo-accent) !important;
  --accent2: var(--womo-accent-bright) !important;
}