/* colors.css: alle Farben der App an einer Stelle.
   ui.css, ui.js (Diagramme), navbar-styles.css und die Seiten-CSS lesen nur diese Variablen und
   setzen keine eigenen Farbwerte. Wer eine Farbe ändert, ändert sie hier.
   Übersicht und Regeln: shared/DESIGN_README.md, Abschnitt „Farben“. */

:root {
  /* ---------- Akzent (Türkis) ---------- */
  --akzent: #0f9f9a;
  /* Abstufungen werden aus --akzent berechnet und ändern sich automatisch mit. */
  --akzent-dark: color-mix(in srgb, var(--akzent) 80%, black); /* aktiver Text, Namen und Links beim Überfahren */
  --akzent-light: color-mix(in srgb, var(--akzent) 10%, white); /* Balken-Hintergrund, Pill, Icon-Fläche */
  --akzent-tint: color-mix(in srgb, var(--akzent) 7%, transparent); /* Hover- und Aktiv-Fläche */
  --akzent-tint-strong: color-mix(in srgb, var(--akzent) 14%, transparent); /* Fokusring, Schatten, Suchtreffer */

  /* ---------- Grundfarben ---------- */
  --an-ink: #111827; /* Überschriften, Werte, Primär-Button */
  --an-ink-hover: #2b3442; /* Primär-Button beim Überfahren */
  --an-text: #374151; /* Text auf Sekundär-Buttons und Chips */
  --an-muted: #6b7280; /* Beschreibungen, Labels, Unterzeilen */
  --an-faint: #b0b7c1; /* Pfeile in Link-Kacheln */
  --an-border: #e5e7eb; /* Rahmen */
  --an-divider: rgba(17, 24, 39, 0.07); /* Trennlinien in Listen */
  --an-tile: #f7f8fc; /* Kacheln, Blöcke, Tabellenkopf */
  --an-hover: #f8fafb; /* Zeile beim Überfahren */
  --an-surface: #fff; /* Abschnitte, Karten, Dialoge */
  --an-inverse: #fff; /* Text auf dunklen oder farbigen Flächen */
  --an-border-strong: #d1d5db; /* Eingabefelder, gestrichelte Upload-Flächen, Schalter aus */
  --an-overlay: rgba(17, 24, 39, 0.45); /* Hintergrund hinter Dialogen */
  --an-shadow: rgba(17, 24, 39, 0.1); /* Schatten von Aufklapp-Menüs */
  --an-shadow-strong: rgba(17, 24, 39, 0.22); /* Schatten schwebender Elemente (Dialog, Leiste „Nicht gespeichert“) */

  /* Markenkern: gleiche Werte wie auf der Website (globals.css: --line, --canvas-alt, --shadow-float),
     siehe DESIGN_README „Markenkern“. */
  --an-line: rgba(17, 24, 39, 0.12); /* Haarlinie im Footer und unter Event-Karten */
  --an-canvas: #f6f6f4; /* ruhige Fläche: Datumskachel, Bild-Platzhalter */
  --an-glass: rgba(255, 255, 255, 0.92); /* Datum und Markierung auf Bildern */

  /* Aktiver Chip: Abschnitts-Filter (.an-nav) sowie Filter- und Sortier-Chips (.an-rank-sort-btn) */
  --an-chip-active: var(--an-ink);

  /* Veränderung gegenüber der Vorperiode */
  --an-up: #0f9f6a;
  --an-down: #d64545;

  /* ---------- Status ---------- */
  /* -bg: Chip/Pill-Hintergrund, ohne Endung: Text/Icon, -tile: Kachel- oder Zeilen-Hintergrund */
  --status-ok-bg: #e7f6ef;
  --status-ok: #0f7a51;
  --status-ok-tile: #e9f7f1;
  --status-warn-bg: #fff4e0;
  --status-warn: #9a5b00;
  --status-warn-tile: #fff8ea;
  --status-bad-bg: #fee2e2;
  --status-bad: #b91c1c;
  --status-bad-tile: #fdecec;
  --status-muted-bg: #eef0f4;
  --status-info: #6366f1;

  /* Gefährliche Aktionen (Löschen, Erstattung) */
  --danger-border: #fecaca;
  --danger-dark: #991b1b;

  /* Seitenweiter Hinweis (.an-notice) */
  --notice-bg: var(--status-warn-tile);
  --notice-border: #f3d9a4;
  --notice-text: #7a4d00;
  --notice-strong: #5c3a00;
  --notice-disabled-bg: #e8d9b8;
  --notice-disabled-text: #8a6a2a;

  /* ---------- Pipeline-Phasen des CRM (Punkt vor der Phase, superadmin/crm/crm.css) ---------- */
  --stage-new: var(--an-faint);
  --stage-contacting: var(--chart-sky);
  --stage-talking: var(--chart-indigo);
  --stage-interested: var(--chart-amber);
  --stage-committed: var(--chart-violet);
  --stage-partner: var(--akzent);
  --stage-declined: var(--chart-red);

  /* ---------- Location-Typ: Club = Violett, Bar = Amber, Veranstalter = Rosa (Vorgabe der App, auch auf der Website) ---------- */
  /* Gilt überall gleich: Navbar-Kürzel, Pills (.an-pill.club / .bar / .organizer, typePill in ui.js), Diagramme. */
  --label-club-bg: rgba(139, 92, 246, 0.12);
  --label-club-text: #6d28d9;
  --label-bar-bg: rgba(245, 158, 11, 0.18);
  --label-bar-text: #92400e;
  --label-organizer-bg: rgba(236, 72, 153, 0.12);
  --label-organizer-text: #be185d;

  /* ---------- Icon-Töne der Kennzahlen-Kacheln (renderKpis mit tone) ---------- */
  --tone-teal-bg: var(--akzent-light);
  --tone-teal: var(--akzent-dark);
  --tone-green-bg: #e9f7ee;
  --tone-green: #197544;
  --tone-violet-bg: #f0ebfb;
  --tone-violet: #6247aa;
  --tone-amber-bg: #fff4da;
  --tone-amber: #9a6507;
  --tone-indigo-bg: #eef0ff;
  --tone-indigo: #4f46e5;

  /* ---------- Plan-Karten (.an-plan, Look von abomodell.html) ---------- */
  --plan-included: #4c4c4c; /* Häkchen: Leistung bzw. Berechtigung enthalten */
  --plan-excluded: #e74c3c; /* Kreuz: nicht enthalten */
  --plan-featured-bg: #1f1f22; /* dunkle Tarifkarte in abomodell.html (mittlerer Tarif der Provisions-Leiter) */
  --plan-featured-text: #ffffff;
  --plan-featured-muted: rgba(255, 255, 255, 0.72);
  --plan-featured-faint: rgba(255, 255, 255, 0.4);
  --plan-featured-divider: rgba(255, 255, 255, 0.14);
  --plan-featured-tile: rgba(255, 255, 255, 0.08);
  --plan-featured-shadow: rgba(31, 31, 34, 0.28);
  --plan-tip-divider: color-mix(in srgb, var(--an-inverse) 16%, transparent); /* Trennlinie in der Erklärung einer Leistung (abomodell.html) */

  /* Rang-Abzeichen 2 und 3 (Platz 1 ist --akzent) */
  --rank-2: #64748b;
  --rank-3: #b45309;

  /* ---------- Navigation (navbar-styles.css) ---------- */
  --nav-ink: var(--an-ink);
  --nav-text: #4b5563;
  --nav-muted: #9ca3af;
  --nav-line: #eef0f4;
  --nav-tile: var(--an-tile);
  --nav-tile-open: #eef0f5; /* aufgeklappte Location, hebt sich etwas stärker ab */
  --nav-divider: #d8dde5; /* kräftig genug für die dunklere offene Kachel */
  --nav-accent: var(--akzent);
  --nav-accent-dark: var(--akzent-dark);
  --nav-accent-soft: var(--akzent-tint);

  /* ---------- Diagramme ---------- */
  /* Nur Hex-Werte (oder Verweise auf Hex-Werte): Chart.js zeichnet auf ein Canvas und braucht echte Farben.
     ui.js liest die Werte als PALETTE und CHART_COLORS. */

  /* Grundpalette. PALETTE nimmt sie in dieser Reihenfolge (Kategorien ohne feste Bedeutung). */
  --chart-accent: var(--akzent);
  --chart-indigo: #6366f1;
  --chart-amber: #f59e0b;
  --chart-red: #ef4444;
  --chart-violet: #8b5cf6;
  --chart-green: #22c55e;
  --chart-sky: #0ea5e9;
  --chart-pink: #ec4899;
  /* Neutral */
  --chart-slate: #64748b;
  --chart-gray: #9ca3af;
  --chart-empty: #e5e7eb; /* Rest (z. B. noch verfügbar) und leere Diagramme */
  --chart-grid: #eef0f4;
  --chart-axis: #6b7280;
  --chart-tooltip: rgba(17, 24, 39, 0.92);

  /* Feste Bedeutungen: Dieselbe Größe hat auf jeder Seite dieselbe Farbe. */
  --chart-revenue: var(--chart-accent); /* Umsatz, Erlös, Revibe-Anteil */
  --chart-total: var(--chart-slate); /* Zahlungsvolumen (Summe aller Anteile) */
  --chart-locations: var(--chart-indigo); /* Anteil bzw. Auszahlung der Locations */
  --chart-fees: var(--chart-red); /* Zahlungsgebühren (Stripe) */
  --chart-connect: var(--chart-pink); /* Stripe-Connect-Kosten */
  --chart-tax: var(--chart-gray); /* Umsatzsteuer */
  --chart-net: var(--chart-green); /* Nettoerlös, eingecheckt, ausverkauft */
  --chart-tickets: var(--chart-amber); /* Tickets */
  --chart-subscriptions: var(--chart-violet); /* Abo-Umsatz der Locations (Finanzrechner) */
  --chart-refunds: var(--chart-sky); /* Erstattungen an Gäste */
  --chart-tables: var(--chart-violet); /* Tische & Flaschen */
  --chart-costs: var(--chart-red); /* Eventkosten (Event-Finanzen) */
  --chart-margin: var(--chart-slate); /* Ergebnismarge (Event-Finanzen) */
  --chart-app: var(--chart-accent);
  --chart-web: var(--chart-indigo);
  --chart-club: var(--chart-violet);
  --chart-bar: var(--chart-amber);
  --chart-organizer: var(--chart-pink);
  --chart-male: var(--chart-sky);
  --chart-female: var(--chart-pink);
  --chart-diverse: var(--chart-violet);

  /* ---------- App-Vorschau (Coupons, deals/deals.css): Farben der dunklen App (Revibe/constants/Colors.ts) ---------- */
  --app-preview-bg: #000000; /* mainBG */
  --app-preview-surface: #1e1e1e; /* secBG / surface */
  --app-preview-raised: #2a2a2a; /* surfaceRaised */
  --app-preview-text: #ffffff; /* mainFont */
  --app-preview-muted: #aaaaaa; /* secFont */
  --app-preview-accent-tint: rgba(15, 159, 154, 0.14); /* akzentTint */

  /* ---------- Instagram-Slides (Social Content, superadmin/social/slide-renderer.js) ---------- */
  /* Nur Hex-Werte: die Slides werden auf ein Canvas gezeichnet. Werte aus den Revibe-Vorlagen. */
  --slide-cover-from: #111111; /* Cover: Verlauf links unten */
  --slide-cover-to: #0e2424; /* Cover: Verlauf rechts oben */
  --slide-day-from: #0f2626; /* Tages-Slide: Verlauf links */
  --slide-day-to: #0c3838; /* Tages-Slide: Verlauf rechts */
  --slide-text: #ffffff;
  --slide-text-soft: #cfd0d0; /* „Diese“ und „in“ auf dem Cover */
  --slide-accent: #21d3d3; /* „revibe“ und Zeitraum auf dem Cover */
  --slide-muted: #466969; /* „revibe“ auf den Tages-Slides */
  --slide-line: #ffffff; /* Linien im Hintergrund, mit geringer Deckkraft gezeichnet */

  /* ---------- Ältere Seiten (noch nicht auf ui.css umgestellt) ---------- */
  --main-bg: #ffffff;
  --sec-bg: #d6d6d6;

  --main-font: black;
  --sec-font: #7c7c7c;

  --instagram: #c13584;
  --snapchat: #fffc00;
  --tiktok: black;
  --facebook: #3b5998;
  --youtube: red;

  --shadow: black;
  --warn: #e74c3c;
  --readonly-bg: #e9ecef;
  --readonly-font: #6c757d;
  --button-text: white;
  --card-shadow: rgba(0, 0, 0, 0.2);
  --card-shadow-hover: rgba(0, 0, 0, 0.4);
}

/* Dark Mode (wird derzeit nirgends eingeschaltet, nur für ältere Seiten) */
[data-theme="dark"] {
  --main-bg: #121212;
  --sec-bg: #333333;

  --main-font: white;
  --sec-font: #aaa;

  --akzent: #0f9f9a;

  --instagram: #c13584;
  --snapchat: #fffc00;
  --tiktok: white;
  --facebook: #3b5998;
  --youtube: red;

  --shadow: black;
  --warn: #e74c3c;

  --label-club-bg: rgba(139, 92, 246, 0.2);
  --label-club-text: #c4b5fd;
  --label-bar-bg: rgba(245, 158, 11, 0.22);
  --label-bar-text: #fbbf24;
  --label-organizer-bg: rgba(236, 72, 153, 0.22);
  --label-organizer-text: #f9a8d4;

  --button-text: white;
  --card-shadow: rgba(0, 0, 0, 0.3);
  --card-shadow-hover: rgba(0, 0, 0, 0.5);
}