/* =========================================================================
   Seiten-CSS: E-Mail-Empfänger (recipients.ejs)
   Nur seitenspezifische Ergänzungen. Zuerst das Vokabular aus DESIGN.md
   verwenden (Komponenten, .stack/.cluster/.grid). Ausschließlich Tokens
   (var(--…)) verwenden, keine Hex-Werte, keine Redefinition von Basis-
   Klassen (.btn, .card, .table, .badge, .muted, .pagination …).
   Selektoren mit einer Seitenklasse präfixen, z. B. .page-recipients …
   ========================================================================= */

/* --- Kopfbereich: Erklärung + globale Einstellung ------------------------ */
.page-recipients .recipients-intro {
    align-items: start;
}

.page-recipients .recipients-setting,
.page-recipients .recipients-setting-form {
    display: flex;
    flex-direction: column;
}

.page-recipients .recipients-setting-form {
    flex: 1;
}

.page-recipients .recipients-setting-form > .card-body {
    flex: 1;
}

/* Ablauf in vier Schritten: 1 → 2 → 4 Spalten nach Kartenbreite */
.page-recipients .routing-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: routing;
}

@container (min-width: 520px) {
    .page-recipients .routing-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 960px) {
    .page-recipients .routing-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.page-recipients .routing-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    counter-increment: routing;
}

.page-recipients .routing-step-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--brand-border);
    border-radius: 50%;
    background: var(--brand-bg);
    color: var(--brand-fg);
}

.page-recipients .routing-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    color: var(--color-text);
}

.page-recipients .routing-step-title::before {
    content: counter(routing) '. ';
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.page-recipients .routing-step-text {
    margin-top: 2px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

.page-recipients .routing-step-text strong {
    color: var(--color-text);
}

/* --- Bereichskarten ------------------------------------------------------ */
/* .grid-auto.grid-max-3.grid-stretch: mindestens 340 px je Karte, höchstens drei
   Spalten (9 Bereiche = 3 × 3), Karten einer Reihe gleich hoch */
.page-recipients .recipients-grid {
    --grid-min: 340px;
}

.page-recipients .recipient-card {
    display: flex;
    flex-direction: column;
    scroll-margin-top: calc(var(--sticky-top) + var(--space-4));
    transition: border-color var(--duration) var(--ease-standard), box-shadow var(--duration) var(--ease-standard);
}

/* Nach dem Speichern springt die Seite zu #bereich-…: Karte kurz hervorheben */
.page-recipients .recipient-card:target:not(.is-error) {
    border-color: var(--navy-200);
    box-shadow: var(--shadow-xs), 0 0 0 3px var(--navy-100);
}

.page-recipients .recipient-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
}

/* Gruppennummer und aktive Ansprechpartner: je eine Zeile mit kleinem Icon */
.page-recipients .recipient-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-recipients .recipient-meta > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

.page-recipients .recipient-meta .icon {
    flex-shrink: 0;
    color: var(--gray-400);
}

.page-recipients .recipient-number {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.page-recipients .recipient-form {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.page-recipients .recipient-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-4);
}

.page-recipients .recipient-body > * + * {
    margin-top: 0;
}

/* Wirksame Empfänger (Stand der Datenbank, nicht der ungespeicherten Eingabe) */
.page-recipients .route-note {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: var(--space-2-5);
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.page-recipients .route-note-icon {
    margin-top: 2px;
}

.page-recipients .route-note strong {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

/* Adressen möglichst zwischen den Adressen umbrechen, nicht mitten im Namen */
.page-recipients .route-addr {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.page-recipients .route-note-sub {
    margin-top: 1px;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

.page-recipients .route-note-sub .route-via {
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

.page-recipients .route-own .route-note-icon {
    color: var(--success-fg);
}

.page-recipients .route-fallback .route-note-icon {
    color: var(--gray-500);
}

.page-recipients .route-missing {
    border-color: var(--warning-border);
    background: var(--warning-bg);
    color: var(--warning-text);
}

.page-recipients .route-missing .route-note-icon {
    color: var(--warning-fg);
}

.page-recipients .recipient-card .card-footer {
    flex-wrap: nowrap;
    margin-top: auto;
}

.page-recipients .recipient-updated {
    flex: 1 1 auto;
    min-width: 0;
}

.page-recipients .recipient-card .card-footer > .btn {
    flex-shrink: 0;
}

/* Telefon: „Einstellung speichern“ wie andere Speichern-Aktionen über die volle
   Breite (die Bereichskarten bleiben kompakt: Hinweis links, Button rechts) */
@media (max-width: 639.98px) {
    .page-recipients .recipients-setting .card-footer > .btn {
        flex: 1 1 100%;
    }
}