/* ═══════════════════════════════════════════════════════════════
   AUTH — shared styles for all /auth/* pages  (Option B "Centered focus")
   ═══════════════════════════════════════════════════════════════
   Loaded once globally from App.razor:
       <link rel="stylesheet" href="css/auth.css" />

   Used by: Login, Signup, ForgotPassword, ResetPassword,
            ResendConfirmation, ConfirmEmail, SignupSuccess,
            and the PasswordRequirementsList component.

   EmptyLayout forces dark mode, so this is a dark-only treatment.
   Tokens mirror the public-pages dark palette so the auth screens
   feel like the same product. (We hold light mode for now.)
   =============================================================== */

.auth-bg {
    --brand: #7e6fff;
    --brand-deep: #5a4fd6;
    --brand-hover: #9080ff;
    --bg-surface: #161825;
    --bg-input: rgba(255, 255, 255, 0.04);
    --t-primary: #ffffff;
    --t-body: #d8d8e0;
    --t-secondary: #a8a8b8;
    --t-tertiary: #7a7a8a;
    --bd-default: rgba(255, 255, 255, 0.10);
    --bd-strong: rgba(255, 255, 255, 0.18);
    --success: #3dcb6c;
    --warning: #ffb545;
    --danger: #ff5e7a;
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    overflow: auto;
    background: #0d1017;
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Ambient gradient (Twilight) — violet + cool blue, matches the dashboard */
.auth-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(760px 460px at 10% -8%, rgba(126, 111, 255, 0.22), transparent 66%), radial-gradient(760px 540px at 100% 100%, rgba(56, 150, 255, 0.16), transparent 70%);
}

/* Court motif removed in favour of the gradient. The <svg class="auth-lines">
   markup left in the pages is now hidden; delete it whenever convenient. */
.auth-lines {
    display: none;
}

/* Stack: back link sits just above the card, aligned to its left edge */
.auth-stack {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 410px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: -8px;
    padding: 6px 10px 6px 8px;
    border-radius: 9px;
    color: var(--t-secondary);
    font: 600 13px 'Inter', sans-serif;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

    .auth-back:hover {
        color: var(--t-primary);
        background: rgba(255, 255, 255, 0.05);
    }

    .auth-back svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* The card */
.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 410px;
    background: var(--bg-surface);
    border: 1px solid var(--bd-default);
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    animation: auth-in 0.4s ease both;
}

@keyframes auth-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Brand mark (form pages) */
.auth-mark {
    width: 46px;
    height: 46px;
    margin: 0 auto 16px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand-deep), var(--brand-hover));
    box-shadow: 0 8px 20px rgba(126, 111, 255, 0.35);
}

/* Status badge (result pages: success / sent / invalid / failed) */
.auth-badge {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 16px;
    display: grid;
    place-items: center;
}

    .auth-badge svg {
        width: 28px;
        height: 28px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-badge--brand {
    background: linear-gradient(135deg, var(--brand-deep), var(--brand-hover));
    color: #fff;
}

.auth-badge--ok {
    background: rgba(61, 203, 108, 0.14);
    color: var(--success);
}

.auth-badge--warn {
    background: rgba(255, 181, 69, 0.14);
    color: var(--warning);
}

.auth-badge--err {
    background: rgba(255, 94, 122, 0.14);
    color: var(--danger);
}

/* Spinner (working / validating states) */
.auth-spinner {
    width: 38px;
    height: 38px;
    margin: 8px auto 18px;
    border-radius: 50%;
    border: 3px solid var(--bd-default);
    border-top-color: var(--brand);
    animation: auth-spin 0.7s linear infinite;
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg);
    }
}

.auth-title {
    margin: 0;
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--t-primary);
}

.auth-sub {
    margin: 5px 0 22px;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--t-secondary);
}

    .auth-sub strong {
        color: var(--t-body);
        font-weight: 600;
    }

/* Alerts (inline form errors / notices) */
.auth-alert {
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.auth-alert--ok {
    color: #8ef0ab;
    background: rgba(61, 203, 108, 0.12);
    border-color: rgba(61, 203, 108, 0.30);
}

.auth-alert--err {
    color: #ffb3c0;
    background: rgba(255, 94, 122, 0.12);
    border-color: rgba(255, 94, 122, 0.30);
}

/* Soft info note (e.g. "link valid for 1 hour") */
.auth-note {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--bd-default);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 13px;
    line-height: 1.5;
    color: var(--t-secondary);
}

    .auth-note a {
        color: var(--brand);
        font-weight: 600;
        text-decoration: none;
    }

        .auth-note a:hover {
            text-decoration: underline;
        }

/* Social */
.auth-social {
    margin: 0;
}

.auth-sbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    border-radius: 11px;
    border: 1px solid var(--bd-default);
    background: rgba(255, 255, 255, 0.03);
    color: var(--t-primary);
    font: 600 14px 'Inter', sans-serif;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

    .auth-sbtn + .auth-sbtn {
        margin-top: 10px;
    }

    .auth-sbtn:hover {
        border-color: var(--bd-strong);
        background: rgba(255, 255, 255, 0.06);
    }

    .auth-sbtn svg {
        width: 18px;
        height: 18px;
    }

.auth-sbtn--apple {
    background: #000;
    border-color: #000;
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    color: var(--t-tertiary);
    font-size: 12px;
}

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

/* Form */
.auth-form {
    margin: 0;
}

.auth-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t-secondary);
    margin-bottom: 6px;
}

.auth-field {
    position: relative;
    margin-bottom: 14px;
}

.auth-ic {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--t-tertiary);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.auth-field input {
    width: 100%;
    height: 46px;
    border-radius: 11px;
    border: 1px solid var(--bd-default);
    background: var(--bg-input);
    color: var(--t-primary);
    font: 14.5px 'Inter', sans-serif;
    padding: 0 14px 0 42px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .auth-field input::placeholder {
        color: var(--t-tertiary);
    }

    .auth-field input:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(126, 111, 255, 0.18);
    }

/* Native <select> styled to match inputs */
.auth-field select.auth-select {
    width: 100%;
    height: 46px;
    border-radius: 11px;
    border: 1px solid var(--bd-default);
    background: var(--bg-input);
    color: var(--t-primary);
    font: 14.5px 'Inter', sans-serif;
    padding: 0 38px 0 42px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .auth-field select.auth-select:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(126, 111, 255, 0.18);
    }

    .auth-field select.auth-select option {
        background: var(--bg-surface);
        color: var(--t-primary);
    }

.auth-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--t-tertiary);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Helper / live-status text under a field */
.auth-help {
    margin: -6px 0 14px;
    min-height: 15px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--t-tertiary);
}

.auth-help--ok {
    color: var(--success);
}

.auth-help--err {
    color: var(--danger);
}

/* Inline spinner for a button in flight */
.auth-spin-sm {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: auth-spin 0.7s linear infinite;
}

.auth-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Password requirement checklist (PasswordRequirementsList component) */
.auth-rules {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--bd-default);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.02);
}

.auth-rules-title {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t-tertiary);
    font-weight: 700;
    margin-bottom: 8px;
}

.auth-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: 12.5px;
    color: var(--t-tertiary);
    transition: color 0.15s;
}

    .auth-rule svg {
        width: 15px;
        height: 15px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .auth-rule.is-met {
        color: var(--success);
    }

/* Inline validation warning (e.g. passwords don't match) */
.auth-warn {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -4px 0 14px;
    font-size: 13px;
    color: var(--danger);
}

    .auth-warn svg {
        width: 16px;
        height: 16px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 18px;
    font-size: 13px;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--t-secondary);
    cursor: pointer;
    user-select: none;
}

    .auth-check input {
        accent-color: var(--brand);
        width: 15px;
        height: 15px;
    }

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

    .auth-link:hover {
        text-decoration: underline;
    }

/* Primary submit (full-width, in forms) */
.auth-primary {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 11px;
    background: var(--brand);
    color: #fff;
    font: 700 15px 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    box-shadow: 0 8px 20px rgba(126, 111, 255, 0.30);
}

    .auth-primary:hover {
        background: var(--brand-hover);
    }

    .auth-primary:active {
        transform: translateY(1px);
    }

/* Button row for result pages */
.auth-btnrow {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Inline CTAs (auto width — used on result pages, render as <a> or <button>) */
.auth-cta, .auth-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 11px;
    font: 700 14px 'Inter', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: 0.15s;
}

.auth-cta {
    border: 0;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 8px 20px rgba(126, 111, 255, 0.30);
}

    .auth-cta:hover {
        background: var(--brand-hover);
    }

.auth-secondary {
    border: 1px solid var(--bd-default);
    background: transparent;
    color: var(--t-primary);
    font-weight: 600;
}

    .auth-secondary:hover {
        border-color: var(--bd-strong);
        background: rgba(255, 255, 255, 0.05);
    }

    .auth-cta svg, .auth-secondary svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-foot {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--t-secondary);
}

/* Tighter on small phones */
@media (max-width: 420px) {
    .auth-card {
        padding: 30px 22px;
    }

    .auth-btnrow {
        flex-direction: column;
    }

        .auth-btnrow .auth-cta, .auth-btnrow .auth-secondary {
            width: 100%;
        }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .auth-card {
        animation: none;
    }

    .auth-spinner {
        animation-duration: 1.4s;
    }
}