/* ============================================================
   layout.css — Navbar, Footer e Estrutura
   ============================================================ */

/* Navbar */
.navbar.app-nav {
  background: var(--card-bg) !important;
  border-bottom: 1px solid var(--divider);
  box-shadow: 0 .25rem .5rem rgba(0,0,0,.04);
}

.navbar.app-nav .navbar-brand {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  letter-spacing: .2px;
  color: var(--text-color);
}

.navbar.app-nav .navbar-brand .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bs-primary-rgb), .12);
  color: var(--bs-primary);
}

.navbar.app-nav .nav-link {
  position: relative;
  border-radius: .4rem;
  padding: .5rem .75rem;
  transition: background-color .2s ease, color .2s ease;
  color: var(--text-color);
}

.navbar.app-nav .nav-link:hover {
  background: rgba(var(--bs-primary-rgb), .08);
  color: var(--bs-primary);
}

.navbar.app-nav .nav-link.active,
.navbar.app-nav .show > .nav-link {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .10);
}

.navbar.app-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: .25rem;
  height: 2px;
  background: var(--bs-primary);
  border-radius: 999px;
  opacity: .85;
}

.navbar.app-nav .dropdown-menu {
  border: 1px solid var(--divider);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
  border-radius: .75rem;
  padding: .35rem;
  background: var(--card-bg);
  color: var(--text-color);
}

.navbar.app-nav .dropdown-item {
  border-radius: .5rem;
  padding: .5rem .75rem;
  color: var(--text-color);
}

.navbar.app-nav .dropdown-item:hover {
  background: rgba(var(--bs-primary-rgb), .08);
  color: var(--bs-primary);
}

/* Footer */
.app-footer {
  min-height: var(--footer-h);
  z-index: 1030;
  background: var(--card-bg);
  color: var(--muted-color);
  border-top: 1px solid var(--divider);
}

/* Breadcrumb */
.breadcrumb {
  background: transparent;
  margin-bottom: .75rem;
}

.breadcrumb-item a {
  text-decoration: none;
  max-width: 40ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: bottom;
  color:var(--bs-primary);
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  max-width: 40ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: bottom;
  color: var(--muted-color);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";          /* ou "→" ou "⟶" — escolha a seta que preferir */
  color: var(--bs-primary);
  font-weight: 500;      /* opcional */
}

/* Cabeçalho de tabela que respeita o tema */
:root{
  --table-head-bg: #f1f3f5;
  --table-head-border: var(--divider);
}
[data-bs-theme="dark"]{
  --table-head-bg: #1f232d;
  --table-head-border: rgba(255,255,255,.12);
}
.table-head th{
  background: var(--table-head-bg) !important;
  border-bottom: 1px solid var(--table-head-border) !important;
  color: var(--text-color) !important;
}
.table{
  --bs-table-border-color: var(--divider);
  --bs-table-striped-bg: rgba(255,255,255,.04); /* fica sutil no dark */
}
[data-bs-theme="dark"] .table{
  --bs-table-striped-bg: rgba(0,0,0,.2);
}

/* ======== Dark Mode - Tom Select harmonizado com formulário ======== */
[data-bs-theme="dark"] .ts-wrapper.single .ts-control,
[data-bs-theme="dark"] .ts-wrapper.multi  .ts-control {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

/* texto digitado */
[data-bs-theme="dark"] .ts-wrapper .ts-control > input {
  color: var(--bs-body-color) !important;
}

/* foco */
[data-bs-theme="dark"] .ts-wrapper .ts-control:focus,
[data-bs-theme="dark"] .ts-wrapper.input-active .ts-control {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15) !important;
}

/* dropdown */
[data-bs-theme="dark"] .ts-dropdown {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.25) !important;
}

/* opções (texto normal) */
[data-bs-theme="dark"] .ts-dropdown .option {
  color: var(--bs-body-color) !important;
  opacity: 1 !important; /* algumas versões aplicam opacidade */
}

/* desabilitadas / cabeçalhos de grupo */
[data-bs-theme="dark"] .ts-dropdown .option.disabled,
[data-bs-theme="dark"] .ts-dropdown .option[aria-disabled="true"] {
  color: var(--bs-secondary-color) !important;
  opacity: .6 !important;
}
[data-bs-theme="dark"] .ts-dropdown .option.optgroup-header {
  color: var(--bs-secondary-color) !important;
  opacity: .8 !important;
}

/* hover / active */
[data-bs-theme="dark"] .ts-dropdown .option.active,
[data-bs-theme="dark"] .ts-dropdown .option:hover {
  background-color: rgba(13,110,253,.15) !important;
  color: var(--bs-body-color) !important;
  opacity: 1 !important;
}

/* item selecionado e botão limpar */
[data-bs-theme="dark"] .ts-wrapper.plugin-clear_button .clear-button,
[data-bs-theme="dark"] .ts-wrapper .ts-control .item {
  color: var(--bs-body-color) !important;
}

/* bordas internas */
[data-bs-theme="dark"] .ts-dropdown .optgroup-header,
[data-bs-theme="dark"] .ts-dropdown .ts-dropdown-content {
  border-color: var(--bs-border-color) !important;
}

/* scrollbar sutil */
[data-bs-theme="dark"] .ts-dropdown::-webkit-scrollbar { width: 8px; }
[data-bs-theme="dark"] .ts-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }
[data-bs-theme="dark"] .ts-dropdown::-webkit-scrollbar-track { background: transparent; }

/* ===== Ajustes finais: cor da seta e texto "no results" ===== */

/* seta do dropdown (mesma cor do texto normal) */
[data-bs-theme="dark"] .ts-wrapper.single .ts-control::after {
  border-color: var(--bs-body-color) transparent transparent transparent !important;
  opacity: .85;
}

/* seta quando o select está aberto */
[data-bs-theme="dark"] .ts-wrapper.dropdown-active .ts-control::after {
  border-color: transparent transparent var(--bs-body-color) transparent !important;
}

/* texto "No results found" com a mesma cor do campo Nome */
[data-bs-theme="dark"] .ts-dropdown .no-results {
  color: var(--bs-body-color) !important;
  opacity: .8;
  font-style: italic;
}

/* ===== Tom Select — caret e "no results" (DARK) ===== */
[data-bs-theme="dark"] .ts-wrapper.single .ts-control::after{
  border-color: var(--bs-body-color) transparent transparent transparent !important;
  opacity:.85;
}
[data-bs-theme="dark"] .ts-wrapper.dropdown-active .ts-control::after{
  border-color: transparent transparent var(--bs-body-color) transparent !important;
}
[data-bs-theme="dark"] .ts-dropdown .no-results{
  color: var(--bs-body-color) !important;
  opacity:.8;
  font-style: italic;
}

/* ===== Tom Select — caret e "no results" (LIGHT) ===== */
:root .ts-wrapper.single .ts-control::after{
  border-color: var(--bs-body-color) transparent transparent transparent !important;
  opacity:.85;
}
:root .ts-wrapper.dropdown-active .ts-control::after{
  border-color: transparent transparent var(--bs-body-color) transparent !important;
}
:root .ts-dropdown .no-results{
  color: var(--bs-body-color) !important;
  opacity:.75;
  font-style: italic;
}

.text-purple {
color: #6f42c1 !important; /* tom usado em “indigo” do Bootstrap */
}