/* Portal shell chrome (epic DM-807): topbar, workspace switcher, settings gear, avatar menu and the
   settings / personal sidebars. Page CSS lives in portal.css; this file styles only the shell, so the two
   can change independently. Colours, spacing and radii come from the --nexeriq-* and --bs-* tokens. */

/* ---------------------------------------------------------------- topbar (DM-818) */

/* Search leads the bar; the switcher, scope chip, gear and avatar follow at the end, in that order. */
.topbar .navbar-header > .d-flex:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.topbar .navbar-header > .d-flex:last-child > .topbar-item:has(.app-search) {
    margin-inline-end: auto;
    margin-inline-start: var(--nexeriq-space-4);
}

.portal-topbar-actions {
    gap: var(--nexeriq-space-2) !important;
}

.portal-shell-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nexeriq-control-height-md);
    height: var(--nexeriq-control-height-md);
    border-radius: var(--nexeriq-radius-md);
    color: var(--nexeriq-text-secondary);
    cursor: pointer;
    list-style: none;
    text-decoration: none;
}

.portal-shell-icon-button::-webkit-details-marker {
    display: none;
}

.topbar .portal-shell-icon-button:hover,
.topbar .portal-shell-icon-button.is-active,
.topbar details[open] > .portal-shell-icon-button {
    background: var(--nexeriq-primary-subtle);
    color: var(--nexeriq-primary-text);
}

.portal-shell-icon-button:focus-visible,
.scope-seg-toggle:focus-visible,
.scope-seg-link:focus-visible {
    outline: 2px solid var(--nexeriq-focus);
    outline-offset: 2px;
}

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

.portal-shell-menu {
    position: relative;
}

.portal-shell-popover {
    position: absolute;
    top: calc(100% + var(--nexeriq-space-1));
    right: 0;
    z-index: 1050;
    min-width: 17rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: var(--nexeriq-space-2);
    background: var(--nexeriq-surface);
    color: var(--nexeriq-text);
    border: var(--bs-border-width) solid var(--nexeriq-border);
    border-radius: var(--nexeriq-radius-lg);
    box-shadow: 0 0.5rem 1.5rem rgba(var(--nexeriq-text-rgb), 0.12);
}

.portal-shell-popover-title {
    padding: var(--nexeriq-space-1) var(--nexeriq-space-2);
    color: var(--nexeriq-muted);
    font-size: var(--nexeriq-type-overline-size);
    font-weight: var(--nexeriq-type-overline-weight);
    letter-spacing: var(--nexeriq-type-overline-letter-spacing);
    text-transform: uppercase;
}

.portal-shell-popover-note {
    margin-top: var(--nexeriq-space-1);
    padding: var(--nexeriq-space-2) var(--nexeriq-space-2) var(--nexeriq-space-1);
    border-top: var(--bs-border-width) solid var(--nexeriq-border);
    color: var(--nexeriq-text-secondary);
    font-size: var(--nexeriq-type-caption-size);
    line-height: var(--nexeriq-type-caption-line-height);
}

/* ---------------------------------------------------------------- workspace switcher (DM-818) */

.portal-workspace-item {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-3);
    padding: var(--nexeriq-space-2);
    border-radius: var(--nexeriq-radius-md);
    color: var(--nexeriq-text);
    text-decoration: none;
}

.portal-workspace-item:hover {
    background: var(--nexeriq-hover);
    color: var(--nexeriq-text);
}

.portal-workspace-item.is-current {
    background: var(--nexeriq-primary-subtle);
}

.portal-workspace-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--nexeriq-radius-sm);
    background: var(--nexeriq-surface-subtle);
    color: var(--nexeriq-primary-text);
}

.portal-workspace-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.portal-workspace-name {
    font-weight: var(--nexeriq-type-body-strong-weight);
}

.portal-workspace-description {
    color: var(--nexeriq-text-secondary);
    font-size: var(--nexeriq-type-caption-size);
}

.portal-workspace-check {
    flex: none;
    color: var(--nexeriq-primary-text);
}

/* ---------------------------------------------------------------- scope chip (DM-818) */

/* The existing Organization › Company picker, restyled as the topbar workspace chip. */
.topbar .scope-trail {
    padding: var(--nexeriq-space-half) var(--nexeriq-space-2);
    border: var(--bs-border-width) solid var(--nexeriq-border);
    border-radius: var(--nexeriq-radius-md);
    background: var(--nexeriq-surface);
}

.topbar .scope-trail .scope-seg:last-of-type .scope-seg-toggle > span,
.topbar .scope-trail > .scope-seg-link:last-child {
    font-weight: var(--nexeriq-type-body-strong-weight);
}

.topbar .scope-menu {
    border-radius: var(--nexeriq-radius-lg);
}

/* ---------------------------------------------------------------- sidebars (DM-811) */

/* A group without a heading is a separator: "Back to Mail" above the settings groups, Calendar and
   Contacts below the mail folders. */
.main-nav .menu-title:empty {
    height: 0;
    margin: var(--nexeriq-space-2) var(--nexeriq-space-4);
    padding: 0;
    border-top: var(--bs-border-width) solid var(--nexeriq-border);
}

.main-nav .navbar-nav > .menu-title:empty:first-child {
    display: none;
}

/* ---------------------------------------------------------------- settings sidebar (DM-838, frame A1)

   Back to Mail, a divider, the SETTINGS heading, then the AppAccordion (PortalSettingsSidebar.razor). */

.main-nav .navbar-nav > .portal-settings-sidebar-host {
    list-style: none;
    padding: 0 var(--nexeriq-space-3) var(--nexeriq-space-4);
}

.portal-settings-back {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-3);
    min-height: 2.5rem;
    padding: 0 var(--nexeriq-space-3);
    border-radius: var(--nexeriq-radius-md);
    color: var(--nexeriq-text);
    text-decoration: none;
}

.portal-settings-back > i {
    width: 1rem;
    color: var(--nexeriq-text-secondary);
    text-align: center;
}

.portal-settings-back:hover {
    background: var(--nexeriq-hover);
    color: var(--nexeriq-text);
}

.portal-settings-back:focus-visible {
    outline: 2px solid var(--nexeriq-focus);
    outline-offset: -2px;
}

.portal-settings-divider {
    margin: var(--nexeriq-space-2) 0 var(--nexeriq-space-4);
    border: 0;
    border-top: var(--bs-border-width) solid var(--nexeriq-border);
    opacity: 1;
}

.portal-settings-heading {
    margin: 0 0 var(--nexeriq-space-1);
    padding-inline-start: var(--nexeriq-space-3);
    color: var(--nexeriq-text-secondary);
    font-size: var(--nexeriq-type-overline-size);
    font-weight: var(--nexeriq-type-overline-weight);
    line-height: var(--nexeriq-type-overline-line-height);
    letter-spacing: var(--nexeriq-type-overline-letter-spacing);
    text-transform: uppercase;
}

/* The 56 px rail (Velex's narrow sidebar sizes, reported by mail-work-sidebar.js). AppAccordion's flyouts are
   absolutely positioned beside the rail, and Velex's simplebar clips everything inside the sidebar to its mask, so
   for this sidebar the simplebar layers stop clipping. The rail is eight icons, so nothing needs to scroll. */
.main-nav:has(.portal-settings-sidebar--rail),
.main-nav:has(.portal-settings-sidebar--rail) .scrollbar,
.main-nav:has(.portal-settings-sidebar--rail) .simplebar-wrapper,
.main-nav:has(.portal-settings-sidebar--rail) .simplebar-mask,
.main-nav:has(.portal-settings-sidebar--rail) .simplebar-offset,
.main-nav:has(.portal-settings-sidebar--rail) .simplebar-content-wrapper {
    overflow: visible !important;
}

.main-nav:has(.portal-settings-sidebar--rail) .navbar-nav > .portal-settings-sidebar-host {
    padding-inline: 0;
}

.portal-settings-sidebar--rail .portal-settings-back {
    justify-content: center;
    width: 2.5rem;
    margin-inline: auto;
    padding: 0;
}

.portal-settings-sidebar--rail .portal-settings-divider {
    margin-inline: var(--nexeriq-space-2);
}

/* Velex widens its narrow sidebar on hover to show labels; the rail has none, so it keeps its width. */
html[data-menu-size="sm-hover"] .main-nav:has(.portal-settings-sidebar--rail):hover {
    width: var(--bs-main-nav-width-sm, 4.5rem);
}

/* ---------------------------------------------------------------- avatar menu (DM-817, DM-834) */

/* One avatar: AppAvatarMenu (DevOp.Blazor.Shell, DM-834; PortalAvatarMenu before it) replaces the shell's account
   chip and its drawer, because a drawer cannot carry sign-out without script. Its styles are the package's. */
.topbar .topbar-item:has(> .app-account-button) {
    display: none !important;
}