/* System-Messages — gemeinsame Stilquelle (Single Source of Truth).
   Ausgelagert aus dem Inline-<style> von partials/system_messages.html (Phase 4, Block C).
   Geladen in core/templates/base.html; gilt fuer alle Seiten mit System-Messages.
   Farben ueber die kanonischen --ds-{typ}-* Status-Tokens (tokens.css, ADR-0016). */

.system-message {
  max-width: 1400px;
  margin: 0 auto 20px;
  padding: 0 20px;
  animation: slideInFromTop 0.4s ease-out;
}

.system-message-content {
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'DINNextLTPro', sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  position: relative;
}

.system-message-content .rnd-icon {
  font-size: 1.3em;
  flex-shrink: 0;
  margin-top: 2px;
}

.system-message-text {
  flex: 1;
}

.system-message-text strong {
  display: block;
  font-size: 1.1em;
  margin-bottom: 4px;
}

.system-message-text p {
  margin: 0;
  line-height: 1.4;
  font-size: 1em;
}

.system-message-text a {
  color: inherit;
  text-decoration: underline;
}

.system-message-text a:hover {
  opacity: 0.8;
}

.close-system-message-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 1.1em;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Info-Nachrichten (blau) */
.system-message-info .system-message-content {
  background-color: var(--ds-info-bg);
  border: 1px solid var(--ds-info-border);
  color: var(--ds-info-text);
}

.system-message-info .rnd-icon {
  color: var(--ds-info-icon);
}

.system-message-info .close-system-message-btn {
  color: var(--ds-info-text);
}

.system-message-info .close-system-message-btn:hover {
  background-color: var(--ds-info-btn-hover);
}

/* Warn-Nachrichten (orange/gelb) */
.system-message-warning .system-message-content {
  background-color: var(--ds-warning-bg);
  border: 1px solid var(--ds-warning-border);
  color: var(--ds-warning-text);
}

.system-message-warning .rnd-icon {
  color: var(--ds-warning-icon);
}

.system-message-warning .close-system-message-btn {
  color: var(--ds-warning-text);
}

.system-message-warning .close-system-message-btn:hover {
  background-color: var(--ds-warning-btn-hover);
}

/* Fehler-Nachrichten (rot) */
.system-message-error .system-message-content {
  background-color: var(--ds-error-bg);
  border: 1px solid var(--ds-error-border);
  color: var(--ds-error-text);
}

.system-message-error .rnd-icon {
  color: var(--ds-error-icon);
}

.system-message-error .close-system-message-btn {
  color: var(--ds-error-text);
}

.system-message-error .close-system-message-btn:hover {
  background-color: var(--ds-error-btn-hover);
}

/* Erfolgs-Nachrichten (gruen) */
.system-message-success .system-message-content {
  background-color: var(--ds-success-bg);
  border: 1px solid var(--ds-success-border);
  color: var(--ds-success-text);
}

.system-message-success .rnd-icon {
  color: var(--ds-success-icon);
}

.system-message-success .close-system-message-btn {
  color: var(--ds-success-text);
}

.system-message-success .close-system-message-btn:hover {
  background-color: var(--ds-success-btn-hover);
}

@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}