/* ====================================================
   ARQUIVO: tema.css
   DESCRIÇÃO: Ajustes globais de contraste do modo claro/escuro do Nodo
   USO: carregar depois do CSS específico da página
   ==================================================== */

:root {
    --nodo-light-bg-1: #f8fbff;
    --nodo-light-bg-2: #eaf6ff;
    --nodo-light-bg-3: #dbeafe;
    --nodo-light-surface: rgba(255, 255, 255, 0.88);
    --nodo-light-surface-strong: rgba(255, 255, 255, 0.96);
    --nodo-light-surface-soft: rgba(255, 255, 255, 0.68);
    --nodo-light-border: rgba(37, 99, 235, 0.22);
    --nodo-light-border-strong: rgba(37, 99, 235, 0.38);
    --nodo-light-text: #0f172a;
    --nodo-light-text-secondary: #334155;
    --nodo-light-text-muted: #64748b;
    --nodo-light-primary: #2563eb;
    --nodo-light-primary-strong: #1d4ed8;
    --nodo-light-cyan: #007c89;
    --nodo-light-success: #15803d;
    --nodo-light-warning: #b45309;
    --nodo-light-danger: #dc2626;
    --nodo-light-shadow: 0 16px 42px rgba(15, 23, 42, 0.12);
}

/* ====================================================
   BASE DO MODO CLARO
   ==================================================== */

body.light-mode {
    background: linear-gradient(135deg, var(--nodo-light-bg-1) 0%, var(--nodo-light-bg-2) 52%, var(--nodo-light-bg-3) 100%) !important;
    color: var(--nodo-light-text) !important;
}

body.light-mode::before {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.10) 0%, transparent 52%) !important;
}

body.light-mode::after {
    opacity: 0.55;
}

body.light-mode .glow-effect {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.14) 0%, transparent 72%) !important;
}

/* ====================================================
   TIPOGRAFIA GLOBAL
   Corrige textos que ainda permanecem brancos sobre fundo claro.
   ==================================================== */

body.light-mode :where(
    p,
    li,
    label,
    small,
    strong,
    .page-subtitle,
    .welcome-subtitle,
    .card-description,
    .evento-descricao,
    .vaga-descricao,
    .inscricao-evento,
    .inscricao-data,
    .acao-descricao,
    .pdf-tamanho,
    .upload-pdf-hint,
    .prestador-categorias,
    .placeholder,
    .sem-conversas,
    .sem-mensagens,
    .chat-vazio,
    .loading,
    .nf-preview p,
    .nf-detalhes p,
    .modal-submensagem,
    .termos-conteudo p,
    .conversa-ultima-mensagem,
    .conversa-horario
) {
    color: var(--nodo-light-text-secondary) !important;
}

body.light-mode :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .perfil-nome,
    .section-title,
    .evento-titulo,
    .vaga-titulo,
    .vaga-item-titulo,
    .evento-perfil-titulo,
    .inscricao-titulo,
    .acao-titulo,
    .pdf-nome,
    .prestador-nome,
    .chat-nome,
    .conversa-nome,
    .conversas-titulo,
    .sem-vagas-titulo,
    .modal-mensagem,
    .nf-titulo,
    .info-value,
    .detalhe-value
) {
    color: var(--nodo-light-text) !important;
}

body.light-mode :where(.page-title, .welcome-title, .search-hero h1) {
    background: linear-gradient(135deg, #0f172a, #2563eb) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.light-mode .welcome-title span {
    color: var(--nodo-light-primary) !important;
    -webkit-text-fill-color: var(--nodo-light-primary) !important;
}

body.light-mode :where(.info-label, .detalhe-label, .evento-data, .evento-local, .evento-perfil-data, .evento-perfil-local, .evento-perfil-vagas, .vaga-item-evento, .termos-data) {
    color: var(--nodo-light-primary) !important;
}

/* Mantém elementos propositalmente brancos. */
body.light-mode :where(
    .logo-n span,
    .btn-logout,
    .btn-candidatar,
    .modal-btn-confirmar,
    .modal-btn-primary,
    .upload-pdf-btn,
    .input-enviar,
    .btn-primary,
    .conversa-nao-lida,
    .nodo-notificacao-badge
) {
    color: #ffffff !important;
}

/* ====================================================
   CABEÇALHO, MENU E RODAPÉ
   ==================================================== */

body.light-mode header,
body.light-mode footer {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: var(--nodo-light-border) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10) !important;
}

body.light-mode .nav-link,
body.light-mode .footer-container,
body.light-mode .footer-links a,
body.light-mode .theme-text {
    color: var(--nodo-light-text-secondary) !important;
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active,
body.light-mode .footer-links a:hover,
body.light-mode .section-link,
body.light-mode .evento-link,
body.light-mode .evento-perfil-link,
body.light-mode .ver-todos-link,
body.light-mode .categoria-add,
body.light-mode .btn-add-portfolio,
body.light-mode .btn-ver-perfil,
body.light-mode .btn-small,
body.light-mode .modal-fechar {
    color: var(--nodo-light-primary) !important;
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active {
    background: rgba(37, 99, 235, 0.10) !important;
    border-color: var(--nodo-light-border-strong) !important;
}

body.light-mode .theme-toggle,
body.light-mode .btn-trocar-perfil {
    background: rgba(37, 99, 235, 0.10) !important;
    border-color: var(--nodo-light-border-strong) !important;
    color: var(--nodo-light-primary) !important;
}

body.light-mode .theme-toggle:hover,
body.light-mode .btn-trocar-perfil:hover {
    background: rgba(37, 99, 235, 0.16) !important;
}

/* ====================================================
   SUPERFÍCIES / CARDS / PAINÉIS
   ==================================================== */

body.light-mode :where(
    .perfil-card,
    .portfolio-section,
    .eventos-perfil-section,
    .categorias-section,
    .acoes-section,
    .categoria-card,
    .evento-card,
    .vaga-card,
    .inscricao-card,
    .prestador-card,
    .chat-container,
    .conversas-lista,
    .chat-aberto,
    .filtros-section,
    .vaga-item,
    .vaga-item-detalhes,
    .evento-perfil-card,
    .info-card,
    .acao-card,
    .pdf-item,
    .pdf-btn,
    .upload-pdf-area,
    .nf-detalhes,
    .nf-preview,
    .sem-vagas,
    .loading,
    .erro-card,
    .modal-container,
    .modal-mensagem-card,
    .modal-confirmacao-container,
    .search-container,
    .search-bar input,
    .filters select,
    .filters input,
    .result-item,
    .conversa-item,
    .chat-input-area
) {
    background: var(--nodo-light-surface) !important;
    border-color: var(--nodo-light-border) !important;
    color: var(--nodo-light-text) !important;
}

body.light-mode :where(
    .categoria-card:hover,
    .evento-card:hover,
    .vaga-card:hover,
    .inscricao-card:hover,
    .prestador-card:hover,
    .vaga-item:hover,
    .evento-perfil-card:hover,
    .acao-card:hover,
    .info-card:hover,
    .pdf-item:hover,
    .result-item:hover,
    .conversa-item:hover,
    .conversa-item.ativa
) {
    background: var(--nodo-light-surface-strong) !important;
    border-color: var(--nodo-light-border-strong) !important;
    box-shadow: var(--nodo-light-shadow) !important;
}

body.light-mode :where(
    .vaga-info,
    .evento-footer,
    .evento-perfil-footer,
    .conversas-header,
    .conversas-search,
    .chat-header,
    .vaga-item-header,
    .vaga-item-acoes,
    .nf-header,
    .modal-header
) {
    border-color: rgba(37, 99, 235, 0.18) !important;
}

body.light-mode :where(.categoria-tag, .card-count, .perfil-tipo, .conversas-contador, .badge) {
    background: rgba(37, 99, 235, 0.10) !important;
    border-color: rgba(37, 99, 235, 0.22) !important;
    color: var(--nodo-light-primary) !important;
}

/* ====================================================
   FORMULÁRIOS, INPUTS E BUSCAS
   ==================================================== */

body.light-mode :where(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select,
    .form-control,
    .chat-input,
    .search-input,
    .conversas-input,
    .filters input,
    .filters select,
    .search-bar input
) {
    background: #ffffff !important;
    color: var(--nodo-light-text) !important;
    border-color: rgba(37, 99, 235, 0.28) !important;
    box-shadow: none !important;
}

body.light-mode :where(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select,
    .form-control,
    .chat-input,
    .search-input,
    .conversas-input,
    .search-bar input
):focus {
    border-color: var(--nodo-light-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
    outline: none !important;
}

body.light-mode :where(input, textarea, .chat-input, .search-input, .conversas-input)::placeholder {
    color: var(--nodo-light-text-muted) !important;
}

body.light-mode option {
    background: #ffffff !important;
    color: var(--nodo-light-text) !important;
}

body.light-mode input[type="file"] {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(37, 99, 235, 0.30) !important;
    color: var(--nodo-light-text-secondary) !important;
}

body.light-mode input[type="file"]::-webkit-file-upload-button {
    background: rgba(37, 99, 235, 0.10) !important;
    border-color: var(--nodo-light-primary) !important;
    color: var(--nodo-light-primary) !important;
}

/* ====================================================
   BOTÕES E AÇÕES
   ==================================================== */

body.light-mode :where(.btn-small, .btn-ver-perfil, .btn-add-portfolio, .categoria-add, .btn-download, .vaga-btn-detalhes) {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.38) !important;
    color: var(--nodo-light-primary) !important;
}

body.light-mode :where(.btn-small:hover, .btn-ver-perfil:hover, .btn-download:hover, .vaga-btn-detalhes:hover) {
    background: var(--nodo-light-primary) !important;
    color: #ffffff !important;
}

body.light-mode :where(.vaga-btn, .pdf-btn) {
    background: rgba(15, 23, 42, 0.04) !important;
    color: var(--nodo-light-text-secondary) !important;
    border-color: rgba(37, 99, 235, 0.20) !important;
}

body.light-mode .vaga-btn-cancelar {
    color: var(--nodo-light-danger) !important;
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
}

body.light-mode .vaga-btn-chat {
    color: var(--nodo-light-success) !important;
    background: rgba(21, 128, 61, 0.08) !important;
    border-color: rgba(21, 128, 61, 0.25) !important;
}

body.light-mode :where(.vaga-btn-avaliar, .vaga-btn-nota) {
    color: var(--nodo-light-warning) !important;
    background: rgba(180, 83, 9, 0.08) !important;
    border-color: rgba(180, 83, 9, 0.25) !important;
}

/* ====================================================
   STATUS E BADGES
   ==================================================== */

body.light-mode :where(.status-aberta, .status-ativo, .status-contratado) {
    background: rgba(21, 128, 61, 0.12) !important;
    color: var(--nodo-light-success) !important;
    border-color: rgba(21, 128, 61, 0.30) !important;
}

body.light-mode :where(.status-analise, .status-andamento, .status-pausado) {
    background: rgba(180, 83, 9, 0.12) !important;
    color: var(--nodo-light-warning) !important;
    border-color: rgba(180, 83, 9, 0.30) !important;
}

body.light-mode :where(.status-encerrado, .status-recusado) {
    background: rgba(100, 116, 139, 0.14) !important;
    color: #475569 !important;
    border-color: rgba(100, 116, 139, 0.30) !important;
}

body.light-mode :where(.erro-mensagem, .pdf-icon, .acao-logout .acao-icon) {
    color: var(--nodo-light-danger) !important;
}

/* ====================================================
   CHAT
   ==================================================== */

body.light-mode .mensagem-recebida .mensagem-conteudo {
    background: #e0f2fe !important;
    border: 1px solid rgba(37, 99, 235, 0.16) !important;
    color: var(--nodo-light-text) !important;
}

body.light-mode .mensagem-enviada .mensagem-conteudo {
    background: #dbeafe !important;
    border: 1px solid rgba(37, 99, 235, 0.20) !important;
    color: var(--nodo-light-text) !important;
}

body.light-mode .mensagem-conteudo p {
    color: var(--nodo-light-text) !important;
}

body.light-mode .mensagem-horario,
body.light-mode .mensagem-visualizacao {
    color: var(--nodo-light-text-muted) !important;
}

body.light-mode .mensagem-data-separador span,
body.light-mode .mensagem-sistema span {
    background: rgba(37, 99, 235, 0.10) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
    color: var(--nodo-light-text-secondary) !important;
}

body.light-mode .mensagem-anexo {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
    color: var(--nodo-light-text) !important;
}

body.light-mode .mensagem-anexo-tipo {
    background: rgba(37, 99, 235, 0.12) !important;
    color: var(--nodo-light-primary) !important;
}

body.light-mode .chat-status {
    color: var(--nodo-light-success) !important;
}

/* ====================================================
   ÍCONES, IMAGENS E ARQUIVOS
   ==================================================== */

body.light-mode :where(.card-icon, .upload-pdf-icon, .sem-vagas-icon) {
    filter: drop-shadow(0 0 12px rgba(37, 99, 235, 0.30)) !important;
}

body.light-mode .nf-icon {
    color: var(--nodo-light-danger) !important;
    filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.22)) !important;
}

/* Use esta classe em ícones/imagens brancos que desaparecem no modo claro. */
body.light-mode :where(.icone-branco, .icone-branco img, img.icone-branco) {
    filter: invert(1) hue-rotate(180deg) contrast(1.08) !important;
}

/* Fotos de perfil e imagens reais não devem receber inversão. */
body.light-mode :where(.perfil-foto img, .prestador-foto img, .avatar img, .conversa-avatar img, .chat-avatar img) {
    filter: none !important;
}

/* ====================================================
   MODAIS
   ==================================================== */

body.light-mode .modal-overlay,
body.light-mode .modal-mensagem-overlay,
body.light-mode .modal-confirmacao-overlay {
    background: rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(6px) !important;
}

body.light-mode :where(.modal-container, .modal-mensagem-card, .modal-confirmacao-container) {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--nodo-light-border-strong) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20) !important;
}

body.light-mode :where(.modal-titulo, .modal-mensagem-header h3, .modal-confirmacao-header h3, .termos-conteudo h3) {
    color: var(--nodo-light-primary) !important;
}

body.light-mode :where(.modal-corpo, .modal-mensagem-body, .modal-confirmacao-corpo) {
    color: var(--nodo-light-text) !important;
}

body.light-mode .modal-btn-cancelar {
    color: var(--nodo-light-text-secondary) !important;
    border-color: rgba(37, 99, 235, 0.30) !important;
}

/* ====================================================
   TABELAS / LISTAS / RESULTADOS
   ==================================================== */

body.light-mode :where(table, th, td) {
    color: var(--nodo-light-text) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
}

body.light-mode th {
    background: rgba(37, 99, 235, 0.10) !important;
    color: var(--nodo-light-primary) !important;
}

body.light-mode .result-item {
    border-bottom-color: rgba(37, 99, 235, 0.14) !important;
}

body.light-mode .result-item:hover {
    background: rgba(37, 99, 235, 0.08) !important;
}

/* ====================================================
   SCROLLBARS
   ==================================================== */

body.light-mode ::-webkit-scrollbar-track {
    background: rgba(37, 99, 235, 0.06) !important;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
}



@media (max-width: 768px) {
    body.light-mode header {
        background: rgba(255, 255, 255, 0.94) !important;
    }

    body.light-mode :where(.nav-logado, .search-container, .chat-input-area) {
        background: rgba(255, 255, 255, 0.88) !important;
    }
}