/* User-area identity chip + dropdown (mw-ua-*), rendered inside the top app bar by
   MWUserArea.razor. Also covers the small utility-icon grouping in MainLayout.razor
   that visually separates print/dark-mode/language from this chip. Colors are
   inherited from the app bar's own background (Color="Primary"/"Success"), so no
   color overrides are needed here. */

.mw-ua-utility-cluster {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.mw-ua-divider {
    width: 1px;
    height: 22px;
    background-color: rgba(255, 255, 255, 0.28);
    margin-right: 8px;
}

.mw-ua-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px 0 4px;
    border-radius: 999px;
    cursor: pointer;
    color: inherit;
    transition: background-color 0.15s ease;
}

.mw-ua-chip:hover,
.mud-menu-activator.mw-menu-open .mw-ua-chip {
    background-color: rgba(255, 255, 255, 0.14);
}

.mw-ua-name {
    display: none;
    font-weight: 500;
    font-size: 0.85rem;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* NOTE: 960px matches MudBlazor's own md breakpoint ($breakpoint-md), so this lines up
   with Breakpoint.MdAndUp used elsewhere in the app bar (e.g. the MitWare wordmark). */
@media (min-width: 960px) {
    .mw-ua-name {
        display: inline-block;
    }
}

.mw-ua-chevron {
    transition: transform 0.18s ease;
}

.mud-menu-activator.mw-menu-open .mw-ua-chevron {
    transform: rotate(180deg);
}

/* NOTE: Constrains the dropdown to a compact, fixed-feeling width instead of stretching
   to whatever its widest row happens to need. */
.mw-ua-menu-list {
    min-width: 220px;
    max-width: 260px;
}

.mw-ua-menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.mw-ua-menu-head-name {
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}