/*
 * Kummerkasten – Rückmeldungen: Badges, Alerts, Nachrichten, Tabellen,
 * QR-Box. Ausgelagert aus components.css (300-Zeilen-Richtgröße). Ampel-
 * Farben (Grün/Gelb/Rot) bleiben Funktionsfarben, unabhängig vom Marken-Rot.
 */

/* Ampel-Badge: Punkt + Text statt reiner Farbfläche (Farbfehlsichtigkeit). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
}

.badge::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge--gruen {
  background: var(--color-success-bg);
  color: var(--color-success-ink);
}
.badge--gruen::before {
  background: var(--color-success-ink);
}

.badge--gelb {
  background: var(--color-warning-bg);
  color: var(--color-warning-ink);
}
.badge--gelb::before {
  background: var(--color-warning-ink);
}

.badge--rot {
  background: var(--color-danger-bg);
  color: var(--color-danger-ink);
}
.badge--rot::before {
  background: var(--color-danger-ink);
}

/* Fristen-Ampel "überfällig": dezenter Puls-Glow-Ring statt nur Farbe -
   sofort erkennbar, auch für Farbfehlsichtige (Bewegung + Text + Farbe).
   Keyframe in motion-interactions.css, reduced-motion dort deaktiviert. */
.badge--rot.badge--urgent {
  animation: kk-glow-pulse 2.2s var(--ease-standard) infinite;
}

.alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  margin: var(--space-md) 0;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}

.alert--error {
  background: var(--color-danger-bg);
  color: var(--color-danger-ink);
  border-color: rgba(255, 138, 92, 0.35);
}

.alert--success {
  background: var(--color-success-bg);
  color: var(--color-success-ink);
  border-color: rgba(51, 209, 122, 0.35);
  animation: kk-fade-up var(--duration-slow) var(--ease-standard) both;
}

.alert--success .kk-icon {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: kk-draw-icon 700ms var(--ease-standard) 200ms both;
}

.alert ul {
  margin: 0;
  padding-left: 1.1rem;
}

.case-id-display {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--color-surface);
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-sm);
  text-align: center;
  color: var(--color-ink);
  word-break: break-all;
}

.message-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.message {
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.message--admin {
  background: var(--color-surface-2);
  border-left: 4px solid var(--color-ink-muted);
}

.message--melder {
  border-left: 4px solid var(--color-accent);
}

.message__meta {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  margin-bottom: 0.35rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
}

th,
td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 0.95rem;
}

th {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
}

tbody tr {
  transition: background-color var(--duration-base) var(--ease-standard);
}

tbody tr:hover {
  background: var(--color-surface-2);
}

.qr-box {
  background: #ffffff;
  padding: var(--space-sm);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  display: inline-block;
  box-shadow: var(--shadow-sm);
}