/* Modo Escuro - Academia Naha Okinawa */

/* Variáveis CSS para modo escuro */
:root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #b0b0b0;
    --accent-color: #ff0000;
    --accent-hover: #cc0000;
    --border-color: #404040;
    --shadow: rgba(0, 0, 0, 0.5);
}

/* Aplicar modo escuro */
.dark-theme {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Botão de Toggle do Tema */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001 !important;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--shadow);
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
}

.theme-toggle:hover {
    background: var(--accent-hover);
    transform: scale(1.1);
}

/* Header */
.dark-theme .header {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    box-shadow: 0 2px 10px var(--shadow);
}

.dark-theme .logo {
    color: var(--text-primary) !important;
}

.dark-theme .logo span {
    color: var(--accent-color) !important;
}

/* Dropdown */
.dark-theme .dropdown-menu {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    min-width: 250px !important;
    padding: 0.5rem 0 !important;
    overflow: hidden !important;
}

.dark-theme .dropdown-item {
    color: #fff !important;
    font-size: 1.8rem !important;
    padding: 0.8rem 1.5rem !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
}

.dark-theme .dropdown-item:hover {
    background: rgba(255, 0, 0, 0.2) !important;
    color: #fff !important;
}

.dark-theme .dropdown-toggle {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 4px !important;
    color: #fff !important;
    padding: 8px 12px !important;
}

.dark-theme .dropdown-toggle:focus,
.dark-theme .dropdown-toggle:hover {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
}

.dark-theme .dropdown-toggle svg {
    color: #fff !important;
    fill: #fff !important;
}

.dark-theme .dropdown-divider {
    background-color: rgba(255, 255, 255, 0.3) !important;
    margin: 0.8rem 0 !important;
}

/* Seções */
.dark-theme .about {
    background: var(--bg-primary);
}

.dark-theme .about .content span {
    color: var(--accent-color) !important;
}

.dark-theme .about .content h3 {
    color: var(--text-primary) !important;
}

.dark-theme .about .content p {
    color: var(--text-secondary) !important;
}

/* Features */
.dark-theme .features {
    background: var(--bg-secondary);
}

.dark-theme .heading {
    color: var(--text-primary) !important;
}

.dark-theme .heading span {
    color: var(--accent-color) !important;
}

/* Boxes */
.dark-theme .box {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 5px 15px var(--shadow) !important;
}

.dark-theme .box .content h3 {
    color: var(--text-primary) !important;
}

.dark-theme .box .content p {
    color: var(--text-secondary) !important;
}

.dark-theme .box .content strong {
    color: var(--text-primary) !important;
}

/* Botões */
.dark-theme .btn {
    background: var(--accent-color) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 3px 10px var(--shadow) !important;
}

.dark-theme .btn:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-2px) !important;
}

/* Formulários */
.dark-theme .form-group label {
    color: var(--text-primary) !important;
}

.dark-theme .form-group input,
.dark-theme .form-group select,
.dark-theme .form-group textarea {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-theme .form-group input:focus,
.dark-theme .form-group select:focus,
.dark-theme .form-group textarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1) !important;
}

/* Tabelas */
.dark-theme .admin-table {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.dark-theme .admin-table th {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-theme .admin-table td {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-theme .admin-table tr:hover {
    background: var(--bg-secondary) !important;
}

/* Alertas */
.dark-theme .alert-success {
    background: rgba(40, 167, 69, 0.2) !important;
    color: #28a745 !important;
    border: 1px solid #28a745 !important;
}

.dark-theme .alert-danger {
    background: rgba(220, 53, 69, 0.2) !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
}

/* Footer */
.dark-theme .footer {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

.dark-theme .footer h3 {
    color: var(--text-primary) !important;
}

.dark-theme .footer .links {
    color: var(--text-secondary) !important;
}

.dark-theme .footer .links:hover {
    color: var(--accent-color) !important;
}

/* Estilo específico para o email no footer - Modo Escuro */
.dark-theme .footer .box-container .box p a {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 1.5rem !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #ff0000, #cc0000) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 5px !important;
    display: inline-block !important;
    margin-top: 0.5rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.4) !important;
    border: 2px solid #fff !important;
}

.dark-theme .footer .box-container .box p a:hover {
    background: linear-gradient(135deg, #cc0000, #990000) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.6) !important;
    text-decoration: none !important;
    color: #fff !important;
}

/* Swiper */
.dark-theme .swiper-slide {
    background: var(--bg-tertiary) !important;
}

.dark-theme .swiper-pagination-bullet {
    background: var(--text-secondary) !important;
}

.dark-theme .swiper-pagination-bullet-active {
    background: var(--accent-color) !important;
}

/* Modal */
.dark-theme .modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

.dark-theme .modal-content {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Badges */
.dark-theme .badge {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Filtros */
.dark-theme .filter-btn {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
}

.dark-theme .filter-btn:hover,
.dark-theme .filter-btn.active {
    background: var(--accent-color) !important;
    color: white !important;
}

/* Seção de Filtros (Admin) */
.dark-theme .filters-section {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-theme .filters-section label {
    color: var(--text-primary) !important;
}

.dark-theme .filters-section .fas,
.dark-theme .filters-section i {
    color: var(--text-primary) !important;
}

/* Input de mês no modo escuro */
.dark-theme input[type="month"],
.dark-theme input[type="month"]:focus {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-theme input[type="month"]:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1) !important;
}

/* Selects e inputs em filtros */
.dark-theme .filters-section input,
.dark-theme .filters-section select {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-theme .filters-section input:focus,
.dark-theme .filters-section select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1) !important;
}

.dark-theme .filters-section input::placeholder {
    color: var(--text-muted) !important;
}

/* Faturas */
.dark-theme .fatura-item {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-theme .fatura-item .content h3 {
    color: var(--text-primary) !important;
}

.dark-theme .fatura-item .content p {
    color: var(--text-secondary) !important;
}

.dark-theme .fatura-item .content strong {
    color: var(--text-primary) !important;
}

/* No Faturas */
.dark-theme .no-faturas {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.dark-theme .no-faturas h3 {
    color: var(--text-primary) !important;
}

.dark-theme .no-faturas p {
    color: var(--text-secondary) !important;
}

/* Imagens - Garantir visibilidade no modo escuro */
.dark-theme img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

.dark-theme .swiper-slide img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

.dark-theme .box img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

.dark-theme .content img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens com fundo branco - ajustar para modo escuro */
.dark-theme img[src*="logo"],
.dark-theme img[src*="Logo"],
.dark-theme img[src*="LOGO"] {
    filter: brightness(1.2) contrast(1.1) !important;
    opacity: 1 !important;
}

/* Imagens de fundo */
.dark-theme .slide {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.dark-theme .slide img {
    opacity: 1 !important;
    filter: none !important;
}

/* Ícones e imagens pequenas */
.dark-theme .fas,
.dark-theme .far,
.dark-theme .fab {
    color: var(--text-primary) !important;
    opacity: 1 !important;
}

/* Imagens em cards */
.dark-theme .box .image img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens de perfil */
.dark-theme .user-avatar,
.dark-theme .profile-img {
    opacity: 1 !important;
    filter: none !important;
    border: 2px solid var(--border-color) !important;
}

/* Imagens de produtos/serviços */
.dark-theme .product-img,
.dark-theme .service-img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens de fundo específicas */
.dark-theme .home .slide {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
}

.dark-theme .home .slide img {
    opacity: 1 !important;
    filter: none !important;
}

/* Imagens com classes específicas */
.dark-theme .medalhas,
.dark-theme .sobre1,
.dark-theme .sobre2,
.dark-theme .sobre3 {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
}

/* Imagens de fundo em slides específicos */
.dark-theme .swiper-slide.medalhas {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
}

.dark-theme .swiper-slide.sobre1,
.dark-theme .swiper-slide.sobre2,
.dark-theme .swiper-slide.sobre3 {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
}

/* Garantir que imagens de fundo sejam visíveis */
.dark-theme [style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
}

/* Imagens em elementos com background inline */
.dark-theme .slide[style*="background"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
}

/* Garantir que todas as imagens sejam visíveis */
.dark-theme * img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Forçar visibilidade de todas as imagens */
.dark-theme img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens em qualquer container */
.dark-theme div img,
.dark-theme section img,
.dark-theme article img,
.dark-theme aside img,
.dark-theme nav img,
.dark-theme header img,
.dark-theme footer img,
.dark-theme main img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens em elementos específicos do site */
.dark-theme .home img,
.dark-theme .features img,
.dark-theme .pricing img,
.dark-theme .trainers img,
.dark-theme .blogs img,
.dark-theme .review img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens em containers específicos */
.dark-theme .image img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens de fundo em seções */
.dark-theme .features .image img,
.dark-theme .pricing .image img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens em slides */
.dark-theme .swiper-slide .image img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens de treinadores */
.dark-theme .trainer img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens de eventos */
.dark-theme .event img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Correções específicas para imagens problemáticas */
.dark-theme img[src*=".jpg"],
.dark-theme img[src*=".jpeg"],
.dark-theme img[src*=".png"],
.dark-theme img[src*=".gif"],
.dark-theme img[src*=".webp"] {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens com fundo branco - inverter cores se necessário */
.dark-theme img[src*="logo"] {
    filter: brightness(1.1) contrast(1.1) !important;
    opacity: 1 !important;
}

/* Imagens de fundo em slides */
.dark-theme .swiper-slide[style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
}

/* Imagens em divs com background */
.dark-theme div[style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
}

/* Garantir que imagens inline sejam visíveis */
.dark-theme img[style] {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens em elementos específicos */
.dark-theme .box .image,
.dark-theme .content .image,
.dark-theme .slide .image {
    opacity: 1 !important;
    background: transparent !important;
}

.dark-theme .box .image img,
.dark-theme .content .image img,
.dark-theme .slide .image img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Correções específicas para problemas comuns */
.dark-theme img[src] {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens com atributos específicos */
.dark-theme img[alt],
.dark-theme img[title],
.dark-theme img[class],
.dark-theme img[id] {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens em elementos com classes específicas */
.dark-theme .swiper-slide img,
.dark-theme .box img,
.dark-theme .content img,
.dark-theme .image img,
.dark-theme .slide img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Forçar visibilidade de imagens problemáticas */
.dark-theme img[style*="opacity"],
.dark-theme img[style*="filter"],
.dark-theme img[style*="display"],
.dark-theme img[style*="visibility"] {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Imagens em elementos com background */
.dark-theme .slide,
.dark-theme .swiper-slide,
.dark-theme .box {
    position: relative !important;
}

.dark-theme .slide img,
.dark-theme .swiper-slide img,
.dark-theme .box img,
.dark-theme .content img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* Responsividade */
@media (max-width: 768px) {
    .theme-toggle {
        top: 75px !important;
        right: 15px !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 1.3rem !important;
        z-index: 10001 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        pointer-events: auto !important;
        background: var(--accent-color) !important;
    }
    
    .header {
        overflow: visible !important;
    }
    
    .header .dropdown {
        z-index: 10002 !important;
    }
}

@media (max-width: 480px) {
    .theme-toggle {
        top: 70px !important;
        right: 10px !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 1.3rem !important;
        z-index: 10001 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        pointer-events: auto !important;
        background: var(--accent-color) !important;
    }
    
    .header {
        overflow: visible !important;
        position: relative;
    }
    
    .header .dropdown {
        z-index: 10002 !important;
        position: relative !important;
        display: block !important;
        visibility: visible !important;
    }
    
    .header .dropdown-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10002 !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        border-radius: 4px !important;
        padding: 6px 10px !important;
    }
    
    .header .dropdown-toggle:focus,
    .header .dropdown-toggle:hover {
        border: 1px solid rgba(255, 255, 255, 0.7) !important;
    }
}
