/* /Components/Controls/RichTextEditor.razor.rz.scp.css */
.rich-text-editor[b-en7bwn48dx] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    overflow: visible;
}

.rich-text-editor[b-en7bwn48dx]  .ql-toolbar {
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-light);
}

.rich-text-editor[b-en7bwn48dx]  .ql-container {
    border: none;
    font-size: 1rem;
    overflow: hidden;
}

.rich-text-editor[b-en7bwn48dx]  .ql-editor {
    min-height: var(--editor-height);
    height: auto;
    overflow-y: auto;
    overflow-wrap: break-word;
    word-break: break-word;
}

.rich-text-editor[b-en7bwn48dx]  .ql-tooltip {
    z-index: 1050;
}

/* HTML source toggle button in Quill toolbar */
.rich-text-editor[b-en7bwn48dx]  .html-source-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.1875rem;
    display: flex;
    align-items: center;
    color: var(--bs-body-color);
    border-radius: 0.1875rem;
}

.rich-text-editor[b-en7bwn48dx]  .html-source-btn:hover {
    background-color: var(--bs-secondary-bg);
}

.rich-text-editor[b-en7bwn48dx]  .html-source-btn span {
    font-size: 1.125rem;
}

/* HTML source view */
.html-source-view[b-en7bwn48dx] {
    display: flex;
    flex-direction: column;
}

.html-source-toolbar[b-en7bwn48dx] {
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-light);
    padding: 0.5rem;
}

.html-source-toolbar .html-source-btn.active[b-en7bwn48dx] {
    color: var(--bs-primary);
}

.html-source-textarea[b-en7bwn48dx] {
    min-height: var(--editor-height);
    width: 100%;
    border: none;
    padding: 0.75rem;
    font-family: monospace;
    font-size: 0.875rem;
    resize: vertical;
    outline: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The shell is exactly as tall as what the visitor can see.

   100vh is the *large* viewport height: on a tablet or phone it includes the space
   the browser's address bar occupies while it is shown. The shell would then be
   taller than the visible area until the bar retracts on scroll. 100dvh follows the
   viewport as the bar comes and goes; 100vh stays as the fallback for browsers
   without it. */
.page[b-ka1xldgpp6] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* The bar carries the brand, the way into the navigator and the way out of the
   application. Nothing else: no module links, no account icon, no language pill. All
   of that lives in the panel, which is the same navigation at every width. */
.top-row[b-ka1xldgpp6] {
    background-color: var(--color-topbar);
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-right: 0.75rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 2;
}

.topbar-brand[b-ka1xldgpp6] {
    padding-left: 1rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--white);
    cursor: pointer;
}

a.topbar-brand:hover[b-ka1xldgpp6] {
    opacity: 0.85;
}

.topbar-spacer[b-ka1xldgpp6] {
    flex: 1;
}

.topbar-impersonation[b-ka1xldgpp6] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Where the bar is wide enough the trigger says what it does and names its
   shortcut. A hamburger beside it would only do the same thing again, so there is
   none — below the desktop width the two swap places. */
.topbar-search[b-ka1xldgpp6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 23rem;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: var(--fs-text-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-out);
}

.topbar-search:hover[b-ka1xldgpp6] {
    background: rgba(255, 255, 255, 0.24);
}

.topbar-search .material-symbols-outlined[b-ka1xldgpp6] {
    font-size: var(--fs-text-lg);
}

.topbar-search-label[b-ka1xldgpp6] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-search-chip[b-ka1xldgpp6] {
    flex-shrink: 0;
    padding: 0.125rem 0.4375rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-xs);
    font-size: var(--fs-text-xs);
    font-weight: 600;
    color: var(--white);
}

.topbar-hamburger[b-ka1xldgpp6] {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    cursor: pointer;
}

.topbar-hamburger:hover[b-ka1xldgpp6] {
    background: rgba(255, 255, 255, 0.24);
}

.topbar-hamburger .material-symbols-outlined[b-ka1xldgpp6] {
    font-size: var(--fs-text-xl);
}

.page-body[b-ka1xldgpp6] {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

main[b-ka1xldgpp6] {
    flex: 1;
    background-color: var(--app-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

article[b-ka1xldgpp6] {
    padding-top: 1rem;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* ============================================================================
   Below the desktop width there is no room for a 23rem field beside the brand,
   and the module bar's entries would push the content off the screen. Both give
   way to the hamburger, which opens the same panel and reaches the same depth.
   ========================================================================== */
@media (max-width: 991.98px) {
    .topbar-search[b-ka1xldgpp6] {
        display: none;
    }

    .topbar-hamburger[b-ka1xldgpp6] {
        display: flex;
    }

    .page[b-ka1xldgpp6]  .modulebar {
        display: none;
    }

    /* Die Ebene, auf der man steht, steht ab der Desktop-Breite als Spalte neben
       dem Inhalt — das macht .nav-rail-sidebar selbst. Hier darunter legt sie sich
       als Reihe darueber, und zwar an die Stelle, an der sonst die Modulleiste war:
       das Blaettern zwischen den Reitern ist genau das, wofuer es auf einem
       schmalen Bildschirm sonst keinen kurzen Weg gibt. */
    .page-body[b-ka1xldgpp6] {
        flex-direction: column;
    }

    .page-body[b-ka1xldgpp6]  .nav-rail-sidebar {
        flex-shrink: 0;
        height: 3rem;
        padding: 0 0.75rem;
        background: var(--surface);
        border-bottom: 0.0625rem solid var(--sidebar-border);
    }
}

@media (max-width: 640.98px) {
    .topbar-brand[b-ka1xldgpp6] {
        padding-left: 0.5rem;
    }

    .top-row[b-ka1xldgpp6] {
        padding-right: 0.375rem;
    }
}

/* A phone lying on its side has 390px of height for everything. The bar gives up
   what it can so the content keeps the rest. */
@media (max-height: 480px) {
    .top-row[b-ka1xldgpp6] {
        height: 3rem;
    }
}

#blazor-error-ui[b-ka1xldgpp6] {
    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[b-ka1xldgpp6] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-bhd97uxun9],
.components-reconnect-repeated-attempt-visible[b-bhd97uxun9],
.components-reconnect-failed-visible[b-bhd97uxun9],
.components-pause-visible[b-bhd97uxun9],
.components-resume-failed-visible[b-bhd97uxun9],
.components-rejoining-animation[b-bhd97uxun9] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-bhd97uxun9],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-bhd97uxun9],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-bhd97uxun9],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-bhd97uxun9],
#components-reconnect-modal.components-reconnect-retrying[b-bhd97uxun9],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-bhd97uxun9],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-bhd97uxun9],
#components-reconnect-modal.components-reconnect-failed[b-bhd97uxun9],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-bhd97uxun9] {
    display: block;
}


#components-reconnect-modal[b-bhd97uxun9] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bhd97uxun9 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-bhd97uxun9 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-bhd97uxun9 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-bhd97uxun9]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-bhd97uxun9 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-bhd97uxun9 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-bhd97uxun9 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-bhd97uxun9 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-bhd97uxun9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-bhd97uxun9] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-bhd97uxun9] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-bhd97uxun9] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-bhd97uxun9] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-bhd97uxun9] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-bhd97uxun9] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-bhd97uxun9 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-bhd97uxun9] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-bhd97uxun9 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Administration/Customers/Components/RegistrationCard.razor.rz.scp.css */
.method-icon[b-4myrrodg4v] {
    font-size: 2.5rem;
}

/* --- Zeilenform (Ersteinrichtung) ----------------------------------------- */

/* Im Assistenten steht jedes Verfahren als eigene Zeile: Sinnbild links, Name und
   Erlaeuterung daneben, Zustand rechts. So bleibt der Text in ganzen Zeilen lesbar,
   statt in vier schmale Kacheln zu zerbrechen. */
.registration-methods[b-4myrrodg4v] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.registration-method[b-4myrrodg4v] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icon text state";
    align-items: center;
    gap: 0.25rem 1rem;
    text-align: left;
}

.registration-method .method-icon[b-4myrrodg4v] {
    grid-area: icon;
    font-size: 1.75rem;
}

.registration-method-text[b-4myrrodg4v] {
    grid-area: text;
    min-width: 0;
}

.registration-method-state[b-4myrrodg4v] {
    grid-area: state;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    text-align: right;
}

/* Auf dem Handy bleibt keine Spalte fuer den Zustand uebrig, ohne die Erlaeuterung
   auf fuenf Zeilen zu zerreissen. Sinnbild und Zustand teilen sich dort die erste
   Zeile, Name und Erlaeuterung stehen darunter ueber die volle Breite. */
@media (max-width: 575.98px) {
    .registration-method[b-4myrrodg4v] {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon state"
            "text text";
    }
}

.card.cursor-pointer:hover[b-4myrrodg4v] {
    border-color: var(--bs-primary);
    background-color: var(--selected-bg);
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.token-list[b-4myrrodg4v] {
    max-height: 10rem;
    overflow-y: auto;
}

.emails-modal-content[b-4myrrodg4v],
.codes-modal-content[b-4myrrodg4v] {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.codes-list[b-4myrrodg4v] {
    max-height: 20rem;
    overflow-y: auto;
}

.code-badge[b-4myrrodg4v] {
    font-size: 0.75rem;
    border: 0;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.code-badge:hover[b-4myrrodg4v] {
    background-color: var(--bs-primary) !important;
}

.code-badge-copied[b-4myrrodg4v],
.code-badge-copied:hover[b-4myrrodg4v] {
    background-color: var(--bs-success) !important;
}
/* /Components/Pages/Administration/LocalizedTexts/AutoTranslateModal.razor.rz.scp.css */
.progress-list-container[b-bgw9siwpfl] {
    max-height: 20rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.5rem;
    background-color: var(--bs-body-bg);
}

.progress-list-item[b-bgw9siwpfl] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-family: var(--bs-font-monospace);
}

.progress-list-item:first-child[b-bgw9siwpfl] {
    background-color: var(--bs-light);
}

.progress-list-item.skipped[b-bgw9siwpfl] {
    opacity: 0.6;
}

.progress-list-key[b-bgw9siwpfl] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-list-item .material-symbols-outlined[b-bgw9siwpfl] {
    font-size: 1rem;
}
/* /Components/Pages/Administration/LocalizedTexts/TreeNode.razor.rz.scp.css */
.tv-node[b-2ec681lpj9] {
    margin-bottom: 0.25rem;
}

.caption[b-2ec681lpj9] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out;
}

.caption:hover[b-2ec681lpj9] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.caption.folder[b-2ec681lpj9] {
    font-weight: 500;
}

.caption.key[b-2ec681lpj9] {
    color: var(--bs-secondary);
}

.caption.key.is-selected[b-2ec681lpj9] {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

.caption.key.is-selected:hover[b-2ec681lpj9] {
    background-color: var(--bs-primary);
}
/* /Components/Pages/Administration/Pricing/Components/PlanPriceTable.razor.rz.scp.css */
/* Ein Preis ist vierstellig, das Feld muss nicht breiter sein. */
.price-input[b-loi9w3jodl] {
    width: 8rem;
}

.currency-flag[b-loi9w3jodl] {
    width: 1.5rem;
    height: auto;
    border-radius: 0.125rem;
}

.plan-price-notes[b-loi9w3jodl] {
    font-size: var(--fs-text-sm);
}

.plan-price-notes .material-symbols-outlined[b-loi9w3jodl] {
    font-size: var(--fs-text-lg);
}
/* /Components/Pages/Administration/Pricing/Index.razor.rz.scp.css */
/* Ein Kreis und kein Ei: die Grundhoehe eines Knopfes richtet sich nach einer
   Textzeile und ist groesser als die gesetzte Breite, also muss sie hier mit. */
.btn-circle[b-t1g0irdhlw] {
    width: 2.2rem;
    height: 2.2rem;
    min-width: 2.2rem;
    min-height: 2.2rem;
    flex: 0 0 auto;
    padding: 0;
}

.btn-circle .material-symbols-outlined[b-t1g0irdhlw] {
    font-size: 1.2rem;
}

/* Der Preis steht rechts und bricht nicht um: eine Zahl, die in zwei Zeilen steht,
   liest sich als zwei Zahlen. */
th.col-price[b-t1g0irdhlw],
td.col-price[b-t1g0irdhlw] {
    white-space: nowrap;
    width: 10rem;
}

/* Die Knoepfe am Zeilenende brauchen genau ihre eigene Breite. */
th.col-actions[b-t1g0irdhlw],
td.col-actions[b-t1g0irdhlw] {
    width: 4rem;
}

/* Wen der Tarif bedient, steht unter der Zielgruppe und ist eine Erlaeuterung,
   keine zweite Angabe. */
.plan-subline[b-t1g0irdhlw] {
    font-size: var(--fs-text-sm);
}

/* Die beiden Kalender der Buchbarkeit stehen in einer Zeile und brauchen nur Platz
   fuer ein Datum — ein breites Feld verspraeche eine Eingabe, die es nicht gibt. */
.plan-bookable .form-control[b-t1g0irdhlw] {
    width: 9rem;
}

/* Die Flagge eines Landes mit eigenem Preis, im Kopf seiner Karte. */
.country-flag[b-t1g0irdhlw] {
    width: 1.5rem;
    height: auto;
    border-radius: 0.125rem;
}

/* Eine Kontenzahl ist vierstellig, das Feld muss nicht breiter sein. */
.step-input[b-t1g0irdhlw] {
    width: 8rem;
}
/* /Components/Pages/Administration/SchoolDevelopment/Components/StructuralTraitEditor.razor.rz.scp.css */
.parent-dropdown[b-sasv0y24f6] {
    position: relative;
}

.parent-dropdown-overlay[b-sasv0y24f6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.parent-dropdown-menu[b-sasv0y24f6] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 11;
    background-color: white;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    max-height: 38vh;
    overflow-y: auto;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.parent-dropdown-item[b-sasv0y24f6] {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.15s;
}

.parent-dropdown-item:last-child[b-sasv0y24f6] {
    border-bottom: none;
}

.parent-dropdown-item:hover[b-sasv0y24f6] {
    background-color: var(--bs-light);
}

.parent-breadcrumb[b-sasv0y24f6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.1rem;
}

.parent-breadcrumb-separator[b-sasv0y24f6] {
    font-size: 0.9rem;
    color: var(--bs-secondary);
}

.parent-breadcrumb-ancestor[b-sasv0y24f6] {
    color: var(--bs-secondary);
}

.parent-breadcrumb-current[b-sasv0y24f6] {
    font-weight: 600;
}
/* /Components/Pages/Administration/SchoolDevelopment/Components/TopicEditor.razor.rz.scp.css */
.parent-dropdown[b-a5w4yq3cjy] {
    position: relative;
}

.parent-dropdown-overlay[b-a5w4yq3cjy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.parent-dropdown-menu[b-a5w4yq3cjy] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 11;
    background-color: white;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    max-height: 38vh;
    overflow-y: auto;
    box-shadow: 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

.parent-dropdown-item[b-a5w4yq3cjy] {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.15s;
}

.parent-dropdown-item:last-child[b-a5w4yq3cjy] {
    border-bottom: none;
}

.parent-dropdown-item:hover[b-a5w4yq3cjy] {
    background-color: var(--bs-light);
}

.parent-breadcrumb[b-a5w4yq3cjy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.1rem;
}

.parent-breadcrumb-separator[b-a5w4yq3cjy] {
    font-size: 0.9rem;
    color: var(--bs-secondary);
}

.parent-breadcrumb-ancestor[b-a5w4yq3cjy] {
    color: var(--bs-secondary);
}

.parent-breadcrumb-current[b-a5w4yq3cjy] {
    font-weight: 600;
}
/* /Components/Pages/Administration/SchoolDevelopment/Index.razor.rz.scp.css */
.topics-overview-col[b-xt755qco3s] {
    max-height: calc(100vh - 17rem);
    display: flex;
    flex-direction: column;
    padding-top: 0.2rem;
}

.topics-details-col[b-xt755qco3s] {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}
/* /Components/Pages/Administration/SystemSettings/Components/Ai/AiConfiguration.razor.rz.scp.css */
/* The list of application areas: one entry is a button, not a link — the page does not
   change, only the right-hand column does. */
.ai-usage-list[b-bpua798bl7] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem;
    /* The card caps the height, the list carries the scrollbar. `min-height: 0` is what
       lets it shrink below its content inside the flex column — without it the card would
       simply grow and the cap would do nothing. */
    overflow-y: auto;
    min-height: 0;
}

/* Stacked — a narrow window, or simply a zoomed-in browser, where the CSS viewport is a
   fraction of the screen — the page scrolls as usual, and the list merely caps itself at a
   screen height and sticks while the detail below it goes past. */
.ai-usage-card[b-bpua798bl7] {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0.5rem;
    max-height: calc(100vh - 5rem);
}

/* Side by side the page itself no longer scrolls: the surrounding box ends at the lower edge of
   the window (see `.system-tab-fit` in app.css), the column stretches to it, and the list fills
   what is there. Nothing to stick to any more, hence static. */
@media (min-width: 992px) {
    .ai-usage-card[b-bpua798bl7] {
        position: static;
        max-height: 100%;
    }

    /* The detail scrolls on its own too: with the support settings it outgrows the box, and
       without a scrollbar of its own its lower half would simply be cut off. */
    .ai-detail-col[b-bpua798bl7] {
        max-height: 100%;
        overflow-y: auto;
    }
}

.ai-usage-item[b-bpua798bl7] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ai-usage-item:hover[b-bpua798bl7] {
    background-color: var(--gray-light);
}

.ai-usage-item.is-active[b-bpua798bl7] {
    background-color: var(--selected-bg);
}

/* The fallback stands in the same list as the areas (only there does it get the model
   picker), but it is not one of them: a divider says so without banishing it into a column
   of its own. The line sits on the element itself, so it travels with it. */
.ai-usage-item.is-fallback[b-bpua798bl7] {
    margin-top: 0.5rem;
    padding-top: 0.875rem;
    border-top: 0.0625rem solid var(--bs-border-color);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.ai-usage-name[b-bpua798bl7] {
    font-weight: 600;
}

/* Model name and model id, each on its own line and truncated rather than wrapped —
   otherwise a long identifier grows the entry to three lines. */
.ai-usage-sub[b-bpua798bl7] {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Administration/SystemSettings/Components/Ai/AiServersDialog.razor.rz.scp.css */
/* The form for a new server: one row instead of a grid. In the ordinary form grid its fields
   filled three rows, and the servers already entered began below the fold — one opened the
   dialog to look after a server and saw only the form for a new one. The button sits on the
   level of the fields, not of their captions. */
.ai-server-add[b-qbuzvb5a6g] {
    border-bottom: 0.0625rem solid var(--bs-border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

/* The type column is wide enough for its longest option ("Lokal / OpenAI-kompatibel") — a
   picker that reads "Google Gem" tells the operator nothing about what is selected. */
.ai-server-add-row[b-qbuzvb5a6g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
}

.ai-server-add-row > div[b-qbuzvb5a6g] {
    min-width: 0;
}

/* These captions stay on one line — wrapped, they would push the fields beside them down. */
.ai-server-add-row .form-label[b-qbuzvb5a6g] {
    white-space: nowrap;
}

.ai-server-list[b-qbuzvb5a6g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-server-item[b-qbuzvb5a6g] {
    padding: 0.75rem;
    border: 0.0625rem solid var(--bs-border-color);
    border-radius: var(--radius-md);
}

/* The entry itself is a row; a rejected edit hangs underneath it, which is why the flex sits on
   this inner row and not on the frame. */
.ai-server-row[b-qbuzvb5a6g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Name, type and address share the row and must all be allowed to shrink (`min-width`),
   otherwise a long address pushes the buttons out of the line. The address gets the most of
   it — it is the longest of the three. */
.ai-server-name[b-qbuzvb5a6g] {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 600;
}

/* Both pickers are sized by their longest option, not by a share of the row: cut off, a
   classification reading "Extern, Drit" is exactly as useless as no classification. */
.ai-server-type[b-qbuzvb5a6g] {
    flex: 0 0 16rem;
    min-width: 0;
}

.ai-server-url[b-qbuzvb5a6g] {
    flex: 1.4 1 0;
    min-width: 0;
}

.ai-server-number[b-qbuzvb5a6g] {
    flex: 0 0 5.5rem;
}

.ai-server-location[b-qbuzvb5a6g] {
    flex: 0 0 12rem;
    min-width: 0;
}

/* Narrow, the row wraps: seven controls side by side would be a few millimetres each, and an
   address field nothing fits into is unusable. */
@media (max-width: 1200px) {
    .ai-server-add-row[b-qbuzvb5a6g] {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }

    .ai-server-row[b-qbuzvb5a6g] {
        flex-wrap: wrap;
    }

    .ai-server-url[b-qbuzvb5a6g] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Administration/SystemSettings/Components/PaymentsTab.razor.rz.scp.css */
/* Die Liste der Anbieter: ein Eintrag ist ein Knopf und kein Link — die Seite wechselt
   nicht, nur die rechte Spalte. */
.mor-list[b-emhgrmwyox] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem;
    /* Die Karte deckelt die Hoehe, die Liste traegt den Rollbalken. `min-height: 0` ist
       das, was sie im Flex-Container unter ihren Inhalt schrumpfen laesst — ohne das
       wuechse die Karte einfach mit und der Deckel bliebe wirkungslos. */
    overflow-y: auto;
    min-height: 0;
}

/* Untereinander — schmales Fenster oder schlicht ein herangezoomter Browser — rollt die
   Seite wie gewohnt, und die Liste deckelt sich nur bei einer Bildschirmhoehe und bleibt
   stehen, waehrend die Details darunter vorbeiziehen. */
.mor-list-card[b-emhgrmwyox] {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0.5rem;
    max-height: calc(100vh - 5rem);
}

@media (min-width: 992px) {
    .mor-list-card[b-emhgrmwyox] {
        position: static;
        max-height: 100%;
    }

    .mor-detail-col[b-emhgrmwyox] {
        max-height: 100%;
        overflow-y: auto;
    }
}

.mor-item[b-emhgrmwyox] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mor-item:hover[b-emhgrmwyox] {
    background-color: var(--gray-light);
}

.mor-item.is-active[b-emhgrmwyox] {
    background-color: var(--selected-bg);
}

/* Der Standard steht in derselben Liste wie die Anbieter — nur dort bekommt er die
   Auswahl umsonst —, ist aber keiner von ihnen: ein Trennstrich sagt das, ohne ihn in
   eine eigene Spalte zu verbannen. Die Linie sitzt am Element selbst, also wandert sie
   mit ihm. */
.mor-item.is-default[b-emhgrmwyox] {
    margin-top: 0.5rem;
    padding-top: 0.875rem;
    border-top: 0.0625rem solid var(--fs-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.mor-item-name[b-emhgrmwyox] {
    font-weight: 600;
}

/* Welt und Zustand, jeweils auf einer eigenen Zeile und abgeschnitten statt umgebrochen —
   sonst waechst ein Eintrag auf drei Zeilen. */
.mor-item-sub[b-emhgrmwyox] {
    font-size: var(--fs-text-sm);
    color: var(--fs-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Administration/SystemSettings/Index.razor.rz.scp.css */
.card-body.p-0 table td:first-child[b-w1jsrf4k7n],
.card-body.p-0 table th:first-child[b-w1jsrf4k7n] {
    padding-left: 1rem;
}
/* /Components/Pages/Administration/Tutorials/Components/TutorialTree.razor.rz.scp.css */
/* Der Baum der Tutorial-Verwaltung. Das gemeinsame Baum-Gewand (Verbinder,
   Auf/Zu-Symbol, Einrueckung, Zeilenname) steht in app.css — hier steht nur, was
   diese Seite dazutut: die ausgewaehlte Zeile, die Zusatzangabe hinter dem Namen
   und die Knopfleiste am rechten Rand. */

.tutorial-tree[b-wmfwd0p889] {
    /* Wie in der Themenverwaltung: der Stamm der obersten Ebene rueckt ein Stueck
       vom Kartenrand ab, damit die Linie nicht an ihm klebt. */
    padding-left: 0.25rem;
    overflow-x: auto;
}

.tree-node-header[b-wmfwd0p889] {
    /* Der Zeileninhalt sitzt links, die Knoepfe rechts — dazwischen Platz. */
    gap: 0.25rem;
}

/* Die Zeilen hier sind etwas niedriger als die der Themenverwaltung (normale
   Schrift statt vergroesserter): Abzweig und Stammende ruecken entsprechend hoch,
   sonst treffen die Linien neben der Zeile auf. */
.tree-connector-leaf[b-wmfwd0p889]::before {
    top: 1.2rem;
}

.tree-connector-last[b-wmfwd0p889]::after,
.tree-connector-last.tree-connector-leaf[b-wmfwd0p889]::after {
    height: 1.6rem;
}

.tree-node-header.selected .tree-node-name[b-wmfwd0p889] {
    background-color: var(--primary);
    color: var(--primary-ink);
}

.tutorial-tree-icon[b-wmfwd0p889] {
    font-size: var(--fs-text-lg);
    color: var(--primary);
}

.tree-node-header.selected .tutorial-tree-icon[b-wmfwd0p889] {
    color: var(--primary-ink);
}

/* Anzahl, Stelle in der Anwendung: steht hinter dem Namen und tritt zurueck. */
.tutorial-tree-meta[b-wmfwd0p889] {
    font-size: var(--fs-text-sm);
    color: var(--gray-text-secondary);
    white-space: nowrap;
}

/* Ein Thema ohne Kapitel, ein Kapitel ohne Tutorial: die Zeile darunter sagt, dass
   hier nichts fehlt, sondern noch nichts steht. */
.tutorial-tree-hint[b-wmfwd0p889] {
    padding: 0.225rem 0.4rem 0.225rem 1.4rem;
    font-size: var(--fs-text-sm);
    color: var(--gray-text-secondary);
}

/* Die Knopfleiste erscheint, wo die Maus steht oder wo ausgewaehlt ist. Sie bleibt
   dabei im Fluss (nur unsichtbar), damit die Zeile beim Ueberfahren nicht springt. */
.tutorial-tree-actions[b-wmfwd0p889] {
    margin-left: auto;
    flex-shrink: 0;
    visibility: hidden;
}

.tree-node-header:hover > .tutorial-tree-actions[b-wmfwd0p889],
.tree-node-header.selected > .tutorial-tree-actions[b-wmfwd0p889] {
    visibility: visible;
}

/* Auf dem Telefon gibt es kein Ueberfahren: dort stehen die Knoepfe immer da. */
@media (hover: none) {
    .tutorial-tree-actions[b-wmfwd0p889] {
        visibility: visible;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* /Components/Pages/Licensing/Components/PackagesCard.razor.rz.scp.css */
/* Die Paketliste: eine Zeile je Paket, aufklappbar. */

.package + .package[b-0ph9rti5u2] {
    border-top: 0.0625rem solid var(--gray-border-light);
}

.package-head[b-0ph9rti5u2] {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 0.75rem 1rem;
    cursor: pointer;
    gap: 1rem;
}

.package-head:hover[b-0ph9rti5u2] {
    background-color: var(--selected-bg);
}

.package-head-text[b-0ph9rti5u2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.package-name[b-0ph9rti5u2] {
    font-weight: 600;
}

.package-period[b-0ph9rti5u2] {
    font-size: var(--fs-text-sm);
    color: var(--gray-text-secondary);
}

.package-body[b-0ph9rti5u2] {
    padding: 0 1rem 1rem 1rem;
}

.package-features[b-0ph9rti5u2]  ul,
.package-facts[b-0ph9rti5u2] {
    margin: 0;
    padding-left: 1.25rem;
}
/* /Components/Pages/Login/Index.razor.rz.scp.css */
.gender-disclaimer[b-3ej5c237jz] {
    color: var(--gray-text-secondary);
    font-size: 0.75rem;
}

.login-version[b-3ej5c237jz] {
    color: var(--gray-text-secondary);
    font-size: 0.7rem;
    text-align: center;
    margin-bottom: 0;
}
/* /Components/Pages/Login/Register.razor.rz.scp.css */
.org-name-display[b-g1fqi3p7gg] {
    border: 0.0625rem solid white;
    border-radius: 0.25rem;
    padding: 0.5rem;
    color: white;
    font-weight: bold;
}

.unit-name-large[b-g1fqi3p7gg] {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 2.4rem;
    line-height: 1.2;
}
/* /Components/Pages/Login/SetupAuthMethod.razor.rz.scp.css */
/* Diese Karten liegen seit .fullpage-card auf weissem Grund und nicht mehr direkt
   auf dem Markenverlauf. Deshalb tragen sie einen Rahmen statt einer aufgehellten
   Flaeche, und die Schrift erbt die dunkle Farbe der Karte: vorher stand der Titel
   weiss auf Weiss, und die Karte sah aus, als haette sie nur sehr viel Innenabstand. */
.method-card[b-hn4kawti31] {
    border: 0.0625rem solid var(--gray-border-light);
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.method-card:hover[b-hn4kawti31] {
    background-color: var(--nav-hover-bg);
    border-color: var(--primary);
}

/* Ruecken den Beschreibungstext unter den Titel neben dem Symbol. */
.method-card .method-description[b-hn4kawti31] {
    padding-left: 2rem;
}
/* /Components/Pages/Support/Tickets/Edit.razor.rz.scp.css */
/*
 * Ein Beleg neben der Anfrage. Die Eintraege stehen untereinander und sind durch eine
 * feine Linie getrennt statt durch Abstand allein: in einer schmalen Spalte laufen
 * zwei Zeilen Text sonst zu einem Block zusammen, und der Agent zaehlt nicht mehr,
 * wie viele Belege er vor sich hat.
 */
.ticket-document[b-q1rb8ulrvh] {
    padding: 0.5rem 0;
    border-bottom: 0.0625rem solid var(--fs-border);
    font-size: var(--fs-text-sm);
}

.ticket-document:first-child[b-q1rb8ulrvh] {
    padding-top: 0;
}

.ticket-document:last-child[b-q1rb8ulrvh] {
    padding-bottom: 0;
    border-bottom: none;
}
/* /Components/Pages/Surveys/Components/AccessTab.razor.rz.scp.css */
.access-badges > .badge[b-zqg0cdx57j] {
    display: inline-block;
}

.access-section-title[b-zqg0cdx57j] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.channel-panel[b-zqg0cdx57j] {
    border: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    height: 100%;
    background-color: var(--bs-body-bg, #fff);
}

.channel-panel:hover[b-zqg0cdx57j] {
    border-color: var(--bs-primary);
}

/* Read-only viewer (Use permission): no pointer cursor, no hover-border-change. The
   panels still show their active/inactive state so the viewer sees which channels
   the survey actually uses, just can't toggle them. */
.channel-panel-readonly[b-zqg0cdx57j] {
    cursor: default;
}

.channel-panel-readonly:hover[b-zqg0cdx57j] {
    border-color: var(--bs-border-color, #dee2e6);
}

.channel-panel-readonly.active:hover[b-zqg0cdx57j] {
    border-color: var(--bs-primary);
}

.channel-panel.active[b-zqg0cdx57j] {
    border-color: var(--bs-primary);
    background-color: var(--selected-bg);
}

.channel-panel .channel-header[b-zqg0cdx57j] {
    display: flex;
    align-items: center;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--bs-secondary-color, #6c757d);
}

.channel-panel.active .channel-header[b-zqg0cdx57j] {
    color: var(--bs-primary);
}

.channel-panel .channel-description[b-zqg0cdx57j] {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0;
}

.code-column-disabled[b-zqg0cdx57j] {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(1);
}
/* /Components/Pages/Surveys/Components/FlowEditModal.razor.rz.scp.css */
/* Ein frisch geoeffneter Dialog ist nur so hoch wie Name und Knopfzeile, und das
   Menue der Bedingungsarten klappt in den scrollenden Rumpf hinein: die unteren
   Eintraege stehen dann unter der Kante. Wer nicht scrollt, erfaehrt nie, dass es
   sie gibt. Also bekommt der Rumpf von vornherein Platz fuer das ganze Menue —
   auf einem niedrigen Fenster gedeckelt, damit der Dialog nicht hinauswaechst. */
.modal-body[b-4fhgq1zlgt] {
    min-height: min(22rem, 60vh);
}

/* The kind menu under the "Bedingung hinzufügen" button. */
.flow-kind-menu[b-4fhgq1zlgt] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 20;
    min-width: 16rem;
    background: var(--fs-surface);
    border: 1px solid var(--fs-border);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
}

.flow-kind-option[b-4fhgq1zlgt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.flow-kind-option:hover[b-4fhgq1zlgt] {
    background: var(--selected-bg);
}
/* /Components/Pages/Surveys/Components/FlowsTab.razor.rz.scp.css */
/* Tab Abläufe: the flow list beside a horizontally scrolling matrix whose front
   columns stay put (docs/Flows.md, 8.1). */

.flows-layout[b-tan05wtm8y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1200px) {
    .flows-layout[b-tan05wtm8y] {
        grid-template-columns: 20rem minmax(0, 1fr);
    }
}

.flow-card[b-tan05wtm8y] {
    border: 1px solid var(--fs-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--fs-surface);
    cursor: pointer;
}

.flow-card:hover[b-tan05wtm8y] {
    border-color: var(--fs-border-strong);
}

/* Der Standardablauf laesst sich nicht bearbeiten. Er darf deshalb auch nicht so
   aussehen, als warte er auf einen Klick. */
.flow-card-default[b-tan05wtm8y] {
    cursor: default;
    background: var(--fs-surface-sunk);
}

.flow-card-default:hover[b-tan05wtm8y] {
    border-color: var(--fs-border);
}

.flow-card-title[b-tan05wtm8y] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.flow-card-conditions[b-tan05wtm8y] {
    color: var(--fs-text-muted);
    font-size: var(--fs-text-sm);
    margin-top: 0.25rem;
}

.flow-card-actions[b-tan05wtm8y] {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
    justify-content: flex-end;
}

.flows-matrix-scroll[b-tan05wtm8y] {
    overflow-x: auto;
    border: 1px solid var(--fs-border);
    border-radius: 0.5rem;
}

.flows-matrix[b-tan05wtm8y] {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
}

.flows-matrix th[b-tan05wtm8y],
.flows-matrix td[b-tan05wtm8y] {
    vertical-align: middle;
    white-space: nowrap;
}

/* The front columns stay in place while the flow columns scroll beneath them. Sticky
   cells need an opaque background, otherwise the scrolled columns shine through. */
.flows-matrix .fm-sticky[b-tan05wtm8y] {
    position: sticky;
    z-index: 2;
    background-color: var(--fs-surface);
}

.flows-matrix.table-striped > tbody > tr:nth-of-type(odd) > .fm-sticky[b-tan05wtm8y] {
    background-color: var(--surface-subtle);
}

.flows-matrix thead th[b-tan05wtm8y] {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--fs-surface);
}

.flows-matrix thead th.fm-sticky[b-tan05wtm8y] {
    z-index: 4;
}

.fm-col-num[b-tan05wtm8y] { left: 0; width: 3.5rem; min-width: 3.5rem; text-align: center; }
.fm-col-type[b-tan05wtm8y] { left: 3.5rem; width: 6.5rem; min-width: 6.5rem; }
.fm-col-text[b-tan05wtm8y] { left: 10rem; width: 22rem; min-width: 22rem; max-width: 22rem; }
.fm-col-all[b-tan05wtm8y] { left: 32rem; width: 8rem; min-width: 8rem; max-width: 8rem; text-align: center; }

/* Abschnitt und Thema benennen die ganze Zeile, nicht eine Spalte darin: sie laufen
   ueber die drei vorderen Spalten hinweg und beginnen ganz links. */
.fm-col-head[b-tan05wtm8y] { left: 0; width: 32rem; min-width: 32rem; max-width: 32rem; text-align: left; }

/* Whichever column ends the fixed block carries the shadow that shows the table has been
   scrolled sideways — the default flow when it is there, the item text when it is not. */
.flows-matrix-scrolled .fm-edge[b-tan05wtm8y] {
    box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.25);
}

.fm-col-flow[b-tan05wtm8y] {
    width: 8rem;
    min-width: 8rem;
    max-width: 8rem;
    text-align: center;
}

.fm-col-flow-name[b-tan05wtm8y] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-text[b-tan05wtm8y] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-section-row > td[b-tan05wtm8y],
.fm-section-row > th[b-tan05wtm8y] {
    font-weight: 600;
    background-color: var(--fs-surface-sunk) !important;
}

.fm-topic-row > td[b-tan05wtm8y] {
    color: var(--fs-text-muted);
    font-size: var(--fs-text-sm);
}

.fm-topic-row .fm-text[b-tan05wtm8y] {
    padding-left: 1rem;
}

.fm-check[b-tan05wtm8y] {
    display: flex;
    justify-content: center;
}

.fm-check input[b-tan05wtm8y] {
    margin: 0;
}

.fm-implied input[b-tan05wtm8y] {
    opacity: 0.45;
}

.fm-general[b-tan05wtm8y] {
    color: var(--primary);
}

/* Ein Item, das keine Spalte mehr zeigt, geht sonst lautlos verloren. */
.fm-orphan-row > td[b-tan05wtm8y] {
    background-color: var(--warning-tint) !important;
}

.fm-orphan-row .fm-text[b-tan05wtm8y] {
    text-decoration: line-through;
    text-decoration-color: var(--fs-text-muted);
}
/* /Components/Pages/Surveys/Components/PaperLanguagePicker.razor.rz.scp.css */
.pl-split[b-u6o90knlmk] {
    border-radius: 0.5rem;
    overflow: hidden;
}

.pl-column[b-u6o90knlmk] {
    flex: 1 1 0;
    min-width: 0;
    padding: 1.25rem;
}

.pl-column + .pl-column[b-u6o90knlmk] {
    border-left: 1px solid var(--gray-border-light);
}

.pl-column-header[b-u6o90knlmk] {
    margin-bottom: 0.75rem;
}

.pl-column-header .form-check-input[b-u6o90knlmk] {
    margin-top: 0.25rem;
}

.pl-column-header .form-check-label[b-u6o90knlmk] {
    font-weight: 700;
    font-size: 1.1rem;
}

.pl-column-helper[b-u6o90knlmk] {
    color: var(--gray-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    min-height: 2.6rem;
}

.pl-content.disabled[b-u6o90knlmk] {
    opacity: 0.4;
    pointer-events: none;
}

.pl-allocation-table[b-u6o90knlmk] {
    margin-bottom: 0;
}

.pl-allocation-table th[b-u6o90knlmk],
.pl-allocation-table td[b-u6o90knlmk] {
    background-color: transparent;
}
/* /Components/Pages/Surveys/Edit.razor.rz.scp.css */
.expert-chat-messages[b-90pik1h06c] {
    min-height: 20rem;
    max-height: 25rem;
    overflow-y: auto;
    background-color: var(--bs-gray-100);
}

.expert-chat-bubble-wrapper[b-90pik1h06c] {
    max-width: 75%;
    position: relative;
}

.expert-chat-user-wrapper[b-90pik1h06c] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.expert-chat-ai-wrapper[b-90pik1h06c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.expert-chat-bubble[b-90pik1h06c] {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.expert-chat-user[b-90pik1h06c] {
    background-color: var(--bs-primary);
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.expert-chat-ai[b-90pik1h06c] {
    background-color: white;
    border: 1px solid var(--bs-gray-300);
    border-bottom-left-radius: 0.25rem;
}

.expert-chat-actions[b-90pik1h06c] {
    display: none;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.expert-chat-bubble-wrapper:hover .expert-chat-actions[b-90pik1h06c] {
    display: flex;
}

.expert-chat-actions .btn[b-90pik1h06c] {
    padding: 0.125rem;
    color: var(--bs-gray-500);
}

.expert-chat-actions .btn:hover[b-90pik1h06c] {
    color: var(--bs-gray-700);
}


.expert-modal-content[b-90pik1h06c] {
    max-height: calc(100vh - 3.5rem);
    display: flex;
    flex-direction: column;
}

.expert-modal-content[b-90pik1h06c]  .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.expert-debug-panel[b-90pik1h06c] {
    background-color: var(--bs-gray-100);
    overflow-y: auto;
    flex-shrink: 1;
    min-height: 0;
}

.expert-debug-panel pre[b-90pik1h06c] {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--bs-gray-700);
}

.analyze-rating[b-90pik1h06c] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background-color: var(--bs-gray-100);
    border: 0.0625rem solid var(--bs-gray-300);
    border-radius: 0.5rem;
}

.analyze-traffic-light[b-90pik1h06c] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem;
    background-color: var(--bs-gray-900);
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.analyze-light[b-90pik1h06c] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--bs-gray-700);
    opacity: 0.35;
    transition: opacity 0.2s, box-shadow 0.2s;
}

.analyze-light.active[b-90pik1h06c] {
    opacity: 1;
}

.analyze-light-red.active[b-90pik1h06c] {
    background-color: var(--bs-danger);
    box-shadow: 0 0 0.75rem var(--bs-danger);
}

.analyze-light-yellow.active[b-90pik1h06c] {
    background-color: var(--bs-warning);
    box-shadow: 0 0 0.75rem var(--bs-warning);
}

.analyze-light-green.active[b-90pik1h06c] {
    background-color: var(--bs-success);
    box-shadow: 0 0 0.75rem var(--bs-success);
}

.analyze-rating-text[b-90pik1h06c] {
    color: var(--bs-body-color);
    flex-grow: 1;
}
/* /Components/Pages/UserProfile/Authentication/Components/AuthMethodCard.razor.rz.scp.css */
.method-card[b-fcmobe4ero] {
    border: 0.0625rem solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.method-card:hover[b-fcmobe4ero] {
    background-color: var(--bs-light);
}

.method-card .method-description[b-fcmobe4ero] {
    padding-left: 2rem;
}

.method-card.selected[b-fcmobe4ero] {
    border-color: var(--bs-primary);
    background-color: var(--selected-bg);
}
/* /Components/Shared/AiAssistantCreateItems.razor.rz.scp.css */
/* ============================================================================
   Der AIssistant als gefuehrter Ablauf

   Der Assistent stellt nicht mehr Gespraech und Vorgaben nebeneinander, sondern
   fuehrt durch wenige Schritte. Genau ein Markup bedient dabei alle Breiten:

     ab 992px    Die Schrittleiste steht als Spalte links neben der Buehne und
                 nennt zu jedem Schritt, was darin bereits feststeht.
     darunter    Aus den Eintraegen werden Balken, und eine Zeile darueber sagt,
                 wie der aktuelle Schritt heisst und der wievielte er ist.

   Zwei Formen, nicht drei: eine Reihe aus sechs benannten Schritten passte in
   keine mittlere Breite, ohne das Panel seitlich aufzuschieben. Ausgetauscht
   wird nur die Gestalt, nie der Inhalt: derselbe Schritt ist auf jedem Geraet
   anspringbar.
   ============================================================================ */

/* Die Seite gibt dem Rahmen ihren Platz (siehe .page-fill in app.css). Eine feste
   Hoehe aus 100vh haette immer geraten, wie hoch Kopfleiste, Pfadleiste und
   Seitentitel gerade sind, und lag damit mal zu hoch (Scrollleiste am Fensterrand)
   und mal zu niedrig (verschenkter Platz). */
.expert-page-content[b-figyyky44w] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--fs-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--fs-surface);
}

.wizard[b-figyyky44w] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    /* Nichts im Assistenten darf breiter werden als sein Rahmen. Ohne diese Grenze
       schob die Schrittleiste das ganze Panel auf und es liess sich seitlich
       wegscrollen. */
    overflow-x: hidden;
}

/* ---- Die Schrittleiste --------------------------------------------------- */

.wizard-rail[b-figyyky44w] {
    flex-shrink: 0;
    min-width: 0;
    overflow-x: hidden;
    background-color: var(--fs-surface);
    border-bottom: 1px solid var(--fs-border);
    padding: 0.75rem 1rem;
}

/* Nur auf dem Telefon: dort sind die Eintraege Balken und sagen ihren Namen nicht
   mehr selbst. */
.wizard-rail-position[b-figyyky44w] {
    display: none;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wizard-rail-position-name[b-figyyky44w] {
    font-size: var(--fs-text-md);
    font-weight: 600;
}

.wizard-rail-position-of[b-figyyky44w] {
    margin-left: auto;
    font-size: var(--fs-text-sm);
    color: var(--fs-text-muted);
}

.wizard-steps[b-figyyky44w] {
    display: flex;
    gap: 0.25rem;
    min-width: 0;
}

/* overflow: hidden ist hier nicht Zierde, sondern Notwendigkeit: ein <button> gibt
   die Breitenbegrenzung seines Flex-Elternteils nicht an seinen Inhalt weiter, und
   die einzeilige Zusammenfassung waere sonst ueber die Spalte hinausgelaufen,
   statt mit Auslassungspunkten zu enden. */
.wizard-step[b-figyyky44w] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    padding: 0.6rem 0.7rem;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    font-family: inherit;
    color: var(--fs-text);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-colors);
}

.wizard-step:hover[b-figyyky44w] {
    background-color: var(--fs-surface-sunk);
}

.wizard-step.current[b-figyyky44w] {
    background-color: var(--primary-tint);
}

.wizard-step-dot[b-figyyky44w] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--fs-border-strong);
    border-radius: 50%;
    background-color: var(--fs-surface);
    color: var(--fs-text-muted);
    font-size: var(--fs-text-sm);
    font-weight: 600;
}

.wizard-step-dot .material-symbols-outlined[b-figyyky44w] {
    font-size: 1.1rem;
}

.wizard-step.done .wizard-step-dot[b-figyyky44w] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-ink);
}

.wizard-step.current .wizard-step-dot[b-figyyky44w] {
    border-color: var(--primary);
    border-width: 2px;
    color: var(--primary);
}

.wizard-step-text[b-figyyky44w] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.wizard-step-name[b-figyyky44w] {
    font-size: var(--fs-text-sm);
    font-weight: 600;
    color: var(--fs-text-muted);
}

.wizard-step.current .wizard-step-name[b-figyyky44w] {
    color: var(--primary-dark);
}

/* Was in diesem Schritt schon feststeht. Eine Zeile, nie zwei: die Leiste soll
   den Blick nicht binden. */
.wizard-step-summary[b-figyyky44w] {
    display: block;
    max-width: 100%;
    font-size: var(--fs-text-xs);
    color: var(--fs-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der Name darf ebenso wenig ueber den Rand laufen wie die Zeile darunter. */
.wizard-step-name[b-figyyky44w] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Die Buehne ---------------------------------------------------------- */

.wizard-stage[b-figyyky44w] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.wizard-head[b-figyyky44w] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 1.25rem 1.5rem 0.5rem;
}

.wizard-head-text[b-figyyky44w] {
    min-width: 0;
}

.wizard-title[b-figyyky44w] {
    margin: 0 0 0.15rem;
    font-size: var(--fs-text-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.wizard-lead[b-figyyky44w] {
    margin: 0;
    font-size: var(--fs-text-sm);
    color: var(--fs-text-muted);
    max-width: 46rem;
}

/* Der Koerper liegt leicht abgesetzt, damit Karten und Sprechblasen darauf
   sichtbar sind — beide sind weiss, und Kopf und Fuss bleiben helle Baender. */
.wizard-body[b-figyyky44w] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 1.5rem 1.5rem;
    background-color: var(--fs-bg);
}

/* Auf einem breiten Bildschirm laufen Zeilen sonst ueber die ganze Flaeche und
   werden unlesbar lang. */
.wizard-inner[b-figyyky44w] {
    max-width: 52rem;
}

/* Teilnehmergruppen stehen nebeneinander, sobald Platz da ist — untereinander
   waeren sie in einem Schritt, der die ganze Breite hat, eine sehr lange Spalte. */
.wizard-group-grid[b-figyyky44w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.wizard-item-count[b-figyyky44w] {
    max-width: 22rem;
}

.wizard-brief-text[b-figyyky44w] {
    font-family: inherit;
}

.wizard-brief-waiting[b-figyyky44w] {
    padding: 1rem 0;
}

/* ---- Der Fuss ------------------------------------------------------------ */

.wizard-foot[b-figyyky44w] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.75rem 1.5rem 1rem;
    border-top: 1px solid var(--fs-border);
    background-color: var(--fs-surface);
}

.wizard-composer[b-figyyky44w] {
    flex: 1 1 22rem;
}

.wizard-nav[b-figyyky44w] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* ---- Das Gespraech ------------------------------------------------------- */

.expert-chat-bubble[b-figyyky44w] {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.expert-chat-user[b-figyyky44w] {
    background-color: var(--primary);
    color: var(--primary-ink);
    border-bottom-right-radius: 0.25rem;
}

.expert-chat-ai[b-figyyky44w] {
    background-color: var(--fs-surface);
    border: 1px solid var(--fs-border);
    box-shadow: var(--shadow-md);
    border-bottom-left-radius: 0.25rem;
}

.expert-chat-warning[b-figyyky44w] {
    background-color: var(--warning-tint);
    border: 1px solid rgba(var(--warning-rgb), 0.45);
    color: var(--warning-dark);
    border-bottom-left-radius: 0.25rem;
}

.expert-chat-suggestions[b-figyyky44w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

.expert-chat-suggestions-hint[b-figyyky44w] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--fs-text-muted);
    font-style: italic;
}

.expert-chat-suggestion[b-figyyky44w] {
    border: 1px solid var(--primary);
    background-color: transparent;
    color: var(--primary);
    border-radius: 999rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.3;
    cursor: pointer;
    transition: var(--transition-colors);
}

.expert-chat-suggestion:hover:not(:disabled)[b-figyyky44w] {
    background-color: var(--primary);
    color: var(--primary-ink);
}

.expert-chat-suggestion.selected[b-figyyky44w] {
    background-color: var(--primary);
    color: var(--primary-ink);
}

.expert-chat-suggestion:disabled[b-figyyky44w] {
    opacity: 0.5;
    cursor: default;
}

/* ============================================================================
   Breiter Bildschirm: die Schrittleiste wird zur Spalte
   ============================================================================ */

@media (min-width: 992px) {
    .wizard[b-figyyky44w] {
        flex-direction: row;
    }

    /* Feste Breite, aber nie mehr als ein knappes Drittel: bei einem Fenster knapp
       ueber der Schwelle bliebe der Buehne sonst zu wenig. */
    .wizard-rail[b-figyyky44w] {
        width: 19rem;
        max-width: 30%;
        flex-shrink: 0;
        border-bottom: 0;
        border-right: 1px solid var(--fs-border);
        padding: 1.25rem 0.75rem;
        overflow-y: auto;
    }

    .wizard-steps[b-figyyky44w] {
        flex-direction: column;
        gap: 0.15rem;
        width: 100%;
    }

    .wizard-step[b-figyyky44w] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ============================================================================
   Unter 992px: aus den Eintraegen werden Balken

   Sechs Schritte mit Namen nebeneinander sind hier nicht mehr lesbar, und
   untereinander waeren sie eine halbe Bildschirmhoehe Navigation vor dem ersten
   Inhalt. Der Balken bleibt anspringbar, und die Zeile darueber sagt, wo man
   steht. So gibt es genau zwei Formen der Leiste statt drei, und keine davon
   kann breiter werden als das Panel.
   ============================================================================ */

@media (max-width: 991.98px) {
    .wizard-head[b-figyyky44w] {
        padding: 1rem 1rem 0.5rem;
    }

    .wizard-body[b-figyyky44w] {
        padding: 0.75rem 1rem 1.25rem;
    }

    .wizard-foot[b-figyyky44w] {
        padding: 0.75rem 1rem 1rem;
    }

    .wizard-rail[b-figyyky44w] {
        padding: 0.7rem 1rem 0.8rem;
    }

    .wizard-rail-position[b-figyyky44w] {
        display: flex;
    }

    .wizard-steps[b-figyyky44w] {
        gap: 0.25rem;
    }

    .wizard-step[b-figyyky44w] {
        padding: 0;
        border-radius: 999rem;
        background-color: var(--fs-border);
        min-height: 0.3rem;
    }

    .wizard-step:hover[b-figyyky44w] {
        background-color: var(--fs-border-strong);
    }

    .wizard-step.done[b-figyyky44w],
    .wizard-step.current[b-figyyky44w] {
        background-color: var(--primary);
    }

    .wizard-step.current[b-figyyky44w] {
        opacity: 0.55;
    }

    .wizard-step-dot[b-figyyky44w],
    .wizard-step-text[b-figyyky44w] {
        display: none;
    }
}

/* ============================================================================
   Telefon: Schrift und Knoepfe folgen der schmalen Flaeche
   ============================================================================ */

@media (max-width: 575.98px) {
    .wizard-title[b-figyyky44w] {
        font-size: var(--fs-text-lg);
    }

    .expert-chat-bubble[b-figyyky44w] {
        max-width: 88%;
    }

    /* Zwei Knoepfe teilen sich die Zeile, statt rechts zusammenzurutschen. */
    .wizard-nav[b-figyyky44w] {
        width: 100%;
        margin-left: 0;
    }

    .wizard-nav .btn[b-figyyky44w] {
        flex: 1 1 0;
    }
}
/* /Components/Shared/AssetPermissionPicker.razor.rz.scp.css */
/* Scoped styles for AssetPermissionPicker component */

.permission-type-select[b-0o2iyt6bc0] {
    width: auto;
    flex: 0 0 auto;
}

.permission-tiles[b-0o2iyt6bc0] {
    background-color: var(--selected-bg);
    border-radius: 0.5rem;
    padding: 0.25rem;
    gap: 0.25rem;
}

.permission-tile[b-0o2iyt6bc0] {
    background-color: var(--surface);
    border: none;
    border-radius: 0.375rem;
    padding: 0.75rem 0.5rem;
    color: var(--bs-body-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s;
    position: relative;
    min-height: 5rem;
    flex: 1 1 0;
    min-width: 0;
}

.permission-tile:hover:not(.active)[b-0o2iyt6bc0] {
    background-color: var(--gray-light);
}

.permission-tile.active[b-0o2iyt6bc0] {
    background-color: var(--bs-primary);
    color: var(--white);
}

.permission-tile-icon[b-0o2iyt6bc0] {
    font-size: 1.5rem;
    color: var(--bs-primary);
}

.permission-tile.active .permission-tile-icon[b-0o2iyt6bc0] {
    color: var(--white);
}

.permission-tile-label[b-0o2iyt6bc0] {
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.2;
}

.permission-tile-badge[b-0o2iyt6bc0] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
}


/* access-codes styles live in app.css because the table is built via RenderTreeBuilder
   in the code-behind, which sits outside Blazor's scoped-CSS rewriter. */
/* /Components/Shared/IconPickerModal.razor.rz.scp.css */
/* Scrollable body */
.icon-picker-body[b-kwf0r3ped8] {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}

/* Icon grid */
.likert-icon-grid[b-kwf0r3ped8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: 0.5rem;
}

.likert-icon-grid[b-kwf0r3ped8]  .material-symbols-outlined {
    font-size: 1.5rem;
}


/* /Components/Shared/ItemTypePicker.razor.rz.scp.css */
.type-card[b-f4z7onxajo] {
    display: block;
    border: 0.0625rem solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    height: 100%;
    color: inherit;
}

.type-card:hover[b-f4z7onxajo] {
    background-color: var(--bs-light);
    border-color: var(--bs-primary);
}

.type-card.selected[b-f4z7onxajo] {
    border-color: var(--bs-primary);
    background-color: var(--selected-bg);
}

.type-card .type-icon[b-f4z7onxajo] {
    font-size: 1.5rem;
    color: var(--bs-primary);
}

.type-card .type-description[b-f4z7onxajo] {
    color: var(--bs-secondary-color);
}
/* /Components/Shared/LanguagePicker.razor.rz.scp.css */
/* Language picker styling lives in app.css (.lang-pill, .lang-row, .flag, …)
   because it wraps the shared <Flag> child component, which scoped CSS cannot reach. */
/* /Components/Shared/SurveyItems/SurveyItemCard.razor.rz.scp.css */
.si-card[b-g6o4kid57s] {
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-white);
    position: relative;
}

.si-card-numbered[b-g6o4kid57s] {
    padding-top: 2rem;
    margin-top: 1.25rem;
}

.si-number-badge[b-g6o4kid57s] {
    position: absolute;
    top: -1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}

/* Amber tint with the dark amber numeral, the same shape as the ordinary badge.
   It used to be the full warning tone with the emphasis tone on top — two dark
   browns at 1.7:1, from back when the warning colour was a light yellow. */
.si-number-badge.si-number-badge-required[b-g6o4kid57s] {
    background: var(--warning-tint);
    color: var(--warning-dark);
}


.si-question[b-g6o4kid57s] {
    margin-bottom: 1rem;
    line-height: 1.5;
}

.si-answers[b-g6o4kid57s] {
}
/* /Components/Shared/SurveyItemWizard.razor.rz.scp.css */
/* Der Assistent teilt sich in einen wachsenden Koerper und eine feste Knopfleiste.
   Die Hoehe kommt vom Dialog, nicht von einer vh-Rechnung: sonst schiebt eine
   zweizeilige Reiterleiste die Knoepfe aus dem Bild. */
.wizard-body[b-qir6cdeo5k] {
    align-items: flex-start;
    flex: 1 1 auto;
    min-height: 0;
}

.wizard-actions[b-qir6cdeo5k] {
    flex: 0 0 auto;
}

/* Left column */
.left-column[b-qir6cdeo5k] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Der Scrollbereich endet ein Stueck ueber der Knopfleiste, damit die
   angeschnittene letzte Zeile nicht an ihr klebt. */
.editor-tab-content[b-qir6cdeo5k] {
    min-height: 8rem;
    margin-bottom: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.75rem;
    scrollbar-gutter: stable;
}

/* Ab der Breite, in der Editor und Vorschau nebeneinander stehen, bekommen beide
   Spalten die Hoehe des Koerpers und scrollen in sich. Darunter stehen sie
   untereinander, und der ganze Koerper scrollt. */
@media (min-width: 992px) {
    .wizard-body[b-qir6cdeo5k] {
        align-items: stretch;
    }

    .left-column[b-qir6cdeo5k] {
        max-height: 100%;
    }

    .editor-tab-content[b-qir6cdeo5k] {
        flex: 1 1 auto;
    }
}

@media (max-width: 991.98px) {
    .wizard-body[b-qir6cdeo5k] {
        overflow-y: auto;
    }
}
/* /Components/Shared/SurveyItemWizardParts/WizardAnswerTab.razor.rz.scp.css */
/* Icon picker cell hover */
.icon-cell:hover[b-b13d7sb0vc] {
    background-color: var(--selected-bg);
}

/* Score input */
.score-input[b-b13d7sb0vc] {
    max-width: 10rem;
}

/* Exclude value badge */
.exclude-value-badge[b-b13d7sb0vc] {
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    transition: all 0.15s ease;
}

.exclude-value-badge:hover[b-b13d7sb0vc] {
    opacity: 0.8;
}
/* /Components/Shared/SurveyItemWizardParts/WizardAssignmentTab.razor.rz.scp.css */
/* Topic picker */
.topic-picker-col[b-7nivwk2p7u] {
    max-height: calc(100vh - 20rem);
    overflow-y: auto;
    width: fit-content;
    max-width: 100%;
}
/* /Components/Shared/SurveyItemWizardParts/WizardClassificationTab.razor.rz.scp.css */
.classification-tab-row[b-oktnvd2nff] {
    height: calc(100vh - 19rem);
    min-height: 18rem;
}

.classification-textarea[b-oktnvd2nff] {
    flex: 1 1 auto;
    min-height: 0;
    resize: none;
}
/* /Components/Shared/SurveyItemWizardParts/WizardIllustrationTab.razor.rz.scp.css */
.illustration-grid-scroll[b-v340i6cznr] {
    max-height: 42vh;
    overflow-y: auto;
}

/* Image grid editor */
.image-grid-editor[b-v340i6cznr] {
    width: auto;
}

.image-grid-cell[b-v340i6cznr] {
    width: 10rem;
    height: 8rem;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    transition: background-color 0.15s ease;
}

.image-grid-cell:hover[b-v340i6cznr] {
    background-color: var(--selected-bg);
}

.image-grid-cell-content[b-v340i6cznr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.image-grid-cell-img[b-v340i6cznr] {
    max-width: 100%;
    max-height: 5rem;
    object-fit: contain;
    border-radius: 0.25rem;
}

.image-grid-cell-desc[b-v340i6cznr] {
    font-size: 0.75rem;
    line-height: 1.2;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-grid-cell-empty[b-v340i6cznr] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.image-grid-cell-empty .material-symbols-outlined[b-v340i6cznr] {
    font-size: 2.5rem;
}

/* Cell editor modal preview */
.cell-editor-preview[b-v340i6cznr] {
    max-width: 100%;
    max-height: 15rem;
    object-fit: contain;
    border-radius: 0.5rem;
}
/* /Components/Shared/SurveyItemWizardParts/WizardPreviewPanel.razor.rz.scp.css */
.right-column[b-3ir01hb6qb] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.right-column-content[b-3ir01hb6qb] {
    background-color: var(--selected-bg);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: -0.5rem;
    padding-top: 0.5rem;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
}

/* Nebeneinander mit dem Editor nimmt die Vorschau die Hoehe des Dialogs an,
   statt mit einer eigenen vh-Rechnung darueber hinauszuwachsen. */
@media (min-width: 992px) {
    .right-column-content[b-3ir01hb6qb] {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
    }
}

/* Preview panel */
.preview-panel[b-3ir01hb6qb] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Preview card - simulates survey display */
.preview-card[b-3ir01hb6qb] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background: var(--bs-white);
    overflow-wrap: break-word;
    word-break: break-word;
}

.preview-question[b-3ir01hb6qb] {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.preview-question[b-3ir01hb6qb]  p {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.preview-question[b-3ir01hb6qb]  p:last-child {
    margin-bottom: 0;
}

/* Preview image grid */
.preview-image-grid[b-3ir01hb6qb] {
    margin-bottom: 1rem;
}

.preview-image-table[b-3ir01hb6qb] {
    width: 100%;
    border-collapse: collapse;
}

.preview-image-table td[b-3ir01hb6qb] {
    padding: 0.25rem;
    vertical-align: top;
}

.preview-image-cell[b-3ir01hb6qb] {
    text-align: center;
}

.preview-image[b-3ir01hb6qb] {
    max-width: 100%;
    max-height: 8rem;
    border-radius: 0.375rem;
    object-fit: contain;
}

.preview-image-desc[b-3ir01hb6qb] {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    line-height: 1.3;
}

/* Preview answers */
.preview-answers[b-3ir01hb6qb] {
}

/* Preview option (radio/checkbox style) */
.preview-option[b-3ir01hb6qb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 0.125rem solid var(--bs-border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--bs-white);
}

.preview-option:hover[b-3ir01hb6qb] {
    border-color: var(--bs-primary);
}

.preview-option.selected[b-3ir01hb6qb] {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

/* Radio circle */
.preview-radio[b-3ir01hb6qb] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 0.125rem solid var(--bs-secondary);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.preview-radio.checked[b-3ir01hb6qb] {
    border-color: var(--bs-primary);
    border-width: 0.35rem;
}

/* Checkbox */
.preview-checkbox[b-3ir01hb6qb] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 0.125rem solid var(--bs-secondary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.preview-checkbox.checked[b-3ir01hb6qb] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Likert preview */
.preview-likert[b-3ir01hb6qb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.preview-likert.preview-likert-tiles[b-3ir01hb6qb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}

.preview-likert.preview-likert-tiles .preview-likert-option[b-3ir01hb6qb] {
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    padding: 0.75rem 0.5rem;
}

.preview-likert.preview-likert-tiles .preview-likert-icon[b-3ir01hb6qb] {
    font-size: 2rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-likert.preview-likert-tiles .preview-likert-text[b-3ir01hb6qb] {
    margin-top: 0.125rem;
}

/* Icon-only tiles: larger icons, centered */
.preview-likert.preview-likert-tiles.icons-only .preview-likert-option[b-3ir01hb6qb] {
    justify-content: center;
    align-items: center;
}

.preview-likert.preview-likert-tiles.icons-only .preview-likert-icon[b-3ir01hb6qb] {
    font-size: 3rem;
    height: auto;
}

.preview-likert-option[b-3ir01hb6qb] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--bs-border-color);
}

.preview-likert-option:hover[b-3ir01hb6qb] {
    background: var(--bs-light);
    border-color: var(--bs-primary);
}

.preview-likert-option.selected[b-3ir01hb6qb] {
    background: var(--bs-primary);
    color: var(--bs-white);
    border-color: var(--bs-primary);
}

.preview-likert-option.selected .preview-likert-icon[b-3ir01hb6qb],
.preview-binary-option.selected .preview-binary-icon[b-3ir01hb6qb] {
    color: var(--bs-white) !important;
}

.preview-likert-icon[b-3ir01hb6qb] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.preview-likert-text[b-3ir01hb6qb] {
    font-size: 0.875rem;
    line-height: 1.3;
}

/* Rating preview */
.preview-rating[b-3ir01hb6qb] {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.preview-rating-icon[b-3ir01hb6qb] {
    cursor: pointer;
}

.preview-rating-icon .material-symbols-outlined[b-3ir01hb6qb] {
    font-size: 3rem;
}

.preview-rating-point[b-3ir01hb6qb] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 0.125rem solid var(--bs-border-color);
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--bs-white);
}

.preview-rating-point:hover[b-3ir01hb6qb] {
    border-color: var(--bs-primary);
    transform: scale(1.1);
}

.preview-rating-point.selected[b-3ir01hb6qb] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

/* Slider preview */
.preview-slider[b-3ir01hb6qb] {
    padding: 0.5rem 0;
}

.preview-slider-value[b-3ir01hb6qb] {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin-top: 0.25rem;
}

.range-lg[b-3ir01hb6qb]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bs-primary);
    border: none;
    margin-top: -0.375rem;
    cursor: pointer;
}

.range-lg[b-3ir01hb6qb]::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bs-primary);
    border: none;
    cursor: pointer;
}

.range-lg[b-3ir01hb6qb]::-webkit-slider-runnable-track {
    height: 0.75rem;
    border-radius: 0.375rem;
    background: var(--bs-border-color);
}

.range-lg[b-3ir01hb6qb]::-moz-range-track {
    height: 0.75rem;
    border-radius: 0.375rem;
    background: var(--bs-border-color);
}

/* Binary preview */
.preview-binary[b-3ir01hb6qb] {
    display: flex;
    gap: 0.75rem;
}

.preview-binary-option[b-3ir01hb6qb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    border: 0.125rem solid var(--bs-border-color);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--bs-white);
    text-align: center;
    font-weight: 500;
}

.preview-binary-option:hover[b-3ir01hb6qb] {
    border-color: var(--bs-primary);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

.preview-binary-option.selected[b-3ir01hb6qb] {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.preview-binary-icon[b-3ir01hb6qb] {
    font-size: 2.5rem;
}

/* Free text preview */
.preview-freetext[b-3ir01hb6qb] {
    border: 0.125rem solid var(--bs-border-color);
    border-radius: 0.5rem;
    resize: none;
}


/* Ranking preview — zeigt die Liste in Autorenreihenfolge mit den Platznummern,
   die der Teilnehmer später durch Ziehen oder über die Nummernauswahl verändert. */
.preview-ranking[b-3ir01hb6qb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.preview-ranking-row[b-3ir01hb6qb] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 0.0625rem solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-white);
}

.preview-ranking-row.preview-ranking-unranked[b-3ir01hb6qb] {
    background: var(--bs-light);
    opacity: 0.75;
}

.preview-ranking-rank[b-3ir01hb6qb] {
    flex-shrink: 0;
    min-width: 1.5rem;
    text-align: center;
    font-weight: 600;
    color: var(--bs-secondary);
}

.preview-ranking-handle[b-3ir01hb6qb] {
    margin-left: auto;
    color: var(--bs-secondary);
}
/* /Components/Shared/SurveyItemWizardParts/WizardTextTab.razor.rz.scp.css */
.rich-editor-scroll[b-bo7p12yjpa] {
    max-height: 46vh;
    overflow-y: auto;
}

/* Placeholder list */
.placeholder-list[b-bo7p12yjpa] {
    min-width: 10rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    overflow-y: auto;
    max-height: 46vh;
}

.placeholder-list[b-bo7p12yjpa]  .list-group-item {
    font-family: monospace;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.placeholder-list[b-bo7p12yjpa]  .list-group-item:hover {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

/* Perspective picker popup (triggered by "+" button next to perspective tabs) */
.perspective-picker-overlay[b-bo7p12yjpa] {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.perspective-picker-menu[b-bo7p12yjpa] {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 14rem;
    z-index: 11;
    background-color: var(--surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.25rem 0;
}

.perspective-picker-item[b-bo7p12yjpa] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.9rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
}

.perspective-picker-item:hover[b-bo7p12yjpa] {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

.perspective-picker-divider[b-bo7p12yjpa] {
    margin: 0.25rem 0;
    border-top: 1px solid var(--bs-border-color);
    opacity: 1;
}
/* /Components/Shared/SurveyStatusPicker.razor.rz.scp.css */
/* Scoped styles for SurveyStatusPicker component */

.status-select[b-onvw64xchq] {
    width: auto;
}
/* /Components/Shared/TreeEditor.razor.rz.scp.css */
.tree-view[b-znsulk7qgp] {
    user-select: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tree-view-content[b-znsulk7qgp] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.tree-drop-zone-root[b-znsulk7qgp] {
    height: 0.25rem;
    border-radius: 0.125rem;
    transition: all 0.15s;
    margin-top: 0.25rem;
}

.tree-drop-zone-root:hover[b-znsulk7qgp] {
    height: 0.25rem;
    background-color: var(--bs-primary);
}
/* /Components/Shared/TreeEditorNode.razor.rz.scp.css */
/* Component-specific state styles for the TreeEditor. Shared tree chrome
   (connectors, toggle, indent, node-name layout) lives in wwwroot/css/app.css. */

.tree-node[b-p5ckzxxbky] {
    font-size: 1.3rem;
}

.tree-node-header.selected .tree-node-name[b-p5ckzxxbky] {
    background-color: var(--bs-primary);
    color: white;
}

.tree-node-header.selected.inactive .tree-node-name[b-p5ckzxxbky] {
    background-color: var(--bs-secondary);
    color: black;
}

.tree-node-header.drag-over .tree-node-name[b-p5ckzxxbky] {
    background-color: var(--bs-primary);
    color: white;
    opacity: 0.6;
}

.tree-node-header.selected .badge[b-p5ckzxxbky] {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.tree-node-header.selected.inactive .badge[b-p5ckzxxbky] {
    background-color: rgba(0, 0, 0, 0.15) !important;
    color: black;
}

.permission-icon[b-p5ckzxxbky] {
    color: var(--bs-primary);
}

.permission-icon.permission-icon-shared[b-p5ckzxxbky] {
    color: black;
    background-color: var(--bs-warning);
    border-radius: 0.25rem;
    padding: 0.05rem 0.15rem;
}

.tree-node-header.selected .permission-icon[b-p5ckzxxbky],
.tree-node-header.selected .text-muted[b-p5ckzxxbky],
.tree-node-header.drag-over .permission-icon[b-p5ckzxxbky],
.tree-node-header.drag-over .permission-icon[b-p5ckzxxbky] {
    color: white;
}

.tree-node-header.selected .permission-icon.permission-icon-shared[b-p5ckzxxbky],
.tree-node-header.drag-over .permission-icon.permission-icon-shared[b-p5ckzxxbky] {
    color: black;
}

.tree-node-header.selected.inactive .permission-icon[b-p5ckzxxbky],
.tree-node-header.selected.inactive .text-muted[b-p5ckzxxbky] {
    color: black;
}

.tree-drop-zone[b-p5ckzxxbky] {
    height: 0.25rem;
    border-radius: 0.125rem;
    transition: all 0.15s;
}

.tree-drop-zone:hover[b-p5ckzxxbky] {
    height: 0.25rem;
    background-color: var(--bs-primary);
}

.sort-buttons[b-p5ckzxxbky] {
    flex-shrink: 0;
    gap: 0.15rem;
    align-self: stretch;
}

.sort-btn[b-p5ckzxxbky] {
    padding: 0.15rem 0.4rem;
    align-self: stretch;
}
/* /Components/Shared/TreeListView.razor.rz.scp.css */
.list-scroll[b-5o36dfi159] {
    max-height: 34vh;
    overflow-y: auto;
}

.list-results[b-5o36dfi159] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    width: 100%;
}

.list-result-item[b-5o36dfi159] {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.15s;
}

.list-result-item:last-child[b-5o36dfi159] {
    border-bottom: none;
}

.list-result-item:hover[b-5o36dfi159] {
    background-color: var(--bs-light);
}

.list-result-item.selected[b-5o36dfi159] {
    background-color: var(--bs-primary);
    color: white;
}

.list-result-item.selected .breadcrumb-ancestor[b-5o36dfi159] {
    color: rgba(255, 255, 255, 0.7);
}

.list-result-item.selected .breadcrumb-separator[b-5o36dfi159] {
    color: rgba(255, 255, 255, 0.5);
}

.list-result-item.selected .badge[b-5o36dfi159] {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.search-breadcrumb[b-5o36dfi159] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.1rem;
}

.breadcrumb-separator[b-5o36dfi159] {
    font-size: 0.9rem;
    color: var(--bs-secondary);
}

.breadcrumb-ancestor[b-5o36dfi159] {
    color: var(--bs-secondary);
}

.breadcrumb-current[b-5o36dfi159] {
    font-weight: 600;
}
/* /Components/Shared/TreePicker.razor.rz.scp.css */
.tree-picker-scroll[b-o1ufq4tetc] {
    max-height: 39vh;
    overflow-y: auto;
}
/* /Components/Shared/TreePickerNode.razor.rz.scp.css */
/* Component-specific state styles for the TreePicker. Shared tree chrome
   (connectors, toggle, indent, node-name layout) lives in wwwroot/css/app.css. */

/* Read-only mode (cascaded from the editor when the user has only Use/ResultsOnly):
   the name area is no longer a target — no pointer cursor, no hover-highlight.
   Expand/collapse stays interactive because .tree-toggle keeps its own pointer
   cursor and click handler. */
.tree-node-readonly .tree-node-header[b-6ras2dg0yt] {
    cursor: default;
}

.tree-node-readonly .tree-node-header:hover .tree-node-name[b-6ras2dg0yt] {
    background-color: transparent;
}

/* Grouping nodes: organizational containers (e.g. "Jahrgangsstufen") that exist only
   to group their children. They stay clickable — a click toggles expand/collapse
   instead of selecting — and look visually distinct via muted text. The `>` keeps
   the muted styling on the grouping node itself and never leaks into its descendant
   value nodes. */
.tree-node-grouping > .tree-node-header .tree-node-name[b-6ras2dg0yt] {
    color: var(--bs-primary);
}

.tree-node-header.assigned .tree-node-name[b-6ras2dg0yt] {
    background-color: var(--bs-primary);
    color: white;
}

.tree-node-header.assigned .badge[b-6ras2dg0yt] {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.picker-action-slot[b-6ras2dg0yt] {
    width: 2.2rem;
    min-width: 2.2rem;
    height: 1.8rem;
    flex-shrink: 0;
}