:root {
  --agape-azul: #1b3a93;
}

.seletor-edicao {
  min-width: 26rem;
  max-width: 100%;
}

/* Faixa colorida no topo do card, como no Form Layout do AdminLTE. */
.card-agape {
  border-top: 3px solid var(--bs-danger);
}

.card-agape .card-header {
  border-bottom: 1px solid var(--bs-border-color);
}

.form-horizontal .col-form-label {
  font-weight: 500;
}

.obrigatorio::after {
  content: " *";
  color: var(--bs-danger);
}

table.dataTable td.acoes {
  white-space: nowrap;
  width: 1%;
}

.brand-image {
  background: #fff;
  border-radius: 50%;
  padding: 2px;
}

/* ------------------------------------------------ checkboxes e radiobuttons */
.form-check {
  min-height: 1.6rem;
  padding-left: 1.9em;
  margin-bottom: .35rem;
}

.form-check .form-check-input {
  width: 1.25em;
  height: 1.25em;
  margin-left: -1.9em;
  margin-top: .12em;
  border-width: 2px;
  border-color: var(--bs-secondary-border-subtle);
  cursor: pointer;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.form-check .form-check-label {
  cursor: pointer;
  padding-left: .25rem;
}

.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(27, 58, 147, .2);
}

/* Variantes de cor: aplique .check-success, .check-warning… no .form-check. */
.check-success .form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.check-warning .form-check-input:checked {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.check-danger .form-check-input:checked {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.check-info .form-check-input:checked {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}

/* Checkbox arredondado (equivalente ao .checkbox-circle do print). */
.check-circle .form-check-input:not([type="radio"]) {
  border-radius: 50%;
}

/* ------------------------------------------------------------- Tom Select */
.ts-wrapper.form-select {
  padding: 0;
  background-image: none;
}

.ts-wrapper .ts-control {
  border-radius: var(--bs-border-radius);
  min-height: calc(1.5em + .75rem + 2px);
}

.ts-wrapper.multi .ts-control > div {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-body-color);
  padding: .1rem .4rem;
}

.ts-wrapper.multi .ts-control > div.active {
  background: var(--agape-azul);
  color: #fff;
}

/* O placeholder só deve aparecer com o campo vazio de itens. O Tom Select restaura o
   atributo `placeholder` do input internamente após cada item_add (não dá pra vencer
   isso via JS), mas ele próprio marca o wrapper com `.has-items` — escondemos por CSS. */
.ts-wrapper.has-items .ts-control input::placeholder {
  color: transparent;
}

.ts-dropdown .no-results {
  padding: .5rem .75rem;
  color: var(--bs-secondary-color);
}

.ts-dropdown .active {
  background-color: var(--bs-primary-bg-subtle);
}

/* --------------------------------------------------- abas em formato de pill */
/* Usadas na tela de edição (Dados Gerais / Equipes / Pastorais / Comunidades...). */
.nav-pills-agape .nav-link {
  border-radius: 50rem;
  padding: .4rem 1rem;
  font-weight: 500;
  font-size: .9rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.nav-pills-agape .nav-link:hover:not(.active) {
  background-color: var(--bs-secondary-bg);
}

.nav-pills-agape .nav-link.active {
  background-color: var(--agape-azul);
  border-color: var(--agape-azul);
  color: #fff;
}

/* ---------------------------------------------------------- sidebar (menu) */
/* Item de 3º nível (ex.: "Vicariatos" dentro de "Base", dentro de "Configurações") usa a
   mesma classe `.nav-treeview` do 2º nível ("Base"/"Catálogos") — sem diferença nenhuma,
   os dois níveis abertos ao mesmo tempo ficam indistinguíveis. Recuo extra, fonte e ícone
   menores só no nível mais fundo (`.nav-treeview` dentro de `.nav-treeview`). */
.sidebar-menu .nav-treeview .nav-treeview .nav-link {
  padding-left: 1.75rem;
  font-size: .85rem;
}

.sidebar-menu .nav-treeview .nav-treeview .nav-icon {
  min-width: 1.1rem;
  max-width: 1.1rem;
  font-size: .75rem;
  opacity: .8;
}

/* ------------------------------------------------------------- datepicker */
.datepicker-dropdown {
  z-index: 1060;
}

/* O ícone de calendário é decorativo, mas clicável: abre o mesmo dropdown. */
.input-group > .input-group-text > .bi-calendar-event {
  cursor: pointer;
}

.datepicker .datepicker-cell.selected,
.datepicker .datepicker-cell.selected:hover {
  background-color: var(--agape-azul);
}

.datepicker .datepicker-cell.today:not(.selected) {
  background-color: var(--bs-primary-bg-subtle);
}