/* ================================
   BRASIL MEGA TRUCKER - TEMA DARK
   ================================ */

body.dark-mode {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}
.dark-mode body {
  background-color: #1b1b1b;
}
/* Textos e links */
.dark-mode a {
  color: #ffa726 !important;
  transition: color 0.2s ease;
}
.dark-mode a:hover {
  color: #ffb74d !important;
}

/* Cabeçalhos e containers */
.dark-mode header,
.dark-mode .navbar,
.dark-mode .top-bar,
.dark-mode .page-header {
  background-color: #151515 !important;
  border-color: #222 !important;
  color: #f0f0f0 !important;
}

/* Cards, panels, boxes */
.dark-mode .panel,
.dark-mode .card,
.dark-mode .well,
.dark-mode .box,
.dark-mode .content-box {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #ddd !important;
  border-radius: 8px;
}

/* Accordion e collapse */
.dark-mode .panel-heading,
.dark-mode .accordion-header {
  background-color: #222 !important;
  border-color: #333 !important;
}
.dark-mode .panel-body,
.dark-mode .accordion-body {
  background-color: #2a2a2a !important;
  color: #ddd !important;
}

/* Tabelas */
/* =============================
   Tabelas no modo escuro
   ============================= */

.dark-mode table {
  background-color: #2b2b2b !important;
  color: #ddd !important;
  border-color: #444 !important;
  border-collapse: separate;
  border-spacing: 0;
}

/* Cabeçalho */
.dark-mode th {
  background-color: #1f1f1f !important;
  color: #fff !important;
  border-color: #333 !important;
}

/* Linhas normais */
.dark-mode td {
  background-color: transparent !important;
  color: #eee !important;
  border-color: #444 !important;
}

/* Linhas alternadas (striped effect) */
.dark-mode tr:nth-child(odd) {
  background-color: #2b2b2b !important;
}
.dark-mode tr:nth-child(even) {
  background-color: #242424 !important;
}

/* Hover suave */
.dark-mode tr:hover {
  background-color: #3a3a3a !important;
  transition: background-color 0.2s ease;
}

/* Tabelas com classe .table-striped (Bootstrap) */
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #2b2b2b !important;
}
.dark-mode .table-striped > tbody > tr:nth-of-type(even) {
  background-color: #242424 !important;
}

/* Tabelas com classe .table-hover */
.dark-mode .table-hover > tbody > tr:hover {
  background-color: #3a3a3a !important;
}

/* Bordas arredondadas e leve sombra */
.dark-mode table {
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}


/* Inputs e formulários */
.dark-mode input,
.dark-mode select,
.dark-mode textarea,
.dark-mode .form-control {
  background-color: #2b2b2b !important;
  color: #f0f0f0 !important;
  border-color: #3c3c3c !important;
}
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: #aaa !important;
}
.dark-mode .input-group-addon {
  background-color: #333 !important;
  color: #ccc !important;
  border-color: #444 !important;
}

/* Botões */
.dark-mode .btn {
  transition: all 0.2s ease;
}

.dark-mode .btn-default {
  background-color: transparent !important;
  color: #ffa726 !important;
  border: 1px solid #ffa726 !important;
}
.dark-mode .btn-default:hover {
  background-color: #ffa726 !important;
  color: #1e1e1e !important;
}

.dark-mode .btn-primary {
  background-color: transparent !important;
  border: 1px solid #a2a2a2 !important;
  color: #ffffff !important;
}
.dark-mode .btn-primary:hover {
  background-color: #2c2c2c !important;
  color: #fff !important;
}
.dark-mode .btn-secondary {
  background-color: transparent !important;
  border: 1px solid #e59a3d !important;
  color: #e59a3d !important;
}
.dark-mode .btn-secondary:hover {
  background-color: #753f1f !important;
  color: #dddddd !important;
}


.dark-mode .btn-success {
  background-color: transparent !important;
  border: 1px solid #28a745 !important;
  color: #28a745 !important;
}
.dark-mode .btn-success:hover {
  background-color: #28a745 !important;
  color: #fff !important;
}

.dark-mode .btn-danger {
  background-color: transparent !important;
  border: 1px solid #dc3545 !important;
  color: #dc3545 !important;
}
.dark-mode .btn-danger:hover {
  background-color: #dc3545 !important;
  color: #fff !important;
}

.dark-mode .btn-info {
  background-color: transparent !important;
  border: 1px solid #17a2b8 !important;
  color: #17a2b8 !important;
}
.dark-mode .btn-info:hover {
  background-color: #17a2b8 !important;
  color: #fff !important;
}
.dark-mode .btn-warning {
  background-color: transparent !important;
  border: 1px solid #ff7600 !important;
  color: #ffffff !important;
}
.dark-mode .btn-warning:hover {
  background-color: #ff7600 !important;
  color: #fff !important;
}

/* Alertas */
.dark-mode .alert {
  border: none !important;
  border-radius: 6px;
}
.dark-mode .alert-success {
  background-color: #264d2c !important;
  color: #b2ffb2 !important;
}
.dark-mode .alert-danger {
  background-color: #4d2626 !important;
  color: #ffb2b2 !important;
}
.dark-mode .alert-warning {
  background-color: #4d3a1f !important;
  color: #ffd89c !important;
}
.dark-mode .alert-info {
  background-color: #1f3a4d !important;
  color: #a7e0ff !important;
}

/* Modais */
.dark-mode .modal-content {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}
.dark-mode .modal-header,
.dark-mode .modal-footer {
  background-color: #222 !important;
  border-color: #333 !important;
}

/* Dropdowns e menus */
.dark-mode .dropdown-menu {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border-color: #333 !important;
}
.dark-mode .dropdown-menu > li > a:hover {
  background-color: #333 !important;
  color: #ffa726 !important;
}

/* Footer */
.dark-mode footer {
  background-color: #151515 !important;
  color: #aaa !important;
}

/* Scrollbar */
.dark-mode ::-webkit-scrollbar {
  width: 10px;
}
.dark-mode ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}
.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* Breadcrumb */
.dark-mode .breadcrumb {
  background-color: #2b2b2b !important;
  color: #ccc !important;
  border-radius: 6px;
}
.dark-mode .breadcrumb > li > a {
  color: #ffa726 !important;
}
.dark-mode .breadcrumb > li + li::before {
  color: #777 !important;
}

/* Widgets e boxes do dashboard */
.dark-mode .widget,
.dark-mode .widget-content,
.dark-mode .widget-title,
.dark-mode .x_panel,
.dark-mode .x_content {
  background-color: transparent !important;
  color: #ddd !important;
  border-color: #3a3a3a !important;
  border-radius: 8px;
}
.dark-mode .widget h3,
.dark-mode .widget h4,
.dark-mode .widget h5 {
  color: #fff !important;
}

/* Page Content Wrap */
.dark-mode .page-content-wrap,
.dark-mode .page-container,
.dark-mode .content-wrapper {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

/* Títulos ou cabeçalhos dentro da página */
.dark-mode .page-title,
.dark-mode .page-header h1,
.dark-mode .page-header h2 {
  color: #f5f5f5 !important;
}

/* Borda de separadores e divisores */
.dark-mode hr,
.dark-mode .divider {
  border-color: #333 !important;
}

/* ===========================
   Navegação horizontal / painel
   =========================== */
.dark-mode .x-navigation,
.dark-mode .x-navigation-horizontal,
.dark-mode .x-navigation-panel {
  background-color: #101010 !important;
  border-color: #1c1c1c !important;
  color: #ddd !important;
}

.dark-mode .x-navigation a,
.dark-mode .x-navigation-horizontal a {
  color: #e0e0e0 !important;
}

.dark-mode .x-navigation a:hover,
.dark-mode .x-navigation-horizontal a:hover {
  background-color: #1c1c1c !important;
  color: #ffa726 !important;
}

/* Ícones e menus ativos */
.dark-mode .x-navigation li.active > a,
.dark-mode .x-navigation-horizontal li.active > a {
  background-color: #222 !important;
  color: #ffa726 !important;
}


/* ===========================
   Hover / efeitos sutis
   =========================== */
.dark-mode .x-navigation li:hover,
.dark-mode .x-navigation-horizontal li:hover {
  background-color: #181818 !important;
}


/* ===========================
   Perfil do usuário (xn-profile)
   =========================== */
.dark-mode .xn-profile {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
  border-bottom: 1px solid #222 !important;
}

/* Cabeçalho do perfil (foto + nome) */
.dark-mode .xn-profile .profile-data {
  background-color: #121212 !important;
  color: #fff !important;
}

/* Nome e subtítulo */
.dark-mode .xn-profile .profile-data-name {
  color: #f5f5f5 !important;
  font-weight: 600;
}
.dark-mode .xn-profile .profile-data-title {
  color: #bbb !important;
  font-size: 12px;
}

/* ===============================
   PERFIL (xn-profile)
   =============================== */
.dark-mode .xn-profile {
    background-color: #0f0f0f !important; /* fundo preto escuro */
    border-bottom: 1px solid #1e1e1e !important;
}

.dark-mode .xn-profile .profile {
    background-color: #0f0f0f !important; /* garante fundo escuro também */
}

.dark-mode .xn-profile .profile-data {
    background-color: #0f0f0f !important;
}

.dark-mode .xn-profile .profile-data-name {
    color: #fff !important;
    font-weight: 600;
}

.dark-mode .xn-profile .profile-data-title {
    color: #bbb !important;
}


/* 🔹 ALERTAS */
body.dark-mode .alert {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #ddd !important;
}
body.dark-mode .alert-info {
    background-color: #1f2a36 !important;
    border-color: #2e3c4a !important;
    color: #a3c8ff !important;
}
body.dark-mode .alert-success {
    background-color: #1b2d22 !important;
    border-color: #2f5138 !important;
    color: #9ce6b4 !important;
}
body.dark-mode .alert-warning {
    background-color: #2f2a1b !important;
    border-color: #5c4a1d !important;
    color: #f1d57b !important;
}
body.dark-mode .alert-danger {
    background-color: #321b1b !important;
    border-color: #582121 !important;
    color: #f29c9c !important;
}

/* ===============================
   PAINÉIS — AJUSTE FINAL DE LEGIBILIDADE E CORES NO DARK MODE
   =============================== */
body.dark-mode .panel {
    background-color: #1c1c1c !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    color: #e0e0e0 !important;
}

/* Cabeçalhos gerais */
body.dark-mode .panel-heading {
    background-color: #2a2a2a !important;
    border-bottom: 1px solid #3a3a3a !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Corpo e rodapé */
body.dark-mode .panel-body {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}
body.dark-mode .panel-footer {
    background-color: #2a2a2a !important;
    border-top: 1px solid #3a3a3a !important;
    color: #ccc !important;
}

/* VARIANTES COLORIDAS AJUSTADAS PRO DARK MODE */
body.dark-mode .panel-success {
    border-color: #2e7d32 !important;
}
body.dark-mode .panel-success > .panel-heading {
    background-color: #255c28 !important; /* Verde escuro agradável */
    color: #b7ffb7 !important; /* Verde claro pro texto */
}

body.dark-mode .panel-danger {
    border-color: #b71c1c !important;
}
body.dark-mode .panel-danger > .panel-heading {
    background-color: #5a2323 !important; /* Vermelho escuro */
    color: #ffb3b3 !important;
}

body.dark-mode .panel-warning {
    border-color: #f57f17 !important;
}
body.dark-mode .panel-warning > .panel-heading {
    background-color: #5a4215 !important; /* Dourado queimado */
    color: #ffe8a3 !important;
}

body.dark-mode .panel-info {
    border-color: #0288d1 !important;
}
body.dark-mode .panel-info > .panel-heading {
    background-color: #204060 !important; /* Azul escuro elegante */
    color: #b3e5fc !important;
}


/* 🔹 LINKS E ÍCONES INTERNOS */
body.dark-mode .panel a,
body.dark-mode .alert a {
    color: #ffb84d !important;
}
body.dark-mode .panel a:hover,
body.dark-mode .alert a:hover {
    color: #ffc86d !important;
}

/* ===============================
   TITULOS E CABEÇALHOS NO DARK MODE
   =============================== */

/* Todos os títulos principais dentro do dark-mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #f1f1f1 !important; /* Cor clara, suave e legível */
}

/* Dentro de painéis, mantém contraste com header */
body.dark-mode .panel-heading h1,
body.dark-mode .panel-heading h2,
body.dark-mode .panel-heading h3,
body.dark-mode .panel-heading h4 {
    color: #ffffff !important; /* Branco puro para destaque no header */
}

/* Títulos secundários dentro do corpo do painel */
body.dark-mode .panel-body h1,
body.dark-mode .panel-body h2,
body.dark-mode .panel-body h3,
body.dark-mode .panel-body h4 {
    color: #e0e0e0 !important; /* Um tom abaixo do branco pra não brilhar demais */
}


/* ===============================
   PAGE CONTENT E BREADCRUMB — DARK MODE
   =============================== */

/* Fundo geral da área principal */
body.dark-mode .page-content,
body.dark-mode .page-content-wrap {
    background-color: #141414 !important; /* Cinza bem escuro */
    color: #e0e0e0 !important;
    border: none !important;
}

/* Ajusta containers e seções internas */
body.dark-mode .page-content-wrap .row,
body.dark-mode .page-content-wrap .panel {
    background-color: #1b1b1b !important;
    border-color: #2a2a2a !important;
}

/* Breadcrumb */
body.dark-mode .breadcrumb {
    background-color: #1c1c1c !important;
    border: 1px solid #2c2c2c !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: #bbb !important;
}

/* Itens do breadcrumb */
body.dark-mode .breadcrumb > li > a {
    color: #f4f4f4 !important;
}
body.dark-mode .breadcrumb > li + li:before {
    color: #888 !important; /* Separador mais discreto */
}
body.dark-mode .breadcrumb > .active {
    color: #ff9900 !important; /* Cor de destaque (laranja do site) */
}

/* Remove o efeito de “borda clara nas pontas” */
body.dark-mode .breadcrumb:before,
body.dark-mode .breadcrumb:after {
    display: none !important;
}

/* Ajuste de sombras e fundos genéricos */
body.dark-mode .content-frame,
body.dark-mode .content-frame-body {
    background-color: #141414 !important;
    border-color: #2a2a2a !important;
}


/* ===============================
   CORREÇÃO DE FUNDOS ENVOLVENDO .row
   =============================== */

/* Fundo das linhas e colunas */
body.dark-mode .row,
body.dark-mode .row > div {
    background: transparent !important;
    border-color: transparent !important;
}

/* Seções internas que envolvem widgets */
body.dark-mode .page-content-wrap .row > div {
    background: transparent !important;
}

/* Remove sombras e brancos forçados */
body.dark-mode .row [class*="col-"] {
    box-shadow: none !important;
    background: transparent !important;
}

/* =======================================================
   WIDGETS — MODO ESCURO COMPLETO (FINAL AJUSTADO)
   ======================================================= */

/* ===== BASE GERAL ===== */
body.dark-mode .widget {
    border-radius: 10px !important;
    overflow: hidden;
    padding: 10px 1px !important;
    min-height: 90px !important;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #e0e0e0 !important;
}

/* ===== ÍCONE ===== */
body.dark-mode .widget .widget-item-left {
    background: transparent !important;   /* sem fundo */
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px !important;
    padding: 10px !important;
    color: #ff9900 !important;            /* laranja de destaque */
    flex-shrink: 0;
}

/* ===== CONTEÚDO ===== */
body.dark-mode .widget .widget-data {
    flex-grow: 1;
    padding: 5px 10px !important;
}

body.dark-mode .widget .widget-int {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    color: #f2f2f2 !important;
}

body.dark-mode .widget .widget-title {
    font-size: 13px !important;
    color: #ff9900 !important;
    margin-bottom: 2px !important;
    text-transform: none;
}

body.dark-mode .widget .widget-subtitle {
    font-size: 12px !important;
    color: #bdbdbd !important;
}

/* ===== TIPOS ===== */

/* PRIMARY — Preto fosco e limpo */
body.dark-mode .widget-primary {
    background: #0d0d0d !important;
    border: 1px solid #1f1f1f !important;
}

/* DEFAULT — Cinza escuro com leve borda clara */
body.dark-mode .widget-default {
    background: #1b1b1b !important;
    border: 1px solid #aaa !important;
}

/* CONTROLS — Mesmo padrão do default */
body.dark-mode .widget-controls {
    background: #1a1a1a !important;
    border: 1px solid #aaa !important;
}

/* ===== INTERAÇÃO ===== */
body.dark-mode .widget:hover {
    background: #121212 !important;
    border-color: #ff9900 !important;
    transform: translateY(-1px);
}

/* Ícone em hover — brilho sutil */
body.dark-mode .widget:hover .widget-item-left {
    color: #ffb84d !important;
    transform: scale(1.05);
}

/* ===== ALINHAMENTO ENTRE WIDGETS ===== */
body.dark-mode .row [class*="col-"] .widget {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* ===== AJUSTE DE FUNDO EM LINHAS ===== */
body.dark-mode .row,
body.dark-mode .row > div,
body.dark-mode .row [class*="col-"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =======================================================
   PAGE CONTAINER — UNIFICAÇÃO DO FUNDO NO MODO ESCURO
   ======================================================= */

/* Fundo principal da área de conteúdo */
body.dark-mode .page-container,
body.dark-mode .page-content,
body.dark-mode .page-content-wrap,
body.dark-mode .page-inner,
body.dark-mode .content-frame,
body.dark-mode .content-frame-body {
    background-color: #141414 !important; /* mesmo tom base */
    color: #e0e0e0 !important;
    border: none !important;
}

/* Remove transições de tons diferentes entre seções */
body.dark-mode .page-content-wrap .row,
body.dark-mode .page-content-wrap .panel,
body.dark-mode .page-content-wrap [class*="col-"] {
    background: transparent !important;
}

/* Ajusta o espaçamento inferior pra não criar "faixa" */
body.dark-mode .page-content,
body.dark-mode .page-container {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

/* Corrige possíveis blocos com sombra ou gradiente */
body.dark-mode .page-container:before,
body.dark-mode .page-container:after,
body.dark-mode .page-content:before,
body.dark-mode .page-content:after {
    display: none !important;
    content: none !important;
}

/* Corrige cor da área final (rodapé ou vazio) */
body.dark-mode footer,
body.dark-mode .page-footer,
body.dark-mode .page-content > .row:last-child {
    background-color: #141414 !important;
    border-top: 1px solid #1f1f1f !important;
}


/* =======================================================
   MENU LATERAL (XN-NAVIGATION) — DARK MODE
   ======================================================= */

/* Fundo geral da navegação */
body.dark-mode .x-navigation,
body.dark-mode .x-navigation ul {
    background-color: #0e0e0e !important;
    border-color: #1e1e1e !important;
}

/* Links principais */
body.dark-mode .x-navigation li > a {
    color: #e0e0e0 !important;
    background-color: transparent !important;
    border-bottom: 1px solid #1f1f1f !important;
    transition: all 0.2s ease-in-out;
}

/* Ícones e textos */
body.dark-mode .x-navigation li > a .fa,
body.dark-mode .x-navigation li > a .xn-text {
    color: #e0e0e0 !important;
}

/* Hover e ativo */
body.dark-mode .x-navigation li:hover > a,
body.dark-mode .x-navigation li.active > a {
    background-color: #1a1a1a !important;
    color: #ff9900 !important; /* mantém destaque laranja */
}
body.dark-mode .x-navigation li:hover > a .fa,
body.dark-mode .x-navigation li.active > a .fa,
body.dark-mode .x-navigation li:hover > a .xn-text,
body.dark-mode .x-navigation li.active > a .xn-text {
    color: #ff9900 !important;
}

/* Submenu aberto (xn-openable) */
body.dark-mode .x-navigation li.xn-openable > ul {
    background-color: #141414 !important;
    border-top: 0px solid #222 !important;
    border-bottom: 0px solid #222 !important;
}

/* Links internos (submenu) */
body.dark-mode .x-navigation li.xn-openable > ul > li > a {
    background-color: transparent !important;
    color: #ccc !important;
    border: none !important;
    padding-left: 35px !important; /* recuo mais elegante */
}
body.dark-mode .x-navigation li.xn-openable > ul > li > a:hover {
    color: #ff9900 !important;
    background-color: #1b1b1b !important;
}

/* Label (NOVO, etc.) */
body.dark-mode .x-navigation li a .label {
    background-color: #ff9900 !important;
    color: #000 !important;
}

/* Ícones e divisores */
body.dark-mode .x-navigation .xn-icon-button {
    background-color: #1b1b1b !important;
    color: #e0e0e0 !important;
}
body.dark-mode .x-navigation li.xn-title {
    color: #888 !important;
    background-color: #111 !important;
}

/* Remove linhas e sombreados brancos */
body.dark-mode .x-navigation li,
body.dark-mode .x-navigation li ul li {
    box-shadow: none !important;
}

/* =======================================
   TOPO (x-navigation-panel) - BOTÕES DIREITA
   ======================================= */

body.dark-mode .x-navigation.x-navigation-horizontal.x-navigation-panel {
  background-color: #0e0e0e !important; /* fundo da barra superior */
  border-bottom: 0px solid #222 !important;
}

/* Botões de ícones no topo (logout, notificações, perfil, menu suspenso) */
body.dark-mode .x-navigation.x-navigation-horizontal.x-navigation-panel .xn-icon-button > a {
  background-color: #0e0e0e !important;  /* fundo preto */
  color: #ddd !important;              /* ícone em cinza claro */
  border: 0px solid #1f1f1f !important;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

body.dark-mode .x-navigation.x-navigation-horizontal.x-navigation-panel .xn-icon-button > a:hover {
  background-color: #1c1c1c !important; /* cinza escuro ao hover */
  color: #ffa726 !important;            /* laranja no hover */
  border-color: #333 !important;
}

/* Dropdown do botão de configurações */
body.dark-mode .x-navigation.x-navigation-horizontal.x-navigation-panel .dropdown-menu {
  background-color: #181818 !important;
  border: 1px solid #333 !important;
}

body.dark-mode .x-navigation.x-navigation-horizontal.x-navigation-panel .dropdown-menu > li > a {
  color: #ddd !important;
  transition: background-color 0.2s ease;
}

body.dark-mode .x-navigation.x-navigation-horizontal.x-navigation-panel .dropdown-menu > li > a:hover {
  background-color: #222 !important;
  color: #ffa726 !important;
}

/* Corrige tooltips sobre fundo escuro */
body.dark-mode .tooltip-inner {
  background-color: #222 !important;
  color: #eee !important;
  border: 1px solid #444 !important;
}

body.dark-mode .tooltip-arrow {
  border-bottom-color: #222 !important;
}

/* LOGIN */
.dark-mode .login-container {
    float: left;
    width: 100%;
    min-height: 100%;
    background: url("../img/bg.png") left top repeat #202020;
}

.dark-mode .x-dashboard .page-container .page-content {
    margin-left: 0px;
    background: #000000;
}

/* =======================
   PRELOADER (modo escuro)
   ======================= */

.dark-mode .page-loading-frame {
  background: #121212 !important;
  background-image: none !important; /* remove textura clara */
}

.dark-mode .page-loading-frame.v2 {
  background: rgba(10, 10, 10, 0.95) !important;
  background-image: none !important;
}

/* Loader no centro */
.dark-mode .page-loading-frame .page-loading-loader {
  -webkit-animation: rotate 2.0s infinite linear;
  animation: rotate 2.0s infinite linear;
}

/* Pontos animados do loader */
.dark-mode .page-loading-frame .page-loading-loader .dot1,
.dark-mode .page-loading-frame .page-loading-loader .dot2 {
  background-color: #f7931e !important; /* destaque laranja */
  box-shadow: 0 0 10px #f7931e80;
}

/* Transição suave ao sair */
.dark-mode .page-loading-frame.removed {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.dark-mode .page-loading-frame.removed .page-loading-loader {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Corrige a barra branca que aparece no topo */
.dark-mode .page-loading-bar,
.dark-mode .page-loading-frame::before,
.dark-mode .page-loading-frame::after {
  background-color: #f7931e !important; /* laranja do tema */
  border-color: #f7931e !important;
  box-shadow: 0 0 6px #f7931e80;
}

/* Caso a barra seja um elemento filho direto */
.dark-mode .page-loading-frame > div,
.dark-mode .page-loading-frame > span {
  background-color: #f7931e !important;
}

/* Oculta qualquer transição de branco rápido */
.dark-mode .page-loading-frame.removed,
.dark-mode .page-loading-frame.removed::before,
.dark-mode .page-loading-frame.removed::after {
  background-color: transparent !important;
}

/* Container da barra */
.dark-mode .progress {
  background-color: #0a0a0a;
  border-radius: 8px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
  overflow: hidden;
  height: 22px;
  position: relative;
}

/* Base da barra com efeito neon nas bordas */
.dark-mode .progress-bar {
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 8px;
  box-shadow: 0 0 10px currentColor, inset 0 0 10px currentColor;
  position: relative;
  overflow: hidden;
  animation: neon-pulse 1.5s ease-in-out infinite alternate;
  transition: width 0.4s ease;
}

/* Efeito de animação listrada (movimento) */
.dark-mode .progress-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 10px,
    rgba(255, 255, 255, 0.05) 10px,
    rgba(255, 255, 255, 0.05) 20px
  );
  animation: progress-stripes 1s linear infinite;
  pointer-events: none;
}

/* Cores NEON específicas */
.dark-mode .progress-bar-success {
  color: #00ff99;
  text-shadow: 0 0 10px #00ff99;
}
.dark-mode .progress-bar-danger {
  color: #ff0040;
  text-shadow: 0 0 10px #ff0040;
}
.dark-mode .progress-bar-warning {
  color: #ffaa00;
  text-shadow: 0 0 10px #ffaa00;
}
.dark-mode .progress-bar-info {
  color: #00ccff;
  text-shadow: 0 0 10px #00ccff;
}

/* Listras em movimento */
@keyframes progress-stripes {
  from { background-position: 40px 0; }
  to { background-position: 0 0; }
}

/* Brilho pulsante do neon */
@keyframes neon-pulse {
  0% {
    box-shadow: 0 0 5px currentColor, 0 0 15px currentColor, inset 0 0 5px currentColor;
  }
  100% {
    box-shadow: 0 0 20px currentColor, 0 0 40px currentColor, inset 0 0 15px currentColor;
  }
}
.dark-mode .progress-bar {
  background: rgba(255,255,255,0.03);
}

/* Modo escuro - botão de fechar modal */
.dark-mode .modal-header .close {
  color: #ccc !important;
  opacity: 0.8;
  text-shadow: none;
  transition: all 0.2s ease-in-out;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
}

/* Hover com brilho neon sutil */
.dark-mode .modal-header .close:hover {
  color: #e32222 !important;
  opacity: 1;
  text-shadow: 0 0 8px #ff0000, 0 0 15px #ff0000;
  transform: scale(1.1);
}

/* Ajuste para o botão não se deslocar */
.dark-mode .modal-header {
  border-bottom: 1px solid #333;
}

/* Garante fundo escuro no header e corpo do modal */
.dark-mode .modal-content {
  background-color: #1a1a1a;
  color: #e0e0e0;
  border: 1px solid #333;
}

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

.dark-mode .modal-footer {
  background-color: #181818;
  border-top: 1px solid #333;
}
/* Base da paginação */
.dark-mode .pagination {
  background: transparent;
  border: none;
}

/* Itens padrão */
.dark-mode .pagination > li > a,
.dark-mode .pagination > li > span {
  background-color: #1e1e1e;
  color: #ccc;
  border: 1px solid #333;
  transition: all 0.2s ease-in-out;
}

/* Hover */
.dark-mode .pagination > li > a:hover,
.dark-mode .pagination > li > span:hover {
  background-color: #2b2b2b;
  color: #00ffcc; /* leve brilho neon azulado */
  border-color: #00ffcc;
  box-shadow: 0 0 6px #00ffcc80;
}

/* Página ativa */
.dark-mode .pagination > .active > a,
.dark-mode .pagination > .active > span,
.dark-mode .pagination > .active > a:hover,
.dark-mode .pagination > .active > span:hover,
.dark-mode .pagination > .active > a:focus,
.dark-mode .pagination > .active > span:focus {
  background-color: #00ffcc; /* neon */
  border-color: #00ffcc;
  color: #000; /* contraste com o fundo neon */
  box-shadow: 0 0 8px #00ffcc, 0 0 12px #00ffcc;
}

/* Botões desabilitados */
.dark-mode .pagination > .disabled > a,
.dark-mode .pagination > .disabled > span {
  background-color: #151515;
  color: #555;
  border-color: #333;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ======== BALÃO (InfoWindow) ======== */
/* Fundo principal do balão */
.dark-mode .gm-style-iw-c {
  background: #0d0d0d !important;
  color: #fff !important;
  border: 1px solid #00ffff !important;
  box-shadow: 0 0 12px #00ffff80 !important;
  border-radius: 10px !important;
}

/* Remove espaços brancos internos */
.dark-mode .gm-style-iw-d {
  background: transparent !important;
  color: #fff !important;
}

/* Tira o fundo branco que o Google injeta após o texto */
.dark-mode .gm-style-iw-d > div {
  background: transparent !important;
}

/* Corrige botão de fechar */
.dark-mode .gm-ui-hover-effect {
  filter: invert(1) hue-rotate(180deg) !important;
  background: none !important;
  border: none !important;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.dark-mode .gm-ui-hover-effect:hover {
  opacity: 1;
}

/* Borda neon suave */
.dark-mode .gm-style-iw-c::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 0 15px #00ffff60, 0 0 25px #00ffff40;
  pointer-events: none;
}
.dark-mode .gm-style-iw-c,
.dark-mode .gm-style-iw-d,
.dark-mode .gm-style-iw-d > div {
  background: transparent !important;
  color: #fff !important;
}

.dark-mode .gm-style-iw-c {
  border: 1px solid #00ffff !important;
  box-shadow: 0 0 15px #00ffffa0 !important;
  border-radius: 10px !important;
}

.dark-mode .gm-ui-hover-effect {
  filter: invert(1) hue-rotate(180deg) !important;
  background: none !important;
  border: none !important;
}

/* Container das abas */
.dark-mode .nav-tabs {
  border-bottom: 1px solid #2a2a2a;
  background: transparent;
}

/* Abas normais */
.dark-mode .nav-tabs > li > a {
  background-color: #141414 !important;
  color: #ccc !important;
  border: 1px solid #2a2a2a !important;
  border-bottom: none !important;
  margin-right: 4px;
  border-radius: 6px 6px 0 0;
  transition: all 0.2s ease;
}

/* Hover */
.dark-mode .nav-tabs > li > a:hover {
  background-color: #1d1d1d !important;
  color: #fff !important;
  border-color: #444 !important;
}

/* Aba ativa */
.dark-mode .nav-tabs > li.active > a,
.dark-mode .nav-tabs > li.active > a:focus,
.dark-mode .nav-tabs > li.active > a:hover {
  background-color: #0d0d0d !important;
  color: #fff !important;
  border-color: #ed894f !important; /* neon / cor destaque */
  border-bottom: 1px solid #0d0d0d !important;
  box-shadow: 0 -2px 8px #ff5e0055;
}

/* Conteúdo das abas */
.dark-mode .tab-content {
  background-color: transparent;
  border: transparent;
  border-top: none;
  padding: 1px;
  color: #ff530100;
  border-radius: 0 0 8px 8px;
}

/* Thumbnail no modo escuro */
.dark-mode .thumbnail {
  background-color: #0d0d0d !important;
  border: 1px solid #2a2a2a !important;
  color: #ddd !important;
  box-shadow: none;
}

/* Remove fundo branco interno (imagens + caption) */
.dark-mode .thumbnail img {
  background: transparent !important;
}

/* Caption do thumbnail */
.dark-mode .thumbnail .caption {
  background: transparent !important;
  color: #ddd !important;
}

/* Títulos dentro do thumbnail */
.dark-mode .thumbnail h1,
.dark-mode .thumbnail h2,
.dark-mode .thumbnail h3,
.dark-mode .thumbnail h4,
.dark-mode .thumbnail h5,
.dark-mode .thumbnail h6 {
  color: #fff !important;
}

.dark-mode .thumbnail {
  background: rgba(20, 20, 20, 0.6) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px;
}