/*--------------------------------------------------------------
# Design System Personalizzato - Stile Corporate
--------------------------------------------------------------*/

/* 1. Importazione Font e Definizione Variabili */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* Palette Colori Corporate */
    --bs-primary: #0d6efd; /* Blu primario di Bootstrap, ma lo confermiamo */
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary: #6c757d;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-body-color: #495057;
    --bs-body-bg: #f4f7f9; /* Un grigio molto più chiaro e morbido */

    /* Tipografia */
    --bs-font-sans-serif: 'Poppins', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;

    /* Transizioni e Bordi */
    --transition-smooth: all 0.3s ease-in-out;
    --border-radius: .5rem; /* Bordi leggermente più arrotondati */
}

/* 2. Stili Globali */
body {
    background-color: var(--bs-body-bg);
}

.card {
    border: none; /* Rimuoviamo i bordi di default per un look più pulito */
    border-radius: var(--border-radius);
    transition: var(--transition-smooth);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}

/* 3. Componenti Personalizzati */

/* Schermata di Login */
#login-container .card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    backdrop-filter: blur(10px);
}

/* Navigazione Domande */
.nav-item {
    width: 40px;
    height: 40px;
    line-height: 38px; /* Leggermente meno dell'altezza per un centraggio verticale perfetto */
    text-align: center; /* Centraggio orizzontale */
    font-weight: 600;
    border-radius: 50%; /* Cerchi perfetti */
    border: 2px solid transparent;
    background-color: #e9ecef;
    color: var(--bs-secondary);
    transition: var(--transition-smooth);
    cursor: pointer;
}

.nav-item:hover {
    transform: scale(1.1);
}

.nav-item.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
    box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.5);
}

.nav-item.answered {
    background-color: var(--bs-success);
    color: white;
}

.nav-item.wrong {
    background-color: var(--bs-danger);
    color: white;
}

.nav-item.skipped {
    background-color: var(--bs-warning);
    color: black;
}

/* Bottoni delle Opzioni */
.option-btn {
    font-weight: 500;
    padding: 0.8rem 1.2rem;
    text-align: left;
    border-radius: var(--border-radius);
    border: 2px solid #e9ecef;
    background-color: white;
    color: var(--bs-dark);
    transition: var(--transition-smooth);
}

.option-btn:not(:disabled):hover {
    background-color: var(--bs-light);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    transform: translateX(5px);
}

.option-btn.correct {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white !important;
    border-color: #218838 !important;
    transform: scale(1.02);
}

.option-btn.incorrect {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white !important;
    border-color: #c82333 !important;
    animation: shake 0.5s;
}

/* Animazione per risposta errata */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Stile per il select della materia */
#subject-select {
    font-weight: 600;
}