/*
  Bootstrap overrides – carrega após o CSS do Bootstrap.
  Mantemos aqui tudo que altera o comportamento/estilo dos componentes Bootstrap.
*/

/* ======================================================================
  TABLE OF CONTENTS (quick navigation)

  1. Variables & Tokens
  2. Nav / Navbar
  3. Nav-pills
  4. Buttons — sizes
  5. Buttons — variants & outlines
  6. Form controls
  7. Background & Text utilities
  8. Tables
  9. Accordion

  Use the comment headers em cada seção para navegar entre os blocos. 😄
  ====================================================================== */

/* Mapear tokens do Bootstrap para a paleta do projeto */
:root {
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-secondary);
  --bs-success: var(--color-success);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-dark: var(--color-dark);
  --bs-white: var(--color-white);
}

/* ================= Navbar ================= */

/* Navbar */
header.navbar {
  backdrop-filter: blur(6px);
  background: color-mix(in hsl, var(--color-white) 70%, transparent);
}

/* ================= Nav / Navbar rules ================= */
/* Regras visuais para navegação (nav, navbar, links, brand, toggler e dropdowns)
   Usam as variáveis de cores do projeto para manter consistência. Comentários
   em português explicam o propósito de cada bloco. */

/* Barra principal (navbar) */
.navbar {
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-padding-x: 1rem;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
  background: color-mix(
    in srgb,
    var(--color-white) 85%,
    var(--color-primary) 5%
  );
  border-bottom: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
}

/* Marca (brand) */
.navbar .navbar-brand {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: color-mix(in srgb, var(--color-primary) 80%, black 20%);
  text-decoration: none;
}

/* Nav links (desktop) */
.navbar .nav-link {
  color: var(--color-dark);
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--color-primary);
  background-color: transparent;
}

/* Link ativo/selecionado */
.navbar .nav-link.active {
  color: var(--color-primary) !important;
  font-weight: 700;
  position: relative;
}
.navbar .nav-link.active::after {
  /* Pequeno indicador abaixo do link ativo */
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.35rem;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 60%, var(--color-secondary) 40%)
  );
}

/* Navbar toggler (mobile) */
.navbar .navbar-toggler {
  border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
  background: transparent;
  width: 44px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem
    color-mix(in srgb, var(--color-primary) 18%, var(--color-white) 82%);
}

/* Quando o collapse está aberto em mobile, o painel recebe estilos próprios */
.navbar-collapse {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-white) 92%, var(--color-primary) 4%),
    var(--color-white)
  );
  padding: 0.75rem 1rem;
  border-radius: 0 0 6px 6px;
}

/* Dropdowns dentro da navbar */
.navbar .dropdown-menu {
  border: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  background: var(--color-white);
  min-width: 12rem;
  padding: 0.25rem 0;
}
.navbar .dropdown-item {
  color: var(--color-dark);
  padding: 0.45rem 1rem;
  font-weight: 300;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: color-mix(
    in srgb,
    var(--color-primary) 6%,
    var(--color-white) 94%
  );
  color: var(--color-primary);
  font-weight: 400;
}

/* Pequenas correções: ícones e badges na nav */
.navbar .nav-link .badge {
  margin-left: 0.4rem;
  font-size: 0.7rem;
}

/* Responsividade: ajuste de espaçamento e alinhamento em telas pequenas */
@media (max-width: 767.98px) {
  .navbar {
    padding: 0.35rem 0.5rem;
  }
  .navbar .nav-link {
    padding: 0.5rem 0.25rem;
    width: 100%;
  }
  .navbar .nav-item {
    margin: 0.125rem 0;
  }
  .navbar .navbar-brand {
    font-size: 1rem;
  }
}

/* Fim das regras de nav/navabr */

/* ================= Nav-pills (abas estilo 'pills') ================= */
/* Sobrescritas para .nav-pills do Bootstrap — usa variáveis do projeto
   e melhora contraste, espaçamento e foco para acessibilidade. */

.nav-pills {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  background: transparent;
  padding: 0.125rem;
  border-radius: 0.5rem;
}

.nav-pills .nav-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-dark);
  background: transparent;
  border-radius: 0.375rem;
  padding: 0.45rem 0.8rem;
  font-weight: 300;
  font-size: var(--fs-base);
  transition: background-color 0.12s ease, color 0.12s ease,
    transform 0.08s ease;
  border: 1px solid transparent;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
  color: var(--color-primary);
  background-color: color-mix(
    in srgb,
    var(--color-primary) 6%,
    var(--color-white) 94%
  );
  transform: translateY(-1px);
  text-decoration: none;
}

/* Estado ativo: pill preenchida com cor do projeto */
.nav-pills .nav-link.active {
  color: var(--color-white) !important;
  font-weight: 600;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 60%, var(--color-secondary) 40%)
  );
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: color-mix(in srgb, var(--color-primary) 85%, black 15%);
}

/* Outline active (quando só queremos destacar sem preencher) */
.nav-pills .nav-link.active-outline {
  color: var(--color-primary) !important;
  background: transparent;
  border: 1px solid var(--color-primary);
}

/* Vertical pills (stacked) */
.nav-pills.flex-column {
  flex-direction: column;
  gap: 0.25rem;
}
.nav-pills.flex-column .nav-link {
  width: 100%;
  text-align: left;
  padding-left: 0.75rem;
}

/* Preencher as tabs: cada item ocupa mesma largura */
.nav-pills.nav-fill .nav-link {
  flex: 1 1 0;
  text-align: center;
}
.nav-pills.nav-justified .nav-link {
  flex-basis: 0;
  flex-grow: 1;
}

/* Badges dentro de pills */
.nav-pills .nav-link .badge {
  margin-left: 0.5rem;
  background: color-mix(
    in srgb,
    var(--color-white) 88%,
    var(--color-primary) 12%
  );
  color: var(--color-dark);
  font-weight: 600;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
}

/* Focus mais evidente para acessibilidade */
.nav-pills .nav-link:focus {
  outline: none;
  box-shadow: 0 0 0 0.18rem
    color-mix(in srgb, var(--color-primary) 20%, var(--color-white) 80%);
}

/* Responsividade: empilhar em telas muito pequenas */
@media (max-width: 419.98px) {
  .nav-pills {
    flex-direction: column;
    align-items: stretch;
  }
  .nav-pills .nav-link {
    width: 100%;
    padding: 0.6rem 0.75rem;
  }
}

/* Fim das regras para nav-pills */

/* ================= Badges — sobrescritas globais ================= */
/* Regras que substituem o comportamento padrão do Bootstrap para badges.
   Comentários em português explicam a intenção. Mantemos nomes em inglês
   e usamos as variáveis de cor do projeto para consistência. */

.badge {
  /* layout e espaçamento compacto, alinhado ao centro */
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1;
  border-radius: 0.375rem; /* formato levemente arredondado */
  vertical-align: middle;
  background: color-mix(in srgb, var(--color-white) 88%, var(--color-dark) 12%);
  color: var(--color-dark);
  border: 1px solid transparent;
  box-shadow: none;
  text-decoration: none;
}

/* Versão menor (útil em navbars e badges compactas) */
.badge-sm,
.badge.badge-sm {
  padding: 0.12rem 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
}

/* Estados visuais (hover / foco) para melhorar percepção interativa */
.badge:hover,
.badge:focus {
  transform: translateY(-1px);
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); */
  text-decoration: none;
}

/* Variantes de cor usando tokens do projeto — compatíveis com .bg-* ou classes legacy */
.badge.bg-primary,
.badge-primary {
  background: linear-gradient(
    90deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 60%, var(--color-secondary) 40%)
  );
  color: var(--color-white);
  border-color: color-mix(in srgb, var(--color-primary) 85%, black 15%);
}

.badge.bg-secondary,
.badge-secondary {
  background: var(--color-secondary);
  color: var(--color-white);
}

.badge.bg-success,
.badge-success {
  background: var(--color-success);
  color: var(--color-white);
}

.badge.bg-warning,
.badge-warning {
  background: var(--color-warning);
  color: var(--color-dark);
}

.badge.bg-danger,
.badge-danger {
  background: var(--color-danger);
  color: var(--color-white);
}

.badge.bg-dark,
.badge-dark {
  background: var(--color-dark);
  color: var(--color-white);
}

.badge.bg-light,
.badge-light {
  background: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-gray-200);
}

/* Especificidade extra para badges dentro de navbars/pills (garante consistência) */
.navbar .nav-link .badge,
.nav-pills .nav-link .badge {
  /* mantemos padding reduzido e peso maior para melhor leitura em menus */
  padding: 0.12rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
}

/* ================= Buttons — sizes ================= */
/* Funcionam com qualquer variante (.btn, .btn-primary, .btn-outline-*, etc.) */
/* ...arquivo continua com outras sobrescritas... */

/* ================= Progress (barras de progresso) ================= */
/* Sobrescreve completamente as regras do Bootstrap para o componente
   de progresso, usando tokens do projeto para cores e dimensões. Mantém
   foco em legibilidade, contraste e performance. */

/* Tokens padrão para progress — definimos aqui para fácil ajuste global */
:root {
  /* altura base mais slim e tipografia enxuta */
  --bs-progress-height: 0.75rem; /* ~12px */
  --bs-progress-font-size: 0.6875rem; /* 11px */

  /* cores e visual do trilho e barra */
  /* --bs-progress-bg: color-mix(
    in srgb,
    var(--color-dark) 8%,
    var(--color-white) 92%
  ); */
  --bs-progress-border-radius: 999px; /* pílula */
  /* --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); */

  --bs-progress-bar-color: var(--bs-white);
  --bs-progress-bar-bg: linear-gradient(
    90deg,
    var(--bs-primary),
    color-mix(in srgb, var(--bs-primary) 60%, var(--bs-secondary) 40%)
  );
  --bs-progress-bar-transition: width 0.25s ease, background-color 0.12s ease;

  /* listras (striped) */
  --bs-progress-bar-stripe-opacity: 0.18;
  --bs-progress-bar-stripe-size: 1rem;
}

/* Contêiner principal da barra de progresso */
.progress {
  display: flex;
  height: var(--bs-progress-height);
  overflow: hidden; /* esconde a barra interna arredondada */
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
  box-shadow: var(--bs-progress-box-shadow);
  border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
}

/* Barra interna que cresce conforme o progresso */
.progress > .progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--bs-progress-bar-color);
  background: var(--bs-progress-bar-bg);
  transition: var(--bs-progress-bar-transition);
}

/* Listrado (striped) — visual mais sutil e elegante */
.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, var(--bs-progress-bar-stripe-opacity)) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, var(--bs-progress-bar-stripe-opacity)) 50%,
    rgba(255, 255, 255, var(--bs-progress-bar-stripe-opacity)) 75%,
    transparent 75%,
    transparent
  );
  background-size: var(--bs-progress-bar-stripe-size)
    var(--bs-progress-bar-stripe-size);
}

/* Animação das listras — performática (apenas background-position) */
@keyframes progress-bar-stripes {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: var(--bs-progress-bar-stripe-size);
  }
}

.progress-bar-animated {
  animation: progress-bar-stripes 0.75s linear infinite;
}

/* Stacked progress — múltiplas barras lado a lado com espaçamento leve */
.progress-stacked {
  display: flex;
  height: var(--bs-progress-height);
  overflow: visible;
  background: none;
  border: 0;
  gap: 0.25rem;
}

.progress-stacked .progress {
  flex: 1;
  height: 100%;
  margin: 0;
}

/* Tamanhos utilitários — alteram apenas a variável de altura */
.progress-xs {
  --bs-progress-height: 0.25rem; /* 4px */
}
.progress-sm {
  --bs-progress-height: 0.5rem; /* 8px */
}
.progress-lg {
  --bs-progress-height: 1rem; /* 16px */
}

/* Formatos utilitários */
.progress-rounded {
  --bs-progress-border-radius: 999px;
}
.progress-square {
  --bs-progress-border-radius: 0.25rem;
}

/* Variantes por cor — mapeadas aos tokens do projeto */
.progress-success {
  --bs-progress-bar-bg: var(--bs-success);
  --bs-progress-bar-color: var(--bs-white);
}
.progress-warning {
  --bs-progress-bar-bg: var(--bs-warning);
  --bs-progress-bar-color: var(--color-dark);
}
.progress-danger {
  --bs-progress-bar-bg: var(--bs-danger);
  --bs-progress-bar-color: var(--bs-white);
}
.progress-secondary {
  --bs-progress-bar-bg: var(--bs-secondary);
  --bs-progress-bar-color: var(--bs-white);
}
.progress-dark {
  --bs-progress-bar-bg: var(--bs-dark);
  --bs-progress-bar-color: var(--bs-white);
}
.progress-light {
  --bs-progress-bar-bg: var(--bs-white);
  --bs-progress-bar-color: var(--color-dark);
}

/* Rótulo opcional dentro da barra (texto) */
.progress-label {
  font-size: var(--bs-progress-font-size);
  font-weight: 600;
  line-height: 1;
}
.btn-nano {
  --bs-btn-padding-y: 0.125rem; /* ~2px */
  --bs-btn-padding-x: 0.375rem; /* ~6px */
  --bs-btn-font-size: var(--fs-xxs); /* 0.75rem */
  --bs-btn-line-height: 1.25;
  --bs-btn-border-radius: 0.25rem;
}

.btn-small {
  --bs-btn-padding-y: 0.25rem; /* 4px */
  --bs-btn-padding-x: 0.5rem; /* 8px */
  --bs-btn-font-size: var(--fs-xs); /* 0.8125rem */
  --bs-btn-line-height: 1.35;
  --bs-btn-border-radius: 0.3rem;
}

.btn-base {
  --bs-btn-padding-y: 0.5rem; /* 8px */
  --bs-btn-padding-x: 0.75rem; /* 12px */
  --bs-btn-font-size: var(--fs-base); /* 1rem */
  --bs-btn-line-height: 1.5;
  --bs-btn-border-radius: 0.375rem;
}

/* Alias para "large" (inclui correção de possível digitação) */
.btn-labge,
.btn-large {
  --bs-btn-padding-y: 0.65rem; /* ~10px */
  --bs-btn-padding-x: 1.25rem; /* 20px */
  --bs-btn-font-size: var(--fs-md); /* 1.125rem */
  --bs-btn-line-height: 1.5;
  --bs-btn-border-radius: 0.5rem;
}

/* ================= Buttons — variants & outlines ================= */

/* ================= Sobrescritas para FORM (inputs, selects, textarea, labels, checks) ================= */
/* Comentários em português explicam o propósito: esses estilos garantem uma aparência
   consistente para formulários e sobrescrevem regras do Bootstrap quando necessário. */

form {
  margin: 0;
  padding: 0;
  font-family: var(
    --font-base,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial
  );
  color: var(--color-dark);
}

.form-group,
.form-row {
  margin-bottom: 1rem;
}

label {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--color-dark);
  font-size: 0.95rem;
}

/* Campos de formulário padrão: usa .form-control para sobrescrever Bootstrap */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  /* força Roboto como solicitado e weight 300 por padrão */
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-dark);
  background-color: var(--color-white);
  background-clip: padding-box;
  /* borda padrão conforme solicitado */
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease,
    transform 0.06s ease, font-weight 0.08s ease;
}

/* Foco: aumentar peso da fonte e usar borda sólida gray-300 conforme pedido */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  font-weight: 400;
  border: 1px solid var(--color-gray-300);
  /* mantém destaque sutil em volta com cor primária */
  box-shadow: 0 0 0 0.18rem
    color-mix(in srgb, var(--color-primary) 18%, var(--color-white) 82%);
  outline: none;
}

/* Placeholder com contraste adequado */
.form-control::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--color-dark) 40%, var(--color-white) 60%);
  opacity: 1;
}

.form-text {
  font-size: var(--fs-xxs);
  color: color-mix(in srgb, var(--color-dark) 45%, var(--color-white) 55%);
}

/* Check / Radio customizados (simples) */
.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
  background: var(--color-white);
  transition: background-color 0.12s ease, border-color 0.12s ease,
    box-shadow 0.12s ease;
}

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

.form-check-input:focus {
  box-shadow: 0 0 0 0.12rem
    color-mix(in srgb, var(--color-primary) 18%, var(--color-white) 82%);
}

.form-check-label {
  margin-bottom: 0;
  color: var(--color-dark);
}

/* Checkboxes — sobrescritas específicas
   Comentário: aplicamos apenas em type="checkbox" para não interferir nos rádios. */
.form-check-input[type="checkbox"] {
  /* reset simples para controle visual consistente entre navegadores */
  -webkit-appearance: none;
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.25rem; /* caixas levemente arredondadas */
  border: 1px solid color-mix(in srgb, var(--color-dark) 14%, transparent);
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0 0; /* expandimos quando marcado */
  transition: background-color 0.12s ease, border-color 0.12s ease,
    box-shadow 0.12s ease, background-size 0.12s ease;
}

.form-check-input[type="checkbox"]:hover {
  /* realce sutil no hover */
  border-color: color-mix(
    in srgb,
    var(--color-primary) 35%,
    var(--color-dark) 10%
  );
}

.form-check-input[type="checkbox"]:focus {
  /* anel de foco acessível com cor do projeto */
  box-shadow: 0 0 0 0.16rem
    color-mix(in srgb, var(--color-primary) 22%, var(--color-white) 78%);
  outline: none;
}

.form-check-input[type="checkbox"]:checked {
  /* fundo e borda primários quando marcado */
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  /* ícone de check como SVG para nitidez */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7'/%3E%3C/svg%3E");
  background-size: 85% 85%;
}

.form-check-input[type="checkbox"]:indeterminate {
  /* estado intermediário: barra branca sobre fundo primário */
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: linear-gradient(
    to bottom,
    transparent 45%,
    var(--color-white) 45%,
    var(--color-white) 55%,
    transparent 55%
  );
  background-size: 70% 70%;
}

.form-check-input[type="checkbox"]:disabled {
  cursor: not-allowed;
  background-color: color-mix(
    in srgb,
    var(--color-white) 92%,
    var(--color-dark) 8%
  );
  border-color: color-mix(in srgb, var(--color-dark) 12%, transparent);
}
.form-check-input[type="checkbox"]:disabled:checked,
.form-check-input[type="checkbox"]:disabled:indeterminate {
  /* reduz contraste quando desabilitado e marcado */
  background-color: color-mix(
    in srgb,
    var(--color-primary) 60%,
    var(--color-white) 40%
  );
  border-color: color-mix(
    in srgb,
    var(--color-primary) 60%,
    var(--color-white) 40%
  );
}

/* Estados de validação integrados com tokens do projeto */
.form-check-input[type="checkbox"].is-invalid,
.is-invalid .form-check-input[type="checkbox"] {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 0.12rem
    color-mix(in srgb, var(--color-danger) 18%, var(--color-white) 82%);
}
.form-check-input[type="checkbox"].is-valid,
.is-valid .form-check-input[type="checkbox"] {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 0.12rem
    color-mix(in srgb, var(--color-success) 18%, var(--color-white) 82%);
}

/* Mensagens de validação */
.invalid-feedback,
.valid-feedback {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.is-invalid,
.form-control.is-invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 0.12rem
    color-mix(in srgb, var(--color-danger) 18%, var(--color-white) 82%);
}

.is-valid,
.form-control.is-valid {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 0.12rem
    color-mix(in srgb, var(--color-success) 18%, var(--color-white) 82%);
}

/* Inline forms e responsividade */
.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Form-floating padding ajustado para label flutuante */
.form-floating .form-control {
  padding-top: 1.25rem;
}

/* Select com seta custom simples */
select.form-control {
  appearance: none;
  background-image: linear-gradient(
      45deg,
      transparent 50%,
      var(--color-dark) 50%
    ),
    linear-gradient(135deg, var(--color-dark) 50%, transparent 50%);
  background-position: calc(100% - 1rem) calc(1em + 2px),
    calc(100% - 0.75rem) calc(1em + 2px);
  background-size: 0.5em 0.5em, 0.5em 0.5em;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

/* Botões de submit devem indicar interatividade */
button[type="submit"],
.btn[type="submit"] {
  cursor: pointer;
}

/* Fieldset desabilitado: atenua controles */
fieldset[disabled] .form-control {
  opacity: 0.65;
}

/* Pequena regra para inputs com icones (mantém alinhamento) */
.input-group .form-control {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* ================= Sobrescritas de BACKGROUND e TEXT COLORS ================= */
/* Garante que as utilitárias de cor do Bootstrap usem as variáveis do projeto
   e fornece valores padrão para body, links e elementos textuais. */

/* Global */
body {
  background: var(--color-bg) !important;
  color: var(--color-dark) !important;
}

/* Links */
a {
  color: var(--color-gray-400);
  text-decoration: none;
}
a:hover,
a:focus {
  color: color-mix(in srgb, var(--color-gray-400) 85%, black 15%);
  text-decoration: none;
}

/* Text utilities (override padrão do Bootstrap) */
.text-primary {
  color: var(--color-primary) !important;
}
.text-secondary {
  color: var(--color-secondary) !important;
}
.text-success {
  color: var(--color-success) !important;
}
.text-warning {
  color: var(--color-warning) !important;
}
.text-danger {
  color: var(--color-danger) !important;
}
.text-dark {
  color: var(--color-dark) !important;
}
.text-white {
  color: var(--color-white) !important;
}
.text-muted {
  color: var(--color-gray-500) !important;
}

/* Background utilities (override padrão do Bootstrap) */
.bg-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.bg-secondary {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
}
.bg-success {
  background-color: var(--color-success) !important;
  color: var(--color-white) !important;
}
.bg-warning {
  background-color: var(--color-warning) !important;
  color: var(--color-dark) !important;
}
.bg-danger {
  background-color: var(--color-danger) !important;
  color: var(--color-white) !important;
}
.bg-dark {
  background-color: var(--color-dark) !important;
  color: var(--color-white) !important;
}
.bg-white {
  background-color: var(--color-white) !important;
  color: var(--color-dark) !important;
}
.bg-transparent {
  background: transparent !important;
}

/* Small utility: ensure panels/cards using .card or .bg-* have correct border contrast */
.card,
.panel {
  background-clip: border-box;
}

.card {
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
  border-radius: 0.375rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  padding: 1rem;
}

.card .card-header {
  background-color: transparent;
  border: 0;
  padding: 0;
}

.card .card-body {
  padding: 0;
}

/* End background/text overrides */

/* ================= Buttons — variants & outlines (consolidated) ================= */

.btn {
  font-family: var(--font-heading);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--bs-btn-font-size, 1rem);
  line-height: var(--bs-btn-line-height, 1.5);
  border-radius: var(--bs-btn-border-radius, 0.375rem);
  transition: background-color 0.12s ease, border-color 0.12s ease,
    color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

/* Base solid variant fallback (primary) */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: color-mix(in srgb, var(--color-primary) 85%, black 15%);
  border-color: color-mix(in srgb, var(--color-primary) 85%, black 15%);
  color: var(--color-white);
}
.btn-primary:focus {
  box-shadow: 0 0 0 0.25rem
    color-mix(in srgb, var(--color-primary) 20%, var(--color-white) 80%);
  outline: none;
}

/* Variantes sólidas usando as variáveis do projeto */
.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}
.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}
.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-dark);
}
.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}
.btn-dark {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}
.btn-info {
  background-color: var(--color-info, var(--color-secondary));
  border-color: var(--color-info, var(--color-secondary));
  color: var(--color-white);
}

.btn-secondary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-dark:hover,
.btn-info:hover {
  filter: brightness(0.95);
}

/* Outline variants: cor do texto e borda, preenchimento no hover */
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-secondary {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  background-color: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn-outline-success {
  color: var(--color-success);
  border-color: var(--color-success);
  background-color: transparent;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  color: var(--color-white);
  background-color: var(--color-success);
  border-color: var(--color-success);
}
.btn-outline-warning {
  color: var(--color-warning);
  border-color: var(--color-warning);
  background-color: transparent;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  color: var(--color-dark);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}
.btn-outline-danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background-color: transparent;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  color: var(--color-white);
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn-outline-dark {
  color: var(--color-dark);
  border-color: var(--color-dark);
  background-color: transparent;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus {
  color: var(--color-white);
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn-outline-info {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  background-color: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  color: var(--color-white);
  background-color: var(--color-info, var(--color-secondary));
  border-color: var(--color-info, var(--color-secondary));
}

/* Disabled states */
.btn:disabled,
.btn.disabled,
.btn[disabled] {
  opacity: 0.65;
  pointer-events: none;
  box-shadow: none !important;
  /* evita movimentos e indica claramente estado inativo */
  transform: none !important;
  cursor: not-allowed;
}

/* Size helpers: mantém compatibilidade com classes existentes */
.btn-nano {
  padding: 0.125rem 0.375rem;
  font-size: var(--fs-xxs);
}
.btn-small {
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-xs);
}
.btn-normal {
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-base);
}
.btn-large {
  padding: 0.65rem 1.25rem;
  font-size: var(--fs-md);
}

/* Ensure buttons inside btn groups keep consistent borders */
.btn + .btn {
  margin-left: 0.25rem;
}

/* Fim: Buttons */

/* ================= Buttons — disabled variants (overrides) ================= */
/*
   Sobrescritas explícitas para estados desabilitados por variante.
   Mantém contraste legível e padroniza aparência independente do Bootstrap.
*/

/* Helper para seletores de disabled aplicáveis a .disabled (anchors) e [disabled] */
.btn-primary:disabled,
.btn-primary.disabled,
fieldset:disabled .btn-primary {
  /* mistura a cor com branco para suavizar */
  background-color: color-mix(
    in srgb,
    var(--color-primary) 70%,
    var(--color-white) 30%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--color-primary) 70%,
    var(--color-white) 30%
  ) !important;
  color: var(--color-white) !important;
}

.btn-secondary:disabled,
.btn-secondary.disabled,
fieldset:disabled .btn-secondary {
  background-color: color-mix(
    in srgb,
    var(--color-secondary) 70%,
    var(--color-white) 30%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--color-secondary) 70%,
    var(--color-white) 30%
  ) !important;
  color: var(--color-white) !important;
}

.btn-success:disabled,
.btn-success.disabled,
fieldset:disabled .btn-success {
  background-color: color-mix(
    in srgb,
    var(--color-success) 70%,
    var(--color-white) 30%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--color-success) 70%,
    var(--color-white) 30%
  ) !important;
  color: var(--color-white) !important;
}

.btn-warning:disabled,
.btn-warning.disabled,
fieldset:disabled .btn-warning {
  background-color: color-mix(
    in srgb,
    var(--color-warning) 75%,
    var(--color-white) 25%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--color-warning) 75%,
    var(--color-white) 25%
  ) !important;
  color: var(--color-dark) !important; /* mantém legibilidade em tons claros */
}

.btn-danger:disabled,
.btn-danger.disabled,
fieldset:disabled .btn-danger {
  background-color: color-mix(
    in srgb,
    var(--color-danger) 70%,
    var(--color-white) 30%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--color-danger) 70%,
    var(--color-white) 30%
  ) !important;
  color: var(--color-white) !important;
}

.btn-dark:disabled,
.btn-dark.disabled,
fieldset:disabled .btn-dark {
  background-color: color-mix(
    in srgb,
    var(--color-dark) 70%,
    var(--color-white) 30%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--color-dark) 70%,
    var(--color-white) 30%
  ) !important;
  color: var(--color-white) !important;
}

.btn-info:disabled,
.btn-info.disabled,
fieldset:disabled .btn-info {
  background-color: color-mix(
    in srgb,
    var(--color-info, var(--color-secondary)) 70%,
    var(--color-white) 30%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--color-info, var(--color-secondary)) 70%,
    var(--color-white) 30%
  ) !important;
  color: var(--color-white) !important;
}

.btn-light:disabled,
.btn-light.disabled,
fieldset:disabled .btn-light {
  background-color: color-mix(
    in srgb,
    var(--color-white) 95%,
    var(--color-dark) 5%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--color-dark) 12%,
    var(--color-white) 88%
  ) !important;
  color: var(--color-dark) !important;
}

/* Outline variants: mantém fundo transparente e reduz o contraste da borda/texto */
.btn-outline-primary:disabled,
.btn-outline-primary.disabled,
fieldset:disabled .btn-outline-primary {
  background-color: transparent !important;
  border-color: color-mix(
    in srgb,
    var(--color-primary) 45%,
    var(--color-white) 55%
  ) !important;
  color: color-mix(
    in srgb,
    var(--color-primary) 45%,
    var(--color-gray-500) 55%
  ) !important;
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled,
fieldset:disabled .btn-outline-secondary {
  background-color: transparent !important;
  border-color: color-mix(
    in srgb,
    var(--color-secondary) 45%,
    var(--color-white) 55%
  ) !important;
  color: color-mix(
    in srgb,
    var(--color-secondary) 45%,
    var(--color-gray-500) 55%
  ) !important;
}

.btn-outline-success:disabled,
.btn-outline-success.disabled,
fieldset:disabled .btn-outline-success {
  background-color: transparent !important;
  border-color: color-mix(
    in srgb,
    var(--color-success) 45%,
    var(--color-white) 55%
  ) !important;
  color: color-mix(
    in srgb,
    var(--color-success) 45%,
    var(--color-gray-500) 55%
  ) !important;
}

.btn-outline-warning:disabled,
.btn-outline-warning.disabled,
fieldset:disabled .btn-outline-warning {
  background-color: transparent !important;
  border-color: color-mix(
    in srgb,
    var(--color-warning) 50%,
    var(--color-white) 50%
  ) !important;
  color: color-mix(
    in srgb,
    var(--color-warning) 40%,
    var(--color-gray-600) 60%
  ) !important;
}

.btn-outline-danger:disabled,
.btn-outline-danger.disabled,
fieldset:disabled .btn-outline-danger {
  background-color: transparent !important;
  border-color: color-mix(
    in srgb,
    var(--color-danger) 45%,
    var(--color-white) 55%
  ) !important;
  color: color-mix(
    in srgb,
    var(--color-danger) 45%,
    var(--color-gray-500) 55%
  ) !important;
}

.btn-outline-dark:disabled,
.btn-outline-dark.disabled,
fieldset:disabled .btn-outline-dark {
  background-color: transparent !important;
  border-color: color-mix(
    in srgb,
    var(--color-dark) 40%,
    var(--color-white) 60%
  ) !important;
  color: color-mix(
    in srgb,
    var(--color-dark) 40%,
    var(--color-gray-500) 60%
  ) !important;
}

.btn-outline-info:disabled,
.btn-outline-info.disabled,
fieldset:disabled .btn-outline-info {
  background-color: transparent !important;
  border-color: color-mix(
    in srgb,
    var(--color-info, var(--color-secondary)) 45%,
    var(--color-white) 55%
  ) !important;
  color: color-mix(
    in srgb,
    var(--color-info, var(--color-secondary)) 45%,
    var(--color-gray-500) 55%
  ) !important;
}

/* Evita estilos de hover/focus aplicarem em disabled (resiliência extra) */
.btn:disabled:hover,
.btn.disabled:hover,
fieldset:disabled .btn:hover,
.btn:disabled:focus,
.btn.disabled:focus,
fieldset:disabled .btn:focus {
  filter: none !important;
  box-shadow: none !important;
}

/* ================= Tables ================= */
/* Garante que o conteúdo de células de tabela (.table, table) fique alinhado ao centro verticalmente */
.table td,
.table th,
table td,
table th {
  vertical-align: middle;
  padding: 0.75rem 1.25rem;
}

/* =========================
   Sobrescritas do Bootstrap - Accordion
   - Comentários em português
   - Regras com especificidade suficiente para sobrepor o Bootstrap
   - Evitar mudanças globais; somente regras do accordion
   ========================== */

/* Container base do accordion */
.accordion {
  /* Força box-sizing consistente dentro do componente */
  box-sizing: border-box;
  margin: 0; /* remove margem padrão */
  padding: 0; /* remove padding padrão */
}

/* Cada item do accordion */
.accordion-item {
  background: transparent; /* mantém fundo neutro */
  border: 2px dashed var(--color-gray-200) !important; /* remove bordas do Bootstrap */
  border-radius: 8px !important; /* remove radius padrão */
  margin: 0 0 12px 0; /* espaçamento entre items */
  overflow: visible;
}

/* Cabeçalho do item */
.accordion-header {
  background-color: transparent;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Botão que controla o colapso */
.accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between; /* empurra o ícone para a extrema direita como no Bootstrap */
  width: 100%;
  padding: 14px 16px; /* espaço interno mais consistente */
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-gray-400); /* cor principal do texto */
  background-color: transparent; /* fundo do botão */
  border: 0; /* borda sutil */
  border-radius: 8px !important; /* cantos arredondados */
  box-shadow: none;
  cursor: pointer;
  text-align: left;
}

/* Usar o ícone padrão do Bootstrap
  Não sobrescrever o pseudo-elemento ::after aqui. O Bootstrap define um
  SVG/data-uri para .accordion-button::after; manter ausência de regras
  evita conflitos e garante o ícone original. */

/* Estado colapsado (fechado): botão tem aparência neutra */
.accordion-button.collapsed {
  background-color: #fff;
  color: var(--color-gray-500);
}

/* Estado aberto: cor de destaque e rotação do ícone */
.accordion-button:not(.collapsed) {
  background-color: transparent; /* leve destaque */
  color: var(--color-dark); /* cor de ação principal */
  font-weight: 600;
  box-shadow: none;
}

/* Área de colapso (conteúdo escondível) */
.accordion-collapse {
  border-top: none !important;
  margin-top: 0px;
}

/* Corpo do accordion (conteúdo interno) */
.accordion-body {
  padding: 16px; /* padding consistente */
  background: #ffffff;
  border: 0;
  border-radius: 6px;
  font-size: 0.95rem;
  color: #495057;
  line-height: 1.5;
  border-top: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
}

/* Versão flush (sem espaçamento/bordas) */
.accordion-flush .accordion-item {
  margin: 0;
}
.accordion-flush .accordion-button {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.accordion-flush .accordion-body {
  border: none;
  padding: 12px 0 0 0;
}

/* Acessibilidade: foco visível e contraste */
.accordion-button:focus {
  outline: none;
  outline-offset: 2px;
  box-shadow: none;
}

/* Tamanhos responsivos menores */
@media (max-width: 576px) {
  .accordion-button {
    padding: 12px 14px;
    font-size: 0.95rem;
  }
  .accordion-body {
    padding: 12px;
    font-size: 0.93rem;
  }
}

/* Bonus: maior especificidade para garantir sobreposição do Bootstrap sem usar !important em excesso */
/* NOTE: Specificity hook intentionally removed to avoid empty ruleset lint error.
  If you need a higher-specificity override target, add rules here. */

/* Fim das sobrescritas do Accordion */