/**
 * FusionFitness Werbeverwaltung - Design System
 * ------------------------------------------------------------------
 * Rebranding 07/2026: dunkle Markenleiste, helle Arbeitsflaeche.
 * Konzept und Begruendungen: docs/DESIGN-KONZEPT-DASHBOARD.md
 *
 * Grundregeln:
 *  - Eine Akzentfarbe (#ffcc00). Sie ist NIE Textfarbe auf hellem Grund
 *    (Kontrast 1,6:1) - nur Flaeche mit dunklem Text oder Markierung.
 *  - Farbe bedeutet Status (ok/wartet/Fehler), sonst Graustufen.
 *  - Keine Verlaeufe, keine Glows, keine Hover-Hebungen.
 *
 * Der untere Teil ("Kompatibilitaet") deutet die alten Bootstrap-Dark-
 * Klassen (bg-dark, text-light, table-dark ...) auf die helle Welt um.
 * Die Templates nutzen sie noch ~400-mal; so wird alles in einem Zug
 * hell, und die Klassen koennen nach und nach aus dem Markup verschwinden.
 */

:root {
  /* Marke */
  --primary: #ffcc00;
  --primary-hover: #f5c500;
  --primary-border: #eabc00;

  /* Flaechen */
  --bg-page: #f7f7f8;        /* Seite */
  --bg-surface: #ffffff;     /* Karte */
  --bg-inset: #fafbfc;       /* eingebettete Flaeche (Tabellenkopf, Kartenkopf) */
  --bg-hover: #f0f2f4;

  /* Markenleiste (dunkler Rest der alten Welt) */
  --brand-bar: #1b1d21;
  --brand-border: #33363c;
  --brand-text: #a6abb3;
  --brand-text-active: #ffffff;

  /* Text - drei Stufen, mehr nicht */
  --text-primary: #1c1e21;
  --text-secondary: #5a6068;
  --text-muted: #8b9099;

  /* Rahmen */
  --border-primary: #e5e7ea;
  --border-strong: #d5d8dd;

  /* Status (auf Hell lesbar) */
  --status-ok: #1a7f37;
  --status-ok-bg: #eaf5ee;
  --status-warn: #9a6700;
  --status-warn-bg: #fdf6e3;
  --status-error: #cf222e;
  --status-error-bg: #fdeef0;
  --status-info: #0a5aa6;
  --status-info-bg: #eef4fc;

  /* Geometrie */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-card: 0 1px 2px rgba(28, 30, 33, 0.04);
  --shadow-pop: 0 8px 24px rgba(28, 30, 33, 0.12);
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;

  /* Altlast-Aliase: werden von aelteren Regeln/Inline-Styles referenziert */
  --bg-primary: var(--bg-page);
  --bg-secondary: var(--bg-surface);
  --bg-tertiary: var(--bg-hover);
  --bg-card: var(--bg-surface);
  --bg-card-hover: var(--bg-hover);
  --border-hover: var(--border-strong);
  --accent-green: var(--status-ok);
  --accent-red: var(--status-error);
  --accent-blue: var(--status-info);
  --accent-orange: var(--status-warn);
  --text-dim: var(--text-muted);
  --radius-xl: var(--radius-lg);
  --radius-full: 999px;
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-pop);
  --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem;
  --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem;
}

/* ============================== Grundflaechen ============================== */

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 { color: var(--text-primary); letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 650; }
h4, h5 { font-weight: 650; }

a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #000000; }
/* In Navigation, Buttons und Menues keine Unterstreichung */
.nav-link, .btn, .navbar-brand, .dropdown-item, .badge, .page-link { text-decoration: none !important; }

.lead { color: var(--text-secondary); font-size: 1rem; }

/* Sichtbarer Fokus fuer Tastaturbedienung - gehoert zu professionell */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

/* ============================== Markenleiste ============================== */

.navbar-modern {
  background: var(--brand-bar);
  border-bottom: 1px solid var(--brand-bar);
  box-shadow: none;
  padding-top: 0; padding-bottom: 0; min-height: 54px;
  /* Eigener Stacking-Kontext, damit Menues vor Seiteninhalt liegen (Fix 07/2026) */
  position: relative;
  z-index: 1030;
}

.navbar-modern .navbar-brand {
  font-weight: 650;
  font-size: 1rem;
  color: var(--brand-text-active);
  letter-spacing: -0.01em;
  padding: 0.85rem 0;
}
.navbar-modern .navbar-brand:hover { color: var(--brand-text-active); text-shadow: none; }
.navbar-modern .navbar-brand .marke-fusion { font-weight: 700; color: #ffffff; }
.navbar-modern .navbar-brand .marke-fitness { font-weight: 700; color: var(--primary); }
.navbar-modern .navbar-brand .marke-produkt {
  color: var(--brand-text); font-weight: 450; font-size: 0.9rem;
  margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--brand-border);
}
.navbar-modern .navbar-brand i { color: var(--primary); }

.navbar-modern .nav-link {
  color: var(--brand-text);
  padding: 0.95rem 0.8rem;
  margin: 0;
  border-radius: 0;
  position: relative;
  transition: color var(--transition-base);
}
.navbar-modern .nav-link:hover { color: var(--brand-text-active); background: transparent; }
.navbar-modern .nav-item.active .nav-link {
  color: var(--brand-text-active);
  background: transparent;
}
/* Aktiver Ort: gelbe Unterkante statt gefuellter Flaeche */
.navbar-modern .nav-item.active .nav-link::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0;
  height: 2px; background: var(--primary);
}
.navbar-modern .navbar-toggler { border-color: var(--brand-border); }
/* Hamburger-Linien: Bootstrap zeichnet sie NUR ueber .navbar-dark/.navbar-light -
   die Markenleiste nutzt keine der beiden Klassen (navbar-dark wuerde mit
   hoeherer Spezifitaet die Linkfarben kapern). Deshalb das Icon hier selbst,
   in Weiss fuer die dunkle Leiste. */
.navbar-modern .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-modern .badge { margin-left: 4px; }

/* Menues aus der dunklen Leiste oeffnen hell */
.dropdown-menu-modern {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 0.4rem;
}
.dropdown-menu-modern .dropdown-item, .dropdown-item-modern {
  color: var(--text-primary);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  transition: background var(--transition-fast);
}
.dropdown-menu-modern .dropdown-item:hover,
.dropdown-menu-modern .dropdown-item:focus,
.dropdown-menu-modern .dropdown-item:active,
.dropdown-item-modern:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.dropdown-menu-modern .dropdown-divider { border-top-color: var(--border-primary); }

/* ============================== Karten ============================== */

.card, .modern-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}
.card-header, .modern-card-header {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-primary);
  font-weight: 650;
  font-size: 0.9rem;
  padding: 0.7rem 1.1rem;
}
.card-footer { background: var(--bg-inset); border-top: 1px solid var(--border-primary); }

/* Kennzahl-Karte (Dashboard) */
.kennzahl-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.6rem;
}
.kennzahl-wert {
  font-size: 2rem; font-weight: 650; line-height: 1; color: var(--text-primary);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.kennzahl-unter {
  color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.kennzahl-unter b, .kennzahl-unter strong { color: var(--text-secondary); font-weight: 600; }

/* ============================== Buttons ============================== */

.btn { border-radius: var(--radius-md); font-weight: 550; font-size: 0.875rem; }
.btn:focus { box-shadow: none; }

/* Genau EIN gelber Primaerbutton pro Ansicht */
.btn-primary, .btn-modern-primary, .btn-warning {
  background: var(--primary);
  border: 1px solid var(--primary-border);
  color: var(--text-primary);
  font-weight: 650;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-modern-primary:hover, .btn-warning:hover {
  background: var(--primary-hover);
  border-color: var(--primary-border);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  transform: none;
}
.btn-modern { padding: 0.45rem 0.9rem; border-radius: var(--radius-md); display: inline-block; }

/* Sekundaer: still, weiss, Rahmen */
.btn-secondary, .btn-outline-light, .btn-outline-secondary, .btn-light {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}
.btn-secondary:hover, .btn-outline-light:hover, .btn-outline-secondary:hover, .btn-light:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Gefaehrliches bleibt rot - flach, ohne Verlauf */
.btn-danger { background: var(--status-error); border-color: var(--status-error); }
.btn-danger:hover { background: #b31f2a; border-color: #b31f2a; }
.btn-outline-danger { color: var(--status-error); border-color: var(--status-error); }
.btn-outline-danger:hover { background: var(--status-error); border-color: var(--status-error); color: #fff; }
.btn-success { background: var(--status-ok); border-color: var(--status-ok); }
.btn-success:hover { background: #14682d; border-color: #14682d; }

/* ============================== Status statt Badges ============================== */

.badge {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.3em 0.7em 0.3em 0.55em;
  border-radius: var(--radius-full);
}
/* Status-Punkt vor dem Text */
.badge-success::before, .badge-danger::before, .badge-warning::before,
.badge-info::before, .badge-secondary::before, .badge-dark::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-right: 6px; vertical-align: 1px;
  background: currentColor;
}
.badge-success  { background: var(--status-ok-bg);    color: var(--status-ok); }
.badge-danger   { background: var(--status-error-bg); color: var(--status-error); }
.badge-warning  { background: var(--status-warn-bg);  color: var(--status-warn); }
.badge-info     { background: var(--status-info-bg);  color: var(--status-info); }
.badge-secondary, .badge-dark { background: var(--bg-hover); color: var(--text-secondary); }

.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.status-dot.ok { background: var(--status-ok); }
.status-dot.warn { background: #bf8700; }
.status-dot.error { background: var(--status-error); }

/* ============================== Tabellen ============================== */

.table { color: var(--text-primary); }
.table th { border-color: var(--border-primary); }
.table td { border-color: #eff1f3; }
.table thead th {
  background: var(--bg-inset);
  color: var(--text-muted);
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-primary);
  border-top: none;
  padding-top: 0.6rem; padding-bottom: 0.6rem;
}
.table-hover tbody tr:hover { background: var(--bg-inset); color: var(--text-primary); }
.zahl { font-variant-numeric: tabular-nums; }

/* ============================== Formulare ============================== */

.form-control, .custom-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  border-radius: var(--radius-md);
}
.form-control:focus, .custom-select:focus {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.3);
}
.form-control::placeholder { color: var(--text-muted); }
label { color: var(--text-secondary); font-weight: 550; font-size: 0.875rem; }
.form-text, .form-text.text-muted { color: var(--text-muted) !important; }

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--primary);
  border-color: var(--primary-border);
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.3);
}
.custom-control-label { color: var(--text-primary); }
input[type="color"].form-control { padding: 0.2rem 0.3rem; }

/* ============================== Meldungen ============================== */

.alert { border-radius: var(--radius-lg); border: 1px solid; }
.alert-success   { background: var(--status-ok-bg);    border-color: #cde8d6; color: #14682d; }
.alert-danger    { background: var(--status-error-bg); border-color: #f5cdd2; color: #a11926; }
.alert-warning   { background: var(--status-warn-bg);  border-color: #efe3b8; color: #7a5200; }
.alert-info, .alert-secondary {
  background: var(--bg-inset); border-color: var(--border-primary); color: var(--text-secondary);
}
.alert .close { color: inherit; text-shadow: none; }

/* ============================== Kompatibilitaet ============================== */
/* Alte Bootstrap-Dark-Klassen -> helle Welt. Nach und nach aus den Templates
   entfernen; bis dahin sorgt diese Schicht dafuer, dass nichts dunkel bleibt. */

.bg-dark { background-color: var(--bg-surface) !important; color: var(--text-primary); }
body.bg-dark { background-color: var(--bg-page) !important; }
.card-header.bg-dark, .card-footer.bg-dark, thead.bg-dark { background-color: var(--bg-inset) !important; }
.text-light { color: var(--text-primary) !important; }
.border-secondary { border-color: var(--border-primary) !important; }

.table-dark { background-color: var(--bg-surface); color: var(--text-primary); }
.table-dark th, .table-dark td, .table-dark thead th { background-color: transparent; border-color: #eff1f3; }
.table-dark thead th {
  background: var(--bg-inset); color: var(--text-muted);
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.table-dark.table-hover tbody tr:hover { background: var(--bg-inset); color: var(--text-primary); }

.list-group-item.bg-dark { background-color: var(--bg-surface) !important; }
.close { color: var(--text-primary); text-shadow: none; }
.text-muted { color: var(--text-muted) !important; }

/* Ehemalige Effekt-Klassen: entschaerft, bis sie aus dem Markup verschwinden */
.text-gradient { background: none; -webkit-text-fill-color: initial; color: var(--text-primary); }
.navbar-modern .text-gradient { color: var(--primary); }
.hover-lift, .hover-lift:hover { transition: none; transform: none; }
.stat-card {
  background: var(--bg-surface); border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-card);
}
.stat-number { font-size: 2rem; font-weight: 650; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.icon-container { display: none; } /* Deko-Icon-Bubbles: entfallen */
.modern-table table, .modern-table { width: 100%; }

.modal-content { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-primary); }
.modal-header, .modal-footer { border-color: var(--border-primary); background: var(--bg-inset); }

.progress { background: var(--bg-hover); border-radius: var(--radius-full); }
.progress-bar, .progress-modern-bar { background: var(--primary); }

footer.footer {
  background: transparent !important;
  border-top: 1px solid var(--border-primary);
  color: var(--text-muted) !important;
  font-size: 0.85rem;
}
footer.footer a { color: var(--text-muted) !important; text-decoration: none; }
footer.footer a:hover { color: var(--text-secondary) !important; }