/*
    Auth pages (sign in, forgotten password, reset password).

    This shell is worn by four different brands, so it deliberately has no strong
    opinion of its own: the brand is the only colour on the page and everything else
    is neutral. --brand / --brand-ink are injected server-side by _BrandingHead.cshtml.

    Loaded only by _AuthLayout.cshtml. Kept out of site.css on purpose — that file has
    a hand-maintained site.scss twin with no build step wired up, so anything added
    there has to be written twice and will drift.
*/

/* This layout does not load Bootstrap, so auth.css stands alone. */
.auth-page *,
.auth-page *::before,
.auth-page *::after {
    box-sizing: border-box;
}

.auth-page {
    --surface: #f4f5f7;
    --card: #ffffff;
    --border: #e2e5ea;
    --ink: #14171c;
    --ink-muted: #5b6472;
    --ink-faint: #8a929e;
    --danger: #b3261e;

    min-height: 100vh;
    margin: 0;
    background-color: var(--surface);
    /* Brand-tinted wash: each tenant's page reads differently at a glance even though
       the chrome is identical. Degrades to the flat surface colour if color-mix is
       unsupported. */
    background-image:
        radial-gradient(60rem 40rem at 50% -10%,
            color-mix(in srgb, var(--brand) 12%, transparent),
            transparent 70%);
    background-repeat: no-repeat;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 3rem;
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20, 23, 28, .04),
                0 12px 32px -12px rgba(20, 23, 28, .18);
    overflow: hidden;
}

/* The one piece of brand colour in the chrome. Brands that carry a full logo band
   below it (Tracco, CargoClick, UserChecks) render it in the same colour, so it reads
   as part of the band; brands without one (Riccom) get it as a lone brand accent. */
.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--brand);
    z-index: 1;
}

.auth-card-body {
    padding: 1.5rem 2rem 2rem;
}

/* ---------- brand lockup ---------- */

.auth-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.875rem 2rem 0;
}

/* Logo artwork with its own solid background sits on a matching band across the head
   of the card. Colour comes from LogoBackground in appsettings, inline per brand. */
.auth-brand--band {
    padding: 1.5rem 2rem;
}

/* Remote logo from branding.riccom.cloud. If it fails to load the alt text stands in,
   so no JS error handler is needed (and none would survive the CSP). */
.auth-brand img {
    max-width: 190px;
    max-height: 56px;
    width: auto;
    height: auto;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
}

/* Shown for brands with no artwork on branding.riccom.cloud yet. */
.auth-wordmark {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    padding-bottom: .375rem;
    border-bottom: 3px solid var(--brand);
}

/* On a coloured band the underline would be invisible and dark ink can fail contrast,
   so the wordmark switches to the brand's own text colour. */
.auth-brand--band .auth-wordmark {
    color: var(--brand-ink);
    padding-bottom: 0;
    border-bottom: none;
}

/* Mark-plus-type lockup, for brands whose logo is not a single piece of artwork.
   userchecks.co.uk sets its header brand as a 32px mark, 5px radius, 11px gap and the name
   at 1.15rem in a light weight. Here the lockup is the card's hero rather than a header
   item, so it is scaled up by half — keeping those ratios — to sit in the same optical band
   as the 56px-tall logo artwork the other brands render. */
.auth-lockup {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: var(--ink);
}

/* Beats `.auth-brand img`, which is sized for a full logo and would otherwise stretch the
   mark to its 56px max-height. */
.auth-brand .auth-lockup-mark {
    width: 48px;
    height: 48px;
    max-width: none;
    max-height: none;
    border-radius: 8px;
    flex: none;
}

.auth-lockup-name {
    font-size: 1.625rem;
    font-weight: 500;
    letter-spacing: .01em;
}

/* The lockup carries its own colour, so on a band it needs the band's ink instead. */
.auth-brand--band .auth-lockup {
    color: var(--brand-ink);
}

/* ---------- headings ---------- */

.auth-heading {
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin: 0 0 .375rem;
}

.auth-sub {
    font-size: .875rem;
    color: var(--ink-muted);
    margin: 0 0 1.5rem;
}

/* ---------- form ---------- */

.auth-page .form-group,
.auth-page .mb-3 {
    margin-bottom: 1rem;
}

.auth-page label,
.auth-page .form-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .375rem;
}

.auth-page .form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: .625rem .75rem;
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--ink);
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.auth-page .form-control::placeholder {
    color: var(--ink-faint);
}

.auth-page .form-control:hover {
    border-color: #cdd3db;
}

/* Focus must not rely on the brand hue — Tracco amber on white is ~1.8:1. A dark
   outline carries the visibility, the brand tint is only a halo. */
.auth-page .form-control:focus,
.auth-page .btn:focus-visible,
.auth-page a:focus-visible,
.auth-page .form-check-input:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 35%, transparent);
}

.auth-page .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    margin-bottom: 1.25rem;
}

.auth-page .form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--brand);
    flex: none;
}

.auth-page .form-check-label {
    font-size: .875rem;
    font-weight: 400;
    color: var(--ink-muted);
    margin: 0;
}

/* ---------- buttons ---------- */

.auth-page .btn {
    display: block;
    width: 100%;
    padding: .6875rem 1rem;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
    /* Several of these are anchors, not buttons. */
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: filter .12s ease, background-color .12s ease;
}

.auth-page .btn + .btn {
    margin-top: .625rem;
}

.auth-page .btn-primary,
.auth-page .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
}

.auth-page .btn-primary:hover {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
    filter: brightness(.94);
}

.auth-page .btn-secondary,
.auth-page .btn-secondary:not(:disabled):not(.disabled):active {
    background-color: #fff;
    border-color: var(--border);
    color: var(--ink);
}

.auth-page .btn-secondary:hover {
    background-color: #f7f8fa;
    border-color: #cdd3db;
    color: var(--ink);
}

/* ---------- links ---------- */

.auth-links {
    margin-top: 1.125rem;
    text-align: center;
}

.auth-page .auth-links a {
    font-size: .875rem;
    color: var(--ink-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1px;
}

.auth-page .auth-links a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink-faint);
}

/* ---------- divider ---------- */

.auth-divider {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin: 1.75rem 0 1.25rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ---------- compliance badge ---------- */

/* Optional Cyber Essentials mark, rendered only when ShowCompliance is on. It is a sibling
   of the card, not a row inside it: the card edge is already the separator, and a mark this
   heavy reads as a footnote to the page rather than a step in the form. */
.auth-compliance {
    flex: none;
    margin-top: 1.5rem;
    /* The widget draws its artwork against the left of the 132px frame it asks for and
       leaves ~24px of slack down the right-hand side, so centring the frame leaves the
       mark itself sitting left of the card's axis. Balancing that slack with a matching
       left margin centres what you actually see. If the vendor ever re-centres its own
       artwork this goes back to being a small offset, not a broken layout. */
    margin-left: 24px;
}

/* Third-party widget — its 132px square is the size the artwork is drawn for, so it is
   pinned rather than left to the iframe's 300x150 default. Transparent theme, so it picks
   up the page wash behind it. */
.auth-compliance iframe {
    display: block;
    width: 132px;
    height: 132px;
    border: 0;
    color-scheme: normal;
}

/* ---------- external providers ---------- */

.auth-page .auth-providers {
    list-style: none;
    padding: 0;
    margin: 0;
}

.auth-page .auth-providers li {
    display: block;
}

.auth-page .auth-providers li + li {
    margin-top: .625rem;
}

/* ---------- alerts ---------- */

.auth-page .alert {
    padding: .75rem .875rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
    border: 1px solid transparent;
    border-radius: 7px;
}

.auth-page .alert strong {
    display: block;
    margin-bottom: .125rem;
}

.auth-page .alert p:last-child {
    margin-bottom: 0;
}

.auth-page .alert-danger {
    background-color: #fdf2f1;
    border-color: #f3d3d0;
    color: var(--danger);
}

.auth-page .alert-info {
    background-color: #f4f6f8;
    border-color: var(--border);
    color: var(--ink-muted);
}

.auth-page .alert-warning {
    background-color: #fdf8ec;
    border-color: #f0e2c2;
    color: #7a5a12;
}

/* asp-validation-summary renders a <ul> inside _ValidationSummary.cshtml. */
.auth-page .alert ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.auth-page .text-danger {
    display: block;
    margin-top: .375rem;
    font-size: .8125rem;
    color: var(--danger);
}

/* ---------- small screens ---------- */

@media (max-width: 420px) {
    .auth-shell {
        padding: 1.25rem .875rem 2rem;
    }

    .auth-card-body {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .auth-brand {
        padding: 1.5rem 1.25rem 0;
    }

    .auth-brand--band {
        padding: 1.25rem;
    }

    .auth-compliance {
        margin-top: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page * {
        transition: none !important;
    }
}