/* public/assets/css/dark-mode.css */

body.dark-mode {
    background: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .logo img:nth-child(2) {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

body.dark-mode a {
    color: #5b9bd5;
}

body.dark-mode a:hover {
    color: #7ab4e8;
}

/* Page Title */
body.dark-mode .pagetitle h1 {
    color: #90c4f8;
}

/* Cards */
body.dark-mode .card {
    background-color: #2a2a2a;
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.4);
}

body.dark-mode .card-header,
body.dark-mode .card-footer {
    border-color: #3a3a3a;
    background-color: #333;
    color: #b0b0b0;
}

body.dark-mode .card-title {
    color: #90c4f8;
}

body.dark-mode .card-title span {
    color: #a9a9a9;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
    background-color: #2a2a2a;
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.5);
}

body.dark-mode .dropdown-menu .dropdown-header,
body.dark-mode .dropdown-menu .dropdown-footer {
    color: #f0f0f0;
}

body.dark-mode .dropdown-menu .dropdown-footer a {
    color: #e0e0e0;
}

body.dark-mode .dropdown-menu .dropdown-divider {
    border-color: #444;
}

body.dark-mode .dropdown-menu .dropdown-item {
    color: #e0e0e0;
}

body.dark-mode .dropdown-menu .dropdown-item:hover {
    background-color: #3a3a3a;
}

body.dark-mode .dropdown-menu-arrow::before {
    background: #2a2a2a;
    border-top: 1px solid #3a3a3a;
    border-left: 1px solid #3a3a3a;
}


/* Header */
body.dark-mode .header {
    background-color: #2a2a2a;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode .header .toggle-sidebar-btn,
body.dark-mode .header .search-form button i,
body.dark-mode .header-nav .nav-icon,
body.dark-mode .header-nav .nav-profile {
    color: #90c4f8;
}

body.dark-mode .header .search-form input {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
}

body.dark-mode .logo span {
    color: #90c4f8;
}

/* Sidebar */
body.dark-mode .sidebar {
    background-color: #2a2a2a;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode .sidebar-nav .nav-link.collapsed {
    color: #90c4f8;
    background: #2a2a2a;
}

body.dark-mode .sidebar-nav .nav-link.collapsed i {
    color: #a9a9a9;
}

body.dark-mode .sidebar-nav .nav-link:hover {
    color: #5b9bd5;
    background: #3a3a3a;
}

body.dark-mode .sidebar-nav .nav-link:hover i {
    color: #5b9bd5;
}

body.dark-mode .sidebar-nav .nav-content a {
    color: #90c4f8;
}

/* Footer */
body.dark-mode .footer {
    border-top: 1px solid #3a3a3a;
    background-color: #1a1a1a;
}

body.dark-mode .footer .copyright,
body.dark-mode .footer .credits {
    color: #90c4f8;
}

/* Tables - Ajustes para maior especificidade */
body.dark-mode .table {
    /* Garante que o texto em geral seja claro */
    color: #e0e0e0;
}

/* Aplica o fundo escuro e a cor da borda a TODAS as células */
body.dark-mode .table th,
body.dark-mode .table td {
    background-color: #2a2a2a;
    /* Fundo mais escuro para as células */
    border-color: #4a4a4a;
    /* Borda escura para as células */
    color: #e0e0e0;
    /* Cor do texto dentro das células */
}

/* Estilo para o cabeçalho da tabela (thead) */
body.dark-mode .table thead th {
    background-color: #3a3a3a !important;
    /* Um tom um pouco mais escuro para o cabeçalho */
    color: #90c4f8;
    /* Cor do texto do cabeçalho */
    border-bottom: 2px solid #555;
    /* Borda inferior mais distinta */
}

/* Linhas com a classe 'table-success' (conciliadas) */
body.dark-mode .table .table-success,
body.dark-mode .table .table-success td {
    background-color: #284632 !important;
    /* Verde escuro para conciliação */
    color: #d1e7dd;
}
/* info */
body.dark-mode .table .table-info,
body.dark-mode .table .table-info td {
    background-color: #1f4b4b !important; /* azul escuro */
    color: #d1ecf1 !important;
}

/* Warning */
body.dark-mode .table .table-warning,
body.dark-mode .table .table-warning td {
    background-color: #4a3f1d !important;
    /* Amarelo escuro/dourado queimado */
    color: #fff3cd;
}

/* Danger */
body.dark-mode .table .table-danger,
body.dark-mode .table .table-danger td {
    background-color: #4b1f1f !important;
    /* Vermelho escuro */
    color: #f8d7da;
}

/* Efeito Hover nas linhas */
body.dark-mode .table tbody tr:hover td {
    background-color: #3a3a3a;
    /* Fundo escuro ao passar o mouse */
}

/* Efeito Hover nas linhas de sucesso */
body.dark-mode .table-success:hover td {
    background-color: #375b43 !important;
    /* Um verde escuro um pouco mais claro no hover */
}

/* Estilo para linhas pares (striped rows, se aplicável) */
body.dark-mode .table-striped tbody tr:nth-of-type(odd) td {
    background-color: #2e2e2e;
}

/* Checkbox (para garantir que sejam visíveis) */
body.dark-mode .check-all,
body.dark-mode .check-item {
    filter: invert(1) hue-rotate(180deg);
    /* Inverte a cor do checkbox (se for claro) */
}

/* Campos de Formulário (Inputs, Selects, Textareas) */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #333333;
    /* Um cinza escuro para o fundo do campo */
    color: #e0e0e0;
    /* Cor clara para o texto digitado */
    border: 1px solid #555555;
    /* Borda sutil para definir o campo */
}

/* Foco nos campos (quando o usuário clica para digitar) */
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #3a3a3a;
    /* Fundo levemente diferente no foco */
    color: #e0e0e0;
    border-color: #5b9bd5;
    /* Borda com a cor do link em destaque */
    box-shadow: 0 0 0 0.25rem rgba(138, 154, 255, 0.25);
    /* Sombra de foco azulada */
}

/* Campos desabilitados, se houver */
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
    background-color: #2a2a2a;
    opacity: 0.7;
}

/* Etiquetas (Labels) dos Formulários */
body.dark-mode .form-label {
    color: #90c4f8;
    /* Cor clara para as etiquetas */
}

/* Sidebar - Link Ativo/Selecionado */
body.dark-mode .sidebar-nav .nav-link:not(.collapsed) {
    /* Fundo do link ativo (o que está branco) */
    background: #3a3a3a;
    /* Um tom escuro para o fundo do item selecionado */
    color: #5b9bd5;
    /* Cor do texto destacada (igual ao hover) */
}

body.dark-mode .sidebar-nav .nav-link:not(.collapsed) i {
    /* Cor do ícone do link ativo */
    color: #5b9bd5;
}

/* Garante que o indicador (se houver, como uma borda lateral) fique escuro */
body.dark-mode .sidebar-nav .nav-link:not(.collapsed)::before {
    background-color: #5b9bd5;
    /* Usa a cor de destaque para o indicador */
}

/* Botões de Ação na Tabela */

/* Info Button (Azul Aço) - dark mode */
body.dark-mode .btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1a6fa0;
    --bs-btn-border-color: #1a6fa0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2080b5;
    --bs-btn-hover-border-color: #2080b5;
    --bs-btn-active-bg: #155d87;
    --bs-btn-active-border-color: #155d87;
}

/* Secondary Button (Cinza) - bx-edit-alt */
body.dark-mode .btn-secondary {
    --bs-btn-color: #f0f0f0;
    /* Texto claro */
    --bs-btn-bg: #5a6268;
    /* Fundo cinza escuro */
    --bs-btn-border-color: #5a6268;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-active-bg: #5a6268;
    --bs-btn-active-border-color: #5a6268;
}

/* Warning Button (Amarelo) - bx-user-plus */
body.dark-mode .btn-warning {
    --bs-btn-color: #212529;
    /* Texto escuro para contraste com o amarelo */
    --bs-btn-bg: #e5a400;
    /* Fundo amarelo/laranja escuro */
    --bs-btn-border-color: #e5a400;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #ffc107;
    --bs-btn-hover-border-color: #ffc107;
    --bs-btn-active-bg: #e5a400;
    --bs-btn-active-border-color: #e5a400;
}

/* Ajuste para ícones dentro dos botões (opcional, mas recomendado) */
body.dark-mode .btn i {
    color: #fff;
    /* Garante que o ícone herde a cor do texto do botão */
}

body.dark-mode .btn {
    color: #fff !important;
    /* texto branco */
}

/* Card Icons (O círculo com o ícone) */
body.dark-mode .card-icon {
    /* O fundo do círculo deve ser escuro e o ícone claro */
    color: #5b9bd5;
    /* Cor do ícone (o azul de destaque) */
    background: #3a3a3a;
    /* Fundo do círculo escuro */
}

/* Conteúdo do Card */
body.dark-mode .card-body h6 {
    /* Título principal dentro do card body (ex: "plano anual") */
    color: #e0e0e0;
}

/* Span do Título Secundário/Detalhe */
body.dark-mode .card-title span {
    /* Sobrescreve o estilo existente para 'span' no card-title para garantir que não seja muito escuro */
    color: #a9a9a9;
}

/* Link de Ação no Card Title */
body.dark-mode .card-title a {
    /* O link 'Renovar' */
    color: #5b9bd5;
    /* Usa a cor de destaque do link do modo escuro */
}

/* Textos Pequenos e Atenuados */
body.dark-mode .small,
body.dark-mode .text-muted {
    /* Ajusta todos os textos 'small' e 'muted' para um cinza que tenha contraste no modo escuro */
    color: #a9a9a9 !important;
    /* Um cinza claro que se destaca no fundo escuro */
}

/* Card Principal (Container 'card shadow rounded-4') */
body.dark-mode .card {
    background-color: #2a2a2a;
    /* Fundo escuro para todos os cards */
    color: #e0e0e0;
    /* Cor de texto padrão clara */
    /* border: 1px solid #4a4a4a; */
}

/* Card Header (Header do Formulário, ex: "Renovar Plano") */
body.dark-mode .card-header.bg-primary {
    /* O Bootstrap .bg-primary é muito claro, vamos escurecer */
    background-color: #1565c0 !important;
    /* Azul escuro */
    color: #ffffff !important;
    border-bottom: 1px solid #4a4a4a;
}

/* Card Body (Corpo Principal, tinha .bg-light) */
body.dark-mode .card-body.bg-light {
    background-color: #2a2a2a !important;
    /* Cor do corpo principal escura */
}

/* Card Footer (Rodapé do Formulário) */
body.dark-mode .card-footer {
    background-color: #222222 !important;
    /* Fundo mais escuro para destaque */
    color: #a9a9a9 !important;
    border-top: 1px solid #4a4a4a;
}

/* Card Aninhado (Plano Atual) */
body.dark-mode .card.bg-white {
    background-color: #333333 !important;
    /* Fundo do card aninhado */
    border: 1px solid #555555 !important;
}

/* Textos dentro do card aninhado */
body.dark-mode .card-body h6,
body.dark-mode .card-body p {
    color: #e0e0e0;
    /* Garante que o texto seja claro */
}

body.dark-mode .card-body .text-muted {
    color: #a9a9a9 !important;
    /* Texto atenuado claro */
}

body.dark-mode .card-body hr {
    border-top: 1px solid #555555;
    /* Cor da linha divisória */
}

/* Badge de Sucesso */
body.dark-mode .badge.bg-success {
    background-color: #28a745 !important;
    /* Verde escuro */
    color: #ffffff !important;
}

/* Botão de Sucesso (Renovar agora) */
body.dark-mode .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1e7e34;
    /* Fundo verde escuro */
    --bs-btn-border-color: #1e7e34;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #218838;
    --bs-btn-hover-border-color: #1c742c;
    --bs-btn-active-bg: #1c742c;
    --bs-btn-active-border-color: #1c742c;
}

/* Container de Alerta/Lista */
/* Ajustes específicos para o cabeçalho 'alert-bar' */



/* Lista de Grupo (List Group) */
body.dark-mode .list-group {
    background-color: #333333;
    /* Fundo da lista */
    border: none !important;
    /* <--- NOVO: Remove bordas externas do list-group */

}

/* Item Individual da Lista */
body.dark-mode .list-group-item {
    background-color: #333333;
    /* Fundo do item individual */
    color: #e0e0e0;
    border-color: #4a4a4a;
    /* Borda escura */
}

/* Texto Secundário (e-mail) */
body.dark-mode .list-group-item small {
    color: #a9a9a9 !important;
    /* Cor clara para o texto pequeno/email */
}

/* Hover/Foco nos Itens da Lista */
body.dark-mode .list-group-item:hover {
    background-color: #3a3a3a;
}

/* Badge de Sucesso (Ex: "Ativo") */
body.dark-mode .badge.bg-success {
    background-color: #28a745 !important;
    /* Verde escuro */
    color: #ffffff !important;
}

/* Botões Info (Editar/Acesso) */
body.dark-mode .btn-info {
    --bs-btn-color: #f0f0f0;
    --bs-btn-bg: #1c7478;
    --bs-btn-border-color: #1c7478;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #218c91;
    --bs-btn-hover-border-color: #218c91;
}

/* Primary Button (Azul Principal) - Adicionar */
body.dark-mode .btn-primary {
    --bs-btn-color: #fff;
    /* Cor do texto (branco) */
    --bs-btn-bg: #1565c0;
    /* Fundo azul escuro */
    --bs-btn-border-color: #1565c0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1e88e5;
    /* Azul um pouco mais claro no hover */
    --bs-btn-hover-border-color: #1e88e5;
    --bs-btn-active-bg: #0d3b7a;
    --bs-btn-active-border-color: #0d3b7a;
}

body.dark-mode .dropdown-menu .dropdown-header h6 {
    color: #ffffff !important;
    /* Força o texto a ser branco puro para destaque */
}

body.dark-mode .alert-button {
    background-color: #333333;
    /* Fundo do corpo da lista */
    color: #e0e0e0;
    border: none !important;
    /* <--- NOVO: Remove bordas do corpo da lista */
}

body.dark-mode .alert-button .danger {
    background-color: #8b2e2e !important;
    /* Vermelho escuro */
    color: #ffffff !important;
}

body.dark-mode .alert-button .success {
    background-color: #1e7e34 !important;
    /* Verde escuro */
    color: #ffffff !important;
}



body.dark-mode .notification-item {
    background-color: #2a2a2a;
    /* fundo escuro */
    color: #e0e0e0;
    /* texto padrão claro */
}

body.dark-mode .notification-item h4,
body.dark-mode .notification-item p {
    color: #e0e0e0;
    /* garante que o texto fique claro */
}

/* Hover */
/* Hover ajustado */
body.dark-mode .notification-item:hover {
    background-color: #3a3a3a !important;
    /* fundo um pouco mais claro */
}

body.dark-mode .notification-item:hover h4,
body.dark-mode .notification-item:hover p {
    color: #f0f0f0 !important;
    /* texto claro, mas não branco puro */
}

/* Ícone */
body.dark-mode .notification-item i {
    color: #5b9bd5;
    /* ajuste a cor do ícone se necessário */
}


/* NeoCube Alert */
body.dark-mode .neocube-alert>div {
    border: 0;
}

body.dark-mode .neocube-alert>div>.alert-bar {
    background-color: #2a2a2a;
    /* Fundo escuro */
    color: #e0e0e0;
    border: none;
    /* <--- NOVO: Remove todas as bordas */
    border-bottom: 1px solid #4a4a4a;
    /* <--- NOVO: Aplica apenas a borda inferior (se desejado) */
    padding: 10px 15px;
}

body.dark-mode .neocube-alert>div>.alert-message {
    background-color: #333333;
    /* Fundo do corpo da lista */
    color: #e0e0e0;
}

body.dark-mode .neocube-alert>div>.alert-button-closex {
    /* O botão de fechar, que geralmente é um 'X' preto */
    color: #e0e0e0;
    background-color: #444444;
}



/* NEOCUBE LOAGING */
body.dark-mode #neocube-loading {
    background-color: rgba(15, 15, 15, 0.8);
}

body.dark-mode #neocube-loading>div>span:nth-child(1) {
    border-top-color: #aeaeae;
    border-bottom-color: #aeaeae;
}

body.dark-mode #neocube-loading>div>span:nth-child(2) {
    color: #aeaeae;
}
/* flash messages */
body.dark-mode .alert-danger {
    background-color: #4a1e1e !important; /* tom de vermelho escuro */
    color: #f8d7da !important; /* texto rosado-claro */
    border-color: #6b2a2a !important; /* borda avermelhada */
}

/* Botão de fechar (X) */
body.dark-mode .alert-danger .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

body.dark-mode .alert-danger .btn-close:hover {
    opacity: 1;
}

body.dark-mode .alert-success {
    background-color: #1f3a2e !important; /* verde escuro elegante */
    color: #d1e7dd !important; /* texto verde-claro */
    border-color: #2e5b45 !important;
}

body.dark-mode .alert-success .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.8 !important;
}
body.dark-mode .alert-success .btn-close:hover {
    opacity: 1 !important;
}

/* WARNING (amarelo) */
body.dark-mode .alert-warning {
    background-color: #4d3b15 !important; /* dourado escuro */
    color: #fff3cd !important; /* texto amarelado */
    border-color: #806a29 !important;
}

body.dark-mode .alert-warning .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.8 !important;
}
body.dark-mode .alert-warning .btn-close:hover {
    opacity: 1 !important;
}
/* fim flash messages */

/* options e lista */
body.dark-mode ul.options,
body.dark-mode .options {
    background-color: #1e1e1e !important; /* fundo escuro sólido */
    border-color: #444 !important;
    color: #e2e2e2 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

/* Itens da lista */
body.dark-mode ul.options li,
body.dark-mode .options li {
    background-color: transparent !important;
    color: #e2e2e2 !important;
}

/* Hover */
body.dark-mode ul.options li:hover,
body.dark-mode .options li:hover {
    background-color: #333 !important;
    color: #fff !important;
}

body.dark-mode ::placeholder {
    color: #b0b0b0; /* cinza mais claro para melhor contraste */
  }

body.dark-mode .neocube-toast-content.bg-warning {
  color: #f8f9fa; /* texto claro no modo escuro */
}



/* PAGINATION */
body.dark-mode .pagination .page-link {
  background-color: #313131;
  color: #d0d0d0;
  border: 1px solid #202020;
  border-radius: 6px;
  transition: all 0.25s ease;
}

body.dark-mode .pagination .page-link:hover {
  background-color: #222;
  color: #fff;
}

body.dark-mode .pagination .page-item.active .page-link {
  background-color: #151515;
  color: #fff;
}



/* BOOTSTRAP TABS */
body.dark-mode .nav-tabs .nav-link {
  background-color: transparent;
  color: #bbb;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .nav-tabs .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #eee;
}

body.dark-mode .nav-tabs .nav-link.active {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 500;
}

/* =========================
   Tab Content - Dark Mode
   ========================= */
body.dark-mode .tab-content {
  background-color: #222; /* fundo suave e levemente contrastante */
  border: 1px solid #333; /* borda sutil e integrada */
  border-radius: 10px; /* cantos levemente arredondados */
  padding: 1.2rem; /* espaçamento interno confortável */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* sombra discreta */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .tab-pane {
  color: #e0e0e0; /* mantém o texto legível */
}

/* Labels e textos internos */
body.dark-mode .tab-content .form-label {
  color: #90c4f8;
}

/* Inputs e selects dentro do tab-content (reforça consistência visual) */
body.dark-mode .tab-content .form-control,
body.dark-mode .tab-content .form-select {
  background-color: #2b2b2b;
  color: #e0e0e0;
  border: 1px solid #444;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.dark-mode .tab-content .form-control:focus,
body.dark-mode .tab-content .form-select:focus {
  background-color: #333;
  border-color: #5b9bd5;
  box-shadow: 0 0 0 0.2rem rgba(138, 154, 255, 0.25);
}

/* Botões */
body.dark-mode .tab-content .btn-primary {
  --bs-btn-bg: #1565c0;
  --bs-btn-hover-bg: #1e88e5;
}

/* =========================
   Login Page - Dark Mode
   ========================= */

/* Login page background */
body.dark-mode .section.register {
  background-color: #1a1a1a;
}

/* Login card */
body.dark-mode .section.register .card {
  background-color: #2a2a2a;
  border: 1px solid #3a3a3a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode .section.register .card-body {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

/* Login logo */
body.dark-mode .section.register .logo span {
  color: #90c4f8;
}

/* Login form headings */
body.dark-mode .section.register h5,
body.dark-mode .section.register .card-title {
  color: #90c4f8;
}

body.dark-mode .section.register p {
  color: #a9a9a9;
}

/* Login form inputs */
body.dark-mode .section.register .form-control {
  background-color: #333333;
  color: #e0e0e0;
  border: 1px solid #555555;
}

body.dark-mode .section.register .form-control:focus {
  background-color: #3a3a3a;
  color: #e0e0e0;
  border-color: #5b9bd5;
  box-shadow: 0 0 0 0.25rem rgba(138, 154, 255, 0.25);
}

body.dark-mode .section.register .form-control::placeholder {
  color: #888888;
}

/* Login form labels */
body.dark-mode .section.register .form-label {
  color: #90c4f8;
}

/* Login form checkboxes */
body.dark-mode .section.register .form-check-input {
  background-color: #333333;
  border-color: #555555;
}

body.dark-mode .section.register .form-check-input:checked {
  background-color: #1565c0;
  border-color: #1565c0;
}

body.dark-mode .section.register .form-check-label {
  color: #90c4f8;
}

/* Login buttons */
body.dark-mode .section.register .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1565c0;
  --bs-btn-border-color: #1565c0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1e88e5;
  --bs-btn-hover-border-color: #1e88e5;
  --bs-btn-active-bg: #0d3b7a;
  --bs-btn-active-border-color: #0d3b7a;
}

/* Login links */
body.dark-mode .section.register a {
  color: #5b9bd5;
}

body.dark-mode .section.register a:hover {
  color: #7ab4e8;
}

/* Login copyright/credits */
body.dark-mode .section.register .credits,
body.dark-mode .section.register .copyright {
  color: #a9a9a9;
}

body.dark-mode .section.register .credits a {
  color: #5b9bd5;
}

/* Login page theme toggle button */
body.dark-mode .section.register .nav-icon {
  color: #90c4f8;
  font-size: 1.5rem;
}

body.dark-mode .section.register .nav-icon:hover {
  color: #5b9bd5;
}

/* Light mode styles for toggle button */
.section.register .nav-icon {
  color: #012970;
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.section.register .nav-icon:hover {
  color: #0d3b7a;
}
/* scroolbar table-responsive */
body.dark-mode .table-responsive {
  scrollbar-color: #555 #1e1e1e; /* Firefox */
}
/* active */
body.dark-mode .list-group-item.active {
  background-color: #0d3b7a;
  border-color: #0d3b7a;
  color: #fff;
}