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

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

.navbar.app-nav .navbar-brand {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.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), 0.12);
  color: var(--bs-primary);
}

.navbar.app-nav .nav-link {
  position: relative;
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  color: var(--text-color);
}

.navbar.app-nav .nav-link:hover {
  background: rgba(var(--bs-primary-rgb), 0.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), 0.1);
}

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

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

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

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

/* Breadcrumb */
.breadcrumb {
  background: transparent;
  margin-bottom: 0.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, 0.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, 0.04); /* fica sutil no dark */
}
[data-bs-theme="dark"] .table {
  --bs-table-striped-bg: rgba(0, 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 0.2rem rgba(13, 110, 253, 0.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 0.5rem 1rem rgba(0, 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: 0.6 !important;
}
[data-bs-theme="dark"] .ts-dropdown .option.optgroup-header {
  color: var(--bs-secondary-color) !important;
  opacity: 0.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, 0.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, 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.75;
  font-style: italic;
}

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

/* Footer tema-consciente */
.app-footer {
  background: var(--card-bg) !important;
  color: var(--text-color);
  border-top: 1px solid var(--divider);
  font-size: 0.875rem;
  line-height: 1.25;
}

.app-footer .footer-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 0.75rem;
}

.app-footer .text-muted {
  color: var(--muted-color) !important;
}

.app-footer a.text-muted:hover {
  color: var(--bs-primary) !important;
}