/*
  Shared partner-v2 shell header styling — the single source of truth for the
  cds-header brand, version meta chip and profile menu. Linked by BOTH the SPA
  shell (wwwroot/index.html) and the Razor /launch chrome
  (Views/Shared/_Layout.cshtml) so the two cannot drift (feedback #2835).

  App-specific layout that is NOT part of the shared header (SPA tiles/banner,
  the Razor flex column) stays inline in each page.
*/

.cds-header__brand span { font-weight: 400; color: var(--cds-text-muted); }

/* Version meta — env chip + version inline in the brand row. */
#pv2-version-meta { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#pv2-version-meta .env { font-weight: 700; padding: 1px 6px; border-radius: 3px; font-size: 10px; }
#pv2-version-meta .env.debug   { background: var(--cds-info); color: var(--cds-bg); }
#pv2-version-meta .env.test    { background: var(--cds-warn); color: var(--cds-bg); }
#pv2-version-meta .env.prod    { background: var(--cds-danger); color: var(--cds-bg); }
#pv2-version-meta .env.unknown { background: var(--cds-text-muted); color: var(--cds-bg); }
#pv2-version-meta .err { color: var(--cds-danger); }
@media (max-width: 599px) {
    #pv2-version-meta, #pv2-version-divider { display: none; }
}

/* Profile menu — header-anchored flyout, mobile-first. */
.user-menu { position: relative; }
.user-menu__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid var(--cds-border);
    border-radius: var(--cds-radius-sm); color: var(--cds-text);
    padding: 4px 8px 4px 4px; cursor: pointer; font: inherit;
    min-height: 44px; /* mobile touch target */
}
.user-menu__toggle:hover { background: var(--cds-surface); }
.user-menu__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--cds-accent); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: 0.5px; flex: none;
}
.user-menu__avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.user-menu__name {
    font-size: 14px; font-weight: 600; max-width: 40vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu__caret { font-size: 10px; color: var(--cds-text-muted); }
.user-menu__toggle[aria-expanded="true"] .user-menu__caret { transform: rotate(180deg); }
.user-menu__panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 10000;
    min-width: 260px; max-width: min(88vw, 320px);
    background: var(--cds-bg); color: var(--cds-text);
    border: 1px solid var(--cds-border); border-radius: var(--cds-radius);
    box-shadow: var(--cds-shadow); padding: 8px; overflow: hidden;
}
.user-menu__header { display: flex; align-items: center; gap: 12px; padding: 8px; }
.user-menu__idblock { min-width: 0; }
.user-menu__display { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__email { font-size: 12px; color: var(--cds-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__divider { height: 1px; background: var(--cds-border); margin: 6px 0; }
.user-menu__item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; box-sizing: border-box; text-align: left;
    background: transparent; border: 0; border-radius: var(--cds-radius-sm);
    color: var(--cds-text); font: inherit; font-size: 14px;
    padding: 10px 8px; min-height: 44px; cursor: pointer; text-decoration: none;
}
.user-menu__item:hover { background: var(--cds-surface); }
.user-menu__roles { list-style: none; margin: 0; padding: 0 0 4px; }
.user-menu__roles li { font-size: 13px; color: var(--cds-text-muted); padding: 6px 8px 6px 20px; }
.user-menu__roles li.user-menu__role--none { font-style: italic; }
.user-menu__roles-toggle[aria-expanded="true"] .user-menu__caret { transform: rotate(180deg); }