/*
 * painel-bi.css — CSS canônico extraído de _painel_bi.py (R-2.4 refundação)
 *
 * Fonte: apps/analytics-rh/pages/_internal/styles/_painel_bi.py (785 LOC)
 * Extração: byte-identical — removido apenas wrapper Python (def/import/CSS = """...""")
 * Story: 2.5 — Painel BI DNA C ajustado (Onda 2)
 * Owner: design-multicamadas (Forge) + analytics-rh
 * Proto canônico: prototipos/2026-05-06-final-v01/painel-bi-c-final.html
 * Validation: rh-manager >= 9.5/10
 *
 * Namespaces preservados:
 *   .arh-pbi-*
 *
 * ROOT INVARIANTS — INVIOLÁVEIS (memória project_analytics_rh_painel_bi_n2_consolidado):
 *   --bi-abertos:   #ADADAD
 *   --bi-resolvidos: #104861
 *   --bi-backlog:   #FFFF00   (dark) / #7A5F00 text em light (BLOCKER-1 a11y)
 *
 * INVENTÁRIO HEX HARDCODED (R-2.6 — NÃO substituído aqui, apenas catalogado):
 *   #FFFF00   — var(--bi-backlog) KPI backlog accent (dark)
 *   #7A5F00   — backlog text light mode (a11y BLOCKER-1, 7:1 AAA)
 *   #fff      — branco puro: seg-btn.active-ams + sc-btn.active texto
 *   #196B24   — var(--t-evol) tipo Evolutiva pill
 *   #E97132   — var(--t-inc) tipo Incidente pill
 *   #156082   — var(--t-sol) tipo Solicitação pill
 *   rgba(25,107,36,.1)   — fundo pill evol
 *   rgba(233,113,50,.1)  — fundo pill inc
 *   rgba(21,96,130,.1)   — fundo pill sol
 *   rgba(29,78,216,.08)  — fundo badge STF
 *   rgba(29,78,216,.12)  — fundo duration-badge período
 *   rgba(29,78,216,.2)   — border duration-badge período
 *   rgba(217,160,32,.08) — fundo badge SAEB / revisao-banner bg
 *   rgba(217,160,32,.10) — badge-warn bg
 *   rgba(217,160,32,.12) — fundo todo-chip
 *   rgba(217,160,32,.20) — fundo todo-chip bg
 *   rgba(217,160,32,.25) — badge-warn border
 *   rgba(217,160,32,.3)  — revisao-banner border
 *   rgba(217,160,32,.35) — revisao-banner border alt
 *   rgba(217,160,32,.4)  — revisao-badge border
 *   rgba(46,204,113,.08) — fundo badge RSLV
 *   rgba(146,64,14,.06)  — range-warning bg light
 *
 * Peculiaridades Painel BI:
 *   - stTabs override global: remove borda superior BaseWeb, adiciona border-bottom brand
 *     (Fase 8 terceiro loop 2026-05-08). Seletor [data-baseweb="tab"] estável (KB §6).
 *   - KPI grid usa !important para sobrescrever display:block herdado de stMarkdownContainer.
 *   - BLOCKER-1: #FFFF00 sobre fundo light = 1.07:1 → override [data-theme="light"] com #7A5F00
 *   - FIX-A1: focus-visible usa var(--focus-ring) #4D9FFF 6.7:1 AAA (era --accent-brand 2.0:1 FALHA)
 *   - Story 2.16 Onda 3: filtro período unificado (.arh-pbi-period-filter-unified)
 *     + context-label (.arh-pbi-pf-context-label) + range-warning (.arh-pbi-pf-range-warning)
 *
 * ⚠ NÃO editar manualmente — fonte canônica é _painel_bi.py no projeto ativo.
 */

/* ================================================================
   PAINEL BI — namespace .arh-pbi-*
   Story 2.5 · DNA C ajustado · fonte: painel-bi-c-final.html
   ================================================================ */

/* ── Status bar — fiel ao modelo filtro-periodo/v01.html ── */
/* Separadores: div 1px width · items com icone Phosphor + texto · strong para valor */
.arh-pbi-status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.arh-pbi-sb-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
}
.arh-pbi-sb-item i {
  font-size: 13px;
  opacity: .7;
}
.arh-pbi-sb-item strong {
  color: var(--text-primary);
  font-weight: 600;
}
.arh-pbi-sb-sep {
  width: 1px;
  height: 14px;
  background: var(--border-subtle);
  flex-shrink: 0;
}
/* Manter retrocompatibilidade com .arh-pbi-status-dot e .arh-pbi-sep legados */
.arh-pbi-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--state-success);
  flex-shrink: 0;
}
.arh-pbi-sep {
  color: var(--border-default);
}

/* ── Controles inline compactos (ctrl-strip) ── */
.arh-pbi-ctrl-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.arh-pbi-date-in {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 4px 9px;
  cursor: pointer;
  font-family: var(--font-family-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
}
.arh-pbi-sc-grp {
  display: flex;
  gap: 2px;
}
.arh-pbi-sc-btn {
  padding: 4px 9px;
  border-radius: var(--radius-base);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
}
.arh-pbi-sc-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.arh-pbi-sc-btn.active {
  background: var(--accent-brand);
  color: #fff;
  border-color: var(--accent-brand);
}
.arh-pbi-fdiv {
  width: 1px;
  height: 18px;
  background: var(--border-subtle);
}
.arh-pbi-type-pills {
  display: flex;
  gap: 3px;
}
.arh-pbi-tp {
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  opacity: .55;
}
.arh-pbi-tp.active { opacity: 1; }
.arh-pbi-tp.evol {
  color: var(--t-evol, #196B24);
  border-color: var(--t-evol, #196B24);
  background: rgba(25,107,36,.1);
}
.arh-pbi-tp.inc {
  color: var(--t-inc, #E97132);
  border-color: var(--t-inc, #E97132);
  background: rgba(233,113,50,.1);
}
.arh-pbi-tp.sol {
  color: var(--t-sol, #156082);
  border-color: var(--t-sol, #156082);
  background: rgba(21,96,130,.1);
}

/* ── Segmented AMS/N2 ── */
.arh-pbi-seg-wrap {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}
.arh-pbi-segmented {
  display: inline-flex;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 3px;
  gap: 2px;
}
.arh-pbi-seg-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  white-space: nowrap;
}
.arh-pbi-seg-btn.active-ams {
  background: var(--accent-brand);
  color: #fff;
}
/* N2 selecionado usa o MESMO azul de AMS (Matias 09/08/2026). Antes era
   `--surface-hover`, um cinza que mal se distinguia do botão inativo: ao
   escolher N2 o segmento só ficava em negrito, enquanto Diário/Fechado ao lado
   ganhavam fundo azul. Dois estados "selecionado" com pesos visuais diferentes
   na mesma barra — o usuário não sabia se o N2 estava ativo. */
.arh-pbi-seg-btn.active-n2 {
  background: var(--accent-brand);
  color: #fff;
}
.arh-pbi-seg-btn:not(.active-ams):not(.active-n2):hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}
.arh-pbi-seg-meta {
  font-size: 10px;
  font-weight: 400;
  opacity: .7;
}
.arh-pbi-badge-soon {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: 3px;
}
.arh-pbi-seg-btn:focus-visible {
  outline: 2px solid var(--focus-ring);  /* FIX-A1: #4D9FFF 6.7:1 AAA (era --accent-brand 2.0:1 FALHA) */
  outline-offset: 2px;
}

/* ── KPI strip — 4 cards ── */
/* !important: sobrescreve display:block herdado do stMarkdownContainer reset Streamlit */
.arh-pbi-kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px;
  margin-bottom: 20px;
}
.arh-pbi-kpi-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 14px 16px 12px; /* fiel ao modelo painel-bi-c-final.html .kpi-card padding */
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.arh-pbi-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.arh-pbi-kpi-card.k-backlog::before { background: var(--bi-backlog, #FFFF00); }
.arh-pbi-kpi-card.k-hoje::before    { background: var(--state-success); }
.arh-pbi-kpi-card.k-periodo::before { background: var(--accent-brand-text); }
.arh-pbi-kpi-card.k-pct::before     { background: var(--state-warning); }
.arh-pbi-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.arh-pbi-kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.arh-pbi-kpi-value {
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
  line-height: 1;
  margin-bottom: 6px;
}
.arh-pbi-kpi-card.k-backlog  .arh-pbi-kpi-value { color: var(--bi-backlog, #FFFF00); }
.arh-pbi-kpi-card.k-hoje     .arh-pbi-kpi-value { color: var(--state-success); }
.arh-pbi-kpi-card.k-periodo  .arh-pbi-kpi-value { color: var(--accent-brand-text); }
.arh-pbi-kpi-card.k-pct      .arh-pbi-kpi-value { color: var(--state-warning); }
/* BLOCKER-1 fix: #FFFF00 sobre #F2EFE9 = 1.07:1 falha light · #7A5F00 = 7:1 AAA · ROOT_INVARIANTS preservados */
[data-theme="light"] .arh-pbi-kpi-card.k-backlog .arh-pbi-kpi-value { color: #7A5F00; }
.arh-pbi-kpi-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arh-pbi-kpi-spark { flex: 1; }
.arh-pbi-kpi-trend {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.arh-pbi-trend-up   { color: var(--state-success); }
.arh-pbi-trend-down { color: var(--state-danger); }
.arh-pbi-trend-flat { color: var(--text-muted); }

/* ── Todo KPI slot (Tab Fechado placeholder) ── */
.arh-pbi-kpi-card.todo-slot {
  opacity: .6;
  border-style: dashed;
}
.arh-pbi-kpi-card.todo-slot .arh-pbi-kpi-value {
  color: var(--text-muted) !important;
  font-size: 22px;
}
.arh-pbi-todo-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(217,160,32,.12);
  border: 1px solid rgba(217,160,32,.3);
  color: var(--state-warning);
}

/* ── Content card (graficos e secoes) ── */
.arh-pbi-content-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 16px;
}
.arh-pbi-card-header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arh-pbi-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.arh-pbi-card-body { padding: 20px; }

/* ── Legenda de grafico ── */
.arh-pbi-chart-legend {
  display: flex;
  gap: 14px;
}
.arh-pbi-li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}
.arh-pbi-ld {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.arh-pbi-ll {
  width: 14px;
  height: 2px;
  flex-shrink: 0;
}

/* ── Nota metodologia ── */
.arh-pbi-nota-metodo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--surface-sunken);
  border-radius: var(--radius-base);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Grid 2/3 colunas (donuts) ── */
.arh-pbi-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 24px;
}
.arh-pbi-two-col.arh-pbi-three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── Donut area + legenda ── */
.arh-pbi-donut-area {
  display: flex;
  align-items: center;
  gap: 14px;
}
.arh-pbi-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.arh-pbi-dli {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.arh-pbi-ds {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.arh-pbi-dv {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Status 4 cards (STF/SAEB/RSLV/FCHD) ── */
.arh-pbi-status-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.arh-pbi-sc {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arh-pbi-sn {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.arh-pbi-sv {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.arh-pbi-sp {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.arh-pbi-sp.stf  {
  color: var(--accent-brand-text);
  border-color: var(--accent-brand-text);
  background: rgba(29,78,216,.08);
}
.arh-pbi-sp.saeb {
  color: var(--state-warning);
  border-color: var(--state-warning);
  background: rgba(217,160,32,.08);
}
.arh-pbi-sp.rslv {
  color: var(--state-success);
  border-color: var(--state-success);
  background: rgba(46,204,113,.08);
}
.arh-pbi-sp.fchd {
  color: var(--text-muted);
  border-color: var(--border-default);
  background: transparent;
}

/* ── Barra de proporcao ── */
.arh-pbi-proportion-bar {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  gap: 1px;
  margin-top: 12px;
}
.arh-pbi-proportion-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-muted);
}

/* ── stTabs override: underline bottom (Fase 8 — terceiro loop 2026-05-08) ──
   BLOCKER: st.tabs nativo usa borda SUPERIOR no tab ativo (BaseWeb default).
   Proto painel-bi-c-final.html usa border-bottom: 2px solid accent-brand.
   Override: remove borda superior nativa + adiciona borda inferior brand.
   Seletor [data-baseweb="tab"] é estável (BaseWeb v14+, Streamlit 1.55).
   NÃO usar emotion-cache classes (frágeis — vetado KB §6).
   Escopo: apenas dentro de tela Painel BI (injetado via _painel_bi CSS).
   Para configuracoes.py: override similar em _configuracoes_tabs.py. */
[data-testid="stTabs"] [data-baseweb="tab-list"] {
  border-bottom: 1px solid var(--border-subtle);
  gap: 4px;
}
[data-testid="stTabs"] [data-baseweb="tab"] {
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  transition: color var(--transition-fast), border-color var(--transition-fast) !important;
}
[data-testid="stTabs"] [data-baseweb="tab"]:hover {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-default) !important;
}
[data-testid="stTabs"] [aria-selected="true"][data-baseweb="tab"] {
  color: var(--accent-brand-text) !important;
  border-bottom-color: var(--accent-brand) !important;
  font-weight: 600 !important;
}
[data-testid="stTabs"] [data-baseweb="tab"]:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}
/* Tab panel: remove padding padrão BaseWeb */
[data-testid="stTabs"] [data-baseweb="tab-panel"] {
  padding-top: 16px !important;
}

/* ── Section label — cabecalho de grafico/secao ──
   Exibido ANTES de um st.plotly_chart ou bloco de conteudo
   para replicar o .card-header do proto canonico.
   Streamlit nao permite nesting real de st.* dentro de divs HTML
   (cada st.markdown e um stMarkdownContainer separado no DOM),
   entao esta abordagem usa um label standalone acima do chart. */
.arh-pbi-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.arh-pbi-section-label:first-child {
  border-top: none;
  padding-top: 4px;
  margin-top: 0;
}
.arh-pbi-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}
.arh-pbi-section-meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Select styled ── */
.arh-pbi-select {
  font-size: 11px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-family-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
}

/* ── Banner "ESTRUTURA EM REVISAO" (Tab Fechado) ── */
.arh-pbi-revisao-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 20px;
  background: rgba(217,160,32,.1);
  border: 1px solid rgba(217,160,32,.35);
  border-radius: var(--radius-md, 8px);
  font-size: 12px;
  color: var(--state-warning);
  font-weight: 500;
}
.arh-pbi-revisao-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(217,160,32,.2);
  border: 1px solid rgba(217,160,32,.4);
  color: var(--state-warning);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Empty state N2 ── */
.arh-pbi-n2-empty {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 60px 32px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.arh-pbi-n2-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.arh-pbi-n2-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.arh-pbi-n2-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Secao divider Mensal (AD-2 onepage) ── */
.arh-pbi-mensal-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 32px 0 20px;
}
.arh-pbi-mensal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.arh-pbi-mensal-title-muted {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Responsive — 1280px: KPIs 2 col + donuts 1 col ── */
@media (max-width: 1280px) {
  .arh-pbi-kpi-strip  { grid-template-columns: repeat(2, 1fr); }
  .arh-pbi-two-col    { grid-template-columns: 1fr; }
}

/* ── Responsive — 640px: KPIs 1 col + status 1 col ── */
@media (max-width: 640px) {
  .arh-pbi-kpi-strip  { grid-template-columns: 1fr; }
  .arh-pbi-status-4   { grid-template-columns: 1fr; }
}

/* ── prefers-reduced-motion — sem animacoes proprias ── */
@media (prefers-reduced-motion: reduce) {
  .arh-pbi-seg-btn,
  .arh-pbi-sc-btn,
  .arh-pbi-kpi-card {
    transition: none !important;
  }
}

/* ── Story 2.16 (Item 5 Onda 3): Filtro Período Unificado ──
   Wrapper visual do filtro compacto acima dos atalhos.
   Modelo: prototipos/2026-05-08-painel-bi-filtro-periodo/v01.html
   Os st.button/st.date_input reais são emitidos abaixo pelo Streamlit;
   este bloco estiliza o header informativo e badge de duração. */
.arh-pbi-period-filter {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-card);
}

.arh-pbi-pf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.arh-pbi-pf-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  white-space: nowrap;
}

.arh-pbi-pf-vdiv {
  width: 1px;
  height: 14px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

.arh-pbi-pf-duration-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-brand-text);
  background: rgba(29,78,216,.12);
  border: 1px solid rgba(29,78,216,.2);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}

.arh-pbi-pf-badge-warn {
  color: var(--state-warning) !important;
  background: rgba(217,160,32,.10) !important;
  border-color: rgba(217,160,32,.25) !important;
}

/* ── GAP 5-A (Onda 3): wrapper unificado para os controles de período ──
   Engloba header label + badge + atalhos + date_inputs num único componente visual.
   KB §5.2: CSS :has() suportado Chrome 105+ / FF 121+ / Safari 15.4+.
   Não usar emotion-cache — namespace .arh-pbi-pf-* (estável). */
.arh-pbi-period-filter-unified {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  padding: 8px 12px 10px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── GAP 5-B (Onda 3): label contextual do range ativo (span inline) ──
   Exibe formato situacional: "Semana 19 · 06–12 Mai" / "Abr/2026" / "range livre".
   Gerado em Python e injetado como .arh-pbi-pf-context-label. */
.arh-pbi-pf-context-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base, 4px);
  padding: 2px 8px;
  white-space: nowrap;
  margin-left: auto;
}

/* ── GAP 5-C (Onda 3): aviso range >60 dias — bloco separado abaixo da linha ──
   Movido de texto inline no badge para bloco role="alert" com border-left warning.
   border-left 3px solid: padrão aprovado de alerta inline (LAV Direcionamento). */
.arh-pbi-pf-range-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(217,160,32,.08);
  border-left: 3px solid var(--state-warning);
  border-radius: 0 var(--radius-base, 4px) var(--radius-base, 4px) 0;
  padding: 6px 10px;
  font-size: 0.80rem;
  color: var(--state-warning);
  margin-bottom: 6px;
}

/* light mode: state-warning tem contraste adequado em fundo claro */
[data-theme="light"] .arh-pbi-pf-range-warning {
  color: var(--state-warning);
  background: rgba(146,64,14,.06);
  border-left-color: var(--state-warning);
}