/* _content/bettERFramework.Comm.UI/Components/Pages/CommInbox.razor.rz.scp.css */
/* Nur Seiten-Layout und Posteingang-spezifische Kleinigkeiten — Bausteine kommen aus bp-components.css. */

/* Ungelesen-Punkt (CI-Gelb) bzw. leerer Ring für gelesene Nachrichten. */
[b-fanuqbz286] .comm-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bp-yellow);
    vertical-align: middle;
}

[b-fanuqbz286] .comm-unread-dot--read {
    background: transparent;
    border: 1px solid var(--bp-text-muted);
    opacity: 0.5;
}

/* Ungelesene Zeilen heben sich wie im Mail-Client per Schriftgewicht ab. */
[b-fanuqbz286] .e-row.comm-row-unread .e-rowcell {
    font-weight: 600;
    color: var(--bp-text);
}

/* Schlüssel-Spalte der Detail-Metadaten (Von/An/Empfangen/Postfach). */
[b-fanuqbz286] .comm-meta-key {
    color: var(--bp-text-muted);
    min-width: 84px;
    flex-shrink: 0;
}

[b-fanuqbz286] .comm-muted {
    color: var(--bp-text-muted);
}

/* ------------------------------------------------------------------
   Lesebereich (Detailspalte)
   ------------------------------------------------------------------ */

/* Halbe Seite: Der Lesebereich ist beim Lesen die Arbeitsflaeche, nicht die Liste. Bei 42 % war
   fremdes Mail-HTML (Tabellen, Newsletter) dauerhaft gestaucht; die Liste braucht nur Absender,
   Betreff und Zeit und kommt mit der anderen Haelfte aus. */
[b-fanuqbz286] .comm-detail {
    width: 50%;
    overflow: hidden;
}

/* ------------------------------------------------------------------
   Anhänge
   ------------------------------------------------------------------ */

[b-fanuqbz286] .comm-attachments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-fanuqbz286] .comm-attachment {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    padding: 0.375rem 0.5rem;
    border-radius: var(--bp-radius-ctl);
    background: var(--bp-panel-solid-2);
    font-size: 0.8125rem;
    color: inherit;
    text-decoration: none;
}

/* Herunterladbare Anhänge sind Bedienelemente und verhalten sich auch so. */
[b-fanuqbz286] a.comm-attachment:hover,
[b-fanuqbz286] a.comm-attachment:focus-visible {
    background: var(--bp-panel-hover);
}

[b-fanuqbz286] a.comm-attachment:hover .comm-attachment__name,
[b-fanuqbz286] a.comm-attachment:focus-visible .comm-attachment__name {
    text-decoration: underline;
}

[b-fanuqbz286] a.comm-attachment:hover .comm-attachment__icon,
[b-fanuqbz286] a.comm-attachment:focus-visible .comm-attachment__icon {
    color: var(--bp-yellow);
}

/* Ohne abgelegten Inhalt (Bestandsnachricht, zu großer Anhang): sichtbar, aber ruhiger. */
[b-fanuqbz286] .comm-attachment--plain .comm-attachment__name {
    color: var(--bp-text-muted);
}

[b-fanuqbz286] .comm-attachment__icon {
    color: var(--bp-text-faint);
    flex-shrink: 0;
}

[b-fanuqbz286] .comm-attachment__name {
    color: var(--bp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

/* Tabellenziffern: die Größen stehen untereinander und sollen eine Spalte bilden. */
[b-fanuqbz286] .comm-attachment__size {
    color: var(--bp-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Uebergaben (was ist aus dieser Nachricht geworden)
   ------------------------------------------------------------------ */

[b-fanuqbz286] .comm-handoffs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-fanuqbz286] .comm-handoff {
    display: flex;
    align-items: baseline;
    gap: var(--bp-space-2);
    padding: 0.375rem 0.5rem;
    border-radius: var(--bp-radius-ctl);
    background: var(--bp-panel-solid-2);
    font-size: 0.8125rem;
}

[b-fanuqbz286] .comm-handoff__icon {
    color: var(--bp-success, var(--bp-text-faint));
    flex-shrink: 0;
}

[b-fanuqbz286] .comm-handoff__text {
    color: var(--bp-text-muted);
    min-width: 0;
}

[b-fanuqbz286] .comm-handoff__reason {
    color: var(--bp-text-faint);
    margin-left: 0.25rem;
}

/* ------------------------------------------------------------------
   Gespraechs-Liste (eine Zeile je Thread, aufklappbar)
   ------------------------------------------------------------------ */

/* Betreff traegt die Zeile: etwas kraeftiger als die Nebenangaben. */
[b-fanuqbz286] .comm-subject {
    color: var(--bp-text);
}

/* Anzahl der Beitraege - die Begruendung dafuer, dass hier zusammengefasst wurde. */
[b-fanuqbz286] .comm-thread-count {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--bp-panel-solid-2);
    border: 1px solid var(--bp-panel-border);
    color: var(--bp-text-muted);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

[b-fanuqbz286] .comm-subject__clip {
    margin-left: 0.35rem;
    color: var(--bp-text-faint);
    font-size: 0.75rem;
}

/* Zeitspalte: rechtsbuendig mit Tabellenziffern, damit die Werte eine Kante bilden. */
[b-fanuqbz286] .comm-when {
    color: var(--bp-text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- Aufgeklappter Bereich --- */

[b-fanuqbz286] .comm-thread {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-3);
    padding: var(--bp-space-2) var(--bp-space-3);
}

[b-fanuqbz286] .comm-thread__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Jeder Beitrag ist ein Bedienelement - deshalb ein echter Button (fokussierbar, tastaturbedienbar). */
[b-fanuqbz286] .comm-thread__open {
    display: grid;
    grid-template-columns: 12px 14px minmax(120px, 200px) 1fr auto;
    align-items: center;
    gap: var(--bp-space-2);
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-radius: var(--bp-radius-ctl);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

[b-fanuqbz286] .comm-thread__open:hover,
[b-fanuqbz286] .comm-thread__open:focus-visible {
    background: var(--bp-panel-hover);
}

/* Der gerade geoeffnete Beitrag bleibt im Gespraech erkennbar. */
[b-fanuqbz286] .comm-thread__item--active .comm-thread__open {
    background: var(--bp-panel-solid-2);
    box-shadow: inset 2px 0 0 var(--bp-yellow);
}

/* Richtungspfeil: eingehend ruhig, ausgehend als eigene Aussage. */
[b-fanuqbz286] .comm-thread__dir {
    font-size: 0.75rem;
    color: var(--bp-text-faint);
}

[b-fanuqbz286] .comm-thread__from {
    color: var(--bp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-fanuqbz286] .comm-thread__preview {
    color: var(--bp-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

[b-fanuqbz286] .comm-thread__time {
    color: var(--bp-text-faint);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
}

/* --- Herkunft (Postfach, Sichtbarkeit, Spam-Grund) --- */

[b-fanuqbz286] .comm-origin {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr;
    gap: 0.25rem var(--bp-space-3);
    margin: 0;
    padding-top: var(--bp-space-2);
    border-top: 1px solid var(--bp-panel-border);
    font-size: 0.8125rem;
}

[b-fanuqbz286] .comm-origin dt {
    color: var(--bp-text-faint);
}

[b-fanuqbz286] .comm-origin dd {
    margin: 0;
    color: var(--bp-text-muted);
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    flex-wrap: wrap;
    min-width: 0;
}

[b-fanuqbz286] .comm-origin__reason {
    color: var(--bp-text-faint);
}