/* ─── AUTH PAGE ─── */

html, body { height: 100%; }

body.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-app);
    font-family: var(--font-sans);
    padding: 40px 16px;
}

.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

/* Brand mark */
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--fg-primary);
    margin-bottom: 28px;
}

.auth-brand-accent { color: var(--green-600); }

.auth-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--navy-800);
    display: grid;
    place-items: center;
}

.auth-brand-mark::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--green-500);
}

/* Divisore */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--fg-muted);
    font-size: var(--ts-xs);
}
.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-base);
}

/* Google button */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    background: #fff;
    color: #3c4043;
    border: 1px solid var(--border-base);
    border-radius: var(--r-md);
    font-size: var(--ts-body);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    text-decoration: none;
}
.btn-google:hover {
    background: var(--gray-50);
    border-color: var(--border-strong);
    color: #3c4043;
}

/* ─── Field blocks (mirrors prototype .field-block / .fb-label) ─── */
.auth-card .field-block { margin-bottom: var(--s-4); }
.auth-card .field-block:last-child { margin-bottom: 0; }

.auth-card .fb-label {
    font-size: var(--ts-small);
    font-weight: 600;
    color: var(--fg-primary);
    display: block;
    margin-bottom: 8px;
}

.auth-card .fb-hint {
    font-size: var(--ts-xs);
    color: var(--fg-muted);
    margin: 6px 0 0;
}

.auth-card .text-danger { color: var(--danger); }

/* Sign-in form spacing */
.form-signin { display: flex; flex-direction: column; gap: var(--s-4); }
.form-signin .field-block { margin-bottom: 0; }
.form-signin .check { font-size: var(--ts-small); }
.form-signin .btn { width: 100%; height: 44px; }

/* ─── Logout confirm ─── */
.auth-logout__head { text-align: center; margin-bottom: var(--s-5); }
.auth-logout__title { font-size: var(--ts-h4); font-weight: 600; color: var(--fg-primary); margin: 0 0 6px; }
.auth-logout__text { font-size: var(--ts-small); color: var(--fg-muted); margin: 0; }
.form-logout { display: flex; flex-direction: column; gap: var(--s-3); }
.form-logout .btn { width: 100%; height: 44px; justify-content: center; }

/* ─── Alerts (standalone, no Bootstrap dependency) ─── */
.auth-alert {
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 10px 14px;
    font-size: var(--ts-small);
    margin-bottom: var(--s-4);
}
.auth-alert--danger  { color: #9B1E22; background: #FDECEC; border-color: #F5BABA; }
.auth-alert--warning { color: #8A5A10; background: #FFF4DF; border-color: #F5D99A; }
.auth-alert--info    { color: #1E4BA0; background: #E6F0FF; border-color: #B3CFFF; }
.auth-alert--success { color: var(--green-800); background: var(--green-50); border-color: var(--green-200); }

/* Footer */
.auth-foot {
    margin-top: 28px;
    font-size: var(--ts-xs);
    color: var(--fg-muted);
    text-align: center;
}