/* =========================================================
   FILTROS CLEAN — camada visual única do painel #filters
   ---------------------------------------------------------
   Vale para TODAS as páginas com painel de filtros (BIA+,
   Participações, Regularidade, Cedimento, Bola Parada e
   Bola Parada Admin). Carregar logo ANTES do
   filtros-mobile.css: vence o filtros-premium/biaplus pela
   especificidade (#filters#filters) e deixa o mobile por
   cima no celular.

   Princípios:
   - Uma camada só: nada de caixa dentro de caixa
   - Altura única dos controles (36px) e dos chips (28px)
   - Cor só no que está ativo; o resto é neutro
   - Linhas finas (hairline) e um divisor entre topo e corpo
   - Apenas CSS: não muda IDs, classes nem o JS das páginas
   ========================================================= */

#filters#filters {
  --fc-surface: rgba(12, 18, 27, 0.72);
  --fc-field: rgba(148, 163, 184, 0.045);
  --fc-field-hover: rgba(148, 163, 184, 0.075);
  --fc-line: rgba(148, 163, 184, 0.10);
  --fc-line-strong: rgba(148, 163, 184, 0.20);
  --fc-text: #e2e8f0;
  --fc-text-2: #a7b3c4;
  --fc-text-3: #66758a;
  --fc-accent: #38bdf8;
  --fc-accent-text: #7dd3fc;
  --fc-accent-bg: rgba(56, 189, 248, 0.11);
  --fc-accent-line: rgba(56, 189, 248, 0.38);
  --fc-r-lg: 16px;
  --fc-r-md: 10px;
  --fc-r-sm: 8px;
  --fc-h: 36px;
  --fc-chip-h: 30px;

  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-r-lg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  padding: 16px 20px 18px;
  backdrop-filter: none;
}

/* ---------- Topbar: "Filtros" + resumo + Limpar/Ocultar ---------- */
#filters#filters .filters-topbar {
  margin: 0 0 14px;
  min-height: 28px;
}
#filters#filters .filters-topbar__title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--fc-text-3);
}
#filters#filters .filters-topbar__active-chips { gap: 4px; }
#filters#filters .filters-topbar__active-chip {
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--fc-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
#filters#filters .filters-topbar__active-chip b {
  color: var(--fc-text-3);
  opacity: 1;
  font-weight: 500;
}
#filters#filters .filters-topbar__right { gap: 2px; }
#filters#filters .btn.filters-clear,
#filters#filters .btn.filters-toggle {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--fc-r-sm);
  background: transparent;
  color: var(--fc-text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: none;
}
#filters#filters .btn.filters-toggle:hover {
  background: var(--fc-field-hover);
  color: var(--fc-text);
}
#filters#filters .btn.filters-clear { color: #f2a3a3; }
#filters#filters .btn.filters-clear:hover {
  background: rgba(239, 68, 68, 0.09);
  color: #fecaca;
}
#filters#filters .filters-toggle__chev { opacity: 0.7; }

/* ---------- Toolbar: busca + sliders + ações ---------- */
#filters#filters .toolbar.space {
  gap: 8px;
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--fc-line);
}
#filters#filters.is-collapsed .toolbar.space {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
#filters#filters .toolbar-left { gap: 8px; }

/* wrapper .control deixa de ser uma caixa */
#filters#filters .control {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  min-height: 0;
}

/* Busca: campo único com lupa */
#filters#filters .control input[type="search"],
#filters#filters input#q {
  height: var(--fc-h);
  min-width: 240px;
  padding: 0 12px 0 34px;
  background-color: var(--fc-field);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2366758a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-r-md);
  box-shadow: none;
  color: var(--fc-text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
}
#filters#filters .control input[type="search"]:hover,
#filters#filters input#q:hover { background-color: var(--fc-field-hover); }
#filters#filters .control input[type="search"]:focus,
#filters#filters input#q:focus {
  border-color: var(--fc-accent-line);
  background-color: var(--fc-field-hover);
}
#filters#filters input#q::placeholder { color: var(--fc-text-3); }

/* Sliders: mesma altura e mesma pele da busca */
#filters#filters .control.slider,
#filters#filters .participa-minga {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--fc-h);
  padding: 0 12px;
  background: var(--fc-field);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-r-md);
  box-shadow: none;
}
#filters#filters .control.slider > span:first-child,
#filters#filters .participa-minga > span:first-child {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fc-text-2);
  white-space: nowrap;
}
#filters#filters .control.slider > span:last-child,
#filters#filters .participa-minga .participa-minga-val {
  min-width: 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fc-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#filters#filters input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 76px;
  height: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.20);
  outline: none;
  cursor: pointer;
}
#filters#filters input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #0c121b;
  background: var(--fc-accent);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
}
#filters#filters input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #0c121b;
  background: var(--fc-accent);
}

/* Ações (Plus+, %, Cores, Colunas): grupo segmentado discreto */
#filters#filters .toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--fc-h);
  padding: 3px;
  background: var(--fc-field);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-r-md);
  box-shadow: none;
}
#filters#filters .toolbar-right .btn,
#filters#filters .toolbar-right .col-picker-wrap > .btn {
  height: 28px;
  min-width: 0;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--fc-text-2);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
#filters#filters .toolbar-right .btn:hover {
  background: var(--fc-field-hover);
  color: var(--fc-text);
}
#filters#filters .toolbar-right .btn.active,
#filters#filters .toolbar-right .btn[aria-pressed="true"] {
  background: var(--fc-accent-bg);
  color: var(--fc-accent-text);
}
/* separador fino antes do "Colunas" */
#filters#filters .toolbar-right .col-picker-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  padding-left: 4px;
  border-left: 1px solid var(--fc-line);
}

/* ---------- Corpo ---------- */
/* rótulos de seção: um único padrão em todas as páginas */
#filters#filters .filters-label,
#filters#filters .filters-clubes-header label,
#filters#filters .ced-row .filters-label,
#filters#filters label[for="chips"],
#filters#filters label[for="chips-pos"],
#filters#filters label[for="status-badges"] {
  display: block;
  margin-bottom: 8px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1.3;
  color: var(--fc-text-3) !important;
}

/* Status: dot colorido, texto neutro; cor cheia só no ativo */
#filters#filters #status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
#filters#filters #status-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--fc-chip-h);
  padding: 0 11px;
  border: 1px solid var(--fc-line);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--fc-text-2);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#filters#filters #status-badges .badge:hover {
  border-color: var(--fc-line-strong);
  color: var(--fc-text);
}
#filters#filters #status-badges .badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 1;
  flex: 0 0 auto;
  background: #64748b;
  box-shadow: none;
}
#filters#filters #status-badges .badge-provavel i   { background: #22c55e; }
#filters#filters #status-badges .badge-duvida i     { background: #f59e0b; }
#filters#filters #status-badges .badge-suspenso i   { background: #ef4444; }
#filters#filters #status-badges .badge-contundido i { background: #f97316; }

#filters#filters #status-badges .badge.active {
  font-weight: 600;
  background: var(--fc-accent-bg);
  border-color: var(--fc-accent-line);
  color: var(--fc-accent-text);
}
#filters#filters #status-badges .badge.active.badge-provavel {
  background: rgba(34, 197, 94, 0.11);
  border-color: rgba(34, 197, 94, 0.40);
  color: #86efac;
}
#filters#filters #status-badges .badge.active.badge-duvida {
  background: rgba(245, 158, 11, 0.11);
  border-color: rgba(245, 158, 11, 0.40);
  color: #fcd34d;
}
#filters#filters #status-badges .badge.active.badge-suspenso {
  background: rgba(239, 68, 68, 0.11);
  border-color: rgba(239, 68, 68, 0.40);
  color: #fca5a5;
}
#filters#filters #status-badges .badge.active.badge-contundido {
  background: rgba(249, 115, 22, 0.11);
  border-color: rgba(249, 115, 22, 0.40);
  color: #fdba74;
}

/* Posições: controle segmentado */
#filters#filters #chips-pos-wrap { margin: 0; padding: 0; }
#filters#filters #chips-pos {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 3px;
  background: var(--fc-field);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-r-md);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
#filters#filters #chips-pos::-webkit-scrollbar { display: none; }
#filters#filters #chips-pos .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--fc-text-2);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#filters#filters #chips-pos .chip:hover {
  background: var(--fc-field-hover);
  color: var(--fc-text);
}
#filters#filters #chips-pos .chip.active {
  background: var(--fc-accent-bg);
  color: var(--fc-accent-text);
  font-weight: 600;
  box-shadow: none;
}

/* Clubes: cabeçalho colado na grade */
#filters#filters .filters-clubes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  min-height: 0;
}
#filters#filters .filters-clubes-header label { margin-bottom: 0 !important; }
#filters#filters .filters-clubes-header .clubs-actions {
  display: inline-flex;
  gap: 2px;
  margin: 0;
}
#filters#filters .filters-clubes-header .clubs-actions .btn {
  height: 24px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--fc-text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}
#filters#filters .filters-clubes-header .clubs-actions .btn:hover {
  background: var(--fc-field-hover);
  color: var(--fc-text);
}

/* Grade de clubes: selecionado = claro; desmarcado = apagado */
#filters#filters #chips.chips-clubes,
#filters#filters #club-chips.chips-clubes,
#filters#filters #chips,
#filters#filters #club-chips {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}
#filters#filters #chips .chip,
#filters#filters #club-chips .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 30px;
  min-height: 0;
  margin: 0;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--fc-r-sm);
  background: transparent;
  box-shadow: none;
  color: var(--fc-text-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
#filters#filters #chips .chip img,
#filters#filters #club-chips .chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 0.15s, filter 0.15s;
}
#filters#filters #chips .chip:hover,
#filters#filters #club-chips .chip:hover {
  background: var(--fc-field);
  color: var(--fc-text-2);
}
#filters#filters #chips .chip.active,
#filters#filters #club-chips .chip.active {
  background: var(--fc-field);
  border-color: var(--fc-line);
  color: var(--fc-text);
}
#filters#filters #chips .chip.active img,
#filters#filters #club-chips .chip.active img {
  opacity: 1;
  filter: none;
}
#filters#filters #chips .chip.active:hover,
#filters#filters #club-chips .chip.active:hover {
  background: var(--fc-field-hover);
  border-color: var(--fc-line-strong);
}

/* Segmentados extras (Cedimento: Janela/Recorte/Mando; Mando toggle) */
#filters#filters .seg,
#filters#filters .mando-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--fc-field);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-r-md);
  box-shadow: none;
}
#filters#filters .seg .seg-btn,
#filters#filters .mando-toggle .mando-toggle__btn {
  height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--fc-text-2);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}
#filters#filters .seg .seg-btn:hover,
#filters#filters .mando-toggle .mando-toggle__btn:hover {
  background: var(--fc-field-hover);
  color: var(--fc-text);
}
#filters#filters .seg .seg-btn[aria-selected="true"],
#filters#filters .seg .seg-btn.active,
#filters#filters .mando-toggle .mando-toggle__btn.is-active {
  background: var(--fc-accent-bg);
  color: var(--fc-accent-text);
  font-weight: 600;
}

/* foco de teclado consistente */
#filters#filters .chip:focus-visible,
#filters#filters .badge:focus-visible,
#filters#filters .btn:focus-visible,
#filters#filters .seg-btn:focus-visible {
  outline: 2px solid var(--fc-accent-line);
  outline-offset: 1px;
}

/* ---------- Desktop: grade do corpo ---------- */
@media (min-width: 721px) {
  /* BIA+, Participações, Regularidade, Bola Parada (corpo em grid) */
  #filters#filters .filters-body { column-gap: 32px; row-gap: 8px; }
  #filters#filters .filters-body > .filters-clubes-header,
  #filters#filters .filters-body > div:has(> .filters-clubes-header) {
    margin-top: 12px;
  }
  #filters#filters .filters-body > .filters-clubes-header { margin-bottom: 0; }

  /* Cedimento e Admin (corpo em fluxo vertical) */
  .page--cedimento #filters#filters .filters-body > .filters-clubes-header + *,
  .page--bola-parada-admin #filters#filters .filters-body > .filters-clubes-header + * {
    margin-top: 0;
  }
  .page--bola-parada-admin #filters#filters .filters-body > .filters-label:not(:first-child),
  .page--bola-parada-admin #filters#filters .filters-body > .filters-clubes-header {
    margin-top: 18px;
  }
  .page--bola-parada-admin #filters#filters .filters-body > .filters-clubes-header { margin-bottom: 8px; }

  /* 20 clubes: 2 linhas de 10, ou 1 linha de 20 em telas largas */
  #filters#filters #chips#chips,
  #filters#filters #club-chips#club-chips { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
@media (min-width: 1360px) {
  #filters#filters #chips#chips,
  #filters#filters #club-chips#club-chips { grid-template-columns: repeat(20, minmax(0, 1fr)); }
}

/* ---------- Celular: só respiro (layout fica com filtros-mobile.css) ---------- */
@media (max-width: 720px) {
  #filters#filters { padding: 14px; border-radius: 14px; }
  #filters#filters .toolbar-right { height: auto; min-height: var(--fc-h); align-items: center; }
  #filters#filters .toolbar-right .btn { height: 32px !important; min-height: 0 !important; }
  /* no celular o "Cores" some; se só ele morava ali, não sobra caixa vazia */
  #filters#filters .toolbar-right:not(:has(#btn-pct, #btn-cols)) {
    display: none;
  }
  #filters#filters #chips#chips,
  #filters#filters #club-chips#club-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #filters#filters .toolbar.space { margin-bottom: 14px; padding-bottom: 14px; }
  #filters#filters .control input[type="search"],
  #filters#filters input#q { min-width: 0; width: 100%; }
  #filters#filters #chips-pos { display: flex; width: 100%; }
  #filters#filters #chips-pos .chip { min-width: 0; padding: 0 4px; }
}

/* ---------- Bola Parada ----------
   Os botões Mais colunas / Tendência / Plus / Cores não fazem nada nesta
   página (bola-parada.js os deixa no-op) e apareciam como fantasmas
   apagados. Some a caixa inteira, como nas abas sem esses controles. */
.page--bola-parada #filters#filters .toolbar-right { display: none !important; }