/* ============================================================
   Detail-Layout (gemeinsames Designsystem für Detailseiten)
   ------------------------------------------------------------
   Portiert 1:1 aus der Kundendetailseite (CreateOrEditMember).
   Wird von Angebots-, Vertrags-, Vorlagen- und Leistungs-Detail
   verwendet, damit alle Detailseiten identisch aussehen.
   Global (nicht scoped), damit dieselben Klassen ohne Duplikat
   in mehreren Komponenten genutzt werden können.
   ============================================================ */

.md-root {
    /* Mapping auf bestehende Theme-Variablen */
    --primary: var(--primary-background-color, #229D5C);
    --primary-dark: var(--primary-dark-color, #1A7A49);
    --primary-light: var(--primary-light-color, #BFE6D2);
    --secondary: var(--secondary-background-color, #2B5562);
    --secondary-dark: var(--secondary-dark-color, #1F3E49);
    --secondary-light: var(--secondary-light-color, #B4C8CE);
    --text: var(--color-text, #3D3B3B);
    --text-light: var(--color-text-light, #828282);
    --error: var(--error-color, #FF0000);
    --error-light: var(--error-background-color, #FFE6E6);
    --warning: #FFAA00;
    --warning-light: #FFF6E6;
    --success: var(--success-color, #5CBF00);
    --success-light: var(--success-background-color, #F5FFE9);
    --border: var(--color-border, #E4E7E9);
    --radius: var(--border-radius, 0.2em);
    --body-bg: #F5F6F7;
    --panel-bg: #FFFFFF;

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ------------------------------------------------------------
   Einbettung in die ToolbarComponent (AdaptToContainer=true):
   die Detailseite füllt den Content vollständig aus, der innere
   Scrollbereich (.md2-scroll) übernimmt das Scrollen, der Header
   bleibt fixiert. Der linke Rand (55px) für die Aktionsleiste
   bleibt erhalten.
   ------------------------------------------------------------ */
.toolbar-container.adaptToContainer .toolbar-container-content:has(> .md-root) {
    padding: 0;
    overflow: hidden;
}

/* ============================================================
   Page shell
   ============================================================ */
.md2-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--body-bg);
    position: relative;
}

/* ============================================================
   Header (Eyebrow / Titel / Pills / Meta)
   ============================================================ */
.md2-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 16px 28px;
    flex-shrink: 0;
}

.md2-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.md2-titles {
    min-width: 0;
    flex: 1;
}

.md2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light);
    font-weight: 500;
    margin-bottom: 6px;
}

    .md2-eyebrow i {
        font-size: 11px;
        color: var(--secondary);
    }

    .md2-eyebrow .sep {
        opacity: 0.5;
        margin: 0 4px;
    }

.md2-title {
    font-size: 22px !important;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.md2-subtitle {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 4px;
    font-weight: 400;
}

.md2-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-light);
    flex-wrap: wrap;
}

    .md2-meta > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.num-mono {
    font-weight: 500;
}

/* Pills (neutral gehalten – Status wird nicht farbcodiert) */
.mbd-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--secondary-light);
    color: var(--secondary-dark);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #9FB4BB;
}

    .mbd-type-pill i {
        font-size: 10px;
    }

    .mbd-type-pill.neutral {
        background: #F0F2F4;
        color: var(--text-light);
        border-color: var(--border);
    }

    .mbd-type-pill.readonly {
        background: #FFF3DC;
        color: #B47816;
        border-color: #F4D58C;
    }

    .mbd-type-pill.accent {
        background: var(--primary-light);
        color: var(--primary-dark);
        border-color: #93D2B0;
    }

/* ============================================================
   Content-Bereich
   ============================================================ */
.md2-scroll {
    flex: 1;
    overflow: auto;
    padding: 24px 28px 32px;
    min-height: 0;
}

.md3-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.md2-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

    .md2-row.full {
        grid-template-columns: 1fr;
        margin-bottom: 24px;
    }

/* Einzelne Karte ohne Row-Wrapper */
.md2-card-standalone {
    margin-bottom: 24px;
}

@media (max-width: 1200px) {
    .md3-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .md2-row,
    .md3-row {
        grid-template-columns: 1fr;
    }
}

.md2-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(31,62,73,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.md2-card-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.md2-card-h-l {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.md2-card-h-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--primary-light);
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

    .md2-card-h-icon.warn {
        background: #FFF3DC;
        color: #B47816;
    }

    .md2-card-h-icon.secondary {
        background: var(--secondary-light);
        color: var(--secondary-dark);
    }

.md2-card-h-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.md2-card-h-sub {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 2px;
}

.md2-card-body {
    padding: 20px 22px;
    flex: 1;
}

    .md2-card-body.tight {
        padding: 16px 22px;
    }

.md2-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
}

.md2-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px 22px;
}

@media (max-width: 768px) {
    .md2-grid-2,
    .md2-grid-3 {
        grid-template-columns: 1fr;
    }
}

.md2-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .md2-field.span-2 {
        grid-column: 1 / -1;
    }

    .md2-field.span-3 {
        grid-column: 1 / -1;
    }

    .md2-field > label {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--text-light) !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2;
    }

        .md2-field > label .req {
            color: var(--error);
        }

/* Untertitel / Trennlinie innerhalb einer Karte */
.md2-card-subhead {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    font-weight: 700;
    margin: 4px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .md2-card-subhead.span-2 {
        grid-column: 1 / -1;
    }

    .md2-card-subhead:not(:first-child) {
        margin-top: 18px;
    }

    .md2-card-subhead i {
        color: var(--secondary);
        font-size: 11px;
    }

.md2-checkrow {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.md2-field-hint {
    font-size: 11.5px;
    color: var(--text-light);
    font-style: italic;
    margin-top: 2px;
}

/* ============================================================
   Inline "Hinzufügen"-Zeile (z.B. Leistung wählen + hinzufügen)
   ============================================================ */
.md2-inline-add {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

    .md2-inline-add .md2-inline-add-field {
        flex: 1 1 320px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

/* Leerer Zustand innerhalb einer Karte */
.md2-empty-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
    color: var(--text-light);
    font-size: 12.5px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: #FAFBFC;
}

    .md2-empty-hint i {
        font-size: 24px;
        color: var(--secondary-light);
    }

/* ============================================================
   Leistungs-/Positions-Tabelle (in Karte eingebettet)
   ============================================================ */
.md2-linetable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .md2-linetable thead th {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-light);
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
        background: #FAFBFC;
    }

    .md2-linetable tbody td {
        padding: 10px;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
        overflow-wrap: anywhere;
        font-size: 13px;
        color: var(--text);
    }

    .md2-linetable tbody tr:last-child td {
        border-bottom: none;
    }

    .md2-linetable tbody tr:hover td {
        background: #FAFBFC;
    }

.md2-line-title {
    font-weight: 600;
    color: var(--text);
}

.md2-line-sub {
    font-size: 11.5px;
    color: var(--text-light);
    margin-top: 2px;
}

.md2-line-num {
    text-align: right;
}

.md2-line-actions {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}

/* Ausgeblendeter Reihenfolge-Button: unsichtbar, belegt aber weiterhin Platz,
   damit die übrigen Buttons (z. B. "Preise") zeilenübergreifend fluchten. */
.md2-line-actions .vtg-action-hidden {
    visibility: hidden;
}

/* ============================================================
   Syncfusion-Inputs – stimmiges Look innerhalb .md-root
   ============================================================ */
.md-root .md2-field .e-input-group,
.md-root .md2-field .e-control-wrapper,
.md-root .md2-field input.e-input {
    border-radius: 4px;
}
QoL
.md-root .e-input-group:not(.e-disabled),
.md-root .e-input-group.e-control-wrapper:not(.e-disabled) {
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}

.md-root .e-input-group.e-disabled,
.md-root .e-input-group.e-control-wrapper.e-disabled {
    background: #FAFBFC;
    border-color: var(--border);
    opacity: 1;
}

.md-root .e-input-group input.e-input,
.md-root .e-input-group.e-control-wrapper input.e-input {
    font-size: 13px;
    color: var(--text);
}

.md-root .e-input-group.e-disabled input.e-input {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    opacity: 1;
}

/* Mehrzeilige Textfelder etwas höher */
.md-root .md2-field textarea.e-input {
    min-height: 84px;
    padding-top: 8px;
}

/* =========================================================================
   Dokumente-Tab (Kunde): Dropzone, kategoriegruppierte Liste, Upload-Popup
   ========================================================================= */
.mbd-doc-dropzone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: 10px;
    background: #fff;
    padding: 22px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    /* Hover subtil: nur ein leicht kräftigerer Rahmen, kein farbiger Hintergrund. */
    .mbd-doc-dropzone:hover {
        border-color: var(--primary-light);
        background: #FCFDFC;
    }

    /* Drag-Over: deutliches Feedback beim Ziehen einer Datei über die Zone
       (:hover greift während eines Drags nicht, daher eigene Klasse). */
    .mbd-doc-dropzone.is-dragover {
        border-color: var(--primary);
        border-style: solid;
        background: var(--primary-light);
    }

        .mbd-doc-dropzone.is-dragover .mbd-doc-dropzone-hint i,
        .mbd-doc-dropzone.is-dragover .mbd-doc-dropzone-title {
            color: var(--primary-dark);
        }

    /* Natives Datei-Input, das die ganze Zone transparent überlagert: Klick öffnet
       den Dateidialog, Drag&Drop übergibt die Datei. Unser Hinweis liegt darunter. */
    .mbd-doc-dropzone-input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

        .mbd-doc-dropzone-input::-webkit-file-upload-button,
        .mbd-doc-dropzone-input::file-selector-button {
            cursor: pointer;
        }

.mbd-doc-dropzone-hint {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    pointer-events: none;
    color: var(--text-light);
}

    .mbd-doc-dropzone-hint i {
        font-size: 26px;
        color: var(--primary);
        margin-bottom: 4px;
    }

.mbd-doc-dropzone-title {
    font-weight: 600;
    color: var(--text);
}

.mbd-doc-dropzone-sub {
    font-size: 12px;
    color: var(--text-light);
}

/* Kategorie-Gruppe nutzt die md2-card-Optik der Stammdaten (weiße Karte, Header mit
   gerundetem Icon + Titel); hier nur Abstand + Zähler-Pill. */
.mbd-doc-group {
    margin-bottom: 16px;
}

.mbd-doc-group-count {
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mbd-doc-list {
    display: flex;
    flex-direction: column;
}

.mbd-doc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}

    .mbd-doc-row:last-child {
        border-bottom: none;
    }

.mbd-doc-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.mbd-doc-info {
    flex: 1;
    min-width: 0;
}

.mbd-doc-name {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbd-doc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 2px;
}

    .mbd-doc-meta i {
        margin-right: 3px;
    }

.mbd-doc-sep {
    opacity: 0.5;
}

/* Kennzeichnung: Zeile stammt aus einem verknüpften Antrag (schreibgeschützt) */
.mbd-doc-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 11px;
}

    .mbd-doc-source-badge i {
        margin-right: 0;
    }

.mbd-doc-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.mbd-doc-action {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

    .mbd-doc-action:hover {
        background: var(--primary-light);
        color: var(--primary-dark);
    }

    .mbd-doc-action.mbd-doc-action-delete:hover {
        background: var(--error-light);
        color: var(--error);
    }

/* Upload-Popup */
.mbd-doc-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mbd-doc-dialog-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 13px;
    word-break: break-all;
}

    .mbd-doc-dialog-file i {
        font-size: 16px;
    }

.mbd-doc-dialog-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Vorschau-Popup: Fallback für nicht inline darstellbare Dateitypen. */
.mbd-doc-preview-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 60vh;
    text-align: center;
    color: var(--text-light);
}

    .mbd-doc-preview-fallback i {
        font-size: 42px;
        color: var(--primary);
    }

/* =========================================================================
   Zählerstände-Tab (Kunde): Toolbar-Button, Gruppen wie Dokumente,
   Wert+Einheit im Popup. Die Gruppen/Zeilen nutzen die mbd-doc-*-Klassen.
   ========================================================================= */
.mbd-meter-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

/* Hinweiszeile in einer Anschluss-Gruppe ohne Zählerstände. */
.mbd-meter-empty {
    padding: 14px 18px;
    font-size: 12.5px;
    color: var(--text-light);
}

/* Wertefeld + Einheit nebeneinander im Popup. */
.mbd-meter-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .mbd-meter-value-row .e-control-wrapper,
    .mbd-meter-value-row .e-input-group {
        flex: 1;
    }

.mbd-meter-unit {
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
}

/* Sub-Tab-Leiste im Zählerstände-Tab: je zählerstandsfähigem Anschluss ein Tab (umbrechend). */
.mbd-meter-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

/* Einzelner Anschluss-Tab. */
.mbd-meter-subtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text-light);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

    .mbd-meter-subtab:hover {
        border-color: var(--primary);
        color: var(--primary-dark);
    }

    .mbd-meter-subtab i {
        font-size: 13px;
    }

    .mbd-meter-subtab.active {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

.mbd-meter-subtab-title {
    white-space: nowrap;
}

/* Anzahl der Einträge des Anschlusses als Badge im Tab. */
.mbd-meter-subtab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
}

    .mbd-meter-subtab.active .mbd-meter-subtab-count {
        background: rgba(255,255,255,0.25);
        color: #fff;
    }

/* Panel (Karte) des aktiven Anschlusses inkl. Grid. */
.mbd-meter-panel {
    margin-bottom: 24px;
}

.mbd-meter-grid-wrap {
    padding: 16px 18px 18px;
}

.mbd-meter-grid-value {
    font-weight: 600;
    color: var(--text);
}

/* Verbrauch (gerechnet) etwas zurückgenommen gegenüber den Zählerständen. */
.mbd-meter-grid-consumption {
    font-weight: 600;
    color: var(--primary-dark);
}

/* Zeitraum-Felder im Popup: Start und Ende paarweise nebeneinander. */
.mbd-meter-dialog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

@media (max-width: 640px) {
    .mbd-meter-dialog-grid {
        grid-template-columns: 1fr;
    }
}

/* Gerechneter Verbrauch als Info-Zeile unter den Eingabefeldern. */
.mbd-meter-consumption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--primary-light);
}

.mbd-meter-consumption-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-light);
}

.mbd-meter-consumption-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
}

.mbd-meter-consumption-hint {
    flex: 1 1 100%;
    font-size: 11.5px;
    color: var(--text-light);
}

/* Validierungsfehler innerhalb eines Popups (z. B. Zählerstand erfassen).
   Syncfusion hängt den Dialog ausserhalb von .md-root ein, deshalb hier die
   globalen Theme-Token statt der auf .md-root gemappten Kurznamen. */
.mbd-dialog-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--error-border-color, #EFB3AE);
    border-left: 4px solid var(--error-accent-color, #E5342A);
    border-radius: 8px;
    background: var(--error-background-color, #FDECEA);
    color: var(--error-color, #9F1F17);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
}

    .mbd-dialog-error i {
        margin-top: 1px;
        font-size: 14px;
        color: var(--error-accent-color, #E5342A);
    }

.mbd-meter-dialog-hint {
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-light);
}

/* ============================================================
   Fakturierung-Tab (Rechnungen – flache Liste)
   ============================================================ */
.mbd-inv-panel {
    margin-bottom: 24px;
}

.mbd-inv-grid-wrap {
    padding: 16px 18px 18px;
}

.mbd-inv-empty {
    padding: 22px 18px;
    color: var(--text-light);
    font-size: 13px;
}

.mbd-inv-amount {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* Zahlungsstatus als farbcodierte Pille. */
.mbd-inv-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #F0F2F4;
    color: var(--text-light);
    border: 1px solid var(--border);
}

    .mbd-inv-status.is-open {
        background: #FFF3DC;
        color: #B47816;
        border-color: #F4D58C;
    }

    .mbd-inv-status.is-paid {
        background: var(--primary-light);
        color: var(--primary-dark);
        border-color: #93D2B0;
    }

    .mbd-inv-status.is-overdue {
        background: #FDECEC;
        color: #C0392B;
        border-color: #F5C2C0;
    }

/* Download als Icon-Button (Anker) im Aktionen-Grid. Trägt e-btn e-primary e-icon-btn wie die
   SfButtons daneben (die App stylt .grid-button-container .e-btn.e-icon-btn auf 28x28). Als <a>
   erbt das Icon sonst die dunkle Link-Farbe -> Icon-Farbe explizit auf die Primär-Schriftfarbe
   erzwingen (wie bei den SfButton-Icons) und den Unterstrich entfernen. */
.mbd-inv-download,
.mbd-inv-download:hover,
.mbd-inv-download:focus {
    text-decoration: none;
    color: var(--primary-font-color, #fff) !important;
}

    .mbd-inv-download i {
        color: var(--primary-font-color, #fff) !important;
    }

/* Read-only Info-Zeile (Rechnungsnr · Datum · Betrag) im Bearbeiten-Popup. */
.mbd-inv-edit-context {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: var(--secondary-light);
    color: var(--secondary-dark);
    font-size: 13px;
    font-weight: 600;
}

/* ==========================================================================
   Kommunikation
   Zwei Bereiche, bewusst GLOBAL statt in scoped CSS: der Erfassungsdialog und
   das Nachrichten-Popup im Kundentab rendern über SfDialog in ein Popup
   AUSSERHALB des Komponenten-Subtrees - dort greifen die Isolationsattribute
   nicht.

     mbd-comm-*  Kundendetail: Tab "Kommunikation" und dessen Detail-Popup
     mcd-*       Erfassungsdialog (Assistent: Empfänger -> Nachricht)
   ========================================================================== */

/* ---------------------------------------------------------- Kundentab ---- */
.mbd-comm-panel .md2-card-h {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mbd-comm-panel-actions {
    margin-left: auto;
}

.mbd-comm-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-light, #828282);
    font-size: 13px;
}

.mbd-comm-grid-wrap {
    padding: 0 12px 12px 12px;
    overflow-x: auto;
}

.mbd-comm-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 70vh;
    overflow-y: auto;
}

.mbd-comm-recipients-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Kanal- und Filterchips (Kundentab) */
.mbd-comm-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 999px;
    background: var(--color-background, #F5F6F7);
    color: var(--color-text-light, #828282);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.mbd-comm-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--color-background, #F5F6F7);
    color: var(--color-text-light, #828282);
}

/* Gedeckte Skala, identisch zu mk-status auf den Kommunikationsseiten. Die Aliase des
   .md-root-Kontexts werden hier bewusst NICHT verwendet: --success/--error zeigen auf
   #5CBF00 bzw. #FF0000, und eine Statusspalte in Signalfarben uebertoent alles andere
   im Kundendetail. Werte ausgeschrieben, weil --mk-* nur auf .mk-page definiert ist. */
.mbd-comm-status.is-sent {
    border: 1px solid #CDE6D8;
    background: #E9F4ED;
    color: #3B7D55;
}

.mbd-comm-status.is-failed {
    border: 1px solid #EDD4D4;
    background: #FAEDED;
    color: #A25151;
}

.mbd-comm-status.is-partial,
.mbd-comm-status.is-warn {
    border: 1px solid #EEDFBF;
    background: #FBF3E4;
    color: #916C26;
}

.mbd-comm-status.is-pending {
    border: 1px solid #CFE0F1;
    background: #E9F1FA;
    color: #406E9E;
}

.mbd-comm-status.is-none {
    background: transparent;
    color: var(--color-text-light, #828282);
}

.mbd-comm-refbadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 6px;
    background: var(--color-background, #F5F6F7);
    color: var(--color-text-light, #828282);
    font-size: 12px;
    font-weight: 600;
}

.mbd-comm-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mbd-comm-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--color-background, #F5F6F7);
    color: var(--color-text-light, #828282);
    font-size: 13px;
    text-decoration: none;
}

/* -------------------------------------------------- Erfassungsdialog ---- */
/* Feste Dialoghöhe. Ohne sie springt der Rahmen beim Schrittwechsel und beim
   Ein-/Ausblenden des Kurztextfelds - der Inhalt scrollt stattdessen innen.
   Die Höhe kommt als Inline-Stil von SfDialog; max-height fängt kleine Bildschirme ab. */

.mcd-dialog .e-dlg-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    /* Bezugsrahmen fuer den Ladeschleier. */
    position: relative;
}

/* Ladeschleier waehrend des Versands.
   Muss IM Dialog liegen: der globale Ladeanzeiger aus dem SessionService rendert
   weiter unten im Dokument und verschwindet hinter dem Dialogfenster (z-index 10001),
   weshalb das Fenster beim Senden eingefroren wirkte. */
.mcd-busy {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(1px);
}

.mcd-busy-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 34px;
    border: 1px solid var(--color-border, #E4E7E9);
    border-radius: var(--default-border-radius, 8px);
    background: var(--color-surface, #fff);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
    text-align: center;
}

.mcd-busy-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #3D3B3B);
}

.mcd-busy-hint {
    font-size: 12px;
    color: var(--color-text-light, #828282);
}

.mcd-header-title {
    font-size: 16px;
    font-weight: 600;
}

/* Schrittanzeige als Band über dem Inhalt */
.mcd-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border, #E4E7E9);
    background: var(--color-surface-alt, #F8FAFA);
}

.mcd-stepper-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mcd-stepper-item.is-done {
    cursor: pointer;
}

.mcd-stepper-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--color-border, #E4E7E9);
    color: var(--color-text-light, #828282);
}

.mcd-stepper-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mcd-stepper-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-light, #828282);
}

.mcd-stepper-sub {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 1px;
    color: var(--color-text-light, #828282);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aktueller Schritt */
.mcd-stepper-item.is-active .mcd-stepper-marker {
    background: var(--primary-dark-color, #1A7A49);
    border-color: var(--primary-dark-color, #1A7A49);
    color: #fff;
    box-shadow: 0 0 0 4px var(--primary-light-color, #BFE6D2);
}

.mcd-stepper-item.is-active .mcd-stepper-label {
    color: var(--color-text, #3D3B3B);
}

/* Abgeschlossener Schritt - anklickbar, führt zurück */
.mcd-stepper-item.is-done .mcd-stepper-marker {
    background: var(--primary-background-color, #BFE6D2);
    border-color: var(--primary-border-color, #BFE6D2);
    color: var(--primary-font-color, #1A7A49);
}

.mcd-stepper-item.is-done .mcd-stepper-label {
    color: var(--primary-dark-color, #1A7A49);
}

.mcd-stepper-item.is-done:hover .mcd-stepper-marker {
    background: var(--primary-dark-color, #1A7A49);
    border-color: var(--primary-dark-color, #1A7A49);
    color: #fff;
}

/* Bewusst KEIN flex:1 - sonst schiebt die Linie den zweiten Schritt an den rechten
   Rand des Dialogs und die beiden Schritte wirken zusammenhanglos. */
.mcd-stepper-line {
    flex: 0 0 auto;
    width: 72px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-border, #E4E7E9);
}

.mcd-stepper-line.is-filled {
    background: var(--primary-dark-color, #1A7A49);
}

@media (max-width: 700px) {
    .mcd-stepper-sub {
        display: none;
    }
}

/* Inhalt - der einzige scrollende Bereich des Dialogs */
.mcd-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px;
}

.mcd-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.mcd-banner.mb-0 {
    margin-bottom: 0;
}

.mcd-banner i {
    margin-top: 2px;
    flex: 0 0 auto;
}

.mcd-banner.is-warn {
    background: var(--warning-background-color, #FFF3DE);
    border: 1px solid var(--warning-border-color, #EFCB93);
    border-left: 3px solid var(--warning-accent-color, #E08A00);
    color: var(--warning-color, #85510A);
}

.mcd-banner.is-warn > i {
    color: var(--warning-accent-color, #E08A00);
}

.mcd-banner.is-error {
    background: var(--error-background-color, #FDECEA);
    border: 1px solid var(--error-border-color, #EFB3AE);
    border-left: 3px solid var(--error-accent-color, #E5342A);
    color: var(--error-color, #9F1F17);
}

.mcd-banner.is-error > i {
    color: var(--error-accent-color, #E5342A);
}

/* Kostenvorschau im Kommunikationsdialog: mehrzeiliger Inhalt IN einem Banner.
   Die Beträge stehen als eigene Zeilen und nicht als ein langer Satz - eine
   Aussendung kann vier Kanäle treffen, und vier Beträge in einem Fließtext
   liest niemand nach.

   Die Klassen stehen GLOBAL und nicht scoped: der Dialog rendert über SfDialog
   am Body, also außerhalb des Komponenten-Subtrees - eine Bereichskennung
   erreicht ihn dort nicht. */
.mcd-cost {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mcd-cost-title {
    font-weight: 600;
}

.mcd-cost-line {
    font-variant-numeric: tabular-nums;
}

.mcd-cost-total {
    margin-top: 4px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mcd-cost-note {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.85;
}

/* Abschnitte gliedern den Dialog - ohne sie steht alles als eine lange Liste
   untereinander und der Anwender verliert die Orientierung. */
.mcd-section {
    border: 1px solid var(--color-border, #E4E7E9);
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}

.mcd-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #3D3B3B);
}

.mcd-section-head > i:first-child {
    color: var(--primary-dark-color, #1A7A49);
}

.mcd-section-action {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-dark-color, #1A7A49);
    cursor: pointer;
}

.mcd-section-action:hover {
    background: var(--primary-light-color, #BFE6D2);
}

.mcd-section-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-light, #828282);
}

.mcd-section-badge.is-warn {
    color: var(--error-color, #FF0000);
    font-weight: 600;
}

/* Unterabschnitt INNERHALB eines Kastens - fuer Angaben, die zum Kasten
   gehoeren, aber eine eigene Beschriftung brauchen (z. B. die Anhaenge im
   Inhaltskasten). Die Trennlinie setzt sie ab, ohne sie aus dem Kasten zu
   loesen; ein eigener .mcd-section waere genau die falsche Aussage. */
.mcd-subsection {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #E4E7E9);
}

.mcd-subsection-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #3D3B3B);
}

.mcd-subsection-head > i:first-child {
    color: var(--primary-dark-color, #1A7A49);
}

.mcd-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 900px) {
    .mcd-columns {
        grid-template-columns: 1fr;
    }
}

/* Felder */
.mcd-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.mcd-field > label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-light, #828282);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mcd-required {
    color: var(--error-color, #FF0000);
}

/* Nebenangabe unter einem Feld - der technische Wert hinter einer lesbaren
   Auswahl (etwa der Twilio-Name der WhatsApp-Vorlage). Bewusst klein und
   zurueckhaltend: gebraucht wird sie nur, wenn jemand die Angabe in einem
   anderen System aufsucht. */
.mcd-field-note {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    color: var(--color-text-light, #828282);
}

.mcd-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 16px;
}

.mcd-filter-option {
    margin-top: 12px;
}

.mcd-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-light, #828282);
}

.mcd-hint i {
    margin-top: 2px;
}

/* ---- WhatsApp: Vorlagentext und Markenbelegung -----------------------------
   Der Vorlagentext ist NICHT bearbeitbar: er liegt beim Nachrichtendienst und ist dort von
   WhatsApp genehmigt. Bewusst ein ruhiger Kasten und kein abgeschaltetes
   Eingabefeld - ein graues Textfeld liest sich wie "gerade nicht bearbeitbar",
   der Kasten wie "gehoert woandershin". */
.mcd-template-preview {
    border: 1px solid var(--color-border, #E4E7E9);
    border-left: 3px solid var(--primary-dark-color, #1A7A49);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--color-background-light, #F7F8F9);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text, #3D3B3B);
}

/* Zeilenumbrueche der Vorlage bleiben stehen - in WhatsApp stehen sie auch. */
.mcd-template-preview-body {
    white-space: pre-wrap;
    word-break: break-word;
}

.mcd-template-preview-part {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border, #E4E7E9);
    font-size: 12px;
    color: var(--color-text-light, #828282);
}

.mcd-template-preview-part:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.mcd-template-preview-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light, #828282);
    margin-bottom: 3px;
}

.mcd-template-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mcd-template-button {
    border: 1px solid var(--color-border, #E4E7E9);
    border-radius: 12px;
    padding: 2px 10px;
    background: #fff;
    font-size: 11px;
    color: var(--color-text, #3D3B3B);
}

.mcd-variable-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

/* Marke NEBEN dem Feld, nicht darueber: die Marke ist eine Kennung von drei
   Zeichen, eine eigene Zeile darueber verdoppelt die Hoehe des Kastens ohne
   jeden Gewinn. Die feste Spaltenbreite haelt alle Eingabefelder auf einer
   Kante - bei "auto" saesse das Feld hinter {{10}} weiter rechts als das
   hinter {{1}}. */
.mcd-variable-row {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Feste Schriftbreite, damit "{{1}}" nicht wie Fliesstext gelesen wird - es ist
   eine Kennung. */
.mcd-variable-token {
    font-family: Consolas, "Courier New", monospace;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    color: var(--primary-dark-color, #1A7A49);
}

/* Auswahlliste plus Knopf in EINER Zeile. */
.mcd-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcd-inline-row > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Empfängerzähler */
.mcd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.mcd-stat {
    border: 1px solid var(--color-border, #E4E7E9);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--color-background, #F5F6F7);
}

.mcd-stat.is-primary {
    background: var(--primary-background-color, #BFE6D2);
    color: var(--primary-font-color);
    border-color: transparent;
}

.mcd-stat.is-warn {
    background: var(--warning-background-color, #FFF3DE);
    border-color: var(--warning-border-color, #EFCB93);
    color: var(--warning-color, #85510A);
}

.mcd-stat-value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
}

.mcd-stat.is-primary .mcd-stat-value {
    color: var(--primary-font-color);
}
.mcd-stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-text-light, #828282);
}
.is-primary .mcd-stat-label {
    color: var(--primary-font-color);
}

.mcd-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 0;
    font-size: 13px;
    color: var(--color-text-light, #828282);
}

.mcd-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 12px;
    font-size: 13px;
    color: var(--color-text-light, #828282);
}

/* Aktionszeile unter dem Filter: hier - und nur hier - werden die Empfänger ermittelt. */
.mcd-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #E4E7E9);
}

.mcd-filter-actions-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    font-size: 12px;
    color: var(--warning-color, #B26A00);
}

/* Das Raster rollt in sich selbst (SfGrid Height), der Rahmen bleibt stehen.
   overflow-x fängt nur schmale Fenster ab. */
.mcd-grid-wrap {
    margin-top: 12px;
    overflow-x: auto;
}

/* Empfängerzusammenfassung im zweiten Schritt */
.mcd-recipient-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--primary-background-color, #BFE6D2);
    color: var(--primary-font-color, #1A7A49);
}

.mcd-recipient-main {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.mcd-recipient-count {
    font-size: 18px;
    font-weight: 700;
}

.mcd-recipient-name {
    font-size: 14px;
}

.mcd-recipient-detail {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    font-size: 12px;
}

.mcd-recipient-detail .is-warn {
    color: var(--warning-color, #FFAA00);
}

.mcd-refbadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
}

/* Kanäle als Kacheln - eine Reihe nackter Kästchen war nicht lesbar */
.mcd-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.mcd-channel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #E4E7E9);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    margin: 0;
}

.mcd-channel > i {
    font-size: 15px;
    margin-top: 1px;
    color: var(--color-text-light, #828282);
}

.mcd-channel.is-on {
    border-color: var(--primary-border-color, #1A7A49);
}

.mcd-channel.is-on > i {
    color: var(--primary-dark-color, #1A7A49);
}

.mcd-channel.is-locked {
    background: var(--primary-background-color, #BFE6D2);
    border-color: transparent;
    cursor: default;
}
    .mcd-channel.is-locked > i {
        color: var(--primary-font-color, #1A7A49);
    }

    .mcd-channel.is-locked > i:first-child {
        color: var(--primary-font-color, #1A7A49);
    }
    .mcd-channel.is-locked .mcd-channel-name {
        color: var(--primary-font-color, #1A7A49);
    }
    .mcd-channel.is-locked .mcd-channel-note {
        color: var(--primary-font-color, #1A7A49);
    }

    .mcd-channel.is-disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.mcd-channel-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #3D3B3B);
}

.mcd-channel-note {
    font-size: 11px;
    line-height: 1.35;
    color: var(--color-text-light, #828282);
    margin-top: 2px;
}

.mcd-channel-lock {
    margin-left: auto;
    font-size: 11px;
    color: var(--primary-dark-color, #1A7A49);
}

/* Anhänge und Zeitplanung */
.mcd-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.mcd-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--color-background, #F5F6F7);
    color: var(--color-text-light, #828282);
    font-size: 12px;
    max-width: 100%;
}

.mcd-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.mcd-attachment-remove {
    border: none;
    background: transparent;
    color: var(--color-text-light, #828282);
    cursor: pointer;
    padding: 0 0 0 2px;
    line-height: 1;
}

.mcd-attachment-remove:hover {
    color: var(--error-color, #FF0000);
}

.mcd-schedule {
    max-width: 240px;
    margin-top: 10px;
}

/* Fußzeile */
.mcd-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.mcd-footer-info {
    min-width: 0;
}

.mcd-footer-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-light, #828282);
}

.mcd-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}


/* ===========================================================================
   Kommunikation - Seitenbausteine (mk-*)
   ---------------------------------------------------------------------------
   Aufbau uebernommen von "Zustelloptionen"
   (Pages/Settings/Client/ManageInvoiceDeliveryPage.razor.css).

   GLOBAL und nicht scoped, weil sich ZWEI Komponenten dieselben Bausteine
   teilen: Pages/Communication/Index und die darin gerenderte Detailansicht.
   Blazor stempelt seine Bereichskennung je Komponente - Index.razor.css
   erreicht das Markup von Detail.razor also nicht.

   Farben ausschliesslich ueber die :root-Variablen aus
   Components/Structure/ThemeComponent.razor. Die kurzen Aliase (--primary,
   --text, --border) gelten NUR innerhalb von .md-root und faellen hier auf
   gruene RVS-Ersatzwerte zurueck, waehrend der Mandant violett ist.
   =========================================================================== */

.mk-page {
    /* BEWUSST OHNE max-width: die Liste und die Detailansicht nutzen die volle
       Bildschirmbreite wie die Kundenseiten. Die frueheren 1400px waren nicht
       zentriert und liessen auf breiten Bildschirmen die rechte Haelfte leer. */

    /* GEDECKTE Statusfarben. Die semantischen Theme-Variablen stehen auf #5CBF00 /
       #FF0000 / #FFAA00 - in einer Spalte, in der JEDE Zeile eine Statuspille traegt,
       schreit das den Betrachter an, und weil dann alles gleich laut ist, faellt der
       eine echte Fehler nicht mehr auf. Dieselbe Skala wie im Adminbereich
       (MitNetAdmin/Pages/Communication/DispatchMonitorPage.razor.css). */
    --mk-neutral-bg: #EEF1F5;
    --mk-neutral-fg: #5A6B7C;
    --mk-neutral-br: #DCE3EB;
    --mk-info-bg: #E9F1FA;
    --mk-info-fg: #406E9E;
    --mk-info-br: #CFE0F1;
    --mk-ok-bg: #E9F4ED;
    --mk-ok-fg: #3B7D55;
    --mk-ok-br: #CDE6D8;
    --mk-warn-bg: #FBF3E4;
    --mk-warn-fg: #916C26;
    --mk-warn-br: #EEDFBF;
    --mk-error-bg: #FAEDED;
    --mk-error-fg: #A25151;
    --mk-error-br: #EDD4D4;
}

/* ---------- Seitenkopf ---------- */
.mk-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.mk-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: var(--primary-light-color, #BFE6D2);
    color: var(--primary-dark-color, #1A7A49);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.mk-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text, #3D3B3B);
    line-height: 1.2;
}

.mk-subtitle {
    font-size: 0.8125rem;
    color: var(--color-text-light, #828282);
    margin-top: 0.25rem;
    max-width: 84ch;
}

/* ---------- Karte ---------- */
.mk-card {
    border: 1px solid var(--color-border, #E4E7E9);
    border-radius: var(--default-border-radius, 0.5rem);
    background-color: var(--color-surface, #fff);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.mk-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border, #E4E7E9);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text, #3D3B3B);
}

.mk-card-header > i {
    color: var(--primary-dark-color, #1A7A49);
}

.mk-card-header-count {
    margin-left: auto;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background-color: var(--color-background, #F5F6F7);
    color: var(--color-text-light, #828282);
    font-size: 0.75rem;
}

.mk-card-body {
    padding: 1rem;
}

/* ---------- Banner ---------- */
.mk-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--default-border-radius, 0.5rem);
    font-size: 0.8125rem;
    line-height: 1.45;
    margin-bottom: 1.25rem;
}

.mk-banner i {
    margin-top: 0.125rem;
    font-size: 1rem;
    flex: 0 0 auto;
}

/* Gleiche gedeckte Skala wie die Statuspillen. Farbe traegt der linke Streifen und die
   Schrift - ein flaechig eingefaerbtes Band ueber die volle Breite ist der lauteste
   Baustein einer Seite. */
.mk-banner.is-warn {
    background-color: var(--mk-warn-bg, #FBF3E4);
    border: 1px solid var(--mk-warn-br, #EEDFBF);
    border-left: 3px solid var(--mk-warn-fg, #916C26);
    color: var(--mk-warn-fg, #916C26);
}

.mk-banner.is-error {
    background-color: var(--mk-error-bg, #FAEDED);
    border: 1px solid var(--mk-error-br, #EDD4D4);
    border-left: 3px solid var(--mk-error-fg, #A25151);
    color: var(--mk-error-fg, #A25151);
}

/* ---------- Zustände ---------- */
.mk-loading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.5rem 0;
    font-size: 0.8125rem;
    color: var(--color-text-light, #828282);
}

.mk-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-light, #828282);
}

.mk-empty i {
    font-size: 1rem;
}

.mk-noaccess {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    font-size: 0.875rem;
    color: var(--color-text-light, #828282);
}

/* ---------- Tabelle ---------- */
.mk-grid-wrap {
    overflow-x: auto;
}

/* ---------- Chips und Status ---------- */
.mk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.125rem 0.5rem;
    margin: 0.0625rem 0.25rem 0.0625rem 0;
    border-radius: 999px;
    background-color: var(--primary-light-color, #BFE6D2);
    color: var(--primary-dark-color, #1A7A49);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.mk-chip.is-muted {
    background-color: var(--color-background, #F5F6F7);
    color: var(--color-text-light, #828282);
}

.mk-status {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    border: 1px solid var(--mk-neutral-br, #DCE3EB);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    background-color: var(--mk-neutral-bg, #EEF1F5);
    color: var(--mk-neutral-fg, #5A6B7C);
}

.mk-status.is-sent {
    border-color: var(--mk-ok-br, #CDE6D8);
    background-color: var(--mk-ok-bg, #E9F4ED);
    color: var(--mk-ok-fg, #3B7D55);
}

.mk-status.is-failed {
    border-color: var(--mk-error-br, #EDD4D4);
    background-color: var(--mk-error-bg, #FAEDED);
    color: var(--mk-error-fg, #A25151);
}

.mk-status.is-partial {
    border-color: var(--mk-warn-br, #EEDFBF);
    background-color: var(--mk-warn-bg, #FBF3E4);
    color: var(--mk-warn-fg, #916C26);
}

.mk-status.is-pending {
    border-color: var(--mk-info-br, #CFE0F1);
    background-color: var(--mk-info-bg, #E9F1FA);
    color: var(--mk-info-fg, #406E9E);
}

.mk-status.is-warn {
    border-color: var(--mk-warn-br, #EEDFBF);
    background-color: var(--mk-warn-bg, #FBF3E4);
    color: var(--mk-warn-fg, #916C26);
}

/* Simulationsbetrieb: bewusst gestrichelt. Eine gefuellte Pille wie bei "Uebermittelt"
   wuerde einen Versand vortaeuschen, den es nie gegeben hat. */
.mk-status.is-simulated {
    border-style: dashed;
    border-color: var(--mk-info-br, #CFE0F1);
    background-color: var(--mk-info-bg, #E9F1FA);
    color: var(--mk-info-fg, #406E9E);
}

/* Kanal gar nicht angefordert - bewusst blass, damit "nicht gewaehlt" nicht wie
   "noch offen" aussieht. */
.mk-status.is-none {
    border-color: transparent;
    background-color: transparent;
    color: var(--color-text-light, #828282);
    opacity: 0.6;
}

/* ---------- Fortschritt ---------- */
.mk-progress {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mk-progress-bar {
    height: 5px;
    border-radius: 999px;
    background-color: var(--color-border, #E4E7E9);
    overflow: hidden;
}

.mk-progress-fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--primary-dark-color, #1A7A49);
}

.mk-progress-text {
    font-size: 0.6875rem;
    color: var(--color-text-light, #828282);
}


/* ---------------------------------------------------------------------------
   Ergebnisliste der Antrags-Workflows.

   MUSS global stehen: die Liste entsteht als MarkupString im Alert-Dialog, und
   dort stempelt Blazor keine Bereichskennung mit. Gilt fuer jede Anzeige, die
   per MarkupString aufgebaut wird.
   --------------------------------------------------------------------------- */
.wf-result-list {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}