/* ============================================================
   Fan Selector - Estilos de Páginas
   Sub-fase 1.7: tokens atualizados para FanTR (--color-*, tokens.css)
   ============================================================ */

/* ── Sub-fase 7.8 — Seções de /resultados (navegação por scroll) ───────────── */
/* Cada seção é uma âncora de scroll. scroll-margin-top compensa a navbar fixa
   (56px) + folga, para o topo da seção não ficar oculto ao rolar até ela. */
.resultados-section {
  scroll-margin-top: 72px;
}

/* ── Sub-fase 7.12 — Card de Ajuste em coluna estreita (md/lg=4) ───────────── */
/* Os 3 botões de ação (Salvar/Tornar Principal/Restaurar) ficam 3-em-linha
   dentro de um card estreito; com a fonte/padding padrão dos botões `*-modern`
   (white-space:nowrap) o rótulo estourava para fora. Aqui, SÓ nesses botões:
   fonte e padding horizontal menores + permissão de quebra em 2 linhas, com
   altura igualada (height:100% + row stretch) para alinhar os três. */
.ajuste-action-btn {
  font-size: 11px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  height: 100%;
}

.ajuste-action-btn .bi {
  flex-shrink: 0;
}

/* Grupo de modo (Sistema Fixo / Ângulo Fixo): manter as duas opções na MESMA
   linha — cabem na largura do card; o wrap padrão jogava "Ângulo Fixo" para a
   2ª linha desnecessariamente. */
.ajuste-modo-radio {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.ajuste-modo-radio .form-check {
  white-space: nowrap;
}

/* Em md+ (Ajuste e Gráficos lado a lado) o card de Ajuste é fixado à altura da
   coluna — que passa a ser ditada pelo card de Gráficos, porque o card de Ajuste
   é posicionado em absolute e deixa de empurrar a altura da linha. Resultado: o
   card de Gráficos encaixa no gráfico (sem espaço branco embaixo) e o corpo do
   Ajuste rola (os minicards comparativos ganham scroll quando não cabem).
   No mobile (empilhado) nada disso se aplica → altura natural, sem scroll. */
@media (min-width: 768px) {
  .ajuste-fill-wrap {
    position: relative;
    height: 100%;
    /* rede de segurança: se o height:100% não resolver (card absolute → 0 de
       conteúdo intrínseco), garante uma altura mínima utilizável. */
    min-height: 360px;
  }
  .ajuste-fill-wrap > .ajuste-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* header fixo no topo; o corpo (toggle + inputs + botões + comparativo) rola */
  .ajuste-fill-wrap > .ajuste-card > .card-header {
    flex: 0 0 auto;
  }
  .ajuste-fill-wrap > .ajuste-card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

/* Cabeçalho de seção (usado só na 3ª seção, "Tabelas", que não tem header de
   card próprio). Tier visual de "capítulo" — distinto dos headers de card. */
.resultados-section-heading {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-brand-dark);
  margin: 4px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.resultados-section-heading .bi {
  color: var(--color-brand-blue);
  font-size: 17px;
}

/* ── Cabeçalho de página ─────────────────────────────────── */
.page-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.page-header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-header-icon {
  font-size: 22px;
  color: var(--color-brand-blue);
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0;
}

.page-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 4px 0 0 32px;
}

/* ── Responsividade — cabeçalho de página ────────────────── */
@media (max-width: 576px) {
  .page-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .page-title {
    font-size: 17px;
  }

  .page-subtitle {
    margin-left: 0;
    font-size: 12px;
  }

  .page-header-icon {
    font-size: 18px;
  }
}

/* ── Cards de exportação ─────────────────────────────────── */
/* .export-icon definido em assets/css/cards.css com tokens e media query mobile */

.export-card {
  transition: var(--transition-base);
  cursor: default;
}

.export-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}