/*
 * Tema moderno e claro para o painel XtreamServer.
 * Substitui as cores escuras originais por tons claros e um visual mais atual.
 * O uso de variáveis CSS facilita a customização global de cores e fundos.
 */

/*
 * Tema redesenhado com cores mais vibrantes e escuras.
 * O objetivo é melhorar o contraste e a legibilidade dentro do painel,
 * atendendo à solicitação de um visual mais marcante.  As variáveis
 * abaixo definem uma paleta escura com um tom de destaque vibrante.
 */
:root {
  /* Cor primária utilizada em botões, links e destaques */
  --primary-color: #5c6bc0; /* roxo azulado vibrante */
  /* Cor de fundo do corpo: tom muito escuro para alto contraste */
  --body-bg: #121212;
  /* Cor de fundo da barra de navegação superior e menus laterais */
  --nav-bg: #1f2235;
  /* Cor das bordas em elementos como menus e rodapés */
  --nav-border: #2c314a;
  /* Cor de fundo dos cartões e caixas de conteúdo */
  --card-bg: rgba(36, 41, 61, 0.95);
  /* Cor principal do texto em todo o painel */
  --text-color: #f5f6fa;
}

/* fundo geral e cor de texto */
body {
  background-color: var(--body-bg) !important;
  color: var(--text-color) !important;
}

/* barra superior do painel */
header.navbar {
  background-color: var(--nav-bg) !important;
  color: var(--text-color) !important;
  border-bottom: 1px solid var(--nav-border);
}

/* menu lateral */
.navigation {
  background: var(--nav-bg) !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.navigation ul li a {
  color: var(--text-color) !important;
}

.navigation ul li.active {
  background: rgba(255, 255, 255, 0.1) !important;
}

.navigation ul li a .icon {
  color: var(--primary-color) !important;
}

/* cartões e contêineres */
.card {
  background-color: var(--card-bg) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  border: none !important;
}

/* botões primários */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* cabeçalhos de seção e títulos */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-color);
}

/* rodapé */
footer {
  background-color: var(--nav-bg) !important;
  color: var(--text-color) !important;
  border-top: 1px solid var(--nav-border);
}

/* Ajusta os links da barra de navegação para o tema claro */
header.navbar .navbar-nav .nav-link,
header.navbar .navbar-brand,
header.navbar .navbar-nav .nav-item .nav-link {
  color: var(--text-color) !important;
}

/* --------------------------------------------------------------------------
 * Ajustes de DataTables e modais para o tema escuro
 *
 * O DataTables utiliza estilos próprios com fundos claros e textos escuros.  Para
 * harmonizar com o tema escuro, é necessário sobrescrever várias classes
 * utilizadas pelo plugin.  Estes estilos afetam o fundo da tabela, cabeçalhos,
 * linhas alternadas e botões de paginação.  As modais também foram
 * estilizadas para utilizar o mesmo esquema de cores dos cartões do painel.
 */
/*------------------------------------------------------------------------
 * Estilização de DataTables para o tema escuro
 *
 * Esta seção define as cores do cabeçalho, corpo e rodapé das tabelas
 * utilizadas pelo plugin DataTables.  É importante abranger tanto as
 * classes adicionadas pelo plugin (`display`, `table`, etc.) quanto o
 * seletor pelo id `#data_table`, pois a versão 2.0 do DataTables removeu
 * a classe antiga `dataTable` do elemento `<table>`.  Dessa forma,
 * garantimos que todas as listagens (clientes, revendedores, testes) se
 * adaptem ao tema escuro, com texto claro e linhas alternadas para
 * melhorar a legibilidade.
 */

/* Estrutura geral do DataTable.  Aplica fundo escuro e cor de texto
 * clara para qualquer tabela com classes "display" ou "table".  O
 * atributo [role="table"] cobre as versões mais recentes do
 * DataTables que aplicam funções WAI-ARIA. */
table.display,
table.table,
table[role="table"],
#data_table {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--nav-border) !important;
}

/* Cabeçalhos das tabelas: tonalidade de fundo igual à barra de
 * navegação.  A classe `.table-dark` vem do Bootstrap e é mantida
 * escura para consistência. */
table.display thead,
table.table thead,
table[role="table"] thead,
#data_table thead,
table.table-dark thead {
  background-color: var(--nav-bg) !important;
}
table.display thead th,
table.table thead th,
table[role="table"] thead th,
#data_table thead th {
  color: var(--text-color) !important;
  border-color: var(--nav-border) !important;
}

/* Corpo das tabelas: linhas escuras com alternância sutil e destaque
 * no hover.  Incluímos o id `#data_table` para garantir que todas as
 * instâncias de DataTable sejam afetadas, mesmo que as classes
 * variem. */
table.display tbody tr,
table.table tbody tr,
table[role="table"] tbody tr,
#data_table tbody tr {
  background-color: var(--card-bg) !important;
}
/* DataTables adiciona classes `odd` e `even` às linhas para o efeito de listras.
 * A partir da versão 2, esses nomes podem ser prefixados com `dt-` (ex.:
 * `dt-row-odd` e `dt-row-even`).  Para garantir que as linhas não fiquem
 * claras demais e o texto permaneça visível, substituímos o fundo para
 * ambas as classes por uma tonalidade escura e alternamos ligeiramente
 * a luminosidade das linhas pares. */
table.display tbody tr.odd,
table.table tbody tr.odd,
table[role="table"] tbody tr.odd,
#data_table tbody tr.odd,
table.display tbody tr.dt-row-odd,
table.table tbody tr.dt-row-odd,
table[role="table"] tbody tr.dt-row-odd,
#data_table tbody tr.dt-row-odd {
  background-color: var(--card-bg) !important;
}
table.display tbody tr.even,
table.table tbody tr.even,
table[role="table"] tbody tr.even,
#data_table tbody tr.even,
table.display tbody tr.dt-row-even,
table.table tbody tr.dt-row-even,
table[role="table"] tbody tr.dt-row-even,
#data_table tbody tr.dt-row-even {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/*
 * For algumas implementações do DataTables, as células (`td`) recebem uma cor de
 * fundo própria (normalmente branca).  Isso faz com que nossas configurações
 * aplicadas às linhas (`tr`) não tenham efeito, deixando as letras ilegíveis.
 * Para garantir que as células sigam o mesmo fundo definido na linha,
 * definimos o `background-color` como `inherit`.  Assim, cada `td` herdará
 * automaticamente a cor da sua linha.
 */
table.display tbody td,
table.table tbody td,
table[role="table"] tbody td,
#data_table tbody td {
  background-color: inherit !important;
}
table.display tbody tr:nth-child(even),
table.table tbody tr:nth-child(even),
table[role="table"] tbody tr:nth-child(even),
#data_table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
table.display tbody tr:hover,
table.table tbody tr:hover,
table[role="table"] tbody tr:hover,
#data_table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
table.display tbody td,
table.table tbody td,
table[role="table"] tbody td,
#data_table tbody td {
  color: var(--text-color) !important;
  border-color: var(--nav-border) !important;
}

/* Paginação: mantém botões e texto claros. */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-color) !important;
  background-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

/* Modais */
.modal-content {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: none !important;
}
.modal-header,
.modal-footer {
  border-color: var(--nav-border) !important;
}

/* --------------------------------------------------------------------------
 * Ajustes adicionais de navegação lateral (menu) para o tema escuro
 *
 * O arquivo menu.css define vários estilos que utilizam cores claras.  Estes
 * estilos sobrescrevem a cor de texto e de fundo para o item ativo.  Com o
 * tema escuro ativo, definimos cores de texto consistentes e um fundo
 * semitransparente para destacar o item selecionado.  As sub‑opções do menu
 * também herdam a paleta escura e a cor de texto clara.
 */
/* Links e textos do menu */
.navigation ul li a,
.navigation ul li a .icon,
.navigation ul li a .text {
  color: var(--text-color) !important;
}
/* Item ativo e item sob hover */
.navigation ul li.active,
.navigation ul li:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
/* Cor dos ícones e texto do item ativo */
.navigation ul li.active a .icon,
.navigation ul li.active a .text {
  color: var(--primary-color) !important;
}
/* Submenus */
.sidebar-submenu {
  background-color: var(--nav-bg) !important;
  border-left: 1px solid var(--nav-border) !important;
}
.sidebar-submenu a {
  color: var(--text-color) !important;
}
.sidebar-submenu a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}