/* ============================================
   DARK MODE - SAÚDE NAMPULA
   CSS unificado para todas as páginas
   Versão otimizada baseada nos seus estilos existentes
   ============================================ */

:root {
    --dm-bg-primary: #0f0f1a;
    --dm-bg-secondary: #1a1a2e;
    --dm-bg-card: #16213e;
    --dm-bg-hover: #1e293b;
    --dm-text-primary: #e2e8f0;
    --dm-text-secondary: #94a3b8;
    --dm-text-muted: #6b7280;
    --dm-border: #2d3748;
    --dm-border-light: #1e293b;
    --dm-purple: #a855f7;
    --dm-purple-dark: #7c3aed;
    --dm-green: #059669;
    --dm-green-dark: #047857;
    --dm-red: #ef4444;
    --dm-blue: #3b82f6;
    --dm-orange: #f59e0b;
}

/* ESTILOS GERAIS */
.dark-mode {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

.dark-mode body {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

/* ==================== NAVEGAÇÃO ==================== */
.dark-mode nav {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%) !important;
    border-bottom: 1px solid var(--dm-border);
}

.dark-mode .logo h1 {
    color: var(--dm-text-primary) !important;
}

.dark-mode .nav-links a {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .nav-links a:hover,
.dark-mode .nav-links a.active {
    background: rgba(168, 85, 247, 0.2) !important;
    color: var(--dm-purple) !important;
}

/* ==================== CARDS (Farmácias, Hospitais, Centros) ==================== */
.dark-mode .farmacia-card,
.dark-mode .hospital-card,
.dark-mode .centro-card,
.dark-mode .info-card,
.dark-mode .section-card,
.dark-mode .topic-card,
.dark-mode .avaliacao-item,
.dark-mode .avaliacoes-form,
.dark-mode .emergency-card,
.dark-mode .feature-box,
.dark-mode .content-card,
.dark-mode .detailed-section,
.dark-mode .map-card,
.dark-mode .modal-content,
.dark-mode .login-container,
.dark-mode .stat-card,
.dark-mode .management-section,
.dark-mode .produtos-lista,
.dark-mode .form-produto {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Hover dos cards */
.dark-mode .farmacia-card:hover,
.dark-mode .hospital-card:hover,
.dark-mode .centro-card:hover {
    border-color: var(--dm-purple) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ==================== TÍTULOS E TEXTOS ==================== */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode .farmacia-title h3,
.dark-mode .centro-title h3,
.dark-mode .hospital-title h3,
.dark-mode .page-header h2,
.dark-mode .section-card h2,
.dark-mode .produtos-header h3,
.dark-mode .modal-title {
    color: var(--dm-text-primary) !important;
}

.dark-mode .page-subtitle,
.dark-mode .info-value,
.dark-mode .centro-bairro,
.dark-mode .hospital-type {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .detail-item,
.dark-mode .farmacia-details span,
.dark-mode .centro-details span,
.dark-mode .hospital-details span {
    color: var(--dm-text-secondary) !important;
}

/* ==================== BADGES E STATUS ==================== */
.dark-mode .badge-plantao {
    background: var(--dm-bg-secondary) !important;
    color: var(--dm-green) !important;
    border: 1px solid var(--dm-green);
}

.dark-mode .centro-bairro {
    background: var(--dm-bg-secondary) !important;
    color: var(--dm-green) !important;
}

.dark-mode .status-badge {
    background: var(--dm-bg-secondary) !important;
}

.dark-mode .service-tag,
.dark-mode .feature-tag {
    background: var(--dm-bg-secondary) !important;
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border) !important;
}

/* ==================== SERVIÇOS E LISTAS ==================== */
.dark-mode .farmacia-services,
.dark-mode .services-list,
.dark-mode .features {
    background: var(--dm-bg-secondary) !important;
}

.dark-mode .farmacia-services p,
.dark-mode .services-list p {
    color: var(--dm-purple) !important;
}

.dark-mode .farmacia-services li,
.dark-mode .services-list li {
    color: var(--dm-text-secondary) !important;
    border-bottom-color: var(--dm-border) !important;
}

/* ==================== BOTÕES ==================== */
.dark-mode .medicamentos-btn,
.dark-mode .btn-medicamentos,
.dark-mode .btn-salvar,
.dark-mode .btn-add {
    background: var(--dm-green) !important;
}

.dark-mode .medicamentos-btn:hover,
.dark-mode .btn-medicamentos:hover,
.dark-mode .btn-salvar:hover,
.dark-mode .btn-add:hover {
    background: var(--dm-green-dark) !important;
}

.dark-mode .details-btn,
.dark-mode .info-btn,
.dark-mode .btn-login,
.dark-mode .btn-cadastrar,
.dark-mode .btn-submit {
    background: var(--dm-purple) !important;
}

.dark-mode .details-btn:hover,
.dark-mode .info-btn:hover,
.dark-mode .btn-login:hover,
.dark-mode .btn-cadastrar:hover,
.dark-mode .btn-submit:hover {
    background: var(--dm-purple-dark) !important;
}

.dark-mode .directions-btn,
.dark-mode .btn-mapa {
    background: var(--dm-bg-secondary) !important;
    border: 1px solid var(--dm-blue);
    color: var(--dm-blue) !important;
}

.dark-mode .waze-btn {
    background: var(--dm-bg-secondary) !important;
    border: 1px solid #33CCFF;
    color: #33CCFF !important;
}

.dark-mode .directions-btn:hover {
    background: var(--dm-blue) !important;
    color: white !important;
}

.dark-mode .waze-btn:hover {
    background: #33CCFF !important;
    color: white !important;
}

.dark-mode .btn-ligar,
.dark-mode .btn-back {
    background: var(--dm-bg-secondary) !important;
    border: 1px solid var(--dm-green);
    color: var(--dm-green) !important;
}

.dark-mode .btn-ligar:hover,
.dark-mode .btn-back:hover {
    background: var(--dm-green) !important;
    color: white !important;
}

.dark-mode .btn-cancelar,
.dark-mode .btn-delete {
    background: var(--dm-red) !important;
    color: white !important;
}

.dark-mode .btn-cancelar:hover,
.dark-mode .btn-delete:hover {
    background: #b91c1c !important;
}

.dark-mode .btn-edit {
    background: var(--dm-blue) !important;
    color: white !important;
}

/* ==================== FILTROS E FORMULÁRIOS ==================== */
.dark-mode .filter-section,
.dark-mode .barra-busca {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

.dark-mode .filter-select,
.dark-mode .barra-busca input,
.dark-mode input,
.dark-mode select,
.dark-mode textarea,
.dark-mode .form-group input,
.dark-mode .form-group select,
.dark-mode .form-group textarea,
.dark-mode #filtroCategoria {
    background: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

.dark-mode .filter-select:focus,
.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--dm-purple) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
}

.dark-mode .filter-label,
.dark-mode .form-group label,
.dark-mode .campo-form label {
    color: var(--dm-text-secondary) !important;
}

/* ==================== TABELAS ==================== */
.dark-mode table th {
    background: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
    border-bottom-color: var(--dm-border) !important;
}

.dark-mode table td {
    background: var(--dm-bg-card) !important;
    color: var(--dm-text-secondary) !important;
    border-bottom-color: var(--dm-border) !important;
}

.dark-mode table tr:hover td {
    background: var(--dm-bg-hover) !important;
}

/* ==================== AVALIAÇÕES ==================== */
.dark-mode .avaliacoes-stats {
    background: linear-gradient(135deg, var(--dm-purple) 0%, var(--dm-purple-dark) 100%) !important;
}

.dark-mode .avaliacao-resposta {
    background: rgba(5, 150, 105, 0.1) !important;
    border-left-color: var(--dm-green) !important;
}

.dark-mode .resposta-header {
    color: var(--dm-green) !important;
}

/* ==================== MODAL ==================== */
.dark-mode .modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

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

/* ==================== INFO BANNER ==================== */
.dark-mode .info-banner {
    background: linear-gradient(135deg, var(--dm-purple) 0%, var(--dm-purple-dark) 100%) !important;
}

.dark-mode .alert-banner {
    background: linear-gradient(135deg, #7f1a1a 0%, #991b1b 100%) !important;
}

/* ==================== TIPS E CONTATOS ==================== */
.dark-mode .tips-section,
.dark-mode .hospital-contacts {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-orange) !important;
}

.dark-mode .tip-item,
.dark-mode .hospital-item {
    background: var(--dm-bg-secondary) !important;
    border-left-color: var(--dm-orange) !important;
}

.dark-mode .tip-item h4,
.dark-mode .hospital-info h4 {
    color: var(--dm-text-primary) !important;
}

.dark-mode .tip-item p,
.dark-mode .hospital-info p {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .hospital-phone {
    color: var(--dm-purple) !important;
}

/* ==================== PÁGINA SOBRE ==================== */
.dark-mode .hero-about {
    background: linear-gradient(135deg, var(--dm-bg-secondary) 0%, var(--dm-bg-card) 100%) !important;
}

.dark-mode .vision-section {
    background: linear-gradient(135deg, #1e3a8a 0%, var(--dm-purple) 100%) !important;
}

.dark-mode .stat-box {
    background: linear-gradient(135deg, var(--dm-green) 0%, var(--dm-green-dark) 100%) !important;
}

.dark-mode .contact-section {
    background: var(--dm-bg-secondary) !important;
}

.dark-mode .contact-item {
    background: var(--dm-bg-card) !important;
}

.dark-mode .contact-info p {
    color: var(--dm-purple) !important;
}

/* ==================== ADMIN PANEL ==================== */
.dark-mode .admin-header {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%) !important;
    border-bottom-color: var(--dm-border) !important;
}

.dark-mode .stat-value {
    color: var(--dm-purple) !important;
}

.dark-mode .tab {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .tab.active {
    color: var(--dm-green) !important;
    border-bottom-color: var(--dm-green) !important;
}

.dark-mode .tabs .tab.active {
    background: var(--dm-purple) !important;
    color: white !important;
}

/* ==================== ÍCONES E IMAGENS ==================== */
.dark-mode .detail-icon img,
.dark-mode .farmacia-icon img,
.dark-mode .centro-icon img,
.dark-mode .hospital-icon img,
.dark-mode .info-card-icon img,
.dark-mode .section-icon img,
.dark-mode .horario-icon img,
.dark-mode .map-icon img {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

/* ==================== FOOTER ==================== */
.dark-mode footer {
    background: #0a0a0f !important;
    border-top: 1px solid var(--dm-border);
}

.dark-mode footer p {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .footer-subtitle {
    color: var(--dm-text-muted) !important;
}

/* ==================== BOTÃO FLUTUANTE DARK MODE ==================== */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--dm-purple);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    z-index: 999;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}

.dark-mode-toggle:hover {
    transform: scale(1.05);
    background: var(--dm-purple-dark);
}

.dark-mode .dark-mode-toggle {
    background: var(--dm-purple);
    color: white;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

/* ==================== LOADING E EMPTY ==================== */
.dark-mode .loading,
.dark-mode .empty-state,
.dark-mode .nenhuma-avaliacao,
.dark-mode .empty-message {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .loading::after {
    border-color: var(--dm-border);
    border-top-color: var(--dm-purple);
}

/* ==================== SCROLLBAR ==================== */
.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-secondary);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dm-purple);
    border-radius: 5px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-purple-dark);
}

/* ==================== RESPONSIVO ==================== */
@media (max-width: 768px) {
    .dark-mode-toggle {
        padding: 10px 16px;
        font-size: 12px;
        bottom: 15px;
        right: 15px;
    }
}