/* /Components/DesignSystem/PeoplegridAvatar.razor.rz.scp.css */
/*
    Die Grundregeln des Avatars stehen im globalen Blatt, damit sie auch die App Shell
    verwenden kann. Hier stehen nur die Größenstufen.
*/
.pg-avatar--sm[b-a6abs6qf9l] { width: 26px; height: 26px; font-size: 10px; }

.pg-avatar--md[b-a6abs6qf9l] { width: 32px; height: 32px; font-size: 11.5px; }

.pg-avatar--lg[b-a6abs6qf9l] { width: 56px; height: 56px; font-size: 19px; }

.pg-avatar--accent[b-a6abs6qf9l] {
    background: var(--pg-color-accent-800);
    color: var(--pg-color-accent-100);
}
/* /Components/DesignSystem/PeoplegridBrandMark.razor.rz.scp.css */
/*
    Die Größe kommt aus den width/height-Attributen der Komponente, nicht aus diesem Blatt.
    Hier steht nur, was unabhängig von der Verwendungsstelle gilt.
*/
.pg-brandmark[b-091fbnp8z4] {
    display: block;
    flex: none;
    /* Die Marke wird nie gestaucht, auch nicht in einem engen Flex-Container. */
    object-fit: contain;
}
/* /Components/DesignSystem/PeoplegridCard.razor.rz.scp.css */
.pg-card__header[b-tvd2fzihym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-4);
    padding: var(--pg-space-4) var(--pg-space-6);
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-card__heading[b-tvd2fzihym] { min-width: 0; }

.pg-card__title[b-tvd2fzihym] {
    font-family: var(--pg-font-heading);
    font-weight: var(--pg-font-heading-weight);
    font-size: 15px;
}

.pg-card__subtitle[b-tvd2fzihym] {
    font-size: 11.5px;
    color: var(--pg-color-neutral-500);
}

.pg-card__actions[b-tvd2fzihym] {
    display: flex;
    align-items: center;
    gap: var(--pg-space-2);
    flex: none;
}

.pg-card__body[b-tvd2fzihym] { min-width: 0; }

.pg-card__footer[b-tvd2fzihym] {
    padding: var(--pg-space-3) var(--pg-space-6);
    border-top: 1px solid var(--pg-color-divider);
}

/*
    Die Karte selbst trägt bereits Innenabstand. Karten mit eigenem Kopf- oder Fußbereich
    setzen ihn zurück, damit die Trennlinien bis an die Kante laufen.
*/
.card:has(.pg-card__header)[b-tvd2fzihym],
.card:has(.pg-card__footer)[b-tvd2fzihym] {
    padding: 0;
    gap: 0;
}

.card:has(.pg-card__header) .pg-card__body[b-tvd2fzihym],
.card:has(.pg-card__footer) .pg-card__body[b-tvd2fzihym] {
    padding: var(--pg-space-6);
}

.pg-card--flush .pg-card__body[b-tvd2fzihym] { padding: 0 !important; }
/* /Components/DesignSystem/PeoplegridDefinitionList.razor.rz.scp.css */
.pg-deflist[b-b8f8o9p2m9] { margin: 0; display: flex; flex-direction: column; }

.pg-deflist__row[b-b8f8o9p2m9] {
    display: flex;
    gap: var(--pg-space-4);
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--pg-color-divider);
    font-size: 13px;
}

.pg-deflist__row:last-child[b-b8f8o9p2m9] { border-bottom: 0; }

.pg-deflist__key[b-b8f8o9p2m9] { color: var(--pg-color-neutral-500); flex: none; margin: 0; }

.pg-deflist__value[b-b8f8o9p2m9] { text-align: right; margin: 0; min-width: 0; overflow-wrap: anywhere; }

.pg-deflist__empty[b-b8f8o9p2m9] { color: var(--pg-color-neutral-700); }
/* /Components/DesignSystem/PeoplegridEmptyState.razor.rz.scp.css */
.pg-state__actions[b-n8yd4i6qn4] {
    display: flex;
    gap: var(--pg-space-2);
    flex-wrap: wrap;
    justify-content: center;
}
/* /Components/DesignSystem/PeoplegridInput.razor.rz.scp.css */
.pg-field__required[b-k4vtmalw0m] {
    color: var(--pg-color-accent);
    margin-left: 2px;
}
/* /Components/DesignSystem/PeoplegridModal.razor.rz.scp.css */
.pg-modal__head[b-r7bv8flhyc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pg-space-4);
}
/* /Components/DesignSystem/PeoplegridPagination.razor.rz.scp.css */
.pg-pagination[b-jro9gg7189] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-4);
    flex-wrap: wrap;
    padding: 11px 16px;
    border-top: 1px solid var(--pg-color-divider);
    font-size: 12.5px;
    color: var(--pg-color-neutral-500);
}

.pg-pagination__controls[b-jro9gg7189] {
    display: flex;
    align-items: center;
    gap: var(--pg-space-2);
}

.pg-pagination__position[b-jro9gg7189] { padding: 0 var(--pg-space-2); white-space: nowrap; }

[b-jro9gg7189] .pg-pagination__button { height: 30px; min-height: 30px; padding: 0 10px; }
/* /Components/DesignSystem/PeoplegridSearch.razor.rz.scp.css */
.pg-search[b-ihvw35iuxh] {
    position: relative;
    display: block;
    width: 100%;
}

.pg-search__icon[b-ihvw35iuxh] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--pg-color-neutral-500);
    pointer-events: none;
}

.pg-search__input[b-ihvw35iuxh] {
    padding-left: 30px;
    padding-right: 44px;
    height: 34px;
    min-height: 34px;
}

.pg-search__input[b-ihvw35iuxh]::-webkit-search-cancel-button { filter: invert(0.6); }

.pg-search__shortcut[b-ihvw35iuxh] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10.5px;
    color: var(--pg-color-neutral-600);
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-sm);
    padding: 1px 5px;
    pointer-events: none;
}
/* /Components/DesignSystem/PeoplegridSegmentedControl.razor.rz.scp.css */
/*
    Die gemeinsamen Regeln der segmentierten Auswahl stehen im globalen Blatt
    (peoplegrid-base.css): Sie gelten auch für die Linkvariante der statisch gerenderten
    Seiten (ADR-0012), die dieses komponentenlokale Blatt nicht erreichen würde.

    Hier bleibt nur, was ausschließlich die Radiovariante betrifft.
*/
.pg-segmented__option--active[b-kxyh8gcvlf] {
    color: var(--pg-color-accent);
    box-shadow: inset 0 0 0 1px var(--pg-color-accent);
}
/* /Components/DesignSystem/PeoplegridStatCard.razor.rz.scp.css */
.pg-stat[b-p5dnnp5rmx] {
    gap: 6px;
    padding: 16px;
}

.pg-stat__head[b-p5dnnp5rmx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-2);
    color: var(--pg-color-neutral-400);
    font-size: 12.5px;
}

[b-p5dnnp5rmx] .pg-stat__icon { color: var(--pg-color-accent); }

.pg-stat__value[b-p5dnnp5rmx] {
    font-family: var(--pg-font-heading);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pg-stat__hint[b-p5dnnp5rmx] { font-size: 11.5px; color: var(--pg-color-neutral-500); }

/* Der Platzhalterzustand bleibt sichtbar ruhig – er soll nicht wie ein Fehler wirken. */
.pg-stat--pending[b-p5dnnp5rmx]  .pg-stat__icon { color: var(--pg-color-neutral-600); }

.pg-stat__value--pending[b-p5dnnp5rmx] { color: var(--pg-color-neutral-700); }
/* /Components/DesignSystem/PeoplegridTable.razor.rz.scp.css */
/*
    Breite Tabellen scrollen in ihrem eigenen Container. Die Seite selbst scrollt niemals
    horizontal (Umsetzungsplan 12).
*/
.pg-table__scroll[b-dc026l1xjs] {
    overflow-x: auto;
    width: 100%;
}

.pg-table__skeletons[b-dc026l1xjs] {
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-2);
    padding: var(--pg-space-4) var(--pg-space-6);
}

.pg-table__state[b-dc026l1xjs] { padding: var(--pg-space-4) var(--pg-space-6); }
/* /Components/DesignSystem/PeoplegridTabs.razor.rz.scp.css */
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
.pg-account[b-be8jbc3m60] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pg-space-8) var(--pg-space-6);
    background: var(--pg-color-bg);
}

.pg-account__panel[b-be8jbc3m60] {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-6);
}

.pg-account__brand[b-be8jbc3m60] {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.pg-account__product[b-be8jbc3m60] {
    font-family: var(--pg-font-heading);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
}

.pg-account__footnote[b-be8jbc3m60] {
    margin: 0;
    text-align: center;
    font-size: 11.5px;
    color: var(--pg-color-neutral-600);
}
/* /Components/Layout/AppShellLayout.razor.rz.scp.css */
.pg-shell[b-g034dhk9cz] {
    display: flex;
    height: 100vh;
    min-height: 480px;
    overflow: hidden;
    background: var(--pg-color-bg);
    color: var(--pg-color-text);
    font-family: var(--pg-font-body);
    font-size: 14px;
}

/*
    Der Schalter selbst ist unsichtbar; sichtbar ist das Label in der Kopfzeile. Er bleibt
    fokussierbar, damit die Navigation auch per Tastatur ein- und ausgeklappt werden kann.

    Bewusst ohne "pointer-events: none": Ein Klick auf das Label wird an das Kontrollkästchen
    weitergereicht, und genau dieser weitergereichte Klick würde davon blockiert.
*/
.pg-shell__toggle[b-g034dhk9cz] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.pg-shell__content[b-g034dhk9cz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pg-shell__main[b-g034dhk9cz] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 56px;
}

@media (max-width: 640px) {
    .pg-shell__main[b-g034dhk9cz] { padding: 16px 14px 40px; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.pg-plain[b-bp3omnhk13] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pg-space-8) var(--pg-space-6);
    background: var(--pg-color-bg);
}

.pg-plain__panel[b-bp3omnhk13] {
    width: min(520px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-6);
}

.pg-plain__brand[b-bp3omnhk13] {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.pg-plain__product[b-bp3omnhk13] {
    font-family: var(--pg-font-heading);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
}

.pg-plain__main[b-bp3omnhk13] { min-width: 0; }
/* /Components/Layout/PeoplegridHeader.razor.rz.scp.css */
.pg-header[b-f2m87atu8z] {
    flex: none;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-header__toggle[b-f2m87atu8z] {
    flex: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pg-radius-sm);
    color: var(--pg-color-neutral-500);
    font-size: 17px;
    cursor: pointer;
}

.pg-header__toggle:hover[b-f2m87atu8z] { color: var(--pg-color-text); }

.pg-header__titles[b-f2m87atu8z] {
    min-width: 0;
    flex: 0 1 auto;
    max-width: 46%;
}

.pg-breadcrumbs ol[b-f2m87atu8z] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    color: var(--pg-color-neutral-500);
    white-space: nowrap;
    overflow: hidden;
}

.pg-breadcrumbs li[b-f2m87atu8z] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
}

.pg-breadcrumbs li > span[b-f2m87atu8z],
.pg-breadcrumbs li > a[b-f2m87atu8z] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-breadcrumbs a[b-f2m87atu8z] { color: inherit; }
.pg-breadcrumbs a:hover[b-f2m87atu8z] { color: var(--pg-color-text); }

.pg-breadcrumbs i[b-f2m87atu8z] { font-size: 10px; opacity: 0.6; flex: none; }

/* Das letzte Element ist die aktuelle Seite und bekommt keinen Trenner. */
.pg-breadcrumbs li:last-child i[b-f2m87atu8z] { display: none; }

.pg-breadcrumbs__current[b-f2m87atu8z] { color: var(--pg-color-neutral-400); }

.pg-header__title[b-f2m87atu8z] {
    font-family: var(--pg-font-heading);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-header__actions[b-f2m87atu8z] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.pg-header__search[b-f2m87atu8z] { width: 280px; max-width: 36vw; }

.pg-header__divider[b-f2m87atu8z] {
    width: 1px;
    height: 22px;
    background: var(--pg-color-divider);
    margin: 0 2px;
}

/*
    Auf schmalen Viewports weicht zuerst die Suche, dann die Brotkrumen. Der Seitentitel
    und das Profilmenü bleiben immer erreichbar (Umsetzungsplan 12).
*/
@media (max-width: 900px) {
    .pg-header__search[b-f2m87atu8z] { display: none; }
    .pg-header__titles[b-f2m87atu8z] { max-width: none; }
}

@media (max-width: 640px) {
    .pg-header[b-f2m87atu8z] { padding: 0 12px; gap: 8px; }
    .pg-breadcrumbs[b-f2m87atu8z] { display: none; }
}
/* /Components/Layout/PeoplegridSidebar.razor.rz.scp.css */
/*
    Die Breite der Navigation steht bewusst nicht hier, sondern im globalen Blatt
    (peoplegrid-base.css): Sie hängt vom Schalter der App Shell und vom Viewport ab und ist
    damit keine Eigenschaft dieser einen Komponente. Stünde sie zusätzlich hier, würde die
    komponentenlokale Regel die globale bei gleicher Spezifität überstimmen.
*/
.pg-sidebar[b-lm0rf3o9wo] {
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--pg-color-bg);
    border-right: 1px solid var(--pg-color-divider);
}

.pg-sidebar__brand[b-lm0rf3o9wo] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
    flex: none;
}

.pg-sidebar__product[b-lm0rf3o9wo] {
    font-family: var(--pg-font-heading);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.pg-sidebar__nav[b-lm0rf3o9wo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}

/*
    Die Menüpunkte rendert NavLink – eine eigene Komponente. Blazor gibt das Scope-Attribut
    dieses Blatts nicht an deren Element weiter; ohne ::deep griffe keine Regel auf den Link
    selbst (kein Abstand, kein Hover, Unterstreichung und Linkfarbe des Browsers).
*/
.pg-sidebar__nav[b-lm0rf3o9wo]  .pg-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--pg-radius-md);
    font-size: 13.5px;
    text-align: left;
    text-decoration: none;
    color: var(--pg-color-neutral-300);
    background: transparent;
}

.pg-sidebar__nav[b-lm0rf3o9wo]  .pg-nav-item:hover {
    background: color-mix(in srgb, var(--pg-color-text) 7%, transparent);
    color: var(--pg-color-text);
    text-decoration: none;
}

/* NavLink setzt "active" auf dem aktuellen Bereich. */
.pg-sidebar__nav[b-lm0rf3o9wo]  .pg-nav-item.active {
    background: var(--pg-color-accent-900);
    color: var(--pg-color-accent-200);
}

.pg-nav-item__icon[b-lm0rf3o9wo] { font-size: 17px; flex: none; }

/*
    Zähler am rechten Rand eines Eintrags. Maße und Farben stehen unverändert so im
    Prototyp: eine Pille aus der Akzentreihe, klein genug, um die Zeile nicht zu sprengen.
*/
.pg-nav-item__badge[b-lm0rf3o9wo] {
    flex: none;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--pg-color-accent-800);
    color: var(--pg-color-accent-100);
}

/* Auf dem aktiven Eintrag steht die Pille auf der Akzentfläche und braucht mehr Kante. */
.pg-nav-item.active .pg-nav-item__badge[b-lm0rf3o9wo] {
    background: var(--pg-color-accent-700);
}

.pg-nav-item__label[b-lm0rf3o9wo] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-sidebar__nav[b-lm0rf3o9wo]  .pg-nav-item--pending {
    color: var(--pg-color-neutral-600);
    cursor: default;
}

.pg-sidebar__nav[b-lm0rf3o9wo]  .pg-nav-item--pending:hover {
    background: transparent;
    color: var(--pg-color-neutral-600);
}

.pg-nav-item__pending[b-lm0rf3o9wo] { font-size: 12px; flex: none; opacity: 0.8; }

.pg-sidebar__footer[b-lm0rf3o9wo] {
    flex: none;
    padding: 8px;
    border-top: 1px solid var(--pg-color-divider);
}

.pg-sidebar__user[b-lm0rf3o9wo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--pg-radius-md);
    min-width: 0;
}

.pg-sidebar__user:hover[b-lm0rf3o9wo] { background: color-mix(in srgb, var(--pg-color-text) 7%, transparent); }

.pg-avatar[b-lm0rf3o9wo] {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--pg-color-accent-800);
    color: var(--pg-color-accent-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 600;
}

.pg-sidebar__identity[b-lm0rf3o9wo] { flex: 1; min-width: 0; }

.pg-sidebar__name[b-lm0rf3o9wo] {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-sidebar__tenant[b-lm0rf3o9wo] {
    font-size: 11px;
    color: var(--pg-color-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-sidebar__logout[b-lm0rf3o9wo] { flex: none; margin: 0; }

.pg-sidebar__iconbutton[b-lm0rf3o9wo] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--pg-color-neutral-500);
    border-radius: var(--pg-radius-sm);
    cursor: pointer;
    font-size: 15px;
}

.pg-sidebar__iconbutton:hover[b-lm0rf3o9wo] { color: var(--pg-color-text); }
/* /Components/Layout/PeoplegridUserMenu.razor.rz.scp.css */
.pg-usermenu[b-amlf4fzl7i] { position: relative; flex: none; }

.pg-usermenu__trigger[b-amlf4fzl7i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--pg-color-divider);
    background: transparent;
    color: var(--pg-color-text);
    border-radius: 20px;
    cursor: pointer;
    font: inherit;
}

.pg-usermenu__trigger:hover[b-amlf4fzl7i] { background: color-mix(in srgb, var(--pg-color-text) 7%, transparent); }

.pg-usermenu__avatar[b-amlf4fzl7i] { width: 26px; height: 26px; }

.pg-usermenu__caret[b-amlf4fzl7i] { font-size: 11px; color: var(--pg-color-neutral-500); }

.pg-usermenu__panel[b-amlf4fzl7i] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: var(--pg-z-drawer);
    min-width: 232px;
    display: flex;
    flex-direction: column;
    border-radius: var(--pg-radius-md);
    background: var(--pg-color-surface);
    box-shadow: var(--pg-shadow-md);
    overflow: hidden;
}

.pg-usermenu__identity[b-amlf4fzl7i] {
    padding: var(--pg-space-3) var(--pg-space-4);
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-usermenu__name[b-amlf4fzl7i] { font-size: 13.5px; }

.pg-usermenu__email[b-amlf4fzl7i] {
    font-size: 11.5px;
    color: var(--pg-color-neutral-500);
    overflow-wrap: anywhere;
}

.pg-usermenu__tenant[b-amlf4fzl7i] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--pg-space-3) var(--pg-space-4);
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-usermenu__tenantlabel[b-amlf4fzl7i] {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pg-color-neutral-600);
}

.pg-usermenu__tenantname[b-amlf4fzl7i] { font-size: 13px; color: var(--pg-color-accent-200); }

.pg-usermenu__form[b-amlf4fzl7i] { margin: 0; }

.pg-usermenu__item[b-amlf4fzl7i] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: var(--pg-space-3) var(--pg-space-4);
    border: 0;
    background: transparent;
    color: var(--pg-color-text);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.pg-usermenu__item:hover[b-amlf4fzl7i] { background: color-mix(in srgb, var(--pg-color-text) 7%, transparent); }
.pg-usermenu__item i[b-amlf4fzl7i] { font-size: 15px; color: var(--pg-color-neutral-400); }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-zery76me9o],
.components-reconnect-repeated-attempt-visible[b-zery76me9o],
.components-reconnect-failed-visible[b-zery76me9o],
.components-pause-visible[b-zery76me9o],
.components-resume-failed-visible[b-zery76me9o],
.components-rejoining-animation[b-zery76me9o] {
    display: none;
}

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


#components-reconnect-modal[b-zery76me9o] {
    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-zery76me9o 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-zery76me9o {
    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;
    }
}
/* /Features/Account/Login.razor.rz.scp.css */
.pg-login[b-jnqoyl37k8] { gap: var(--pg-space-6); padding: var(--pg-space-8); }

.pg-login__intro[b-jnqoyl37k8] { display: flex; flex-direction: column; gap: 2px; }

.pg-login__title[b-jnqoyl37k8] { font-size: 22px; margin: 0; letter-spacing: -0.02em; }

.pg-login__subtitle[b-jnqoyl37k8] { margin: 0; font-size: 13px; color: var(--pg-color-neutral-400); }

.pg-login__fields[b-jnqoyl37k8] {
    display: flex;
    flex-direction: column;
    gap: var(--pg-space-4);
}

.pg-login__labelrow[b-jnqoyl37k8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pg-space-3);
}

.pg-login__labelrow label[b-jnqoyl37k8] { margin-bottom: 5px; }

.pg-login__forgot[b-jnqoyl37k8] { font-size: 11.5px; }

.pg-login__submit[b-jnqoyl37k8] { margin-top: var(--pg-space-6); }
/* /Features/Dashboard/Dashboard.razor.rz.scp.css */
.pg-dashboard__intro[b-vfl0ao0nvn] { display: flex; flex-direction: column; gap: 4px; }

.pg-dashboard__greeting[b-vfl0ao0nvn] { margin: 0; font-size: 24px; letter-spacing: -0.02em; }

/*
    Zweispaltiges Raster wie im Prototyp: links die Tabelle, rechts die schmale Spalte.
    Auf schmalen Viewports fallen beide untereinander (Umsetzungsplan 12).
*/
.pg-dashboard__grid[b-vfl0ao0nvn] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--pg-space-6);
    align-items: start;
}

@media (max-width: 1080px) {
    .pg-dashboard__grid[b-vfl0ao0nvn] { grid-template-columns: minmax(0, 1fr); }
}

.pg-dashboard__cardhead[b-vfl0ao0nvn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-4);
    padding: 14px 16px;
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-dashboard__cardtitle[b-vfl0ao0nvn] { font-family: var(--pg-font-heading); font-size: 15px; }

.pg-dashboard__aside[b-vfl0ao0nvn] { display: flex; flex-direction: column; gap: var(--pg-space-6); }

.pg-dashboard__pending[b-vfl0ao0nvn] { display: flex; flex-direction: column; gap: var(--pg-space-4); }

.pg-dashboard__activities[b-vfl0ao0nvn] { padding: 16px; display: flex; flex-direction: column; gap: var(--pg-space-3); }

.pg-dashboard__link[b-vfl0ao0nvn] { color: inherit; text-decoration: none; }

.pg-dashboard__link:hover[b-vfl0ao0nvn],
.pg-dashboard__link:focus-visible[b-vfl0ao0nvn] { text-decoration: underline; }

/* Zeitstrahl der Aktivitäten, unverändert aus dem Prototyp übernommen. */
.pg-activity[b-vfl0ao0nvn] { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.pg-activity__item[b-vfl0ao0nvn] { display: flex; gap: 10px; }

.pg-activity__marker[b-vfl0ao0nvn] {
    width: 7px;
    height: 7px;
    flex: none;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--pg-color-accent-600);
}

.pg-activity__body[b-vfl0ao0nvn] { flex: 1; min-width: 0; }

.pg-activity__text[b-vfl0ao0nvn] { font-size: 13px; }

.pg-activity__meta[b-vfl0ao0nvn] { font-size: 11.5px; color: var(--pg-color-neutral-500); }
/* /Features/Documents/DocumentView.razor.rz.scp.css */
.pg-document__head[b-la3647bs7t] { display: grid; gap: var(--pg-space-4); }

.pg-document__identity[b-la3647bs7t] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pg-space-3);
}

/*
    Die Vorschau bleibt innerhalb der Karte und wächst nicht über sie hinaus. Ein hoher
    Scan bekommt eine Obergrenze, damit die Seite bedienbar bleibt.
*/
.pg-document__preview[b-la3647bs7t] {
    display: block;
    max-width: 100%;
    max-height: 640px;
    margin-inline: auto;
    border-radius: var(--pg-radius-md);
    border: 1px solid var(--pg-color-divider);
}

/* Der Prüfwert wird gekürzt dargestellt; er soll erkennbar, nicht lesbar sein. */
.pg-document__hash[b-la3647bs7t] { font-size: 12px; letter-spacing: 0.02em; }
/* /Features/Employees/AddEmployee.razor.rz.scp.css */
.pg-addemployee__body[b-sib3ppal9i] { display: flex; flex-direction: column; gap: var(--pg-space-8); }

.pg-addemployee__footer[b-sib3ppal9i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-4);
    flex-wrap: wrap;
}
/* /Features/Employees/ChangeEmployeeStatus.razor.rz.scp.css */
.pg-statuschoices[b-nifdxbxxxf] { display: flex; flex-direction: column; gap: var(--pg-space-3); }

/*
    Aufbau wie die Profilauswahl im Prototyp: umrandete Zeile mit Auswahl, Beschriftung und
    erklärender Zweitzeile.
*/
.pg-statuschoice[b-nifdxbxxxf] {
    display: flex;
    gap: var(--pg-space-4);
    align-items: flex-start;
    padding: 13px 14px;
    border: 1px solid var(--pg-color-divider);
    border-radius: var(--pg-radius-md);
    cursor: pointer;
}

.pg-statuschoice:hover[b-nifdxbxxxf] { background: color-mix(in srgb, var(--pg-color-text) 5%, transparent); }

.pg-statuschoice:has(input:checked)[b-nifdxbxxxf] {
    border-color: var(--pg-color-accent);
    background: var(--pg-color-accent-900);
}

.pg-statuschoice:has(input:focus-visible)[b-nifdxbxxxf] {
    outline: 2px solid var(--pg-color-accent);
    outline-offset: 2px;
}

.pg-statuschoice__body[b-nifdxbxxxf] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pg-statuschoice__label[b-nifdxbxxxf] { font-size: 14px; }

.pg-statuschoice__hint[b-nifdxbxxxf] { font-size: 12.5px; color: var(--pg-color-neutral-500); }
/* /Features/Employees/EditEmployee.razor.rz.scp.css */
.pg-edit__body[b-2t2ipuz9md] { display: flex; flex-direction: column; gap: var(--pg-space-8); }

.pg-edit__footer[b-2t2ipuz9md] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pg-space-4);
    flex-wrap: wrap;
}

.pg-edit__conflict[b-2t2ipuz9md] { margin-top: var(--pg-space-3); }
/* /Features/Employees/EmployeeList.razor.rz.scp.css */
.pg-employees__row[b-v84rd0wp0p] { cursor: pointer; }

.pg-employees__row:hover[b-v84rd0wp0p] { background: color-mix(in srgb, var(--pg-color-text) 5%, transparent); }

/*
    Der Name ist ein echter Link, damit „In neuem Tab öffnen“, Tastaturbedienung und
    Screenreader funktionieren. Die klickbare Zeile ist nur eine Bequemlichkeit obendrauf.
*/
.pg-employees__link[b-v84rd0wp0p] { color: inherit; text-decoration: none; }

.pg-employees__link:hover[b-v84rd0wp0p],
.pg-employees__link:focus-visible[b-v84rd0wp0p] { text-decoration: underline; }

[b-v84rd0wp0p] .pg-employees__table { min-width: 1120px; }

/* Die Spalte trägt eine Nebeninformation und darf nicht umbrechen. */
.pg-employees__changed[b-v84rd0wp0p] { white-space: nowrap; font-size: 12.5px; }
/* /Features/Employees/EmployeeProfile.razor.rz.scp.css */
.pg-profile__head[b-qzwd8oqqq9] { gap: var(--pg-space-4); }

.pg-profile__identity[b-qzwd8oqqq9] {
    display: flex;
    gap: var(--pg-space-6);
    align-items: flex-start;
    flex-wrap: wrap;
}

.pg-profile__titles[b-qzwd8oqqq9] { flex: 1; min-width: 220px; }

.pg-profile__nameline[b-qzwd8oqqq9] {
    display: flex;
    align-items: center;
    gap: var(--pg-space-3);
    flex-wrap: wrap;
}

.pg-profile__name[b-qzwd8oqqq9] { margin: 0; font-size: 21px; letter-spacing: -0.02em; }

.pg-profile__facts[b-qzwd8oqqq9] {
    margin-top: 6px;
    display: flex;
    gap: var(--pg-space-6);
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--pg-color-neutral-400);
}

.pg-profile__facts span[b-qzwd8oqqq9] { display: inline-flex; align-items: center; gap: 5px; }

.pg-profile__cardbody[b-qzwd8oqqq9] { padding: 6px 16px 14px; }

.pg-profile__note[b-qzwd8oqqq9] {
    margin: var(--pg-space-4) 0 0;
    font-size: 12px;
    color: var(--pg-color-neutral-500);
}
/* /Features/Internal/InternalLayout.razor.rz.scp.css */
.pg-internal[b-tnz6tj6420] {
    min-height: 100vh;
    background: var(--pg-color-bg);
    color: var(--pg-color-text);
    font-family: var(--pg-font-body);
    font-size: 14px;
    display: flex;
    flex-direction: column;
}

.pg-internal__bar[b-tnz6tj6420] {
    display: flex;
    align-items: center;
    gap: var(--pg-space-6);
    padding: var(--pg-space-4) var(--pg-space-6);
    border-bottom: 1px solid var(--pg-color-hairline);
    background: var(--pg-color-surface);
    flex-wrap: wrap;
}

.pg-internal__brand[b-tnz6tj6420] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pg-internal__product[b-tnz6tj6420] {
    font-family: var(--pg-font-heading);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.01em;
}

/*
    Die Kennzeichnung ist der einzige gestalterische Unterschied zum Kundenportal – und sie
    ist Absicht: Wer hier arbeitet, sieht fremde Unternehmen. Das soll man nicht verwechseln.
*/
.pg-internal__badge[b-tnz6tj6420] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--pg-radius-pill, 999px);
    border: 1px solid var(--pg-color-hairline);
    color: var(--pg-color-text-muted);
}

.pg-internal__nav[b-tnz6tj6420] {
    display: flex;
    align-items: center;
    gap: var(--pg-space-2);
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.pg-internal__link[b-tnz6tj6420] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--pg-radius-md, 8px);
    color: var(--pg-color-text-muted);
    text-decoration: none;
}

.pg-internal__link:hover[b-tnz6tj6420] {
    background: var(--pg-color-surface-raised, rgba(127, 127, 127, 0.08));
    color: var(--pg-color-text);
}

.pg-internal__link.active[b-tnz6tj6420] {
    background: var(--pg-color-surface-raised, rgba(127, 127, 127, 0.12));
    color: var(--pg-color-text);
    font-weight: 500;
}

.pg-internal__account[b-tnz6tj6420] {
    display: flex;
    align-items: center;
    gap: var(--pg-space-3);
}

.pg-internal__user[b-tnz6tj6420] {
    color: var(--pg-color-text-muted);
}

.pg-internal__main[b-tnz6tj6420] {
    flex: 1;
    padding: var(--pg-space-6);
    min-width: 0;
}

@media (max-width: 720px) {
    .pg-internal__bar[b-tnz6tj6420] {
        gap: var(--pg-space-3);
    }

    .pg-internal__main[b-tnz6tj6420] {
        padding: var(--pg-space-4);
    }
}
/* /Features/Organization/Departments.razor.rz.scp.css */
.pg-orgtable__actions[b-sabj1ecjth] { width: 48px; text-align: right; }

.pg-orgeditor__footer[b-sabj1ecjth] {
    display: flex;
    justify-content: flex-end;
    gap: var(--pg-space-3);
}
/* /Features/SelfService/EmployeePortalLayout.razor.rz.scp.css */
/*
    Rahmen des Mitarbeiterportals.

    Die Maße stammen aus dem Prototyp "peoplegrid Mitarbeiterportal.dc.html": 240 px
    Navigation, 56 px Kopfzeile, scrollender Inhaltsbereich.

    Das Portal hat bewusst keinen Einklappschalter. Im internen Portal ist er nötig, weil
    dort breite Tabellen stehen; hier sind die Seiten schmal, und ein Schalter wäre ein
    Bedienelement ohne Anlass. Auf schmalen Viewports rückt die Navigation stattdessen
    über den Inhalt.
*/
.pg-portal[b-jr3uejvllg] {
    display: flex;
    height: 100vh;
    min-height: 480px;
    overflow: hidden;
    background: var(--pg-color-bg);
    color: var(--pg-color-text);
    font-family: var(--pg-font-body);
    font-size: 14px;
}

.pg-portal[b-jr3uejvllg]  .pg-portal-sidebar {
    width: 240px;
}

.pg-portal__content[b-jr3uejvllg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pg-portal__header[b-jr3uejvllg] {
    flex: none;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    border-bottom: 1px solid var(--pg-color-divider);
}

.pg-portal__titles[b-jr3uejvllg] {
    min-width: 0;
    flex: 1;
}

.pg-portal__context[b-jr3uejvllg] {
    font-size: 11px;
    color: var(--pg-color-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-portal__title[b-jr3uejvllg] {
    font-family: var(--pg-font-heading);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-portal__actions[b-jr3uejvllg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pg-portal__main[b-jr3uejvllg] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 56px;
}

@media (max-width: 900px) {
    .pg-portal[b-jr3uejvllg]  .pg-portal-sidebar {
        width: 64px;
    }

    .pg-portal[b-jr3uejvllg]  .pg-portal-sidebar__brandtext,
    .pg-portal[b-jr3uejvllg]  .pg-portal-nav__label,
    .pg-portal[b-jr3uejvllg]  .pg-portal-nav__pending,
    .pg-portal[b-jr3uejvllg]  .pg-portal-sidebar__identity,
    .pg-portal[b-jr3uejvllg]  .pg-portal-sidebar__switch span,
    .pg-portal[b-jr3uejvllg]  .pg-portal-sidebar__logout {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .pg-portal[b-jr3uejvllg]  .pg-portal-sidebar__user {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .pg-portal__main[b-jr3uejvllg] {
        padding: 16px 14px 40px;
    }
}
/* /Features/SelfService/EmployeePortalSidebar.razor.rz.scp.css */
/*
    Die Navigation des Mitarbeiterportals.

    Sie verwendet ausschließlich die Tokens des peoplegrid-Design-Systems – Farben,
    Radien, Schriften und Abstände sind dieselben wie im internen Portal. Eigen ist nur
    der Aufbau: Das Portal hat weniger Einträge, keine Gruppen und eine Kopfzeile, die
    das Unternehmen nennt (Prototyp "peoplegrid Mitarbeiterportal.dc.html").
*/
.pg-portal-sidebar[b-75gb2jw3uh] {
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--pg-color-bg);
    border-right: 1px solid var(--pg-color-divider);
}

.pg-portal-sidebar__brand[b-75gb2jw3uh] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
    flex: none;
}

.pg-portal-sidebar__brandtext[b-75gb2jw3uh] {
    min-width: 0;
}

.pg-portal-sidebar__tenant[b-75gb2jw3uh] {
    font-family: var(--pg-font-heading);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-portal-sidebar__product[b-75gb2jw3uh] {
    font-size: 11px;
    color: var(--pg-color-neutral-500);
}

.pg-portal-nav[b-75gb2jw3uh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}

.pg-portal-nav__item[b-75gb2jw3uh] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--pg-radius-md);
    font-size: 13.5px;
    text-align: left;
    text-decoration: none;
    color: var(--pg-color-neutral-300);
    background: transparent;
}

.pg-portal-nav__item:hover[b-75gb2jw3uh] {
    background: color-mix(in srgb, var(--pg-color-text) 7%, transparent);
    color: var(--pg-color-text);
    text-decoration: none;
}

.pg-portal-nav__item.active[b-75gb2jw3uh] {
    background: var(--pg-color-accent-900);
    color: var(--pg-color-accent-200);
}

.pg-portal-nav__icon[b-75gb2jw3uh] {
    font-size: 17px;
    flex: none;
}

.pg-portal-nav__label[b-75gb2jw3uh] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ein Bereich einer späteren Phase: sichtbar, erkennbar, nicht bedienbar. */
.pg-portal-nav__item--pending[b-75gb2jw3uh] {
    color: var(--pg-color-neutral-600);
    cursor: default;
}

.pg-portal-nav__item--pending:hover[b-75gb2jw3uh] {
    background: transparent;
    color: var(--pg-color-neutral-600);
}

.pg-portal-nav__pending[b-75gb2jw3uh] {
    font-size: 13px;
    flex: none;
}

.pg-portal-sidebar__footer[b-75gb2jw3uh] {
    flex: none;
    padding: 8px;
    border-top: 1px solid var(--pg-color-divider);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pg-portal-sidebar__switch[b-75gb2jw3uh] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--pg-radius-md);
    font-size: 12.5px;
    color: var(--pg-color-neutral-500);
    text-decoration: none;
}

.pg-portal-sidebar__switch:hover[b-75gb2jw3uh] {
    background: color-mix(in srgb, var(--pg-color-text) 7%, transparent);
    color: var(--pg-color-text);
    text-decoration: none;
}

.pg-portal-sidebar__user[b-75gb2jw3uh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--pg-radius-md);
}

.pg-portal-sidebar__identity[b-75gb2jw3uh] {
    flex: 1;
    min-width: 0;
}

.pg-portal-sidebar__name[b-75gb2jw3uh],
.pg-portal-sidebar__role[b-75gb2jw3uh] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-portal-sidebar__name[b-75gb2jw3uh] {
    font-size: 13px;
}

.pg-portal-sidebar__role[b-75gb2jw3uh] {
    font-size: 11px;
    color: var(--pg-color-neutral-500);
}

.pg-portal-sidebar__logout[b-75gb2jw3uh] {
    display: flex;
}

.pg-portal-sidebar__iconbutton[b-75gb2jw3uh] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--pg-color-neutral-500);
    border-radius: var(--pg-radius-sm);
    cursor: pointer;
    font-size: 15px;
}

.pg-portal-sidebar__iconbutton:hover[b-75gb2jw3uh] {
    color: var(--pg-color-text);
}