/* Shared theme and dark-mode styles. Generated from the legacy stylesheet; keep source order. */
/* =====================================================
   DARK MODE 
   ===================================================== */

/* ==================
   VARIABILI DARK MODE PROFESSIONALI
   ================== */

:root {
    /* Light mode (esistenti) */
    --primary-color: #802433;
    --primary-dark: #5c1a26;
    --primary-light: #a8324a;

    /* Dark mode - Palette Professionale (tipo Word/GitHub) */
    --dark-bg-primary: #1e1e1e;
    /* Grigio scuro principale */
    --dark-bg-secondary: #252526;
    /* Grigio cards */
    --dark-bg-tertiary: #2d2d30;
    /* Grigio elementi */
    --dark-bg-input: #3c3c3c;
    /* Input fields */

    --dark-text-primary: #d4d4d4;
    /* Testo principale */
    --dark-text-secondary: #999999;
    /* Testo secondario */
    --dark-text-muted: #6a6a6a;
    /* Testo disabilitato */

    --dark-border: #3e3e42;
    /* Bordi sottili */
    --dark-border-light: #2d2d30;
    /* Bordi più chiari */

    /* Accenti dark mode */
    --dark-primary: #c77b85;
    /* Rosso più chiaro per dark */
    --dark-primary-hover: #d48a94;
    --dark-success: #4ec9b0;
    --dark-warning: #dcdcaa;
    --dark-danger: #f48771;
}

/* ==================
   DARK MODE - BODY E GENERALI
   ================== */

body.dark-mode {
    background-color: var(--dark-bg-primary);
    background-image: url('../../immagini-logo/sfondo-dark.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--dark-text-primary);
    --surface-page: var(--dark-bg-primary);
    --surface-card: var(--dark-bg-secondary);
    --surface-panel: var(--dark-bg-tertiary);
    --surface-border: var(--dark-border);
    --surface-border-strong: var(--dark-border-light);
    --shadow-card-soft: 0 18px 36px rgba(0, 0, 0, 0.55);
    --shadow-card-strong: 0 28px 60px rgba(0, 0, 0, 0.65);
    --text-color: var(--dark-text-primary);
    --text-light: var(--dark-text-secondary);
    --button-gloss: rgba(255, 255, 255, 0.12);
    --button-gloss-strong: rgba(255, 255, 255, 0.2);
    --button-gloss-max: rgba(255, 255, 255, 0.35);
}

/* Fonti: stesso scale per le linee anche in dark mode */
body.fonti-page.dark-mode {
    background-image: url('../../immagini-logo/sfondo-dark.svg');
    background-size: 120vw auto;
    background-repeat: repeat-y;
    background-position: center top;
}

/* ==================
   DARK MODE - CARDS E CONTENITORI
   ================== */

body.dark-mode .auth-form,
body.dark-mode .dashboard-header,
body.dark-mode .quiz-settings,
body.dark-mode .stat-card,
body.dark-mode .channel-card,
body.dark-mode .subject-card,
body.dark-mode #quiz-screen,
body.dark-mode #results-screen,
body.dark-mode .subject-dashboard,
body.dark-mode .flashcards-container,
body.dark-mode .study-option-card,
body.dark-mode .ai-chat-container {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

body.dark-mode .subject-category {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

body.dark-mode .category-title,
body.dark-mode .category-title-secondary {
    color: var(--dark-primary);
}

/* ==================
   DARK MODE - SEZIONE CANALI
   ================== */

body.dark-mode .channel-section {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}


/* ==================
   DARK MODE - HEADER E NAVIGATION
   ================== */

body.dark-mode .quiz-header,
body.dark-mode .flashcards-header,
body.dark-mode .ai-chat-header {
    background: linear-gradient(135deg, #802433, #5c1a26);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: clamp(18px, 4vw, 30px) clamp(24px, 5vw, 40px);
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 15px);
    justify-content: space-between;
    min-height: 58px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: none;
    box-shadow: none;
}

body.dark-mode .app-header {
    background: var(--dark-bg-secondary);
    border-bottom: 1px solid var(--dark-border);
}

/* ==================
   DARK MODE - TESTI E TITOLI
   ================== */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
    color: var(--dark-text-primary);
}

body.dark-mode .auth-form h2,
body.dark-mode .quiz-settings h3,
body.dark-mode #current-subject-name {
    color: var(--dark-primary);
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode label {
    color: var(--dark-text-primary);
}

body.dark-mode .app-description,
body.dark-mode .stat-label,
body.dark-mode .text-light {
    color: var(--dark-text-secondary);
}

body.dark-mode .channel-description {
    color: #fff;
}

/* ==================
   DARK MODE - INPUT E FORM
   ================== */

body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-select,
body.dark-mode .ai-input {
    background: var(--dark-bg-input);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dark-text-muted);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-primary);
    box-shadow: 0 0 0 2px rgba(199, 123, 133, 0.2);
}

/* ==================
   DARK MODE - BOTTONI
   ================== */

body.dark-mode .answer-btn {
    background: #000;
    background-color: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.6);
}

body.dark-mode .answer-btn:hover:not(.selected) {
    background: #050505;
    border-color: rgba(255, 255, 255, 0.55);
}

body.dark-mode .answer-btn.selected {
    background: #000;
    background-color: #000;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.65);
}

body.dark-mode .answer-btn.correct {
    background: linear-gradient(160deg, #000 0%, #053a1c 100%);
    background-color: #000;
    color: #fff;
    border-color: #27ae60;
    box-shadow: 0 14px 32px rgba(39, 174, 96, 0.45);
}

body.dark-mode .answer-btn.correct:hover,
body.dark-mode .answer-btn.correct:focus {
    background: linear-gradient(160deg, #050505 0%, #0a532b 100%);
    background-color: #050505;
    color: #fff;
}

body.dark-mode .answer-btn.incorrect {
    background: linear-gradient(160deg, #000 0%, #3d0a0a 100%);
    background-color: #000;
    color: #fff;
    border-color: #e74c3c;
    box-shadow: 0 14px 32px rgba(231, 76, 60, 0.45);
}

body.dark-mode .answer-btn.incorrect:hover,
body.dark-mode .answer-btn.incorrect:focus {
    background: linear-gradient(160deg, #050505 0%, #5c0d0d 100%);
    background-color: #050505;
    color: #fff;
}

body.dark-mode .answer-btn .answer-text,
body.dark-mode .answer-btn .answer-letter,
body.dark-mode .answer-btn .answer-label {
    color: #fff;
}

body.dark-mode .logout-btn,
body.dark-mode .secondary-btn {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .logout-btn:hover,
body.dark-mode .secondary-btn:hover {
    background: var(--dark-bg-input);
}

/* ==================
   DARK MODE - QUIZ
   ================== */

body.dark-mode .quiz-content {
    background: var(--dark-bg-secondary);
}

body.dark-mode #question-text {
    color: var(--dark-text-primary);
}

body.dark-mode .quiz-navigation {
    background: var(--dark-bg-secondary);
    border-top: 1px solid var(--dark-border);
}

/* ==================
   DARK MODE - RISULTATI
   ================== */

body.dark-mode .result-item {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

body.dark-mode .result-item.wrong {
    background: rgba(244, 135, 113, 0.1);
    border-left-color: var(--dark-danger);
}

body.dark-mode .result-correct-answer {
    background: rgba(78, 201, 176, 0.1);
    border-left-color: var(--dark-success);
}

body.dark-mode .user-answer.user-wrong {
    background: rgba(244, 135, 113, 0.15);
}

body.dark-mode .user-answer.user-correct {
    background: rgba(78, 201, 176, 0.15);
}

/* ==================
   DARK MODE - AI CHAT
   ================== */

body.dark-mode .ai-chat-messages {
    background: var(--dark-bg-primary);
}

body.dark-mode .ai-message.ai .message-content {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .ai-message.user .message-content {
    background: linear-gradient(135deg, #802433, #5c1a26);
    color: white;
}

body.dark-mode .ai-chat-input-area {
    background: var(--dark-bg-secondary);
    border-top: 1px solid var(--dark-border);
}

body.dark-mode .welcome-ai-message {
    color: var(--dark-text-primary);
}

body.dark-mode .welcome-ai-message i {
    color: var(--dark-primary);
}
body.dark-mode .welcome-ai-message img {
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.35));
}

body.dark-mode .welcome-ai-message p {
    color: var(--dark-text-secondary);
}

/* ==================
   DARK MODE - LOGIN SCREEN ONLY
   ================== */

/* Sfondo scuro per la schermata di autenticazione */
body.dark-mode #auth-screen {
    background: linear-gradient(180deg, #0f0f10 0%, #0b0b0c 100%);
}

/* Canvas/threads su sfondo scuro: trasparente per far vedere il gradiente */
body.dark-mode #auth-threads {
    background: transparent;
}

/* Mantieni il logo/titolo rosa anche in dark sul login */
body.dark-mode #auth-screen .app-logo h1 {
    color: var(--primary-color);
}

/* Switch Ricordami coerente con dark */
body.dark-mode #auth-screen .checkbox-group input[type="checkbox"] {
    background: linear-gradient(180deg, #2a2a2a, #1e1e1e);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.1);
}

/* Card del login più scura, con bordo e glow morbido */
body.dark-mode #auth-screen .auth-form {
    background: linear-gradient(180deg, rgba(18,18,18,.98), rgba(10,10,10,.96));
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 24px 48px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.12) inset;
}

/* Input scuri come nello screen */
body.dark-mode #auth-screen .form-group input {
    background: #141216;
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08), transparent 45%),
                      radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.04), transparent 40%),
                      linear-gradient(180deg, #19191b, #0f0f11);
    color: #f6f6f8;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.08), 0 20px 30px rgba(0, 0, 0, 0.6);
}
body.dark-mode #auth-screen .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
body.dark-mode #auth-screen .form-group input:focus {
    background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.14), transparent 45%),
                      radial-gradient(circle at 75% 10%, rgba(255, 255, 255, 0.08), transparent 40%),
                      linear-gradient(180deg, #1d1c1f, #141216);
    border-color: rgba(199, 123, 133, 0.8);
    box-shadow: 0 0 0 2px rgba(199, 123, 133, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 20px 40px rgba(0, 0, 0, 0.65);
}

/* Label e testo secondario chiari */
body.dark-mode #auth-screen label,
body.dark-mode #auth-screen .auth-switch,
body.dark-mode #auth-screen .auth-form .auth-meta-phrase {
    color: #d2d2d6;
}

body.dark-mode #auth-screen .reg-terms-label a,
body.dark-mode #auth-screen .reg-terms-label a:visited {
    color: #8b1d2c;
}

body.dark-mode #auth-screen .reg-terms-label a:hover {
    color: #a12536;
}

/* Bottone Accedi con glow come screenshot */
body.dark-mode #auth-screen .auth-btn {
    background: linear-gradient(135deg, #a93a46, #7a202c);
    box-shadow: 0 16px 30px rgba(128,36,51,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
body.dark-mode #auth-screen .auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(128,36,51,.50), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Link e pulsante Chi Siamo coerenti */
body.dark-mode #auth-screen .auth-switch a { color: var(--dark-primary); }
body.dark-mode #auth-screen .auth-form .chi-siamo-btn {
    background: linear-gradient(135deg, #6d2a36, #4b1c25);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
}