/**
 * Mantik Shared Badges — Einheitliche Status-Labels für alle SaaS-Apps.
 *
 * Einbinden: <link rel="stylesheet" href="/shared/badges.css">
 *
 * Nutzung im JS:
 *   badge('aktiv')  →  <span class="badge badge-aktiv">aktiv</span>
 *   badge('bezahlt') → <span class="badge badge-bezahlt">bezahlt</span>
 *
 * Jede App kann zusätzliche .badge-XYZ Klassen in ihrem eigenen CSS definieren.
 * Die Farb-Variablen (--green, --red, etc.) kommen aus dem App-eigenen :root.
 */

/* --- Basis --------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

/* --- Semantische Farben (häufigste Status-Wörter über alle Apps) --------- */

/* Positiv / Erfolg (grün) */
.badge-aktiv,
.badge-bezahlt,
.badge-gewonnen,
.badge-erledigt,
.badge-bearbeitet,
.badge-geliefert,
.badge-empfangen,
.badge-verbucht,
.badge-angenommen,
.badge-paid,
.badge-ok,
.badge-gut {
  background: var(--green-pale, #E8F5E9);
  color: var(--green, #2E7D32);
}

/* Neutral / Info (blau) */
.badge-neu,
.badge-offen,
.badge-gesendet,
.badge-geprueft,
.badge-pending,
.badge-brief {
  background: var(--blue-pale, #E3F2FD);
  color: var(--blue, #1565C0);
}

/* Warnung / In Bearbeitung (orange/gelb) */
.badge-kontaktiert,
.badge-verhandlung,
.badge-versandt,
.badge-shipped,
.badge-bestellt,
.badge-rechnung {
  background: var(--orange-pale, #FFF3E0);
  color: var(--orange, #E65100);
}

/* Negativ / Fehler (rot) */
.badge-storniert,
.badge-ueberfaellig,
.badge-abgelehnt,
.badge-verloren,
.badge-defekt,
.badge-cancelled,
.badge-bescheid {
  background: var(--red-pale, #FFEBEE);
  color: var(--red, #C62828);
}

/* Inaktiv / Archiv (grau) */
.badge-inaktiv,
.badge-entwurf,
.badge-archiviert,
.badge-ausgemustert,
.badge-gelesen {
  background: var(--grey-light, #F5F5F5);
  color: var(--grey, #757575);
}

/* Spezial (lila — Angebote, Verkauf) */
.badge-angebot,
.badge-zu_verkaufen,
.badge-verkauft {
  background: #F3E5F5;
  color: #6A1B9A;
}

/* Spezial (türkis — Reparatur, Formular, Bank) */
.badge-reparatur,
.badge-formular,
.badge-bank {
  background: #E0F2F1;
  color: #00695C;
}

/* --- Prioritäten --------------------------------------------------------- */

.badge-hoch {
  background: var(--red-pale, #FFEBEE);
  color: var(--red, #C62828);
}

.badge-normal {
  background: var(--blue-pale, #E3F2FD);
  color: var(--blue, #1565C0);
}

.badge-niedrig {
  background: var(--grey-light, #F5F5F5);
  color: var(--grey, #757575);
}

/* --- Geräte-Kategorien (mantik-erp) -------------------------------------- */

.badge-laptop,
.badge-handy,
.badge-tablet,
.badge-drucker {
  background: #E3F2FD;
  color: #1565C0;
}

/* --- Rollen (vereinskreis) ----------------------------------------------- */

.badge-admin,
.badge-vorstand {
  background: #E3F2FD;
  color: #1565C0;
}

.badge-trainer {
  background: #E8F5E9;
  color: #2E7D32;
}

.badge-member {
  background: #F5F5F5;
  color: #757575;
}

/* --- Zustandsfarben (generisch) ------------------------------------------ */

.badge-gebraucht {
  background: #FFF8E1;
  color: #F57F17;
}

.badge-neu.badge-condition,
.badge-condition-neu {
  background: #E8F5E9;
  color: #2E7D32;
}
