/* ── Shared font token — defined here so it wins on every page regardless
   of which per-page stylesheet loads before or after this shared file. ── */
:root {
    --signup-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.body-panel, body {
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #fff !important;
    color: #767676;
    background-image: none;
}

html,
body {
    height: 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body {
    margin: 0;
    font-family: var(--signup-font);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, ::after, ::before {
    box-sizing: border-box;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.content-panel > .main-content-header.content-header-panel,
.content-panel > .content-header-panel.main-content-header {
    margin: -40px -5000px auto -5000px !important;
    padding-right: 5000px !important;
    padding-left: 5000px !important;
    z-index: 10;
    padding: 0;
}

/* Footer: keep the full-width horizontal "bleed" but do NOT pull the footer
   up with a negative top margin, otherwise it overlaps (masks) the bottom of
   the main content area. */
.content-panel-footer.main-footer {
    margin: 0 -5000px 0 -5000px !important;
    padding-right: 5000px !important;
    padding-left: 5000px !important;
    z-index: 10;
}

.main-content-header.content-header-panel {
    background-color: #fcfcfc !important;
}

.border-bottom {
    border-bottom: var(--bs-border-width, 1px)
                   var(--bs-border-style, solid)
                   var(--bs-border-color, #dee2e6) !important;
}

/* ── Logo ───────────────────────────────────────────────────────────────────── */
/* Centre the figure that wraps the logo */
.content-header-panel figure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0px 0;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px 0;
}

.logo-img {
    display: inline-block;
    width: 390px;
    height: 96px;
    background: var(--logo-url) center / contain no-repeat;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.content-panel-footer.main-footer {
    background-color: #484848;
    padding: 16px 0 !important;
    /* Self-contained font: never inherit from body, regardless of which page is loaded */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.content-header-panel.main-content-header,
.content-panel-footer.main-footer {
    flex: 0 0 auto;
}

/* Main content wrapper — L/R borders run from bottom of header to top of
   footer (flex:1 0 auto fills remaining height in the body column).
   fit-content: border width hugs the form inside (600px login, 1000px register).
   min() caps width to viewport so fit-content never causes a horizontal scrollbar. */
.mdc-drawer-app-content.mdc-top-app-bar--fixed-adjust {
    flex: 1 0 auto;
    width: min(fit-content, 100vw);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid #d7dbe0 !important;
    border-right: 1px solid #d7dbe0 !important;
    box-sizing: border-box;
}

/* FOUC prevention for create account page (body#cas):
   fit-content requires 2 layout passes — browser computes content width first,
   causing a flash from narrow → wide. min(1000px, 100%) is resolved in ONE pass
   with no reflow. Matches the existing body#cas .mdc-card width. */
body#cas .mdc-drawer-app-content.mdc-top-app-bar--fixed-adjust {
    width: min(1350px, 100%) !important;
    max-width: min(1350px, 100%) !important;
}

 /* Wide-screen body#cas padding: clamp(0px, (100vw - 820px)/2, 14rem) for registration/user pages.
      Keeps card centered, responsive, and capped at 14rem without affecting header/footer backgrounds.
      Mobile (<820px) stays unchanged since clamp() yields 0 padding. */
body#cas,
#cas {
    padding-left: clamp(0px, calc((100vw - 820px) / 2), 14rem);
    padding-right: clamp(0px, calc((100vw - 820px) / 2), 14rem);
    box-sizing: border-box;
}

/* Header/footer need full-bleed width even when body#cas adds clamp side padding.
   We apply equal negative margins to header/footer to cancel body’s padding,
   so they stretch to viewport edges while body content stays padded. */
body#cas > header.main-content-header,
body#cas > .content-header-panel,
body#cas > .content-panel-footer,
body#cas > footer.main-footer,
#cas > header.main-content-header,
#cas > .content-header-panel,
#cas > .content-panel-footer,
#cas > footer.main-footer {
    margin-left:  calc(-1 * clamp(0px, calc((100vw - 820px) / 2), 14rem)) !important;
    margin-right: calc(-1 * clamp(0px, calc((100vw - 820px) / 2), 14rem)) !important;
}

#main-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    margin-left: 0;
    padding-top: 0 !important;
    padding-bottom: 4rem !important;
    /* Strip any top/bottom borders that Bootstrap / MDC / container-lg may
       apply to the <main> element so only the wrapper's L/R rails show. */
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Belt-and-braces: also strip top/bottom borders from the inner content
   wrapper and the form itself, in case a theme rule paints one. */
#main-content > #content,
#main-content #content,
#main-content form,
#main-content .mdc-card {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

#main-content > #content {
    width: 100%;
}

.footer-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.footer-copy {
    font-size: 1rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: #fff !important;
    margin: 15px !important;
}

/* Forgot-password pages: 16px white footer text (matches login page) */
body.forgot-password-page .content-panel-footer.main-footer,
body.forgot-password-page .content-panel-footer.main-footer *,
body.forgot-password-page .footer-inner,
body.forgot-password-page .footer-inner *,
body.forgot-password-page .footer-copy,
body.forgot-password-page .footer-copy * {
    font-size: 16px !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* Cover any child elements inside footer-copy (e.g. the year <span>) */
.footer-copy *,
.footer-inner *,
.content-panel-footer.main-footer * {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* ── Square form corners ───────────────────────────────────────────────────
   Register page (`body#cas`) ONLY: apply the requested visual overrides —
   wider card, square corners, no shadow, taller form fields. All other
   pages (login, success, MFA, etc.) keep their own styling untouched. */

/* Register card: wider, square, no shadow */
body#cas .mdc-card.p-4.m-auto,
body#cas .mdc-card.p-4.m-auto.w-lg-100,
body#cas #main-content .mdc-card,
body#cas #content .mdc-card,
body#cas #main-content form,
body#cas #content form {
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
}

/* Register form fields: bump input / select heights to 42px for easier
   reading + tap targets. Scoped to body#cas so login / success / MFA
   pages are unaffected. */
body#cas input.form-control,
body#cas select.form-control,
body#cas textarea.form-control,
body#cas .mdc-text-field__input.form-control,
body#cas .street-address-group input.form-control,
body#cas .street-address-group select.form-control {
    height: 42px !important;
    min-height: 42px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

/* MDC outlined wrapper (register uses `.mdc-text-field--outlined` inside
   `.cas-field` labels) — let it grow with the taller input. */
body#cas .mdc-text-field--outlined {
    height: auto !important;
    min-height: 42px !important;
}

body#cas textarea.form-control {
    height: auto !important;
    min-height: 96px !important;
}

/* ── Global viewport safety ───────────────────────────────────────────────
   Hard-cap everything to viewport width — no element can trigger a
   horizontal scrollbar. */
html, body {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ── Tablet (500–991px): 16px gap from screen edges ────────────────────────── */
@media (min-width: 500px) and (max-width: 991px) {
    /* login / other pages: keep fit-content + auto centering,
       just cap at viewport-minus-16px each side */
    body:not(#cas) .mdc-drawer-app-content.mdc-top-app-bar--fixed-adjust {
        max-width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* create account: fixed width centered */
    body#cas .mdc-drawer-app-content.mdc-top-app-bar--fixed-adjust {
        width: min(1000px, calc(100% - 32px)) !important;
        max-width: min(1000px, calc(100% - 32px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:not(#cas) #main-content .mdc-card.p-4.m-auto,
    body:not(#cas) #main-content .mdc-card.p-4.m-auto.w-lg-100,
    body:not(#cas) #content .mdc-card.p-4.m-auto,
    body:not(#cas) #content .mdc-card.p-4.m-auto.w-lg-100,
    body:not(#cas) #main-content .login-card,
    body:not(#cas) #content .login-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

/* ── Mobile (<500px): 8px gap, keep L/R borders visible ─────────────────── */
@media (max-width: 499px) {
    /* All pages: 8px margin each side so border doesn't touch screen edge */
    .mdc-drawer-app-content.mdc-top-app-bar--fixed-adjust {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        align-items: flex-start !important;
    }

    /* Create account: same 8px gap */
    body#cas .mdc-drawer-app-content.mdc-top-app-bar--fixed-adjust {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }

    body:not(#cas) #main-content,
    body:not(#cas) #main-content.container-lg,
    body:not(#cas) #main-content > #content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body:not(#cas) #main-content .mdc-card,
    body:not(#cas) #main-content .login-card,
    body:not(#cas) #content .mdc-card,
    body:not(#cas) #content .login-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}