/* Pre-authentication pages: login, forgot password, choose a password (FS-012).

   These three cannot use includes/header.php — it enforces a login — so each one
   used to carry its own <style> block. That was one copy when login.php was the
   only such page; it would have been three. The brand bar, the card and the
   alerts live here instead, and login.php's inline block is gone.

   Colours come from the same system as the rest of the portal: brand green
   #4C8D2B in the bar, and the shared .custom-button for actions. */

.auth-navbar {
    background-color: #4C8D2B;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.auth-navbar .navbar-brand {
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: bold;
}

.auth-navbar .navbar-brand i {
    color: #fff;
    margin-right: 0.5rem;
}

.auth-card {
    max-width: 26rem;
    margin: 3rem auto;
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.auth-title {
    text-align: center;
    margin-bottom: 1.25rem;
}

/* The sentence that explains what is about to happen. These pages are reached by
   someone who is already stuck, so they say more than a logged-in page would. */
.auth-hint {
    color: #4a4f54;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.auth-small {
    display: block;
    color: #6c757d;
    font-size: 0.82rem;
    margin-top: 0.35rem;
}

.auth-submit {
    display: block;
    width: 100%;
    justify-content: center;
}

.auth-actions {
    text-align: center;
    margin-top: 1.25rem;
}

.auth-back {
    color: #6c757d;
    text-decoration: none;
    font-size: 0.875rem;
}

.auth-back:hover {
    color: #4C8D2B;
}

/* A quiet link under the password field, so it is where someone looks when the
   password they typed did not work. */
.auth-inline-link {
    display: block;
    text-align: right;
    margin-top: 0.4rem;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.85rem;
}

.auth-inline-link:hover {
    color: #4C8D2B;
}

.auth-card .alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.auth-card .alert-danger  { background-color: #f8d7da; color: #721c24; }
.auth-card .alert-success { background-color: #d4edda; color: #155724; }

/* Local development only: password checking is disabled. Amber rather than red —
   it states a fact about this environment, it is not an error. Rendered only
   where APP_DEV_MODE=1, which is never a server. */
.auth-card .alert-dev {
    background-color: #fdf2d6;
    color: #8a6212;
    border: 1px solid #f0dca6;
}

/* FS-012 — the second factor.

   Enrolment needs more width than a sign-in form: a QR code, three steps of
   instructions, and a key someone may have to type by hand. */
.auth-card--wide {
    max-width: 32rem;
}

.auth-steps {
    margin: 0 0 1.25rem 1.1rem;
    padding: 0;
    color: #4a4f54;
    font-size: 0.92rem;
    line-height: 1.55;
}

.auth-steps li {
    margin-bottom: 0.35rem;
}

.auth-qr {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.auth-qr svg {
    width: 220px;
    height: 220px;
    /* The QR is black-on-white by definition; a card background behind it would
       cost contrast that scanners need. */
    background: #fff;
    padding: 0.5rem;
    border: 1px solid #e6e8ea;
    border-radius: 6px;
}

.auth-secret-hint {
    text-align: center;
}

/* Monospace and spaced, because this gets read off a screen and typed into a
   phone: 0/O and 1/I have to be distinguishable. */
.auth-secret {
    display: block;
    margin-top: 0.35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: #2f3437;
    word-break: break-all;
}

/* The code box. Wide characters and generous spacing so a six-digit code can be
   checked against a phone at a glance. */
.auth-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.4rem;
    letter-spacing: 0.35em;
    text-align: center;
}

.auth-card .form-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.auth-card .form-check .auth-small {
    flex-basis: 100%;
    margin-top: 0;
}