/* Application shell. Component styling lives in css/concordance.css; both build on the
   Fluent design tokens rather than restating colours. */

html, body {
    height: 100%;
    margin: 0;
}

/* The design tokens carry the theme, but nothing paints the page from them by default —
   without this the shell stays white when the user switches to dark. */
body {
    background-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

/* The service name is long, and the header lays it out against the account controls. Without
   a floor of zero the flex item refuses to shrink and the text spills across them; with it,
   the name gives way and is cut with an ellipsis rather than colliding. */
.brand {
    font-size: var(--type-ramp-plus-2-font-size);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .brand {
        font-size: var(--type-ramp-base-font-size);
    }
}

/* White on the light theme, black on the dark one. Both come from the token Fluent computes
   to be legible against the accent colour, which is what fills the header band — the accent
   is a deep blue in light mode and a pale one in dark, so the token flips on its own and the
   title stays readable without this file knowing which theme is on.

   ::part is needed because the anchor renders its text inside a shadow root, where a rule on
   the host element cannot reach it. */
.brand::part(control) {
    color: var(--foreground-on-accent-rest);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.main {
    flex: 1;
    align-items: stretch !important;
    min-height: 0;
}

.nav-panel {
    flex: 0 0 auto;
    border-right: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
}

/* The only scrolling region: the shell fills the viewport and the page scrolls inside here.
   `position: relative` makes this the containing block for anything absolutely positioned in
   a page, so it is clipped by the overflow above rather than escaping to the layout and
   giving the document a second scrollbar — which scrolled the whole shell, header and all,
   whenever the pointer sat over the navigation instead of over the content. */
.body-content {
    flex: 1;
    min-width: 0;
    overflow: auto;
    position: relative;
}

.content {
    padding: 1.5rem 2rem 3rem;
}

h1:focus {
    outline: none;
}

.validation-message {
    color: var(--error);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.7rem 2rem;
    background: var(--error, #b32121);
    color: #fff;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 20%);
}

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

@media print {
    .nav-panel,
    fluent-design-system-provider > header,
    fluent-header,
    #blazor-error-ui {
        display: none !important;
    }

    /* The shell is a full-height flex layout with a scrolling body, which is why printing
       produced a single page: the browser prints what fits in that fixed-height box and
       discards the rest. Everything from the root down has to release its height and its
       overflow so the report becomes one long flow that can break across pages. */
    html,
    body,
    fluent-design-system-provider,
    fluent-layout,
    fluent-body-content,
    .main,
    .body-content,
    .content {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    fluent-layout,
    .main,
    fluent-body-content,
    .body-content {
        display: block !important;
    }

    .content {
        padding: 0;
    }
}