/* ============================================
   Auth pages (login / setup / MFA)
   Full-screen centred card with brand background gradient.
   ============================================ */
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        radial-gradient(ellipse at top left, rgba(10, 90, 108, 0.18), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(117, 180, 201, 0.10), transparent 55%),
        var(--color-canvas);
    font-family: var(--font-family-sans);
    padding: var(--space-6);
    box-sizing: border-box;
    color: var(--color-text);
}

/* Card container */
.auth_container {
    min-height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    background-color: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    width: min(420px, 100%);
    max-height: 92vh;
    padding: var(--space-8) var(--space-8) var(--space-6);
    box-sizing: border-box;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    gap: var(--space-4);
}

.auth_header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-4);
    gap: var(--space-2);
}

#logo {
    max-width: 200px;
    width: 60%;
    height: auto;
    margin: var(--space-2) auto var(--space-4);
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

h2 {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-2xl);
    margin: 0;
    padding: 0;
    text-align: center;
    letter-spacing: var(--letter-spacing-tight);
}

p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    margin: 0;
    text-align: center;
    line-height: var(--line-height-normal);
}

.auth_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
}

form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-3);
    flex-grow: 1;
    justify-content: flex-start;
}

label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: left;
    align-self: flex-start;
    margin: 0;
    font-weight: var(--font-weight-medium);
}

input {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    width: 100%;
    font-size: var(--font-size-base);
    padding: 10px 12px;
    color: var(--color-text);
    margin: 0;
    box-sizing: border-box;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

input:focus {
    outline: none;
    border-color: var(--color-brand-strong);
    box-shadow: var(--shadow-focus);
}

input[readonly] {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

button {
    background-color: var(--color-brand);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    width: 100%;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding: 11px 16px;
    color: var(--color-brand-on);
    margin: 0;
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

button:hover {
    background-color: var(--color-brand-hover);
}

button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

#mfa_setup_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: var(--color-brand);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    width: 100%;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding: 11px 16px;
    color: var(--color-brand-on);
    margin: 0;
    box-sizing: border-box;
    transition: background-color var(--transition-fast);
}

#mfa_setup_link:hover {
    background-color: var(--color-brand-hover);
    cursor: pointer;
}

#mfa_label {
    color: var(--color-text);
}

.auth_button {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-4);
    gap: var(--space-3);
}

#mfa_qr {
    width: 60%;
    max-width: 220px;
    height: auto;
    align-self: center;
    margin: var(--space-2) 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-muted);
    background-color: white;
    padding: var(--space-2);
}

#button-div {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.error-message {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-error);
    text-align: center;
    background-color: var(--color-danger-soft);
    padding: var(--space-2) var(--space-3);
    min-height: 36px;
    border: 1px solid var(--color-danger);
    width: 100%;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    box-sizing: border-box;
}

.error-message:empty {
    border: none;
    background-color: transparent;
    min-height: 0;
    padding: 0;
}

@media (max-height: 720px) {
    .auth_container {
        padding: var(--space-5);
    }
    #logo {
        max-width: 120px;
        margin-bottom: var(--space-3);
    }
    h2 {
        font-size: var(--font-size-xl);
    }
}