/* Barra lateral de Hermes (contenido en Shared/SidebarNav.razor).
 *
 * Escritorio (>= 993px): la barra esta SIEMPRE fija a la izquierda y reserva
 * hueco al contenido. Tiene dos anchos, gobernados por el atributo
 * data-sidebar de <html> que escribe js/sidebar.js:
 *
 *   data-sidebar="dock"  -> 260px, con textos.
 *   data-sidebar="rail"  -> 68px, solo iconos. Al pasar el raton (o al entrar
 *                           con el tabulador) se despliega POR ENCIMA del
 *                           contenido, sin mover la pagina.
 *
 * Movil (<= 992px): no hay hueco. La barra sigue siendo el cajon de siempre,
 * flotando sobre el contenido con velo, y la gobierna el Expanded de Radzen
 * (clase .rz-sidebar-collapsed) desde MainLayout.
 *
 * Una pagina que se mida contra el viewport (100vw) tiene que restar
 * --rs-sidebar-gap; si no, se sale por la derecha en escritorio.
 */

:root {
    --rs-sidebar-w: 260px;
    --rs-sidebar-rail-w: 68px;
    /* Hueco reservado al contenido. 0 en movil: alli la barra flota. */
    --rs-sidebar-gap: 0px;
    /* Canto derecho: hilo al tono de los separadores normales, no una línea de
       marca. No es un border a toda altura: lo pinta el ::after de la barra
       empezando bajo la franja primary, para que en la zona de cabecera el azul
       fluya hacia el header sin costura (un hilo claro ahí cantaría mucho). */
    --rs-sidebar-edge: var(--rs-outline-variant);
    --rz-sidebar-border-inline-end: transparent;
}

/* ── La barra ───────────────────────────────────────────────────────────── */

.rz-layout .rz-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 100vh;
    width: var(--rs-sidebar-w);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* visible a propósito: el scroll vive en .rs-sidebar-menu, no aquí, y
       cambiarlo tocaria sombras y desbordes estables sin ganar nada. */
    overflow: visible !important;
    background: var(--rs-surface);
    border-right: none !important;
    border-inline-end: none !important;
    box-shadow: 2px 0 12px var(--rs-shade-subtle);
    transition: width 0.18s ease;
}

/* El hilo del canto, solo por debajo de la franja de marca (3.5rem, la misma
   altura que .rs-sidebar-brand y que la cabecera de la app). */
.rz-layout .rz-sidebar::after {
    content: "";
    position: absolute;
    top: 3.5rem;
    bottom: 0;
    right: 0;
    width: 1px;
    background: var(--rs-sidebar-edge);
    pointer-events: none;
}

.rs-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-sizing: border-box;
    min-height: 3.5rem;
    padding: 0.75rem 0.5rem;
    background: var(--rs-primary);
    border-bottom: none;
    flex-shrink: 0;
}

.rs-sidebar-logo {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* ── Conmutador del panel (vive en la cabecera de la app) ──────────────── */

/* Fijar/desfijar es el primer control de .rs-app-header (MainLayout), pegado
   al canto de la barra que gobierna, como el conmutador de panel de Linear o
   VS Code. El aspecto base (36x36, fondo fantasma sobre primary, hover) lo
   pone .header-icon-btn; aquí va solo lo específico del conmutador.
   Servidumbre asumida: con el flyout de carril desplegado, la barra (z-index
   1000) tapa esta franja de la cabecera, botón incluido; se fija con Ctrl+B o
   sacando el ratón del carril. NO "arreglarlo" subiendo el z-index de la
   cabecera: rompería el flyout, que debe cubrir el contenido. */
.rs-sidebar-pin {
    margin-right: auto; /* empuja header-actions a la derecha */
}

.rs-sidebar-pin svg {
    width: 20px; /* mismo cuerpo que los material-icons-round vecinos */
    height: 20px;
    display: block;
}

/* Los dos iconos y las dos etiquetas van al DOM y el CSS elige leyendo
   data-sidebar (lo estampa sidebar.js antes del primer pintado): ni parpadeo
   en el prerender ni espera al circuito de Blazor. Fijada (dock):
   panel-left-close, "recoge a solo iconos". Carril: panel-left-open,
   "vuelve a fijar". */
:root[data-sidebar="rail"] .rs-sidebar-pin .rs-pin-when-dock { display: none; }
:root:not([data-sidebar="rail"]) .rs-sidebar-pin .rs-pin-when-rail { display: none; }

/* El nombre accesible del botón lo dan estas etiquetas ocultas (no un
   aria-label): las gobierna el mismo data-sidebar que los iconos, así que no
   mienten ni durante el prerender. */
.rs-sidebar-pin .rs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

/* Aro de foco en on-primary: la cabecera es fondo primary en ambos temas y
   un aro --rs-primary sería invisible sobre ella. */
.rs-sidebar-pin:focus-visible {
    outline: 2px solid var(--rs-on-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    /* Sin deslizamientos: ni la barra al cambiar de ancho ni cabecera y
       contenido al ceder el hueco (el conmutador viaja con ese margen). */
    .rz-layout .rz-sidebar,
    .rz-layout .rz-header,
    .rz-layout .rz-body {
        transition: none;
    }
}

/* ── Buscador del menu ──────────────────────────────────────────────────── */

.rs-nav-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0.65rem 0.75rem 0.25rem;
    padding: 0 8px;
    border: 1px solid var(--rs-outline-variant);
    border-radius: 8px;
    background: var(--rs-surface-container-low);
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.rs-nav-search:focus-within {
    border-color: var(--rs-primary);
    background: var(--rs-surface);
}

.rs-nav-search-icon {
    font-size: 17px;
    color: var(--rs-on-surface-muted);
    flex: none;
}

.rs-nav-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 7px 0;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--rs-on-surface);
}

.rs-nav-search input::placeholder {
    color: var(--rs-on-surface-muted);
}

.rs-nav-search-kbd {
    flex: none;
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--rs-on-surface-muted);
    border: 1px solid var(--rs-outline-variant);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

.rs-nav-search-clear {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--rs-on-surface-muted);
    cursor: pointer;
}

.rs-nav-search-clear:hover {
    background: var(--rs-surface-container);
    color: var(--rs-on-surface);
}

.rs-nav-search-clear .material-icons-round {
    font-size: 15px;
}

/* ── Cuerpo del menu ────────────────────────────────────────────────────── */

.rs-sidebar-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--rs-outline-variant) transparent;
}

.rs-sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.rs-sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
}

.rs-sidebar-menu::-webkit-scrollbar-thumb {
    background: var(--rs-outline-variant);
    border-radius: 3px;
}

.rs-nav-section {
    padding: 0 0.75rem;
    margin-top: 0.25rem;
}

/* Rotulo de seccion: es un boton porque pliega/despliega su seccion. */
.rs-nav-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-align: left;
    color: var(--rs-on-surface-muted);
    padding: 0.55rem 0.6rem 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 6px;
}

.rs-nav-section-label:hover {
    color: var(--rs-on-surface-variant);
}

.rs-nav-section-chevron {
    font-size: 14px;
    color: var(--rs-on-surface-muted);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.15s ease;
}

.rs-nav-section-chevron--open {
    transform: rotate(180deg);
}

.rs-nav-section-label:hover .rs-nav-section-chevron,
.rs-nav-section-label:focus-visible .rs-nav-section-chevron {
    opacity: 1;
}

/* ── Items ──────────────────────────────────────────────────────────────── */

.rs-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    margin: 1px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--rs-on-surface-variant);
    font-family: inherit;
    font-size: 0.845rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rs-nav-link:hover {
    background: var(--rs-surface-container-low);
    color: var(--rs-on-surface);
    text-decoration: none;
}

.rs-nav-icon {
    font-size: 19px;
    width: 24px;
    flex: none;
    text-align: center;
    transition: color 0.15s ease;
}

.rs-nav-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Item activo: pastilla tintada con barra de acento. */
.rs-nav-link.active {
    background: var(--rs-primary-subtle);
    color: var(--rs-primary-text);
    font-weight: 600;
}

.rs-nav-link.active .rs-nav-icon {
    color: var(--rs-primary-text);
}

.rs-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 2px;
    background: var(--rs-primary);
}

/* ── Badges y etiquetas ─────────────────────────────────────────────────── */

.rs-nav-badge {
    flex: none;
    min-width: 18px;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
}

.rs-nav-badge--danger {
    background: var(--rs-danger-subtle);
    color: var(--rs-on-danger-subtle);
}

.rs-nav-badge--warning {
    background: var(--rs-warning-subtle);
    color: var(--rs-on-warning-subtle);
}

/* Contador informativo, sin tono de alarma (p. ej. nº de tráficos activos). */
.rs-nav-badge--neutral {
    background: var(--rs-neutral-subtle);
    color: var(--rs-on-neutral-subtle);
}

/* ── Estrella de favoritos ──────────────────────────────────────────────── */

.rs-nav-fav {
    flex: none;
    display: flex;
    align-items: center;
    opacity: 0;
    color: var(--rs-on-surface-muted);
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.rs-nav-fav .material-icons-round {
    font-size: 15px;
}

.rs-nav-link:hover .rs-nav-fav,
.rs-nav-link:focus-within .rs-nav-fav {
    opacity: 0.8;
}

.rs-nav-fav:hover {
    color: var(--rs-warning);
    opacity: 1;
}

/* Ya es favorito: la estrella se queda fija y en ámbar. */
.rs-nav-fav--on {
    opacity: 0.9;
    color: var(--rs-warning);
}

/* ── Secciones plegadas ─────────────────────────────────────────────────── */

/* Plegada = oculta en la vista expandida. El carril de iconos la vuelve a
   enseñar (ver bloque del carril): alli el plegado no aplica. */
.rs-nav-section-items--collapsed {
    display: none;
}

.rs-nav-tag {
    flex: none;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 1px 7px;
    background: var(--rs-warning-subtle);
    color: var(--rs-on-warning-subtle);
}

.rs-nav-tag--new {
    background: var(--rs-primary-subtle);
    color: var(--rs-primary-text);
}

/* ── Grupos desplegables ────────────────────────────────────────────────── */

.rs-nav-chevron {
    flex: none;
    font-size: 17px;
    color: var(--rs-on-surface-muted);
    transition: transform 0.18s ease;
}

.rs-nav-chevron--open {
    transform: rotate(180deg);
}

/* Grupo con hijo activo (aunque este plegado): el icono delata donde estas. */
.rs-nav-group-btn--active .rs-nav-icon {
    color: var(--rs-primary-text);
}

.rs-nav-children {
    position: relative;
    margin-left: 21px;
    padding-left: 9px;
    border-left: 1px solid var(--rs-outline-variant);
}

.rs-nav-children .rs-nav-link {
    font-size: 0.82rem;
    padding: 6px 8px;
}

.rs-nav-children .rs-nav-icon {
    font-size: 17px;
    width: 20px;
}

/* ── Busqueda sin resultados ────────────────────────────────────────────── */

.rs-nav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 2rem 1rem;
    color: var(--rs-on-surface-muted);
    font-size: 0.8rem;
    text-align: center;
}

.rs-nav-empty .material-icons-round {
    font-size: 32px;
    color: var(--rs-on-surface-disabled, var(--rs-on-surface-muted));
}

/* ── Pie: enlaces de ayuda + tarjeta de usuario ─────────────────────────── */

.rs-sidebar-footer {
    padding: 0.5rem 0.75rem 0.65rem;
    border-top: 1px solid var(--rs-outline-variant);
    background: var(--rs-surface-container-low);
    flex-shrink: 0;
}

.rs-footer-links {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.4rem;
}

.rs-nav-link--compact {
    padding: 5px 10px;
    font-size: 0.8rem;
}

/* Enlace de novedades: el número de versión va a la derecha, en tono apagado, para que se lea
   como un dato y no como parte del rótulo. */
.rs-nav-link--version .rs-nav-text {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.rs-nav-version {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--rs-on-surface-muted);
}

.rs-user-card {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--rs-outline-variant);
    border-radius: 10px;
    background: var(--rs-surface);
    padding: 6px;
}

.rs-user-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    border: none;
    background: transparent;
    padding: 2px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.rs-user-card-main:hover {
    background: var(--rs-surface-container-low);
}

.rs-user-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rs-user-card-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rs-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-user-card-role {
    font-size: 0.66rem;
    color: var(--rs-on-surface-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-user-card-logout {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--rs-on-surface-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rs-user-card-logout:hover {
    background: var(--rs-danger-subtle);
    color: var(--rs-on-danger-subtle);
}

.rs-user-card-logout .material-icons-round {
    font-size: 17px;
}

/* Velo del cajon: solo tiene sentido en movil (ver media query de escritorio). */
.rs-scrim {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--rs-shade-strong);
}

@media (max-width: 992px) {
    .rs-only-desktop { display: none !important; }

    /* Verificado con clic real (circuito Blazor Server real, no solo HTML estático): con el
       cajón cerrado (.rz-sidebar-collapsed), Radzen pone width:0 !important + opacity:0 -- pero
       .rz-layout .rz-sidebar de aquí arriba lleva overflow:visible !important (a propósito, para
       no recortar sombras/desplegables en escritorio), así que el contenido de dentro (el logo)
       no se recorta por el ancho 0 del contenedor y se queda ocupando su sitio natural, invisible
       pero clicable, tapando el botón de abrir menú de la cabecera justo encima. Se detectó
       porque Playwright, con un clic real, fallaba con "element ... intercepts pointer events" --
       invisible para cualquier captura de pantalla (opacity:0), solo se ve intentando interactuar
       de verdad. pointer-events:none solo en el cajón colapsado y solo en movil: en escritorio
       (>=993px) .rz-sidebar-collapsed se fuerza a ancho completo por la regla de más abajo y deja
       de tener sentido este bloqueo. */
    .rz-layout .rz-sidebar.rz-sidebar-collapsed {
        pointer-events: none;
    }

    /* Objetivos táctiles del cajón móvil (mínimo 44x44 CSS px). En escritorio
       la densidad actual se queda tal cual: esto solo crece en el cajón, no
       encoge nada. */
    .rs-nav-link,
    .rs-nav-section-label {
        min-height: 44px;
    }

    /* La estrella de favoritos vivía solo en :hover, que no existe en tactil:
       en movil no habia forma de verla ni de tocarla si el item no era ya
       favorito. Aqui queda siempre visible y con hueco de sobra para el dedo. */
    .rs-nav-fav {
        opacity: 0.65;
        min-width: 40px;
        min-height: 40px;
        justify-content: center;
    }

    .rs-nav-fav--on {
        opacity: 0.95;
    }
}

/* ── Escritorio: barra fija ─────────────────────────────────────────────── */

@media (min-width: 993px) {
    :root { --rs-sidebar-gap: var(--rs-sidebar-w); }
    :root[data-sidebar="rail"] { --rs-sidebar-gap: var(--rs-sidebar-rail-w); }

    /* Siempre visible: el Expanded de Radzen solo gobierna el cajon de movil,
       y su .rz-sidebar-collapsed lleva !important, de ahi el duelo. */
    .rz-layout .rz-sidebar,
    .rz-layout .rz-sidebar.rz-sidebar-collapsed {
        width: var(--rs-sidebar-gap) !important;
        opacity: 1 !important;
    }

    /* El contenido cede el hueco en lugar de quedar tapado. */
    .rz-layout .rz-header,
    .rz-layout .rz-body {
        margin-left: var(--rs-sidebar-gap);
        transition: margin-left 0.18s ease;
    }

    .rs-scrim,
    .rs-only-mobile { display: none !important; }

    /* Carril desplegado al vuelo: crece la barra, no el hueco. */
    :root[data-sidebar="rail"] .rz-layout .rz-sidebar:hover,
    :root[data-sidebar="rail"] .rz-layout .rz-sidebar:focus-within {
        width: var(--rs-sidebar-w) !important;
        box-shadow: var(--rs-shadow-lg);
    }
}

/* ── Carril plegado: solo iconos ────────────────────────────────────────── */

@media (min-width: 993px) {
    /* El texto no se quita con display:none: se saca de la vista pero se deja
       en el arbol de accesibilidad, para que un lector de pantalla siga
       leyendo el nombre de cada opcion. */
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        white-space: nowrap;
        clip-path: inset(50%);
    }

    /* Adornos que no aportan a 68px: fuera. */
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-badge,
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-tag,
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-chevron,
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-fav,
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-search-kbd,
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-search-clear,
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-user-card-logout {
        display: none;
    }

    /* Los submenus abiertos se esconden hasta que la barra se despliega. */
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-children {
        display: none;
    }

    /* En el carril el plegado de secciones no aplica: solo hay iconos y una
       seccion plegada dejaria la barra medio vacia, que parece un fallo. */
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-section-items--collapsed {
        display: block;
    }

    /* Rotulos de seccion: se quedan en una linea separadora. */
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-section-label {
        height: 1px;
        padding: 0;
        margin: 6px 10px;
        background: var(--rs-outline-variant);
        color: transparent;
        overflow: hidden;
    }

    /* El buscador se queda en su icono; el input sigue en el arbol (clip) para
       que Ctrl+K pueda enfocarlo: el focus-within despliega la barra solo. */
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-search {
        justify-content: center;
        padding: 7px 0;
        margin-inline: 0.5rem;
    }

    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-search input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }

    /* Iconos centrados en el carril. */
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-link {
        justify-content: center;
        padding-inline: 0.4rem;
    }

    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-section {
        padding-inline: 0.4rem;
    }

    /* La barra de acento del item activo, pegada al borde del carril. */
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-nav-link.active::before {
        left: -0.4rem;
    }

    /* Carril plegado: marca encogida. Para volver a fijar está el conmutador
       de la cabecera (.rs-sidebar-pin) o Ctrl+B. */
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-sidebar-logo img {
        height: auto !important;
        max-width: 100%;
        max-height: 1.75rem;
    }

    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-sidebar-brand {
        justify-content: center;
        padding-inline: 0.4rem;
        overflow: hidden;
    }

    /* Tarjeta de usuario reducida al avatar. */
    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-sidebar-footer {
        padding-inline: 0.4rem;
    }

    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-user-card {
        justify-content: center;
        padding: 4px;
    }

    :root[data-sidebar="rail"] .rz-sidebar:not(:hover):not(:focus-within) .rs-user-card-main {
        flex: none;
    }
}