/*
 * filters.css: Componentes de filtro compartilhados entre o Atendimento
 * (/app/inbox, inbox.css v3.79.0) e o Kanban (/app/kanban, v3.80.0).
 *
 * Escopo duplo por LISTA EXPLÍCITA de seletores (nada de :where, que zeraria
 * a especificidade e faria a regra perder para as vizinhas):
 *   - Inbox:  `.wa-scope .wa X`     (o painel WhatsApp-web do Atendimento)
 *   - Kanban: `.dmw-filterbar X`    (classe posta em .kb-filters, a toolbar
 *             dentro da band, e na própria .chips-row, fora dela)
 *
 * As declarações dos blocos abaixo são cópia BYTE A BYTE das que existiam em
 * inbox.css (só mudou a lista de seletores): extração sem redesenho (K10).
 * Exceção deliberada: o bloco "Kanban-específico" no fim do arquivo, que é
 * novo (não existia no Inbox) e por isso passou por calibração visual.
 */

/* guard [hidden]: sem isso a linha/[hidden] não colapsa (já vivemos esse
   bug: [hidden] perde para display:flex se não vier com !important aqui).
   Lado Kanban cobre os DOIS casos: a própria .chips-row carrega o atributo
   `hidden` (ela É o elemento .dmw-filterbar) e #kbFilterDot é descendente
   dela/de .kb-filters. */
.wa-scope .wa [hidden],
.dmw-filterbar[hidden],
.dmw-filterbar [hidden]{display:none !important;}

/* ── botão "FILTROS" em pílula + dot de indicação ── */
.wa-scope .wa .wa-filter-btn,
.dmw-filterbar .wa-filter-btn{
  height:34px;border:1px solid var(--wa-divider);background:transparent;border-radius:17px;
  display:flex;align-items:center;gap:7px;padding:0 14px;cursor:pointer;position:relative;
  color:var(--wa-icon);font-family:"Outfit",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  transition:background .12s;
}
.wa-scope .wa .wa-filter-btn:hover,
.dmw-filterbar .wa-filter-btn:hover{background:rgba(0,0,0,.05);}
/* Variante compacta (W1.3/D3): o cabeçalho da lista de Atendimento passou a
   ter dois botões em pílula, num painel que encosta em 360px. Medido headless:
   com o padding cheio a dupla ocupa 281px de 287px úteis, e 6px de folga é o
   tipo de margem que uma troca de fonte come. Compacto, sobram 33px. */
.wa-scope .wa .wa-filter-btn.compact,
.dmw-filterbar .wa-filter-btn.compact{padding:0 10px;gap:6px;letter-spacing:.03em;}
.wa-scope .wa .wa-filter-btn.compact svg,
.dmw-filterbar .wa-filter-btn.compact svg{width:16px;height:16px;}
.wa-scope .wa .wa-filter-btn svg,
.dmw-filterbar .wa-filter-btn svg{width:18px;height:18px;}
.wa-scope .wa .wa-filter-btn .wa-filter-dot,
.dmw-filterbar .wa-filter-btn .wa-filter-dot{
  position:absolute;top:3px;right:8px;width:8px;height:8px;border-radius:50%;
  background:#2F5096;box-shadow:0 0 0 2px var(--wa-header);
}

/* ── faixa de chips ativos ── */
.wa-scope .wa .chips-row,
.dmw-filterbar.chips-row{
  padding:8px 12px;background:var(--wa-pane);border-bottom:1px solid var(--wa-divider);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.wa-scope .wa .fchip,
.dmw-filterbar .fchip{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 10px;
  background:rgba(47,80,150,.08);color:#2F5096;border-radius:13px;
  font-size:12.5px;font-weight:600;max-width:100%;
}
/* fundo mantém o token dourado da marca (#A8863F); o texto usa um dourado
   mais escuro (#7C632F) só p/ o par texto/fundo bater WCAG AA 4.5:1.
   Ver task-6-report.md p/ os contrastes calculados. */
.wa-scope .wa .fchip.sortc,
.dmw-filterbar .fchip.sortc{background:rgba(168,134,63,.12);color:#7C632F;}
.wa-scope .wa .fchip .fchip-sort-ic,
.dmw-filterbar .fchip .fchip-sort-ic{font-size:12px;line-height:1;}
.wa-scope .wa .fchip .fchip-dot,
.dmw-filterbar .fchip .fchip-dot{width:9px;height:9px;border-radius:3px;flex:0 0 9px;}
.wa-scope .wa .fchip .fchip-x,
.dmw-filterbar .fchip .fchip-x{
  width:18px;height:18px;border:none;background:transparent;border-radius:50%;color:inherit;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-size:12px;line-height:1;
}
.wa-scope .wa .fchip .fchip-x:hover,
.dmw-filterbar .fchip .fchip-x:hover{background:rgba(47,80,150,.15);}
.wa-scope .wa .fchips-clear,
.dmw-filterbar .fchips-clear{
  border:none;background:transparent;color:var(--wa-meta);font-size:12px;font-weight:600;
  cursor:pointer;padding:4px 6px;margin-left:auto;
}
.wa-scope .wa .fchips-clear:hover,
.dmw-filterbar .fchips-clear:hover{color:#2F5096;text-decoration:underline;}

/* ── popover/dropdown genérico ("Ordenar e filtrar") ── */
.wa-scope .wa .pop,
.dmw-filterbar .pop{
  position:absolute;z-index:60;min-width:210px;
  background:#fff;border:1px solid var(--hair);border-radius:12px;
  box-shadow:0 14px 36px -10px rgba(33,57,108,.32),0 4px 12px rgba(22,26,35,.1);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .14s,transform .14s,visibility .14s;
  font-family:"Hanken Grotesk",sans-serif;
}
.wa-scope .wa .pop.open,
.dmw-filterbar .pop.open{opacity:1;visibility:visible;transform:translateY(0);}
/* Teto de altura com rolagem interna, em duas camadas.

   ⚠️ Quem manda no teto é o JS: `dmwFitPopover` (core.js) recalcula o
   `max-height` inline no momento de ABRIR, com a posição real do popover. O
   `calc(100vh - Npx)` abaixo é FALLBACK (página sem JS, ou core.js que não
   carregou), e não deve ser tratado como a trava: ele é ancorado em 100vh e
   NÃO enxerga o `#conn-banner`, que empurra a página quando o
   número cai. A folga aqui é de ~11px no Kanban e ~13px no Atendimento, ou
   seja, com o banner na tela o fallback sozinho volta a cortar (medido: 45,8px
   no Kanban, 23,3px no Atendimento). Foi por isso que o cálculo na abertura
   entrou.

   O popover cresce com o que a conta tem
   (estágios, atendentes, etiquetas e, desde a W1.1, canais de entrada), e no
   Atendimento ele JÁ estourava a viewport antes da faceta de canal existir:
   medido headless em 1440x900, com os submenus abertos, dava 672px de altura
   partindo de top:161 (fundo em 832 contra 805 de viewport) e era recortado
   pelo overflow de .main-content, sem rolagem própria. Os itens de baixo
   ficavam inalcançáveis. Com a faceta de canal da D'Matos (4 canais) ia a
   865px. O teto em vh resolve os dois: quem não cabe rola dentro do cartão.
   O desconto é diferente nos dois escopos, e nenhum dos dois é número mágico.
   No Atendimento o limite não é a viewport e sim o `.wa`, que tem
   `overflow:hidden` e `height:calc(100vh - var(--nav-h) - 61px)` (inbox.css):
   o popover nasce 61px abaixo do topo dele, então sobra `100vh - 64 - 61 - 61`,
   ou seja 100vh menos 186px, e 200px deixa 14px de folga (medido: fundo do
   popover em 771 contra 785 do `.wa` em 1440x900, e 951 contra 965 em
   1920x1080). No Kanban o popover é filho da band, sem recorte de ancestral, e
   o limite é a viewport: ele nasce entre 193px e 199px do topo, então 210px
   fecha a conta. No caso comum (submenus fechados) o conteúdo cabe, o teto não
   morde e nada muda de aparência. */
.wa-scope .wa .pop{max-height:calc(100vh - 200px);overflow-y:auto;}
.dmw-filterbar .pop{max-height:calc(100vh - 210px);overflow-y:auto;}
.wa-scope .wa .pop-title,
.dmw-filterbar .pop-title{font-family:"Outfit",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:#2F5096;padding:8px 10px 5px;}
.wa-scope .wa .pop-sep,
.dmw-filterbar .pop-sep{height:1px;background:var(--hair);margin:5px 4px;}
/* Nota de uma linha sob um grupo do popover (hoje: a Situação com um motivo de fechamento marcado). */
.wa-scope .wa .pop-note,
.dmw-filterbar .pop-note{font-size:11.5px;line-height:1.35;color:var(--wa-meta);padding:2px 10px 6px;}
.wa-scope .wa .pop-note[hidden],
.dmw-filterbar .pop-note[hidden]{display:none!important;}
.wa-scope .wa .pop-item,
.dmw-filterbar .pop-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:none;background:transparent;border-radius:8px;
  padding:9px 10px;font-size:13.5px;color:var(--wa-name);cursor:pointer;font-family:inherit;
}
.wa-scope .wa .pop-item:hover,
.dmw-filterbar .pop-item:hover{background:#f4f6fa;}
.wa-scope .wa .pop-item.sel,
.dmw-filterbar .pop-item.sel{background:rgba(47,80,150,.08);color:#2F5096;font-weight:600;}
.wa-scope .wa .pop-item .pi-av,
.dmw-filterbar .pop-item .pi-av{width:28px;height:28px;border-radius:50%;flex:0 0 28px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:11px;
  background:linear-gradient(135deg,#2F5096,#5C7BC0);}
.wa-scope .wa .pop-item .pi-check,
.dmw-filterbar .pop-item .pi-check{margin-left:auto;color:#2F5096;display:none;}
.wa-scope .wa .pop-item.sel .pi-check,
.dmw-filterbar .pop-item.sel .pi-check{display:inline-flex;}
.wa-scope .wa .pop-item .pi-check svg,
.dmw-filterbar .pop-item .pi-check svg{width:16px;height:16px;}
.wa-scope .wa .pop-item .pi-sub,
.dmw-filterbar .pop-item .pi-sub{display:block;font-size:11.5px;color:var(--wa-meta);font-weight:400;}
.wa-scope .wa .pop-item .pi-mono,
.dmw-filterbar .pop-item .pi-mono{font-family:"JetBrains Mono",monospace;font-size:12px;color:#A8863F;flex:0 0 auto;}
.wa-scope .wa .pop-item .pi-txt,
.dmw-filterbar .pop-item .pi-txt{min-width:0;}
.wa-scope .wa .pop-item .pi-txt b,
.dmw-filterbar .pop-item .pi-txt b{font-weight:600;font-size:13px;display:block;}
.wa-scope .wa .pop-item .pi-txt small,
.dmw-filterbar .pop-item .pi-txt small{display:block;font-size:11.5px;color:var(--wa-meta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}

/* ── submenu "Por estágio" dentro do dropdown (B10) ── */
.wa-scope .wa .pop-item.has-sub,
.dmw-filterbar .pop-item.has-sub{position:relative;}
.wa-scope .wa .pop-item .pi-caret,
.dmw-filterbar .pop-item .pi-caret{margin-left:auto;color:var(--wa-meta);display:inline-flex;}
.wa-scope .wa .pop-item .pi-caret svg,
.dmw-filterbar .pop-item .pi-caret svg{width:16px;height:16px;}
.wa-scope .wa .stage-sub,
.dmw-filterbar .stage-sub{display:none;padding:2px 0 2px 8px;margin:0 4px 4px;border-left:2px solid rgba(47,80,150,.14);}
.wa-scope .wa .stage-sub.open,
.dmw-filterbar .stage-sub.open{display:block;}
.wa-scope .wa .stage-sub .pop-item,
.dmw-filterbar .stage-sub .pop-item{padding:8px 10px;font-size:13px;}

/* ============================================================
   Kanban-específico (novo: passou pela skill frontend-design)
   ============================================================
   Os blocos acima usam var(--wa-icon)/var(--wa-divider)/var(--wa-header)/
   var(--wa-name)/var(--wa-meta)/var(--wa-pane), definidas só dentro de
   .wa-scope (inbox.css). O Kanban não está sob .wa-scope, então sem uma
   redefinição local essas var() ficam "invalid at computed-value time"
   (borda do wa-filter-btn some, texto vira cor herdada, etc.): achado da
   skill de frontend-design, não coberto pelo brief original.

   A superfície importa: .wa-filter-btn/.wa-filter-dot ficam DIRETO sobre o
   fundo escuro da .kb-band (gradiente --band); já o .pop é um cartão branco
   opaco (position:absolute, background:#fff) e a .chips-row vive fora da
   band, sobre o fundo claro da página. Por isso:
     --wa-icon/--wa-divider/--wa-header → recalibrados p/ o fundo escuro,
       reaproveitando a MESMA linguagem "vidro fosco" já usada nesta banda
       (.chip/.band-search em pages.css/app.css: branco translúcido, sem
       inventar paleta nova);
     --wa-name/--wa-meta/--wa-pane → idênticos ao Inbox, porque só valem
       dentro do .pop (cartão branco) e da chips-row (fundo claro).
   --wa-icon opaco (#fff, não rgba(255,255,255,.82)): peso 700 em 11.5px NÃO
   conta como "texto grande" no WCAG (limiar é 18,66px em negrito), então
   vale o piso de 4,5:1: e sobre o trecho mais claro do gradiente onde o
   botão cai (`.kb-filters` tem margin-left:auto), .82 de opacidade mede
   4,05:1 (abaixo do piso). #fff resolve com folga: ver task-7-report.md
   pela conta. */
.dmw-filterbar{
  --wa-icon:#fff;
  --wa-divider:rgba(255,255,255,.22);
  --wa-header:var(--navy,#14213D);
  --wa-name:#111b21;
  --wa-meta:#667781;
  --wa-pane:#ffffff;
}

/* .kb-band herda overflow:hidden de .band (app.css:142): sem isto o
   #kbFilterPop (ancorado em .kb-filters, dentro da band) é recortado pela
   borda arredondada: sobram ~54px de altura útil e o conteúdo mínimo do
   popover passa de 146px. */
.kb-band{overflow:visible;}
/* Os pseudo-elementos decorativos da band (app.css:145-158, glow dourado +
   pontilhado) são inset:0 com cantos quadrados; dependiam do overflow:hidden
   do pai pra não vazar por fora dos cantos arredondados da band. Em vez de
   recortar (o que voltaria a cortar o popover), damos a eles o mesmo raio. */
.kb-band::before,.kb-band::after{border-radius:inherit;}
/* .kanban-board tem z-index:5 (pages.css:443) e sobe por cima da band via
   margin-top negativo (pages.css:444: margin:-46px 22px 0): é assim que
   ele "afunda" sob a curva inferior da band. Sem elevar o .kb-band__row
   (que herda z-index:1 de .band>* em app.css:160) acima do board, o board
   cobre o popover quando ele se estende para dentro dessa faixa de
   sobreposição. NÃO alteramos .band>* (usado por todas as outras bands do
   app): só sobrescrevemos .kb-band__row aqui, mais específico ao Kanban. */
.kb-band__row{z-index:10;}

/* Layout dos controles na band do Kanban */
.kb-filters{display:flex;align-items:center;gap:10px;position:relative;margin-left:auto;}
.kb-search-pill{
  height:34px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:17px;display:flex;align-items:center;padding:0 14px;gap:8px;min-width:200px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .15s,border-color .15s;
}
.kb-search-pill:focus-within{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);}
.kb-search-pill svg{color:rgba(255,255,255,.68);flex:0 0 16px;}
.kb-search-pill input{border:none;background:transparent;outline:none;flex:1;font-family:inherit;font-size:13.5px;color:#fff;}
/* .62 media 3,12:1 contra o ponto mais claro do gradiente --band (#2F5096,
   fim do 125deg): abaixo do piso de 4,5:1 (WCAG AA texto pequeno). .88
   calcula 4,65:1 no mesmo ponto (pior caso da banda). */
.kb-search-pill input::placeholder{color:rgba(255,255,255,.88);}
.kanban-col .kb-col-empty{text-align:center;color:var(--cinza-400,#8a94a6);padding:18px 0;font-size:14px;user-select:none;}
/* Chips alinhados à DIREITA, terminando na mesma borda vertical da busca e do
   botão FILTROS (que ficam à direita por `.kb-filters{margin-left:auto}`).
   Senão o chip nasce colado na margem esquerda, a ~1900px do controle que o
   criou. O padding-right casa com a borda interna da band: 22px de margem
   (.kb-band) + 26px de padding = 48px. */
.chips-row.dmw-filterbar{
  padding:8px 48px 8px 24px;background:transparent;border-bottom:none;
  justify-content:flex-end;
}
/* `.fchips-clear` tem margin-left:auto (empurra "Limpar" pro fim da coluna
   estreita do Inbox). Num container justify-content:flex-end essa margem auto
   absorve TODO o espaço livre e joga os chips de volta pra esquerda: anulando
   o alinhamento acima. No Kanban o Limpar segue os chips, colado neles. */
.dmw-filterbar .fchips-clear{margin-left:0;}
@media (max-width: 720px){
  /* .kb-band vira margin:10px 12px + padding:…18px (pages.css:1050) = 30px */
  .chips-row.dmw-filterbar{padding-right:30px;}
}
/* .kanban-board tem margin-top:-46px (pages.css:441-444) pra subir e afundar
   sob a curva inferior da .kb-band: desenho original da tela, INTOCADO no
   estado padrão (chips-row com [hidden], 0 de altura no fluxo: o board sobe
   direto por cima da band, como sempre foi). A chips-row foi inserida ENTRE
   a band e o board (kanban-board.eta:53-71); quando ela fica visível (sem
   [hidden]) e ganha altura real no fluxo, o mesmo -46px passa a puxar o
   board por cima DELA em vez da band, cobrindo os chips. Zeramos só o
   margin-top do board nesse caso: condicionado ao próprio atributo
   [hidden] que o kanban.js já alterna (sem JS novo): pra ele nascer
   abaixo da linha de chips em vez de invadi-la; margin-left/right/bottom
   originais (pages.css:441, e o ajuste mobile em pages.css:1051) continuam
   valendo, só a longhand margin-top é sobrescrita. */
.chips-row.dmw-filterbar:not([hidden]) ~ .kb-scroll-wrap .kanban-board{margin-top:0;}