/* ============================================================
   WEBAPPQUIZ — DESIGN SYSTEM GLOBALE
   Sovrascrive le CSS custom properties di Bootstrap 5.3: pulsanti,
   alert, form, badge nativi ereditano automaticamente la palette e
   gli arrotondamenti qui definiti, senza dover toccare ogni singola
   pagina che usa componenti Bootstrap standard.
   ============================================================ */

:root {
    /* Palette applicativa */
    --wq-primary: #4f46e5;
    --wq-primary-dark: #4338ca;
    --wq-primary-soft: #eef2ff;
    --wq-success: #10b981;
    --wq-success-soft: #ecfdf5;
    --wq-warning: #f59e0b;
    --wq-warning-soft: #fffbeb;
    --wq-danger: #ef4444;
    --wq-danger-soft: #fef2f2;
    --wq-cream: #fdf6e3;
    --wq-ink: #1e293b;
    --wq-muted: #64748b;
    --wq-bg: #f8fafc;
    --wq-card-bg: #ffffff;
    --wq-radius-sm: 8px;
    --wq-radius-md: 12px;
    --wq-radius-lg: 15px;
    --wq-radius-pill: 999px;
    --wq-shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --wq-shadow-elevated: 0 10px 25px -5px rgba(79, 70, 229, 0.12), 0 8px 10px -6px rgba(79, 70, 229, 0.08);
    /* ---- Override delle variabili Bootstrap 5.3 ---- */
    --bs-primary: var(--wq-primary);
    --bs-primary-rgb: 79, 70, 229;
    --bs-success: var(--wq-success);
    --bs-success-rgb: 16, 185, 129;
    --bs-warning: var(--wq-warning);
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: var(--wq-danger);
    --bs-danger-rgb: 239, 68, 68;
    --bs-body-bg: var(--wq-bg);
    --bs-body-color: var(--wq-ink);
    --bs-border-radius: var(--wq-radius-md);
    --bs-border-radius-lg: var(--wq-radius-lg);
    --bs-border-radius-sm: var(--wq-radius-sm);
    --bs-border-radius-pill: var(--wq-radius-pill);
    --bs-link-color: var(--wq-primary);
    --bs-link-hover-color: var(--wq-primary-dark);
}

body {
    background-color: var(--wq-bg);
}

/* Bottoni: leggero sollevamento al passaggio del mouse, coerente su tutta l'app */
.btn {
    font-weight: 600;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

    .btn:hover:not(:disabled) {
        transform: translateY(-1px);
    }

.btn-primary {
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.btn-lg {
    border-radius: var(--wq-radius-md);
}

/* Card "fluttuante": la base riusata da tutti i pannelli custom dell'app */
.wq-card {
    background: var(--wq-card-bg);
    border: none;
    border-radius: var(--wq-radius-lg);
    box-shadow: var(--wq-shadow-soft);
}

.wq-card-elevated {
    box-shadow: var(--wq-shadow-elevated);
}

/* Badge "tag materia", riutilizzato per categorie domande e tag concorso */
.wq-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--wq-radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Focus visibile e colorato su tutti i controlli di form (accessibilità + design richiesto) */
.form-control:focus,
.form-select:focus {
    border-color: var(--wq-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

.form-label {
    font-weight: 600;
    color: var(--wq-ink);
    font-size: 0.9rem;
}

/* Alert (usati anche da ValidationSummary) già arrotondati via --bs-border-radius;
   qui rifiniamo solo bordo e ombra per l'effetto "card" richiesto. */
.alert {
    border: none;
    box-shadow: var(--wq-shadow-soft);
}

/* Animazioni condivise */
@keyframes wq-pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes wq-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wq-fade-in {
    animation: wq-fade-in 0.25s ease-out;
}

/* Scrollbar più discreta, coerente con il tono "morbido" del resto della UI */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--wq-radius-pill);
}

/* Rimuove le frecce (spinner) su <input type="number"> quando serve un input numerico "pulito".
   Applicato ai campi punteggio del form concorso, dove le frecce sono più fastidiose che utili
   dato che i valori sono frazionari (step 0.01 significherebbe cliccare mille volte per arrivare
   a un valore ragionevole). Regola su Firefox + WebKit/Blink (Chrome, Edge, Safari). */
.wq-input-no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}

    .wq-input-no-spinner::-webkit-outer-spin-button,
    .wq-input-no-spinner::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* ValidationSummary di Blazor genera <ul class="validation-errors"> quando ci sono errori:
   qui lo trasformiamo in un alert arrotondato coerente col resto del design system, invece
   di lasciarlo come semplice testo rosso puntato. Beneficio automatico su tutti i form
   dell'app (Identity + Admin) senza dover toccare ogni singola pagina. */
.validation-errors {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0.85rem 1.1rem;
    background: var(--wq-danger-soft);
    color: #b91c1c;
    border-radius: var(--wq-radius-md);
    font-size: 0.9rem;
    font-weight: 500;
}

    .validation-errors li {
        margin-bottom: 0.2rem;
    }

        .validation-errors li:last-child {
            margin-bottom: 0;
        }

/* Utility condivise dalle pagine di autenticazione (Login, Register, ForgotPassword, ...):
   qui invece che in un .razor.css scoped, perché il CSS isolato di Blazor non si propaga
   tra componenti "fratelli" ospitati dallo stesso layout — evita di ripetere le stesse
   regole in tre file diversi. */
.account-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.account-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wq-primary-soft);
    color: var(--wq-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}

.account-header h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.account-header p {
    color: var(--wq-muted);
    font-size: 0.9rem;
    margin: 0;
}

.account-submit-btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    margin-top: 0.25rem;
}

.account-footer-links {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--wq-muted);
}

    .account-footer-links a {
        font-weight: 600;
        text-decoration: none;
    }

        .account-footer-links a:hover {
            text-decoration: underline;
        }

.account-divider {
    margin: 0 0.5rem;
    color: #cbd5e1;
}

.account-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}

    .account-checkbox-row input {
        width: 1.05rem;
        height: 1.05rem;
    }

    .account-checkbox-row label {
        font-weight: 500;
        color: var(--wq-ink);
        margin: 0;
    }

/* Pagine di esito donazione (/success, /cancel) */
.donation-outcome-container {
    max-width: 560px;
    padding-top: 3rem;
}

.donation-outcome-card {
    padding: 2.5rem 2rem;
    text-align: center;
}

.donation-outcome-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
}

.donation-outcome-icon-success {
    background: var(--wq-success-soft);
    color: var(--wq-success);
}

.donation-outcome-icon-neutral {
    background: var(--wq-primary-soft);
    color: var(--wq-primary);
}

.donation-outcome-card h1 {
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}