/* Tema Lite - Cores claras */
:root {
  --dc-primary: #6c757d;
  --dc-success: #1c84c6;
  --dc-info: #23c6c8;
  --dc-warning: #f8ac59;
  --dc-danger: #ed5565;
  --dc-secondary: #e9ecef;
  --dc-dark: #f8f9fa;
  --dc-light: #ffffff;
  --dc-navbar-bg: #f8f9fa;
  --dc-navbar-text: #495057;
  --dc-navbar-hover: #e9ecef;

  /* Superfícies de conteúdo (cards, tiles) */
  --dc-surface: #ffffff;
  --dc-border: #e7eaec;
  --dc-text: #333333;
  --dc-text-muted: #6c757d;
}

body {
  background-color: var(--dc-navbar-bg) !important;
  color: #333;
}

html {
  background-color: var(--dc-navbar-bg) !important;
}

#wrapper {
  background-color: #ffffff !important;
}

#page-wrapper {
  background-color: #ffffff !important;
}

.wrapper-content {
  background-color: #ffffff !important;
}

.gray-bg {
  background-color: #ffffff !important;
}

.content-main {
  background-color: #ffffff !important;
}

/* Panel-body branco */
.panel-body,
.card-body,
.ibox-content {
  background-color: #ffffff !important;
}

/* Navbar lateral - tema claro */
.navbar-default {
  background-color: var(--dc-navbar-bg) !important;
  border-color: #dee2e6 !important;
  border-right: 1px solid #dee2e6 !important;
}

.navbar-default .nav > li > a {
  color: var(--dc-navbar-text) !important;
  background-color: var(--dc-navbar-bg) !important;
}

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
  background-color: var(--dc-navbar-hover) !important;
  color: #212529 !important;
}

.navbar-default .nav > li.active > a {
  background-color: var(--dc-navbar-hover) !important;
  color: #212529 !important;
  border-left: 2px solid var(--dc-primary) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* Sidebar e menu */
.logo-element {
  background-color: var(--dc-navbar-bg) !important;
  color: var(--dc-navbar-text) !important;
}

.nav.metismenu {
  background-color: var(--dc-navbar-bg) !important;
}

.sidebar-collapse {
  background-color: var(--dc-navbar-bg) !important;
  height: 100% !important;
  min-height: 100vh !important;
}

body.fixed-nav #wrapper .navbar-static-side {
  background: var(--dc-navbar-bg) !important;
  height: 100vh !important;
}

/* Garantir background em todos os estados */
.navbar-static-side {
  background-color: var(--dc-navbar-bg) !important;
}

body.mini-navbar .navbar-static-side,
body.mini-navbar .sidebar-collapse {
  background-color: var(--dc-navbar-bg) !important;
}

body:not(.mini-navbar) .navbar-static-side,
body:not(.mini-navbar) .sidebar-collapse {
  background-color: var(--dc-navbar-bg) !important;
}

/* Garantir que TODOS os elementos do menu tenham background */
.navbar-static-side div:not(.ibox):not(.panel):not(.card),
.sidebar-collapse div:not(.ibox):not(.panel):not(.card) {
  background-color: var(--dc-navbar-bg) !important;
}

/* Navigation tabs customizadas */
.nav-tabs-custom {
  background-color: var(--dc-navbar-bg) !important;
  border-color: #dee2e6 !important;
  border-top: none !important;
  border-bottom: none !important;
}

.nav-tabs-custom .nav-item .nav-link {
  background-color: var(--dc-navbar-bg) !important;
  color: var(--dc-navbar-text) !important;
}

/* Bottom bar */
#bar-bottom {
  background-color: var(--dc-navbar-bg) !important;
  border-top: none !important;
  border-bottom: none !important;
}

#bar-bottom .nav-item .nav-link {
  background-color: var(--dc-navbar-bg) !important;
  color: var(--dc-navbar-text) !important;
}

/* Spinners e loaders */
.sk-spinner-double-bounce .sk-double-bounce1,
.sk-spinner-double-bounce .sk-double-bounce2 {
  background-color: #dee2e6 !important;
}

.sk-spinner-wave .sk-rect {
  background-color: #dee2e6 !important;
}

.sk-spinner-wandering-cubes .sk-cube {
  background-color: #dee2e6 !important;
}

.sk-spinner-pulse {
  background-color: #dee2e6 !important;
}

.sk-spinner-chasing-dots .sk-dot {
  background-color: #dee2e6 !important;
}

.sk-spinner-three-bounce .sk-bounce {
  background-color: #dee2e6 !important;
}

.sk-spinner-circle .sk-circle:before {
  background-color: #dee2e6 !important;
}

.sk-spinner-cube-grid .sk-cube {
  background-color: #dee2e6 !important;
}

.sk-spinner-wordpress .sk-inner-circle {
  background-color: #dee2e6 !important;
}

.sk-spinner-fading-circle .sk-circle:before {
  background-color: #dee2e6 !important;
}

/* Breadcrumb customizado se necessário */
.navbar-breadcrumb {
  border-color: #dee2e6 !important;
}

.card {
  border-radius: 6px;
  box-shadow: none;
  background-color: white;
}

/* Menu de segundo nível (ativo) */
ul.nav-second-level {
  background: var(--dc-navbar-bg) !important;
}

.navbar-static-side .nav > li.active,
.sidebar-collapse .nav > li.active {
  background: var(--dc-navbar-bg) !important;
}

/* Scrollbar do menu */
.menu-scroll-container::-webkit-scrollbar-track {
  background: var(--dc-navbar-bg) !important;
}

.menu-scroll-container::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
}

.menu-scroll-container {
  scrollbar-color: #c1c1c1 var(--dc-navbar-bg) !important;
}

/* Navbar static side border */
.navbar-static-side .nav.nav-tabs > li > a,
.navbar-static-side .nav.nav-tabs > li > a i {
  border-color: #dee2e6 !important;
}

.navbar-static-side #bar-bottom .nav-link,
.navbar-static-side #bar-bottom .nav-link i {
  border-color: #dee2e6 !important;
}

body:not(.mini-navbar) .navbar-static-side .nav > li.active,
body:not(.mini-navbar) .sidebar-collapse .nav > li.active {
  background: var(--dc-navbar-hover) !important;
}

body:not(.mini-navbar) .navbar-static-side .nav-second-level li:last-child,
body:not(.mini-navbar) .sidebar-collapse .nav-second-level li:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body:not(.mini-navbar) .navbar-static-side .nav.nav-second-level > li > a,
body:not(.mini-navbar) .sidebar-collapse .nav.nav-second-level > li > a {
  background: var(--dc-navbar-bg) !important;
  color: var(--dc-navbar-text) !important;
}

body:not(.mini-navbar) .navbar-static-side .nav.nav-second-level > li:last-child > a,
body:not(.mini-navbar) .sidebar-collapse .nav.nav-second-level > li:last-child > a {
  padding-bottom: 7px !important;
  margin-bottom: 0 !important;
}

/* Menu mini-navbar - aplicar cores claras */
body.mini-navbar .navbar-static-side .nav .nav-second-level,
body.mini-navbar .sidebar-collapse .nav .nav-second-level {
  background: var(--dc-navbar-bg) !important;
}

body.mini-navbar .navbar-static-side .nav-second-level,
body.mini-navbar .sidebar-collapse .nav-second-level {
  background: var(--dc-navbar-bg) !important;
}

body.mini-navbar .nav-second-level li {
  background: var(--dc-navbar-bg) !important;
}

body.mini-navbar .nav-second-level li a {
  background: var(--dc-navbar-bg) !important;
  color: var(--dc-navbar-text) !important;
}

body.mini-navbar .nav-second-level li a:hover {
  background: var(--dc-navbar-hover) !important;
}

body.canvas-menu.mini-navbar .nav-second-level {
  background: var(--dc-navbar-bg) !important;
}

body.mini-navbar ul.nav-second-level {
  background: var(--dc-navbar-bg) !important;
}

/* Tabs e bar-bottom do navigation.component.scss */
.nav-tabs-custom {
  background-color: var(--dc-navbar-bg) !important;
  border-color: #dee2e6 !important;
}

.nav-tabs-custom .nav-item .nav-link {
  background-color: var(--dc-navbar-bg) !important;
}

#bar-bottom {
  background-color: var(--dc-navbar-bg) !important;
}

#bar-bottom .nav-item .nav-link {
  background-color: var(--dc-navbar-bg) !important;
}

/* Border-color dos elementos navbar */
.navbar-static-side .nav.nav-tabs > li > a,
.navbar-static-side .nav.nav-tabs > li > a i {
  border-color: #dee2e6 !important;
}

.navbar-static-side #bar-bottom .nav-link,
.navbar-static-side #bar-bottom .nav-link i {
  border-color: #dee2e6 !important;
}

/* Bordas dos botões do menu lateral */
.nav-tabs-custom .nav-item {
  border: none !important;
}

.nav-tabs-custom .nav-item .nav-link {
  border: none !important;
}

.nav-tabs-custom .nav-item.active .nav-link {
  border: none !important;
}

#bar-bottom .nav-item {
  border: none !important;
}

#bar-bottom .nav-item .nav-link {
  border: none !important;
}

#bar-bottom .nav-item .nav-link:hover {
  border: none !important;
}

/* Borda cinza nas tabs ativas */
.tabs-container .nav-tabs > li.active > a,
.tabs-container .nav-tabs > li.active > a:hover,
.tabs-container .nav-tabs > li.active > a:focus {
  border: 1px solid #dee2e6 !important;
  border-color: #dee2e6 #dee2e6 #ffffff #dee2e6 !important;
  background-color: #ffffff !important;
}

/* Progress bars e loading bars */
.progress-bar,
.progress .progress-bar,
.progress-bar-success,
.progress-bar-info,
.progress-bar-warning,
.progress-bar-danger {
  background-color: var(--dc-primary) !important;
}

/* Bootstrap 5 compatibility helpers */
.panel {
  @extend .card;
}

.panel-heading {
  @extend .card-header;
}

.panel-body {
  @extend .card-body;
}

.offcanvas {
  transition: transform 0.3s ease-in-out;
  background-color: #ffffff;
}

/* DIREITA */
.offcanvas.offcanvas-end {
  transform: translateX(100%);
}
.offcanvas.offcanvas-end.show {
  transform: translateX(0);
}

/* ESQUERDA */
.offcanvas.offcanvas-start {
  transform: translateX(-100%);
}
.offcanvas.offcanvas-start.show {
  transform: translateX(0);
}

/* TOPO */
.offcanvas.offcanvas-top {
  transform: translateY(-100%);
}
.offcanvas.offcanvas-top.show {
  transform: translateY(0);
}

/* FUNDO */
.offcanvas.offcanvas-bottom {
  transform: translateY(100%);
}
.offcanvas.offcanvas-bottom.show {
  transform: translateY(0);
}

.dc-offcanvas {
  margin: 0 !important;
  border: none;
  border-radius: 0;
  background-color: #ffffff;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
}

/* Direita */
.dc-offcanvas.offcanvas-end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Esquerda */
.dc-offcanvas.offcanvas-start {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Topo */
.dc-offcanvas.offcanvas-top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Fundo */
.dc-offcanvas.offcanvas-bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dc-offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px 0 15px;  
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: #fff;
}

.offcanvas-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.dc-offcanvas-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  color: #444;
  font-size: 15px;

  transition: all 0.2s ease;
}

.dc-offcanvas-close:hover {
  background: #f2f2f2;
  border-color: #ccc;
  color: #000;
}

.dc-offcanvas-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* ===================================================== */
/* BACKDROP                                              */
/* ===================================================== */

.offcanvas-backdrop.show {
  opacity: 0.35;
}

/* ===================================================== */
/* CORPO DO FILTRO DENTRO DO OFFCANVAS                   */
/* ===================================================== */

.dc-filter-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Remove altura fixa antiga */
.offcanvas .panel-body {
  height: auto !important;
  padding: 0;
}

/* Remove floats que quebram layout lateral */
.offcanvas .pull-left {
  float: none !important;
}

/* ===================================================== */
/* CAMPOS DE FORMULÁRIO                                  */
/* ===================================================== */

.offcanvas .form-control,
.offcanvas ng-select,
.offcanvas ng-select .ng-select-container {
  min-height: 32px;
  font-size: 13px;
}

.offcanvas ng-select,
.offcanvas .form-control {
  margin-bottom: 10px;
}

/* Dentro de input-group, remove margin-bottom para não quebrar o alinhamento flex */
.offcanvas .input-group ng-select,
.offcanvas .input-group .form-control {
  margin-bottom: 0 !important;
  flex: 1;
  min-width: 0;
}

/* Remove padding inferior do wrapper-content para eliminar espaço vazio no canvas */
.offcanvas .wrapper-content {
  padding-bottom: 0 !important;
}

/* Barra de ações (Salvar/Excluir) fixa na base do canvas sem afetar o formulário */
.offcanvas .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  z-index: 10;
}

.offcanvas .footer .btn {
  padding: 2px 8px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* Confina o #bar-bottom dentro do sidebar (position: absolute relativo ao .sidebar-collapse),
   eliminando a barra branca que aparecia no viewport fora do navbar */
.sidebar-collapse {
  position: relative !important;
}

#bar-bottom {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  z-index: auto !important;
}

/* Remove o min-height excessivo do #page-wrapper (style.css usa 2002px) */
#page-wrapper {
  min-height: 0 !important;
}

/* ===================================================== */
/* BOTÕES                                                */
/* ===================================================== */

.offcanvas .btn {
  padding: 6px 12px;
  font-size: 13px;
}

/* Grupo de botões do topo */
.offcanvas .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

/* Ações de filtro */
.dc-filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ===================================================== */
/* LABELS DE FILTRO                                      */
/* ===================================================== */

.offcanvas .label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 13px;
}

/* ===================================================== */
/* OFFCANVAS — CONSISTÊNCIA ENTRE TEMAS                  */
/* ===================================================== */

/* Fundo e cor base */
.offcanvas,
.dc-offcanvas {
  background-color: #ffffff !important;
  color: #333 !important;
}

.dc-offcanvas-header,
.offcanvas-header {
  background-color: #ffffff !important;
  color: #333 !important;
}

.offcanvas-body,
.dc-filter-body {
  background-color: #ffffff !important;
  color: #333 !important;
}

/* Tabs dentro do offcanvas */
.offcanvas .tabs-container {
  background-color: #ffffff !important;
}

.offcanvas .nav-tabs {
  background-color: #ffffff !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.offcanvas .nav-tabs > li > a {
  background-color: #ffffff !important;
  color: #676a6c !important;
  border-color: transparent !important;
}

.offcanvas .nav-tabs > li.active > a,
.offcanvas .nav-tabs > li.active > a:hover,
.offcanvas .nav-tabs > li.active > a:focus {
  background-color: #ffffff !important;
  color: #333 !important;
  border: 1px solid #f0f0f0 !important;
  border-bottom-color: #ffffff !important;
}

/* Panel body dentro do offcanvas */
.offcanvas .panel-body,
.offcanvas .tabs-container .panel-body {
  background-color: #ffffff !important;
  color: #333 !important;
}

/* form-control e ng-select dentro do offcanvas */
.offcanvas .form-control {
  background-color: #ffffff !important;
  color: #333 !important;
  border-color: rgba(0, 0, 0, 0.04) !important;
}

.offcanvas ng-select .ng-select-container {
  background-color: #ffffff !important;
  color: #333 !important;
  border-color: rgba(0, 0, 0, 0.04) !important;
}

/* Dropdown ng-select (appendTo="body") — herda fundo do body em temas escuros */
.ng-dropdown-panel {
  background-color: #ffffff !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
  background-color: #ffffff !important;
  color: #333 !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
  background-color: #f5f5f5 !important;
  color: #333 !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected {
  background-color: #ebf5fb !important;
  color: #333 !important;
}

.ng-dropdown-panel .ng-dropdown-header,
.ng-dropdown-panel .ng-dropdown-footer {
  background-color: #ffffff !important;
  color: #333 !important;
}