/* Global resets — can't live in scoped .razor.css (isolation attributes won't match html/body) */
html, body, #app {
    height: 100%;
    margin: 0;
}

/* No `scrollbar-gutter: stable` here, and that is deliberate — it was tried and removed the same
 * day. It DID stop the modal-open layout shift (stmInterop.lockScroll sets `body { overflow:
 * hidden }` with no width compensation, so the viewport scrollbar vanished and the page jumped),
 * but only by permanently reserving a second 15px gutter on the right — which is what made the
 * layout visibly lopsided, flush left and inset right (owner 2026-08-25).
 *
 * Both were the same root cause: .layout-root used min-height, so the document scrolled instead
 * of #content-area. Giving it a definite height (MainLayout.razor.css) means the viewport has no
 * scrollbar to lose, so the lock cannot shift anything and no gutter is needed here.
 * systemate-design-system#623 still stands for consumers whose page genuinely does scroll. */

body {
    font-family: var(--stm-typography-body-font-family);
    font-size: var(--stm-typography-body-font-size);
    line-height: var(--stm-typography-body-line-height);
    color: var(--stm-color-onSurface);
}

/* Root-level custom properties for the Blazor layout. Structural only — all colors
   come from --stm-color-* tokens at the use site (the old local green/link/ring
   palette here was dead or inlined to --stm-color-link / -surface). */
:root {
    --bar-h: 56px;
    --gutter: 24px;
}

/* Print (RT-995 obs 30): the Blazor chrome (environment marker + green header)
   printed at the top of every printout, and the scrolling layout clipped the
   printed content to one viewport. Hide the chrome and let the content flow.
   Lives here (not scoped .razor.css) so one @media block covers all chrome. */
@media print {
    .env-marker,
    .site-header {
        display: none !important;
    }

    /* Un-trap the content from the fixed-height scroll layout so it paginates. */
    html, body, #app {
        height: auto;
    }

    .layout-root {
        display: block;
        min-height: 0;
    }

    #content-area {
        overflow: visible;
    }

    /* The Angular host is pinned absolute (inset:0) by angular-interop.js —
       in print it must join normal flow or it collapses to zero height.
       Un-pinning alone was NOT enough, which is why printing came out blank:
       AngularBootstrap.razor.css also gives the host `contain: layout style size`
       and `overflow: auto`. Size containment makes the box size itself as if it
       had NO content, so the moment it leaves the inset-driven layout its height
       is 0 and every printed page is empty; the overflow then clips whatever is
       left. All of it needs !important — the scoped rule's `#angular-host[b-xxx]`
       selector outranks a plain id selector, and `position` is set inline. */
    #angular-host:not([hidden]) {
        position: static !important;
        contain: none !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* The custom element must grow with the shadow content it renders, rather than
       stretching to a now-meaningless 100% of the un-pinned host. */
    #angular-host legacy-angular-app {
        min-height: 0 !important;
        height: auto !important;
    }
}

/* ===== Auth screens (login / forgot / change password)
   ChangePassword and ForgotPassword carried byte-identical copies of these six rules in their own
   <style> blocks — which emit GLOBAL css anyway, so the duplication bought nothing but two places
   to change a card width. Screen-specific rules stay on their screen. */
.auth-card {
    width: min(420px, 90vw);
}

/* .auth-title is gone: the auth cards' headings are StmTypography Heading4 now. It restated two
   heading4 tokens by hand and set no colour, so it inherited AuthLayout's onPrimary ink onto the
   card's light surface and the heading disappeared. The component carries both the scale and the
   ink, which is why the class had nothing left to do. */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--stm-space-md);
}

.auth-label {
    display: block;
    margin-bottom: var(--stm-space-xs);
    font-family: var(--stm-typography-label-font-family);
    font-size: var(--stm-typography-label-font-size);
}

/* StmButton's outer wrapper is block-width, but the inner Telerik button stays content-width and
   hugs the left. Stretch it so the label centres in the card (the "off-center / venstrestillet"
   report). */
.auth-submit .k-button {
    width: 100%;
}

/* Space below the form, replacing the (removed) StmCard footer slot + its divider. Rendered by
   AuthBackLink_Dumb, whose icon is the DS chevron rather than the inline svg these screens used
   to hand-roll. */
.auth-back-row {
    margin-top: var(--stm-space-md);
}

/* ===== Profile menu (TopMenu/ProfileMenu.razor)
   GLOBAL, and it has to be: the class is passed via Class= to a CHILD component, whose root
   carries the DESIGN SYSTEM's scope id rather than ProfileMenu's — and ::deep cannot rescue that,
   because ProfileMenu renders no plain element for ::deep to hang off. The menu also renders in a
   popover at the document root, which scoped CSS provably cannot reach (same rule CLAUDE.md states
   for the Telerik popups).

   The two PADDINGS that used to live here are gone: #589 shipped in the 0d572da4 bump and
   StmDropDownButton's rich-menu path now owns its own inset. Only the track width is still ours,
   and that is layout geometry rather than a themable value. */
.profile-menu__panel {
    /* stm-lint-ok:raw-dimension -- menu track width, layout geometry with no token category */
    min-width: 15rem;
}