/* CLAUDE: ======================================================================
   COMPONENTS-EXTENDED.CSS  UI-Komponenten Teil 2
   Badges, Alerts, List Groups
   Ziel: d200 Zeilen
   ====================================================================== */

/* CLAUDE: ======================================================================
   6.4 BADGES
   ====================================================================== */

/* CLAUDE: .badge  Basis-Styles für Badges (Padding, Border-Radius, Font) */
/* CLAUDE: Ändern: Für rechteckige Badges border-radius: 0; setzen */
.badge {
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

/* CLAUDE: .badge-success  Grünes Badge für Erfolg (Success-Green) */
/* CLAUDE: Ändern: Für andere Success-Farbe background-color anpassen */
.badge-success {
  color: var(--color-success);
  background-color: var(--color-success-light);
}

/* CLAUDE: .badge-warning  Oranges Badge für Warnung (Warning-Orange) */
/* CLAUDE: Ändern: Für andere Warning-Farbe background-color anpassen */
.badge-warning {
  color: var(--color-warning);
  background-color: var(--color-warning-light);
}

/* CLAUDE: .badge-danger  Rotes Badge für Fehler (Danger-Red) */
/* CLAUDE: Ändern: Für andere Danger-Farbe background-color anpassen */
.badge-danger {
  color: var(--color-danger);
  background-color: var(--color-danger-light);
}

/* CLAUDE: .badge-info  Blaues Badge für Info (Gold als Alternative) */
/* CLAUDE: Ändern: Für echtes Blau var(--color-info) definieren und verwenden */
.badge-info {
  color: var(--color-brown);
  background-color: rgba(193, 154, 107, 0.2);
}

/* CLAUDE: .badge-pill  Runde Badges (border-radius: 50px) */
/* CLAUDE: Ändern: Für weniger Rundung border-radius: 16px setzen */
.badge-pill {
  border-radius: 50px;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* CLAUDE: ======================================================================
   6.5 ALERTS
   ====================================================================== */

/* CLAUDE: .alert  Basis-Styles für Alerts (Padding, Border, Border-Radius) */
/* CLAUDE: Ändern: Für andere Abstände padding auf var(--space-xl) erhöhen */
.alert {
  position: relative;
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: clamp(0.9375rem, 1.2vw, 1rem); /* 1516px */
  line-height: 1.6;
}

/* CLAUDE: .alert-success  Grüner Alert für Erfolg */
/* CLAUDE: Ändern: Für andere Success-Farbe background-color anpassen */
.alert-success {
  color: var(--color-success);
  background-color: var(--color-success-light);
  border-color: var(--color-success);
}

/* CLAUDE: .alert-warning  Oranger Alert für Warnung */
/* CLAUDE: Ändern: Für andere Warning-Farbe background-color anpassen */
.alert-warning {
  color: var(--color-warning);
  background-color: var(--color-warning-light);
  border-color: var(--color-warning);
}

/* CLAUDE: .alert-danger  Roter Alert für Fehler */
/* CLAUDE: Ändern: Für andere Danger-Farbe background-color anpassen */
.alert-danger {
  color: var(--color-danger);
  background-color: var(--color-danger-light);
  border-color: var(--color-danger);
}

/* CLAUDE: .alert-dismissible  Alert mit Close-Button (padding-right für X) */
/* CLAUDE: Ändern: Für anderen Close-Button-Position padding-right anpassen */
.alert-dismissible {
  padding-right: var(--space-3xl);
}

/* CLAUDE: .alert-close  Close-Button (X) oben rechts */
.alert-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: transparent;
  border: 0;
  font-size: 1.5rem; /* 24px */
  line-height: 1;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

/* CLAUDE: .alert-close:hover  Opacity 1 beim Hover */
.alert-close:hover {
  opacity: 1;
}

/* CLAUDE: ======================================================================
   6.6 LIST GROUP
   ====================================================================== */

/* CLAUDE: .list-group  <ul> für vertikale Listen mit Borders */
/* CLAUDE: Ändern: Für horizontale Liste flex-direction: row; setzen */
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-radius: var(--radius-md);
}

/* CLAUDE: .list-group-item  Item in List-Group (Border, Padding) */
/* CLAUDE: Ändern: Für andere Abstände padding auf var(--space-lg) erhöhen */
.list-group-item {
  position: relative;
  display: block;
  padding: var(--space-md) var(--space-lg);
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-top-width: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* CLAUDE: Erstes Item  border-top-width: 1px, obere Ecken rund */
.list-group-item:first-child {
  border-top-width: 1px;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

/* CLAUDE: Letztes Item  untere Ecken rund */
.list-group-item:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* CLAUDE: List-Group-Item Hover  Hintergrund Marble */
.list-group-item:hover {
  background-color: var(--color-marble);
}

/* CLAUDE: .list-group-item.active  Aktives Item (Gold-Hintergrund) */
/* CLAUDE: Ändern: Für andere Active-Farbe background-color auf var(--color-brown) setzen */
.list-group-item.active {
  color: #fff;
  background-color: var(--color-gold);
  border-color: var(--color-gold);
}