/*
  Filters / styles / filters.css
  Nada aqui inventa cor, raio, sombra ou duração — todo valor vem dos tokens
  já definidos em src/themes/tokens.css. As classes de popover reaproveitam
  literalmente `.dropdown` / `.dropdown-menu` / `.dropdown-item`
  (src/components/styles/components.css, primitivo de src/components/
  dropdown.js) — nenhum menu suspenso novo foi inventado para os filtros.
  `.field` / `.input` / `.checkbox` / `.cal-*` / `.presets` productionizam,
  pela primeira vez, o que já estava especificado (mas só como documentação
  estática) em design-system.html — mesmos nomes, mesmos valores.
*/

/* Vários elementos aqui alternam visibilidade via `.hidden = true/false` em
   JS, mas também têm `display` definido pela própria classe (`.btn`,
   `.filter-chips`, `.badge-count`...) — mesma especificidade do `[hidden]`
   do UA stylesheet, que perde por ordem de cascata sem este reforço
   (mesma causa-raiz do bug já documentado em charts.css). */
[hidden]{ display:none !important; }

/* ---------- campo de texto / busca ---------- */
.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field-label{ font-size:12px; font-weight:500; color:var(--text-secondary); }
.input-wrap{ position:relative; display:flex; align-items:center; }
.input{
  width:100%; height:34px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text-primary); padding:0 var(--space-4); font-size:13px; font-family:var(--font-ui);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder{ color:var(--text-tertiary); }
.input:hover{ border-color:var(--n-400); }
.input:focus-visible{ border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }
.input[disabled]{ background:var(--surface-sunken); color:var(--text-disabled); cursor:not-allowed; }
.input-icon{ position:absolute; left:var(--space-4); width:14px; height:14px; stroke:var(--text-tertiary); pointer-events:none; }
.input-wrap .input.has-icon{ padding-left:calc(var(--space-4) * 2 + 14px); }
.input-wrap .input-clear{
  position:absolute; right:var(--space-2); width:22px; height:22px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); cursor:pointer;
}
.input-wrap .input-clear:hover{ background:var(--surface-sunken); color:var(--text-primary); }
.input-wrap .input.has-clear{ padding-right:calc(var(--space-2) * 2 + 22px); }

/* ---------- checkbox reutilizável ---------- */
.checkbox{
  width:15px; height:15px; border-radius:4px; border:1px solid var(--border-strong);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; background:var(--surface); flex:none;
}
.checkbox svg{ width:10px; height:10px; stroke:#fff; opacity:0; }
.checkbox.checked{ background:var(--accent); border-color:var(--accent); }
.checkbox.checked svg{ opacity:1; }
.checkbox.indeterminate{ background:var(--accent-subtle); border-color:var(--accent); }

/* ---------- gatilho de filtro (select / multiselect) ---------- */
.filter-trigger.btn{
  gap:var(--space-2); justify-content:space-between; min-width:132px; font-weight:400; color:var(--text-primary);
}
.filter-trigger.btn.is-active{ border-color:var(--accent); color:var(--accent); }
.filter-trigger .filter-trigger-chevron{ width:13px; height:13px; stroke:var(--text-tertiary); transition:transform var(--dur-fast) var(--ease-standard); flex:none; }
[data-dropdown].is-open .filter-trigger .filter-trigger-chevron{ transform:rotate(180deg); }
.filter-trigger .badge-count{ margin-left:2px; }

/* ---------- badge-count (documentado em design-system.html, produtizado aqui) ---------- */
.badge-count{
  background:var(--n-700); color:#fff; border-radius:var(--radius-full); min-width:16px; height:16px;
  padding:0 5px; font-size:10.5px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono);
}

/* ---------- conteúdo do menu de multiselect ---------- */
.filter-menu{ width:260px; max-height:320px; display:flex; flex-direction:column; }
.filter-menu-search{ padding:var(--space-2) var(--space-2) var(--space-3); }
.filter-menu-list{ overflow-y:auto; max-height:230px; }
.filter-menu-empty{ padding:var(--space-4); font-size:12.5px; color:var(--text-tertiary); text-align:center; }
.filter-menu-actions{ display:flex; justify-content:space-between; padding:var(--space-3) var(--space-3) var(--space-2); border-top:1px solid var(--border); margin-top:var(--space-2); }
.filter-menu-actions button{ font-size:12px; color:var(--accent); cursor:pointer; background:none; border:none; padding:0; font-family:var(--font-ui); }
.filter-menu-actions button:hover{ text-decoration:underline; }

.dropdown-item.filter-option{ justify-content:flex-start; gap:var(--space-3); }
.dropdown-item.filter-option .opt-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropdown-item.filter-option .opt-count{ font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); }

/* ---------- boolean (segmentado) ---------- */
.filter-segmented{ display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; }
.filter-segmented button{
  height:32px; padding:0 var(--space-4); font-size:12.5px; color:var(--text-secondary); background:var(--surface);
  border:none; border-right:1px solid var(--border-strong); cursor:pointer; font-family:var(--font-ui);
}
.filter-segmented button:last-child{ border-right:none; }
.filter-segmented button:hover{ background:var(--surface-sunken); }
.filter-segmented button.is-active{ background:var(--accent-subtle); color:var(--accent); font-weight:500; }

/* ---------- intervalo numérico ---------- */
.filter-numeric-range{ display:flex; align-items:center; gap:var(--space-2); }
.filter-numeric-range .input{ width:88px; text-align:right; font-family:var(--font-mono); }
.filter-numeric-range .sep{ color:var(--text-tertiary); font-size:12px; }

/* ---------- calendário / período (produtizado de design-system.html) ---------- */
.filter-daterange-menu{ display:flex; gap:var(--space-5); padding:var(--space-2); }
.presets{ display:flex; flex-direction:column; gap:2px; min-width:130px; border-right:1px solid var(--border); padding-right:var(--space-4); }
.preset-btn{
  text-align:left; padding:var(--space-2) var(--space-3); border-radius:var(--radius-xs); font-size:12.5px;
  color:var(--text-secondary); cursor:pointer; background:none; border:none; font-family:var(--font-ui);
}
.preset-btn:hover{ background:var(--surface-sunken); color:var(--text-primary); }
.preset-btn.is-active{ background:var(--accent-subtle); color:var(--accent); font-weight:500; }
.cal{ width:264px; user-select:none; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-5); }
.cal-head .m{ font-size:13px; font-weight:600; }
.cal-nav{ display:flex; gap:var(--space-2); }
.cal-nav button{ width:24px; height:24px; border-radius:var(--radius-xs); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); cursor:pointer; border:none; background:none; }
.cal-nav button:hover{ background:var(--surface-sunken); }
.cal-nav svg{ width:13px; height:13px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dow{ font-family:var(--font-mono); font-size:10px; color:var(--text-tertiary); text-align:center; padding-bottom:6px; }
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-xs);
  font-size:12px; color:var(--text-primary); cursor:pointer; font-family:var(--font-mono); border:none; background:none;
}
.cal-day:hover{ background:var(--surface-sunken); }
.cal-day.muted{ color:var(--text-disabled); }
.cal-day.today{ border:1px solid var(--accent); }
.cal-day.range{ background:var(--accent-subtle); border-radius:0; }
.cal-day.range-start{ background:var(--accent); color:#fff; border-radius:var(--radius-xs) 0 0 var(--radius-xs); }
.cal-day.range-end{ background:var(--accent); color:#fff; border-radius:0 var(--radius-xs) var(--radius-xs) 0; }
.cal-day.range-start.range-end{ border-radius:var(--radius-xs); }

/* ---------- FilterBar — Prompt 14, seção 27 ---------- */
.filter-bar{
  display:flex; align-items:flex-end; gap:var(--space-5); padding:var(--space-5); flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);
}
.filter-bar-primary{ display:flex; align-items:flex-end; gap:var(--space-5); flex-wrap:wrap; flex:1; }
/* rótulo visível acima de cada campo (seção 28) — `.field-label` já existia
   (design-system.html), só nunca tinha sido usado dentro da FilterBar. */
.filter-bar-field{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.filter-bar-field-label{ white-space:nowrap; }
.filter-bar-actions{ display:flex; align-items:center; gap:var(--space-2); margin-left:auto; }
.filter-bar-more-badge{ margin-left:2px; }
.filter-bar-clear{ color:var(--text-tertiary); }
.filter-bar-clear:hover{ color:var(--danger); }
.filter-bar-mobile-trigger{ display:none; }

/* ---------- Active filter chips ---------- */
.filter-chips{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.filter-chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 10px; border-radius:var(--radius-full);
  background:var(--accent-subtle); color:var(--accent); font-size:12px; border:1px solid var(--iris-border, var(--accent));
  border-color:transparent;
}
.filter-chip .chip-field{ font-weight:600; }
.filter-chip button{
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:inherit; background:rgba(0,0,0,.08); border:none; cursor:pointer; flex:none;
}
.filter-chip button:hover{ background:rgba(0,0,0,.18); }
.filter-chip.is-interaction{ background:var(--iris-bg); color:var(--iris); }
.filter-chips-clear-all{ font-size:12px; color:var(--text-tertiary); background:none; border:none; cursor:pointer; padding:4px 6px; }
.filter-chips-clear-all:hover{ color:var(--danger); text-decoration:underline; }

/* ---------- Drawer / sheet (mobile) ---------- */
.filter-drawer-overlay{
  position:fixed; inset:0; background:var(--overlay); opacity:0; pointer-events:none; z-index:100;
  transition:opacity var(--dur-base) var(--ease-standard);
}
.filter-drawer-overlay.open{ opacity:1; pointer-events:auto; }
.filter-drawer{
  position:fixed; left:0; right:0; bottom:0; background:var(--surface-raised); border-top:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:var(--shadow-xl); max-height:82vh; overflow-y:auto;
  transform:translateY(100%); transition:transform var(--dur-base) var(--ease-spring); padding:var(--space-6); z-index:101;
}
.filter-drawer-overlay.open .filter-drawer{ transform:translateY(0); }
.filter-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-5); }
.filter-drawer-head h3{ font-size:15px; }
.filter-drawer-body{ display:flex; flex-direction:column; gap:var(--space-5); }

@media (min-width: 720px){
  .filter-drawer{ left:auto; right:0; top:0; bottom:0; width:360px; max-width:90vw; max-height:none;
    border-radius:0; border-top:none; border-left:1px solid var(--border); transform:translateX(100%); }
  .filter-drawer-overlay.open .filter-drawer{ transform:translateX(0); }
}

/* ---------- responsividade — seção 31: barra horizontal no desktop, drawer no mobile ---------- */
@media (max-width: 719px){
  .filter-bar-primary{ display:none; }
  .filter-chips{ order:3; width:100%; }
  .filter-bar-mobile-trigger{ display:inline-flex; }
}