/* Auth / MFA / setup screens — standalone (no navbar).
   Cohesive dark screen using the shared token system. */

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
    background:
        radial-gradient(1100px 600px at 50% -10%, rgba(10, 90, 108, 0.28), transparent 60%),
        var(--surface-canvas);
    font-family: var(--font-sans);
    color: var(--color-text);
}

.auth_container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    background-color: var(--surface);
    border: 1px solid var(--border-default);
    width: 420px;
    min-width: 320px;
    max-width: 100%;
    max-height: 92vh;
    padding: 36px 36px 40px;
    box-sizing: border-box;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-xl);
}

.auth_header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

#logo,
.auth_container .logo {
    max-width: 170px;
    margin: 8px 0 24px;
    filter: brightness(0) invert(1);
}

h2 {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    font-size: var(--text-2xl);
    margin: 0 0 6px;
}

p {
    color: var(--color-text-muted);
    font-size: var(--text-md);
    margin: 0 0 8px;
}

.auth_content { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* Links in error/not-found pages render as buttons */
.auth_content > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 10px 24px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.auth_content > a:hover { background: var(--surface-hover); border-color: var(--border-strong); }

form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 4px;
}

label {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-align: left;
    margin: 10px 0 6px;
}
#mfa_label { color: var(--color-text); }

input {
    background-color: var(--surface-inset);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    width: 100%;
    font-size: var(--text-md);
    padding: 11px 12px;
    color: var(--color-text);
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }

button,
#mfa_setup_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    width: 100%;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    padding: 12px;
    color: #fff;
    margin-top: 18px;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color var(--transition-fast);
}
button:hover,
#mfa_setup_link:hover { background-color: var(--accent-strong); border-color: var(--accent-strong); cursor: pointer; }

.auth_button {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 8px;
}

#button-div {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
#button-div button { margin-top: 0; }

#mfa_qr { max-width: 180px; height: auto; margin: 8px auto; border-radius: var(--radius-md); }

.error-message {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-error);
    text-align: center;
    background-color: var(--color-danger-soft);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding: 10px;
    width: 100%;
    margin-bottom: 6px;
    box-sizing: border-box;
}
.error-message:empty { border: none; padding: 0; }

/* SSO (currently disabled, kept for future) */
.sso-divider { display: flex; align-items: center; width: 100%; margin: 18px 0; }
.sso-divider::before, .sso-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--border-default); }
.sso-divider span { color: var(--color-text-muted); font-size: var(--text-sm); padding: 0 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.sso-button {
    display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
    background-color: var(--surface-inset); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); width: 100%; font-size: var(--text-md); font-weight: var(--weight-medium);
    padding: 11px 16px; color: var(--color-text); box-sizing: border-box;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.sso-button:hover { background-color: var(--surface-hover); border-color: var(--border-strong); cursor: pointer; }
.sso-icon { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-height: 700px) {
    #logo { margin: 12px 0 16px; max-width: 140px; }
}