/*
 * Fallwerk – Aktenverlauf mit Notizen (ruhige, chronologische Liste: älteste Einträge oben, neueste unten).
 * Verwendet ausschließlich Tokens aus tokens.css.
 */
.note-list {
  display: grid;
  justify-self: stretch;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.note-entry {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-surface);
}

.note-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}

.note-title {
  margin: 0;
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-strong);
  overflow-wrap: anywhere;
}

.note-time {
  white-space: nowrap;
}

.note-entry > p {
  margin: 0;
}

.note-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Reserviert für spätere neutrale Systemeinträge (z. B. "Hilfe geändert"): schmal, ohne Rahmenfläche. */
.note-entry--system {
  padding: var(--space-1) var(--space-4);
  background: transparent;
  border: 0;
  border-left: calc(var(--border-width) * 3) solid var(--color-border);
  border-radius: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Bearbeiten bleibt zurückhaltend; Entfernen steht abgesetzt rechts. */
.note-entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  margin-top: var(--space-1);
}

.note-entry__remove {
  color: var(--color-danger);
}

.note-actions {
  margin-top: var(--space-3);
}

.note-form {
  gap: var(--space-4);
  /* B2d: Das Formular nutzt die volle Breite des Notizbereichs statt der Lesebreite. */
  max-width: 100%;
}

.module textarea {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
}

/* B2d: Betreff und Überschrift nebeneinander, oben bündig (der Hinweis unter dem Betreff streckt das Eingabefeld nicht). */
.note-form__head {
  align-items: start;
}

.note-form__head select {
  width: 100%;
}