/**
 * Theme CSS - Estilos Centralizados para Modo Escuro/Claro
 * PayGateway - Gateway de Pagamentos
 */

/* Variáveis CSS */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --sidebar-bg: #ffffff;
    --sidebar-text: #475569;
    --sidebar-hover: #f1f5f9;
    --sidebar-active: #3b82f6;
}

.dark {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border-primary: #334155;
    --border-secondary: #475569;
    --sidebar-bg: #0f172a;
    --sidebar-text: #cbd5e1;
    --sidebar-hover: #1e293b;
    --sidebar-active: #3b82f6;
}

/* Estilos base com variáveis */
body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Forçar aplicação do tema em elementos principais */
main {
    background-color: var(--bg-secondary) !important;
}

header {
    background-color: var(--bg-primary) !important;
}

aside {
    background-color: var(--sidebar-bg) !important;
}

/* Sidebar */
.sidebar-desktop {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border-primary) !important;
}

.sidebar-item {
    color: var(--sidebar-text) !important;
    transition: all 0.2s ease;
}

.sidebar-item:hover {
    background-color: var(--sidebar-hover) !important;
    color: var(--text-primary) !important;
}

.sidebar-item.active {
    background-color: var(--sidebar-active) !important;
    color: #ffffff !important;
}

/* Cards */
.bg-white {
    background-color: var(--bg-primary) !important;
    transition: background-color 0.3s ease;
}

.bg-gray-50 {
    background-color: var(--bg-secondary) !important;
    transition: background-color 0.3s ease;
}

.bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
    transition: background-color 0.3s ease;
}

/* Cards específicos das páginas */
.stat-card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
}

.settings-card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Textos */
.text-gray-900 {
    color: var(--text-primary) !important;
}

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

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

.text-gray-600 {
    color: var(--text-tertiary) !important;
}

.text-gray-500 {
    color: var(--text-tertiary) !important;
}

.text-gray-400 {
    color: var(--text-tertiary) !important;
}

.text-gray-300 {
    color: var(--text-tertiary) !important;
}

/* Bordas */
.border-gray-200 {
    border-color: var(--border-primary) !important;
}

.border-gray-300 {
    border-color: var(--border-secondary) !important;
}

.border-gray-600 {
    border-color: var(--border-primary) !important;
}

/* Hover states */
.hover\:bg-gray-50:hover {
    background-color: var(--sidebar-hover) !important;
}

.hover\:bg-gray-100:hover {
    background-color: var(--bg-tertiary) !important;
}

.hover\:bg-gray-700:hover {
    background-color: var(--sidebar-hover) !important;
}

/* Dividers */
.divide-gray-200 > * + * {
    border-color: var(--border-primary) !important;
}

.divide-gray-600 > * + * {
    border-color: var(--border-primary) !important;
}

/* Form inputs */
input, select, textarea {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--sidebar-active) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Tabelas */
table {
    background-color: var(--bg-primary) !important;
}

th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

td {
    border-color: var(--border-primary) !important;
}

tr:hover {
    background-color: var(--sidebar-hover) !important;
}

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

/* Notificações */
.notification {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Header */
header {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Footer mobile */
.mobile-nav {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Animações suaves */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Forçar aplicação em elementos específicos */
.bg-gray-800 {
    background-color: var(--bg-primary) !important;
}

.bg-gray-700 {
    background-color: var(--bg-tertiary) !important;
}

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

.text-gray-300 {
    color: var(--text-tertiary) !important;
}