:root {
    --primary:            #2b2b53;
    --primary-mid:        #2e2e59;
    --secondary:          #006a6a;
    --on-surface:         #121c28;
    --on-surface-variant: #5a5f6e;
    --surface-low:        #eef0f8;
    --outline:            #dde1ec;
    --error:              #ba1a1a;
    --error-container:    #ffdad6;
    --on-error-container: #93000a;
}

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

html, body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--on-surface);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Mobile layout: full-screen bg + floating card ─────────────────── */
.auth-wrap {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

/* background image layer. Mobile: full-bleed photo behind the floating
   card (below). Desktop switches to a split layout instead — see the
   media query — where the photo gets its own reserved column so it can
   never end up positioned under the card. */
.auth-bg {
    position: fixed;
    inset: 0;
    background-color: var(--primary);
    background-size: cover;
    background-position: center 15%;
    background-repeat: no-repeat;
    z-index: 0;
}
.auth-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Navy vignette, not a navy→teal wash: it only needs to darken the zone
       behind the white brand text up top. Left clear over the photo itself
       so the cutout's true colours read (a colour wash there just muddies
       skin/hair tones), and kept to a single navy hue to avoid teal fighting
       the photo's neutral palette. */
    background: radial-gradient(88% 55% at 50% -8%,
        rgba(43,43,83,0.85) 0%,
        rgba(43,43,83,0.5) 35%,
        rgba(43,43,83,0.2) 60%,
        rgba(43,43,83,0.05) 85%,
        rgba(43,43,83,0) 100%);
}

/* logo + app name above the card */
.auth-mobile-brand {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 1.5rem;
}
.auth-mobile-brand img { height: 2.75rem; width: auto; }
.auth-mobile-brand h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0.6rem 0 0.2rem;
}
.auth-mobile-brand p {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
}

/* floating form card */
.auth-form-panel {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 1.5rem;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(43,43,83,0.35);
}
.auth-form-panel-roomy {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 12rem);
}
.auth-form-panel-roomy .auth-form-inner {
    overflow-y: auto;
    min-height: 0;
}
.auth-form-inner {
    padding: 2rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
}

/* ── Desktop layout: split screen — login only ────────────────────────
   The photo column (and the padding-right that reserves space for it)
   only switches on when the card is .auth-form-panel-roomy — currently
   just login, the one short/fixed-content screen it was designed for.
   Every other auth page (signup, forgot-password, create-account, ...)
   keeps the full width: :has() below means we don't have to guess at a
   width that works for every page's content — pages with more to say
   just aren't squeezed in the first place. Squeezing them earlier is
   exactly what forced signup's card into an unwanted internal scroll:
   less width → more text wrapping → taller card → past its max-height. */
@media (min-width: 768px) {
    .auth-wrap:has(.auth-form-panel-roomy) {
        padding: 3rem 1rem;
        padding-right: calc(38vw + 1rem);
        background-color: var(--primary);
    }

    .auth-wrap:has(.auth-form-panel-roomy) .auth-bg {
        inset: 0 0 0 auto;
        width: 38vw;
        /* contain, not cover: this photo is cropped tight to the group
           already (no headroom to spare), so cover would just zoom in and
           chop people off at the column edge. Scaling to fit keeps everyone
           in frame — and since it can never spill past its own 38vw box
           (background painting is always clipped to its element), it can't
           reach the card at any width either. */
        background-size: contain;
        background-position: center 10%;
    }
    .auth-wrap:has(.auth-form-panel-roomy) .auth-bg::after {
        background: linear-gradient(to right,
            rgba(43,43,83,0.7) 0%,
            rgba(43,43,83,0.2) 15%,
            rgba(43,43,83,0) 35%);
    }

    /* Every other auth page keeps the full-bleed photo (no reserved column,
       so the card keeps its full width) — but scaled to fit the whole group
       in frame instead of cover, which was zooming in hard and cropping
       most of the group at wide/landscape desktop sizes. */
    .auth-wrap:not(:has(.auth-form-panel-roomy)) .auth-bg {
        background-size: contain;
        background-position: center 12%;
    }

    .auth-wrap { padding: 3rem 1rem; }

    .auth-form-panel { max-width: 440px; }
    .auth-form-panel-roomy { max-width: 500px; max-height: calc(100dvh - 16rem); }
    .auth-form-inner { padding: 2rem 2.5rem 2rem; }

    .auth-mobile-brand { margin-bottom: 1.75rem; }
    .auth-mobile-brand img { height: 3.25rem; }
    .auth-mobile-brand h1  { font-size: 1.75rem; }
    .auth-mobile-brand p   { font-size: 0.68rem; }
}

/* ── Form elements ────────────────────────────────────────────────── */
.auth-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.5rem;
}
.auth-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #121c28;
    margin-bottom: 0.35rem;
    display: block;
}
.auth-input {
    width: 100%;
    background: #f3f4f6;
    border: none;
    border-bottom: 2px solid #c4c6cf;
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 0.75rem 0.875rem;
    font-size: 0.95rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #121c28;
    transition: border-color 0.2s;
    outline: none;
}
.auth-input:focus { border-bottom-color: var(--secondary); background: #eef0f8; }

.auth-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 44px;
    background: var(--secondary);
    color: #fff;
    border: none;
    border-radius: 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    transition: background 0.2s;
}
.auth-btn-primary:hover  { background: #004f4f; }
.auth-btn-primary:active { transform: scale(0.98); }

.auth-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1.5rem;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    border-radius: 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.auth-btn-primary-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1.5rem;
    border: 1.5px solid var(--secondary);
    color: var(--secondary);
    border-radius: 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
 }
.auth-btn-outline:hover { background: var(--primary); color: #fff; }

.auth-btn-primary-outline:hover { background: var(--secondary); color: #fff; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--on-surface-variant);
    font-size: 0.75rem;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: #c4c6cf; }

.auth-link { color: var(--secondary); font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.auth-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.auth-footer a { font-size: 0.7rem; color: var(--on-surface-variant); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.auth-footer .auth-footer-copy { font-size: 0.7rem; color: var(--on-surface-variant); margin-left: auto; }

.auth-alert-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #ffdad6;
    color: #93000a;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.auth-alert-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fff6e0;
    color: #b26a00;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.auth-rename-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--surface-low);
    border: 1px solid var(--outline);
    border-radius: 0.75rem;
    padding: 0.7rem 0.9rem;
    margin: 0 0 1.5rem;
}
.auth-rename-notice i {
    color: var(--secondary);
    font-size: 0.8rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.auth-rename-notice p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--on-surface-variant);
}
.auth-rename-notice strong { color: var(--primary); font-weight: 700; }
.auth-alert-success {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #d6f5e3;
    color: #1a6e3a;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.auth-form-hint { font-size: 0.75rem; color: var(--on-surface-variant); margin-top: 0.35rem; }

/* Body copy on auth pages (confirmations, instructions) */
.auth-text { font-size: 0.9rem; color: #44474e; line-height: 1.55; margin: 0 0 1rem; }
.auth-text-tight { margin-top: -0.75rem; }

/* ── Content-heavy pages (signup step 1) ──────────────────────────────
   A wider card with the form beside a supporting notes column. Both the
   extra width and the second column only apply from md up; on mobile the
   card stays the standard width and the columns stack. */
.auth-cols { display: grid; gap: 1.5rem; }

.auth-aside {
    background: var(--surface-low);
    border: 1px solid var(--outline);
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.auth-aside h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.4rem;
}
.auth-aside p {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--on-surface-variant);
    margin: 0;
}
.auth-aside-block + .auth-aside-block {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--outline);
}

@media (min-width: 768px) {
    .auth-form-panel-wide { max-width: 860px; }
    .auth-cols {
        grid-template-columns: 1fr 0.85fr;
        gap: 3rem;
        align-items: start;
    }
}

/* ── Content-heavy auth pages (create-account / associate) ──────────────
   A wider card that fills the available screen height and scrolls its OWN
   content, so the page itself never gets a scrollbar. Scoped to this page
   via .auth-form-panel-fit; other auth screens keep the compact card. */
.auth-form-panel-fit {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 12rem);
}
.auth-form-panel-fit .auth-form-inner {
    overflow-y: auto;
    min-height: 0;
}
@media (min-width: 768px) {
    .auth-form-panel-fit { max-height: calc(100dvh - 16rem); }
    /* wider single-column card; the two-column "wide" layout keeps its 860px */
    .auth-form-panel-fit:not(.auth-form-panel-wide) { max-width: 600px; }
}

/* ── Form validation (Bootstrap 5 form theme output) ────────────────── */
.auth-input.is-invalid { border-bottom-color: var(--error); background: var(--error-container); }
.invalid-feedback { color: var(--on-error-container); font-size: 0.75rem; margin-top: 0.35rem; }