@layer infine.components {
/* =============================================================
   Sudo bar — sticky strip shown when the real user is impersonating
   someone via the JWT/X-Infine-Sudo path (Infine-internal staff).
   ============================================================= */

/* Top-anchor for page-level sticky bars (filter toolbars).
   When the sudo bar is visible, the offset bumps to its height so the next
   sticky tier pins right below it instead of being covered. The bar's own
   height is the source of truth for the offset value. */
:root {
    --sticky-anchor-top: 0px;
}

:root:has(.connect-sudo-bar) {
    --sticky-anchor-top: 36px;
}

.connect-sudo-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-md);
    padding: 0 var(--mantine-spacing-xl);
    background-color: var(--infine-blue);
    border-bottom: 1px solid var(--infine-blue-bright);
    color: white;
    font-family: var(--mantine-font-family);
    font-size: var(--mantine-font-size-sm);
    box-sizing: border-box;
}

.connect-sudo-bar__left {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-xs);
    min-width: 0;
}

.connect-sudo-bar__lead {
    opacity: 0.7;
}

.connect-sudo-bar__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connect-sudo-bar__exit {
    margin-left: auto;
}

.connect-sudo-bar-placeholder {
    display: none;
}

}