/*
 * pill-group.css — CSS externo do primitive pill_group (R-5.13 PIVOT)
 *
 * Espelha os overrides BaseWeb embutidos em _CSS dentro de pill_group.py.
 * Este arquivo é injetado via styles_loader (adicionar a _INJECTION_ORDER).
 * Serve de backup caso o CSS inline seja suprimido por cache do VDOM.
 *
 * Pattern: [class*="st-key-"][class*="_wrap"] escopa os seletores a qualquer
 * instância de pill_group sem precisar de key dinâmica no CSS.
 *
 * R-5.13 PIVOT: abandonado JS hide-by-text (race condition confirmada Lupa R-5.12).
 * Override BaseWeb para st.button → visual pill. Zero JS.
 *
 * R-6.7 FIX-1+2 (2026-05-25): gap adicionado no wrapper flex + override
 * completo de stButtonGroup/stButtonGroupItem que o Streamlit 1.55 emite por
 * st.button isolado. Sem esse colapso, cada botão ocupa full-width da coluna
 * virtual e fica empilhado ou colado.
 *
 * Owner: design-multicamadas (Forge)
 * Story: R-5.13 / R-6.7 fix
 * Created: 2026-05-25
 */

/* ── Wrapper de instância — flex row horizontal + gap ───────────────────── */
/* FIX-1: adicionado gap:4px (default) para pills com espaço entre si.       */
/* FIX-1-flat: gap:8px para variant flat (topnav) conforme canônico topnav.py */
[class*="st-key-"][class*="_wrap"][data-testid="stVerticalBlock"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
}

/* ── Colapso de wrappers intermediários do Streamlit ────────────────────── */
/* Streamlit 1.55 emite stButtonGroup + stButtonGroupItem em torno de cada   */
/* st.button. Sem isso, cada botão tem display:block/width:100%, empilhando. */
[class*="st-key-"][class*="_wrap"] [data-testid="stButtonGroup"],
[class*="st-key-"][class*="_wrap"] [data-testid="stButtonGroupItem"] {
  display: contents !important;
}

/* stHorizontalBlock dentro do wrapper (layout grid Streamlit) */
[class*="st-key-"][class*="_wrap"] [data-testid="stHorizontalBlock"] {
  display: contents !important;
}

/* Cada stVerticalBlock filho (coluna virtual de st.button) — colapsa pra inline */
[class*="st-key-"][class*="_wrap"] [data-testid="stVerticalBlock"] [data-testid="stVerticalBlock"] {
  display: contents !important;
}

/* ── Variant flat (topnav) — gap maior entre pills ──────────────────────── */
/* Escopo: wrapper com classe topnav_main_wrap ou qualquer instância flat.   */
/* FIX-1-flat: gap 8px espelha topnav.py .arh-topnav-nav gap:2px + padding. */
.st-key-topnav_main_wrap[data-testid="stVerticalBlock"] {
  gap: 8px !important;
}

/* ── st.button como pill — override BaseWeb ──────────────────────────────── */
/* FIX-2: height:auto + min-height:32px evita que st.button(type="primary") */
/* herde o height padrão Streamlit (~38px) + border-radius grande que cria   */
/* o "círculo azul gigante". border:1px solid transparent mantém layout      */
/* estável (sem layout shift ao ativar/desativar). */
[class*="st-key-"][class*="_wrap"] [data-testid^="stBaseButton"] {
  border-radius: var(--radius-full, 9999px) !important;
  padding: 6px 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background var(--transition-fast, 120ms ease),
              color var(--transition-fast, 120ms ease) !important;
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 32px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Reset padding/margin herdados do BaseWeb que inflam o botão */
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Pill inativa hover */
[class*="st-key-"][class*="_wrap"] [data-testid="stBaseButton-secondary"]:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-primary) !important;
}

/* Pill ativa — FIX-2: border-color igual ao bg para não mudar o layout-box */
[class*="st-key-"][class*="_wrap"] [data-testid="stBaseButton-primary"] {
  background: var(--accent-brand) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-color: var(--accent-brand) !important;
}
[class*="st-key-"][class*="_wrap"] [data-testid="stBaseButton-primary"]:hover {
  background: var(--accent-brand) !important;
  color: #fff !important;
  border-color: var(--accent-brand) !important;
}

/* Variant flat: texto ligeiramente mais claro (topnav Pattern A) */
.st-key-topnav_main_wrap [data-testid^="stBaseButton"] {
  color: var(--text-secondary, var(--text-muted)) !important;
  padding: 6px 12px !important;
}
.st-key-topnav_main_wrap [data-testid="stBaseButton-secondary"]:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-primary) !important;
}
.st-key-topnav_main_wrap [data-testid="stBaseButton-primary"] {
  color: #fff !important;
}

/* ── Override do wrapper externo BaseWeb [data-baseweb="button"] ─────────── */
/* Streamlit aninha: [data-baseweb="button"] > button[data-testid^="stBase"] */
/* O wrapper externo pode ter height/padding próprios que expandem o botão.  */
[class*="st-key-"][class*="_wrap"] [data-baseweb="button"] {
  height: auto !important;
  min-height: unset !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius-full, 9999px) !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Focus visible — WCAG 2.4.7 */
[class*="st-key-"][class*="_wrap"] [data-testid^="stBaseButton"]:focus-visible {
  outline: 2px solid var(--accent-brand-text, #4D9FFF) !important;
  outline-offset: 2px !important;
}

/* Disabled */
[class*="st-key-"][class*="_wrap"] [data-testid^="stBaseButton"]:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ── Light mode — ajuste hover ───────────────────────────────────────────── */
[data-theme="light"] [class*="st-key-"][class*="_wrap"] [data-testid="stBaseButton-secondary"]:hover {
  background: rgba(0,0,0,0.06) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .st-key-topnav_main_wrap [data-testid="stBaseButton-secondary"]:hover {
  background: rgba(0,0,0,0.06) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [class*="st-key-"][class*="_wrap"] [data-testid^="stBaseButton"] {
    transition: none !important;
  }
}

/* ── H-01/H-02 fix (Nyx 2026-05-25) — Topnav sticky shell ─────────────────
   .st-key-arh_topnav_shell é o stVerticalBlock raiz do st.container(key="arh_topnav_shell").
   No DOM Streamlit 1.55, o container retorna UM stVerticalBlock com ambas as classes
   (st-key-arh_topnav_shell + stVerticalBlock) — é o próprio elemento, não um filho.
   Seletor: .st-key-arh_topnav_shell[data-testid="stVerticalBlock"] (elemento único).
   position:sticky + top:0 + z-index:100 replicam .arh-topnav no canônico topnav.py
   (L49-52: position:sticky; top:0; z-index:50).
   min-height:56px + align-items:center igualam height canônico (L53 height:56px).
   backdrop-filter:blur(8px) e border-bottom fiel ao canônico (L64+L51).
   Rastreio: Nyx audit H-01 + H-02 + topnav.py L49-73. */
.st-key-arh_topnav_shell[data-testid="stVerticalBlock"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--surface-base) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  backdrop-filter: blur(8px) !important;
  min-height: 56px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 8px !important;
}