/* AUFTRAG-EMPFANG-FUNDAMENT-CC.md Etappen 2 und 4: der Empfang im Backoffice.

   BEWUSST GLOBAL statt scoped - dieselbe Begruendung wie bei
   event-editor.css (BERICHT-EVENT-EDITOR-GESTALTUNG, Befund 1): Blazors
   CSS-Isolation setzt ihr Scope-Attribut nur auf Elemente im EIGENEN Markup
   einer Komponente, nicht auf das, was eine Kindkomponente rendert. Fast
   jede Klasse hier haengt aber genau dort (MudPaper, MudText, MudChip) -
   scoped waere sie stumm.

   Abstaende ausschliesslich aus der Skala in ci.css (--tim-space-1..6). Keine
   negativen Margins, keine Farben ausserhalb der CI-Tokens. */

/* ---------- Flaechen ---------- */

.empf-karte {
    padding: var(--tim-space-4);
    margin-bottom: var(--tim-space-4);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--tim-radius, 8px);
    background: var(--mud-palette-surface);
}

.empf-karte-hinweis {
    color: var(--mud-palette-text-secondary);
    margin-top: var(--tim-space-1);
}

.empf-karte-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
    margin-top: var(--tim-space-4);
}

.empf-gitter {
    margin-top: var(--tim-space-2);
}

.empf-meldung {
    margin-bottom: var(--tim-space-4);
}

.empf-trenner {
    margin: var(--tim-space-5) 0 var(--tim-space-4);
}

/* Zwei Spalten ab Tablet, darunter untereinander. Der Baum bekommt eine
   feste Mindestbreite, damit tiefe Zweige nicht auf zwei Zeichen zusammen-
   gequetscht werden; ueberlaufen darf er in seinem EIGENEN Rahmen (Lehre aus
   BERICHT-EVENT-EDITOR-GESTALTUNG Punkt 7 - der Outliner schob dort die
   ganze Seite auf). */
.empf-spalten {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tim-space-4);
}

@media (min-width: 960px) {
    .empf-spalten {
        grid-template-columns: minmax(320px, 2fr) 3fr;
    }
}

.empf-baum {
    overflow-x: auto;
}

.empf-detail {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-3);
}

.empf-detail-kopf {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
}

/* ---------- Der Baum ---------- */

.empf-zweig-zeile {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
    padding: var(--tim-space-1) var(--tim-space-2);
    border-radius: var(--tim-radius, 8px);
    cursor: pointer;
}

.empf-zweig-zeile:hover {
    background: var(--mud-palette-action-default-hover);
}

.empf-zweig-aktiv {
    background: var(--mud-palette-action-default-hover);
    outline: 2px solid var(--mud-palette-primary);
}

.empf-zweig-symbol {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.empf-zweig-name {
    white-space: nowrap;
}

/* Ausgeblendet heisst gedaempft, nicht durchgestrichen: Der Punkt ist nicht
   geloescht, er ruht. */
.empf-zweig-aus {
    color: var(--mud-palette-text-disabled);
}

.empf-zweig-zahl {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
}

.empf-zweig-luecke {
    flex: 1 1 auto;
}

.empf-zweig-kinder {
    margin-left: var(--tim-space-5);
    border-left: 1px solid var(--mud-palette-lines-default);
    padding-left: var(--tim-space-2);
}

/* ---------- Felder ---------- */

.empf-feld {
    padding: var(--tim-space-2) 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.empf-feld:last-of-type {
    border-bottom: none;
}

.empf-feld-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
}

.empf-feld-neu {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
    margin-top: var(--tim-space-4);
    padding-top: var(--tim-space-4);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.empf-feld-neu > * {
    min-width: 180px;
}

/* ---------- Eingangskorb ---------- */

.empf-korb-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tim-space-3);
    align-items: flex-end;
}

.empf-korb-filter > * {
    min-width: 180px;
}

.empf-korb-zeile {
    display: flex;
    align-items: center;
    gap: var(--tim-space-3);
    padding: var(--tim-space-3) var(--tim-space-2);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
}

.empf-korb-zeile:hover {
    background: var(--mud-palette-action-default-hover);
}

.empf-korb-zeile:last-of-type {
    border-bottom: none;
}

.empf-korb-absender {
    font-weight: 500;
    min-width: 160px;
}

.empf-korb-zeit {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ---------- Vorgang / Faden ---------- */

.empf-werte {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tim-space-2);
}

@media (min-width: 720px) {
    .empf-werte {
        grid-template-columns: max-content 1fr;
        column-gap: var(--tim-space-4);
    }
}

.empf-wert-label {
    color: var(--mud-palette-text-secondary);
}

.empf-faden {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-3);
}

.empf-nachricht {
    padding: var(--tim-space-3);
    border-radius: var(--tim-radius, 8px);
    border: 1px solid var(--mud-palette-lines-default);
}

.empf-nachricht-gast {
    background: var(--mud-palette-background-grey);
}

.empf-nachricht-betrieb {
    border-color: var(--mud-palette-primary);
}

/* Die interne Notiz MUSS auf den ersten Blick als intern erkennbar sein -
   wer sie fuer eine Antwort haelt, schreibt sie dem Gast. Gestrichelter
   Rahmen statt Farbflaeche: Es ist keine Warnung, nur etwas anderes. */
.empf-nachricht-intern {
    border-style: dashed;
    background: transparent;
}

.empf-nachricht-kopf {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
    margin-bottom: var(--tim-space-1);
}

.empf-nachricht-text {
    white-space: pre-wrap;
}

.empf-protokoll-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
    padding: var(--tim-space-1) 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

.empf-vorgangslink {
    word-break: break-all;
}