/* Page chrome + home page styles. Form-specific styles ship from
   InternalForms.Components/wwwroot/forms.css and are loaded via
   _content/InternalForms.Components/forms.css from index.html. */

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-text);
    /* Per-brand whole-page background; falls back to plain white when --color-page-bg
       is unset (e.g. during first paint, before the brand theme is applied) so there
       is no colored flash while the app loads. */
    background: var(--color-page-bg, #ffffff);
    background-attachment: fixed;
    font-size: 14px;
}

.app-main { min-height: 100vh; }

/* Header bar ABOVE the form, same width as the form column (max-content) and aligned
   to the form cards' edges via matching horizontal padding. Left: "Application Form";
   right: brand logo. Client brief: logo top-right, over the whole form. */
/* Transparent strip holding ONLY the brand logo, top-right. No background, no title.
   Inner content stays aligned to the form column; logo is the same size for all brands. */
.form-topbar {
    width: 100%;
    height: 84px;
}
.form-topbar__inner {
    max-width: var(--max-content);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.form-topbar__logo {
    height: 52px;
    width: auto;
    max-width: min(60vw, 260px);
    object-fit: contain;
}

/* With the header present, the wizard flows from the top instead of filling and
   vertically centering the whole viewport (which would push it under the header). */
.app-main .form-page--flush {
    min-height: auto;
    justify-content: flex-start;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}