/*
 * Layout: skip link, header (Blazor DxMenu, Identity navbar and the error page's bar), main, footer, toast strip,
 * Blazor error banner, 500/404 extras, unsupported browser page.
 * Owner: package B2 (docs/design/ux/action-plan.md). Registered after app.css.
 * Only public API: our own classes (CssClass on DxMenu), aria-current/lang attributes we set ourselves, --dxds-* and --eng-*.
 */

/* The header is fixed: keep focused elements and anchor targets from ending up behind it (WCAG 2.4.11).
   The header is --eng-header-height plus its 1 px bottom border. */
html {
    scroll-padding-top: calc(var(--eng-header-height) + var(--dxds-border-width-10));
}

/* A heading or <main> that only script or the skip link focuses (FocusOnNavigate, wwwroot/js/frame.js) is not an
   operable control: without this the browser draws its focus ring around the whole block. */
:is(main, h1, h2)[tabindex="-1"]:focus {
    outline: none;
}

/* ------------------------------------------------------------------ */
/* Skip link (WCAG 2.4.1): out of sight until it has focus, then the first thing on the page. */
/* ------------------------------------------------------------------ */
.eng-skip-link {
    position: fixed;
    inset-block-start: calc(-1 * var(--eng-header-height));
    inset-inline-start: var(--dxds-spacing-160);
    z-index: calc(var(--eng-z-toast) + 1);
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: var(--dxds-spacing-160);
    background: var(--eng-color-surface);
    color: var(--dxds-color-content-primary-default-rest);
    border: var(--dxds-border-width-10) solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--dxds-border-radius-40);
    font-weight: var(--dxds-font-weight-700);
}

.eng-skip-link:focus {
    inset-block-start: var(--dxds-spacing-80);
}

/* ------------------------------------------------------------------ */
/* Header. The same on every page (red thread 9): the Blazor pages (SiteHeader.razor, a DxMenu), the Identity pages */
/* (_Layout.cshtml, a Bootstrap navbar) and the error page (a bar with the logo and the language link). Its height is */
/* fixed, so the page's top padding, the scroll padding and the toast strip can rely on --eng-header-height. */
/* ------------------------------------------------------------------ */
.eng-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1030;
    box-sizing: content-box;
    height: var(--eng-header-height);
    background: var(--eng-header-bg);
    border-bottom: var(--dxds-border-width-10) solid var(--dxds-color-border-neutral-default-rest);
    /* viewport-fit=cover (#65): keep the menu out of notches in landscape; the insets are 0 elsewhere (MDN env()). */
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}

.eng-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dxds-spacing-160);
    height: 100%;
    padding-block: 0;
    padding-inline: var(--dxds-spacing-200);
}

/* The DxMenu has its own 20 px of padding around the logo (SizeMode Large); the bar adds none, so the logo stands in the same place
   as on the Identity pages. */
.eng-header-bar-menu {
    padding-inline: 0;
}

/* DxMenu in the header (CssClass="eng-header-menu"). It is a flex item and shrinks to its content;
   DisplayMode="Auto" then measures that narrow box and collapses everything into the hamburger button
   even on a wide screen. Full width lets it decide from the real header width. Checked in a browser:
   without this rule the desktop menu items disappear. */
.eng-header-menu {
    width: 100%;
}

/* The posts: a list of links (the Identity header and the error page; the DxMenu renders its own list). */
.eng-header-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eng-header-nav > li,
.eng-header-nav form {
    display: flex;
}

/* .eng-header in front: Bootstrap's ".navbar-nav .nav-link" (Identity) would otherwise win on colour and padding. */
.eng-header .eng-header-nav a,
.eng-header .eng-header-nav button {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--dxds-spacing-100) var(--dxds-spacing-160);
    background: transparent;
    border: 0;
    color: var(--eng-color-text);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.eng-header .eng-header-nav a:hover,
.eng-header .eng-header-nav button:hover {
    color: var(--dxds-color-content-primary-default-rest);
    text-decoration: underline;
}

/* The posts are as tall as the header: the focus ring goes inside the box, where the header's edges do not cut it. */
.eng-header .eng-header-nav a:focus-visible,
.eng-header .eng-header-nav button:focus-visible {
    outline-offset: calc(-1 * var(--eng-focus-ring-width));
}

/* The language link comes last, after a divider, as the DxMenu draws it before the group's first item. */
.eng-header-language {
    margin-inline-start: var(--dxds-spacing-80);
    border-inline-start: var(--dxds-border-width-10) solid var(--dxds-color-border-neutral-default-rest);
}

/* The page the user is on (aria-current, set by us on the Blazor and the Identity header alike): bold with a short
   orange underline (red thread 2), drawn by ::after under the text (DevExpress' own text-decoration would win on
   its buttons). The meaning is in aria-current and the weight, never in the colour alone. */
.eng-header a[aria-current="page"],
.eng-header a[aria-current="true"] {
    position: relative;
    font-weight: var(--dxds-font-weight-700);
}

.eng-header a[aria-current="page"]::after,
.eng-header a[aria-current="true"]::after {
    content: "";
    position: absolute;
    inset-block-start: calc(50% + 1rem);
    inset-inline: var(--dxds-spacing-160);
    height: var(--eng-rule-height);
    background: var(--eng-color-accent-orange);
}

.eng-brand {
    display: inline-flex;
    align-items: center;
    padding-block: var(--eng-logo-clearspace);
    padding-inline-end: var(--eng-logo-clearspace);
    text-decoration: none;
}

/* images/engelhardt-life-sciences-logo.png: sRGB conversion of docs/design/assets/engelhardt-life-sciences-logo-cmyk.jpg. White background, so it sits on a white header.
   On a screen up to 480 px wide the <picture> in EngelhardtLogo.razor swaps it for the crown tile (images/icon-192.png). */
.eng-logo {
    display: block;
    height: var(--eng-logo-height);
    width: auto;
}

/* Identity navbar (Bootstrap): one row, the hamburger button on the left like the DxMenu's, no wrapping. */
.eng-header-bar.navbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.eng-header-bar .navbar-toggler {
    order: -1;
    flex: none;
    margin-inline-end: var(--dxds-spacing-80);
}

.eng-header-posts {
    align-items: stretch;
    align-self: stretch;
    margin-inline-start: auto;
    flex-grow: 0;
}

/* Below 768 px the signed-in Identity header folds its posts into a panel under the bar, over the page (the header
   keeps its height, so the card below is not pushed or covered by a two-row header). */
@media (max-width: 767.98px) {
    .eng-header-bar.navbar-expand-md .eng-header-posts {
        position: absolute;
        inset: 100% 0 auto 0;
        margin: 0;
        background: var(--eng-header-bg);
        border-bottom: var(--dxds-border-width-10) solid var(--dxds-color-border-neutral-default-rest);
    }

    .eng-header-bar.navbar-expand-md .eng-header-nav {
        flex-direction: column;
        height: auto;
        padding-block: var(--dxds-spacing-80);
    }

    .eng-header .eng-header-bar.navbar-expand-md .eng-header-nav a,
    .eng-header .eng-header-bar.navbar-expand-md .eng-header-nav button {
        width: 100%;
        padding-inline: var(--dxds-spacing-160);
    }

    .eng-header-bar.navbar-expand-md .eng-header-language {
        margin: var(--dxds-spacing-80) 0 0;
        border-inline-start: 0;
        border-block-start: var(--dxds-border-width-10) solid var(--dxds-color-border-neutral-default-rest);
    }
}

/* ------------------------------------------------------------------ */
/* Page: main and footer */
/* ------------------------------------------------------------------ */
.eng-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: calc(var(--eng-header-height) + var(--dxds-border-width-10));
}

.eng-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--eng-content-max-width);
    margin-inline: auto;
    padding-block: var(--dxds-spacing-240);
    padding-inline: max(var(--dxds-spacing-160), env(safe-area-inset-left, 0px)) max(var(--dxds-spacing-160), env(safe-area-inset-right, 0px));
}

/* The footer is SiteFooter.razor: copyright and the cookie line (#65, decisions 25 and 94). */
.eng-footer {
    background: var(--eng-footer-bg);
    color: var(--eng-footer-text);
    padding-block: var(--dxds-spacing-160) calc(var(--dxds-spacing-160) + env(safe-area-inset-bottom, 0px));
    padding-inline: max(var(--dxds-spacing-160), env(safe-area-inset-left, 0px)) max(var(--dxds-spacing-160), env(safe-area-inset-right, 0px));
    text-align: center;
}

.eng-footer p {
    margin: 0;
}

.eng-footer p + p {
    margin-top: var(--dxds-spacing-80);
}

/* ------------------------------------------------------------------ */
/* Toast strip (Shared/MainLayout.razor): the DxToastProvider sits in a fixed, zero-height strip under the */
/* header, so toasts stay in view while the page scrolls and never cover the menu (BV 7: "aldrig över */
/* headerns länkar"). The provider puts its toasts at the top right of the nearest positioned ancestor, and each */
/* toast has a 1 rem margin of its own: the strip starts one margin (--dxds-spacing-160) above the header's bottom */
/* edge, plus 8 px of air, so the toast's top edge ends 8 px under the header. Zero height: the strip itself */
/* never takes a click from the page. */
/* ------------------------------------------------------------------ */
.eng-toast-area {
    position: fixed;
    inset: calc(var(--eng-header-height) + var(--dxds-border-width-10) + var(--dxds-spacing-80) - var(--dxds-spacing-160)) 0 auto 0;
    height: 0;
    z-index: var(--eng-z-toast);
}

/* ------------------------------------------------------------------ */
/* Blazor error banner (#blazor-error-ui in Pages/_Layout.cshtml): role="alert", text, "Ladda om" and a close button. */
/* Blazor sets display: block when something goes wrong. */
/* ------------------------------------------------------------------ */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    align-items: center;
    gap: var(--dxds-spacing-160);
    padding: var(--dxds-spacing-120) calc(var(--dxds-spacing-160) * 3) var(--dxds-spacing-120) var(--dxds-spacing-160);
    background: var(--eng-color-surface);
    color: var(--dxds-color-content-danger-default-rest);
    border-top: var(--dxds-border-width-40) solid var(--dxds-color-border-danger-default-rest);
    box-shadow: var(--dxds-box-shadow-md);
}

#blazor-error-ui .reload {
    margin-inline-start: var(--dxds-spacing-160);
    min-height: 2.75rem;
    padding-inline: var(--dxds-spacing-160);
    background: transparent;
    border: var(--dxds-border-width-10) solid currentColor;
    border-radius: var(--dxds-border-radius-40);
    color: inherit;
    font: inherit;
    font-weight: var(--dxds-font-weight-700);
    cursor: pointer;
}

#blazor-error-ui .dismiss {
    position: absolute;
    inset-block-start: var(--dxds-spacing-80);
    inset-inline-end: var(--dxds-spacing-120);
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Error pages: 500 (Pages/Error.cshtml, static) and 404 (Shared/NotFoundCard.razor) use the Identity card */
/* (.eng-auth-card); this is what they add. */
/* ------------------------------------------------------------------ */

/* The primary action of the 500 page as a link: a button without DevExpress, so the page needs no component. Same look
   as a DxButton primary (the white text on the brand colour is Fluent's static-dark content colour, as in app.css). */
.eng-link-button {
    display: inline-flex;
    margin-top: var(--dxds-spacing-160);
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: var(--dxds-spacing-240);
    background: var(--dxds-color-surface-primary-default-rest);
    color: var(--dxds-color-content-neutral-default-static-dark-rest);
    border-radius: var(--dxds-border-radius-40);
    font-weight: var(--dxds-font-weight-700);
    text-decoration: none;
}

.eng-link-button:hover {
    background: var(--dxds-color-surface-primary-default-hovered);
    color: var(--dxds-color-content-neutral-default-static-dark-rest);
}

.eng-link-button:active {
    background: var(--dxds-color-surface-primary-default-active);
}

/* The address and the reference under the button: plain text, no links (decision 27). */
.eng-error-help {
    margin: var(--dxds-spacing-240) 0 0;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.eng-error-reference {
    display: block;
    margin-top: var(--dxds-spacing-80);
    overflow-wrap: anywhere;
}

code {
    font-size: 0.875em;
}

/* ------------------------------------------------------------------ */
/* Unsupported browser page (Shared/BrowserNotSupported.razor) */
/* ------------------------------------------------------------------ */
.eng-unsupported {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--dxds-spacing-240);
    min-height: 100vh;
    padding: var(--dxds-spacing-320) var(--dxds-spacing-160);
}

.eng-unsupported p {
    max-width: var(--eng-measure);
    color: var(--dxds-color-content-neutral-subdued-rest);
}