/* ============================================================
   GesTask — Autenticazione
   Accesso, registrazione, recupero password e pagine di servizio.
   ============================================================ */

/* ── Pagina ─────────────────────────────────────────────────────── */

.auth-page {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    min-height: 0;
    padding: 2rem 1rem;
}

/* ── Scheda a due metà ──────────────────────────────────────────── */

.auth-card {
    animation: fadeSlideIn .28s ease backwards;
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-2xl);
    box-shadow: var(--p-shadow-xl);
    display: flex;
    max-width: 880px;
    overflow: hidden;
    width: 100%;
}

.auth-card-narrow { max-width: 780px; }

/* ── Metà di marchio ────────────────────────────────────────────── */

.auth-brand-panel {
    background: linear-gradient(145deg, var(--p-primary-600) 0%, var(--p-primary-500) 45%, var(--p-cyan-500) 100%);
    display: flex;
    flex: 0 0 42%;
    flex-direction: column;
    overflow: hidden;
    padding: 2.5rem 2rem;
    position: relative;
}

/* Le due sfere sfocate dietro il gradiente. Sono l'unico ornamento
   dell'applicazione: stanno qui e non altrove perché la pagina di accesso è
   la sola senza dati da mostrare, e senza qualcosa da guardare sarebbe un
   rettangolo colorato. */
.auth-brand-orbs { inset: 0; pointer-events: none; position: absolute; }

.auth-orb {
    animation: orbFloat 7s ease-in-out infinite;
    border-radius: var(--p-border-radius-full);
    filter: blur(50px);
    position: absolute;
}

.auth-orb-1 {
    animation-delay: 0s;
    background: rgba(6, 182, 212, .35);
    bottom: -40px;
    height: 200px;
    right: -30px;
    width: 200px;
}

.auth-orb-2 {
    animation-delay: -3.5s;
    background: rgba(139, 92, 246, .3);
    height: 140px;
    left: -20px;
    top: 20px;
    width: 140px;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-12px, -18px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-orb { animation: none; }
    .auth-card { animation: none; }
}

.auth-brand-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.auth-brand-logo img { display: block; }

.auth-brand-title {
    color: #fff;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
    margin-bottom: .625rem;
}

.auth-brand-sub {
    color: rgba(255, 255, 255, .8);
    font-size: var(--p-font-size-sm);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* I gettoni sul pannello di marchio non usano i token: stanno sopra un
   gradiente saturo, dove le superfici del tema non hanno contrasto. Il
   bianco trasparente è l'unico colore che funziona su tutto il gradiente. */
.auth-badge,
.auth-brand-tip {
    align-items: center;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .92);
    display: inline-flex;
    font-weight: 600;
    gap: .375rem;
}

.auth-brand-badges { display: flex; flex-wrap: wrap; gap: .375rem; }

.auth-badge {
    border-radius: var(--p-border-radius-full);
    font-size: var(--p-font-size-xs);
    padding: .25rem .625rem;
}

.auth-brand-tip {
    border-radius: var(--p-border-radius-md);
    font-size: var(--p-font-size-sm);
    font-weight: 500;
    padding: .4375rem .75rem;
}

.auth-brand-tips-list { display: flex; flex-direction: column; gap: .4375rem; }

/* I passi della registrazione: la linea fra un numero e l'altro è un
   elemento flessibile senza base, così si allunga da sola per riempire lo
   spazio che avanza. */
.auth-brand-steps {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.auth-step {
    align-items: center;
    color: rgba(255, 255, 255, .85);
    display: flex;
    font-size: var(--p-font-size-xs);
    font-weight: 600;
    gap: .375rem;
}

.auth-step-num {
    align-items: center;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid rgba(255, 255, 255, .4);
    border-radius: var(--p-border-radius-full);
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: .6875rem;
    font-weight: 800;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.auth-step-line {
    background: rgba(255, 255, 255, .25);
    flex: 1;
    height: 1px;
}

/* ── Metà di modulo ─────────────────────────────────────────────── */

.auth-form-panel {
    align-items: center;
    background: var(--p-content-background);
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 2.5rem 2rem;
}

.auth-form-inner { max-width: 360px; width: 100%; }

.auth-form-head { margin-bottom: 2rem; text-align: center; }

.auth-form-icon {
    align-items: center;
    background: var(--p-auth-icon-bg, var(--p-primary-subtle-color));
    border-radius: var(--p-border-radius-xl);
    color: var(--p-auth-icon-color, var(--p-primary-color));
    display: flex;
    font-size: 1.375rem;
    height: 52px;
    justify-content: center;
    margin: 0 auto 1rem;
    width: 52px;
}

.auth-form-title {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: .3125rem;
}

.auth-form-sub {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    margin: 0;
}

.auth-form-footer {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    margin-top: 1.5rem;
    text-align: center;
}

/* ── Adattamento agli schermi piccoli ───────────────────────────── */

/* Sotto i 768 pixel la metà di marchio sparisce invece di finire sopra il
   modulo: è decorazione, e su un telefono in verticale spingerebbe i campi
   sotto la piega. */
@media (max-width: 767.98px) {
    .auth-brand-panel { display: none; }
    .auth-card { border-radius: var(--p-border-radius-xl); }
    .auth-form-panel { padding: 2rem 1.5rem; }
}

@media (max-width: 479.98px) {
    .auth-form-panel { padding: 1.75rem 1.25rem; }
    .auth-form-title { font-size: 1.25rem; }
}

/* ============================================================
   Pagina di accesso del pannello di amministrazione
   ============================================================

   Il backend ha una pagina di accesso propria, con un impianto più
   semplice di quello del frontend. Le sue classi restano qui perché il
   foglio è condiviso fra le due applicazioni. */

.login-split-card {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-2xl);
    box-shadow: var(--p-shadow-lg);
    max-width: 900px;
    width: 100%;
}

.login-split-card-wide { max-width: 960px; }

.login-brand-title { font-size: 1.75rem; font-weight: 800; line-height: 1.3; }
.login-brand-text { font-size: var(--p-font-size); }

.login-brand-panel {
    background: linear-gradient(135deg, var(--p-primary-600) 0%, var(--p-primary-500) 40%, var(--p-cyan-500) 100%);
    min-height: 480px;
    position: relative;
}

.login-brand-panel::before {
    background:
        radial-gradient(circle at 20% 80%, rgba(6, 182, 212, .3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(129, 140, 248, .25) 0%, transparent 40%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.login-btn {
    background: var(--p-primary-color);
    border: none;
    color: var(--p-primary-contrast-color);
    font-weight: 600;
    transition: background-color var(--p-transition-duration);
}

.login-btn:hover { background: var(--p-primary-hover-color); color: var(--p-primary-contrast-color); }

/* ============================================================
   Pagine di servizio
   ============================================================ */

.site-login,
.site-signup,
.site-contact,
.site-request-password-reset,
.site-reset-password,
.site-resend-verification-email,
.site-index,
.site-error,
.site-about { flex: 1; }

.site-error .site-error-content,
.site-about .site-about-content { max-width: 90%; width: 100%; }

@media (min-width: 576px) { .site-error .site-error-content, .site-about .site-about-content { max-width: 80%; } }
@media (min-width: 768px) { .site-error .site-error-content, .site-about .site-about-content { max-width: 60%; } }
@media (min-width: 992px) { .site-error .site-error-content, .site-about .site-about-content { max-width: 50%; } }

.site-contact textarea.p-textarea,
.site-contact textarea.form-control { height: 140px; }

/* L'immagine del codice di verifica è generata su fondo bianco: in tema
   scuro va invertita, o resta l'unico rettangolo bianco della pagina. */
.site-contact img[src*='captcha'] {
    border-radius: var(--p-border-radius-md);
    mix-blend-mode: multiply;
}

[data-bs-theme='dark'] .site-contact img[src*='captcha'] {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
}