/**
 * Gamification CSS - NIGHT MODE
 * Stili personalizzati per modalità notturna
 */

/* ========================================
   VARIABILI NIGHT MODE
   ======================================== */
body[data-mode="night"] {
    --gam-bg-main: #1a1a1a;
    --gam-bg-secondary: #252525;
    --gam-bg-card: #2d2d2d;
    --gam-bg-hover: #383838;
    
    --gam-text-primary: #f0f0f0;
    --gam-text-secondary: #b0b0b0;
    --gam-text-muted: #808080;
    
    --gam-border-color: #404040;
    --gam-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --gam-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.6);
    
    --benefits-bg: rgba(139, 92, 246, 0.12);
    --benefits-title: #b794f6;
}

/* ========================================
   MODAL NIGHT MODE ADJUSTMENTS
   ======================================== */
body[data-mode="night"] .modal-content {
    background: var(--gam-bg-card);
    color: var(--gam-text-primary);
}

body[data-mode="night"] .modal-content h2 {
    color: var(--gam-text-primary);
}

body[data-mode="night"] .modal-content p {
    color: var(--gam-text-secondary);
}

body[data-mode="night"] .gamification-benefits {
    background: var(--benefits-bg) !important;
}

body[data-mode="night"] .gamification-benefits h4 {
    color: var(--benefits-title) !important;
}

body[data-mode="night"] .gamification-benefits li {
    color: var(--gam-text-secondary);
}

/* ========================================
   FORM ELEMENTS NIGHT MODE
   ======================================== */
body[data-mode="night"] .gamification-input,
body[data-mode="night"] .gamification-select {
    background: var(--gam-bg-secondary);
    color: var(--gam-text-primary);
    border-color: var(--gam-border-color);
}

body[data-mode="night"] .gamification-input:focus,
body[data-mode="night"] .gamification-select:focus {
    background: var(--gam-bg-card);
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}

body[data-mode="night"] .gamification-input::placeholder,
body[data-mode="night"] .gamification-select::placeholder {
    color: var(--gam-text-muted);
    opacity: 0.7;
}

body[data-mode="night"] .gamification-label {
    color: var(--gam-text-primary);
}

body[data-mode="night"] .gamification-card-title {
    color: var(--gam-text-primary);
}

body[data-mode="night"] .gamification-card-subtitle {
    color: var(--gam-text-secondary);
}

body[data-mode="night"] .gamification-card {
    background: var(--gam-bg-card);
    border-color: var(--gam-border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body[data-mode="night"] .gamification-card:hover {
    background: var(--gam-bg-hover);
    box-shadow: var(--gam-shadow-lg);
}

body[data-mode="night"] .gamification-card h2,
body[data-mode="night"] .gamification-card h3,
body[data-mode="night"] .gamification-card h4 {
    color: var(--gam-text-primary);
}

body[data-mode="night"] .gamification-card p {
    color: var(--gam-text-secondary);
}

/* ========================================
   PREDICTIONS NIGHT MODE
   ======================================== */
body[data-mode="night"] .prediction-item {
    background: var(--gam-bg-card);
    border-color: var(--gam-border-color);
}

body[data-mode="night"] .prediction-item.correct {
    border-color: var(--gam-success);
    background: linear-gradient(to right, rgba(16, 185, 129, 0.1), transparent);
}

body[data-mode="night"] .prediction-status.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

body[data-mode="night"] .prediction-status.correct {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

body[data-mode="night"] .prediction-status.close {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

body[data-mode="night"] .prediction-status.wrong {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* ========================================
   FANTASY LEAGUE NIGHT MODE
   ======================================== */
body[data-mode="night"] .fantasy-team-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
    border-color: #a78bfa;
}

body[data-mode="night"] .fantasy-team-header h3 {
    color: #f0f0f0 !important;
    display: block !important;
    visibility: visible !important;
}

body[data-mode="night"] .fantasy-team-header p {
    color: #b0b0b0 !important;
    display: block !important;
    visibility: visible !important;
}

body[data-mode="night"] .gamification-card-title {
    color: #f0f0f0 !important;
    display: block !important;
    visibility: visible !important;
}

/* DJ SELECTOR NIGHT MODE */
body[data-mode="night"] #dj-selector::-webkit-scrollbar-track {
    background: #1a1a1a;
}

body[data-mode="night"] #dj-selector::-webkit-scrollbar-thumb {
    background: #404040;
}

body[data-mode="night"] #dj-selector::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}

body[data-mode="night"] .dj-selector-item {
    background: #2d2d2d;
    border-color: #404040;
}

body[data-mode="night"] .dj-selector-item:hover {
    background: #353535;
    border-color: #a78bfa;
}

body[data-mode="night"] .dj-selector-item.selected {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(59, 130, 246, 0.15));
    border-color: #a78bfa;
}

body[data-mode="night"] .dj-avatar {
    border-color: #555;
}

body[data-mode="night"] .dj-name {
    color: #f0f0f0;
}

body[data-mode="night"] .dj-meta,
body[data-mode="night"] .dj-country {
    color: #b0b0b0;
}

body[data-mode="night"] .dj-genre {
    color: #a78bfa;
}

body[data-mode="night"] .dj-rank {
    color: #a78bfa;
}

body[data-mode="night"] .dj-checkbox {
    accent-color: #a78bfa;
}

body[data-mode="night"] .dj-selector-item .dj-info .dj-meta {
    color: #b0b0b0 !important;
}

/* ========================================
   ACHIEVEMENTS NIGHT MODE
   ======================================== */
body[data-mode="night"] .achievement-item {
    background: var(--gam-bg-card);
    border-color: var(--gam-border-color);
}

body[data-mode="night"] .achievement-item.unlocked {
    border-color: var(--gam-success);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), transparent);
}

body[data-mode="night"] .achievement-badge.unlocked {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

body[data-mode="night"] .achievement-badge.locked {
    background: var(--gam-bg-secondary);
    color: var(--gam-text-muted);
}

body[data-mode="night"] .gamification-badge-accent {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

body[data-mode="night"] .gamification-highlight {
    color: #fbbf24;
}

/* ========================================
   FALLBACK per compatibilità alternative night mode
   ======================================== */
.night-mode .dj-selector-item,
body.night-mode .dj-selector-item {
    background: #2d2d2d !important;
    border-color: #404040 !important;
}

.night-mode .dj-name,
body.night-mode .dj-name {
    color: #f0f0f0 !important;
}

.night-mode .dj-meta,
body.night-mode .dj-meta {
    color: #b0b0b0 !important;
}

.night-mode .dj-rank,
body.night-mode .dj-rank {
    color: #a78bfa !important;
}

/* ========================================
   ADDITIONAL TEXT FIXES FOR NIGHT MODE
   ======================================== */
body[data-mode="night"] .prediction-dj-name,
body[data-mode="night"] .prediction-detail-value {
    color: var(--gam-text-primary);
}

body[data-mode="night"] .prediction-detail-label {
    color: var(--gam-text-secondary);
}

body[data-mode="night"] .achievement-title {
    color: var(--gam-text-primary);
}

body[data-mode="night"] .achievement-description {
    color: var(--gam-text-secondary);
}

body[data-mode="night"] .gamification-empty-state-title {
    color: var(--gam-text-primary);
}

body[data-mode="night"] .gamification-empty-state-description {
    color: var(--gam-text-secondary);
}

/* User Stats in Night Mode - mantiene gradiente ma migliora leggibilità */
body[data-mode="night"] .gamification-user-stats .user-name {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body[data-mode="night"] .gamification-user-stats .user-level {
    color: rgba(255, 255, 255, 0.92);
}

body[data-mode="night"] .gamification-user-stats .streak-number {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body[data-mode="night"] .gamification-user-stats .streak-label {
    color: rgba(255, 255, 255, 0.88);
}

body[data-mode="night"] .gamification-stat-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
}