/* dark-mode.css - Estilos para o modo noturno */

/* Variáveis de cores */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --card-bg: #ffffff;
    --border-color: #e9ecef;
    --input-bg: #f8fafc;
    --input-border: #e2e8f0;
    --alert-bg-light: #f8f9fa;
    --timeline-line: #e9ecef;
    --timeline-bullet-bg: #e9ecef;
}

.dark-mode {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --card-bg: #0f172a;
    --border-color: #334155;
    --input-bg: #1e293b;
    --input-border: #475569;
    --alert-bg-light: #1e293b;
    --timeline-line: #334155;
    --timeline-bullet-bg: #334155;
}

/* Aplicação global das variáveis */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: background 0.3s ease;
}

.dark-mode body {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.card {
    background-color: var(--card-bg) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bg-white, .bg-light {
    background-color: var(--card-bg) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

/* Correção para textos em geral */
body, p, span, div, h1, h2, h3, h4, h5, h6, strong, b, .text-dark, .text-muted {
    color: var(--text-primary);
}

.dark-mode p, .dark-mode span, .dark-mode div, .dark-mode strong, .dark-mode b {
    color: var(--text-primary);
}

/* Correção para labels e informações */
.info-label {
    color: var(--text-secondary) !important;
}

.info-value {
    color: var(--text-primary) !important;
}

/* ============================================ */
/* CORREÇÃO ESPECÍFICA PARA OS CARDS DE CONVITE */
/* ============================================ */

/* Garantir que o cabeçalho do card de convite fique SEMPRE BRANCO */
.invite-header,
.invite-header *,
.invite-name,
.invite-name i,
.invite-badge,
.invite-badge i {
    color: white !important;
}

/* Forçar o gradiente e texto branco no cabeçalho */
.invite-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Garantir que em qualquer tema o texto do cabeçalho seja branco */
.dark-mode .invite-header,
.dark-mode .invite-name,
.dark-mode .invite-name i,
.dark-mode .invite-badge,
.dark-mode .invite-badge i {
    color: white !important;
}

/* Fundo do cabeçalho no dark mode mantém o gradiente */
.dark-mode .invite-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* ============================================ */
/* FIM DA CORREÇÃO DOS CARDS DE CONVITE        */
/* ============================================ */

/* CORREÇÃO: Nome do visitante */
.visitante-nome,
#visitanteNome,
.card-body .ms-3 h4 {
    color: #1e293b !important;
}

.dark-mode .visitante-nome,
.dark-mode #visitanteNome,
.dark-mode .card-body .ms-3 h4 {
    color: #f1f5f9 !important;
}

/* Garantir que o texto do CPF e placa também fiquem corretos */
.card-body .ms-3 .text-muted {
    color: #64748b !important;
}

.dark-mode .card-body .ms-3 .text-muted {
    color: #94a3b8 !important;
}

/* CORREÇÃO: Cabeçalho do card principal - SOMENTE O TOPO */
.card-header-custom,
.card-header-custom *,
.bg-gradient-custom,
.bg-gradient-custom * {
    color: white !important;
}

.bg-gradient-custom h5,
.bg-gradient-custom h6,
.bg-gradient-custom small,
.bg-gradient-custom .text-uppercase,
.bg-gradient-custom .opacity-75 {
    color: white !important;
}

.bg-gradient-custom small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-gradient-custom img {
    filter: none !important;
}

/* CORREÇÃO: Cabeçalho do chat - SEMPRE BRANCO */
.chat-header,
.chat-header *,
.chat-header h6,
.chat-header small,
.chat-header .opacity-75 {
    color: white !important;
}

/* CORREÇÃO: Cabeçalho do histórico - SEMPRE BRANCO */
.d-flex.align-items-center.mb-4 h4,
.d-flex.align-items-center.mb-4 p,
.d-flex.align-items-center.mb-4 .text-white,
.d-flex.align-items-center.mb-4 .text-white-50 {
    color: white !important;
}

.history-title,
[class*="text-white"] {
    color: white !important;
}

/* Correção para o texto "por" na timeline */
.timeline-detail {
    color: var(--text-secondary) !important;
}

/* Correção para o texto "Convite criado em" */
.text-muted.small {
    color: var(--text-secondary) !important;
}

.dark-mode .text-muted.small {
    color: #94a3b8 !important;
}

/* Correção para os botões de ação */
.btn-outline-primary, .btn-outline-secondary {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-outline-primary:hover, .btn-outline-secondary:hover {
    color: white;
}

/* Correção para as badges */
.badge {
    color: var(--text-primary) !important;
}

.badge-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Correção para os alerts */
.alert-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

/* Correção para os detalhes da visita */
.row .col-6 .info-label, .row .col-6 .info-value {
    color: var(--text-primary);
}

.dark-mode .row .col-6 .info-label {
    color: var(--text-secondary) !important;
}

.dark-mode .row .col-6 .info-value {
    color: var(--text-primary) !important;
}

/* Correção para o rodapé do card */
.card-footer-custom p {
    color: var(--text-secondary) !important;
}

/* Correção para o QR Code section */
.rounded-4 {
    background: var(--bg-secondary) !important;
}

/* Correção para o alert dentro do card */
.alert {
    background-color: var(--alert-bg-light) !important;
}

/* Ajustes para o chat */
.chat-container {
    background-color: var(--bg-secondary) !important;
}

.chat-messages {
    background-color: var(--bg-secondary) !important;
}

.message-received .message-bubble {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.message-sent .message-bubble {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.chat-footer {
    background-color: var(--card-bg) !important;
    border-top-color: var(--border-color) !important;
}

.chat-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
}

/* Botão de modo noturno */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: scale(1.05);
}

.dark-mode .dark-mode-toggle {
    background: #1e293b;
    color: #fbbf24;
}

.dark-mode-toggle i {
    width: 24px;
    height: 24px;
}

/* Ajustes para cards e containers */
.card-header-custom {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
}

.dark-mode .card-header-custom {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 100%) !important;
}

/* Ajustes para a timeline */
.timeline::before {
    background: var(--timeline-line) !important;
}

.timeline-sm::before {
    background: var(--timeline-line) !important;
}

.timeline-sm-indicator {
    box-shadow: 0 0 0 2px var(--timeline-bullet-bg) !important;
}

.timeline-icon {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Tabela de resultados */
.table {
    color: var(--text-primary) !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.table-striped>tbody>tr:nth-of-type(even)>* {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Botões no modo escuro */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46a0 100%);
    transform: translateY(-2px);
}

.dark-mode .btn-primary {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46a0 100%);
}

/* Links */
a {
    color: #667eea;
}

.dark-mode a {
    color: #8b9dff;
}

/* Modal */
.modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    border-bottom-color: var(--border-color) !important;
}

.modal-footer {
    border-top-color: var(--border-color) !important;
}

/* CORREÇÕES ESPECÍFICAS PARA O INDEX.PHP (RAIZ) */
.dark-mode .info-label {
    color: #94a3b8 !important;
}

.dark-mode .info-value {
    color: #f1f5f9 !important;
    font-weight: 600;
}

.dark-mode .text-muted {
    color: #94a3b8 !important;
}

.dark-mode .bg-white,
.dark-mode .bg-light {
    background-color: var(--card-bg) !important;
}

.dark-mode .alert {
    background-color: var(--alert-bg-light) !important;
}

.dark-mode .alert-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

.dark-mode .alert-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

.dark-mode .alert-info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

/* Correção para o texto dentro do alert */
.dark-mode .alert strong,
.dark-mode .alert small,
.dark-mode .alert p {
    color: inherit !important;
}

/* Correção para o divisor */
.dark-mode hr {
    border-color: var(--border-color) !important;
}

/* Correção para os ícones dentro do texto */
.dark-mode .info-label i,
.dark-mode .info-value i,
.dark-mode .text-muted i {
    color: inherit !important;
}