/* Estilos gerais */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

/* Aplicar dark-mode ao html para evitar o flash de tema claro */
html.dark-mode,
.dark-mode body {
    background-color: #121212;
    color: #e0e0e0;
}

/* Estilos do cabeçalho */
header {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}

header .fs-4 {
    color: #0d6efd;
    font-weight: 600;
}

/* Estilos dos cards */
.bg-dark {
    background-color: #0d6efd !important;
}

.btn-outline-light:hover {
    background-color: #0a58ca;
    border-color: #0a58ca;
}

/* Estilo para filtros ativos */
select.filter-active {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    background-color: rgba(13, 110, 253, 0.05);
}

/* Classes personalizadas para cores de status */
.bg-custom-purple {
    background-color: #8A70C2 !important;
    color: white !important;
}

.bg-custom-pink {
    background-color: #E57373 !important;
    color: white !important;
}

.bg-custom-blue {
    background-color: #64B5F6 !important;
    color: white !important;
}

/* Estilos do footer */
footer {
    padding: 20px 0;
    text-align: center;
    transition: border-color 0.3s;
}

/* Responsividade */
@media (max-width: 768px) {
    .col-md-6 {
        margin-bottom: 20px;
    }
}

/* Animações */
.nav-link {
    transition: all 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-2px);
}

/* Utilitários */
.rounded-custom {
    border-radius: 10px;
}

.shadow-custom {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilo específico para o botão de pasta em videos.html */
.btn-group a.btn-folder {
    background-color: #ffc107; /* Fundo amarelo (Bootstrap warning color) */
    color: #000; /* Ícone preto */
    border: 1px solid #e0a800; /* Borda um pouco mais escura */
}

.btn-group a.btn-folder:hover,
.btn-group a.btn-folder:focus {
    background-color: #e0a800; /* Fundo mais escuro no hover/focus */
    color: #000; /* Mantém ícone preto */
    border-color: #c99200;
}

/* Estilos de animação para o botão de atualização */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

#refresh-data:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* Melhorias para o spinner no botão refresh */
#refresh-data .spinner-border-sm {
    vertical-align: middle;
    margin-top: -2px;
    border-color: white;
    border-right-color: transparent;
}

/* Tema Escuro */
.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

.dark-mode header {
    background-color: #1e1e1e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-bottom-color: #333;
}

.dark-mode header .fs-4 {
    color: #61a0ff;
}

.dark-mode .nav-pills .nav-link {
    color: #e0e0e0;
}

.dark-mode .nav-pills .nav-link.active {
    background-color: #0d6efd;
    color: white;
}

.dark-mode .card {
    background-color: #1e1e1e;
    border-color: #333;
}

.dark-mode .card-header {
    background-color: #252525;
    border-color: #333;
}

.dark-mode .list-group-item {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}

.dark-mode .list-group-item.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.dark-mode .border-bottom {
    border-color: #333 !important;
}

.dark-mode .bg-light {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
}

.dark-mode .text-dark {
    color: #e0e0e0 !important;
}

.dark-mode .table {
    color: #e0e0e0;
    background-color: #1e1e1e;
    border-color: #333;
}

.dark-mode .table th,
.dark-mode .table td {
    border-color: #444;
    background-color: transparent;
    color: #e0e0e0;
    vertical-align: middle;
}

.dark-mode .table thead th {
    background-color: #252525;
    border-bottom-width: 2px;
    border-bottom-color: #555;
    color: #f0f0f0;
}

.dark-mode .table-hover tbody tr {
    transition: background-color 0.15s ease-in-out;
}

.dark-mode .table-hover tbody tr:hover td {
    background-color: #2c2c2c;
    color: #f5f5f5;
}

.dark-mode .table-responsive {
    background-color: transparent;
    border: none;
}

.dark-mode .card-footer {
    background-color: #1e1e1e;
    border-top-color: #333;
}

.dark-mode .form-control, 
.dark-mode .form-select {
    background-color: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

.dark-mode .form-control:focus, 
.dark-mode .form-select:focus {
    background-color: #2a2a2a;
    border-color: #0d6efd;
    color: #e0e0e0;
}

.dark-mode .form-check-input {
    background-color: #2a2a2a;
    border-color: #444;
}

.dark-mode .form-text {
    color: #aaa;
}

.dark-mode .modal-content {
    background-color: #1e1e1e;
    border-color: #333;
}

.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-mode footer {
    border-top-color: #333;
}

.dark-mode .border {
    border-color: #333 !important;
}

/* Estilos para o botão de alternar tema */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle:focus {
    outline: none;
}

.theme-toggle i {
    transition: transform 0.3s ease;
}

.dark-mode .theme-toggle i.bi-sun {
    display: inline-block;
}

.dark-mode .theme-toggle i.bi-moon {
    display: none;
}

.theme-toggle i.bi-sun {
    display: none;
}

.theme-toggle i.bi-moon {
    display: inline-block;
}

/* Ajuste de contraste para badges padrão */
.dark-mode .badge.bg-primary {
    color: #fff !important;
}
.dark-mode .badge.bg-secondary {
    color: #fff !important;
}
.dark-mode .badge.bg-success {
    color: #fff !important;
}
.dark-mode .badge.bg-danger {
    color: #fff !important;
}
.dark-mode .badge.bg-warning {
    color: #000 !important;
}
.dark-mode .badge.bg-info {
    color: #000 !important;
}
.dark-mode .badge.bg-light {
    color: #000 !important;
}
.dark-mode .badge.bg-dark {
    color: #fff !important;
}

/* Manter cores personalizadas */
.dark-mode .bg-custom-purple,
.dark-mode .bg-custom-pink,
.dark-mode .bg-custom-blue {
    color: white !important;
}

/* ============================================================================
   MONETIZAÇÃO & ANALYTICS - Dark Mode Overrides
   ============================================================================ */

/* Performance por Janela - Card 3v (Amarelo) */
.dark-mode #analytics-content .border.rounded[style*="#fef9c3"] {
    background: #3f3f20 !important; /* Amarelo escuro */
    border-color: #5a5a2e !important;
}

.dark-mode #analytics-content [style*="color: #854d0e"] {
    color: #fcd34d !important; /* Amarelo claro para leitura */
}

/* Performance por Janela - Card 7v (Azul) */
.dark-mode #analytics-content .border.rounded[style*="#dbeafe"] {
    background: #1e3a5f !important; /* Azul escuro */
    border-color: #2563eb !important;
}

.dark-mode #analytics-content [style*="color: #1e40af"] {
    color: #93c5fd !important; /* Azul claro para leitura */
}

/* Performance por Janela - Cards 15v e 30v (Cinza) */
.dark-mode #analytics-content .border.rounded[style*="#f3f4f6"] {
    background: #2a2a2a !important; /* Cinza escuro */
    border-color: #444 !important;
}

/* Tendências - Card Views (Azul) - Background mais suave */
.dark-mode #trend-revenue {
    background: #1a2842 !important; /* Azul muito escuro e dessaturado */
    border-color: #3b82f6 !important;
}

.dark-mode #trend-revenue [style*="color: #1e40af"] {
    color: #93c5fd !important;
}

.dark-mode #trend-revenue .bi-eye {
    color: #60a5fa !important;
    opacity: 0.4 !important;
}

/* Cores de tendência no card VIEWS - tons mais naturais */
.dark-mode #trend-revenue .text-danger {
    color: #f87171 !important; /* Vermelho médio */
}

.dark-mode #trend-revenue .text-success {
    color: #4ade80 !important; /* Verde médio */
}

.dark-mode #trend-revenue .text-secondary {
    color: #cbd5e1 !important;
}

/* Tendências - Card CTR (Amarelo) - Background mais suave */
.dark-mode #trend-rpm {
    background: #2a2a18 !important; /* Amarelo muito escuro e dessaturado */
    border-color: #ca8a04 !important;
}

.dark-mode #trend-rpm [style*="color: #854d0e"] {
    color: #fcd34d !important;
}

.dark-mode #trend-rpm .bi-cursor {
    color: #fbbf24 !important;
    opacity: 0.4 !important;
}

/* Cores de tendência no card CTR - tons mais naturais */
.dark-mode #trend-rpm .text-danger {
    color: #f87171 !important; /* Vermelho médio */
}

.dark-mode #trend-rpm .text-success {
    color: #4ade80 !important; /* Verde médio */
}

.dark-mode #trend-rpm .text-secondary {
    color: #cbd5e1 !important;
}

/* Tendências - Card Monetização (Verde) - Background mais suave */
.dark-mode #trend-monetization {
    background: #1a2e22 !important; /* Verde muito escuro e dessaturado */
    border-color: #16a34a !important;
}

.dark-mode #trend-monetization [style*="color: #166534"] {
    color: #86efac !important;
}

.dark-mode #trend-monetization .bi-cash-stack {
    color: #34d399 !important;
    opacity: 0.4 !important;
}

/* Cores de tendência no card MONETIZAÇÃO - tons mais naturais */
.dark-mode #trend-monetization .text-danger {
    color: #f87171 !important; /* Vermelho médio */
}

.dark-mode #trend-monetization .text-success {
    color: #6ee7b7 !important; /* Verde claro (pra não confundir com o fundo verde) */
}

.dark-mode #trend-monetization .text-secondary {
    color: #cbd5e1 !important;
}

/* Labels e textos auxiliares em cards coloridos */
.dark-mode #analytics-content .text-muted {
    color: #d1d5db !important;
}

/* Badges em cards de performance */
.dark-mode #analytics-content .badge.bg-warning {
    background-color: #ca8a04 !important;
    color: #fef3c7 !important;
}

.dark-mode #analytics-content .badge.bg-primary {
    background-color: #2563eb !important;
    color: #dbeafe !important;
}

/* Divisores verticais (vr) */
.dark-mode #analytics-content .vr {
    opacity: 0.3;
    background-color: #666 !important;
}