/* =================================================================
   Sign-in surfaces — login, password recovery, reset, sign-up, and
   the agent portal's login and claim screens.

   All of those views share one markup shape:

       .container > .row > [col] > div > .text-center(logo) + .card

   so this file styles that shape rather than each page, and none of
   the views needed restructuring to pick it up.

   WHY THE PALETTE IS REDECLARED HERE. These pages load
   assets/front/css/custom.css, not assets/css/style.css, so the
   :root block that themes the rest of the system is not present and
   every var() on this page was silently falling back — which is why
   the sign-in button stayed the old teal after the system was
   rebranded. The palette below is the same one style.css declares.

   It is linked BEFORE qa_theme_tag(), so the QA server still
   overrides these values and its sign-in screen stays visibly
   different from production's.
   ================================================================= */

:root {
  --brand:        #b8590b;
  --brand-hover:  #9c4c08;
  --brand-light:  #e0730f;
  --sidebar:      #b8590b;
  --topbar:       #b8590b;   /* flat fallback; style.css agrees */
}

/* custom.css sets padding-top:54px for a fixed navbar these pages do
   not have — it was the dead band above the card. */
body.auth-page {
    padding-top: 0 !important;
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The shell's gradient, same colours in the same order, so signing
       in and arriving in the portal read as one surface. Orange leads
       and owns the upper two thirds; the blue settles into the far
       corner without competing for the page.

       Kept at 135deg rather than the shell's 100: this is a full
       viewport rather than a bar, and the diagonal is what gives a
       canvas this size somewhere to travel.

       #7c4a24 and #4f4b58 are real stops, not steps along the way —
       orange blended straight into blue passes through a muddy
       grey-brown, and a canvas this large shows every pixel of it.

       The two radial passes are the depth. The white lift sits over the
       orange head, exactly as it does on the top bar. The far corner
       used to carry an orange glow, which would now sit on top of the
       settling blue and undo it; it is a deepening instead, so the
       corner still has weight but the blue stays quiet. */
    background: var(--sidebar, #b8590b) !important;
    background-image:
        radial-gradient(1100px 520px at 12% -8%, rgba(255, 255, 255, 0.12), transparent 62%),
        radial-gradient(900px 620px at 100% 108%, rgba(20, 34, 56, 0.42), transparent 58%),
        linear-gradient(135deg,
            var(--sidebar, #b8590b)  0%,
            #a8530a 34%,
            #7c4a24 60%,
            #4f4b58 80%,
            #3a4a66 100%) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The views set inline heights sized for the old flat page. */
body.auth-page .container {
    height: auto !important;
    margin: 0 auto !important;
    padding: 40px 16px;
    max-width: 100%;
}
body.auth-page .container > .row { justify-content: center; margin: 0; }
body.auth-page .container > .row > [class^="col-"],
body.auth-page .container > .row > [class*=" col-"] {
    width: 100%;
    max-width: 452px;
    flex: 0 0 auto;
    padding: 0;
}
/* These views centre their card in one of two older ways: an empty
   column either side, or a bootstrap offset. Both fight the flex
   centring above and push the card off to the right, so both are
   neutralised here rather than edited out of five templates. */
body.auth-page .container > .row > .col-sm-4:empty { display: none; }
body.auth-page .container > .row > [class*="offset-"] { margin-left: 0 !important; }

/* Sign-up is a wider form than the rest of the family. */
body.auth-page .container > .row > .col-md-8 { max-width: 720px; }

/* ─── Logo plate above the card ──────────────────────────────────── */
body.auth-page .text-center > img {
    height: 104px !important;
    width: auto !important;
    display: block;
    margin: 0 auto 26px;
    padding: 14px 20px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
body.auth-page br { display: none; }

/* ─── The card ───────────────────────────────────────────────────── */
body.auth-page .card {
    position: relative;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(5, 20, 45, 0.32), 0 2px 8px rgba(5, 20, 45, 0.18);
}
/* A hairline of the page's two colours across the top of the card, run
   in the same order as the canvas behind it.

   It used to end on var(--brand). That was the blue when it was
   written, but --brand became the orange accent at the rebrand and both
   ends collapsed to #b8590b — a "gradient" of one colour. The settling
   blue is a literal here for that exact reason. */
body.auth-page .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sidebar, #b8590b) 0%, #3a4a66 100%);
}
body.auth-page .card-body { padding: 34px 32px 30px !important; }

body.auth-page .card-body h3 {
    margin: 0 0 5px !important;
    font-size: 21px;
    font-weight: 700;
    color: #14243a;
    letter-spacing: -0.01em;
}
body.auth-page .card-body h3 { text-align: center; }
/* The subtitle is real markup in the view, not injected here: text put in
   a pseudo-element cannot be selected, cannot be translated, and cannot be
   found by anyone reading the template. */
body.auth-page .auth-sub {
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
    color: #8a97a8;
    letter-spacing: 0.02em;
    margin: 0;
}
/* The rule under the heading becomes spacing. */
body.auth-page .card-body hr {
    border: 0;
    height: 0;
    margin: 0 0 26px;
}

/* ─── Fields ─────────────────────────────────────────────────────── */
body.auth-page .form-group { margin-bottom: 18px; }
body.auth-page label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7785;
    margin-bottom: 7px;
}
body.auth-page .form-control {
    height: 46px;
    border: 1.5px solid #dbe2ec;
    border-radius: 9px;
    padding: 0 14px;
    font-size: 14.5px;
    color: #1a2939;
    background: #fbfcfe;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.auth-page .form-control:focus {
    border-color: var(--brand, #275baa);
    background: #ffffff;
    /* Was rgba(39, 91, 170, ...) — the old blue, left behind by the
       rebrand, haloing a border that had already gone orange. */
    box-shadow: 0 0 0 4px rgba(184, 89, 11, 0.16);
    outline: none;
}
body.auth-page .form-control::placeholder { color: #a9b4c2; }

/* ─── Submit ─────────────────────────────────────────────────────── */
body.auth-page #auth_button,
body.auth-page button[type="submit"] {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 9px !important;
    background: var(--brand, #b8590b) !important;
    color: #ffffff !important;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 4px;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
body.auth-page #auth_button:hover,
body.auth-page button[type="submit"]:hover {
    background: var(--brand-hover, #9c4c08) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(184, 89, 11, 0.34);
}
body.auth-page #auth_button:focus-visible,
body.auth-page button[type="submit"]:focus-visible {
    outline: 3px solid rgba(184, 89, 11, 0.50);
    outline-offset: 2px;
}

/* ─── Secondary links ────────────────────────────────────────────── */
body.auth-page .card-body a {
    color: var(--brand, #275baa) !important;   /* was a stray brown */
    font-size: 13px !important;
    font-weight: 600;
    text-decoration: none;
}
body.auth-page .card-body a:hover { text-decoration: underline; }
body.auth-page .card-body p { margin-bottom: 6px; }
body.auth-page .form-group.m-b-5 { margin-top: 22px; margin-bottom: 0; }

/* ─── Feedback ───────────────────────────────────────────────────── */
body.auth-page #response_div { font-size: 13.5px; margin-bottom: 8px; }
body.auth-page #loading img { height: 34px; width: auto; }
body.auth-page .alert { border-radius: 0; margin: 0; font-size: 13.5px; }

@media (max-width: 575.98px) {
    body.auth-page .card-body { padding: 26px 20px 24px !important; }
    body.auth-page .text-center > img { height: 74px !important; }
}