/* ========================================
   DARK MODE IMPLEMENTATION
   ======================================== */

/* Variáveis para tema claro (padrão) */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f4f4;
    --bg-sidebar: #343A3F;
    --bg-header: #f8f4f4;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    
    --text-primary: #000000;
    --text-secondary: #6f7d97;
    --text-sidebar: #ffffff;
    --text-muted: #999999;
    
    --border-color: #e6e4e4;
    --border-card: #ffffff;
    --border-light: #f0f0f0;
    
    --shadow-sm: rgba(0, 0, 0, 0.05);
    --shadow-md: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);
}

/* Variáveis para tema escuro */
[data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #2d2d2d;
    --bg-sidebar: #1f1f1f;
    --bg-header: #2d2d2d;
    --bg-card: #2d2d2d;
    --bg-input: #3a3a3a;
    
    --text-primary: #fff;
    --text-secondary: #ffffff;
    --text-sidebar: #fff;
    --text-muted: #808080;
    
    --border-color: #404040;
    --border-card: #404040;
    --border-light: #333333;
    
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.5);
    --shadow-lg: rgba(0, 0, 0, 0.7);
}

/* Aplicar cores do tema */
body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.box-general > .header {
    background-color: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.box-general > .header .topbar {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.box-general > .sidebar {
    background-color: var(--bg-sidebar) !important;
}

.box-general > .header .logo {
    background-color: var(--bg-sidebar) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.box-general > .container {
    background-color: var(--bg-secondary) !important;
}

/* Cards e elementos de conteúdo */
.card,
.box,
.panel,
.widget {
    background-color: var(--bg-card) !important;
    border-color: var(--border-card) !important;
    color: var(--text-primary) !important;
}

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

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

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

table thead {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

table tbody tr {
    background-color: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

table tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

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

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

.modal-footer {
    border-top-color: var(--border-color) !important;
}

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

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

.dropdown-item:hover {
    background-color: var(--bg-secondary) !important;
}

/* Botões */
.btn-default {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.btn-default:hover {
    background-color: var(--bg-secondary) !important;
}

/* Menu lateral */
.sidebar .menu-item,
.sidebar .nav-item {
    color: var(--text-sidebar) !important;
}

.sidebar .menu-item:hover,
.sidebar .nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .sidebar .menu-item:hover,
[data-theme="dark"] .sidebar .nav-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Textos */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p, span, label {
    color: var(--text-primary);
}

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

/* Sombras */
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem var(--shadow-sm) !important;
}

.shadow {
    box-shadow: 0 0.5rem 1rem var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem var(--shadow-lg) !important;
}

/* Toggle de tema */
.theme-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    margin-left: 15px;
}

.theme-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.theme-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.theme-toggle input:checked + .theme-toggle-slider {
    background-color: #343A3F;
}

.theme-toggle input:checked + .theme-toggle-slider:before {
    transform: translateX(24px);
}

/* Ícones do toggle */
.theme-toggle-slider .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: opacity 0.3s;
}

.theme-toggle-slider .icon-sun {
    left: 6px;
    color: #f39c12;
}

.theme-toggle-slider .icon-moon {
    right: 6px;
    color: #f1c40f;
}

.theme-toggle input:checked + .theme-toggle-slider .icon-sun {
    opacity: 0.3;
}

.theme-toggle input:not(:checked) + .theme-toggle-slider .icon-moon {
    opacity: 0.3;
}

/* Ajustes específicos para elementos do projeto */
.scrollbar-inner > .scroll-element .scroll-element_track {
    background-color: var(--bg-secondary) !important;
}

.scrollbar-inner > .scroll-element .scroll-bar {
    background-color: var(--border-color) !important;
}

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

button, a, input, select, textarea {
    transition: all 0.3s ease;
}

/* ========================================
   DARK MODE - AUTH PAGE SPECIFIC
   ======================================== */

/* Página de autenticação */
[data-theme="dark"] .box-general.page-auth {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .login_left {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .login_right {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .box-form-auth {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .box-form-auth .logo img {
    filter: brightness(0.9);
}

/* Ajustes para formulários de autenticação */
[data-theme="dark"] .box-form-auth input {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .box-form-auth label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .box-form-auth a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] {
    --bg-primary: #1a1a1a;        /* Sua cor aqui */
    --bg-secondary: #000000;      /* Sua cor aqui */
    --text-primary: #fff;      /* Sua cor aqui */
    /* ... outras variáveis ... */
}
```

/* Toggle na página de login (se necessário adicionar) */
.auth-theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* Ajustes para imagens em modo dark */
[data-theme="dark"] .img_main {
    opacity: 0.8;
}

/* Dropdown item com toggle - ajuste de padding */
.dropdown-item.theme-toggle-item {
    padding: 10px 20px !important;
}

.dropdown-item.theme-toggle-item:hover {
    background-color: transparent !important;
}