/*
 * The user menu - templates/layout/user-menu.html: language, help, sign-in or the user's menu.
 *
 * Loaded by the shell (layout/shell.html), the error pages (layout/error.html) and the landing pages
 * (landingpage/template.html), so the menu looks the same in all three. The landing pages do not load
 * shell.css and have no body.shell, so every rule is scoped under .sui-usermenu and every token has its
 * value as the fallback: --brand-* is Bootstrap's primary (#ff6900 in the library's build), --sl-* the
 * slate scale, the radii the shell's.
 */

.sui-usermenu {
    --sui-brand-50: var(--brand-50, #fff6f0);
    --sui-brand-600: var(--brand-600, var(--bs-primary, #ff6900));
    --sui-brand-700: var(--brand-700, #d15600);
    --sui-brand-800: var(--brand-800, #a84500);
    --sui-sl-50: var(--sl-50, #f8fafc);
    --sui-sl-100: var(--sl-100, #f1f5f9);
    --sui-sl-200: var(--sl-200, #e2e8f0);
    --sui-sl-500: var(--sl-500, #64748b);
    --sui-sl-700: var(--sl-700, #334155);
    --sui-sl-900: var(--sl-900, #0f172a);
    /* The menu's own surface. It reads --sl-surface, which theme-dark.css re-points, so the
       menu follows the theme even though this stylesheet is linked from inside the fragment -
       that is, in the body, AFTER theme-dark.css in the head, where a plain override would
       have lost to it. Tokens are resolved at use, so the order does not matter for them. */
    --sui-surface: var(--sl-surface, #fff);
    --sui-secondary: var(--bs-secondary, #746660);
    --sui-secondary-700: color-mix(in srgb, var(--sui-secondary) 82%, black);
    --sui-secondary-800: color-mix(in srgb, var(--sui-secondary) 66%, black);
    --sui-radius: var(--shell-radius, 6px);
    --sui-radius-lg: var(--shell-radius-lg, 8px);

    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.2;
}

.sui-usermenu .sui-usermenu-dropdown {
    position: relative;
    min-width: 0;
}

.sui-usermenu .sui-usermenu-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--sui-radius);
    background: transparent;
    color: var(--sui-sl-700);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.sui-usermenu .sui-usermenu-button .mdi {
    font-size: 18px;
    line-height: 1;
}

.sui-usermenu .sui-usermenu-button .sui-usermenu-chevron {
    font-size: 14px;
    color: var(--sui-sl-500);
}

.sui-usermenu .sui-usermenu-button:hover,
.sui-usermenu .sui-usermenu-button[aria-expanded="true"] {
    background: var(--sui-sl-100);
    color: var(--sui-sl-900);
}

/*
 * Language and help are the brand's orange, the colour they had on template-v1, where the topbar's
 * controls were links in --bs-primary. Measured on the v1 topbar before the shared menu: Apps &
 * Services, help and the language switcher rgb(255,105,0); the user menu's own toggle and the user
 * name were grey (rgb(108,117,125)), so the account control stays on the slate text colour here -
 * that is v1's look, not a new one.
 *
 * Contrast on the white topbar: --brand-600 #ff6900 is 2.89:1, the corporate orange as v1 had it;
 * hover and the open state go to --brand-700 (4.02:1) and pressed to --brand-800 (6.36:1). The icons
 * and the chevron inherit, so the whole control is one colour.
 */
.sui-usermenu .sui-usermenu-language .sui-usermenu-button,
.sui-usermenu .sui-usermenu-help .sui-usermenu-button {
    color: var(--sui-brand-600);
}

.sui-usermenu .sui-usermenu-language .sui-usermenu-button .mdi,
.sui-usermenu .sui-usermenu-help .sui-usermenu-button .mdi,
.sui-usermenu .sui-usermenu-language .sui-usermenu-button .sui-usermenu-chevron,
.sui-usermenu .sui-usermenu-help .sui-usermenu-button .sui-usermenu-chevron {
    color: inherit;
}

.sui-usermenu .sui-usermenu-language .sui-usermenu-button:hover,
.sui-usermenu .sui-usermenu-help .sui-usermenu-button:hover,
.sui-usermenu .sui-usermenu-language .sui-usermenu-button[aria-expanded="true"],
.sui-usermenu .sui-usermenu-help .sui-usermenu-button[aria-expanded="true"] {
    background: var(--sui-brand-50);
    color: var(--sui-brand-700);
}

.sui-usermenu .sui-usermenu-language .sui-usermenu-button:active,
.sui-usermenu .sui-usermenu-help .sui-usermenu-button:active {
    color: var(--sui-brand-800);
}

.sui-usermenu .sui-usermenu-button:focus-visible,
.sui-usermenu .sui-usermenu-item:focus-visible {
    outline: 2px solid var(--sui-brand-600);
    outline-offset: 2px;
}

.sui-usermenu .sui-usermenu-name {
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sign in and sign up: the shell's .btn-primary and .btn-secondary (shell.css), height aside - 12.5px,
   weight 500, the hairline shadow, brand-700 on hover and brand-800 pressed. White on #ff6900 is the
   corporate primary button; it measures 2.9:1, 4.0:1 on the hover colour. */
.sui-usermenu .sui-usermenu-signin,
.sui-usermenu .sui-usermenu-register {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-left: 4px;
    padding: 0 12px;
    border-radius: var(--sui-radius);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.sui-usermenu .sui-usermenu-signin {
    border: 1px solid var(--sui-brand-600);
    background: var(--sui-brand-600);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    color: #fff;
}

.sui-usermenu .sui-usermenu-signin:hover,
.sui-usermenu .sui-usermenu-signin:focus-visible {
    border-color: var(--sui-brand-700);
    background: var(--sui-brand-700);
    color: #fff;
}

.sui-usermenu .sui-usermenu-signin:active {
    border-color: var(--sui-brand-800);
    background: var(--sui-brand-800);
    color: #fff;
}

/* Register keeps the theme's secondary button colour (the grey-brown btn-secondary it had in usernav.html
   before the shared menu), so sign in and register stay two distinct, filled buttons. */
.sui-usermenu .sui-usermenu-register {
    border: 1px solid var(--sui-secondary);
    background: var(--sui-secondary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    color: #fff;
}

.sui-usermenu .sui-usermenu-register:hover,
.sui-usermenu .sui-usermenu-register:focus-visible {
    border-color: var(--sui-secondary-700);
    background: var(--sui-secondary-700);
    color: #fff;
}

.sui-usermenu .sui-usermenu-register:active {
    border-color: var(--sui-secondary-800);
    background: var(--sui-secondary-800);
    color: #fff;
}

.sui-usermenu .sui-usermenu-signin .mdi,
.sui-usermenu .sui-usermenu-register .mdi {
    font-size: 16px;
}

/* The menus: drawn like the shell's dropdowns. Positioned here rather than by Popper, which the error
   layout does not load; the script toggles .show. */
.sui-usermenu .sui-usermenu-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 1050;
    display: none;
    min-width: 200px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--sui-sl-200);
    border-radius: var(--sui-radius-lg);
    background: var(--sui-surface);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    font-size: 13px;
}

.sui-usermenu .sui-usermenu-list.show {
    display: block;
}

.sui-usermenu .sui-usermenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--sui-radius);
    background: transparent;
    color: var(--sui-sl-700);
    font: inherit;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.sui-usermenu .sui-usermenu-item .mdi {
    width: 16px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    color: var(--sui-sl-500);
}

.sui-usermenu .sui-usermenu-item:hover,
.sui-usermenu .sui-usermenu-item:focus {
    background: var(--sui-sl-50);
    color: var(--sui-sl-900);
}

.sui-usermenu .sui-usermenu-item.active,
.sui-usermenu .sui-usermenu-item:active {
    background: var(--sui-brand-50);
    color: var(--sui-brand-700);
    font-weight: 600;
}

.sui-usermenu .sui-usermenu-divider {
    height: 0;
    margin: 6px 4px;
    overflow: hidden;
    border-top: 1px solid var(--sui-sl-200);
}

/* Account context is repeated inside the avatar menu only on compact screens. */
.sui-usermenu .sui-usermenu-mobile-context {
    display: none;
}

.sui-usermenu .sui-usermenu-signout-form {
    margin: 0;
}

/* Phone width: labels collapse to their icons and the e-mail address truncates, so the bar stays on one
   line at 390px. */
@media (max-width: 767.98px) {
    .sui-usermenu {
        gap: 2px;
    }

    .sui-usermenu .sui-usermenu-label {
        display: none;
    }

    .sui-usermenu .sui-usermenu-button {
        gap: 3px;
        min-width: 44px;
        height: 44px;
        padding: 0 8px;
        justify-content: center;
    }

    .sui-usermenu .sui-usermenu-chevron,
    .sui-usermenu .sui-usermenu-language .mdi-translate {
        display: none;
    }

    .sui-usermenu .sui-usermenu-signin,
    .sui-usermenu .sui-usermenu-register {
        padding: 0 10px;
    }

    /* The shell's bar also carries Apps & Services and the notifications here: the address gives way. */
    .sui-usermenu .sui-usermenu-name {
        display: none;
    }

    .sui-usermenu .sui-usermenu-language,
    .sui-usermenu .sui-usermenu-help {
        display: none;
    }

    .sui-usermenu .sui-usermenu-mobile-context {
        display: block;
    }

    .sui-usermenu .sui-usermenu-mobile-email,
    .sui-usermenu .sui-usermenu-mobile-organisation {
        padding: 7px 10px;
        color: var(--sui-sl-500);
        font-size: 11.5px;
        overflow-wrap: anywhere;
    }

    .sui-usermenu .sui-usermenu-context-label {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .sui-usermenu .sui-usermenu-organisation-options {
        margin: 4px -4px -3px;
    }

    .sui-usermenu .sui-usermenu-mobile-organisation-option {
        font-size: 12.5px;
    }

    .sui-usermenu .sui-usermenu-user .sui-usermenu-list {
        width: min(288px, calc(100vw - 16px));
        max-height: calc(100vh - var(--shell-topbar-h, 56px) - 12px);
        overflow-y: auto;
    }
}

/*
 * The theme switch, hidden by default.
 *
 * The menu is shared: the shell topbar, the landing pages through usernav.html and the error pages
 * all render the same markup. Only the shell can actually be themed - a legacy-layout page still
 * loads Minton's app.min.css, nine hundred literal colours that would stay light around a darkened
 * frame - so the entry is hidden here and shown again by shell.css, which only shell pages load.
 * head.html gates the boot script on the same condition, so the two cannot drift into a page that
 * offers a switch that does nothing, or goes dark with no way back.
 */
.sui-usermenu .sui-usermenu-theme {
    display: none;
}