/* Auth pages shared styles (scoped by .auth-page wrapper) */
.auth-page .form-card {
    background: #fff;
    border-radius: 1.25rem;
}

.auth-page .form-control:focus {
    box-shadow: 0 0 0 0.2rem var(--theme-color);
    border-color: var(--theme-color);
}

/* Primary button uses theme color; hover = 10% darker (fallback keeps same) */
.auth-page .btn-primary {
    background: var(--theme-color);
    border-color: var(--theme-color);
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

@supports (background: color-mix(in srgb, black, white)) {

    .auth-page .btn-primary:hover,
    .auth-page .btn-primary:focus {
        /* Darken by mixing with black */
        background: color-mix(in srgb, var(--theme-color) 90%, black 10%);
        border-color: color-mix(in srgb, var(--theme-color) 90%, black 10%);
        box-shadow: 0 0 0 .2rem rgba(0, 0, 0, 0.08);
    }
}

@supports not (background: color-mix(in srgb, black, white)) {

    .auth-page .btn-primary:hover,
    .auth-page .btn-primary:focus {
        background: var(--theme-color);
    }
}

/* Outline secondary -> theme accent on hover */
.auth-page .btn-outline-secondary {
    transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.auth-page .btn-outline-secondary:hover,
.auth-page .btn-outline-secondary:focus {
    color: #fff;
    background: var(--theme-color);
    border-color: var(--theme-color);
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, 0.06);
}