/* ===========================================================================
   AllIt - zentrale Gestaltung
   Markenton: kräftiges Blau (HBS IT GmbH), helle Flächen, weiße Karten mit
   weichen Schatten. Sachlicher Werkzeug-Charakter.

   Alle Farben als CSS-Variablen an EINER Stelle - so lässt sich der Markenton
   zentral anpassen.
   =========================================================================== */

:root {
    /* --- Markenfarben --- */
    /* Leitfarbe der HBS IT GmbH: RGB(0,75,125) = #004B7D. Zentral hier ändern. */
    --allit-marke: #004B7D;
    --allit-marke-dunkel: #003A61;   /* für Hover-Zustände */
    --allit-marke-hell: #D9E7F1;     /* sehr helle Tönung, z.B. Akzentflächen */

    /* Abwärtskompatible Aliase: bestehende var(--allit-rot*)-Verwendungen im
       gesamten Stylesheet zeigen auf die Markenfarbe oben. So bleibt der Code
       gültig, ohne jede Fundstelle einzeln anzufassen. */
    --allit-rot: var(--allit-marke);
    --allit-rot-dunkel: var(--allit-marke-dunkel);
    --allit-rot-hell: var(--allit-marke-hell);

    /* --- Flächen --- */
    --allit-hintergrund: #F1F2F6;    /* heller Seitenhintergrund */
    --allit-karte: #FFFFFF;          /* weiße Karten */
    --allit-rahmen: #E2E4EA;         /* dezente Rahmenlinien */

    /* --- Text --- */
    --allit-text: #1F2430;           /* dunkler Haupttext */
    --allit-text-leise: #6B7280;     /* gedämpfter Text, Hinweise */

    /* --- Form --- */
    --allit-radius: 14px;            /* Eckenrundung der Karten */
    --allit-radius-klein: 8px;       /* Eckenrundung Felder, Knöpfe */
    --allit-schatten: 0 6px 22px rgba(31, 36, 48, 0.10);
    --allit-schatten-leicht: 0 2px 8px rgba(31, 36, 48, 0.07);

    /* --- Datenraster (dichte, technische Darstellung von Listen) ---
       Eigene Tokens für den Admin-Werkzeug-Charakter: kompaktere Tabellen
       und Formulare. An einer Stelle gebündelt, damit sich die Dichte
       zentral nachjustieren lässt. */
    --allit-raster-schrift: 0.82rem;        /* Schriftgröße in Tabellen/Feldern */
    --allit-raster-zeile-y: 0.34rem;        /* vertikale Zellenpolsterung */
    --allit-raster-zeile-x: 0.7rem;         /* horizontale Zellenpolsterung */
    --allit-raster-zebra: #F7F8FA;          /* Hintergrund jeder zweiten Zeile */
    --allit-raster-hover: #EAF2F8;          /* Zeile unter dem Mauszeiger (blaue Tönung) */
    --allit-raster-linie: #ECEEF1;          /* feine Gitterlinie im Datenraster */
    --allit-mono: Consolas, "Courier New", monospace;
}

/* --- Grundlagen --- */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--allit-hintergrund);
    color: var(--allit-text);
}

h1, h2, h3 {
    color: var(--allit-text);
}

/* --- Knöpfe im Markenstil --- */
.allit-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #FFFFFF;
    background-color: var(--allit-rot);
    border: none;
    border-radius: var(--allit-radius-klein);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.allit-knopf:hover {
    background-color: var(--allit-rot-dunkel);
}

.allit-knopf:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.allit-knopf-voll {
    width: 100%;
}

/* --- Eingabefelder --- */
.allit-feld {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
    color: var(--allit-text);
    background-color: #FFFFFF;
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    box-sizing: border-box;
}

.allit-feld:focus {
    outline: none;
    border-color: var(--allit-rot);
}

.allit-feld-beschriftung {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
}

/* --- Karten --- */
.allit-karte {
    background-color: var(--allit-karte);
    border-radius: var(--allit-radius);
    box-shadow: var(--allit-schatten);
}

/* --- Blazor-Fehleranzeige (vom Standard übernommen, leicht angepasst) --- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* --- Ladeanzeige beim Start --- */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--allit-rot);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--allit-text);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Wird geladen");
    }
/* Layout-Gerüst: Kopfzeile oben, Inhalt dehnt sich, Fußzeile unten.
   Die ganze Seite ist mindestens fensterhoch (Fußzeile bleibt unten). */

.allit-rahmen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Rote Kopfzeile --- */
.allit-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background-color: var(--allit-rot);
    color: #FFFFFF;
}

.allit-kopf-marke {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* Die helle Logo-Kachel links (Platzhalter, später echtes Logo) */
.allit-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #FFFFFF;
}

.allit-kopf-haupt {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.allit-kopf-unter {
    font-size: 0.8rem;
    opacity: 0.85;
}

/* --- Benutzerbereich rechts --- */
.allit-benutzer {
    position: relative;
}

.allit-benutzer-knopf {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--allit-rot);
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.allit-benutzer-menue {
    position: absolute;
    top: 52px;
    right: 0;
    min-width: 180px;
    background-color: #FFFFFF;
    border-radius: var(--allit-radius-klein);
    box-shadow: var(--allit-schatten);
    overflow: hidden;
    z-index: 20;
}

.allit-benutzer-name {
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    color: var(--allit-text-leise);
    border-bottom: 1px solid var(--allit-rahmen);
}

.allit-menue-eintrag {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    text-align: left;
    background: none;
    border: none;
    font-size: 0.95rem;
    color: var(--allit-text);
    cursor: pointer;
}

.allit-menue-eintrag:hover {
    background-color: var(--allit-hintergrund);
}

/* --- Inhaltsbereich: dehnt sich und schiebt die Fußzeile nach unten --- */
.allit-inhalt {
    flex: 1;
    padding: 2rem;
}

/* --- Rote Fußzeile --- */
.allit-fuss {
    padding: 0.9rem 1.5rem;
    background-color: var(--allit-rot);
    color: #FFFFFF;
    text-align: center;
    font-size: 0.9rem;
}

/* ===========================================================================
   Modul-Layout: Seitenleiste links, Inhalt rechts.
   In der globalen CSS, da ein Layout seine eigenen Elemente nicht zuverlässig
   über komponentengebundenes CSS erreicht.
   =========================================================================== */

.modul-koerper {
    display: flex;
    flex: 1;
    /* min-height:0 erlaubt es Kindern, kleiner als ihr Inhalt zu werden -
       Voraussetzung dafür, dass ein innenliegender Scrollbereich greift. */
    min-height: 0;
}

.modul-leiste {
    width: 220px;
    flex-shrink: 0;
    background-color: #FFFFFF;
    border-right: 1px solid var(--allit-rahmen);
    padding: 1.25rem 0.75rem;
    box-sizing: border-box;
}

.modul-leiste-zurueck {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    color: var(--allit-text-leise);
    cursor: pointer;
}

.modul-leiste-zurueck:hover {
    color: var(--allit-rot);
}

.modul-leiste-titel {
    padding: 0.75rem 0.75rem 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--allit-text-leise);
}

.modul-leiste-eintrag {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: var(--allit-radius-klein);
    font-size: 0.95rem;
    color: var(--allit-text);
    text-decoration: none;
    cursor: pointer;
}

.modul-leiste-eintrag:hover {
    background-color: var(--allit-hintergrund);
}

/* Der aktive Eintrag - Blazor (NavLink) setzt die Klasse "active" automatisch. */
.modul-leiste-eintrag.active {
    background-color: var(--allit-rot);
    color: #FFFFFF;
}

.modul-inhalt {
    flex: 1;
    padding: 1.25rem 1.5rem;
    /* Als Flex-Spalte, damit eine darin liegende Tabellen-Karte den
       verbleibenden Platz bekommt und selbst scrollt. */
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* min-width:0: modul-inhalt ist selbst Flex-Kind der waagerechten
       modul-koerper-Leiste - ohne dies würde eine breite Tabelle den
       ganzen Inhaltsbereich (und damit die Seite) breiter machen. */
    min-width: 0;
    box-sizing: border-box;
}

.allit-logo-klick {
    cursor: pointer;
}

/* ===========================================================================
   Listen-/Tabellen-Muster - von mehreren Seiten genutzt (Mandanten, Quellen ...)
   =========================================================================== */
/* Mandantenliste als Tabelle. */

.liste-kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.liste-titel {
    margin: 0 0 0.1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.liste-text {
    margin: 0;
    font-size: 0.85rem;
    color: var(--allit-text-leise);
}

.liste-zaehler {
    font-size: 0.8rem;
    color: var(--allit-text-leise);
    white-space: nowrap;
}

.liste-hinweis {
    color: var(--allit-text-leise);
}

.liste-fehler {
    padding: 0.8rem 1rem;
    background-color: var(--allit-rot-hell);
    color: var(--allit-rot-dunkel);
    border-radius: var(--allit-radius-klein);
}

/* Die Tabelle sitzt in einer weißen Karte. Für das Datenraster bewusst
   kantig und mit feiner Linie statt großem Radius und weichem Schatten. */
.liste-karte {
    padding: 0;
    overflow: hidden;
    border-radius: var(--allit-radius-klein);
    border: 1px solid var(--allit-rahmen);
    box-shadow: var(--allit-schatten-leicht);
}

.liste-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--allit-raster-schrift);
    font-family: var(--allit-mono);
}

.liste-tabelle thead th {
    text-align: left;
    padding: var(--allit-raster-zeile-y) var(--allit-raster-zeile-x);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--allit-text-leise);
    /* Feine Gitterlinien - unten etwas kräftiger als die Spaltentrenner. */
    border-bottom: 1px solid var(--allit-rahmen);
    border-right: 1px solid var(--allit-raster-linie);
    white-space: nowrap;
}

.liste-tabelle tbody td {
    padding: var(--allit-raster-zeile-y) var(--allit-raster-zeile-x);
    /* Durchgehendes feines Raster: dünne Linie unten UND rechts an jeder
       Zelle. Ergibt das technische Gitter über die ganze Tabelle. */
    border-bottom: 1px solid var(--allit-raster-linie);
    border-right: 1px solid var(--allit-raster-linie);
}

/* Letzte Spalte ohne rechte Linie - der Kartenrand schließt ab. */
.liste-tabelle tbody td:last-child,
.liste-tabelle thead th:last-child {
    border-right: none;
}

/* Letzte Zeile ohne Trennlinie. */
.liste-tabelle tbody tr:last-child td {
    border-bottom: none;
}

/* Zebra-Streifen und Hover-Hervorhebung sind weiter unten definiert
   (Abschnitt "Spaltengruppen und eingefrorene Spalten") - dort setzen die
   Zeilen zusätzlich einen expliziten Hintergrund, damit Sticky-Spalten ihn
   mitnehmen. */

.liste-zelle-haupt {
    font-weight: 600;
}

.liste-zelle-leise {
    color: var(--allit-text-leise);
}

/* Zelle mit technischem Inhalt (SID, Pfad, GUID) - dicktengleiche Schrift. */
.liste-zelle-technisch {
    font-family: var(--allit-mono);
    font-size: 0.78rem;
}

/* --- Sortierbare Spaltenköpfe --- */
/* Kopfzelle, die per Klick sortiert. Der Sortier-Indikator wird über die
   Klasse liste-th-auf / liste-th-ab gesteuert. */
.liste-th-sortierbar {
    cursor: pointer;
    user-select: none;
}

.liste-th-sortierbar:hover {
    color: var(--allit-text);
}

/* Pfeil hinter dem Spaltennamen. Standard: leiser Doppelpfeil als Hinweis,
   dass die Spalte sortierbar ist. */
.liste-th-sortierbar::after {
    content: " \2195";
    opacity: 0.35;
    font-size: 0.85em;
}

.liste-th-auf::after {
    content: " \25B2";
    opacity: 1;
    color: var(--allit-rot);
}

.liste-th-ab::after {
    content: " \25BC";
    opacity: 1;
    color: var(--allit-rot);
}

/* Statusmarke in der Tabelle - eckig und kompakt (technischer Look). */
.liste-marke {
    display: inline-block;
    padding: 0.08rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.liste-marke-aktiv {
    background-color: var(--allit-rot-hell);
    color: var(--allit-rot-dunkel);
}

.liste-marke-inaktiv {
    background-color: var(--allit-rahmen);
    color: var(--allit-text-leise);
}

/* Neutrale Marke ohne Statuswertung (z.B. Quellen-Kürzel "AD", "M365"). */
.liste-marke-neutral {
    background-color: var(--allit-hintergrund);
    color: var(--allit-text);
    border: 1px solid var(--allit-rahmen);
}

/* ===========================================================================
   Collector-Verwaltung: Formulare, leiser Knopf, Schlüssel-Anzeige
   =========================================================================== */

/* Zurückhaltender Knopf - für Abbrechen, Sekundäraktionen, Tabellenaktionen. */
.allit-knopf-leise {
    padding: 0.3rem 0.6rem;
    background-color: #FFFFFF;
    color: var(--allit-text);
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
}

.allit-knopf-leise:hover {
    background-color: var(--allit-hintergrund);
}

/* Sehr kompakter Knopf für die Werkzeugleiste über Listen. */
.allit-knopf-werkzeug {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.6rem;
    background-color: #FFFFFF;
    color: var(--allit-text);
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.allit-knopf-werkzeug:hover {
    background-color: var(--allit-hintergrund);
}

/* --- Formular-Karte --- */
.form-karte {
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    max-width: 640px;
    border-radius: var(--allit-radius-klein);
    border: 1px solid var(--allit-rahmen);
    box-shadow: var(--allit-schatten-leicht);
}

.form-titel {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.form-feld {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.65rem;
}

/* Variante für eine Zeile mit Kontrollkästchen. */
.form-feld-quer {
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
}

/* Zweispaltiges Feldraster für breitere Formulare - nutzt den Platz besser. */
.form-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.form-bezeichnung {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--allit-text-leise);
}

.form-eingabe {
    padding: 0.38rem 0.55rem;
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    font-size: var(--allit-raster-schrift);
}

.form-eingabe:focus {
    outline: none;
    border-color: var(--allit-rot);
}

.form-knopfreihe {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

/* --- Schlüssel-Anzeige nach dem Anlegen --- */
.schluessel-karte {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    max-width: 720px;
    border-left: 4px solid var(--allit-rot);
}

.schluessel-titel {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.schluessel-warnung {
    font-size: 0.9rem;
    color: var(--allit-text-leise);
    margin: 0 0 0.75rem 0;
}

/* Der Schlüssel selbst - dicktengleiche Schrift, gut markierbar. */
.schluessel-wert {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.95rem;
    background-color: var(--allit-hintergrund);
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    word-break: break-all;
    user-select: all;
}

/* ===========================================================================
   Mandantenwahl - Karten zur Auswahl des aktiven Mandanten
   =========================================================================== */

.mandant-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    max-width: 800px;
}

.mandant-karte {
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mandant-karte:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(31, 36, 48, 0.16);
}

.mandant-karte-inaktiv {
    opacity: 0.55;
}

.mandant-karte-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.mandant-karte-status {
    font-size: 0.85rem;
    color: var(--allit-text-leise);
}

/* --- Mandanten-Anzeige in der Modul-Kopfzeile --- */
.modul-mandant {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: 1rem;
}

.modul-mandant-name {
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 600;
}

.modul-mandant-wechsel {
    padding: 0.3rem 0.7rem;
    background-color: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    border: none;
    border-radius: var(--allit-radius-klein);
    font-size: 0.8rem;
    cursor: pointer;
}

.modul-mandant-wechsel:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Rechter Bereich der Modul-Kopfzeile: aktiver Mandant + Benutzermenü. */
.allit-kopf-rechts {
    display: flex;
    align-items: center;
}

/* Inaktive Listenzeile - abgeblendet dargestellt. */
.liste-zeile-inaktiv {
    opacity: 0.55;
}

/* Zelle mit mehreren Aktions-Knöpfen nebeneinander. */
.liste-zelle-aktionen {
    display: flex;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Gefahr-Knopf - für bestätigtes, endgültiges Löschen. */
.allit-knopf-gefahr {
    padding: 0.5rem 1rem;
    background-color: var(--allit-rot);
    color: #FFFFFF;
    border: none;
    border-radius: var(--allit-radius-klein);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.allit-knopf-gefahr:hover {
    background-color: var(--allit-rot-dunkel);
}

/* Modaler Bestätigungsdialog (z.B. vor dem harten Löschen). */
.liste-dialog-hintergrund {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.liste-dialog {
    background-color: #FFFFFF;
    border-radius: var(--allit-radius);
    padding: 1.5rem 1.75rem;
    max-width: 32rem;
    width: calc(100% - 2rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.liste-dialog-titel {
    margin: 0 0 0.75rem 0;
    font-size: 1.2rem;
    color: var(--allit-rot);
}

.liste-dialog-knoepfe {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* Kleiner erläuternder Hinweis unter einem Formularfeld. */
.form-hinweis {
    font-size: 0.8rem;
    color: var(--allit-text-leise);
    margin: -0.5rem 0 1rem 0;
}

/* ===========================================================================
   Werkzeugleiste über Listen - Suche und Schalter
   =========================================================================== */

.liste-werkzeuge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

/* Suchfeld - kompakt, aber breit genug für Namen. */
.liste-suche {
    min-width: 220px;
}

/* Schalter mit Beschriftung (z.B. "Auch gelöschte anzeigen"). */
.liste-schalter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--allit-text-leise);
    cursor: pointer;
    white-space: nowrap;
}

/* Label mit Auswahlfeld in der Werkzeugleiste (z.B. Quellen-Filter). */
.liste-filter-auswahl {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--allit-text-leise);
    white-space: nowrap;
}

.liste-filter-auswahl select {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
}

/* Trenner zwischen Werkzeuggruppen in der Leiste. */
.liste-werkzeug-trenner {
    width: 1px;
    align-self: stretch;
    background-color: var(--allit-rahmen);
}

/* Klappmenü "Spalten" zum Ein-/Ausblenden von Tabellenspalten. */
.spalten-menue {
    position: relative;
}

.spalten-menue-tafel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 180px;
    padding: 0.35rem;
    background-color: #FFFFFF;
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    box-shadow: var(--allit-schatten);
}

.spalten-menue-eintrag {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.45rem;
    font-size: 0.8rem;
    color: var(--allit-text);
    cursor: pointer;
    border-radius: 4px;
}

.spalten-menue-eintrag:hover {
    background-color: var(--allit-hintergrund);
}

/* ===========================================================================
   AD-Gruppen: Ausklappbare Mitgliederliste
   =========================================================================== */

/* Der +/- Knopf zum Aufklappen einer Gruppe. */
.gruppe-ausklapp {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    background-color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    color: var(--allit-text);
}

.gruppe-ausklapp:hover {
    background-color: var(--allit-hintergrund);
}

/* Die aufgeklappte Detailzeile unter einer Gruppe. */
.gruppe-detail-zeile td {
    background-color: var(--allit-hintergrund);
    padding: 1rem 1.5rem;
}

/* Raster der Mitglieder. */
.gruppe-mitglieder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.5rem;
}

.gruppe-mitglied {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* Typ-Markierung (Benutzer / Computer / Gruppe). */
.gruppe-mitglied-typ {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--allit-text-leise);
    background-color: #FFFFFF;
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    padding: 0.1rem 0.4rem;
}

.gruppe-mitglied-name {
    color: var(--allit-text);
}

.gruppe-mitglied-hinweis {
    font-size: 0.75rem;
    color: var(--allit-rot);
    font-style: italic;
}

/* ===========================================================================
   Zusammenklappbare Navigationsgruppen in der Modul-Seitenleiste
   =========================================================================== */

/* Anklickbare Gruppen-Überschrift (z.B. "Einstellungen", "Inventar"). */
.modul-leiste-gruppe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 0.75rem 0.5rem 0.75rem;
    margin-top: 0.5rem;
    background: none;
    border: none;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--allit-text-leise);
    cursor: pointer;
}

.modul-leiste-gruppe:hover {
    color: var(--allit-text);
}

/* Das +/- Zeichen am rechten Rand der Gruppen-Überschrift. */
.modul-leiste-pfeil {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

/* Einträge innerhalb einer Gruppe etwas einrücken. */
.modul-leiste-gruppe ~ .modul-leiste-eintrag {
    margin-left: 0.5rem;
}

/* --- Aufklappbarer Oberpunkt (Computer / Identitäten / Active Directory) ---
   Sitzt zwischen Gruppe und Eintrag: wie ein normaler Eintrag, aber mit
   +/--Pfeil rechts und leicht eingerückt. */
.modul-leiste-ober {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-left: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--allit-radius-klein);
    background: none;
    border: none;
    font-size: 0.95rem;
    color: var(--allit-text);
    text-align: left;
    cursor: pointer;
}

.modul-leiste-ober:hover {
    background-color: var(--allit-hintergrund);
}

/* Oberpunkt, der zugleich ein Link ist (Identitäten): Text und Pfeil sind
   getrennte Klickflächen, daher kein eigenes padding am Container. */
.modul-leiste-ober-link {
    padding: 0;
    cursor: default;
}

/* Der Link-Teil des Oberpunkts - füllt die Breite, Klick führt zur Seite. */
.modul-leiste-ober-text {
    flex: 1;
    padding: 0.55rem 0.75rem;
    border-radius: var(--allit-radius-klein);
    font-size: 0.95rem;
    color: var(--allit-text);
    text-decoration: none;
    cursor: pointer;
}

.modul-leiste-ober-text:hover {
    background-color: var(--allit-hintergrund);
}

/* Der aktive Link-Oberpunkt - NavLink setzt "active" automatisch. */
.modul-leiste-ober-text.active {
    background-color: var(--allit-rot);
    color: #FFFFFF;
}

/* Der Pfeil-Knopf des Link-Oberpunkts - getrennte Klickfläche zum Aufklappen. */
.modul-leiste-ober-pfeil {
    padding: 0.55rem 0.7rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--allit-text-leise);
    cursor: pointer;
}

.modul-leiste-ober-pfeil:hover {
    color: var(--allit-rot);
}

/* Unterpunkt eines Oberpunkts - tiefer eingerückt als ein normaler Eintrag. */
.modul-leiste-eintrag.modul-leiste-unter {
    margin-left: 1.5rem;
    font-size: 0.9rem;
}

/* ===========================================================================
   AD-GPOs: Detailbereich (Verknüpfungen + Sicherheitsfilterung)
   =========================================================================== */

.gpo-detail {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gpo-detail-titel {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--allit-text-leise);
    margin-bottom: 0.5rem;
}

/* Eine einzelne OU-Verknüpfung. */
.gpo-verknuepfung {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding: 0.2rem 0;
}

/* Der OU-Pfad - dicktengleiche Schrift, da technischer Pfad. */
.gpo-ou-pfad {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85rem;
    color: var(--allit-text);
}

/* Kennzeichnung an einer Verknüpfung (erzwungen / inaktiv). */
.gpo-marke {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: var(--allit-rot);
    border-radius: var(--allit-radius-klein);
    padding: 0.1rem 0.4rem;
}

/* Variante für "inaktiv" - zurückhaltender Ton. */
.gpo-marke-aus {
    background-color: var(--allit-text-leise);
}

/* Neutrale Info-/Ergebnismeldung (z.B. nach der SID-Auflösung). */
.liste-meldung {
    background-color: #FFFFFF;
    border: 1px solid var(--allit-rahmen);
    border-left: 4px solid var(--allit-rot);
    border-radius: var(--allit-radius-klein);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--allit-text);
}

/* ===========================================================================
   Datenraster: Spaltengruppen und eingefrorene Spalten
   Für breite Tabellen nach Excel-Vorbild (AD-Benutzer u.a.).
   =========================================================================== */

/* Die breite Tabelle scrollt INNERHALB der Karte - horizontal, wenn sie
   breiter als die Karte ist, vertikal, wenn sie höher wird (z.B. weil ein
   Filter-Dropdown aufgeklappt ist). So bleibt das Dropdown immer im
   sichtbaren Tabellenbereich und wird nicht abgeschnitten.

   Die Maximalhöhe begrenzt die Karte auf den Bildschirm; bei vielen Zeilen
   scrollt der Tabelleninhalt, die Kopfzeile bleibt oben stehen (s.u.). */
.liste-karte-breit {
    overflow: auto;
    flex: 1;
    min-height: 200px;
    /* min-width:0 ist entscheidend: Ein Flex-Kind hat per Default
       min-width:auto und wird damit so breit wie sein Inhalt - die Karte
       würde die ganze Seite breiter machen statt selbst zu scrollen.
       Mit min-width:0 bleibt sie fenstergroß und scrollt horizontal innen. */
    min-width: 0;
    width: 100%;
    /* Kartenoptik (früher von .liste-karte) - hier direkt, da diese Tabelle
       nur noch .liste-karte-breit trägt (kein overflow-Konflikt mehr). */
    border-radius: var(--allit-radius-klein);
    border: 1px solid var(--allit-rahmen);
    box-shadow: var(--allit-schatten-leicht);
    box-sizing: border-box;
}

/* Kopfzeilen bleiben beim vertikalen Scrollen oben stehen. Die Tabelle hat
   zwei Kopfzeilen (Gruppen + Spalten) - beide werden klebrig gemacht. */
.liste-karte-breit .liste-tabelle thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Obere Kopfzeile: die Spaltengruppen-Überschriften (z.B. "Kontaktdaten"),
   die sich über mehrere Spalten erstrecken. */
.liste-gruppenkopf th {
    text-align: left;
    /* Dieselbe Polsterung wie die Tabellenzellen - die Gruppenzeile ist
       damit so dicht wie der Rest der Tabelle, nicht höher. */
    padding: var(--allit-raster-zeile-y) var(--allit-raster-zeile-x);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--allit-text-leise);
    background-color: var(--allit-hintergrund);
    border-bottom: 1px solid var(--allit-rahmen);
    border-right: 1px solid var(--allit-raster-linie);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.liste-gruppenkopf th:hover {
    color: var(--allit-text);
}

/* Das +/- Zeichen vor dem Gruppennamen. */
.liste-gruppe-schalter {
    display: inline-block;
    width: 1.1em;
    color: var(--allit-rot);
    font-weight: 700;
}

/* Eine eingeklappte Gruppe wird zur schmalen Sammelspalte. */
.liste-gruppenkopf th.liste-gruppe-zu {
    color: var(--allit-rot);
}

/* Sticky-Spalten: bleiben beim horizontalen Scrollen am linken Rand stehen.
   Der left-Versatz wird per JavaScript (allit-spalten.js) aus den echten
   Spaltenbreiten gemessen und als Inline-Stil gesetzt. */
.liste-zelle-fix {
    position: sticky;
    z-index: 2;
}

/* WICHTIG: Fixierte Zellen brauchen einen VOLL DECKENDEN eigenen Hintergrund,
   sonst scheinen die scrollenden Spalten dahinter durch. "inherit" reicht
   dafür nicht zuverlässig - daher explizite Farben, Zebra über nth-child
   nachgebildet. */
.liste-tabelle tbody td.liste-zelle-fix {
    background-color: #FFFFFF;
}

.liste-tabelle tbody tr:nth-child(even) td.liste-zelle-fix {
    background-color: var(--allit-raster-zebra);
}

.liste-tabelle tbody tr:hover td.liste-zelle-fix {
    background-color: var(--allit-raster-hover);
}

/* Fixierte Kopfzellen der unteren Kopfzeile. */
.liste-tabelle thead tr:last-child th.liste-zelle-fix {
    z-index: 6;
    background-color: #FFFFFF;
}

/* Fixierte Gruppen-Kopfzelle (obere Kopfzeile). */
.liste-tabelle thead .liste-gruppenkopf th.liste-zelle-fix {
    z-index: 6;
    background-color: var(--allit-hintergrund);
}

/* Vertikale Trennlinien INNERHALB des fixierten Bereichs.
   WICHTIG: box-shadow statt border - ein border an einer position:sticky-
   Zelle wird beim Scrollen vom Browser verschluckt und von :last-child-
   Regeln überschrieben. Ein box-shadow rendert zuverlässig und kann von
   keiner border-Regel berührt werden.
   "inset" legt die Linie an die Innenkante rechts. */
.liste-tabelle td.liste-zelle-fix,
.liste-tabelle th.liste-zelle-fix {
    box-shadow: inset -1px 0 0 0 var(--allit-rahmen);
}

/* Kräftige Kante an der LETZTEN fixierten Spalte - deutliche Grenze zum
   scrollenden Bereich. Zweifacher Schatten: die feine Innenlinie wie oben
   plus eine kräftige 2px-Kante. */
.liste-tabelle td.liste-zelle-fix-kante,
.liste-tabelle th.liste-zelle-fix-kante {
    box-shadow: inset -2px 0 0 0 var(--allit-text-leise);
}

/* Zebra/Hover der ganzen Zeile (gilt für die scrollenden Zellen). */
.liste-tabelle tbody tr {
    background-color: #FFFFFF;
}

.liste-tabelle tbody tr:nth-child(even) {
    background-color: var(--allit-raster-zebra);
}

.liste-tabelle tbody tr:hover {
    background-color: var(--allit-raster-hover);
}

/* ===========================================================================
   Datenraster: Spaltenfilter (Excel-artig) und ziehbare Spaltenbreite
   =========================================================================== */

/* Der Spaltenkopf trägt jetzt Sortier-Klick UND einen Filter-Knopf - daher
   wird sein Inhalt als Zeile mit Platz für den Filter-Knopf gesetzt. */
.liste-th-inhalt {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    /* Positionskontext für das Filter-Dropdown. Ein div trägt
       position:relative zuverlässig - anders als ein th/td. */
    position: relative;
}

.liste-th-text {
    flex: 1;
    cursor: pointer;
    user-select: none;
}

/* Filter-Knopf im Spaltenkopf - der kleine Trichter. */
.liste-filter-knopf {
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0 0.15rem;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    color: var(--allit-text-leise);
    opacity: 0.55;
}

.liste-filter-knopf:hover {
    opacity: 1;
    color: var(--allit-rot);
}

/* Aktiver Filter: Knopf hervorgehoben, damit man sieht, dass gefiltert wird. */
.liste-filter-knopf.liste-filter-aktiv {
    opacity: 1;
    color: var(--allit-rot);
}

/* --- Filter-Dropdown --- */
/* Sitzt unter der Kopfzelle (die ist Positionskontext). Es kann höher sein
   als eine Tabellenzeile - die Karte scrollt dann mit, sodass das Dropdown
   sichtbar bleibt und nicht abgeschnitten wird. */
.liste-filter-tafel {
    position: fixed;
    z-index: 100;
    width: 230px;
    background-color: #FFFFFF;
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    box-shadow: var(--allit-schatten);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Unsichtbare Fläche hinter dem Dropdown - Klick darauf schließt es. */
.liste-dropdown-faenger {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.liste-filter-suche {
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.5rem;
    border: none;
    border-bottom: 1px solid var(--allit-rahmen);
    font-size: 0.8rem;
    outline: none;
}

/* Schnellaktionen "Alle / Keine". */
.liste-filter-aktionen {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--allit-rahmen);
}

.liste-filter-aktion {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    color: var(--allit-rot);
    cursor: pointer;
    text-decoration: underline;
}

/* Die ankreuzbare Werteliste - scrollt, wenn viele Werte. */
.liste-filter-werte {
    max-height: 220px;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.liste-filter-wert {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.liste-filter-wert:hover {
    background-color: var(--allit-hintergrund);
}

.liste-filter-wert span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fußzeile des Dropdowns mit Übernehmen/Zurücksetzen. */
.liste-filter-fuss {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-top: 1px solid var(--allit-rahmen);
}

/* --- Ziehbarer Greifrand am Spaltenende --- */
/* Der Greifrand sitzt am rechten Rand jeder Kopfzelle. Damit man SIEHT, dass
   die Spalte ziehbar ist, ist er als dezente senkrechte Linie dauerhaft
   sichtbar und wird beim Drüberfahren kräftig (rot) und breiter. */
.liste-th-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    /* Dauerhaft sichtbare Greifkante: eine feine Linie am rechten Rand. */
    border-right: 2px solid var(--allit-rahmen);
    box-sizing: border-box;
    z-index: 3;
}

.liste-th-resize:hover {
    border-right-color: var(--allit-rot);
    background-color: var(--allit-rot-hell);
}

/* Während aktiv gezogen wird, die Kante kräftig markieren. */
.liste-th-resize-aktiv {
    border-right-color: var(--allit-rot);
    background-color: var(--allit-rot-hell);
}

/* Jede Kopfzelle braucht einen Positionskontext für Greifrand und Dropdown.
   position:sticky (fixierte Spalten) stellt diesen Kontext ebenso her wie
   position:relative - daher gilt die Regel für ALLE th, auch die fixierten. */
.liste-tabelle thead th {
    position: relative;
}

/* Die fixierten Spalten überschreiben das wieder mit sticky - sticky ist
   selbst ein Positionskontext, der Greifrand funktioniert trotzdem. */
.liste-tabelle thead th.liste-zelle-fix {
    position: sticky;
}

/* Wenn eine feste Breite gesetzt ist, soll die Zelle den Text abschneiden
   statt die Spalte zu sprengen. */
.liste-tabelle td,
.liste-tabelle th {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================================================================
   Datenraster: Sortier-Block im Filter-Dropdown + Tabellen-Ladeanzeige
   =========================================================================== */

/* Sortier-Einträge oben im Filter-Dropdown (wie in Excel). */
.liste-filter-sortierung {
    border-bottom: 1px solid var(--allit-rahmen);
}

.liste-filter-sort-eintrag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    background: none;
    border: none;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.8rem;
    color: var(--allit-text);
    cursor: pointer;
    text-align: left;
}

.liste-filter-sort-eintrag:hover {
    background-color: var(--allit-hintergrund);
}

/* Markierung der aktiven Sortierrichtung. */
.liste-filter-sort-eintrag.liste-filter-sort-aktiv {
    color: var(--allit-rot);
    font-weight: 700;
}

.liste-filter-sort-zeichen {
    width: 1em;
    text-align: center;
}

/* --- Ladeanzeige über der Tabelle --- */
/* Dezenter Streifen, der anzeigt, dass gerade Daten geladen werden. */
.liste-laedt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
    background-color: var(--allit-karte);
    border: 1px solid var(--allit-rahmen);
    border-left: 3px solid var(--allit-rot);
    border-radius: var(--allit-radius-klein);
    font-size: 0.82rem;
    color: var(--allit-text-leise);
}

/* Kleiner rotierender Ring als Lade-Symbol. */
.liste-laedt-ring {
    width: 14px;
    height: 14px;
    border: 2px solid var(--allit-rahmen);
    border-top-color: var(--allit-rot);
    border-radius: 50%;
    animation: liste-laedt-dreh 0.7s linear infinite;
}

@keyframes liste-laedt-dreh {
    to { transform: rotate(360deg); }
}

/* Während des Ladens die Tabelle leicht abblenden, damit klar ist, dass
   der Inhalt gerade aktualisiert wird. */
.liste-karte-laedt {
    opacity: 0.5;
    pointer-events: none;
}

/* ===========================================================================
   Detailbereich unter dem Datenraster (AD-Gruppen-Mitglieder, GPO-Details)
   =========================================================================== */

/* Bereich, der unter dem Raster die Details/Mitglieder einer gewählten
   Zeile zeigt. */
.detail-bereich {
    margin-top: 0.9rem;
    padding: 0.9rem 1rem;
    background-color: var(--allit-karte);
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
}

.detail-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}

.detail-titel {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--allit-text);
}

/* --- Detailseiten (z.B. Server-Eye-Gerät) ----------------------------- */
.detail-block {
    background-color: var(--allit-karte);
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    box-shadow: var(--allit-schatten-leicht);
}

.detail-titel {
    margin: 0 0 0.6rem 0;
    font-size: 1rem;
    font-weight: 700;
    cursor: default;
}

.detail-block details > summary.detail-titel,
.detail-roh > summary {
    cursor: pointer;
}

.detail-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 0.3rem 1.5rem;
    margin: 0;
}

.detail-liste > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--allit-rahmen);
}

.detail-liste dt {
    color: var(--allit-text-leise);
    font-size: 0.85rem;
}

.detail-liste dd {
    margin: 0;
    text-align: right;
    font-size: 0.85rem;
    word-break: break-word;
}

.detail-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--allit-raster-schrift);
    margin-top: 0.6rem;
}

.detail-tabelle th,
.detail-tabelle td {
    text-align: left;
    padding: var(--allit-raster-zeile-y) 0.6rem;
    border-bottom: 1px solid var(--allit-rahmen);
    white-space: nowrap;
}

.detail-tabelle th {
    color: var(--allit-text-leise);
    font-weight: 600;
}

.detail-roh {
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.5rem;
}

.detail-roh > summary {
    font-weight: 600;
}

/* --- Server-Eye-Kundenauswahl (Mehrfach) ------------------------------ */
.kunden-auswahl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 14rem;
    overflow: auto;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--allit-rahmen);
    border-radius: var(--allit-radius-klein);
    margin-bottom: 0.5rem;
}

/* --- Einträge-Zähler in der Datenraster-Werkzeugleiste ---------------- */
.liste-werkzeug-zaehler {
    margin-left: auto;
    align-self: center;
    color: var(--allit-text-leise);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* --- Quell-Link im Detail-Titel (z.B. zur Server-Eye-Detailseite) ----- */
.detail-quelllink {
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 0.5rem;
}

/* --- Start-Ladeanzeige während der Sitzungswiederherstellung --- */
.start-laden {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background-color: var(--allit-hintergrund);
}

.start-laden-text {
    color: var(--allit-text-leise);
    font-size: 1rem;
}

/* === Einstellungen / SMTP (global, nicht scoped - Hosted-Publish-tauglich) === */
.einstellungen-karte {
    max-width: 660px;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
}

.einstellungen-titel {
    margin: 0 0 0.3rem 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.hinweis {
    margin: 0.6rem 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--allit-radius-klein);
    font-size: 0.85rem;
}

.hinweis-ok {
    background: #E6F4EA;
    color: #1E7E34;
}

.hinweis-fehler {
    background: #FDE8E8;
    color: #B42318;
}