/* hippmann-auth bundled login / logged-out views.
 * Minimal, centered, brand-forward. With autoRedirectSingleIdp the login view is
 * usually skipped, so this mainly styles the error + logged-out states. Colors
 * come from Vaadin Aura/Lumo tokens, so it follows the app's light/dark theme. */

.auth-view {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--lumo-space-l, 1.5rem);
    box-sizing: border-box;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    gap: var(--lumo-space-l, 1.5rem);
    padding: var(--lumo-space-xl, 2.5rem);
    border-radius: var(--lumo-border-radius-l, 12px);
    background: var(--lumo-base-color, #fff);
    box-shadow: var(--lumo-box-shadow-l, 0 12px 40px rgba(0, 0, 0, 0.12));
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lumo-space-s, 0.5rem);
    text-align: center;
}

.auth-brand-mark {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--lumo-border-radius-m, 8px);
}

.auth-brand-initials {
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lumo-border-radius-m, 8px);
    background: var(--lumo-primary-color, #1676f3);
    color: var(--lumo-primary-contrast-color, #fff);
    font-weight: 800;
    font-size: 1.5rem;
}

.auth-brand-copy h1 {
    margin: 0;
    font-size: var(--lumo-font-size-xxl, 1.75rem);
    color: var(--lumo-primary-text-color, #1676f3);
}

.auth-brand-copy p {
    margin: 0.25rem 0 0;
    color: var(--lumo-secondary-text-color, #5f6b7a);
    font-size: var(--lumo-font-size-s, 0.875rem);
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--lumo-space-s, 0.5rem);
}

.auth-provider-button {
    width: 100%;
}

.auth-message {
    margin: 0;
    padding: var(--lumo-space-s, 0.5rem) var(--lumo-space-m, 1rem);
    border-radius: var(--lumo-border-radius-m, 8px);
    background: var(--lumo-error-color-10pct, rgba(224, 36, 36, 0.1));
    color: var(--lumo-error-text-color, #c00);
    font-size: var(--lumo-font-size-s, 0.875rem);
    text-align: center;
}

.auth-note {
    margin: 0;
    color: var(--lumo-secondary-text-color, #5f6b7a);
    font-size: var(--lumo-font-size-s, 0.875rem);
    text-align: center;
}