/* ══════════════════════════════════════════════════════════════════════════
   Design-Tokens
   Alle Farben der App laufen über diese Variablen. Der Dark Mode überschreibt
   ausschließlich die Tokens ([data-theme="dark"]) – Komponenten-Regeln
   benötigen dadurch keine eigenen Dark-Mode-Varianten.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Marke (feste Markenfarben, unabhängig vom Theme) */
    --brand-primary:   #F5F0E8;   /* Creme */
    --brand-secondary: #63140F;   /* Weinrot */
    --brand-accent:    #454643;

    /* Flächen */
    --app-bg:              #F5F0E8;                 /* Seite, Sidebar, Topbar, Footer */
    --app-surface:         #F5F0E8;                 /* Karten, Eingaben, Grids, Menüs */
    --app-surface-2:       rgba(44, 26, 23, 0.04);  /* leicht abgesetzt (Alt-Zeilen, Kacheln) */
    --app-surface-3:       rgba(44, 26, 23, 0.06);  /* stärker abgesetzt (Input-Addons) */
    --app-overlay:         rgba(245, 240, 232, 0.85);
    --app-card-header:     rgba(245, 240, 232, 0.60);

    /* Text */
    --app-text:            #2C1A17;
    --app-text-strong:     rgba(44, 26, 23, 0.90);
    --app-text-soft:       rgba(44, 26, 23, 0.70);
    --app-text-muted:      rgba(44, 26, 23, 0.60);
    --app-text-subtle:     rgba(44, 26, 23, 0.38);

    /* Rahmen & Schatten */
    --app-border:          rgba(44, 26, 23, 0.10);
    --app-border-medium:   rgba(44, 26, 23, 0.15);
    --app-border-strong:   rgba(44, 26, 23, 0.22);
    --app-border-control:  rgba(44, 26, 23, 0.35);
    --app-divider:         rgba(44, 26, 23, 0.12);
    --app-shadow:          rgba(44, 26, 23, 0.06);
    --app-shadow-strong:   rgba(44, 26, 23, 0.12);
    --app-track:           #dee2e6;                 /* Stepper-Verbindungslinie */

    /* Akzent (Weinrot) */
    --app-accent:          #63140F;                 /* Flächen: Buttons, aktive Einträge */
    --app-accent-hover:    #4f100c;
    --app-accent-active:   #3d0d09;
    --app-on-accent:       #fff;                    /* Text auf Akzent-Flächen */
    --app-accent-text:     #63140F;                 /* Text/Icons/Links in Akzentfarbe */
    --app-accent-text-hover: #4f100c;
    --app-accent-soft:     rgba(99, 20, 15, 0.07);  /* Hover-Hintergrund */
    --app-accent-soft-2:   rgba(99, 20, 15, 0.12);  /* aktiver Hintergrund */
    --app-accent-soft-3:   rgba(99, 20, 15, 0.18);  /* Auswahl */
    --app-accent-border:   rgba(99, 20, 15, 0.25);
    --app-focus-ring:      rgba(99, 20, 15, 0.12);

    /* Hinweis-Flächen (z. B. Konflikte in Listen) */
    --app-danger-soft:     rgba(220, 53, 69, 0.12);
    --app-danger-text:     #b02a37;
    --app-warning-soft:    rgba(255, 193, 7, 0.22);
    --app-warning-text:    #8a6100;

    /* Bootstrap an die Tokens koppeln */
    --bs-primary:           #63140F;
    --bs-primary-rgb:       99, 20, 15;
    --bs-secondary:         #454643;
    --bs-secondary-rgb:     69, 70, 67;
    --bs-link-color:        var(--app-accent-text);
    --bs-link-color-rgb:    99, 20, 15;
    --bs-link-hover-color:  var(--app-accent-text-hover);
    --bs-link-hover-color-rgb: 79, 16, 12;

    --bs-body-bg:              var(--app-bg);
    --bs-body-bg-rgb:          245, 240, 232;
    --bs-body-color:           var(--app-text);
    --bs-emphasis-color:       var(--app-text);
    --bs-secondary-color:      var(--app-text-muted);
    --bs-secondary-bg:         var(--app-surface-2);
    --bs-tertiary-bg:          var(--app-surface-3);
    --bs-card-bg:              var(--app-surface);
    --bs-card-border-color:    var(--app-border);
    --bs-border-color:         rgba(44, 26, 23, 0.18);
    --bs-border-color-translucent: var(--app-border-medium);
}

/* ── Dark Mode: nur Token-Werte ──────────────────────────────────────────── */
[data-theme="dark"] {
    color-scheme: dark;

    --app-bg:              #1a1b1e;
    --app-surface:         #25262b;
    --app-surface-2:       #2c2e33;
    --app-surface-3:       #313338;
    --app-overlay:         rgba(26, 27, 30, 0.80);
    --app-card-header:     #2c2e33;

    --app-text:            #dee2e6;
    --app-text-strong:     #e9ecef;
    --app-text-soft:       #c1c2c5;
    --app-text-muted:      #a6a7ab;
    --app-text-subtle:     #6c6e73;

    --app-border:          #373a40;
    --app-border-medium:   #3f4248;
    --app-border-strong:   #4a4d55;
    --app-border-control:  #5c5f66;
    --app-divider:         #373a40;
    --app-shadow:          rgba(0, 0, 0, 0.25);
    --app-shadow-strong:   rgba(0, 0, 0, 0.40);
    --app-track:           #4a4d55;

    /* Weinrot bleibt für Flächen; als Schrift wäre es auf Dunkel unlesbar → Rosé */
    --app-accent:          #7a1a13;
    --app-accent-hover:    #8f2319;
    --app-accent-active:   #63140F;
    --app-accent-text:     #e8a39c;
    --app-accent-text-hover: #f1c0bb;
    --app-accent-soft:     rgba(232, 163, 156, 0.08);
    --app-accent-soft-2:   rgba(232, 163, 156, 0.14);
    --app-accent-soft-3:   rgba(232, 163, 156, 0.20);
    --app-accent-border:   rgba(232, 163, 156, 0.35);
    --app-focus-ring:      rgba(232, 163, 156, 0.20);

    --app-danger-soft:     rgba(234, 84, 85, 0.20);
    --app-danger-text:     #f1a1a6;
    --app-warning-soft:    rgba(255, 193, 7, 0.16);
    --app-warning-text:    #f0c96b;

    --bs-link-color-rgb:       232, 163, 156;
    --bs-link-hover-color-rgb: 241, 192, 187;
    --bs-body-bg-rgb:          26, 27, 30;
    --bs-border-color:         #3f4248;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */
/* Das Logo ist dunkel – im Dark Mode auf einer kleinen Creme-Fläche darstellen */
[data-theme="dark"] img[src*="logo-aizpun"] {
    box-sizing: content-box;
    background-color: var(--brand-primary);
    padding: 0.2rem 0.4rem;
    border-radius: 0.375rem;
}

/* ── Tabellen-Zeilenstatus (Grid-übergreifend) ───────────────────────────── */
.row-highlight-today    .e-rowcell { background-color: rgba(165,40,20,0.13) !important; font-weight: 600; }
.row-highlight-tomorrow .e-rowcell { background-color: rgba(210,185,0,0.22) !important; }
[data-theme="dark"] .row-highlight-today    .e-rowcell { background-color: rgba(232,110,90,0.18) !important; }
[data-theme="dark"] .row-highlight-tomorrow .e-rowcell { background-color: rgba(230,200,40,0.14) !important; }

/* ── Auth-Layout ─────────────────────────────────────────────────────────── */
/* Login, Registrierung, 2FA, Hinweisseiten – im Look der App */
.auth-body {
    width: 100%;
    height: 100vh;
    background-color: var(--app-bg);
    color: var(--app-text);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}
.auth-main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.auth-card {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    box-shadow: 0 4px 24px var(--app-shadow-strong);
    padding: 2.25rem 2rem;
    width: 100%;
    max-width: 380px;
}
.auth-card .text-muted { color: var(--app-text-muted) !important; }
.auth-card a { color: var(--app-accent-text); text-decoration-color: var(--app-accent-border); }
.auth-card a:hover { color: var(--app-accent-text-hover); text-decoration-color: currentColor; }

/* Logo */
.auth-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; }
.auth-logo-img { height: 52px; width: auto; }
[data-theme="dark"] .auth-logo-img { padding: 0.5rem 0.9rem; border-radius: 0.5rem; }
.auth-subtitle { text-align: center; font-size: 0.82rem; color: var(--app-text-muted); margin-top: -1.25rem; margin-bottom: 1.75rem; }

/* Inputs */
.auth-field { margin-bottom: 1.1rem; }
.auth-field-label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--app-text-soft); margin-bottom: 0.3rem; }
.auth-field-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--app-text);
    background-color: var(--app-surface);
    border: 1px solid var(--app-border-strong);
    border-radius: 0.375rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.auth-field-input::placeholder { color: var(--app-text-subtle); }
.auth-field-input:focus {
    outline: none;
    border-color: var(--app-accent-text);
    box-shadow: 0 0 0 3px var(--app-focus-ring);
}
.auth-field-input:read-only {
    background-color: var(--app-surface-2);
    color: var(--app-text-muted);
    cursor: default;
}
.auth-field-input.valid  { border-color: var(--app-border-strong); }
.auth-field-input.invalid { border-color: #dc3545; }

/* Alert & Validation */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    background-color: var(--app-accent-soft);
    border: 1px solid var(--app-accent-border);
    color: var(--app-accent-text);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.83rem;
    margin-bottom: 1rem;
}
.auth-validation { display: block; font-size: 0.78rem; color: #dc3545; margin-top: 0.25rem; }
.auth-hint { display: flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: var(--app-text-muted); margin-top: 0.3rem; }

/* Checkbox row */
.auth-check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.auth-check input { margin: 0; accent-color: var(--app-accent); }
.auth-check label { font-size: 0.83rem; color: var(--app-text-muted); cursor: pointer; }

/* Submit button */
.auth-submit-btn {
    display: block;
    width: 100%;
    padding: 0.6rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    border-radius: 0.375rem;
    cursor: pointer;
    background-color: var(--app-accent);
    border: 1px solid var(--app-accent);
    color: var(--app-on-accent);
    transition: background-color 0.15s;
}
.auth-submit-btn:hover { background-color: var(--app-accent-hover); border-color: var(--app-accent-hover); }
.auth-submit-btn:active { background-color: var(--app-accent-active); }

/* Divider & footer link */
.auth-divider { border: none; border-top: 1px solid var(--app-divider); opacity: 1; margin: 1.5rem 0 1rem; }
.auth-footer-link { text-align: center; font-size: 0.83rem; color: var(--app-text-muted); margin: 0; }

/* ── Layout-Grundstruktur ────────────────────────────────────────────────── */
.app-body { margin: 0; padding: 0; overflow: hidden; height: 100vh; }
.app-wrapper { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
:root {
    --sidebar-width:     220px;
    --sidebar-collapsed: 60px;
    --topbar-height:     52px;
}

.app-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background-color: var(--app-bg);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, min-width 0.2s ease;
    overflow: hidden;
    z-index: 100;
}

.app-sidebar.collapsed { width: var(--sidebar-collapsed); min-width: var(--sidebar-collapsed); }
/* Im Dark Mode Sidebar vom Inhalt abgrenzen (hell: gleiche Fläche, keine Linie) */
[data-theme="dark"] .app-sidebar { background-color: var(--app-surface); border-right: 1px solid var(--app-divider); }
[data-theme="dark"] .app-topbar  { background-color: var(--app-surface); }

.sidebar-header {
    display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem;
    height: var(--topbar-height); border-bottom: 1px solid var(--app-divider);
    white-space: nowrap; overflow: hidden;
}

.sidebar-logo { height: 1.75rem; width: auto; flex-shrink: 0; }
.sidebar-brand-text { color: var(--app-text); font-weight: 600; font-size: 0.95rem; transition: opacity 0.15s ease; }
.app-sidebar.collapsed .sidebar-brand-text { opacity: 0; pointer-events: none; }

.sidebar-nav { display: flex; flex-direction: column; padding: 0.5rem 0; flex: 1; overflow-y: auto; overflow-x: hidden; }

.sidebar-link {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem;
    color: var(--app-text-muted); text-decoration: none; white-space: nowrap;
    transition: background-color 0.15s, color 0.15s; font-size: 0.875rem;
}
.sidebar-link i { font-size: 1rem; flex-shrink: 0; width: 1.25rem; text-align: center; }
.sidebar-link:hover { background-color: var(--app-accent-soft); color: var(--app-accent-text); }
.sidebar-link.active { background-color: var(--app-accent); color: var(--app-on-accent); }

.sidebar-label { transition: opacity 0.15s ease; }
.app-sidebar.collapsed .sidebar-label { opacity: 0; pointer-events: none; }

.sidebar-group-toggle { width: 100%; background: none; border: none; text-align: left; }
.sidebar-chevron { font-size: 0.7rem; transition: transform 0.2s ease; flex-shrink: 0; }
.sidebar-group-toggle.collapsed .sidebar-chevron { transform: rotate(-90deg); }
.app-sidebar.collapsed .sidebar-chevron { display: none; }

.sidebar-submenu { overflow: hidden; }
.sidebar-sublink { padding-left: 2.5rem; font-size: 0.825rem; }
.app-sidebar.collapsed .sidebar-submenu { display: none !important; }

/* ── Rechter Bereich ─────────────────────────────────────────────────────── */
.app-right { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-width: 0; }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.app-topbar {
    height: var(--topbar-height); min-height: var(--topbar-height);
    background-color: var(--app-bg); color: var(--app-text); display: flex; align-items: center;
    padding: 0 1rem; gap: 1rem; border-bottom: 1px solid var(--app-divider);
}

.sidebar-toggle-btn {
    background: none; border: none; color: var(--app-text-muted); font-size: 1.3rem;
    padding: 0.25rem 0.4rem; cursor: pointer; border-radius: 0.25rem; line-height: 1; flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background-color: var(--app-accent-soft); color: var(--app-accent-text); }

.topbar-title { flex: 1; color: var(--app-text-strong); font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-account { flex-shrink: 0; }

.topbar-feedback-btn {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.6rem; border-radius: 999px;
    background: var(--app-accent-soft);
    color: var(--app-text-soft); font-size: 0.75rem; font-weight: 500;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    border: none;
    transition: background-color 0.15s, color 0.15s;
}
.topbar-feedback-btn i { font-size: 0.9rem; }
.topbar-feedback-btn:hover { background-color: var(--app-accent-soft-2); color: var(--app-accent-text); }

@media (max-width: 600px) {
    .topbar-feedback-label { display: none; }
}

.topbar-account-btn {
    display: flex; align-items: center; gap: 0.5rem; background: none; border: none;
    color: var(--app-text-soft); font-size: 0.875rem; cursor: pointer;
    padding: 0.25rem 0.5rem; border-radius: 0.25rem; text-decoration: none;
}
.topbar-account-btn:hover { background-color: var(--app-accent-soft); color: var(--app-accent-text); }
.topbar-account-btn i { font-size: 1.2rem; }

/* ── Hauptinhalt ─────────────────────────────────────────────────────────── */
.app-main { flex: 1; overflow-y: auto; background-color: var(--app-bg); color: var(--app-text); }
.app-content { padding: 1.5rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.app-footer { padding: 0.5rem 1.5rem; font-size: 0.75rem; color: var(--app-text-subtle); background-color: var(--app-bg); border-top: 1px solid var(--app-divider); }
.app-version { margin-left: 0.5rem; opacity: 0.6; font-size: 0.7rem; letter-spacing: 0.02em; }

/* ── Gastzugang ─────────────────────────────────────────────────────────── */
.app-wrapper.guest-mode .app-right { margin-left: 0; }

/* ── Allgemein ───────────────────────────────────────────────────────────── */
html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { background-color: var(--app-bg); color: var(--app-text); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* ── Bootstrap – Buttons ─────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-on-accent);
    --bs-btn-focus-shadow-rgb: 99, 20, 15;
    --bs-btn-active-bg: var(--app-accent-active);
    --bs-btn-active-border-color: var(--app-accent-active);
}
.btn-primary:hover  { background-color: var(--app-accent-hover); border-color: var(--app-accent-hover); color: var(--app-on-accent); box-shadow: none; }
.btn-primary:focus,
.btn-primary:focus-visible { background-color: var(--app-accent-hover); border-color: var(--app-accent-hover); color: var(--app-on-accent); box-shadow: 0 0 0 0.25rem rgba(99,20,15,0.35) !important; }
.btn-primary:active,
.btn-primary.active { background-color: var(--app-accent-active); border-color: var(--app-accent-active); box-shadow: none; }
.btn-primary:disabled,
.btn-primary.disabled { background-color: var(--app-accent); border-color: var(--app-accent); color: var(--app-on-accent); }
.btn-outline-primary {
    --bs-btn-color:              var(--app-accent-text);
    --bs-btn-border-color:       var(--app-accent-text);
    --bs-btn-hover-color:        var(--app-on-accent);
    --bs-btn-hover-bg:           var(--app-accent);
    --bs-btn-hover-border-color: var(--app-accent);
    --bs-btn-active-color:       var(--app-on-accent);
    --bs-btn-active-bg:          var(--app-accent);
    --bs-btn-active-border-color:var(--app-accent);
    --bs-btn-disabled-color:     var(--app-accent-text);
    --bs-btn-disabled-border-color: var(--app-accent-text);
    color: var(--app-accent-text);
    border-color: var(--app-accent-text);
}
[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color:              var(--app-text-soft);
    --bs-btn-border-color:       var(--app-border-strong);
    --bs-btn-hover-color:        var(--app-text);
    --bs-btn-hover-bg:           var(--app-surface-3);
    --bs-btn-hover-border-color: var(--app-border-control);
}
.btn-check:checked + .btn-outline-secondary,
.btn-check:active  + .btn-outline-secondary {
    background-color: var(--brand-accent);
    border-color:     var(--brand-accent);
    color: #fff;
}

/* ── Bootstrap – Form Switch ─────────────────────────────────────────────── */
[data-theme="dark"] .form-check-input { background-color: var(--app-surface-2); border-color: var(--app-border-control); }
.form-check-input:checked { background-color: var(--app-accent) !important; border-color: var(--app-accent) !important; }
.form-check-input:focus { box-shadow: none !important; border-color: var(--app-border-control) !important; }
.form-check-input:checked:focus { border-color: var(--app-accent) !important; }
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280%2C0%2C0%2C0.25%29'/%3e%3c/svg%3e") !important;
}
[data-theme="dark"] .form-switch .form-check-input:not(:checked),
[data-theme="dark"] .form-switch .form-check-input:not(:checked):focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C0.35%29'/%3e%3c/svg%3e") !important;
}

/* ── Bootstrap – Badges ─────────────────────────────────────────────────── */
.badge.bg-primary { background-color: var(--app-accent) !important; }
.badge.bg-word      { background-color: #2B579A !important; color: #fff !important; }
.btn-outline-word   { color: #2B579A; border-color: #2B579A; }
.btn-outline-word:hover, .btn-outline-word:focus { background-color: #2B579A; border-color: #2B579A; color: #fff; }
.btn-outline-word:disabled { color: #2B579A; border-color: #2B579A; opacity: .65; }
[data-theme="dark"] .btn-outline-word { color: #8fb3ea; border-color: #8fb3ea; }

/* ── Karten ─────────────────────────────────────────────────────────────── */
.card {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-radius: 0.5rem;
    border-color: var(--app-border);
    box-shadow: 0 1px 4px var(--app-shadow);
}
.card-body, .card-footer { background-color: var(--app-surface); }
.card-header { background-color: var(--app-card-header) !important; border-bottom-color: var(--app-border) !important; color: var(--app-text); }
.card-footer { border-top-color: var(--app-border); }

/* ── Admin – Einstellungs-Kacheln ────────────────────────────────────────── */
/* So viele Kacheln nebeneinander wie Platz ist (mind. 420px), sonst untereinander */
.admin-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
/* Speichern-Zeile immer am unteren Kachelrand, damit Buttons nebeneinander fluchten */
.admin-settings-grid > .card { display: flex; flex-direction: column; }
.admin-settings-grid > .card > .admin-settings-actions { margin-top: auto !important; padding-top: 1rem; }

/* ── Bootstrap – Flächen & Formulare ─────────────────────────────────────── */

/* Formularelemente */
.form-control,
.form-control:focus,
.form-control:disabled,
.form-select,
.form-select:focus,
.form-select:disabled {
    background-color: var(--app-surface);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}
.form-control:focus,
.form-select:focus { border-color: var(--app-accent-text); box-shadow: 0 0 0 0.2rem var(--app-focus-ring); }
.form-control::placeholder { color: var(--app-text-subtle); }
.form-label, .form-check-label { color: inherit; }
.form-text { color: var(--app-text-muted); }
.input-group-text {
    background-color: var(--app-surface-3);
    border-color: var(--app-border-strong);
    color: var(--app-text-soft);
}

/* Dropdown-Menüs */
.dropdown-menu {
    --bs-dropdown-color: var(--app-text);
    --bs-dropdown-link-color: var(--app-text);
    background-color: var(--app-surface);
    border-color: var(--app-border-medium);
    box-shadow: 0 4px 16px var(--app-shadow-strong);
}
.dropdown-item { color: var(--app-text); }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--app-accent-soft);
    color: var(--app-accent-text);
}
.dropdown-divider { border-color: var(--app-border); }
.dropdown-item-text { color: var(--app-text-soft); }

/* Modals */
.modal-content {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border-medium);
}
.modal-header, .modal-footer { border-color: var(--app-border); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Tabellen */
.table { --bs-table-bg: var(--app-surface); --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); }
.table > :not(caption) > * > * { background-color: var(--app-surface); color: var(--app-text); }
.table-light { --bs-table-bg: var(--app-surface-2); --bs-table-color: var(--app-text); }
.table-light > * > * { background-color: var(--app-surface-2) !important; }

/* List-Group */
.list-group-item {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
.list-group-item:hover { background-color: var(--app-accent-soft); }

/* Accordion */
.accordion-item { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-text); }
.accordion-button { background-color: var(--app-surface); color: inherit; }
.accordion-button:not(.collapsed) { background-color: var(--app-surface-2); color: inherit; }
.accordion-body { background-color: var(--app-surface); }

/* Alerts (nur heller Override, farbige Alerts regelt Bootstrap per data-bs-theme) */
.alert-light { background-color: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text); }

/* Helle Bootstrap-Hilfsklassen im Dark Mode abdunkeln */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-body-tertiary { background-color: var(--app-surface) !important; color: var(--app-text); }
[data-theme="dark"] .badge.bg-light { background-color: var(--app-surface-3) !important; color: var(--app-text-soft) !important; }
[data-theme="dark"] .text-secondary { color: var(--app-text-muted) !important; }
[data-theme="dark"] .border { border-color: var(--app-border) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Syncfusion
   Basis-Theme: material.css (hell) bzw. material-dark.css (dunkel), per
   site.js umgeschaltet. Die Regeln hier legen nur die Markenfarben darüber.
   ══════════════════════════════════════════════════════════════════════════ */

/* Inputs & Wrapper */
.e-input-group:not(.e-disabled),
.e-input-group.e-control-wrapper:not(.e-disabled),
.e-float-input:not(.e-disabled),
.e-float-input.e-control-wrapper:not(.e-disabled) {
    background-color: var(--app-surface) !important;
}
.e-input,
.e-input-group .e-input,
.e-float-input input { background-color: var(--app-surface) !important; color: var(--app-text) !important; }
.e-input::placeholder,
.e-input-group .e-input::placeholder { color: var(--app-text-subtle) !important; }
.e-float-input .e-float-text,
.e-float-input.e-control-wrapper .e-float-text { background-color: transparent !important; }

/* Popup & Dropdown-Liste */
.e-popup,
.e-popup.e-ddl,
.e-popup.e-multi-select-wrapper,
.e-ddl-popup { background-color: var(--app-surface) !important; }
.e-dropdownbase,
.e-dropdownbase .e-list-parent,
.e-dropdownbase .e-list-item,
.e-dropdownbase .e-list-item.e-item-focus { background-color: var(--app-surface) !important; color: var(--app-text); }
.e-popup .e-filter-parent { background-color: var(--app-surface) !important; }
.e-popup .e-input-filter,
.e-popup .e-input-filter .e-input { background-color: var(--app-surface) !important; }

/* DatePicker / DateTimePicker Popup */
.e-datepicker.e-popup,
.e-datetimepicker.e-popup,
.e-calendar,
.e-calendar .e-content,
.e-calendar .e-header { background-color: var(--app-surface) !important; }
.e-calendar .e-cell:not(.e-selected) span { background-color: transparent; }

/* Toolbar */
.e-toolbar,
.e-toolbar .e-toolbar-items { background-color: var(--app-surface) !important; border-color: var(--app-border) !important; }
.e-toolbar .e-toolbar-item .e-tbar-btn { background-color: var(--app-surface) !important; color: var(--app-text); }

/* TreeView */
.e-treeview,
.e-treeview .e-list-item { background-color: var(--app-surface) !important; }
.e-treeview .e-list-text { color: var(--app-text); }
.e-treeview .e-list-item.e-hover > .e-fullrow { background-color: var(--app-accent-soft) !important; }
.e-treeview .e-list-item.e-active > .e-fullrow { background-color: var(--app-accent-soft-2) !important; }

/* Stepper Wrapper */
.e-stepper { background-color: var(--app-surface) !important; }

/* Primär-Buttons */
.e-btn.e-primary, .e-css.e-btn.e-primary { background-color: var(--app-accent); border-color: var(--app-accent); color: var(--app-on-accent); }
.e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover { background-color: var(--app-accent-hover); border-color: var(--app-accent-hover); }
.e-btn.e-primary:active, .e-css.e-btn.e-primary:active { background-color: var(--app-accent-active); border-color: var(--app-accent-active); }

/* ── Syncfusion – Dialog ─────────────────────────────────────────────────── */
.e-dialog,
.e-dialog .e-dlg-header-content,
.e-dialog .e-dlg-content,
.e-dialog .e-footer-content { background-color: var(--app-surface) !important; color: var(--app-text); }
.e-dialog { border: 1px solid var(--app-border) !important; }
.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header * { color: var(--app-text-strong) !important; }
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn .e-btn-icon { color: var(--app-text-soft) !important; }

/* ── Syncfusion – Grid ───────────────────────────────────────────────────── */
.e-grid,
.e-grid .e-gridcontent,
.e-grid .e-gridheader,
.e-grid .e-headercontent,
.e-grid .e-content,
.e-grid .e-table { background-color: var(--app-surface) !important; border-color: var(--app-border) !important; }
.e-grid .e-rowcell,
.e-grid .e-emptyrow td,
.e-grid .e-summarycell,
.e-grid .e-detailindentcell { background-color: var(--app-surface) !important; color: var(--app-text); border-color: var(--app-border) !important; }
.e-grid .e-altrow .e-rowcell { background-color: var(--app-surface-2) !important; }
.e-grid .e-toolbar { background-color: var(--app-surface) !important; border-color: var(--app-border) !important; }
/* Pager und alle darin enthaltenen Elemente */
.e-grid .e-pager,
.e-pager,
.e-pager .e-pagercontainer,
.e-pager .e-pagerdropdown,
.e-pager .e-parentmsgbar { background-color: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text-soft); }
.e-pager .e-numericitem,
.e-pager .e-prevpage,
.e-pager .e-nextpage,
.e-pager .e-firstpage,
.e-pager .e-lastpage,
.e-pager .e-prevpagedisabled,
.e-pager .e-nextpagedisabled,
.e-pager .e-firstpagedisabled,
.e-pager .e-lastpagedisabled { background-color: var(--app-surface) !important; color: var(--app-text-soft); }
.e-pager .e-currentitem, .e-pager .e-currentitem:hover { background-color: var(--app-accent) !important; border-color: var(--app-accent); color: var(--app-on-accent) !important; }
.e-grid .e-filterbarcell { background-color: var(--app-surface) !important; }
.e-grid .e-headercell { background-color: var(--app-surface) !important; color: var(--app-text); font-weight: 600; }
.e-grid .e-headercell .e-headercelldiv,
.e-grid .e-headercell .e-headertext { color: var(--app-text) !important; }
.e-grid .e-sortfilterdiv,
.e-grid .e-icon-filter,
.e-grid .e-sortnumber { color: var(--app-text-muted) !important; }
.e-grid .e-columnheader { background-color: var(--app-surface) !important; }
.e-grid td.e-active, .e-grid th.e-active { background-color: var(--app-accent-soft-2); }
.e-grid .e-row:hover .e-rowcell { background-color: var(--app-accent-soft) !important; }
.e-grid .e-selectionbackground .e-rowcell,
.e-grid .e-rowcell.e-selectionbackground { background-color: var(--app-accent-soft-3) !important; color: var(--app-text) !important; }
/* Grid-Header vollständig auf Flächenfarbe (inkl. Fleck oben links) */
.e-grid .e-gridheader,
.e-grid .e-gridheader table,
.e-grid .e-gridheader thead,
.e-grid .e-gridheader tr,
.e-grid .e-gridheader th,
.e-grid .e-headercell.e-mastercell,
.e-grid .e-headercell.e-checkboxselect,
.e-grid .e-grouptopleftcell,
.e-grid th.e-grouptopleftcell { background-color: var(--app-surface) !important; }
/* Lade-Spinner Overlay */
.e-grid .e-spinner-pane { background-color: var(--app-overlay) !important; }
/* Dropdown im Pager und leerer Bereich */
.e-grid .e-dropdownlist,
.e-grid .e-wrap { background-color: var(--app-surface) !important; }

/* ── Syncfusion – Checkboxen ─────────────────────────────────────────────── */
.e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border-control) !important;
}
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: var(--app-on-accent) !important;
}
.e-checkbox-wrapper:hover .e-frame,
.e-css.e-checkbox-wrapper:hover .e-frame { border-color: var(--app-accent-text) !important; }
.e-checkbox-wrapper .e-label { color: var(--app-text); }

/* RadioButton – Unchecked outer ring */
.e-radio + label::before {
    border-color: var(--app-border-control) !important;
    background-color: var(--app-surface) !important;
}
.e-radio + label .e-label { color: var(--app-text); }
/* In QUERY-Kacheln den Kachel-Hintergrund durchscheinen lassen */
.query-block .e-radio + label::before { background-color: transparent !important; }
/* RadioButton – Checked: äußerer Ring Akzent, Fläche bleibt */
.e-radio:checked + label::before,
.e-radio:checked + label:hover::before,
.e-radio:checked:focus + label::before {
    background-color: var(--app-surface) !important;
    border-color: var(--app-accent-text) !important;
}
/* RadioButton – Checked: innerer Punkt */
.e-radio:checked + label::after,
.e-radio:checked + label:hover::after,
.e-radio:checked:focus + label::after {
    background-color: var(--app-accent-text) !important;
    color: var(--app-accent-text) !important;
}
.e-radio:checked + label:active .e-ripple-element,
.e-radio:checked + .e-focus .e-ripple-container { background-color: var(--app-accent-soft-3) !important; }

/* ── QUERY Abfragen-Kacheln ──────────────────────────────────────────────── */
.query-block {
    padding: 14px 16px;
    background-color: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: 8px;
}
.query-block-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--app-text);
    line-height: 1.3;
}
.query-block .e-input-group,
.query-block .e-float-input,
.query-block .e-input-group input,
.query-block .e-float-input input { background-color: transparent !important; }

/* ── Syncfusion – Stepper ────────────────────────────────────────────────── */
/* Bootstrap Icons Font im Step-Indikator sicherstellen */
.e-stepper .e-step-icon,
.e-stepper .e-step-icon::before {
    font-family: 'bootstrap-icons' !important;
    font-size: 1rem;
}

/* Primärfarbe des Material-Themes auf Stepper-Ebene auf die Marke umbiegen */
#chat-stepper,
#check-stepper {
    --color-sf-primary:           #63140F !important;
    --color-sf-primary-container: rgba(99,20,15,0.12) !important;
}

/* Inaktive Step-Indikatoren */
#chat-stepper.e-stepper .e-indicator,
#check-stepper.e-stepper .e-indicator {
    background-color: var(--app-surface) !important;
    color: var(--app-text-soft) !important;
    box-shadow: none !important;
}
#chat-stepper.e-stepper .e-indicator::before,
#chat-stepper.e-stepper .e-indicator::after,
#check-stepper.e-stepper .e-indicator::before,
#check-stepper.e-stepper .e-indicator::after {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border-strong) !important;
    box-shadow: none !important;
}
#chat-stepper.e-stepper .e-step-container,
#check-stepper.e-stepper .e-step-container {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border-control) !important;
    box-shadow: none !important;
    outline: none !important;
}
#chat-stepper.e-stepper .e-step-container::before,
#chat-stepper.e-stepper .e-step-container::after,
#check-stepper.e-stepper .e-step-container::before,
#check-stepper.e-stepper .e-step-container::after {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border-strong) !important;
    box-shadow: none !important;
}
/* Inaktive Step-Labels */
#chat-stepper.e-stepper .e-label,
#check-stepper.e-stepper .e-label {
    color: var(--app-text-muted) !important;
}

/* Aktiver, ausgewählter und abgeschlossener Step-Indikator                 */
/* ID-Spezifität nötig, da Material-Theme .e-step-selected mit #3f51b5 setzt */
#chat-stepper.e-stepper .e-step-inprogress .e-indicator,
#chat-stepper.e-stepper .e-step-selected .e-indicator,
#chat-stepper.e-stepper .e-step-completed .e-indicator,
#check-stepper.e-stepper .e-step-inprogress .e-indicator,
#check-stepper.e-stepper .e-step-selected .e-indicator,
#check-stepper.e-stepper .e-step-completed .e-indicator {
    background-color: var(--app-accent) !important;
    border-color:     var(--app-accent) !important;
    outline-color:    var(--app-accent) !important;
    box-shadow:       none !important;
    color: var(--app-on-accent) !important;
}

/* Pseudo-Elemente des Indikators (Ring-Effekt im Material-Theme) */
#chat-stepper.e-stepper .e-step-inprogress .e-indicator::before,
#chat-stepper.e-stepper .e-step-inprogress .e-indicator::after,
#chat-stepper.e-stepper .e-step-selected .e-indicator::before,
#chat-stepper.e-stepper .e-step-selected .e-indicator::after,
#chat-stepper.e-stepper .e-step-completed .e-indicator::before,
#chat-stepper.e-stepper .e-step-completed .e-indicator::after,
#check-stepper.e-stepper .e-step-inprogress .e-indicator::before,
#check-stepper.e-stepper .e-step-inprogress .e-indicator::after,
#check-stepper.e-stepper .e-step-selected .e-indicator::before,
#check-stepper.e-stepper .e-step-selected .e-indicator::after,
#check-stepper.e-stepper .e-step-completed .e-indicator::before,
#check-stepper.e-stepper .e-step-completed .e-indicator::after {
    border-color:     var(--app-accent) !important;
    background-color: var(--app-accent) !important;
    color: var(--app-on-accent) !important;
}

/* Ring-Container um den Indikator (selected state) */
#chat-stepper.e-stepper .e-step-selected .e-step-container,
#chat-stepper.e-stepper .e-step-inprogress .e-step-container,
#check-stepper.e-stepper .e-step-selected .e-step-container,
#check-stepper.e-stepper .e-step-inprogress .e-step-container {
    border-color:  var(--app-accent) !important;
    outline-color: var(--app-accent) !important;
}
#chat-stepper.e-stepper .e-step-selected .e-step-container::before,
#chat-stepper.e-stepper .e-step-selected .e-step-container::after,
#check-stepper.e-stepper .e-step-selected .e-step-container::before,
#check-stepper.e-stepper .e-step-selected .e-step-container::after {
    border-color:     var(--app-accent) !important;
    background-color: var(--app-accent) !important;
}

/* Connector-Füllfarbe (Fortschrittsstreifen zwischen Steps) */
#chat-stepper.e-stepper .e-step-progressbar-value,
#chat-stepper.e-stepper .e-progressbar-value,
#check-stepper.e-stepper .e-step-progressbar-value,
#check-stepper.e-stepper .e-progressbar-value {
    background-color: var(--app-accent) !important;
    border-color:     var(--app-accent) !important;
}

/* Connector-Track-Farbe (Hintergrund der Verbindungslinie) */
#chat-stepper.e-stepper .e-stepper-progressbar,
#chat-stepper.e-stepper .e-step-progressbar,
#check-stepper.e-stepper .e-stepper-progressbar,
#check-stepper.e-stepper .e-step-progressbar {
    background-color: var(--app-track) !important;
    border-color:     var(--app-track) !important;
}

/* Aktiver und abgeschlossener Step-Label */
#chat-stepper.e-stepper .e-step-inprogress .e-label,
#chat-stepper.e-stepper .e-step-selected .e-label,
#chat-stepper.e-stepper .e-step-completed .e-label,
#check-stepper.e-stepper .e-step-inprogress .e-label,
#check-stepper.e-stepper .e-step-selected .e-label,
#check-stepper.e-stepper .e-step-completed .e-label {
    color: var(--app-accent-text) !important;
}

/* ── Syncfusion – TextBox (Outline) ─────────────────────────────────────── */
.e-outline.e-input-group:not(.e-disabled):not(.e-error).e-input-focus,
.e-outline.e-input-group.e-control-wrapper:not(.e-disabled):not(.e-error).e-input-focus {
    border-color: var(--app-accent-text) !important;
}
.e-outline.e-float-input:not(.e-disabled) .e-float-line::before,
.e-outline.e-float-input:not(.e-disabled) .e-float-line::after,
.e-outline.e-input-group:not(.e-disabled).e-input-focus .e-float-line::before,
.e-outline.e-input-group:not(.e-disabled).e-input-focus .e-float-line::after {
    background-color: var(--app-accent-text) !important;
}
.e-outline .e-input:focus { caret-color: var(--app-accent-text); }

/* ── Syncfusion – DropDownList ───────────────────────────────────────────── */
.e-dropdownlist.e-input-group:not(.e-disabled):not(.e-error).e-input-focus,
.e-ddl.e-input-group:not(.e-disabled):not(.e-error).e-input-focus {
    border-color: var(--app-accent-text) !important;
}
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover {
    background-color: var(--app-accent-soft-2) !important;
    color: var(--app-accent-text) !important;
}
.e-dropdownbase .e-list-item.e-hover {
    background-color: var(--app-accent-soft) !important;
}
.e-ddl .e-input-group-icon.e-ddl-icon::before { color: var(--app-accent-text); }
/* Fokus-Linie und Textmarkierung der Standard-Eingabefelder (ohne Outline) in Akzentfarbe statt Material-Pink */
.e-input-group:not(.e-outline):not(.e-disabled):not(.e-error)::before,
.e-input-group:not(.e-outline):not(.e-disabled):not(.e-error)::after,
.e-input-group.e-control-wrapper:not(.e-outline):not(.e-disabled):not(.e-error)::before,
.e-input-group.e-control-wrapper:not(.e-outline):not(.e-disabled):not(.e-error)::after {
    background: var(--app-accent-text) !important;
}
.e-input-group .e-input::selection,
.e-input-group.e-control-wrapper .e-input::selection,
.e-input::selection {
    background: var(--app-accent-soft-3) !important;
    color: var(--app-text) !important;
}
.e-input-group .e-input:focus { caret-color: var(--app-accent-text); }
.e-input-group .e-clear-icon { color: var(--app-text-soft) !important; }

/* ── Flixcheck-Wizard (Check erstellen / Massenversand) ─────────────────── */
#check-stepper .e-step-label-container .e-label {
    font-size: 0.8rem;
}

.object-option {
    cursor: pointer;
    border: 2px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    user-select: none;
}
.object-option:hover { border-color: var(--app-accent-text); }
.object-option.selected {
    border-color: var(--app-accent-text);
    background-color: var(--app-accent-soft);
    box-shadow: 0 0 0 1px var(--app-accent-text);
}
.object-option .option-icon {
    font-size: 2.25rem;
    color: var(--app-text-muted);
    display: block;
    margin-bottom: 0.5rem;
    transition: color 0.15s;
}
.object-option.selected .option-icon { color: var(--app-accent-text); }
.object-option .option-label { font-weight: 500; font-size: 0.95rem; }

.step-panel { min-height: 220px; }

/* Template-Baum: Ordner fett, Templates normal */
.flix-template-tree .e-list-item:not(.e-has-child) > .e-fullrow,
.flix-template-tree .e-list-item:not(.e-has-child) > .e-text-content {
    cursor: pointer;
}
.flix-template-tree .e-list-item.e-active > .e-fullrow {
    background-color: var(--app-accent-soft);
    border-color: var(--app-accent-text);
}
.flix-template-tree .e-list-item > .e-text-content .e-list-icon {
    margin-right: 6px;
    font-size: 1rem;
}
.flix-template-tree .e-text-content {
    display: flex;
    align-items: center;
    gap: 6px;
}
.alloc-help-icon {
    font-size: 0.8rem;
    cursor: default;
    opacity: 0.6;
}
.alloc-help-icon:hover { opacity: 1; }
select.flix-folder-select {
    margin-top: 2px;
}
.flix-tags-dropdown { position: relative; }
.flix-tags-trigger { height: auto !important; min-height: 31px; cursor: pointer; }
.flix-tags-backdrop { position: fixed; inset: 0; z-index: 1049; }
.flix-tags-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    z-index: 1050;
    background: var(--app-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.flix-tags-options { max-height: 200px; overflow-y: auto; }
.flix-tags-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 5px 12px;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    cursor: pointer;
}
.flix-tags-option:hover { background: var(--bs-tertiary-bg); }
.flix-tags-option.selected { background: var(--app-accent-soft); }
.flix-tag-icon { font-size: 0.8rem; flex-shrink: 0; }
.flix-tag-icon.bi-check-square-fill { color: var(--app-accent-text); }
.flix-ams-badge {
    margin-left: 8px;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    vertical-align: middle;
    background-color: var(--app-accent) !important;
    color: #fff !important;
}

/* Whitelist-Flat-Liste */
.flix-tpl-selected {
    background-color: var(--app-accent) !important;
    border-color:     var(--app-accent) !important;
    color: #fff !important;
}
.flix-tpl-selected .fw-semibold { color: #fff; }
.tpl-sub-selected { color: rgba(255,255,255,0.78) !important; }
.flix-ams-badge-inv {
    background-color: rgba(255,255,255,0.22) !important;
    color: #fff !important;
    margin-left: 0;
}
.flix-detail-placeholder {
    border-style: dashed !important;
    min-height: 120px;
}
.flix-preview-ready { text-align: center; }
.flix-phone-frame {
    display: inline-block;
    border: 2px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 10px 8px 8px;
    background: var(--bs-body-bg);
    width: 100%;
    max-width: 180px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.flix-phone-notch {
    width: 40px;
    height: 5px;
    background: var(--bs-border-color);
    border-radius: 3px;
    margin: 0 auto 8px;
}
.flix-phone-screen-inner { padding: 0 4px 4px; }

/* Sending-Check animation */
.creating-check-anim {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.creating-check-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--app-accent-soft-2);
    border-top-color: var(--app-accent-text);
    border-right-color: var(--app-accent-text);
    animation: check-ring-spin 0.9s linear infinite;
}
.creating-check-icon {
    font-size: 1.9rem;
    color: var(--app-accent-text);
    position: relative;
    animation: check-icon-send 1.6s ease-in-out infinite;
}
@keyframes check-ring-spin {
    to { transform: rotate(360deg); }
}
@keyframes check-icon-send {
    0%, 100% { opacity: 1;   transform: scale(1)    rotate(0deg); }
    50%       { opacity: 0.6; transform: scale(0.88) rotate(-10deg); }
}

/* ── Flixcheck-Massenversand ─────────────────────────────────────────────── */
/* Auswahl-Schritt: Suche links, Auswahlliste rechts daneben (auf schmalen Bildschirmen darunter) */
.bulk-select-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}
.bulk-select-basket { position: sticky; top: 1rem; }
@media (max-width: 1399.98px) {
    .bulk-select-layout { grid-template-columns: minmax(0, 1fr); }
    .bulk-select-basket { position: static; }
}

/* Empfängerliste: rot = kein gültiger Empfänger, gelb = Kunde erhält mehrere Checks */
.e-grid .e-row.bulk-row-missing .e-rowcell   { background-color: color-mix(in srgb, var(--app-danger-text) 24%, var(--app-surface)) !important; }
.e-grid .e-row.bulk-row-duplicate .e-rowcell { background-color: color-mix(in srgb, #ffc107 38%, var(--app-surface)) !important; }
.bulk-recipient-grid .e-row.bulk-row-excluded .e-rowcell  { opacity: 0.55; }
.bulk-recipient-grid .e-rowcell { vertical-align: middle; }
/* Empfängerfeld übernimmt die Zeilenfarbe (auch rot/gelb) statt einer eigenen Fläche */
.bulk-recipient-grid .e-rowcell .e-input-group,
.bulk-recipient-grid .e-rowcell .e-input-group.e-control-wrapper,
.bulk-recipient-grid .e-rowcell .e-input-group .e-input,
.bulk-recipient-grid .e-rowcell .e-input-group .e-input-group-icon { background-color: transparent !important; }
.bulk-legend-missing   { color: var(--app-danger-text); }
.bulk-legend-duplicate { color: var(--app-warning-text); }
.bulk-legend-dot {
    display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 0.2rem;
    vertical-align: -0.05rem; margin-right: 0.3rem; border: 1px solid var(--app-border-strong);
}
.bulk-legend-dot.missing   { background-color: color-mix(in srgb, var(--app-danger-text) 24%, var(--app-surface)); }
.bulk-legend-dot.duplicate { background-color: color-mix(in srgb, #ffc107 38%, var(--app-surface)); }

/* Versandaufträge: Status-Badges */
.bulk-status { font-weight: 500; }
.bulk-status-queued   { background-color: var(--app-surface-3) !important; color: var(--app-text-soft) !important; }
.bulk-status-running  { background-color: var(--app-accent-soft-2) !important; color: var(--app-accent-text) !important; }
.bulk-status-success  { background-color: rgba(25, 135, 84, 0.15) !important; color: #146c43 !important; }
.bulk-status-warning  { background-color: var(--app-warning-soft) !important; color: var(--app-warning-text) !important; }
.bulk-status-danger   { background-color: var(--app-danger-soft) !important; color: var(--app-danger-text) !important; }
[data-theme="dark"] .bulk-status-success { color: #75c79a !important; }