/* ====================================
   Componente Global: Tabs
   Estilo underline com cor do portal via --color-primary
   ==================================== */

.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  /* Espaco padrao entre a barra de abas e o conteudo/cards abaixo.
     Evita que os cards colem nas abas em telas sem utilitario mb-*. */
  margin-bottom: var(--spacing-md);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-gray-200);
  -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs .nav-item,
.tabs .nav-link {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}

.tabs .nav-link {
  display: inline-flex;
  min-height: var(--btn-height-sm, 2.5rem);
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-weight: 600;
  font-size: 0.85rem;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.65rem 1.25rem;
  transition: color 0.2s ease, border-color 0.2s ease;
  background: transparent;
  border-radius: 0;
}

.tabs .nav-link:hover {
  color: var(--color-primary);
  background: transparent;
  border-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.tabs .nav-link.active,
.tabs .nav-link[aria-selected="true"] {
  color: var(--color-primary);
  border-color: transparent;
  border-bottom-color: var(--color-primary);
  background: transparent;
}

/* Badge numérico — herda cor da tab */
.tabs .tab-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  margin-left: 0.35rem;
  color: inherit;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ── Animação de fade para Bootstrap tab-pane ─────────────── */
.tab-content > .tab-pane {
  display: none;
}

.tab-content > .tab-pane.active {
  display: block;
  animation: tabFadeIn 0.2s ease-in-out;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Animação para conteúdo JS-driven (data-filter) ──────── */
/* Usado em admin/investimentos, admin/ofertas, partner/ofertas */
.tabs-fade-content {
  animation: tabFadeIn 0.2s ease-in-out;
}

.responsive-tabs-shell {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin-bottom: var(--spacing-md);
}

.responsive-tabs-strip {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.responsive-tabs-shell .tabs,
.responsive-tabs-shell .orders-filter-bar,
.responsive-tabs-shell .admin-edit-stepper,
.responsive-tabs-shell .offer-wizard-steps {
  margin-bottom: 0 !important;
}

.responsive-tabs-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--btn-height-md, 2.75rem);
  height: var(--btn-height-md, 2.75rem);
  padding: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: var(--color-surface-card);
  color: var(--color-gray-600);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.responsive-tabs-arrow:disabled {
  opacity: 0.38;
}

/* Nao desenhar overlays sobre tabs. O fade branco de borda podia ficar preso
   sobre a primeira aba em reloads/hard refresh; a rolagem horizontal continua
   funcionando sem uma camada visual acima dos links. */
.responsive-tabs-shell--overflowing::before,
.responsive-tabs-shell--overflowing::after {
  content: none !important;
  display: none;
}

@media (max-width: 767.98px) {
  .responsive-tabs-shell {
    display: block;
    width: 100%;
  }

  .responsive-tabs-shell .responsive-tabs-arrow {
    display: none;
  }

  .responsive-tabs-shell:has(.offer-wizard-steps) .responsive-tabs-arrow {
    display: flex;
  }

  .responsive-tabs-shell .tabs,
  .responsive-tabs-shell .orders-filter-bar,
  .responsive-tabs-shell .admin-edit-stepper,
  .responsive-tabs-shell .offer-wizard-steps {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    margin-bottom: 0 !important;
  }
}

/* Tabs como barra ACIMA do card (páginas de detalhe): herdam o underline do
   .tabs e o espaçamento; o conteúdo de cada aba vive no card logo abaixo.
   Usado em admin/parceiros, admin/empresas e demais detalhes. */
.tabs.detail-tabs--outside {
  margin-bottom: var(--spacing-md);
}

/* Mobile: tabs permanecem em uma unica linha rolavel para evitar quebra visual
   e manter consistencia com steppers/filtros horizontais. */