/*
 * modern-adminlte-v3-styles.css
 *
 * Este arquivo foi criado para sobrescrever e modernizar os estilos do AdminLTE v3.1.0,
 * utilizando uma paleta de cores mais suave e ajustes de design contemporâneos.
 *
 * Inclua este arquivo APÓS o CSS original do AdminLTE v3 no seu HTML.
 */

/* 1. Importação de Fonte Moderna */
/* Uma fonte limpa e moderna para o corpo do texto e títulos */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* 2. Paleta de Cores Suave e Moderna (Sobrescrevendo as variáveis :root) */
/* As cores semânticas (primary, secondary, etc.) são definidas baseadas nessas. */
:root {
  /* Cores Base Ajustadas para tons suaves */
  --blue: #5B8FB9;       /* Azul médio suave */
  --indigo: #6D7B9F;     /* Índigo acinzentado */
  --purple: #8B7DC7;     /* Roxo lavanda */
  --pink: #E087A1;       /* Rosa empoeirado */
  --red: #D9534F;        /* Vermelho coral suave */
  --orange: #F0AD4E;     /* Laranja pêssego */
  --yellow: #F0C419;     /* Amarelo dourado suave */
  --green: #5CB85C;      /* Verde menta */
  --teal: #5BC0BE;       /* Verde-água azulado */
  --cyan: #5BC0DE;       /* Ciano claro */

  /* Neutros Suavizados */
  --white: #ffffff;
  --gray: #B0BCC4;       /* Cinza claro para elementos secundários */
  --gray-dark: #3E4E5A;  /* Cinza escuro para texto principal e headers */
  --light: #F8F9FA;      /* Fundo muito claro */
  --dark: #2F3D4A;       /* Fundo escuro sutil */

  /* Cores Semânticas (mantêm os nomes, mas usam as novas definições) */
  --primary: var(--blue);
  --secondary: var(--gray);
  --success: var(--green);
  --info: var(--cyan);
  --warning: var(--yellow);
  --danger: var(--red);

  /* Variáveis RGB para sombras e transparências (serão usadas abaixo) */
  --blue-rgb: 91, 143, 185;
  --gray-rgb: 176, 188, 196;
  --green-rgb: 92, 184, 92;
  --cyan-rgb: 91, 192, 222;
  --yellow-rgb: 240, 196, 25;
  --red-rgb: 217, 83, 79;
}

/* 3. Ajustes de Tipografia */
body, .font-family-sans-serif {
  font-family: 'Lato', sans-serif !important;
  font-weight: 300; /* Mais leve para leitura */
  line-height: 1.6; /* Maior espaçamento entre linhas */
  color: var(--gray-dark); /* Cor do texto padrão */
}

/* Títulos com peso ligeiramente maior */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Lato', sans-serif !important;
  font-weight: 700; /* Mais forte para títulos */
  line-height: 1.3;
  color: var(--gray-dark); /* Cor dos títulos */
}

/* Tamanhos de fonte ajustados para um visual mais moderno e limpo */
h1, .h1 { font-size: 2.2rem; }
h2, .h2 { font-size: 1.8rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.2rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.9rem; }
.lead { font-size: 1.35rem; font-weight: 300; } /* Mais espaçoso */

/* Links */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: #4F7FAD; /* Tom ligeiramente mais escuro para hover */
  text-decoration: underline;
}

/* 4. Ajustes de Elementos Visuais */

/* Bordas e Arredondamento */
.card,
.btn,
.form-control,
.input-group-text,
.alert,
.badge,
.modal-content,
.dropdown-menu,
.small-box,
.info-box,
.timeline > div > .timeline-item {
  border-radius: 0.4rem; /* Arredondamento um pouco mais pronunciado */
}

.card-header,
.modal-header {
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
}
.card-footer,
.modal-footer {
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
}


/* Sombras (Box-Shadow) - mais sutis e modernas */
.card {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 1px 5px rgba(0, 0, 0, 0.05); /* Sombra mais espalhada e leve */
  border: 1px solid rgba(0, 0, 0, 0.08); /* Borda mais suave para cards */
}
.small-box, .info-box {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 1px 5px rgba(0, 0, 0, 0.05);
}


/* Spacing (Espaçamento) */
.card-body {
  padding: 1.5rem; /* Aumentar um pouco o padding interno */
}
.card-header {
  padding: 1rem 1.5rem; /* Aumentar padding do header */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Borda mais suave */
}
.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05); /* Borda mais suave */
}
.content-header {
  padding: 20px 0.5rem; /* Mais espaçoso */
}
.main-footer {
  padding: 1.25rem; /* Mais espaçoso */
}

/* Campos de Formulário */
.form-control {
  border: 1px solid var(--gray);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-control:focus {
  border-color: var(--primary); /* Destaca com a cor primária ao focar */
  box-shadow: 0 0 0 0.25rem rgba(var(--blue-rgb), 0.25); /* Sombra do foco */
}
/* Placeholder mais suave */
.form-control::placeholder {
  color: var(--gray);
  opacity: 0.7;
}

/* Botões */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.btn-primary:hover {
  background-color: #4F7FAD; /* Versão um pouco mais escura */
  border-color: #4F7FAD;
}
.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--blue-rgb), 0.25);
}
/* Repita os ajustes para outros botões (secondary, success, info, etc.) */
.btn-secondary { background-color: var(--secondary); border-color: var(--secondary); }
.btn-secondary:hover { background-color: #8C949D; border-color: #8C949D; }
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-success:hover { background-color: #4CAF50; border-color: #4CAF50; }
.btn-info { background-color: var(--info); border-color: var(--info); }
.btn-info:hover { background-color: #4FC3F7; border-color: #4FC3F7; }
.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #1f2d3d; } /* Texto escuro para warning */
.btn-warning:hover { background-color: #DAA520; border-color: #DAA520; }
.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background-color: #C13F3C; border-color: #C13F3C; }

/* 5. Ajustes para Modo Escuro (Dark Mode) */
.dark-mode {
  background-color: var(--dark) !important;
  color: var(--light) !important; /* Texto claro no modo escuro */
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
  color: var(--light) !important;
}

.dark-mode .card,
.dark-mode .modal-content {
  background-color: #3E4E5A; /* Fundo do card mais escuro no dark mode */
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 1px 5px rgba(0, 0, 0, 0.1); /* Sombras mais escuras */
}
.dark-mode .card-header,
.dark-mode .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.dark-mode .card-footer,
.dark-mode .modal-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background-color: #37414A; /* Fundo mais escuro para o footer */
}

.dark-mode .form-control,
.dark-mode .input-group-text,
.dark-mode .custom-select {
  background-color: #3E4E5A;
  color: var(--light);
  border-color: #5C6E83;
}
.dark-mode .form-control:focus,
.dark-mode .custom-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--blue-rgb), 0.25);
}
.dark-mode .form-control::placeholder {
  color: var(--gray);
  opacity: 0.6;
}

.dark-mode .btn-default {
  background-color: #3E4E5A;
  color: var(--light);
  border-color: #5C6E83;
}
.dark-mode .btn-default:hover {
  background-color: #4A5B6B;
  border-color: #6C7E92;
}

/* Links no Dark Mode */
.dark-mode a {
  color: var(--cyan); /* Um ciano mais claro pode contrastar bem no dark mode */
}
.dark-mode a:hover {
  color: #8FD8EE; /* Mais claro para hover */
}

/* Tabelas no Dark Mode */
.dark-mode .table th,
.dark-mode .table td {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.dark-mode .table-bordered th,
.dark-mode .table-bordered td {
  border-color: rgba(255, 255, 255, 0.12);
}
.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}
.dark-mode .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Textos de descrição e muted */
.dark-mode .description-text,
.dark-mode .text-muted,
.dark-mode .small-box p > small {
  color: var(--gray) !important;
}

/* Scrollbar para elementos como sidebar no dark mode */
.dark-mode .sidebar::-webkit-scrollbar-thumb {
  background-color: #5C6E83;
}
.dark-mode .layout-fixed .control-sidebar .control-sidebar-content::-webkit-scrollbar-thumb {
  background-color: #5C6E83;
}

/* Small Box & Info Box no Dark Mode */
.dark-mode .small-box,
.dark-mode .info-box {
    background-color: #3E4E5A;
    color: var(--light);
}
.dark-mode .small-box > .small-box-footer {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--light);
}
.dark-mode .small-box .icon {
    color: rgba(255, 255, 255, 0.15);
}

/* Timeline no Dark Mode */
.dark-mode .timeline::before {
    background-color: #5C6E83;
}
.dark-mode .timeline > div > .timeline-item {
    background-color: #3E4E5A;
    border-color: rgba(255, 255, 0.1);
    color: var(--light);
}
.dark-mode .timeline > div > .timeline-item > .timeline-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: var(--light);
}
.dark-mode .timeline > div > .timeline-item > .time {
    color: var(--gray);
}


/* 6. Navegação (Sidebar & Navbar) */

/* Main Header (Navbar) */
.main-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Borda mais suave */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Leve sombra */
}

/* Navbar Nav Links (ícones e texto) */
.main-header .nav-link {
    padding: 0.6rem 0.8rem; /* Ajuste para mais espaçamento */
    color: var(--gray-dark);
}
.main-header .nav-link:hover {
    color: var(--primary);
}
.navbar-dark .nav-link { /* Garante boa visibilidade em navbars escuras */
    color: rgba(255, 255, 255, 0.85);
}
.navbar-dark .nav-link:hover {
    color: var(--white);
}

/* Brand Link (Logo) */
.brand-link {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Borda mais suave */
    padding: 0.85rem 0.5rem; /* Ajustar padding */
}
[class*="sidebar-dark"] .brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borda mais clara no dark sidebar */
}


/* Main Sidebar */
.main-sidebar {
    background-color: var(--dark); /* Fundo da sidebar com cor escura suave */
    color: var(--light); /* Texto claro */
}
[class*="sidebar-dark"] { /* Aplica-se às variações dark da sidebar */
    background-color: var(--dark);
}

/* Sidebar Nav */
.nav-sidebar .nav-item .nav-link {
    padding: 0.75rem 1rem; /* Padding uniforme */
    color: var(--gray); /* Cor do texto padrão da nav */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.nav-sidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08); /* Fundo sutil no hover */
    color: var(--light);
}
.nav-sidebar .nav-item .nav-link.active {
    background-color: var(--primary); /* Cor ativa com a primary */
    color: var(--white);
    box-shadow: none; /* Remover sombra padrão para um look mais flat */
}
.nav-sidebar .nav-item .nav-link.active .nav-icon {
    color: var(--white); /* Ícone branco no estado ativo */
}

/* Sub-menus da Sidebar */
.nav-sidebar .nav-treeview {
    background-color: rgba(0, 0, 0, 0.1); /* Fundo ligeiramente mais escuro para sub-menus */
}
.nav-sidebar .nav-treeview .nav-link {
    color: var(--gray);
    padding-left: 1.8rem; /* Aumentar indentação para sub-itens */
}
.nav-sidebar .nav-treeview .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--light);
}
.nav-sidebar .nav-treeview .nav-link.active {
    background-color: rgba(var(--blue-rgb), 0.7); /* Cor ativa com transparência para o sub-menu */
    color: var(--white);
}


/* Dark Mode para Navbar & Sidebar */
.dark-mode .main-header {
    background-color: var(--dark) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.dark-mode .main-header .nav-link {
    color: var(--light);
}
.dark-mode .main-header .nav-link:hover {
    color: var(--white);
}

.dark-mode .brand-link {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.dark-mode [class*="sidebar-dark"] .brand-link { /* Sobrescreve para dark sidebar no dark mode */
    background-color: var(--dark);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .main-sidebar {
    background-color: var(--dark);
}
.dark-mode .nav-sidebar .nav-item .nav-link {
    color: var(--gray);
}
.dark-mode .nav-sidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--light);
}
.dark-mode .nav-sidebar .nav-item .nav-link.active {
    background-color: var(--primary);
    color: var(--white);
}
.dark-mode .nav-sidebar .nav-treeview {
    background-color: rgba(0, 0, 0, 0.2);
}


/* 7. Alerts e Callouts */
.alert {
  border: none; /* Remover borda para um look mais flat */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Sombra sutil */
  border-left: 5px solid; /* Borda lateral colorida para destaque */
  padding-left: 1.5rem;
}
.alert-primary { border-color: var(--primary); background-color: rgba(var(--blue-rgb), 0.1); color: var(--primary); }
.alert-secondary { border-color: var(--secondary); background-color: rgba(var(--gray-rgb), 0.1); color: var(--secondary); }
.alert-success { border-color: var(--success); background-color: rgba(var(--green-rgb), 0.1); color: var(--success); }
.alert-info { border-color: var(--info); background-color: rgba(var(--cyan-rgb), 0.1); color: var(--info); }
.alert-warning { border-color: var(--warning); background-color: rgba(var(--yellow-rgb), 0.1); color: var(--warning); }
.alert-danger { border-color: var(--danger); background-color: rgba(var(--red-rgb), 0.1); color: var(--danger); }
.alert-light { border-color: var(--light); background-color: rgba(0, 0, 0, 0.05); color: var(--gray-dark); }
.alert-dark { border-color: var(--dark); background-color: rgba(0, 0, 0, 0.2); color: var(--light); }

.callout {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  background-color: var(--white);
  border-left: 5px solid var(--primary); /* Usa cor primária como padrão */
  color: var(--gray-dark);
}
.callout-primary { border-left-color: var(--primary); }
.callout-secondary { border-left-color: var(--secondary); }
.callout-success { border-left-color: var(--success); }
.callout-info { border-left-color: var(--info); }
.callout-warning { border-left-color: var(--warning); }
.callout-danger { border-left-color: var(--danger); }
.callout-light { border-left-color: var(--light); }
.callout-dark { border-left-color: var(--dark); }

/* Dark Mode para Alerts e Callouts */
.dark-mode .alert {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--light);
}
.dark-mode .alert-primary { color: var(--primary); }
.dark-mode .alert-secondary { color: var(--secondary); }
.dark-mode .alert-success { color: var(--success); }
.dark-mode .alert-info { color: var(--info); }
.dark-mode .alert-warning { color: var(--warning); }
.dark-mode .alert-danger { color: var(--danger); }
.dark-mode .alert-light { color: var(--light); }
.dark-mode .alert-dark { color: var(--dark); }


.dark-mode .callout {
  background-color: #3E4E5A;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--light);
}
.dark-mode .callout a {
    color: var(--cyan);
}


/* 8. Badges e Progress Bars */
.badge {
  font-weight: 600; /* Um pouco mais encorpado */
  padding: 0.3em 0.7em; /* Ajustar padding */
}

.progress {
  border-radius: 0.25rem; /* Manter arredondamento */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); /* Sombra interna sutil */
  background-color: var(--light); /* Fundo claro para a barra */
}
.progress-bar {
  background-color: var(--primary); /* Usa cor primária */
}
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

/* Dark Mode para Badges e Progress Bars */
.dark-mode .badge {
    color: var(--light); /* Garante bom contraste no dark mode */
}
.dark-mode .progress {
    background-color: rgba(255, 255, 255, 0.1);
}


/* 9. Info Boxes e Small Boxes */
.info-box, .small-box {
  background-color: var(--white);
  color: var(--gray-dark);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 1px 5px rgba(0, 0, 0, 0.05);
}
.info-box .info-box-icon {
    background-color: var(--primary); /* Cor do ícone */
    color: var(--white);
    border-radius: 0.4rem;
}
.small-box > .small-box-footer {
    background-color: rgba(0, 0, 0, 0.03); /* Fundo mais suave */
    color: var(--gray-dark);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.small-box h3 {
    color: var(--gray-dark);
}
.small-box p {
    color: var(--gray);
}
.small-box .icon > i, .small-box .icon svg {
    color: rgba(0, 0, 0, 0.1); /* Ícone mais sutil no fundo */
}

/* Dark Mode para Info Boxes e Small Boxes */
.dark-mode .info-box,
.dark-mode .small-box {
    background-color: #3E4E5A;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--light);
}
.dark-mode .info-box .info-box-icon {
    color: var(--light);
}
.dark-mode .small-box > .small-box-footer {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--light);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dark-mode .small-box h3,
.dark-mode .small-box p {
    color: var(--light);
}
.dark-mode .small-box .icon > i, .dark-mode .small-box .icon svg {
    color: rgba(255, 255, 255, 0.1);
}


/* 10. Outros Componentes */

/* Timeline */
.timeline::before {
    background-color: var(--gray); /* Linha do tempo mais suave */
}
.timeline > div > .fa,
.timeline > div > .fas,
.timeline > div > .far,
.timeline > div > .fab,
.timeline > div > .fal,
.timeline > div > .fad,
.timeline > div > .svg-inline--fa,
.timeline > div > .ion {
    background-color: var(--primary); /* Ícones da timeline com cor primária */
    color: var(--white);
}

/* Products List */
.products-list > .item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Separador mais suave */
    background-color: var(--white);
}
.products-list .product-title {
    color: var(--gray-dark);
}
.products-list .product-description {
    color: var(--gray);
}

/* Direct Chat */
.direct-chat-text {
    background-color: var(--light); /* Balão de chat mais claro */
    border-color: var(--light);
    color: var(--gray-dark);
}
.direct-chat-text::after, .direct-chat-text::before {
    border-right-color: var(--light);
}
.right .direct-chat-text {
    background-color: var(--primary); /* Balão de chat do usuário com a cor primária */
    border-color: var(--primary);
    color: var(--white);
}
.right .direct-chat-text::after, .right .direct-chat-text::before {
    border-left-color: var(--primary);
}
.direct-chat-timestamp {
    color: var(--gray);
}

/* Dark Mode para Outros Componentes */
.dark-mode .timeline::before {
    background-color: rgba(255, 255, 255, 0.1);
}
.dark-mode .timeline > div > .timeline-item {
    background-color: #3E4E5A;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--light);
}
.dark-mode .timeline > div > .fa,
.dark-mode .timeline > div > .fas,
.dark-mode .timeline > div > .far,
.dark-mode .timeline > div > .fab,
.dark-mode .timeline > div > .fal,
.dark-mode .timeline > div > .fad,
.dark-mode .timeline > div > .svg-inline--fa,
.dark-mode .timeline > div > .ion {
    background-color: var(--primary);
    color: var(--white);
}

.dark-mode .products-list > .item {
    background-color: #3E4E5A;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.dark-mode .products-list .product-title {
    color: var(--light);
}
.dark-mode .products-list .product-description {
    color: var(--gray);
}

.dark-mode .direct-chat-text {
    background-color: #5C6E83; /* Balão de chat mais escuro */
    border-color: #5C6E83;
    color: var(--light);
}
.dark-mode .direct-chat-text::after, .dark-mode .direct-chat-text::before {
    border-right-color: #5C6E83;
}
.dark-mode .right .direct-chat-text {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.dark-mode .right .direct-chat-text::after, .dark-mode .right .direct-chat-text::before {
    border-left-color: var(--primary);
}
.dark-mode .direct-chat-timestamp {
    color: var(--gray);
}


/* 11. Classes de Utilitários (Backgrounds, Text Colors, Borders) */

/* Background Colors */
.bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-light, .bg-dark, .bg-white, .bg-gray, .bg-gray-dark {
    /* Garante que o texto seja legível sobre os novos fundos */
    color: var(--white) !important; /* Padrão para texto branco */
}
.bg-warning, .bg-light, .bg-lime, .bg-orange, .bg-lightblue, .bg-olive, .bg-fuchsia, .bg-maroon, .bg-yellow { /* Cores que tradicionalmente precisam de texto escuro */
    color: var(--gray-dark) !important;
}

/* Dark Mode para Backgrounds */
.dark-mode .bg-primary, .dark-mode .bg-secondary, .dark-mode .bg-success, .dark-mode .bg-info, .dark-mode .bg-warning, .dark-mode .bg-danger, .dark-mode .bg-light, .dark-mode .bg-dark, .dark-mode .bg-white, .dark-mode .bg-gray, .dark-mode .bg-gray-dark {
    color: var(--light) !important;
}
.dark-mode .bg-warning, .dark-mode .bg-light, .dark-mode .bg-lime, .dark-mode .bg-orange, .dark-mode .bg-lightblue, .dark-mode .bg-olive, .dark-mode .bg-fuchsia, .dark-mode .bg-maroon, .dark-mode .bg-yellow {
    color: var(--gray-dark) !important; /* Texto escuro pode ser necessário se a cor de fundo for clara no dark mode */
}
.dark-mode .bg-white { /* Garante que o branco puro ainda tenha texto escuro no dark mode */
    color: var(--gray-dark) !important;
}


/* Border Colors */
.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-success { border-color: var(--success) !important; }
.border-info { border-color: var(--info) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--danger) !important; }
.border-light { border-color: var(--light) !important; }
.border-dark { border-color: var(--dark) !important; }
.border-gray { border-color: var(--gray) !important; }
.border-gray-dark { border-color: var(--gray-dark) !important; }

/* Dark Mode para Border Colors */
.dark-mode .border-primary { border-color: var(--primary) !important; }
.dark-mode .border-secondary { border-color: var(--secondary) !important; }
.dark-mode .border-success { border-color: var(--success) !important; }
.dark-mode .border-info { border-color: var(--info) !important; }
.dark-mode .border-warning { border-color: var(--warning) !important; }
.dark-mode .border-danger { border-color: var(--danger) !important; }
.dark-mode .border-light { border-color: var(--light) !important; }
.dark-mode .border-dark { border-color: var(--dark) !important; }
.dark-mode .border-gray { border-color: var(--gray) !important; }
.dark-mode .border-gray-dark { border-color: var(--gray-dark) !important; }


/* Text Colors */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-light { color: var(--light) !important; }
.text-dark { color: var(--dark) !important; }
.text-gray { color: var(--gray) !important; }
.text-gray-dark { color: var(--gray-dark) !important; }

/* Dark Mode para Text Colors */
.dark-mode .text-primary { color: var(--primary) !important; }
.dark-mode .text-secondary { color: var(--secondary) !important; }
.dark-mode .text-success { color: var(--success) !important; }
.dark-mode .text-info { color: var(--info) !important; }
.dark-mode .text-warning { color: var(--warning) !important; }
.dark-mode .text-danger { color: var(--danger) !important; }
.dark-mode .text-light { color: var(--light) !important; }
.dark-mode .text-dark { color: var(--dark) !important; }
.dark-mode .text-gray { color: var(--gray) !important; }
.dark-mode .text-gray-dark { color: var(--gray-dark) !important; }


/* 12. Melhorias na Experiência do Usuário (UI/UX) */

/* Transições mais suaves para alguns elementos */
.card,
.btn,
.nav-link,
.form-control,
.small-box > .small-box-footer {
    transition: all 0.2s ease-in-out;
}

/* Elevation/Shadows ajustadas para um look mais sutil */
.elevation-1 { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important; }
.elevation-2 { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06) !important; }
.elevation-3 { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08) !important; }
.elevation-4 { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), 0 6px 15px rgba(0, 0, 0, 0.1) !important; }
.elevation-5 { box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.12) !important; }

/* Dark Mode para sombras */
.dark-mode .elevation-1 { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2) !important; }
.dark-mode .elevation-2 { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25) !important; }
.dark-mode .elevation-3 { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3) !important; }
.dark-mode .elevation-4 { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 6px 15px rgba(0, 0, 0, 0.4) !important; }
.dark-mode .elevation-5 { box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5) !important; }


/* Fim do custom-theme.css */