/**
 * Variabili CSS: :root, .dark, variabili tema
 */
/* Contrasto testo su bottoni chiari: testo sempre leggibile su sfondo bianco/chiaro */
#mainHeader button.bg-white,
#mainHeader button.bg-white i,
#mainHeader button.bg-white span,
#filtersBar button.bg-white,
#filtersBar button.bg-white i,
#filtersBar button.bg-white span,
#filtersBar button.quick-filter-btn,
#filtersBar button.quick-filter-btn i {
    color: #1e293b !important;
}
.dark #mainHeader button.bg-white,
.dark #mainHeader button.bg-white i,
.dark #mainHeader button.bg-white span,
.dark #filtersBar button.bg-white,
.dark #filtersBar button.bg-white i,
.dark #filtersBar button.bg-white span,
.dark #filtersBar button.quick-filter-btn,
.dark #filtersBar button.quick-filter-btn i {
    color: #e2e8f0 !important;
}
#filtersBar .button-archivio,
#filtersBar .button-archivio i,
#filtersBar .button-archivio span {
    color: #3730a3 !important;
}
.dark #filtersBar .button-archivio,
.dark #filtersBar .button-archivio i,
.dark #filtersBar .button-archivio span {
    color: #a5b4fc !important;
}

/* Rimuovi retino/griglia grigio dallo sfondo: mantieni solo gradiente, nessun pattern sovrapposto */
body {
    background: var(--bg-primary) !important;
    background-image: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}
main, #listView, #eventsContainer {
    background: transparent !important;
    background-image: none !important;
}

:root {
    --bg-primary: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --bg-secondary: rgba(255, 255, 255, 0.9);
    --bg-card: rgba(255, 255, 255, 0.9);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --border-color: rgba(226, 232, 240, 0.6);
    --shadow: rgba(0, 0, 0, 0.05);
    --shadow-hover: rgba(0, 0, 0, 0.15);
}

.dark {
    /* Sfondo uniforme (nessun gradiente) per evitare striature/bande nella vista lista */
    --bg-primary: #0f172a;
    --bg-secondary: rgba(30, 41, 59, 0.9);
    --bg-card: rgba(30, 41, 59, 0.95);
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --border-color: rgba(51, 65, 85, 0.6);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 0, 0, 0.5);
}

/* Dark Mode Styles */
.dark body {
    background: #0f172a !important;
    background-image: none !important;
}

.dark .bg-white {
    background-color: rgba(30, 41, 59, 0.95) !important;
}

.dark .text-slate-900 {
    color: #f1f5f9 !important;
}

.dark .text-slate-700 {
    color: #cbd5e1 !important;
}

.dark .text-slate-600 {
    color: #94a3b8 !important;
}

.dark .text-slate-500 {
    color: #64748b !important;
}

.dark .border-slate-200 {
    border-color: rgba(51, 65, 85, 0.6) !important;
}

.dark .bg-slate-50 {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

.dark .bg-slate-100 {
    background-color: rgba(30, 41, 59, 0.7) !important;
}

.dark .hover\:bg-slate-50:hover {
    background-color: rgba(30, 41, 59, 0.8) !important;
}

.dark .hover\:bg-slate-100:hover {
    background-color: rgba(30, 41, 59, 0.9) !important;
}

.dark .bg-gradient-to-br.from-white.to-slate-50\/50 {
    background: linear-gradient(to bottom right, rgba(30, 41, 59, 0.95), rgba(30, 41, 59, 0.5)) !important;
}

/* Lista eventi: sfondo trasparente (nessun retino/sfondo grigio) */
#eventsContainer .event-card {
    background: transparent !important;
}
.dark #eventsContainer .event-card {
    background: transparent !important;
}
.dark .event-card {
    border-color: rgba(51, 65, 85, 0.6) !important;
}

.dark #eventsContainer .event-card:hover {
    background: transparent !important;
}
.dark .event-card:hover {
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(59, 130, 246, 0.4),
        0 0 30px rgba(59, 130, 246, 0.2) !important;
}

.dark input,
.dark select,
.dark textarea {
    background-color: rgba(30, 41, 59, 0.9) !important;
    color: #f1f5f9 !important;
    border-color: rgba(51, 65, 85, 0.6) !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    background-color: rgba(30, 41, 59, 1) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

.dark .text-slate-500 {
    color: #94a3b8 !important;
}

.dark .text-slate-400 {
    color: #64748b !important;
}

.dark #authOverlay {
    background: linear-gradient(to bottom right, #0f172a, #1e293b, #334155) !important;
}

.dark #emptyState {
    background: linear-gradient(to bottom right, rgba(30, 41, 59, 0.95), rgba(30, 41, 59, 0.5)) !important;
    border-color: rgba(51, 65, 85, 0.6) !important;
}

.dark #searchInput::placeholder {
    color: #64748b !important;
}

.dark .bg-blue-50 {
    background-color: rgba(30, 58, 138, 0.3) !important;
}

.dark a {
    color: #60a5fa !important;
}

.dark a:hover {
    color: #93c5fd !important;
}