:root {
    /* Colori per la modalità chiara (come adesso) */
    --bg-principale: #f4f1e9;
    --bg-card: rgba(253, 250, 246, 0.95);
    --testo-primario: #3a2f2f;
    --testo-secondario: #6b7280;
    --colore-accento: #8c1c13;
    --colore-bordo: #dcd0b8;
}

body.dark-mode {
    /* Colori per la modalità scura (Blu Notte e Oro) */
    --bg-principale: #1a202c;       /* Blu Notte Scuro */
    --bg-card: #2d3748;             /* Blu Notte più Chiaro */
    --testo-primario: #fdfaf6;      /* Testo Chiaro (Pergamena) */
    --testo-secondario: #a0aec0;    /* Testo Grigio Chiaro */
    --colore-accento: #d4af37;      /* Oro */
    --colore-bordo: #4a5568;        /* Bordo Grigio-Blu */
    color: var(--testo-secondario); /* <-- RIGA AGGIUNTA */
}

body {
    font-family: 'Book Antiqua', Palatino, serif; /* NUOVO FONT STACK */
    background-color: var(--bg-principale); /* Usa la variabile per lo sfondo */
    background-image: url('data/sfondo.png');
    background-attachment: fixed;
    background-size: cover;
    color: var(--testo-primario); /* Usa la variabile per il testo */
    transition: background-color 0.3s, color 0.3s; /* Aggiunge un'animazione fluida */
    -webkit-font-smoothing: antialiased; /* <-- RIGA AGGIUNTA */
    -moz-osx-font-smoothing: grayscale; /* <-- RIGA AGGIUNTA */
}

body.dark-mode {
    background-image: url('data/sfondo-dark.png');
}

/* Imposta il font Book Antiqua per tutti i titoli e le etichette speciali */
h1, h2, h3, h4, h5, h6, .font-cinzel {
    font-family: 'Book Antiqua', Palatino, 'Palatino Linotype', 'EB Garamond', serif;
}

/* Applica il grassetto SOLO ai tag dei titoli (h1, h3, etc.) */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

.card {
    background-color: var(--bg-card); /* Usa la variabile */
    backdrop-filter: blur(4px);
    border: 1px solid var(--colore-bordo); /* Usa la variabile */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, border-color 0.3s; /* Animazione */
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--bg-card); /* Usa variabile */
    color: var(--testo-primario); /* Usa variabile */
    font-size: 1.125rem; /* <-- RIGA AGGIUNTA */
    border: 1px solid var(--colore-bordo); /* Usa variabile */
    border-radius: 0.375rem;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233a2f2f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.2s ease-in-out;
}

/* Aumenta la dimensione del font per la descrizione del video */
#notesContent {
    font-size: 1.125rem;
    line-height: 1.6; /* Migliora la spaziatura tra le righe */
}

/* Regola specifica per cambiare la freccia in dark mode */
body.dark-mode .custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23fdfaf6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3C/svg%3E");
}
/* Stile HOVER per i menu a tendina (versione corretta) */

/* HOVER in LIGHT MODE */
body:not(.dark-mode) .custom-select:hover {
    border-color: var(--colore-accento); /* Bordo rosso */
}

/* HOVER in DARK MODE */
body.dark-mode .custom-select:hover {
    border-color: var(--colore-accento); /* Bordo oro */
}
.modal {
    transition: opacity 0.3s ease-in-out;
}
.modal-container {
    transition: transform 0.3s ease-in-out;
}
.management-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
#searchOverlay {
    background-color: rgba(244, 241, 233, 0.95);
    backdrop-filter: blur(8px);
}
#embedPlayerContainer {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
#embedPlayerContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Stile per nascondere i controlli Admin di default */
.admin-control {
    display: none !important; /* Aggiunto !important per forzare la regola */
}

/* Quando il body ha la classe 'admin-mode', mostra i controlli */
.admin-mode .admin-control {
    display: block !important; /* Aggiunto !important anche qui */
}

/* Caso speciale per i contenitori che usano flexbox */
.admin-mode .admin-control.flex, 
.admin-mode .admin-control.absolute {
    display: flex !important; /* E anche qui per coerenza */
}

/* ============================================
   FIX PER LE POLICY DI IUBENDA
   ============================================ */

/* Forza lo stile del contenitore principale per allineare i link */
#iubenda-container {
    position: fixed !important;
    bottom: 1rem !important;
    left: 1rem !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important; /* Allinea in colonna di default */
    align-items: flex-start !important;
    gap: 0.5rem !important; /* Spazio tra i link */
}

/* Regola per dispositivi più grandi: allinea in riga */
@media (min-width: 640px) { /* Corrisponde a 'sm' in Tailwind */
    #iubenda-container {
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
    }
}

/* Forza lo stile dei singoli link e nasconde l'icona Iubenda */
#iubenda-container .iubenda-embed,
#iubenda-container .iubenda-embed i {
    font-size: 0.75rem !important; /* Testo più piccolo */
    line-height: 1 !important;
    color: var(--testo-secondario) !important; /* Usa il colore del testo secondario */
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    text-decoration: underline !important;
    transition: color 0.2s ease-in-out !important;
}

/* Nasconde l'icona specifica di Iubenda e il suo contenitore invisibile */
.iubenda-embed .iubenda-cs-icon,
.iubenda-cs-icon-container {
    display: none !important;
    visibility: hidden !important;
}

/* Stile Hover */
#iubenda-container .iubenda-embed:hover {
    color: var(--colore-accento) !important; /* Cambia colore all'hover */
}

/* ============================================
   FINE FIX PER LE POLICY DI IUBENDA
   ============================================ */

/* --- Personalizzazione Widget Ko-fi (Tentativo #3 - Massima Specificità) --- */

/* Applichiamo TUTTO direttamente allo span, ma usando un selettore più forte */
body .kofi-button span {
    font-family: 'Cinzel', serif !important;
    color: #3a2f2f !important; /* Proviamo di nuovo a forzare il colore qui */
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* In aggiunta, per sicurezza, impostiamo il colore anche al contenitore */
body a.kofi-button {
    color: #3a2f2f !important;
}

/* Colore per link nei modali e pulsanti in basso */
.modal-container a, 
body.dark-mode #contactBtn, 
body.dark-mode #aboutBtn, 
body.dark-mode #supportBtn {
    color: var(--colore-accento);
}

/* Stile per i pulsanti principali come "Conferma" o "Sostituisci" */
#confirmBtn, #confirmDeleteBtn {
    background-color: var(--colore-accento);
    border-color: color-mix(in srgb, var(--colore-accento) 80%, black); /* Crea un bordo più scuro */
    color: var(--bg-principale); /* Inverte il colore del testo per leggibilità */
}

#confirmBtn:hover, #confirmDeleteBtn:hover {
    background-color: color-mix(in srgb, var(--colore-accento) 80%, black);
}

/* Nasconde il widget Iubenda per le preferenze di tracciamento */
.iubenda-cs-preferences-link {
    display: none !important;
}

/* --- REGOLE SPECIFICHE PER CORREZIONI IN DARK MODE --- */

/* Forza il colore del testo primario (oro) su elementi specifici */
body.dark-mode .font-semibold,
body.dark-mode .text-\[\#3a2f2f\],
body.dark-mode h3 {
    color: var(--testo-primario) !important;
}

/* Forza il colore del testo secondario (grigio chiaro) su elementi specifici */
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600 {
    color: var(--testo-secondario) !important;
}

/* Corregge lo stile dei menu a tendina in dark mode */
body.dark-mode .custom-select {
    background-color: var(--bg-card);
    color: var(--testo-primario);
    border-color: var(--colore-bordo);
}

/* Corregge lo stile dei pulsanti Modifica/Elimina in dark mode */
body.dark-mode .management-btn {
    background-color: var(--bg-card);
    border-color: var(--colore-bordo);
    color: var(--testo-primario);
}

body.dark-mode .management-btn:hover {
    background-color: var(--bg-principale);
}

/* Corregge il colore del "ring" di selezione dei menu a tendina in Dark Mode */
body.dark-mode .custom-select:focus {
    border-color: var(--colore-accento); /* Bordo dorato */
    /* Simula l'effetto "ring" di Tailwind con il colore dorato */
    box-shadow: 0 0 0 1px var(--colore-accento); 
}

/* --- Correzioni Aggiuntive per i Pulsanti Inferiori --- */

/* Corregge il pulsante Contatti in Dark Mode */
body.dark-mode #contactBtn {
    background-color: var(--bg-card); /* Usa il colore della card scura */
    color: var(--colore);      /* Usa il testo chiaro (oro/pergamena) */
    border-color: var(--colore-bordo); /* Usa il bordo scuro */
}

/* Corregge il pulsante Ko-fi ("Sostieni") in Dark Mode */
body.dark-mode a.kofi-button {
    /* Per vincere contro lo stile del widget, usiamo !important */
    background-color: var(--bg-card) !important; 
    border-color: var(--colore-bordo) !important;
}
body.dark-mode .kofi-button span {
    /* Forziamo il testo a diventare chiaro */
    color: var(--testo-primario) !important;
}

/* --- Stili Dark Mode per la Finestra di Ricerca --- */

/* Applica lo sfondo principale scuro all'overlay */
body.dark-mode #searchOverlay {
    background-color: var(--bg-principale);
}

/* Stile dell'input di testo in Dark Mode */
body.dark-mode #searchInput {
    background-color: var(--bg-card);
    color: var(--testo-primario);
    border-color: var(--colore-bordo);
}

/* Corregge il colore del "ring" di focus in Dark Mode */
body.dark-mode #searchInput:focus {
    border-color: var(--colore-accento); /* Bordo dorato */
    box-shadow: 0 0 0 2px var(--colore-accento); /* Anello dorato */
}

/* Stile del contenitore dei risultati in Dark Mode */
body.dark-mode #searchResults {
    background-color: var(--bg-card);
}

/* Stile per il testo dei singoli risultati di ricerca in Dark Mode */
body.dark-mode #searchResults .font-bold {
    color: var(--testo-primario);
}
body.dark-mode #searchResults .text-sm {
    color: var(--testo-secondario);
}
body.dark-mode #searchResults .hover\:bg-\[\#f4f1e9\]:hover {
    background-color: var(--bg-principale); /* Sfondo hover più scuro */
}
body.dark-mode #searchResults .border-b {
    border-color: var(--colore-bordo); /* Colore del separatore */
}

/* Corregge il colore del pulsante di chiusura 'X' */
body.dark-mode #closeSearchBtn {
    color: var(--testo-primario);
}
body.dark-mode #closeSearchBtn:hover {
    color: var(--colore-accento);
}

/* ============================================
   STILI DARK MODE PER LA FINESTRA CONTATTI
   ============================================ */

/* Adatta il contenitore principale della finestra contatti */
body.dark-mode #contactModal .modal-container {
    background-color: var(--bg-card);  /* Blu notte chiaro invece del beige */
    /* Il bg-card fornisce un contrasto sufficiente con l'overlay scuro
       mantenendo la leggibilità del contenuto */
}

/* Pulsante di chiusura (X) - stato normale e hover */
body.dark-mode #closeContactModalBtn {
    color: var(--testo-secondario);  /* Grigio chiaro invece del grigio scuro */
}

body.dark-mode #closeContactModalBtn:hover {
    color: var(--testo-primario);  /* Pergamena/oro chiaro all'hover */
    /* Nota: usiamo testo-primario invece di colore-accento per mantenere
       la X più neutra e non troppo prominente */
}

/* Titolo principale della finestra */
body.dark-mode #contactModal h3 {
    color: var(--testo-primario);  /* Assicura che il titolo sia ben visibile */
}

/* Tutti i paragrafi generici nella finestra */
body.dark-mode #contactModal p {
    color: var(--testo-secondario);  /* Testo grigio chiaro per i paragrafi */
}

/* Override specifico per paragrafi con classi di colore Tailwind */
body.dark-mode #contactModal p.text-gray-700,
body.dark-mode #contactModal p.text-gray-800,
body.dark-mode #contactModal p.text-gray-600 {
    color: var(--testo-secondario) !important;
    /* !important necessario per sovrascrivere le classi Tailwind inline */
}

/* Il link email - stato normale */
body.dark-mode #contactModal a {
    color: var(--colore-accento);  /* Oro invece del rosso */
    /* L'oro è perfetto per i link in Dark Mode: 
       ben visibile e mantiene la gerarchia visiva */
}

/* Il link email - stato hover */
body.dark-mode #contactModal a:hover {
    color: var(--colore-accento);  /* Mantiene l'oro */
    text-decoration: underline;  /* Conserva il sottolineato per feedback visivo */
    opacity: 0.8;  /* Leggera trasparenza per indicare l'interazione */
}

/* Testo all'interno del paragrafo contenente il link */
body.dark-mode #contactModal p:has(a) {
    color: var(--testo-secondario) !important;
    /* Questo selettore moderno (:has) assicura che il testo
       circostante il link mantenga il colore corretto.
       Fallback: se il browser non supporta :has, il testo
       userà comunque la regola generale per i paragrafi */
}

/* ============================================
   STILI DARK MODE PER LA NUOVA MODALE "IL PROGETTO"
   ============================================ */

/* Adatta il contenitore principale della finestra "Il Progetto" */
body.dark-mode #aboutModal .modal-container {
    background-color: var(--bg-card); /* Usa il colore della card scura */
}

/* Adatta il pulsante di chiusura (X) - stato normale e hover */
body.dark-mode #closeAboutModalBtn {
    color: var(--testo-secondario);
}

body.dark-mode #closeAboutModalBtn:hover {
    color: var(--testo-primario);
}

/* Titolo principale della finestra */
body.dark-mode #aboutModal h3 {
    color: var(--testo-primario) !important;
}

/* Tutti i paragrafi generici nella finestra */
body.dark-mode #aboutModal p {
    color: var(--testo-secondario);
}

/* Il link email - stato normale */
body.dark-mode #aboutModal a {
    color: var(--colore-accento);
}

/* Il link email - stato hover */
body.dark-mode #aboutModal a:hover {
    color: var(--colore-accento);
    text-decoration: underline;
    opacity: 0.8;
}

/* Stile per il widget Ko-fi in dark mode */
body.dark-mode .kofi-widget-container .kofi-button {
    background-color: var(--bg-card) !important;
    border-color: var(--colore-bordo) !important;
    color: var(--testo-primario) !important;
}

/* --- Stile Hover Dorato per Icone in Dark Mode --- */
/* 1. Assicura che i principali bottoni-icona abbiano una transizione fluida del colore */
#addVideoBtn,
#searchBtn,
#themeToggleBtn,
#contactBtn,
#contactBtn i,
#contactBtn span,
#editVideoBtn,
#deleteVideoBtn,
#exportDataBtn {
    transition: color 0.2s ease-in-out;
}

/* Stato base esplicito per sincronizzazione perfetta */
#contactBtn i,
#contactBtn span {
    transition: inherit; /* Eredita la transizione dal genitore */
}

/* 2. Applica il colore dorato all'hover solo in Dark Mode */
body.dark-mode #addVideoBtn:hover,
body.dark-mode #searchBtn:hover,
body.dark-mode .kofi-button:hover,
body.dark-mode .kofi-button:hover span,
body.dark-mode a.kofi-button:hover {
    color: var(--colore-accento) !important;
}

body.dark-mode #themeToggleBtn:hover,
body.dark-mode #themeToggleBtn:hover i {
    color: var(--colore-accento) !important; /* Oro */
}

body.dark-mode #contactBtn:hover,
body.dark-mode #contactBtn:hover i,
body.dark-mode #contactBtn:hover span,
body.dark-mode #aboutBtn:hover,
body.dark-mode #aboutBtn:hover i,
body.dark-mode #aboutBtn:hover span {
    color: var(--colore-accento) !important;
}

body.dark-mode #editVideoBtn:hover,
body.dark-mode #deleteVideoBtn:hover,
body.dark-mode #exportDataBtn:hover {
    color: var(--colore-accento) !important; /* Colore ORO */
}

/* 3. Ripristina l'hover rosso per la Light Mode */
body:not(.dark-mode) #addVideoBtn:hover,
body:not(.dark-mode) #searchBtn:hover,
body:not(.dark-mode) #themeToggleBtn:hover {
    color: #8c1c13; /* Colore rosso originale */
}

/* Hover per il pulsante Contatti e Scopri il Progetto in Light Mode */
body:not(.dark-mode) #contactBtn:hover,
body:not(.dark-mode) #contactBtn:hover i,
body:not(.dark-mode) #contactBtn:hover span,
body:not(.dark-mode) #aboutBtn:hover,
body:not(.dark-mode) #aboutBtn:hover i,
body:not(.dark-mode) #aboutBtn:hover span {
    color: #8c1c13 !important; /* Colore rosso originale */
}

/* Hover per il pulsante Ko-fi (Sostieni) in Light Mode */
body:not(.dark-mode) .kofi-button:hover,
body:not(.dark-mode) .kofi-button:hover span,
body:not(.dark-mode) a.kofi-button:hover {
    color: #8c1c13 !important; /* Colore rosso originale */
}

/* ============================================
   FIX TRASPARENZA WIDGET KO-FI 
   ============================================ */

/* Previeni il cambio di trasparenza del widget Ko-fi su hover */
.kofi-button,
a.kofi-button,
.kofi-button:hover,
a.kofi-button:hover {
    opacity: 1 !important;  /* Forza opacità piena sempre */
}

/* Mantieni il background solido in Light Mode */
body:not(.dark-mode) .kofi-button:hover,
body:not(.dark-mode) a.kofi-button:hover {
    background-color: #eee8d4 !important;  /* Stesso colore dello stato normale */
    opacity: 1 !important;
}

/* Mantieni il background solido in Dark Mode */
body.dark-mode .kofi-button:hover,
body.dark-mode a.kofi-button:hover {
    background-color: var(--bg-card) !important;  /* Stesso colore dello stato normale */
    opacity: 1 !important;
}

/* --- Stile Migliorato per Opzioni Menu a Tendina --- */

/* Stile di base per le opzioni in LIGHT MODE */
body:not(.dark-mode) .custom-select option {
    background: white;
    color: var (--testo-primario);
}

/* Stile di base per le opzioni in LIGHT MODE */
body:not(.dark-mode) .custom-select option {
    background: var(--bg-card);
    color: var(--testo-primario);
}

/* Evidenziazione per il solo hover in LIGHT MODE */
body:not(.dark-mode) .custom-select option:hover {
    background-color: var(--colore-accento);
    color: var(--bg-principale);
}

/* Stile di base per le opzioni in DARK MODE */
body.dark-mode .custom-select option {
    background: var(--bg-card);
    color: var(--testo-primario);
}

/* Evidenziazione per il solo hover in DARK MODE */
body.dark-mode .custom-select option:hover {
    background-color: var(--colore-accento);
    color: var(--bg-principale);
}

/* Aumenta la dimensione dell'icona sole/luna per renderla proporzionata */
#themeToggleBtn i {
    font-size: 1.75rem; /* Imposta la grandezza dell'icona (circa 28px) */
    width: 2rem;       /* Mantiene il contenitore grande 32px per coerenza */
    height: 2rem;
    display: flex;     /* Centra l'icona nel suo contenitore */
    align-items: center;
    justify-content: center;
}

/* Posiziona il pulsante per il cambio tema in alto a sinistra */
#themeToggleBtn {
    position: fixed;   /* Lo fissa rispetto alla finestra del browser */
    top: 1.5rem;       /* 24px dal bordo superiore */
    left: 1.5rem;      /* 24px dal bordo sinistro */
    z-index: 1000;     /* Si assicura che stia sempre in primo piano */
}

/* ============================================
   STILI DEI PULSANTI
   ============================================ */
#aboutBtn, #contactBtn {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Spazio tra icona e testo */
    
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

/* Stile base per la modalità chiara */
body:not(.dark-mode) #aboutBtn, 
body:not(.dark-mode) #contactBtn {
    background-color: #eee8d4;
    color: #3a2f2f;
    border-bottom: 1px solid #c2beb0;
    border-right: 1px solid #c2beb0;
}

/* Stile base per la modalità scura */
body.dark-mode #aboutBtn, 
body.dark-mode #contactBtn {
    background-color: var(--bg-card);
    color: var(--testo-primario);
    border-bottom: 1px solid var(--colore-bordo);
    border-right: 1px solid var(--colore-bordo);
}

/* Effetti Hover e Active comuni a entrambi i temi */
#aboutBtn:hover, #contactBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Nuova regola per il colore dell'hover */
    color: var(--colore-accento);
}

#aboutBtn:active, #contactBtn:active {
    transform: translateY(1px);
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
}

/* Stili specifici per le icone e il testo all'interno dei pulsanti */
#aboutBtn i, #contactBtn i {
    font-size: 1rem;
}

#aboutBtn span, #contactBtn span {
    font-size: 0.75rem;
    font-weight: 600;
}
/* ============================================
   FINE STILI DEI PULSANTI
   ============================================ */

   /* Stile per l'etichetta 'NEW!' nel menu a tendina */
.custom-select option[value*="new"] {
  font-weight: bold;
  font-style: italic;
  color: #8c1c13; /* Colore accento nella light mode */
}

/* Stile per l'etichetta 'NEW!' in dark mode */
body.dark-mode .custom-select option[value*="new"] {
  color: #d4af37; /* Oro nella dark mode */
}

/* ============================================
   STILI MODALE DI BENVENUTO
   ============================================ */

#welcomeModal .modal-content {
    transition: all 0.3s ease-in-out; /* Animazione per colore e trasformazione */
    border: 1px solid transparent;
}

/* --- LOGICA DEI COLORI INVERTITI (VERSIONE CORRETTA) --- */

/* Stile MODALE SCURA quando il SITO è CHIARO */
body:not(.dark-mode) #welcomeModal .modal-content {
    background-color: #2d3748;                   /* Blu Notte Chiaro */
    color: var(--bg-principale);                  /* Usa il colore di sfondo della light-mode */
    border-color: #4a5568;                      /* Bordo Grigio-Blu */
    background-attachment: fixed;                 /* <-- PROPRIETÀ FONDAMENTALE CHE MANCAVA */
}

/* Colore specifico per il titolo h3 della modale scura */
body:not(.dark-mode) #welcomeModal h3 {
    color: rgb(216, 210, 192) !important; /* Manteniamo questo per un bianco più brillante, se voluto */
}

/* Colore specifico per i paragrafi p della modale scura */
body:not(.dark-mode) #welcomeModal p {
    color: rgb(216, 210, 192) /* Testo Grigio Chiaro per una migliore leggibilità */
}

/* Stile MODALE CHIARA quando il SITO è SCURO */
body.dark-mode #welcomeModal .modal-content {
    background-color: rgba(253, 250, 246, 0.95); /* Sfondo Card Chiaro */
    color: #405683;                              /* Colore base per i paragrafi */
    border-color: #dcd0b8;                       /* Bordo Chiaro */
    background-attachment: fixed;
}

/*
   REGOLA DI CORREZIONE SPECIFICA:
   Forza il colore del titolo della modale chiara,
   vincendo sulla regola globale generale per gli h3.
*/
body.dark-mode #welcomeModal h3 {
    color: #405683 !important; /* Colore blu-grigio, come i paragrafi */
}

/* --- STILI PULSANTI MODALE BENVENUTO --- */

.welcome-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
}

/* Pulsante Primario (SCOPRI) */
body:not(.dark-mode) .welcome-btn.btn-primary {
    background-color: #d4af37; /* Oro */
    color: #1a202c; /* Blu Notte Scuro */
}
body.dark-mode .welcome-btn.btn-primary {
    background-color: #8c1c13; /* Rosso */
    color: #fdfaf6;
}

/* Pulsante Secondario (SOSTIENI) */
body:not(.dark-mode) .welcome-btn.btn-secondary {
    background-color: transparent;
    color: #d4af37; /* Oro */
    border-color: #d4af37;
}
body.dark-mode .welcome-btn.btn-secondary {
    background-color: transparent;
    color: #8c1c13; /* Rosso */
    border-color: #8c1c13;
}

/* Effetti Hover */
.welcome-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
body:not(.dark-mode) .welcome-btn.btn-secondary:hover {
    background-color: #d4af37;
    color: #1a202c;
}
body.dark-mode .welcome-btn.btn-secondary:hover {
    background-color: #8c1c13;
    color: #fdfaf6;
}

/* ============================================
   STILI DARK MODE PER LA MODALE ADMIN (FORM)
   ============================================ */

/* Contenitore principale della modale */
body.dark-mode #formModal .modal-container {
    background-color: var(--bg-card); /* Sfondo blu notte chiaro */
}

/* Titolo e etichette (label) */
body.dark-mode #formModal #modalTitle,
body.dark-mode #formModal label {
    color: var(--testo-primario); /* Testo pergamena */
}

/* Pulsante di chiusura (X) */
body.dark-mode #formModal #closeModalBtn {
    color: var(--testo-secondario); /* Grigio chiaro */
}
body.dark-mode #formModal #closeModalBtn:hover {
    color: var(--testo-primario); /* Pergamena all'hover */
}

/* Input di testo, numero e aree di testo */
body.dark-mode #formModal input[type="text"],
body.dark-mode #formModal input[type="number"],
body.dark-mode #formModal textarea {
    background-color: var(--bg-principale); /* Sfondo blu notte scuro */
    color: var(--testo-primario); /* Testo pergamena */
    border-color: var(--colore-bordo); /* Bordo grigio-blu */
}

/* Stile per il focus (quando ci clicchi dentro) */
body.dark-mode #formModal input[type="text"]:focus,
body.dark-mode #formModal input[type="number"]:focus,
body.dark-mode #formModal textarea:focus {
    border-color: var(--colore-accento); /* Bordo dorato */
    box-shadow: 0 0 0 1px var(--colore-accento); /* Anello dorato, come per gli altri input */
}

/* Colore del testo segnaposto (placeholder) */
body.dark-mode #formModal input::placeholder,
body.dark-mode #formModal textarea::placeholder {
    color: var(--testo-secondario);
    opacity: 0.7;
}

/* Stile per il menu a tendina del Tema (già corretto, ma lo includiamo per completezza) */
body.dark-mode #formModal #formThemeSelector {
    background-color: var(--bg-card);
    color: var(--testo-primario);
    border-color: var(--colore-bordo);
}

/* Pulsante "Annulla" */
body.dark-mode #formModal #cancelBtn {
    background-color: #4a5568; /* Grigio-blu dalla palette dark */
    color: var(--testo-primario);
    border: 1px solid var(--colore-bordo);
}
body.dark-mode #formModal #cancelBtn:hover {
    background-color: #2d3748; /* Blu notte più chiaro all'hover */
}

/* Il pulsante "Conferma" (#confirmBtn) usa già le variabili CSS corrette
   (--colore-accento) e si adatterà automaticamente, diventando dorato. */

   /* ============================================
   STILI DARK MODE PER LA DESCRIZIONE DEL VIDEO
   ============================================ */

/* Contenitore della descrizione */
body.dark-mode #notesContainer {
    background-color: var(--bg-card); /* Sfondo blu notte chiaro, come la card principale */
    border-color: var(--colore-bordo); /* Bordo grigio-blu */
}

/* Titolo della descrizione */
body.dark-mode #notesContainer h4 {
    color: var(--testo-primario); /* Testo pergamena */
}

/* Contenuto della descrizione */
body.dark-mode #notesContainer #notesContent {
    color: var(--testo-primario) !important; /* Testo pergamena, con priorità assoluta */
}

/* ============================================
   STILI PER LE NOTIFICHE
   ============================================ */

/* Stile per il contenuto scrollabile delle news */
#newsContent {
    /* Simula uno scrollbar più discreto */
    scrollbar-width: thin;
    scrollbar-color: var(--colore-bordo) transparent;
}

#newsContent::-webkit-scrollbar {
    width: 8px;
}

#newsContent::-webkit-scrollbar-track {
    background: transparent;
}

#newsContent::-webkit-scrollbar-thumb {
    background-color: var(--colore-bordo);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
}

/* Stile per il pulsante "NEW" */
#newsContent .bg-red-500 {
    background-color: var(--colore-accento);
}
body.dark-mode #newsContent .bg-red-500 {
    color: var(--bg-card); /* Testo scuro su sfondo oro per leggibilità */
}


/* --- DARK MODE PER MODALE NEWS --- */
body.dark-mode #newsModal .modal-container,
body.dark-mode #newsAdminModal .modal-container {
    background-color: var(--bg-card);
}

body.dark-mode #closeNewsModalBtn,
body.dark-mode #closeNewsAdminModalBtn {
    color: var(--testo-secondario);
}
body.dark-mode #closeNewsModalBtn:hover,
body.dark-mode #closeNewsAdminModalBtn:hover {
    color: var(--testo-primario);
}

body.dark-mode #newsContent .border-b {
    border-color: var(--colore-bordo);
}
body.dark-mode #newsContent h4,
body.dark-mode #newsAdminModal input,
body.dark-mode #newsAdminModal textarea {
    color: var(--testo-primario) !important;
}

body.dark-mode #newsAdminModal input,
body.dark-mode #newsAdminModal textarea {
    background-color: var(--bg-principale);
    border-color: var(--colore-bordo);
}

body.dark-mode #confirmNewsAdminBtn {
    background-color: var(--colore-accento);
    color: var(--bg-card);
}

body.dark-mode #notificationBtn:hover {
    color: var(--colore-accento);
}

/* ============================================
   STILI PER PULSANTI GESTIONE NEWS
   ============================================ */

.news-manage-btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s;
}

/* Stile Light Mode */
.news-manage-btn.edit-btn {
    border-color: #3a2f2f;
    color: #3a2f2f;
}
.news-manage-btn.edit-btn:hover {
    background-color: #3a2f2f;
    color: white;
}

.news-manage-btn.delete-btn {
    border-color: #8c1c13;
    color: #8c1c13;
}
.news-manage-btn.delete-btn:hover {
    background-color: #8c1c13;
    color: white;
}

/* Stile Dark Mode */
body.dark-mode .news-manage-btn.edit-btn {
    border-color: var(--testo-secondario);
    color: var(--testo-secondario);
}
body.dark-mode .news-manage-btn.edit-btn:hover {
    background-color: var(--testo-primario);
    border-color: var(--testo-primario);
    color: var(--bg-card);
}

body.dark-mode .news-manage-btn.delete-btn {
    border-color: var(--colore-accento);
    color: var(--colore-accento);
}
body.dark-mode .news-manage-btn.delete-btn:hover {
    background-color: var(--colore-accento);
    color: var(--bg-card);
}

/* Correzione colore titolo News in Dark Mode */
body.dark-mode #newsModal .text-red-600 {
    color: var(--colore-accento) !important; /* Forza il colore ORO */
}