/* TopBarAuthstateView.razor.css */

.auth-state-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* REMOVED min-width: 160px; -> Let the box collapse to exactly the icon's width */
    width: auto;
    height: 100%;
    /* Sliced down to a tight, crisp margin from the right browser edge */
    padding-right: 6px;
    box-sizing: border-box;
    /* Keeps it anchored to the far right side of your header layout layout */
    margin-left: auto;
}

.auth-indicator {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    width: auto; /* Collapses container layout tight */
}

/* Pristine yellow security lock vector */
.security-lock-vector {
    width: auto;
    height: 48px; /* Preserved your ideal visual size */
    overflow: visible;
}

/* Subtle hardware-accelerated technological power-hum pulse */
.unauthenticated .lock-chassis {
    animation: clean-cyber-pulse 4s ease-in-out infinite;
}

/* PRE-STRUCTURED TEXT STACKS: Active right-aligned layout framework */
.user-meta-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    font-family: inherit;
    gap: 4px;
}

.meta-row-primary {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.meta-row-secondary {
    font-size: 11px;
    font-weight: 400;
    color: #4dabff;
    opacity: 0.8;
}

/* Mixed weighting classes pre-staged for detailed user metadata strings */
.meta-row-large-bold {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: 0.25px;
}

.meta-row-small-regular {
    font-size: 11px;
    font-weight: 400;
    color: #4dabff;
    opacity: 0.85;
    line-height: 1;
}

@keyframes clean-cyber-pulse {
    0%, 100% {
        filter: drop-shadow(0px 0px 4px rgba(255, 209, 102, 0.35));
    }

    50% {
        filter: drop-shadow(0px 0px 14px rgba(255, 209, 102, 0.65));
    }
}