/*
 * Wegbegleiter – Theme / Branding
 * =================================
 * Alle Farben und das Logo der Oberflaeche werden ausschliesslich ueber
 * diese CSS-Variablen gesteuert. Um das Erscheinungsbild fuer eine
 * Instanz/einen Kunden anzupassen, MUSS der Anwendungscode nicht
 * angefasst werden - es genuegt, diese Datei zu ueberschreiben.
 *
 * Im Produktions-Image (siehe Dockerfile/nginx.conf) wird /theme.css wie
 * /env-config.js ohne Caching ausgeliefert und kann daher pro Deployment
 * ersetzt werden, z. B. als ConfigMap/Volume-Mount in Kubernetes:
 *
 *   volumeMounts:
 *     - name: theme
 *       mountPath: /usr/share/nginx/html/theme.css
 *       subPath: theme.css
 *
 * Es ist kein Rebuild des Images noetig - nur ein neuer Container-Start
 * bzw. bei ConfigMap-Aenderung ein Pod-Neustart.
 *
 * Die Standard-Palette unten ist an das Wegbegleiter-Logo (public/logo.svg)
 * angelehnt: Indigo als Markenfarbe (#3B3F8F), dazu helle, leicht violett
 * getoente Neutraltoene fuer Hintergruende und Rahmen. Warme Akzente
 * (Orange/Terrakotta) stammen aus dem Logo; Fehler und Loeschen bleiben
 * bewusst rot.
 */

:root {
  /* ---- Logo ----
   * Standardmaessig ist das mitgelieferte Wegbegleiter-Icon (public/logo.png)
   * aktiv und in der Navigation prominent groesser dargestellt. Um es fuer
   * ein Deployment/einen Kunden auszutauschen, IMMER BEIDE Variablen
   * zusammen ueberschreiben (z. B. per ConfigMap-Volume-Mount dieser Datei,
   * siehe Kommentar oben):
   *
   *   --wb-logo-url: url("/mein-logo.svg");
   *   --wb-logo-height: 40px;
   *
   * Um kein grafisches Logo anzuzeigen (nur der Textname "Wegbegleiter"),
   * --wb-logo-height auf 0px setzen.
   */
  --wb-logo-url: url("/logo.png?v=2");
  --wb-logo-height: 42px;
  --wb-logo-height-lg: 76px;
  --wb-logo-radius: 10px;

  /* ---- Markenfarbe (Primaerfarbe) ----
   * Indigo aus dem Logo. Wird fuer
   * Haupt-Buttons, aktive Navigation, Fokus-Akzente etc. verwendet.
   */
  --wb-primary: #3B3F8F;

  /* ---- Hintergruende ----
   * Helle Neutraltoene mit einem Hauch Indigo (passend zur Markenfarbe).
   */
  --wb-app-bg: #F7F6FB;
  --wb-bg: #FFFFFF;
  --wb-surface: #FFFFFF;
  --wb-input-bg: #FBFBFE;
  --wb-topbar-bg: #ECEBF7;
  --wb-nav-active-bg: #DCDCF2;
  --wb-nav-hover-bg: #F1F0FA;
  --wb-row-hover-bg: #F5F4FB;
  --wb-badge-bg: #E8E7F6;

  /* ---- Text ---- */
  --wb-text: #232230;
  --wb-text-secondary: #55536A;
  --wb-text-muted: #5F5C75;
  --wb-text-faint: #6B6882;
  --wb-text-faint-2: #C5C3D8;
  --wb-text-strong-muted: #403E56;
  --wb-badge-text: #3B3F8F;

  /* ---- Rahmen/Trenner ---- */
  --wb-border: #E1E0F0;
  --wb-border-strong: #CFCDE6;
  --wb-border-dashed: #C0BEDC;
  --wb-divider: #ECEBF5;

  /* ---- Akzent-/Funktionsfarben ----
   * Terrakotta/Orange aus dem Logo-Verlauf als Akzentfarbe; Rot-Braun als
   * eigenstaendige "Danger"-Farbe, damit Loeschen/Fehler farblich klar von
   * der (nun ebenfalls roten) Markenfarbe unterscheidbar bleiben.
   */
  --wb-accent: #9E4A1A;
  --wb-star: #C99A3E;
  --wb-success: #2E7D46;
  --wb-danger: #7A1710;
  --wb-danger-bg: #F7DEDA;
  --wb-danger-border: #E3B6AE;
  /* Warnungen (z. B. Ziele ausserhalb des Veranstaltungszeitraums) - bewusst von Fehler-Rot unterscheidbar */
  --wb-warning: #8A5300;
  --wb-warning-bg: #FFF1D6;
  --wb-warning-border: #E8C98A;

  /* ---- Status-Badges (Veranstaltungsstatus) ----
   * "geplant" nutzt --wb-accent als Textfarbe, "abgeschlossen" nutzt
   * --wb-text-muted - beide Farben sind oben bereits definiert und werden
   * hier bewusst nicht dupliziert.
   */
  --wb-status-geplant-bg: #F7E7DC;
  --wb-status-laufend-bg: #E7EFE4;
  --wb-status-laufend-fg: #4E6B3E;
  --wb-status-durchgefuehrt-bg: #E4E9EF;
  --wb-status-durchgefuehrt-fg: #3E5A7A;
  --wb-status-abgeschlossen-bg: #F0E7E4;
}

/* Grafisches Logo neben dem Textnamen "Wegbegleiter" - bleibt unsichtbar
   (0x0), solange --wb-logo-height nicht mitgesetzt wird. Dezente Rundung
   und Schatten, damit das Icon wie ein fest "angedocktes" App-Symbol wirkt
   statt wie ein loses Bild. */
.app-logo-image {
  display: inline-block;
  flex-shrink: 0;
  height: var(--wb-logo-height);
  width: var(--wb-logo-height);
  background-image: var(--wb-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  border-radius: var(--wb-logo-radius);
  box-shadow: 0 1px 3px rgba(38, 35, 34, 0.18);
}

/* Groessere Variante fuer den Login-/Willkommensbildschirm, wo das Logo als
   Blickfang staerker hervortreten soll. */
.app-logo-image--lg {
  height: var(--wb-logo-height-lg);
  width: var(--wb-logo-height-lg);
  border-radius: calc(var(--wb-logo-radius) * 1.6);
  box-shadow: 0 4px 14px rgba(38, 35, 34, 0.22);
}