/* ============================================================ TEMA CLARO (modo dia) Carregado em todas as páginas via includes/header-navigation.php. Só tem efeito quando . O modo escuro (padrão) continua sendo o CSS original das páginas. Tokens: fundo página: #f4f5f8 -> #e9ebf0 superfície: #ffffff texto: #1a1a2e | texto suave: #5a6270 borda: #d8dce3 chip/realce: rgba(0,0,0,0.06) ============================================================ */ /* ---------- Base (todas as páginas) ---------- */ html[data-theme="light"] body { background: linear-gradient(135deg, #f4f5f8, #e9ebf0) !important; color: #1a1a2e !important; } html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3 { color: #1a1a2e; } /* ---------- Header / navegação compartilhados ---------- SEM overrides no modo dia (dono, 2026-07-13): a barra branca sólida cobria conteúdo e feiava a home — o header do modo noite (pílulas escuras translúcidas com blur) flutua bem sobre qualquer fundo, claro ou escuro. Fica como está. */ /* Sidebar */ html[data-theme="light"] .sidebar { background: #ffffff !important; color: #1a1a2e !important; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15); } html[data-theme="light"] .sidebar a, html[data-theme="light"] .sidebar h3, html[data-theme="light"] .sidebar .sidebar-close { color: #1a1a2e !important; } html[data-theme="light"] .sidebar a:hover { background: rgba(0, 0, 0, 0.06) !important; } html[data-theme="light"] .sidebar hr { border-color: #d8dce3 !important; } html[data-theme="light"] .sidebar h4 { color: #5a6270 !important; } /* Dropdown do usuário e busca (estilos inline no JS -> !important) */ html[data-theme="light"] #userDropdown { background: #ffffff !important; border-color: #d8dce3 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } html[data-theme="light"] #userDropdown a { color: #1a1a2e !important; } html[data-theme="light"] #searchContainer { background: #ffffff !important; border-bottom: 1px solid #d8dce3; } html[data-theme="light"] #searchContainer input { background: #f4f5f8 !important; color: #1a1a2e !important; border-color: #d8dce3 !important; } /* ---------- Home (index.php) ---------- */ html[data-theme="light"] .netflix-card { background: #ffffff !important; color: #1a1a2e !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } html[data-theme="light"] .netflix-card h3, html[data-theme="light"] .netflix-card p, html[data-theme="light"] .netflix-card .card-title, html[data-theme="light"] .netflix-card .card-description { color: #1a1a2e !important; } html[data-theme="light"] .carousel-btn { background: rgba(255, 255, 255, 0.9) !important; color: #1a1a2e !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } html[data-theme="light"] .carousel-btn:hover { background: #ffffff !important; } html[data-theme="light"] .row-title, html[data-theme="light"] .section-title, html[data-theme="light"] .carousel-title { color: #1a1a2e !important; } html[data-theme="light"] footer { color: #5a6270; } /* ---------- Template dos exercícios (exercises/treinador/analysis/mrfire) ---------- */ /* Botões translúcidos brancos ficam invisíveis em fundo claro -> vira chip escuro */ html[data-theme="light"] .resize-btn, html[data-theme="light"] .control-btn, html[data-theme="light"] .exercise-dropdown-btn { background: rgba(0, 0, 0, 0.08) !important; color: #1a1a2e !important; border-color: #c9ced6 !important; } html[data-theme="light"] .resize-btn:hover, html[data-theme="light"] .control-btn:hover:not(:disabled), html[data-theme="light"] .exercise-dropdown-btn:hover { background: rgba(0, 0, 0, 0.15) !important; } html[data-theme="light"] #interactiveModeBtn.active { background: rgba(0, 0, 0, 0.2) !important; } html[data-theme="light"] .exercise-dropdown-content { background: #ffffff !important; border-color: #d8dce3 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } html[data-theme="light"] .exercise-dropdown-item { color: #1a1a2e !important; } html[data-theme="light"] .exercise-dropdown-item:hover { background: rgba(0, 0, 0, 0.06) !important; } /* ---------- Cartões e seções genéricos (profile, settings, dashboard...) ---------- */ html[data-theme="light"] .section, html[data-theme="light"] .stat-card, html[data-theme="light"] .payment-item, html[data-theme="light"] .modal-content { background: #ffffff !important; color: #1a1a2e !important; border-color: #d8dce3 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } html[data-theme="light"] .form-group input, html[data-theme="light"] .form-group select, html[data-theme="light"] .form-group textarea, html[data-theme="light"] .profile-picture-preview { background: #f4f5f8 !important; color: #1a1a2e !important; border-color: #c9ced6 !important; } html[data-theme="light"] .form-group label { color: #1a1a2e !important; } /* ---------- Torneios ---------- */ html[data-theme="light"] .tournament-header, html[data-theme="light"] .date-selector, html[data-theme="light"] .timeline-container, html[data-theme="light"] .tournament-list-item { background: #ffffff !important; color: #1a1a2e !important; border-color: #d8dce3 !important; } html[data-theme="light"] .header-tabs, html[data-theme="light"] .timeline-hours { background: #eceef2 !important; color: #1a1a2e !important; } /* ---------- Observações ---------- - O chat (chat/index.php) mantém a própria paleta escura estilo WhatsApp por enquanto (o .chat-container cobre a tela inteira). - Tabuleiros de damas NUNCA são alterados pelo tema: as cores das casas/peças são do personalizador do usuário. ------------------------------------ */