/* ============================================================================
   portal-auth.css — the unauthenticated surface (login, forgot, reset, request access)
   user-logon-page project, 2026-08-07.

   Deliberately a SEPARATE file from portal.css: `.verge_login` in portal.css is shared
   with `.chpass` and authenticated pages, so editing it there would leak. Everything
   here is scoped under .cpg-auth, which only these four pages use. Rollback = drop the
   stylesheet link.

   Layout follows AdTrackCenter's card pattern (decisions.md D-1); colours follow
   documents/portal-ui-ux-standards-guide.md (Inter, Primary Blue #2563EB).
   ========================================================================= */

:root {
    --cpg-blue:        #2563EB;
    --cpg-blue-hover:  #1D4ED8;
    --cpg-blue-active: #1E40AF;
    --cpg-ink:         #111827;
    --cpg-body:        #374151;
    --cpg-muted:       #6B7280;
    --cpg-line:        #E5E7EB;
    --cpg-page:        #F3F4F6;
    --cpg-danger:      #DC2626;
    --cpg-success:     #047857;
}

/* ---------- page ---------- */
/* Blue field, white card. This is the pattern AdTrackCenter actually uses, and it is what
   the Convergent lockup needs: the logo is blue-on-transparent, so it must sit on white -
   which means the brand colour has to carry on the page instead of in the card header. */
body.cpg-auth {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--cpg-blue-active);
    background-image: linear-gradient(135deg, #1E3A8A 0%, var(--cpg-blue) 55%, #60A5FA 100%);
    background-attachment: fixed;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--cpg-body);
    -webkit-font-smoothing: antialiased;
}

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

/* ---------- card ---------- */
.cpg-auth-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .10), 0 1px 3px rgba(17, 24, 39, .06);
    overflow: hidden;
}

/* ---------- brand header band ----------
   WHITE on purpose. The Convergent lockup is blue-and-grey on transparent, so it cannot
   sit on the blue band this started as - it would vanish. The blue now carries in the page
   background and the primary button, which is the stronger pattern anyway (Stripe/Linear
   do the same: white card, real logo, coloured action).
   "Customer Portal" stays as TEXT so the card still identifies itself with images blocked. */
.cpg-auth-brand {
    background: #fff;
    padding: 32px 28px 22px;
    text-align: center;
    border-bottom: 1px solid var(--cpg-line);
}
/* Sized up at Curt's request, 2026-08-09. The card is 440px wide with 28px side padding,
   so 320px leaves a comfortable margin without the lockup crowding the edges. The source
   asset is 1059px wide, so this is still well under 1x and stays crisp on retina. */
.cpg-auth-brand img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 320px;
    height: auto;
}
/* "CUSTOMER PORTAL" must not look like a third line of the lockup.
   It previously used grey + uppercase + letterspacing — exactly the treatment of "PRINT GROUP"
   inside the logo — so it was absorbed into the mark instead of reading as the product name.
   Now brand blue, larger and heavier, with a rule to separate it from the logo. */
.cpg-auth-brand .cpg-brand-sub {
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--cpg-line);
    color: var(--cpg-blue);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------- body ---------- */
.cpg-auth-body { padding: 28px 32px 24px; }

.cpg-auth-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
    color: var(--cpg-ink);
}
.cpg-auth-lede {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cpg-muted);
}

/* ---------- one consistent alert slot ----------
   Replaces the three different ad-hoc message patterns the old pages used. */
.cpg-alert {
    display: flex;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 18px;
    border: 1px solid transparent;
}
.cpg-alert i { flex: 0 0 auto; margin-top: 2px; }
.cpg-alert-error   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.cpg-alert-success { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }

/* ---------- fields ---------- */
.cpg-field { margin: 0 0 16px; }
.cpg-field > label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cpg-ink);
}

.cpg-input-wrap { position: relative; display: block; }
.cpg-input-wrap > .cpg-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    font-size: 14px;
    pointer-events: none;
}

.cpg-auth input[type="text"].cpg-input,
.cpg-auth input[type="email"].cpg-input,
.cpg-auth input[type="password"].cpg-input {
    width: 100%;
    height: 44px;
    padding: 10px 14px 10px 38px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--cpg-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cpg-auth input.cpg-input::placeholder { color: #9CA3AF; }
.cpg-auth input.cpg-input:focus {
    outline: none;
    border-color: var(--cpg-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}
/* password fields leave room for the show/hide toggle */
.cpg-auth input.cpg-input.has-toggle { padding-right: 44px; }

/* ---------- password show/hide ---------- */
.cpg-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--cpg-muted);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}
.cpg-pw-toggle:hover  { color: var(--cpg-ink); background: #F3F4F6; }
.cpg-pw-toggle:focus-visible { outline: 2px solid var(--cpg-blue); outline-offset: 1px; }

/* ---------- remember me ---------- */
.cpg-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--cpg-body);
    cursor: pointer;
}
.cpg-check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--cpg-blue);
    cursor: pointer;
    margin: 0;
}

/* ---------- buttons ---------- */
.cpg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.cpg-btn-primary { background: var(--cpg-blue); color: #fff; }
.cpg-btn-primary:hover  { background: var(--cpg-blue-hover); }
.cpg-btn-primary:active { background: var(--cpg-blue-active); }
.cpg-btn-secondary {
    background: #fff;
    color: var(--cpg-body);
    border-color: #D1D5DB;
    margin-top: 10px;
}
.cpg-btn-secondary:hover { background: #F9FAFB; color: var(--cpg-ink); }
.cpg-btn:focus-visible { outline: 2px solid var(--cpg-blue-active); outline-offset: 2px; }
.cpg-btn[disabled], .cpg-btn.is-busy { opacity: .65; cursor: not-allowed; }

/* ---------- footer band ---------- */
.cpg-auth-foot {
    background: #F9FAFB;
    border-top: 1px solid var(--cpg-line);
    padding: 15px 32px;
    text-align: center;
    font-size: 13.5px;
}
.cpg-auth-foot a {
    color: var(--cpg-blue);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}
.cpg-auth-foot a:hover { color: var(--cpg-blue-hover); text-decoration: underline; }
.cpg-auth-foot .cpg-sep { color: #D1D5DB; margin: 0 9px; }

/* sits on the blue field, so it needs light type - not the grey it had when the page was white */
.cpg-auth-outro {
    margin: 16px 0 0;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,.75);
}

/* ---------- password rules hint ---------- */
.cpg-hint {
    margin: -8px 0 16px;
    font-size: 12.5px;
    color: var(--cpg-muted);
    line-height: 1.5;
}

/* ---------- live password requirement checklist ---------- */
.cpg-pwreq {
    background: #F9FAFB;
    border: 1px solid var(--cpg-line);
    border-radius: 8px;
    padding: 12px 14px;
    margin: -4px 0 16px;
    font-size: 12.5px;
    line-height: 1.6;
}
.cpg-pwreq-title {
    font-weight: 600;
    color: var(--cpg-ink);
    margin-bottom: 6px;
}
.cpg-pwreq-item {
    color: var(--cpg-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}
.cpg-pwreq-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 5px 0 0 20px;
}
.cpg-pwreq-chip {
    color: var(--cpg-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.cpg-pwreq i { font-size: 11px; width: 12px; text-align: center; }

/* met / unmet. Colour is never the ONLY signal - the icon changes shape too,
   so this still reads for colour-blind users and in forced-colours mode. */
.cpg-pwreq .is-met      { color: var(--cpg-success); }
.cpg-pwreq .is-met i    { color: var(--cpg-success); }
.cpg-pwreq .is-unmet    { color: var(--cpg-muted); }

/* ---------- FormValidation messages ----------
   The login JS sets eleInvalidClass:'' so Bootstrap's .is-invalid is never applied,
   which would leave .invalid-feedback display:none. Force the container visible. */
.cpg-auth .fv-plugins-message-container {
    display: block !important;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--cpg-danger);
}
.cpg-auth .fv-plugins-message-container > div { margin-top: 2px; }

/* ---------- small screens ---------- */
@media (max-width: 480px) {
    body.cpg-auth      { padding: 16px 12px; align-items: flex-start; }
    .cpg-auth-brand    { padding: 24px 20px 20px; }
    .cpg-auth-body     { padding: 22px 20px 20px; }
    .cpg-auth-foot     { padding: 14px 20px; }
    .cpg-auth-brand .cpg-brand-name { font-size: 20px; }
}

/* ---------- short viewport safety (2026-09-18) ----------
   A MEASURED bug, not a theoretical one. Below roughly 675px of viewport height this card was
   silently eating its own controls, and a customer sent in a screenshot of it.

   body.cpg-auth is a COLUMN flex container, so the card is a flex item carrying the default
   flex-shrink:1. A short window therefore made flexbox SQUASH the card - measured on
   production at 560px: a 478px box around 587px of content - instead of letting the page grow
   taller. .cpg-auth-card's overflow:hidden, which is there to clip the brand header's rounded
   corners, then hid the overflow. And because the card had shrunk to FIT, the document was
   never taller than the window, so no scrollbar appeared: "Forgot password?" and "Request
   access" were unreachable BY ANY MEANS, on the one page where somebody who cannot sign in
   needs them. A little shorter still and the Sign In button goes the same way.

   flex-shrink:0 ALONE IS NOT THE FIX. It un-squashes the card, but justify-content:center then
   pushes the card's top to a negative offset that cannot be scrolled back to (measured: -30px)
   - trading one invisible-content bug for another. Switching to flex-start and reproducing the
   centering with auto margins avoids that trap entirely.

   These four rules live at the END of the file on purpose: .cpg-auth-outro above sets
   `margin: 16px 0 0`, whose margin-bottom:0 would otherwise beat the auto margin here.

   Verified on production before deploying: at 1000px tall the geometry is pixel-identical to
   before (card top 190, gap below 190), and at 560px nothing is squashed, the page gains 85px
   of scroll, and the footer links are reachable. The max-width:480px block above handles
   NARROW screens; nothing handled SHORT ones. */
body.cpg-auth      { justify-content: flex-start; }
body.cpg-auth > *  { flex-shrink: 0; }
.cpg-auth-card     { margin-top: auto; }
.cpg-auth-outro    { margin-bottom: auto; }