/**
 * Webanalyse Dashboard – Globales Stylesheet
 * @version 1.5.0
 * @lastModified 2026-04-07
 * @description Einheitliche Farben, Schriftgrößen und Komponenten (Admin, Dashboard-SPA, Benutzer, Login)
 * @changelog
 * - v1.0.0: Initial (Variablen, Body, Nav, SPA-Overrides)
 * - v1.1.0: Anbindung Admin, User, Login, SPA; einheitliches Erscheinungsbild
 * - v1.2.0: a.btn (primary/secondary/danger, small) – Links als schwarze/graue Buttons
 * - v1.3.0: Zentrale Komponenten: Buttons, Tabellen, Karten, Nav, Formulare, Meldungen (kein Doppelcode)
 * - v1.3.1: a.btn.primary/secondary/danger :link/:visited – immer Button-Optik, kein Blau
 * - v1.4.0: --wf-btn-* Tokens für einheitliche Button-Höhe (button und a.btn)
 * - v1.4.1: Small-Buttons im Admin: Padding-Y 6px (statt 4px)
 * - v1.5.0: Brand-Tokens (Kernfunke) + Primary-Button in Brand-Farbe
 */

:root {
  /* Brand (KERNFUNKE) */
  --wf-brand-primary: #124e6f;
  --wf-brand-accent: #ffc403;

  /* Hintergründe */
  --wf-bg-page: #f5f5f5;
  --wf-bg-card: #ffffff;
  --wf-bg-table-header: #f8f8f8;
  --wf-bg-input: #ffffff;
  --wf-bg-button-primary: var(--wf-brand-primary);
  --wf-bg-button-secondary: #e5e5e5;
  --wf-bg-button-danger: #dc3545;
  --wf-bg-error: #fff5f5;
  --wf-bg-success: #f0fff4;
  --wf-bg-modal-overlay: rgba(0, 0, 0, 0.4);
  /* Schrift & Rahmen */
  --wf-text-primary: #111;
  --wf-text-body: #222;
  --wf-text-muted: #666;
  --wf-text-muted-light: #555;
  --wf-text-placeholder: #999;
  --wf-text-error: #dc3545;
  --wf-text-success: #28a745;
  --wf-border: #eee;
  --wf-border-input: #ccc;
  /* Schatten & Radius */
  --wf-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
  --wf-shadow-modal: 0 4px 24px rgba(0, 0, 0, 0.15);
  --wf-radius: 6px;
  --wf-radius-card: 8px;
  --wf-radius-modal: 10px;
  /* Typografie */
  --wf-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --wf-font-size-base: 14px;
  --wf-font-size-lg: 15px;
  --wf-font-size-sm: 12px;
  --wf-font-size-h1: 1.5rem;
  --wf-font-size-h2: 1.1rem;
  --wf-line-height: 1.5;
  /* Abstände */
  --wf-space: 24px;
  --wf-space-sm: 12px;
  --wf-space-xs: 8px;
  /* Buttons: eine Quelle für Padding/Schrift (Admin-Tabellen, Links = gleiche Höhe) */
  --wf-btn-padding-y: var(--wf-space-xs);
  --wf-btn-padding-x: 16px;
  --wf-btn-font-size: var(--wf-font-size-base);
  --wf-btn-padding-y-sm: 6px;
  --wf-btn-padding-x-sm: 10px;
  --wf-btn-font-size-sm: var(--wf-font-size-sm);
}

/* Basis: Body (gleiche Optik wie Admin) */
body {
  font-family: var(--wf-font);
  font-size: var(--wf-font-size-base);
  line-height: var(--wf-line-height);
  color: var(--wf-text-body);
  background-color: var(--wf-bg-page);
  margin: 0;
}

/* Links als Button: gleiche Optik wie echte Buttons (z. B. CSV exportieren) */
a.btn {
  text-decoration: none !important;
  display: inline-block;
  font-family: var(--wf-font);
  font-size: var(--wf-btn-font-size);
  padding: var(--wf-btn-padding-y) var(--wf-btn-padding-x);
  border: none;
  border-radius: var(--wf-radius);
  cursor: pointer;
  box-sizing: border-box;
}
a.btn.primary,
a.btn.primary:link,
a.btn.primary:visited {
  background: var(--wf-bg-button-primary) !important;
  color: #fff !important;
}
a.btn.secondary,
a.btn.secondary:link,
a.btn.secondary:visited {
  background: var(--wf-bg-button-secondary) !important;
  color: var(--wf-text-body) !important;
}
a.btn.danger,
a.btn.danger:link,
a.btn.danger:visited {
  background: var(--wf-bg-button-danger) !important;
  color: #fff !important;
}
a.btn.small {
  padding: var(--wf-btn-padding-y-sm) var(--wf-btn-padding-x-sm);
  font-size: var(--wf-btn-font-size-sm);
}
a.btn:hover { opacity: 0.92; }

/* Nav-Links: einheitlich sichtbar (Dashboard + Admin + User) */
.nav a,
header a[href],
a[href="/logout"],
a[href="/app/admin"],
a[href="/app/user"],
#role-nav-user-link {
  color: var(--wf-text-muted) !important;
  text-decoration: none;
  font-size: var(--wf-font-size-base) !important;
}
.nav a:hover,
header a[href]:hover,
a[href="/logout"]:hover,
a[href="/app/admin"]:hover,
a[href="/app/user"]:hover,
#role-nav-user-link:hover {
  color: var(--wf-text-primary) !important;
}

/* ========== Zentrale Komponenten (Admin, User, Login) ========== */

/* Layout */
.wf-container { max-width: 1200px; margin: 0 auto; }
.wf-container--narrow { max-width: 760px; margin: 0 auto; }
.wf-wrap { max-width: 420px; width: 100%; }

/* Karten / Boxen */
.wf-card {
  background: var(--wf-bg-card);
  border-radius: var(--wf-radius-card);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--wf-shadow-card);
}

/* Buttons (echte button + .btn) */
button,
.btn {
  padding: var(--wf-btn-padding-y) var(--wf-btn-padding-x);
  border: none;
  border-radius: var(--wf-radius);
  cursor: pointer;
  font-size: var(--wf-btn-font-size);
  font-family: var(--wf-font);
  box-sizing: border-box;
}
button.primary, .btn.primary { background: var(--wf-bg-button-primary); color: #fff; }
button.secondary, .btn.secondary { background: var(--wf-bg-button-secondary); color: var(--wf-text-body); }
button.danger, .btn.danger { background: var(--wf-bg-button-danger); color: #fff; }
button.small, .btn.small {
  padding: var(--wf-btn-padding-y-sm) var(--wf-btn-padding-x-sm);
  font-size: var(--wf-btn-font-size-sm);
}
button:disabled, .btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Tabellen */
.wf-table,
table.wf-table {
  width: 100%;
  border-collapse: collapse;
}
.wf-table th,
.wf-table td,
table.wf-table th,
table.wf-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--wf-border);
}
.wf-table th,
table.wf-table th {
  background: var(--wf-bg-table-header);
  font-weight: 600;
}

/* Nav (Seiten-Navigation) */
.wf-nav,
.nav {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.wf-nav a,
.nav a {
  color: var(--wf-text-muted);
  text-decoration: none;
  font-size: var(--wf-font-size-base);
}
.wf-nav a:hover,
.nav a:hover { color: var(--wf-text-primary); }
.wf-nav-right { margin-left: auto; }

/* Formulare: Inputs, Label */
.wf-form input,
.wf-form select,
.wf-form textarea,
input.wf-input,
select.wf-input,
textarea.wf-input {
  padding: 10px 12px;
  border: 1px solid var(--wf-border-input);
  border-radius: var(--wf-radius);
  font-size: var(--wf-font-size-base);
  font-family: var(--wf-font);
  width: 100%;
  box-sizing: border-box;
}
.wf-form label,
label.wf-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--wf-font-size-base);
  font-weight: 500;
  color: var(--wf-text-body);
}

/* Meldungen (Erfolg / Fehler) */
.wf-msg {
  padding: var(--wf-space-sm);
  border-radius: var(--wf-radius);
  margin: var(--wf-space-sm) 0 0;
  font-size: var(--wf-font-size-base);
}
.wf-msg.error { color: var(--wf-text-error); background: var(--wf-bg-error); }
.wf-msg.success { color: var(--wf-text-success); background: var(--wf-bg-success); }
/* Kompatibilität: .error, .success, .msg ohne Präfix */
.error { color: var(--wf-text-error); background: var(--wf-bg-error); padding: 12px; border-radius: var(--wf-radius); margin: 12px 0; }
.error.hidden,
.error:empty { display: none !important; padding: 0; margin: 0; min-height: 0; background: transparent; }
.success { color: var(--wf-text-success); background: var(--wf-bg-success); padding: 12px; border-radius: var(--wf-radius); margin: 12px 0; }

/* Modale (Basis für Admin-Panel) */
.wf-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--wf-bg-modal-overlay);
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--wf-space);
}
.wf-modal.visible { display: flex; }
.wf-modal-content {
  background: var(--wf-bg-card);
  padding: 28px 32px;
  border-radius: var(--wf-radius-modal);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  font-size: var(--wf-font-size-lg);
  line-height: var(--wf-line-height);
  color: var(--wf-text-body);
  box-shadow: var(--wf-shadow-modal);
}
.wf-modal-body label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--wf-text-muted-light); }
.wf-modal-body input,
.wf-modal-body textarea,
.wf-modal-body select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--wf-border-input);
  border-radius: var(--wf-radius);
  font-family: var(--wf-font);
  font-size: var(--wf-font-size-lg);
  box-sizing: border-box;
}
.wf-modal-body textarea { min-height: 80px; resize: vertical; }
.wf-modal-actions { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--wf-border); display: flex; gap: var(--wf-space-sm); justify-content: flex-end; }

/* Überschriften (optional zentral) */
.wf-h1 { margin: 0 0 var(--wf-space); font-size: var(--wf-font-size-h1); }
.wf-h2 { margin: var(--wf-space) 0 var(--wf-space-sm); font-size: var(--wf-font-size-h2); }

/* SPA-Dashboard: Hintergrund und Nav an Admin anpassen */
body.geist_a71539c9-module__T19VSG__variable,
body.antialiased {
  background-color: var(--wf-bg-page) !important;
}
.text-muted-foreground {
  color: var(--wf-text-muted) !important;
  font-size: var(--wf-font-size-base) !important;
}

/* Hilfs-Klassen für CSP (kein inline style) */
.hidden { display: none !important; }
.wf-full-width { width: 100%; box-sizing: border-box; }
.wf-inline-block { display: inline-block; }
.wf-mr-8 { margin-right: 8px; }
.wf-mt-12 { margin-top: 12px; }
.wf-overflow-x { overflow-x: auto; }
.wf-min-h-200 { min-height: 200px; }

/* Fallback-Seite (SPA-Catch-All, keine Inline-Scripts) */
.fallback-wrap {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wf-space);
  text-align: center;
}
.fallback-wrap a { color: var(--wf-text-primary); text-decoration: underline; }
.fallback-msg { margin-bottom: var(--wf-space-sm); }