/* ── CSS-Variablen ───────────────────────────────────────── */
:root {
    --primary: #FFAA00;
    --primary-dark: #0D2238;
    --primary-light: #FFF5E6;
    --accent: #C8A951;
    --bg-base: #F4F6F9;
    --surface: #FFFFFF;
    --text-primary: #1A1A2E;
    --text-muted: #6B7280;
    --border: #E2E8F0;
    --success: #10B981;
    --danger: #EF4444;
    --placeholder: #d3d3d3;
    --rz-header-background-color: white;
    --rz-tabs-tab-selected-top-border-color: var(--primary);
    --rz-tabs-tab-hover-color: var(--primary);
    --rz-secondary: var(--primary);
    --rz-tabs-tab-color: #28363c;
    --rz-tabs-tab-selected-color: var(--primary);

    /* Markenfarbe #FFAA00 und daraus abgeleitete Abstufungen - EINE Akzentfarbe für Buttons, Auswahl, aktive Menüs.
       Auf Gelb weiße Schrift (Designentscheidung); auf hellen Gelbtönen (amber-50/100) dunkle Schrift. Text in Akzentfarbe auf Weiß: --sc-amber-800. */
    --sc-amber-50: #FFF9EC;     /* Hover-/Auswahlhintergrund, sehr hell */
    --sc-amber-100: #FFF0CC;    /* aktives Menü, ausgewählte Elemente */
    --sc-amber-200: #FFDD99;    /* Rahmen hell */
    --sc-amber-500: #FFAA00;    /* Markenfarbe: Primär-Buttons, Auswahl */
    --sc-amber-600: #E69900;    /* Hover von Primär-Buttons */
    --sc-amber-700: #B37700;    /* Icons, Rahmen auf Weiß */
    --sc-amber-800: #8A5A00;    /* Text/Links in Akzentfarbe auf Weiß (Kontrast ≥ 4,5:1) */
    --sc-on-amber: #FFFFFF;     /* Schrift auf Gelb (Buttons) */
    --sc-on-amber-light: #1A1A2E; /* Schrift auf hellem Gelb (aktives Menü, Auswahl) */

    /* Radzen-Theme (default-base) auf die Markenfarbe umstellen - ersetzt das Rot-Orange des Standard-Themes */
    --rz-primary: var(--sc-amber-500);
    --rz-primary-light: #FFBB33;
    --rz-primary-lighter: var(--sc-amber-100);
    --rz-primary-dark: var(--sc-amber-600);
    --rz-primary-darker: var(--sc-amber-700);
    --rz-on-primary: var(--sc-on-amber);
    --rz-on-primary-light: var(--sc-on-amber);
    --rz-on-primary-lighter: var(--sc-on-amber-light);
    --rz-on-primary-dark: var(--sc-on-amber);
    --rz-on-primary-darker: #FFFFFF;
}

/* FocusOnNavigate (Routes.razor) setzt nach jeder Navigation den Fokus auf die Überschrift (Screenreader) -
   ohne sichtbaren Fokusrahmen; Tastaturfokus auf Bedienelementen bleibt sichtbar */
h1:focus, h1:focus-visible {
    outline: none;
}


/* ── Basis-Layout ────────────────────────────────────────── */

/* Scrollen läuft im internen Radzen-Container (.rz-body) */
html, body {
    overflow: hidden;
    height: 100%;
}

/* Radzen Body transparent damit das Hintergrundbild durchscheint */
.rz-body {
    background-color: transparent !important;
    background-image: none !important;
    position: relative;
    z-index: 1;
}


/* ── Hintergrundbild (nur auf "/") ───────────────────────── */

/* Wird via MainLayout nur auf der Startseite gerendert.
   right: --scrollbar-width verhindert dass das Bild den Scrollbar überlagert.
   Der Wert wird per JS in OnAfterRenderAsync gemessen und gesetzt. */
.sc-bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--scrollbar-width, 0px);
    bottom: 0;
    background-image: url('/img/background.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    pointer-events: none;
}


/* ── Header ──────────────────────────────────────────────── */
.sc-app-header {
    background-color: var(--rz-header-background-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.sc-img-responsive {
    width: 100%;
    max-width: 200px;
    max-height: 45px;
    height: auto;
    object-fit: contain;
    transition: max-height 0.3s ease;
}

.sc-flag-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid grey;
    padding: 5px;
    object-fit: cover;
}

.sc-language-selector {
    --rz-profile-menu-toggle-button-color: transparent;
    --rz-profile-menu-border: none;
    background-color: white !important;
}

/* ── DriveID Console ─────────────────────────────────────── */
.sc-console-button {
    white-space: nowrap;
}

.sc-app-header-compact .sc-img-responsive {
    max-height: 32px;
}

.sc-console-user {
    font-size: 0.9rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .sc-console-user { display: none; }
}

.sc-console-login {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
}

.sc-console-login-card {
    width: 100%;
    max-width: 440px;
}

.sc-console-qr {
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rz-base-300);
    border-radius: 12px;
    background: white;
}

.sc-console-steps {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    align-self: stretch;
}

    .sc-console-steps li {
        margin-bottom: 0.25rem;
    }

/* Gruppen */
.sc-group-tile {
    height: 100%;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .sc-group-tile:hover {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

.sc-group-tile-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-group-tile-desc {
    color: var(--rz-text-secondary-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sc-group-tile-meta {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

    .sc-group-tile-meta .rzi {
        font-size: 1rem;
        vertical-align: text-bottom;
    }

.sc-group-label {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sc-group-you {
    margin-left: 0.35rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
}

.sc-group-pending {
    color: #b45309;
}

.sc-group-registered {
    color: #047857;
}

.sc-import-results {
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    max-height: 260px;
    overflow-y: auto;
}

.sc-import-summary {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sc-import-ok,
.sc-import-error {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.15rem 0;
}

.sc-import-ok {
    color: #047857;
}

.sc-import-error {
    color: #b91c1c;
}

/* Kartenimport: Ablagefläche "aus der Zwischenablage importieren" (GroupCardsTab.razor, js/console-clipboard.js) */
.sc-paste-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.25rem 1rem;
    border: 2px dashed var(--rz-base-400);
    border-radius: 10px;
    background: var(--rz-base-50);
    color: var(--rz-text-secondary-color);
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background-color 0.15s;
}

    .sc-paste-zone:hover,
    .sc-paste-zone:focus-visible {
        border-color: var(--rz-primary);
        background: var(--rz-primary-lighter);
        outline: none;
    }

    .sc-paste-zone .rzi {
        font-size: 2rem;
        color: var(--rz-primary);
    }

    .sc-paste-zone .title {
        font-weight: 600;
        color: var(--rz-text-color);
    }

    .sc-paste-zone .hint {
        font-size: 0.8rem;
    }

    .sc-paste-zone.busy {
        cursor: progress;
        opacity: 0.7;
    }

.sc-setting-hint {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

@media (max-width: 768px) {
    .sc-app-header {
        padding: 0.5rem 1rem !important;
    }

    .sc-img-responsive {
        max-width: 150px;
        max-height: 30px;
    }
}


/* ── Seitenstruktur (Home) ───────────────────────────────── */
.sc-section-white {
    background-color: white;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 50px;
    z-index: 0;
    font-size: 1.35rem;
    font-weight: 400;
    margin: -1px;
}

.sc-section-transparent {
    background-color: transparent !important;
    height: 85vh;
    position: relative;
}

.sc-angle-top {
    clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
    margin-top: -51px;
}

.sc-angle-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
    margin-bottom: -51px;
}


/* ── Feature-Liste ───────────────────────────────────────── */
.sc-feature-title {
    font-size: 1.75rem;
    font-weight: 600;
    padding: 20px 0;
}


/* ── Vorteile-Grid ───────────────────────────────────────── */
.sc-adv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    font-size: 1.35rem;
    font-weight: 400;
    --rz-card-padding: 2rem;
}

.sc-adv-card {
    display: flex !important;
    gap: 16px;
    align-items: flex-start;
}

.sc-adv-icon {
    font-size: 3rem;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.sc-adv-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--primary-dark);
}

.sc-adv-desc {
    font-size: 1.35rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .sc-adv-grid {
        grid-template-columns: 1fr;
    }
}


/* ── Footer ──────────────────────────────────────────────── */
.selcom-footer {
    font-size: 0.9rem;
    color: #666;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
    font-size: 1.35rem;
    font-weight: 600;
}

    .footer-links a {
        text-decoration: none;
        color: #666;
        transition: color 0.2s;
    }

        .footer-links a:hover {
            color: #000;
        }

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

.sc-orange-btn {
    /* Normalzustand */
    background-color: #FFAA00 !important;
    border-color: #FFAA00 !important;
    --rz-button-color: black !important;
    font-size: 1.35rem;
    padding: 15px 40px !important;
}

    .sc-orange-btn:hover {
        /* Hover-Zustand */
        background-color: #E69900 !important;
        border-color: #E69900 !important;
        --rz-button-color: white !important; 
    }

/* ── Schritt-Anleitung (StepGuide) ──────────────────────── */

/* Punkt-Rahmen und Hintergrund */
.sc-step-guide .rz-timeline-point {
    border-color: var(--primary) !important;
    background-color: white !important;
}

/* Icon-Farbe */
.sc-step-guide .sc-step-icon {
    color: var(--primary) !important;
}

/* Schritt-Titel (z.B. "Schritt 1") */
.sc-step-title {
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 1.35rem;
    margin-bottom: 10px !important;
}

/* Schritt-Beschreibung */
.sc-step-desc {
    color: var(--text-muted);
    font-size: 1.35rem;
    line-height: 1.55;
}

.sc-step-note {
    color: var(--text-muted);
    font-size: 1rem;
}

/* ── Paypage ────────────────────────────────── */
.demo-frame {
    background: #f8fafc;
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 28px;
    margin: 16px 0;
}

.pp-embedded {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-span {
    display: flex;
    gap: 10px;
}

    .pp-span > * {
        flex: 1;
    }

.sc-form-error {
    display: none;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 13px;
}
/* ── Tables ────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .data-table th {
        font-family: var(--font-mono);
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--text-muted);
        padding: 10px 14px;
        text-align: left;
        border-bottom: 2px solid var(--border);
        background: var(--bg-base);
    }

    .data-table td {
        padding: 5px 14px;
        border-bottom: 1px solid var(--border-subtle);
        color: var(--text-secondary);
        vertical-align: middle;
    }

    .data-table tr:last-child td {
        border-bottom: none;
    }

    .data-table tr:hover td {
        background: var(--bg-hover);
    }

    .data-table .mono {
        font-family: var(--font-mono);
        font-size: 1rem;
    }

.inline-svg {
    height: 1em;
    width: auto;
    vertical-align: middle;
    display: inline-block;
    background-color: #ffaa00;
    border-radius: 4px;
    margin: 0 3px
}

.sc-datagrid .rz-grid-table th .rz-column-title {
    font-size: 1rem;
}

/* Ändert die Schriftgröße der Tabellenzellen */
.sc-datagrid .rz-grid-table td .rz-cell-data {
    font-size: 1rem;
}

.sc-tab-font .rz-tabview-title {
    font-size: 1rem !important;
}

.sc-tab-font .rz-tabview-icon {
    font-size: 1rem !important;
}

.rz-dialog-title, .rz-dialog-side-title {
    font-weight: 500;
}

.sc-responsive-side-dialog {
    width: 830px !important;
    max-width: 90vw !important; /* Verhindert das Herausragen auf Mobilgeräten */
    min-width: 320px !important;
}

.sc-hint-box {
    background: var(--bg-base);
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1.1rem;
    color: #92400e;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.sc-hint-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}


.sc-dialog-to-foreground {
    z-index: 2000 !important; /* Standard Radzen SideDialogs liegen meist bei ~1000-1100 */
}

/* ── Zuordnung (GroupAssignmentTab) ─────────────────────── */
.sc-asg-inactive {
    background: white;
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 640px;
}

    .sc-asg-inactive h3 { margin: 0 0 0.5rem 0; font-size: 1.15rem; }
    .sc-asg-inactive p { margin: 0 0 0.75rem 0; color: var(--rz-text-secondary-color); }
    .sc-asg-inactive ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
    .sc-asg-inactive li::before { display: inline-block; width: 1.4rem; font-weight: 700; }
    .sc-asg-inactive li.ok::before { content: "✓"; color: #047857; }
    .sc-asg-inactive li.open::before { content: "○"; color: #b45309; }

.sc-asg-wrap {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sc-asg-toolbar {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.sc-asg-toggles, .sc-asg-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

    .sc-asg-toggles label {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        background: white;
        border: 1px solid var(--rz-base-300);
        border-radius: 999px;
        padding: 0.25rem 0.75rem;
        cursor: pointer;
    }

    .sc-asg-legend > span { display: flex; align-items: center; gap: 0.25rem; color: var(--rz-text-secondary-color); }

.sc-asg-toggles-label { color: var(--rz-text-secondary-color); }
.sc-asg-search { width: 180px; }

/* Säulen füllen die Höhe; jede Säule scrollt für sich, Kopf (Titel + Suche) bleibt stehen */
.sc-asg-columns {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    overflow-x: auto;
}

.sc-asg-col {
    flex: 1 1 0;
    min-width: 200px;
    background: #e9edf2;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sc-asg-col-members { flex: 2 1 0; min-width: 320px; }

    .sc-asg-col h3 {
        margin: 0;
        font-size: 0.92rem;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .sc-asg-col h3 span { font-weight: 400; color: var(--rz-text-secondary-color); }

/* Standardadresse oben in der Mitglieder-Säule (Ablage einer Adresse = als Standard festlegen) */
.sc-asg-defaultaddr {
    flex: none;
    margin: 0 0.5rem 0.4rem 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    font-size: 0.82rem;
    background: var(--sc-amber-50);
    border: 1px solid var(--sc-amber-200);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

    .sc-asg-defaultaddr .rzi { font-size: 1rem; color: var(--sc-amber-700); }
    .sc-asg-defaultaddr .grow { flex: 1; min-width: 0; }
    .sc-asg-defaultaddr .hint { font-size: 0.75rem; color: var(--rz-text-secondary-color); }

.sc-asg-colbody {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0.5rem 0.6rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    scrollbar-width: thin;
}

.sc-asg-member {
    background: white;
    border: 2px solid #94a3b8; /* kräftiger als die Pakete: Mitglied/Geräte klar abgegrenzt */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    border-radius: 8px;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .sc-asg-member.pending { background: #f8fafc; border-style: dashed; }

.sc-asg-member-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.sc-asg-member-name { font-weight: 700; }
.sc-asg-sub { font-size: 0.78rem; color: var(--rz-text-secondary-color); }
.sc-asg-device { overflow-wrap: anywhere; }
/* Gerät wartet auf Aktualisierung (DeviceSyncBadge): Uhr vor der Geräte-ID */
.sc-sync-pending { font-size: 1rem; color: #b45309; vertical-align: middle; margin-right: 4px; cursor: help; }
/* Geräte-ID (Guid wie in der App) - Mitgliederliste */
.sc-device-id { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.78rem; overflow-wrap: anywhere; }
.sc-asg-pending { font-size: 0.78rem; color: #b45309; font-weight: 600; }
.sc-asg-badge { font-size: 0.75rem; background: #f1f5f9; border-radius: 4px; padding: 0.1rem 0.5rem; white-space: nowrap; }

.sc-asg-address, .sc-asg-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.sc-asg-address { background: #f8fafc; border: 1px solid var(--rz-base-300); border-radius: 6px; padding: 0.2rem 0.4rem; }
    .sc-asg-address strong { color: #92400e; }

.sc-asg-row .rzi, .sc-asg-address .rzi { font-size: 1rem; color: var(--rz-text-secondary-color); }
.sc-asg-row .grow, .sc-asg-address .grow, .sc-asg-package-head .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-asg-row .mono { font-family: monospace; }

.sc-asg-package, .sc-asg-item {
    background: white;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    padding: 0.3rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .sc-asg-member .sc-asg-package { border-color: var(--rz-base-300); }
    .sc-asg-package.changed { border-color: #059669; background: #f0fdf4; box-shadow: inset 3px 0 0 #059669; }

.sc-asg-row.sub { padding-left: 1.1rem; }
.sc-asg-row.anchor .grow { font-weight: 600; }

.sc-asg-ico-changed { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #f0fdf4; box-shadow: inset 0 0 0 2px #059669; }

.sc-asg-colhead { flex: none; display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.5rem 0.4rem 0.75rem; }
.sc-asg-colsearch {
    width: 7.5rem;
    transition: width 0.15s;
    box-sizing: border-box;
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font: inherit;
    font-size: 0.82rem;
    background: white;
}

.sc-asg-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
    .sc-asg-totals > div { border: 1px solid var(--rz-base-300); border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; align-items: center; }
    .sc-asg-totals strong { font-size: 1.3rem; }
    .sc-asg-totals span { font-size: 0.75rem; color: var(--rz-text-secondary-color); text-align: center; }
    .sc-asg-totals .add strong { color: #047857; }
    .sc-asg-totals .remove strong { color: #b91c1c; }

.sc-asg-summary { max-height: 240px; overflow-y: auto; }
.sc-asg-summary-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--rz-base-300); font-size: 0.88rem; }
    .sc-asg-summary-row:last-child { border-bottom: 0; }
    .sc-asg-summary-row.pending { background: #fffbeb; }
    .sc-asg-summary-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sc-asg-summary-row .counts { display: flex; gap: 0.5rem; font-weight: 600; }
    .sc-asg-summary-row .add { color: #047857; }
    .sc-asg-summary-row .remove { color: #b91c1c; }
    .sc-asg-summary-row .devices { font-size: 0.78rem; color: var(--rz-text-secondary-color); white-space: nowrap; }
    .sc-asg-package.open { border-style: dashed; border-color: #b45309; }

.sc-asg-package-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; color: #047857; min-height: 1.4rem; }
.sc-asg-open-hint { font-size: 0.78rem; font-weight: 600; color: #78350f; background: #fef3c7; border-radius: 4px; padding: 0.25rem 0.4rem; }

.sc-asg-usage { font-size: 0.75rem; color: var(--rz-text-secondary-color); padding-left: 1.6rem; }
    .sc-asg-usage.unused { color: #b45309; font-weight: 600; }

.sc-asg-grip {
    width: 14px;
    height: 20px;
    flex: 0 0 14px;
    cursor: grab;
    background-image: radial-gradient(#94a3b8 1.6px, transparent 1.7px);
    background-size: 6px 6px;
    background-position: 1px 2px;
}

    .sc-asg-grip.small { height: 16px; }

.sc-asg-ico-grip {
    display: inline-block;
    width: 12px;
    height: 16px;
    background-image: radial-gradient(#5b6472 1.5px, transparent 1.6px);
    background-size: 6px 6px;
}

.sc-asg-copy { cursor: copy; display: inline-flex; padding: 2px; border-radius: 4px; }
    .sc-asg-copy:hover { background: #e2e8f0; }
    .sc-asg-copy .rzi { font-size: 15px; }

.sc-asg-x { border: 0; background: transparent; cursor: pointer; font-size: 1rem; color: var(--rz-text-secondary-color); width: 24px; height: 24px; border-radius: 4px; }
    .sc-asg-x:hover { background: #fee2e2; color: #b91c1c; }

.sc-asg-star { border: 0; background: transparent; cursor: pointer; font-size: 1.05rem; color: #cbd5e1; width: 28px; height: 28px; }
    .sc-asg-star.on { color: var(--sc-amber-500); }
    .sc-asg-star:disabled { cursor: default; }

.sc-asg-dropzone { border: 1.5px dashed var(--rz-base-300); border-radius: 6px; padding: 0.6rem; text-align: center; font-size: 0.8rem; color: var(--rz-text-secondary-color); }
.sc-asg-hint { margin: 0.25rem; font-size: 0.78rem; color: var(--rz-text-secondary-color); }

/* Ablageziel während des Ziehens (console-dnd.js) */
.sc-dnd-active [data-drop].sc-drop-hover { outline: 2px dashed var(--sc-amber-700); outline-offset: 1px; background-color: var(--sc-amber-50); }

.sc-asg-colsearch:focus { width: 100%; outline: 2px solid var(--sc-amber-500); outline-offset: -1px; }
.sc-asg-col-members .sc-asg-colsearch { width: 11rem; }

/* Änderungsleiste: fest am unteren Rand der Zuordnung, nur bei ungespeicherten Änderungen */
.sc-asg-bar {
    flex: none;
    background: #1e293b;
    color: white;
    border-radius: 10px;
    padding: 0.45rem 0.6rem 0.45rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .12);
}

    .sc-asg-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc-amber-500); flex: none; }
    .sc-asg-bar .text { flex: 1; min-width: 0; }
    .sc-asg-bar .shortcut { font-size: 0.75rem; color: #94a3b8; }
    .sc-asg-bar .discard { color: white; border-color: #64748b; }

    .sc-asg-bar > div { display: flex; gap: 0.5rem; }
    .sc-asg-bar .warn { color: #fcd34d; }

.sc-asg-summary { border: 1px solid var(--rz-base-300); border-radius: 8px; overflow: hidden; }
.sc-asg-summary-member { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--rz-base-300); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.25rem; }
    .sc-asg-summary-member:last-child { border-bottom: 0; }
    .sc-asg-summary-member.pending { background: #fffbeb; }
    .sc-asg-summary-member .add { color: #047857; }
    .sc-asg-summary-member .remove { color: #b91c1c; }
    .sc-asg-summary-member .sign { display: inline-block; width: 1rem; font-weight: 700; }
.sc-asg-summary-head { display: flex; justify-content: space-between; gap: 0.5rem; }
    .sc-asg-summary-head span { font-size: 0.8rem; color: var(--rz-text-secondary-color); }
.sc-asg-summary-hints { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; color: var(--rz-text-secondary-color); }
    .sc-asg-summary-hints .warn { color: #b45309; font-weight: 600; }

/* Import aus anderer Gruppe */
.sc-import-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 50vh; overflow-y: auto; border: 1px solid var(--rz-base-300); border-radius: 8px; padding: 0.5rem 0.75rem; }
    .sc-import-list label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
    .sc-import-list label.present { color: var(--rz-text-secondary-color); }
    .sc-import-list em { font-size: 0.78rem; }
.sc-import-all { font-weight: 600; border-bottom: 1px solid var(--rz-base-300); padding-bottom: 0.35rem; }

/* ── Gruppenseite (GroupDetail): Kopfzeile, Seitenleiste, Inhalt ───────── */
/* Füllt das Fenster unter dem App-Kopf (--sc-header-h setzt js/console-ui.js) */
.sc-gd {
    height: calc(100dvh - var(--sc-header-h, 64px));
    display: flex;
    flex-direction: column;
    background: #f4f5f7;
}

.sc-gd-head {
    flex: none;
    min-height: 52px;
    box-sizing: border-box;
    background: white;
    border-bottom: 1px solid var(--rz-base-300);
    padding: 0.35rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
}

.sc-gd-back { display: inline-flex; align-items: center; gap: 0.15rem; text-decoration: none; white-space: nowrap; font-size: 0.9rem; font-weight: 600;
               color: var(--sc-amber-800); border-radius: 6px; padding: 0.2rem 0.5rem 0.2rem 0.2rem; }
    .sc-gd-back:hover { background: var(--sc-amber-50); color: var(--sc-amber-800); }
    .sc-gd-back .rzi { font-size: 1.15rem; }
.sc-gd-sep { width: 1px; height: 24px; background: var(--rz-base-300); }
.sc-gd-name { margin: 0; font-size: 1.15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
.sc-gd-meta { color: var(--rz-text-secondary-color); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sc-gd-spacer { flex: 1; }

/* Issuer-Logo (Kopfzeile der Gruppe, Gruppenkacheln) */
.sc-issuer-logo { height: 22px; width: auto; max-width: 90px; object-fit: contain; vertical-align: middle; }
.sc-group-tile-issuer { display: inline-flex; align-items: center; gap: 0.35rem; }

.sc-gd-edit {
    flex: none;
    background: white;
    border-bottom: 1px solid var(--rz-base-300);
    padding: 0.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sc-gd-body { flex: 1; min-height: 0; display: flex; }

.sc-gd-rail {
    flex: none;
    width: 196px;
    box-sizing: border-box;
    background: white;
    border-right: 1px solid var(--rz-base-300);
    padding: 0.6rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.sc-gd-rail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 40px;
    padding: 0 0.6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    color: #475569;
    cursor: pointer;
    text-align: left;
}

    .sc-gd-rail-item:hover { background: #eef2f7; }
    .sc-gd-rail-item.active { background: var(--sc-amber-100); color: var(--sc-on-amber-light); font-weight: 700; }
        .sc-gd-rail-item.active .rzi { color: var(--sc-amber-700); }
    .sc-gd-rail-item .rzi { font-size: 1.25rem; flex: none; }
    .sc-gd-rail-item .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sc-gd-rail-item .count { font-size: 0.75rem; color: var(--rz-text-secondary-color); font-weight: 400; }

.sc-gd-rail-spacer { flex: 1; }
.sc-gd-rail-toggle { color: var(--rz-text-secondary-color); }

/* Eingeklappt: nur Icons, Zähler als kleines Badge */
.sc-gd-rail.collapsed { width: 60px; }
    .sc-gd-rail.collapsed .label { display: none; }
    .sc-gd-rail.collapsed .count {
        position: absolute; right: 2px; top: 3px; font-size: 10px; line-height: 14px; min-width: 14px; padding: 0 3px;
        box-sizing: border-box; text-align: center; border-radius: 7px; background: #e2e8f0; color: #334155;
    }

.sc-gd-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1rem 1rem 1rem;
    container-type: inline-size;
}

    .sc-gd-content.fill { overflow: hidden; padding: 0.6rem 0.9rem 0.75rem 0.9rem; }

/* Schmale Arbeitsfläche: Säulen-Schalter nur Icons, Legende nur als ?-Symbol */
.sc-asg-legend-help { display: none !important; font-size: 1.2rem; color: var(--rz-text-secondary-color); cursor: help; }

@container (max-width: 1000px) {
    .sc-asg-colbar .rz-button-text { display: none; }
    .sc-asg-legend > span { display: none; }
    .sc-asg-legend-help { display: inline-block !important; }
}

/* Kleines Fenster: Seitenleiste automatisch eingeklappt */
@media (max-width: 1100px) {
    .sc-gd-rail { width: 60px; }
        .sc-gd-rail .label { display: none; }
        .sc-gd-rail .count {
            position: absolute; right: 2px; top: 3px; font-size: 10px; line-height: 14px; min-width: 14px; padding: 0 3px;
            box-sizing: border-box; text-align: center; border-radius: 7px; background: #e2e8f0; color: #334155;
        }
        .sc-gd-rail-toggle { display: none; }
    .sc-gd-meta { display: none; }
}

/* Telefon: normale Seite (Säulen untereinander, Seite scrollt), Seitenleiste als Leiste oben */
@media (max-width: 768px) {
    .sc-gd { height: auto; }
    .sc-gd-body { flex-direction: column; }
    .sc-gd-rail { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rz-base-300); padding: 0.3rem; }
    .sc-gd-rail-spacer { display: none; }
    .sc-gd-content, .sc-gd-content.fill { overflow: visible; }
    .sc-asg-wrap { height: auto; }
    .sc-asg-columns { flex-wrap: wrap; overflow: visible; }
    .sc-asg-col, .sc-asg-col-members { flex: 1 1 100%; min-width: 0; max-height: 70vh; }
}

/* Hinweise (RadzenAlert Info, hell) in der Console im Markenstil: helles Gelb, dunkle Schrift (statt Blau) */
.rz-alert.rz-info.rz-shade-lighter {
    background-color: var(--sc-amber-100);
    color: var(--sc-on-amber-light);
}
.rz-alert.rz-info.rz-shade-lighter .rz-alert-icon,
.rz-alert.rz-info.rz-shade-lighter .rz-alert-title {
    color: var(--sc-on-amber-light);
}