/**
 * Tema Global - Claro/Escuro
 * Aplica em todo o site (login, registro, dashboard, etc)
 */

/* Variáveis CSS para tema claro */
:root,
[data-theme="light"],
html[data-theme="light"],
body[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --border-color: #dee2e6;
    --shadow: rgba(0, 0, 0, 0.1);
    --accent-color: #feb405;
    --accent-hover: #e5a429;
    
    /* Sobrescrever variáveis do styles.css */
    --default-body-bg-color: #ffffff;
    --default-background: #f7f8f9;
    --menu-bg: #ffffff;
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --form-control-bg: #ffffff;
    --default-text-color: #212529;
    --menu-prime-color: #212529;
    --header-prime-color: #212529;
    --text-muted: #6c757d;
    --default-border: #dee2e6;
    --menu-border-color: #dee2e6;
    --header-border-color: #dee2e6;
    --bootstrap-card-border: #dee2e6;
    --input-border: #dee2e6;
    --list-hover-focus-bg: #f5f6f7;
    --bg-light-blue: #f4f4f4;
    --text-dark: #1a237e;
    --text-medium: #284065;
}

/* Variáveis CSS para tema escuro - Estilo Dashboard Moderno */
[data-theme="dark"],
[data-theme-mode="dark"],
html[data-theme="dark"],
html[data-theme-mode="dark"],
body[data-theme="dark"],
body[data-theme-mode="dark"] {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #252525;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #999999;
    --border-color: #333333;
    --shadow: rgba(0, 0, 0, 0.8);
    --accent-color: #fab62c;
    --accent-hover: #e5a429;
    
    /* Sobrescrever variáveis do styles.css */
    --default-body-bg-color: #0f0f0f;
    --default-background: #1a1a1a;
    --menu-bg: #1a1a1a;
    --header-bg: #1a1a1a;
    --card-bg: #1a1a1a;
    --form-control-bg: #1a1a1a;
    --default-text-color: #ffffff;
    --menu-prime-color: #ffffff;
    --header-prime-color: #ffffff;
    --text-muted: #999999;
    --default-border: #333333;
    --menu-border-color: #333333;
    --header-border-color: #333333;
    --bootstrap-card-border: #333333;
    --input-border: #333333;
    --list-hover-focus-bg: #252525;
    --bg-light-blue: #0f0f0f;
    --text-dark: #ffffff;
    --text-medium: #e0e0e0;
}

/* Aplicar tema ao body e html - COM !important para sobrescrever */
body,
html,
body[data-theme],
html[data-theme] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main content e containers principais */
.main-content,
.page,
.page-wrapper,
.app-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Cards e containers - COM !important */
.card,
.card-body,
.card-header,
.card-footer,
.container,
.container-fluid,
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.dropdown-menu,
.form-control,
.input-group-text,
.white-container,
.custom-card {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Cards no modo escuro - estilo dashboard */
[data-theme="dark"] .card,
[data-theme-mode="dark"] .card,
html[data-theme="dark"] .card,
html[data-theme-mode="dark"] .card {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .card-header,
[data-theme-mode="dark"] .card-header,
html[data-theme="dark"] .card-header,
html[data-theme-mode="dark"] .card-header {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333333 !important;
    color: #ffffff !important;
}

/* Textos */
h1, h2, h3, h4, h5, h6,
p, span, label, a {
    color: var(--text-primary);
}

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

/* Todos os textos no modo escuro - FORÇAR BRANCO */
[data-theme="dark"] *,
[data-theme-mode="dark"] *,
html[data-theme="dark"] *,
html[data-theme-mode="dark"] * {
    color: #ffffff !important;
}

/* Exceções - manter cores específicas */
[data-theme="dark"] .text-danger,
[data-theme-mode="dark"] .text-danger,
[data-theme="dark"] .text-success,
[data-theme-mode="dark"] .text-success,
[data-theme="dark"] .text-warning,
[data-theme-mode="dark"] .text-warning,
[data-theme="dark"] .text-primary,
[data-theme-mode="dark"] .text-primary,
[data-theme="dark"] .btn,
[data-theme-mode="dark"] .btn,
[data-theme="dark"] .badge,
[data-theme-mode="dark"] .badge {
    color: inherit !important;
}

/* Valores monetários e números */
[data-theme="dark"] .fs-25,
[data-theme-mode="dark"] .fs-25,
[data-theme="dark"] .fw-bold,
[data-theme-mode="dark"] .fw-bold,
[data-theme="dark"] [id*="balance"],
[data-theme-mode="dark"] [id*="balance"],
html[data-theme="dark"] .fs-25,
html[data-theme-mode="dark"] .fs-25 {
    color: #ffffff !important;
}

/* Inputs e formulários */
input, textarea, select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

input:focus, textarea:focus, select:focus {
    background-color: var(--bg-primary);
    border-color: var(--accent-color);
    color: var(--text-primary);
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted);
}

/* Botões */
.btn-primary,
.btn-success,
.btn-warning {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #1a1a1a;
}

.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Sidebar - COM !important */
.app-sidebar,
.sidebar,
.sidebar-menu,
.sidebar-menu ul,
.sidebar-menu li {
    background-color: var(--bg-secondary) !important;
    border-right-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.sidebar-menu a,
.sidebar-menu li a,
.sidebar-menu .menu-item a {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

.sidebar-menu a:hover,
.sidebar-menu li:hover,
.sidebar-menu .menu-item:hover,
.sidebar-menu a.active {
    background-color: var(--bg-tertiary) !important;
    color: var(--accent-color) !important;
}

/* Sidebar menu - textos brancos no modo escuro */
[data-theme="dark"] .side-menu__label,
[data-theme-mode="dark"] .side-menu__label,
[data-theme="dark"] .side-menu__item,
[data-theme-mode="dark"] .side-menu__item,
html[data-theme="dark"] .side-menu__label,
html[data-theme-mode="dark"] .side-menu__label,
html[data-theme="dark"] .side-menu__item,
html[data-theme-mode="dark"] .side-menu__item {
    color: #ffffff !important;
}

[data-theme="dark"] .side-menu__item:hover,
[data-theme-mode="dark"] .side-menu__item:hover,
html[data-theme="dark"] .side-menu__item:hover,
html[data-theme-mode="dark"] .side-menu__item:hover {
    color: #fab62c !important;
}

/* Card Minha Carteira */
[data-theme="dark"] .carteira-label,
[data-theme-mode="dark"] .carteira-label,
[data-theme="dark"] .carteira-valor,
[data-theme-mode="dark"] .carteira-valor,
html[data-theme="dark"] .carteira-label,
html[data-theme-mode="dark"] .carteira-label,
html[data-theme="dark"] .carteira-valor,
html[data-theme-mode="dark"] .carteira-valor {
    color: #ffffff !important;
}

/* Títulos dos cards de estatísticas */
[data-theme="dark"] .fs-15,
[data-theme-mode="dark"] .fs-15,
[data-theme="dark"] .card-title,
[data-theme-mode="dark"] .card-title,
html[data-theme="dark"] .fs-15,
html[data-theme-mode="dark"] .fs-15,
html[data-theme="dark"] .card-title,
html[data-theme-mode="dark"] .card-title {
    color: #ffffff !important;
}

/* Boas Vindas e títulos principais */
[data-theme="dark"] .fw-medium,
[data-theme-mode="dark"] .fw-medium,
[data-theme="dark"] h1,
[data-theme-mode="dark"] h1,
[data-theme="dark"] h2,
[data-theme-mode="dark"] h2,
[data-theme="dark"] h3,
[data-theme-mode="dark"] h3,
html[data-theme="dark"] .fw-medium,
html[data-theme-mode="dark"] .fw-medium {
    color: #ffffff !important;
}

/* Header e logo */
[data-theme="dark"] .header-logo,
[data-theme-mode="dark"] .header-logo,
[data-theme="dark"] .main-sidebar-header,
[data-theme-mode="dark"] .main-sidebar-header,
html[data-theme="dark"] .header-logo,
html[data-theme-mode="dark"] .header-logo {
    color: #ffffff !important;
}

/* Botões de ação e cards clicáveis */
[data-theme="dark"] .card-body a,
[data-theme-mode="dark"] .card-body a,
[data-theme="dark"] .card-body .btn,
[data-theme-mode="dark"] .card-body .btn,
html[data-theme="dark"] .card-body a,
html[data-theme-mode="dark"] .card-body a {
    color: #ffffff !important;
}

/* Textos de conversão e estatísticas */
[data-theme="dark"] .stat-progress-label,
[data-theme-mode="dark"] .stat-progress-label,
[data-theme="dark"] .stat-progress-label span,
[data-theme-mode="dark"] .stat-progress-label span,
html[data-theme="dark"] .stat-progress-label,
html[data-theme-mode="dark"] .stat-progress-label {
    color: #ffffff !important;
}

/* Tabelas e transações */
[data-theme="dark"] .table td,
[data-theme-mode="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme-mode="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme-mode="dark"] .table td {
    color: #ffffff !important;
}

/* Header - COM !important */
.header,
.navbar,
.main-header,
.header-content,
.header-element {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.header-link,
.header-link-icon {
    color: var(--text-primary) !important;
}

.header-link:hover {
    color: var(--accent-color) !important;
}

/* Tabelas */
.table {
    color: var(--text-primary);
}

.table thead th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table tbody tr {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.table tbody tr:hover {
    background-color: var(--bg-tertiary);
}

/* Modais */
.modal-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-color);
}

/* Badges */
.badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Links */
a {
    color: var(--accent-color);
}

a:hover {
    color: var(--accent-hover);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Páginas de login/registro */
.login-container,
.register-container {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.login-card,
.register-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 4px 20px var(--shadow);
}

/* Progress bars */
.progress {
    background-color: var(--bg-tertiary);
}

.progress-bar {
    background-color: var(--accent-color);
}

/* Alerts */
.alert {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Tooltips */
.tooltip-inner {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Select2 e outros plugins */
.select2-container .select2-selection {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.select2-dropdown {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.select2-results__option {
    color: var(--text-primary);
}

.select2-results__option--highlighted {
    background-color: var(--bg-tertiary);
    color: var(--accent-color);
}

/* ============================================
   REGRAS ADICIONAIS COM !important
   Para garantir que TODO o site mude de cor
   ============================================ */

/* Todos os elementos com background branco */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .white-container,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .custom-card {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Todos os textos */
[data-theme="dark"] * {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-muted,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] td,
[data-theme="dark"] th {
    color: var(--text-primary) !important;
}

/* Inputs e selects */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Tabelas */
[data-theme="dark"] .table,
[data-theme="dark"] table {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] table thead th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .table tbody td,
[data-theme="dark"] table tbody td {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] table tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Listas e menus */
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .nav-link {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .list-group-item:hover,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .nav-link:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--accent-color) !important;
}

/* Badges e labels */
[data-theme="dark"] .badge,
[data-theme="dark"] .label {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Divs e containers genéricos */
[data-theme="dark"] div,
[data-theme="dark"] section,
[data-theme="dark"] article {
    color: var(--text-primary) !important;
}

/* Sobrescrever estilos inline do index.php */
[data-theme="dark"] body,
[data-theme="dark"] .main-content {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .white-container,
[data-theme="dark"] .bg-white {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Saldo progress bar */
[data-theme="dark"] .saldo-progress-container,
[data-theme="dark"] .saldo-info,
[data-theme="dark"] .saldo-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .saldo-progress-bar {
    background-color: var(--bg-tertiary) !important;
}

/* Links */
[data-theme="dark"] a:not(.btn):not(.dropdown-item) {
    color: var(--accent-color) !important;
}

[data-theme="dark"] a:hover:not(.btn):not(.dropdown-item) {
    color: var(--accent-hover) !important;
}

/* Botões (exceto os de ação principal) */
[data-theme="dark"] .btn:not(.btn-primary):not(.btn-success):not(.btn-warning) {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn:not(.btn-primary):not(.btn-success):not(.btn-warning):hover {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-color) !important;
}

/* Modais */
[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Sidebar específica */
[data-theme="dark"] .app-sidebar .sidebar-menu .menu-item .menu-link,
[data-theme="dark"] .app-sidebar .sidebar-menu a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .app-sidebar .sidebar-menu .menu-item.active .menu-link,
[data-theme="dark"] .app-sidebar .sidebar-menu .menu-item:hover .menu-link {
    background-color: var(--bg-tertiary) !important;
    color: var(--accent-color) !important;
}

/* Header específico */
[data-theme="dark"] .main-header,
[data-theme="dark"] .header-content-right {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .header-link {
    color: var(--text-primary) !important;
}

/* Gráficos e charts - ApexCharts */
[data-theme="dark"] .apexcharts-canvas,
[data-theme-mode="dark"] .apexcharts-canvas,
html[data-theme="dark"] .apexcharts-canvas,
html[data-theme-mode="dark"] .apexcharts-canvas {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .apexcharts-text,
[data-theme-mode="dark"] .apexcharts-text,
[data-theme="dark"] .apexcharts-legend-text,
[data-theme-mode="dark"] .apexcharts-legend-text {
    fill: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .apexcharts-grid,
[data-theme-mode="dark"] .apexcharts-grid,
html[data-theme="dark"] .apexcharts-grid,
html[data-theme-mode="dark"] .apexcharts-grid {
    stroke: #333333 !important;
}

[data-theme="dark"] .apexcharts-gridline,
[data-theme-mode="dark"] .apexcharts-gridline,
html[data-theme="dark"] .apexcharts-gridline,
html[data-theme-mode="dark"] .apexcharts-gridline {
    stroke: #333333 !important;
}

[data-theme="dark"] .apexcharts-xaxis,
[data-theme-mode="dark"] .apexcharts-xaxis,
html[data-theme="dark"] .apexcharts-xaxis,
html[data-theme-mode="dark"] .apexcharts-xaxis {
    stroke: #333333 !important;
}

[data-theme="dark"] .apexcharts-yaxis,
[data-theme-mode="dark"] .apexcharts-yaxis,
html[data-theme="dark"] .apexcharts-yaxis,
html[data-theme-mode="dark"] .apexcharts-yaxis {
    stroke: #333333 !important;
}

[data-theme="dark"] .apexcharts-tooltip,
[data-theme-mode="dark"] .apexcharts-tooltip,
html[data-theme="dark"] .apexcharts-tooltip,
html[data-theme-mode="dark"] .apexcharts-tooltip {
    background: #1a1a1a !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .apexcharts-tooltip-title,
[data-theme-mode="dark"] .apexcharts-tooltip-title,
html[data-theme="dark"] .apexcharts-tooltip-title,
html[data-theme-mode="dark"] .apexcharts-tooltip-title {
    background: #0f0f0f !important;
    color: #ffffff !important;
    border-bottom: 1px solid #333333 !important;
}

[data-theme="dark"] .apexcharts-tooltip-series-group,
[data-theme-mode="dark"] .apexcharts-tooltip-series-group,
html[data-theme="dark"] .apexcharts-tooltip-series-group,
html[data-theme-mode="dark"] .apexcharts-tooltip-series-group {
    color: #ffffff !important;
}

/* Páginas de login/registro */
[data-theme="dark"] .login-box,
[data-theme="dark"] .register-box,
[data-theme="dark"] .login-card,
[data-theme="dark"] .register-card {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .login-container,
[data-theme="dark"] .register-container {
    background: linear-gradient(to right, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%) !important;
}

/* Forçar cor em todos os elementos filhos */
[data-theme="dark"] *:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.session-modal-btn) {
    border-color: var(--border-color) !important;
}

/* Sobrescrever estilos inline do PHP */
[data-theme="dark"] style {
    display: none !important;
}

/* Aplicar tema em elementos específicos do dashboard */
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .info-box {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Números e valores */
[data-theme="dark"] .amount,
[data-theme="dark"] .value,
[data-theme="dark"] .number,
[data-theme="dark"] .currency {
    color: var(--text-primary) !important;
}

/* Ícones */
[data-theme="dark"] i,
[data-theme="dark"] .icon,
[data-theme="dark"] svg {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

/* Linhas e divisores */
[data-theme="dark"] hr,
[data-theme="dark"] .divider,
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom {
    border-color: var(--border-color) !important;
}

/* Sobrescrever variáveis CSS do styles.css quando em modo escuro */
[data-theme="dark"],
[data-theme-mode="dark"],
html[data-theme="dark"],
html[data-theme-mode="dark"],
body[data-theme="dark"],
body[data-theme-mode="dark"] {
    --body-bg-rgb: 15, 15, 15 !important;
    --default-body-bg-color: rgb(15, 15, 15) !important;
    --default-background: rgb(26, 26, 26) !important;
    --menu-bg: rgb(26, 26, 26) !important;
    --header-bg: rgb(26, 26, 26) !important;
    --card-bg: rgb(26, 26, 26) !important;
    --form-control-bg: rgb(26, 26, 26) !important;
    --default-text-color: rgb(255, 255, 255) !important;
    --menu-prime-color: rgb(255, 255, 255) !important;
    --header-prime-color: rgb(255, 255, 255) !important;
    --text-muted: rgb(153, 153, 153) !important;
    --default-border: rgb(51, 51, 51) !important;
    --menu-border-color: rgb(51, 51, 51) !important;
    --header-border-color: rgb(51, 51, 51) !important;
    --bootstrap-card-border: rgb(51, 51, 51) !important;
    --input-border: rgb(51, 51, 51) !important;
    --list-hover-focus-bg: rgb(37, 37, 37) !important;
    --bg-light-blue: rgb(15, 15, 15) !important;
    --text-dark: rgb(255, 255, 255) !important;
    --text-medium: rgb(224, 224, 224) !important;
    --border-color: rgb(51, 51, 51) !important;
}

/* Progress bars no modo escuro */
[data-theme="dark"] .progress,
[data-theme-mode="dark"] .progress,
html[data-theme="dark"] .progress,
html[data-theme-mode="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

[data-theme="dark"] .progress-bar,
[data-theme-mode="dark"] .progress-bar,
html[data-theme="dark"] .progress-bar,
html[data-theme-mode="dark"] .progress-bar {
    background-color: #4a90e2 !important;
}

/* Ícones amarelos/dourados no modo escuro */
[data-theme="dark"] .icon-yellow,
[data-theme-mode="dark"] .icon-yellow,
[data-theme="dark"] i.fas,
[data-theme-mode="dark"] i.fas,
html[data-theme="dark"] .icon-yellow,
html[data-theme-mode="dark"] .icon-yellow {
    color: #fab62c !important;
}

/* Responsividade - Mobile First */
@media (max-width: 768px) {
    [data-theme="dark"] .card,
    [data-theme-mode="dark"] .card {
        margin-bottom: 15px !important;
        border-radius: 10px !important;
    }
    
    [data-theme="dark"] .card-header,
    [data-theme-mode="dark"] .card-header {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    [data-theme="dark"] .card-body,
    [data-theme-mode="dark"] .card-body {
        padding: 15px !important;
    }
    
    /* Header Mobile - Alinhar botões na mesma linha */
    .header-content-right {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .header-content-right li {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    
    .header-element {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Botão de tema */
    .theme-toggle-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Botão de perfil e outros links do header */
    .header-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .header-link-icon {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ocultar primeiro botão de tema (duplicado) */
    .header-element.header-theme-mode {
        display: none !important;
    }
}

/* Mobile Pequeno */
@media (max-width: 480px) {
    .header-content-right {
        gap: 3px !important;
    }
    
    .theme-toggle-btn,
    .header-link {
        width: 38px !important;
        height: 38px !important;
    }
    
    .header-link-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }
    
    /* Ocultar barra de saldo em telas muito pequenas */
    .saldo-progress-container {
        display: none !important;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    [data-theme="dark"] .card,
    [data-theme-mode="dark"] .card {
        margin-bottom: 20px !important;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    [data-theme="dark"] .card,
    [data-theme-mode="dark"] .card {
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    [data-theme="dark"] .card:hover,
    [data-theme-mode="dark"] .card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    }
}

/* Header Mobile - Alinhar botões na mesma linha */
@media (max-width: 768px) {
    .header-content-right {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .header-content-right li {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    
    .header-element {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Botão de tema */
    .theme-toggle-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Botão de perfil e outros links do header */
    .header-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .header-link-icon {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ocultar primeiro botão de tema (duplicado) */
    .header-element.header-theme-mode {
        display: none !important;
    }
}

/* Mobile Pequeno */
@media (max-width: 480px) {
    .header-content-right {
        gap: 3px !important;
    }
    
    .theme-toggle-btn,
    .header-link {
        width: 38px !important;
        height: 38px !important;
    }
    
    .header-link-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }
    
    /* Ocultar barra de saldo em telas muito pequenas */
    .saldo-progress-container {
        display: none !important;
    }
}

/* Sobrescrever estilos inline do index.php com maior especificidade */
html[data-theme="dark"] body,
html[data-theme="dark"] body.main-content,
html[data-theme="dark"] .main-content {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .white-container,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .custom-card {
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary) !important;
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* Aplicar em modo claro também para garantir consistência */
[data-theme="light"],
html[data-theme="light"],
body[data-theme="light"] {
    --body-bg-rgb: 244, 244, 244 !important;
    --default-body-bg-color: rgb(244, 244, 244) !important;
    --default-background: rgb(247, 248, 249) !important;
    --menu-bg: rgb(255, 255, 255) !important;
    --header-bg: rgb(255, 255, 255) !important;
    --card-bg: rgb(255, 255, 255) !important;
    --form-control-bg: rgb(255, 255, 255) !important;
    --default-text-color: rgb(51, 51, 51) !important;
    --menu-prime-color: rgb(51, 51, 51) !important;
    --header-prime-color: rgb(51, 51, 51) !important;
    --text-muted: rgb(108, 117, 125) !important;
    --default-border: rgb(232, 232, 232) !important;
    --menu-border-color: rgb(232, 232, 232) !important;
    --header-border-color: rgb(232, 232, 232) !important;
    --bootstrap-card-border: rgb(232, 232, 232) !important;
    --input-border: rgb(232, 232, 232) !important;
    --list-hover-focus-bg: rgb(245, 246, 247) !important;
    --bg-light-blue: rgb(244, 244, 244) !important;
    --text-dark: rgb(26, 35, 126) !important;
    --text-medium: rgb(40, 64, 101) !important;
    --border-color: rgb(234, 234, 234) !important;
}