/* app/dist/css/dark-neutral.css
 * Re-tinta o tema dark do template (MaterialPro) de AZUL (#2A3447/#333F55/#465670)
 * para um NEUTRO near-black. Carregado DEPOIS de style-dark.min.css e só ativo
 * sob html.dark-theme. As cores batem com os tokens --zl-* de theme-vars.css.
 *
 * Paleta neutra fria (DESIGN.md):
 *   page      #1d1d1f
 *   surface   #272729   (cards, sidebar, header, inputs, dropdowns)
 *   surface-2 #2a2a2c   (hovers, painéis sutis)
 *   border    #38383a
 *   text      #e8e8ed
 *   muted     #a1a1a6
 */

/* ---- 1. Core Bootstrap vars (cobre cards, dropdowns, modais, tabelas, inputs,
 *         offcanvas, list-group, accordion e tudo que usa var(--bs-*)) ---- */
html.dark-theme {
  --bs-body-bg: #1d1d1f;
  --bs-body-bg-rgb: 29, 29, 31;
  --bs-body-color: #e8e8ed;
  --bs-body-color-rgb: 232, 232, 237;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: #e8e8ed;
  --bs-card-bg: #272729;
  --bs-card-color: #e8e8ed;
  --bs-border-color: #38383a;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-secondary-bg: #2a2a2c;
  --bs-secondary-color: #a1a1a6;
  --bs-tertiary-bg: #272729;
  --bs-tertiary-color: #a1a1a6;
  --bs-secondary-bg-rgb: 42, 42, 44;
  --bs-tertiary-bg-rgb: 39, 39, 41;
}

/* ---- 2. Fundo da página (vence o background-color:#2a3447!important do body) ---- */
html.dark-theme body {
  background-color: #1d1d1f !important;
  color: #e8e8ed;
}

/* ---- 3. Sidebar ---- */
html.dark-theme .left-sidebar {
  background-color: #252527 !important;
  border-right-color: #38383a !important;
}
html.dark-theme .left-sidebar .nav-small-cap { color: #a1a1a6; }
html.dark-theme .left-sidebar .sidebar-nav ul > .sidebar-item .sidebar-link { color: #c7c7cc; }
html.dark-theme .left-sidebar .sidebar-nav ul > .sidebar-item .sidebar-link.has-arrow::after { border-color: #a1a1a6; }
html.dark-theme .fixed-profile { background-color: #272729 !important; }

/* ---- 4. Header / navbar ---- */
html.dark-theme .app-header,
html.dark-theme .app-header .navbar,
html.dark-theme .page-wrapper[data-layout=vertical] .app-header.fixed-header .navbar {
  background-color: #252527 !important;
}
html.dark-theme .app-header .navbar .nav-link { color: #c7c7cc; }

/* ---- 5. Cards e superfícies hardcoded em azul ---- */
html.dark-theme .card { background-color: #272729; }
html.dark-theme .card .card,
html.dark-theme .bg-light,
html.dark-theme .table .bg-light { background-color: #2a2a2c !important; }

/* Classes utilitárias do Bootstrap que travam fundo branco e não seguem o dark */
html.dark-theme .bg-white { background-color: #272729 !important; color: #e8e8ed; }
html.dark-theme .table-light,
html.dark-theme .table-light > th,
html.dark-theme .table-light > td {
  --bs-table-bg: #2a2a2c;
  --bs-table-color: #e8e8ed;
  --bs-table-border-color: #38383a;
  background-color: #2a2a2c;
  color: #e8e8ed;
}

/* ---- 6. Inputs / selects / textarea ---- */
html.dark-theme .form-control,
html.dark-theme .form-select {
  background-color: #272729;
  border-color: #38383a;
  color: #e8e8ed;
}
html.dark-theme .form-control::placeholder { color: #8a8a8a; }
html.dark-theme .form-control:focus,
html.dark-theme .form-select:focus {
  background-color: #272729;
  border-color: #4a4a4a;
  color: #e8e8ed;
}

/* ---- 7. Dropdowns / menus ---- */
html.dark-theme .dropdown-menu {
  background-color: #272729;
  border-color: #38383a;
}
html.dark-theme .dropdown-item { color: #d0d0d0; }
html.dark-theme .dropdown-item:hover,
html.dark-theme .dropdown-item:focus { background-color: #2a2a2c; color: #ffffff; }
html.dark-theme .dropdown-divider { border-color: #38383a; }

/* ---- 8. Tabelas ---- */
html.dark-theme .table { --bs-table-bg: transparent; color: #e8e8ed; border-color: #38383a; }
html.dark-theme .table th,
html.dark-theme .table td { border-color: #38383a; }
html.dark-theme .table thead th { color: #c7c7cc; }

/* ---- 9. Bordas azuis remanescentes (#333f55 / #465670) em utilitários ---- */
html.dark-theme .border,
html.dark-theme .border-top,
html.dark-theme .border-bottom,
html.dark-theme .border-start,
html.dark-theme .border-end { border-color: #38383a !important; }

/* ---- 10. Botões light/ghost que ficavam azulados ---- */
html.dark-theme .btn-light,
html.dark-theme .btn.show {
  background-color: #2a2a2c;
  border-color: #38383a;
  color: #e8e8ed;
}
html.dark-theme .btn-light:hover { background-color: #303030; border-color: #3a3a3a; }

/* ---- 11. Offcanvas / modais ---- */
html.dark-theme .offcanvas,
html.dark-theme .modal-content { background-color: #272729; color: #e8e8ed; }
html.dark-theme .modal-header,
html.dark-theme .modal-footer { border-color: #38383a; }

/* ---- 12. Texto secundário do template (era azulado #7c8fac) ---- */
html.dark-theme .text-muted,
html.dark-theme .text-dark { color: #a1a1a6 !important; }

/* ---- 13. Componentes Bootstrap usados nas telas de cadastro (clientes etc.) ---- */

/* Botão de fechar (X) do modal: por padrão é um SVG escuro -> invisível no dark */
html.dark-theme .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Modais */
html.dark-theme .modal-content {
  --bs-modal-bg: #272729;
  --bs-modal-color: #e8e8ed;
  --bs-modal-border-color: #38383a;
  --bs-modal-header-border-color: #38383a;
  --bs-modal-footer-border-color: #38383a;
}

/* Abas (nav-underline / nav-tabs) */
html.dark-theme .nav-underline .nav-link,
html.dark-theme .nav-tabs .nav-link { color: #a1a1a6; }
html.dark-theme .nav-underline .nav-link:hover,
html.dark-theme .nav-tabs .nav-link:hover { color: #e8e8ed; }
html.dark-theme .nav-underline .nav-link.active { color: #e8e8ed; }
html.dark-theme .nav-tabs .nav-link.active {
  color: #e8e8ed;
  background-color: #272729;
  border-color: #38383a #38383a #272729;
}
html.dark-theme .nav-tabs { border-bottom-color: #38383a; }

/* Tabelas com borda */
html.dark-theme .table-bordered > :not(caption) > * > * { border-color: #38383a; }
html.dark-theme .table > :not(caption) > * > * { color: #e8e8ed; }

/* input-group: addons e botões anexados */
html.dark-theme .input-group-text {
  background-color: #2a2a2c;
  border-color: #38383a;
  color: #c7c7cc;
}

/* Botões outline (secondary/dark) ficavam escuros demais */
html.dark-theme .btn-outline-secondary {
  color: #c7c7cc;
  border-color: #3a3a3a;
}
html.dark-theme .btn-outline-secondary:hover {
  background-color: #2a2a2c;
  border-color: #4a4a4a;
  color: #ffffff;
}
html.dark-theme .btn-outline-dark {
  color: #c7c7cc;
  border-color: #3a3a3a;
}
html.dark-theme .btn-outline-dark:hover {
  background-color: #2a2a2c;
  color: #ffffff;
}

/* Inputs desabilitados: mais escuros mas ainda legíveis */
html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly] {
  background-color: #161616;
  color: #a1a1a6;
}

/* Cabeçalho de card: divisória visível */
html.dark-theme .card-header { border-bottom-color: #38383a; }

/* Labels de formulário legíveis */
html.dark-theme .form-label,
html.dark-theme .col-form-label { color: #d0d0d0; }