/* Styles for the shell chrome.
 *
 * These rules previously lived in each host's own stylesheet (nexus-platform's app.css,
 * management.css and ManagementLayout.razor.css), which is why a second product could not adopt
 * the shell without its logo, account button and chips rendering unstyled. They travel with the
 * shell now.
 *
 * Everything is expressed against Bootstrap's --bs-* custom properties, so light and dark mode
 * follow the `data-bs-theme` attribute with no extra rules. */

/* ---------------------------------------------------------------- brand / logo box */

.nexeriq-logo-link,
.main-nav .logo-box .nexeriq-logo-link,
.main-nav .logo-box .nexeriq-logo-link:hover {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    min-width: 0;
    text-decoration: none;
}

.nexeriq-logo-sm {
    width: 2rem;
    height: 2rem;
}

.nexeriq-logo-lg {
    max-width: 8.75rem;
    max-height: 2.25rem;
}

/* Theme axis only. Which of the two marks inside a brand shows — the small one or the lockup — is the
   SIZE axis, and Velex owns that (`.logo-box .logo-sm` / `.logo-lg`, driven by data-menu-size).
   These rules therefore never set `display` on an image: they show or hide the whole brand, and
   `display: contents` lets Velex's descendant rules keep reaching the images inside the visible one.

   Setting `display` on the images here instead is what caused a condensed rail to render the light and
   dark mark side by side, and a dark expanded rail to render the small mark and the lockup together —
   each axis overrode the other's `display` depending on which stylesheet won the cascade. */
.app-brand {
    display: contents;
}

.app-brand-dark {
    display: none;
}

[data-bs-theme="dark"] .app-brand-light {
    display: none;
}

[data-bs-theme="dark"] .app-brand-dark {
    display: contents;
}

/* ---------------------------------------------------------------- topbar */

.topbar .navbar-header {
    gap: 1rem;
}

/* The theme pins the sticky bar to --bs-topbar-height, while the bar's right-hand group is allowed to
   wrap: a host's widgets (tenant chips, a language switch, the account email) can need more room than
   one row offers between the tablet and laptop breakpoints. With the height fixed, that wrapped row
   overflowed the bar and painted over the page heading (seen at ~1190px in the mail Portal). Let the
   bar grow instead: the first row keeps the theme's height, a wrapped row adds only what its items
   need, and the page content flows below because the bar is sticky, not fixed. */
.topbar {
    height: auto;
    min-height: var(--bs-topbar-height);
}

.topbar .navbar-header {
    min-height: var(--bs-topbar-height);
}

.topbar .navbar-header .topbar-item {
    /* The theme sizes every item to the bar's full height, which would make a wrapped row 80px tall. */
    height: auto;
    min-height: 2.5rem;
}

.topbar .navbar-header > .flex-wrap {
    row-gap: 0.25rem;
    padding: 0.35rem 0;
}

.topbar-page-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.tenant-chip {
    align-items: center;
    gap: 0.65rem;
    max-width: 24rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.75rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.workspace-chip {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    line-height: 1.15;
}

.workspace-chip strong {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-heading-color);
}

.app-account-button {
    padding: 0;
    overflow: hidden;
}

.app-account-button .avatar-sm,
.app-account-button .avatar-title {
    width: 2.25rem;
    height: 2.25rem;
}

.app-account-button .avatar-title {
    font-size: 0.82rem;
}

/* AccessibleContrast picks its text from the page theme (primitives.css), but a dark topbar
   (Velex html[data-topbar-color="dark"], #22282e) is dark in Light too, where the black-mixed text measured
   1.36:1 for #e15c39. On the bar's own buttons the light-text recipe applies in both themes: the 30% white mix
   is 6.7:1 or better for every Velex and NexerIQ tone on #22282e and #0f172a. Scoped to .topbar-button so the
   AppAvatarMenu popover, which the static <details> fallback renders inside the bar on a light surface, keeps
   the page-theme colour. (0,5,1) plus !important beats Velex's .text-<tone> and both primitives.css rules. */
html[data-topbar-color="dark"] .topbar .topbar-button .app-icon-avatar__title.app-icon-avatar__title--contrast {
    color: color-mix(in srgb, var(--app-tone, #3e60d5) 30%, white) !important;
}

/* ---------------------------------------------------------------- shell height */

/* The shell must fill the viewport whatever wraps it. DxDrawer inserts two elements between <body>
 * and Velex's .wrapper, and neither is told to stretch, so the chain can collapse to its content
 * and strand the footer in the middle of a tall window. Velex sizes .page-content with `100vh`,
 * which the mobile browser chrome lies about; `100dvh` is the honest one. */
html,
body {
    min-height: 100%;
}

.app-right-drawer,
.app-right-drawer > .dxbl-drawer-content,
.app-right-drawer .wrapper {
    min-height: 100dvh;
}

.app-right-drawer .wrapper .page-content {
    min-height: 100dvh;
}

/* ---------------------------------------------------------------- right drawer */

/* DevExpress's DxDrawer reserves its default 300px panel width as a margin on the content, even
 * when the panel is closed and the mode is Overlap. Left alone, every page in the shell silently
 * loses 300px of width to a drawer nobody opened. */
.app-right-drawer .wrapper {
    margin-right: 0;
}

/* ---------------------------------------------------------------- page content */

.app-page-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 0 2rem;
}

.app-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------------------------------------------------------------- search */

.app-search {
    position: relative;
    min-width: 16rem;
}

.app-search-input {
    position: relative;
    display: flex;
    align-items: center;
}

.app-search-input .form-control {
    padding-left: 2.25rem;
}

.app-search-icon {
    position: absolute;
    left: 0.75rem;
    pointer-events: none;
    color: var(--bs-secondary-color);
}

.app-search-results {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    left: 0;
    z-index: 1050;
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow);
}

.app-search-group + .app-search-group {
    margin-top: 0.35rem;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    padding-top: 0.35rem;
}

.app-search-group-title {
    padding: 0.25rem 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.app-search-result {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
}

.app-search-result:hover,
.app-search-result.is-active {
    background: var(--bs-secondary-bg);
}

/* Keyboard users must be able to see which result Enter will activate. */
.app-search-result:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.app-search-result-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-search-result-title,
.app-search-result-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-search-result-subtitle {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

/* ---------------------------------------------------------------- error bar */

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    max-width: 36rem;
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    border: 1px solid var(--bs-danger-border-subtle);
    border-radius: var(--bs-border-radius);
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    box-shadow: var(--bs-box-shadow-lg);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    cursor: pointer;
}

/* Blazor's <FocusOnNavigate> moves focus to the page heading after each navigation so a screen
 * reader announces the new page. A heading is not a control, so a focus ring around it reads as a
 * rendering bug — but a real keyboard user must still see where focus is, hence :not(:focus-visible). */
[tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

/* ---------------------------------------------------------------- nav item badge */

/* A trailing count pill on a nav item (an unread mail count, say). Sits at the far end of the
 * row, pushed there by auto margin so it right-aligns regardless of label length. Kept muted so
 * it reads as metadata, not a call to action; the active item's own colour still wins. */
.main-nav .navbar-nav .nav-link .nav-badge {
    margin-left: auto;
    min-width: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 0.75rem;
    background-color: var(--bs-secondary-bg, rgba(152, 165, 177, 0.18));
    color: var(--bs-secondary-color, #9aa5b1);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    white-space: nowrap;
}

/* When the sidebar is condensed to an icon rail the label is hidden; a numeric badge would
 * overflow the narrow rail, so collapse it to a small dot indicating "unread present". */
[data-menu-size="condensed"] .main-nav .navbar-nav .nav-link {
    position: relative;
}

[data-menu-size="condensed"] .main-nav .navbar-nav .nav-link .nav-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    min-width: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------------- form editors */

/* The App* editors wrap DevExpress editors, and devop-blazor-shared.css bridges their chrome to Bootstrap's
   default form tokens. Velex's own .form-control is denser than that default (.5rem/1rem padding, .875rem
   text, the secondary surface, its own input border tokens, no focus shadow), so this re-aims the same
   variables at Velex's values: a wrapped editor and a raw .form-control on one form look identical. Loaded
   after the shared stylesheet, so equal specificity is enough. */
.app-field .dxbl-text-edit {
    --dxbl-text-edit-padding-x: 1rem;
    --dxbl-text-edit-padding-y: 0.5rem;
    --dxbl-text-edit-font-size: 0.875rem;
    --dxbl-text-edit-bg: var(--bs-secondary-bg);
    --dxbl-text-edit-border-color: var(--bs-input-border-color);
    --dxbl-text-edit-border-radius: var(--bs-border-radius-sm);
    --dxbl-text-edit-focus-border-color: var(--bs-input-focus-border-color);
    --dxbl-text-edit-focus-shadow-spread: 0;
}

.app-field .dxbl-text-edit.dxbl-sm {
    --dxbl-text-edit-padding-x: 0.5rem;
    --dxbl-text-edit-padding-y: 0.25rem;
    --dxbl-text-edit-font-size: 0.75rem;
}

.app-field .dxbl-text-edit.dxbl-lg {
    --dxbl-text-edit-padding-x: 1rem;
    --dxbl-text-edit-padding-y: 0.5rem;
    --dxbl-text-edit-font-size: 1rem;
}

/* ---------------------------------------------------------------- dark-mode contrast */

/* Velex's muted text is #8391a2, which is 4.21:1 on the dark card surface (#282f36) — below WCAG
 * AA's 4.5:1 for body text, and it is the colour of every hint, help text and timestamp in the UI.
 * Measured with axe-core; #9aa5b1 lands at 5.5:1. Light mode already passes, so this is scoped.
 *
 * Three further findings are the brand orange itself (active nav text, avatar initials, and the
 * outline-secondary button) and are left alone (avatar initials are now opt-in: AppShellLayout
 * AccessibleAvatarContrast / AppIconAvatar AccessibleContrast): changing them is a design decision that would
 * repaint every NexerIQ product, not a bug fix. See Documentation/Architecture/09 in
 * devop-mail-server. */
[data-bs-theme="dark"] {
    --bs-secondary-color: #9aa5b1;
}

/* ---------------------------------------------------------------- work sidebar (AppAccordion, NEXER-1354)

   Figma AppAccordion/Item (138:1693): 28 px rows, a 12 px chevron slot, 8 px gaps, Level 1 links indented to
   36 px, count badges on primary-subtle. Colours are NexerIQ tokens with Bootstrap fallbacks, so both themes
   follow data-bs-theme. DevExpress draws the area headers; they are styled through its own custom properties.

   Those properties are set on .dxbl-accordion under the wrapper's class, not on the wrapper: DevExpress declares
   them on that element, and a declaration there beats one inherited from the nav (measured in a browser: 16 px
   headers, grey group background, 1 px group borders while the wrapper asked for 14 px, transparent and none). */
.app-accordion {
    --app-accordion-indent: 2.25rem;
    display: block;
    color: var(--nexeriq-text, var(--bs-body-color));
}

.app-accordion .dxbl-accordion {
    --dxbl-accordion-group-border-width: 0;
    --dxbl-accordion-group-border-radius: 0;
    --dxbl-accordion-group-font-size: 0.875rem;
    --dxbl-accordion-group-line-height: 1.25rem;
    --dxbl-accordion-group-header-text-padding-y: 0;
    --dxbl-accordion-group-header-bg: transparent;
    --dxbl-accordion-group-header-color: var(--nexeriq-text, var(--bs-body-color));
    --dxbl-accordion-group-header-hover-bg: var(--nexeriq-hover, var(--bs-tertiary-bg));
    --dxbl-accordion-group-header-hover-color: var(--nexeriq-text, var(--bs-body-color));
    --dxbl-accordion-group-header-selected-bg: var(--nexeriq-selected, var(--bs-primary-bg-subtle));
    --dxbl-accordion-group-header-selected-color: var(--nexeriq-primary-text, var(--bs-primary-text-emphasis));
    --dxbl-accordion-group-header-font-size: 0.875rem;
    --dxbl-accordion-group-header-line-height: 1.25rem;
    --dxbl-accordion-group-header-padding-x: var(--nexeriq-space-3, 0.75rem);
    --dxbl-accordion-group-header-padding-y: var(--nexeriq-space-half, 0.125rem);
    --dxbl-accordion-group-header-border-radius: var(--nexeriq-radius-md, var(--bs-border-radius));
    --dxbl-accordion-focus-outline-color: var(--nexeriq-focus, var(--bs-primary));
}

/* Flat rows: no group background or border. The selectors outrank DevExpress's
   .dxbl-accordion .dxbl-accordion-group(:not(:first-of-type)) rules. */
.app-accordion .dxbl-accordion .dxbl-accordion-group.dxbl-group {
    --dxbl-group-bg: transparent;
    --dxbl-group-header-bg: transparent;
    border: 0;
    background-color: transparent;
}

.app-accordion .dxbl-accordion .dxbl-accordion-group.dxbl-group.app-accordion-divider-before {
    margin-top: var(--nexeriq-space-2, 0.5rem);
    padding-top: var(--nexeriq-space-2, 0.5rem);
    border-top: var(--bs-border-width) solid var(--nexeriq-border, var(--bs-border-color));
}

.app-accordion .app-accordion-area .dxbl-accordion-item-text-tmpl > .dxbl-text {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2, 0.5rem);
    width: 100%;
}

.app-accordion-area-label,
.app-accordion-link-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-accordion-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-accordion-link {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2, 0.5rem);
    min-height: 1.75rem;
    padding: var(--nexeriq-space-1, 0.25rem) var(--nexeriq-space-3, 0.75rem) var(--nexeriq-space-1, 0.25rem) var(--app-accordion-indent);
    border-radius: var(--nexeriq-radius-md, var(--bs-border-radius));
    color: var(--nexeriq-text, var(--bs-body-color));
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-decoration: none;
}

.app-accordion-link:hover {
    background: var(--nexeriq-hover, var(--bs-tertiary-bg));
    color: var(--nexeriq-text, var(--bs-body-color));
}

.app-accordion-link.active {
    background: var(--nexeriq-selected, var(--bs-primary-bg-subtle));
    color: var(--nexeriq-primary-text, var(--bs-primary-text-emphasis));
    font-weight: 500;
}

.app-accordion-link:focus-visible,
.app-accordion-rail-button:focus-visible {
    outline: 2px solid var(--nexeriq-focus, var(--bs-primary));
    outline-offset: -2px;
}

.app-accordion-link-icon,
.app-accordion-rail-icon {
    flex: none;
    width: 1rem;
    text-align: center;
}

.app-accordion-badge {
    flex: none;
    padding: 1px var(--nexeriq-space-2, 0.5rem);
    border-radius: var(--nexeriq-radius-sm, var(--bs-border-radius-sm));
    background: var(--nexeriq-primary-subtle, var(--bs-primary-bg-subtle));
    color: var(--nexeriq-primary-text, var(--bs-primary-text-emphasis));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.app-accordion-link.active .app-accordion-badge {
    background: var(--nexeriq-surface, var(--bs-body-bg));
}

.app-accordion-divider-before {
    margin-top: var(--nexeriq-space-2, 0.5rem);
    padding-top: var(--nexeriq-space-2, 0.5rem);
    border-top: var(--bs-border-width) solid var(--nexeriq-border, var(--bs-border-color));
}

/* The rail (D18): a 56 px column of 40 px icon buttons. A flyout is positioned against its entry, so the
   host's sidebar must not clip overflow while the rail is shown. */
.app-accordion-rail {
    position: relative;
    width: 3.5rem;
}

.app-accordion-rail-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nexeriq-space-1, 0.25rem);
    margin: 0;
    padding: var(--nexeriq-space-2, 0.5rem) 0;
    list-style: none;
}

.app-accordion-rail-entry {
    position: relative;
}

.app-accordion-rail-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--nexeriq-radius-md, var(--bs-border-radius));
    background: transparent;
    color: var(--nexeriq-text-secondary, var(--bs-secondary-color));
    text-decoration: none;
}

.app-accordion-rail-button:hover,
.app-accordion-rail-button[aria-expanded="true"] {
    background: var(--nexeriq-hover, var(--bs-tertiary-bg));
    color: var(--nexeriq-text, var(--bs-body-color));
}

.app-accordion-rail-button.active {
    background: var(--nexeriq-selected, var(--bs-primary-bg-subtle));
    color: var(--nexeriq-primary-text, var(--bs-primary-text-emphasis));
}

.app-accordion-rail-badge {
    position: absolute;
    top: 0;
    right: -0.25rem;
    padding: 0 var(--nexeriq-space-1, 0.25rem);
}

.app-accordion-flyout {
    position: absolute;
    top: 0;
    left: calc(100% + var(--nexeriq-space-2, 0.5rem));
    z-index: 1056;
    min-width: 15rem;
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--nexeriq-space-2, 0.5rem);
    border: var(--bs-border-width) solid var(--nexeriq-border, var(--bs-border-color));
    border-radius: var(--nexeriq-radius-md, var(--bs-border-radius));
    background: var(--nexeriq-surface, var(--bs-body-bg));
    box-shadow: var(--bs-box-shadow);
}

.app-accordion-flyout .app-accordion-link {
    padding-left: var(--nexeriq-space-3, 0.75rem);
}

.app-accordion-flyout-title {
    padding: var(--nexeriq-space-1, 0.25rem) var(--nexeriq-space-3, 0.75rem);
    color: var(--nexeriq-text-secondary, var(--bs-secondary-color));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.app-accordion-flyout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
}

/* Header metrics: 28 px rows. DevExpress sizes the header from its expand button and its text element (30 px each
   before this). The text loses its padding and border, the expand button keeps a 24 px minimum (WCAG 2.5.8, wider
   than Figma's 12 px chevron slot), and the header adds 2 px above and below it. */
.app-accordion .dxbl-accordion .dxbl-group-header .dxbl-text {
    --dxbl-text-padding-y: 0;
    --dxbl-text-border-width: 0;
}

.app-accordion .dxbl-accordion .dxbl-group-header > .dxbl-btn {
    --dxbl-btn-padding-x: 0;
    --dxbl-btn-padding-y: 0;
    --dxbl-btn-border-width: 0;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

/* A link area's anchor (Calendar) fills the header's 24 px content box, so the link itself meets WCAG 2.5.8 rather
   than the 20 px of its text. */
.app-accordion .dxbl-accordion .dxbl-group-header > .dxbl-accordion-item-content {
    min-height: 1.5rem;
    align-self: stretch;
}

/* Header states. DevExpress paints every group header with a ::before overlay (the text colour at 5 % opacity, the
   grey band measured in a browser) and its hover and selection the same way, so the overlay is removed inside
   AppAccordion and the states are painted on the header from the tokens. !important because DevExpress's overlay
   selectors carry up to seven classes. */
.app-accordion .dxbl-accordion .dxbl-group-header::before {
    content: none !important;
}

.app-accordion .dxbl-accordion .dxbl-accordion-group > .dxbl-accordion-group-header {
    border-radius: var(--nexeriq-radius-md, var(--bs-border-radius));
}

.app-accordion .dxbl-accordion .dxbl-accordion-group > .dxbl-accordion-group-header:hover {
    background-color: var(--nexeriq-hover, var(--bs-tertiary-bg));
}

.app-accordion .dxbl-accordion .dxbl-accordion-group.dxbl-active > .dxbl-accordion-group-header {
    background-color: var(--nexeriq-selected, var(--bs-primary-bg-subtle));
    color: var(--nexeriq-primary-text, var(--bs-primary-text-emphasis));
    font-weight: 500;
}

.app-accordion .dxbl-accordion .dxbl-accordion-group-header:focus-visible {
    outline: 2px solid var(--nexeriq-focus, var(--bs-primary));
    outline-offset: -2px;
}


/* ---------------------------------------------------------------- avatar menu (AppAvatarMenu) */

.app-avatar-button {
    display: inline-flex;
    border: 0;
    background: transparent;
    padding: 0;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
}

.app-avatar-button:focus-visible {
    outline: 2px solid var(--nexeriq-focus, var(--bs-primary));
    outline-offset: 2px;
}

.app-avatar-popover {
    min-width: 18rem;
    max-width: min(22rem, calc(100vw - 2rem));
    color: var(--nexeriq-text, var(--bs-body-color));
}

.app-avatar-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
}

.app-avatar-identity-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-avatar-name,
.app-avatar-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-avatar-name {
    font-weight: 600;
}

.app-avatar-address {
    color: var(--nexeriq-text-secondary, var(--bs-secondary-color));
    font-size: var(--bs-body-font-size-sm, 0.875rem);
}

.app-avatar-section {
    padding: 0.5rem;
    border-top: var(--bs-border-width) solid var(--nexeriq-border, var(--bs-border-color));
}

.app-avatar-section form {
    margin: 0;
}

.app-avatar-title {
    padding: 0.25rem 0.5rem;
    color: var(--nexeriq-muted, var(--bs-secondary-color));
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-avatar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--nexeriq-radius-md, var(--bs-border-radius));
    background: transparent;
    color: var(--nexeriq-text, var(--bs-body-color));
    text-align: start;
    text-decoration: none;
}

.app-avatar-item:hover {
    background: var(--nexeriq-hover, var(--bs-tertiary-bg));
    color: var(--nexeriq-text, var(--bs-body-color));
}

.app-avatar-item > i,
.app-avatar-row-label > i {
    width: 1rem;
    color: var(--nexeriq-text-secondary, var(--bs-secondary-color));
    text-align: center;
}

.app-avatar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.app-avatar-row-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.app-theme-options {
    display: inline-flex;
    padding: 0.125rem;
    border: var(--bs-border-width) solid var(--nexeriq-border, var(--bs-border-color));
    border-radius: var(--nexeriq-radius-md, var(--bs-border-radius));
}

.app-theme-option {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--nexeriq-radius-sm, var(--bs-border-radius-sm));
    color: var(--nexeriq-text-secondary, var(--bs-secondary-color));
    font-size: 0.875rem;
    text-decoration: none;
    background: transparent;
    border: 0;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

.app-theme-option:hover {
    color: var(--nexeriq-text, var(--bs-body-color));
}

.app-theme-option.is-active {
    background: var(--nexeriq-primary-subtle, var(--bs-primary-bg-subtle));
    color: var(--nexeriq-primary-text, var(--bs-primary-text-emphasis));
}

/* Phone rule: the trigger and every item are at least 44px touch targets. */
@media (max-width: 767.98px) {
    .app-avatar-button,
    .app-avatar-item,
    .app-theme-option,
    .app-avatar-row,
    .app-avatar-row a,
    .app-avatar-row button,
    .app-avatar-row select,
    .app-avatar-row input {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }
}

/* Static fallback (no script): the same content in a native <details>. */
.app-avatar-details {
    position: relative;
}

.app-avatar-details > summary {
    list-style: none;
    cursor: pointer;
}

.app-avatar-details > summary::-webkit-details-marker {
    display: none;
}

.app-avatar-details > .app-avatar-popover {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 1050;
    background: var(--nexeriq-surface, var(--bs-body-bg));
    border: var(--bs-border-width) solid var(--nexeriq-border, var(--bs-border-color));
    border-radius: var(--nexeriq-radius-lg, var(--bs-border-radius-lg));
    box-shadow: var(--bs-box-shadow);
}