/*
 * sz-channels-redesign.css
 * Overrides da pagina Settings > Canais. Injetado via nginx sub_filter.
 * Convencao: seletores sem [data-v-*] + !important para vencer scoped CSS
 * do Vue (que muda hash a cada build do Vite).
 * Cache busting: bumpar ?v=YYYYMMDDx no nginx ao alterar este arquivo.
 */

/* 2026-05-18a — espacamento entre colunas do card via space-between */
.channels-card {
  justify-content: space-between !important;
}.channels-card-main {
  flex: 0 0 auto !important;
  min-width: 200px !important;
}.channels-col {
  flex: 0 0 200px !important;
}.channels-actions {
  flex: 0 0 auto !important;
}/* 2026-05-18c — esconder badge "CONECTADO" maiusculo do sz-evogo2-status.js
 * (o novo .channels-badge ja cobre essa funcao). */
[data-sz-evogo2-badge] {
  display: none !important;
}/* 2026-05-18c — fix barra de pesquisa: zerar appearance nativa do type=search
 * que renderiza botao X de clear sobreposto ao texto. */
.channels-search-input {
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}.channels-search-input::-webkit-search-decoration,
.channels-search-input::-webkit-search-cancel-button,
.channels-search-input::-webkit-search-results-button,
.channels-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}/* 2026-05-18e — dimensoes da busca (341x40px) e gap 8px ate Novo canal */
.channels-search-input {
  width: 341px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
}.channels-toolbar-right {
  gap: 8px !important;
}/* 2026-05-18f — tipografia da busca: Inter regular 16px,
* placeholder slate-12 com 32% opacity (adapta dark/light). */
.channels-search-input {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  font-style: normal !important;
}.channels-search-input::placeholder {
  color: rgb(var(--slate-12) / 0.32) !important;
  opacity: 1 !important;
}/* 2026-05-18g — botao "Novo canal": sem icone,
bg #59AA59,
* 40px altura,
padding 8/16,
radius 8,
label preto semibold 14px. */
.channels-toolbar-right a > button {
  background-color: #59AA59 !important;
  border-color: #59AA59 !important;
  color: #000000 !important;
  height: 40px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  gap: 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}.channels-toolbar-right a > button:hover {
  background-color: #4d9a4d !important;
  border-color: #4d9a4d !important;
}.channels-toolbar-right a > button [class*='i-lucide-circle-plus'],
.channels-toolbar-right a > button i[class*='lucide-circle-plus'] {
  display: none !important;
}/* 2026-05-18j — avatar e icones internos conforme Figma:
 * - Circulo bg #A0A0A0 (cinza claro)
 * - Icones internos (WhatsApp SVG inline + ChannelIcon do Chatwoot) com cor #9797A0
 * - Manter ChannelIcon visivel ("</>" para Canal::Api puro),
NAO esconder mais.
 */
.channels-avatar {
  background: #a0a0a0 !important;
}.channels-avatar-svg path[fill="#4A4D52"] {
  fill: #a0a0a0 !important;
}.channels-avatar > * {
  color: #9797a0 !important;
}.channels-avatar svg,
.channels-avatar svg path {
  color: #9797a0 !important;
}/* 2026-05-18k — fix alinhamento vertical:
 * - .channels-search-wrap precisa height fixa 40px para o icone absolute
 *   ter referencia correta no translateY(-50%).
 * - .channels-toolbar-right com align-items center para o botao "Novo canal"
 *   (que tem 40px) alinhar com o input (40px) no eixo vertical.
 */
.channels-search-wrap {
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  position: relative !important;
}.channels-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}.channels-toolbar-right {
  align-items: center !important;
}/* 2026-05-18l — forcar padding-left do input para o texto nao sobrepor o icone lupa. */
.channels-search-input {
  padding: 0 12px 0 36px !important;
}/* 2026-05-18m — reverter cor do avatar para #4A4D52 (cinza escuro original).
 * Spec #A0A0A0 era do componente "Avatar-element/avatar base[Don't use]" vazio,
* nao do avatar real com icone. Com #A0A0A0 + icon #9797A0 nao havia contraste.
 */
.channels-avatar {
  background: #4a4d52 !important;
}.channels-avatar-svg path[fill="#4A4D52"] {
  fill: #4a4d52 !important;
}/* 2026-05-18n — alinhamento perfeito busca + botao Novo canal:
 * Toolbar com align-items center fica robusto. Wrap e input ambos
 * com height 40px exato. Aplicar bg/border do Figma adaptado a tokens
 * (rgb(--slate-2)/rgb(--slate-6) p/ adaptar light/dark).
 * Icone da lupa em 20x20 (era 16x16).
 */
.channels-toolbar,
.channels-toolbar-right {
  align-items: center !important;
}.channels-search-wrap,
.channels-search-input {
  height: 40px !important;
  box-sizing: border-box !important;
}.channels-search-input {
  background: rgb(var(--slate-2)) !important;
  border: 1px solid rgb(var(--slate-6)) !important;
  border-radius: 8px !important;
  padding: 0 12px 0 40px !important;
}.channels-search-icon {
  width: 20px !important;
  height: 20px !important;
  left: 12px !important;
}/* 2026-05-18o — forcar alinhamento perfeito busca + botao Novo canal:
 * Garantir align-self e margin zero em cada child do toolbar-right.
 * Wrap e link como inline-flex para tirar diferencas de baseline entre
 * span (wrap) e a (router-link).
 */
.channels-toolbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}.channels-toolbar-right > * {
  align-self: center !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}.channels-toolbar-right a {
  height: 40px !important;
}/* 2026-05-18p — input de busca conforme spec Figma:
 * Container = flex com padding 4px 8px 4px 16px,
gap 16px
 * width 341 / height 40 / radius 8 / border 1px #303138 / bg #242528
 * Icon 20x20 com cor rgba(255,
255,
255,
0.32) — fica inline no flex (sem absolute)
 * Input sem border/bg proprios; flex:1; texto Inter 16px 32% opacity
 * Light mode: cores adaptadas via :not(.dark)
 */
.channels-search-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 4px 8px 4px 16px !important;
  width: 341px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  background: #242528 !important;
  border: 1px solid #303138 !important;
  position: relative !important;
}/* removed light-mode rule */
.channels-search-icon {
  position: static !important;
  transform: none !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  color: rgba(255, 255, 255, 0.32) !important;
  margin: 0 !important;
}/* removed light-mode rule */
.channels-search-input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: 100% !important;
  outline: none !important;
}/* 2026-05-18q — fixar cor #9797A0 nos icones dentro do avatar
 * (whatsapp svg inline + ChannelIcon). Spec Figma confirmado.
 */
.channels-avatar-svg path[fill="#9797A0"],
.channels-avatar-svg path[fill="#9797a0"] {
  fill: #9797a0 !important;
}.channels-avatar svg,
.channels-avatar svg * {
  color: #9797a0 !important;
  fill: #9797a0 !important;
}/* 2026-05-18r — tipografia do texto interno do input (placeholder + valor):
 * line-height 24px conforme spec Figma. Sem isso,
o texto fica desalinhado
 * verticalmente no input de 40px.
 */
.channels-search-input,
.channels-search-input::placeholder {
  line-height: 24px !important;
}.channels-search-input {
  vertical-align: middle !important;
}/* 2026-05-18s — fix lupa:
 * - display inline-block para o span da lupa pegar width/height
 * - background-color currentColor (i-lucide-* usa mask-image)
 * - line-height 0 evita altura herdada do parent flex
 */
.channels-search-icon {
  display: inline-block !important;
  background-color: currentColor !important;
  line-height: 0 !important;
  align-self: center !important;
}/* 2026-05-18t — pin cores hex exatas conforme Figma:
 * - placeholder e lupa: #FFFFFF 32% no dark,
#000000 32% no light
 * - tamanho lupa: 20x20 (bounding box; icon interno 16.67x16.67 com
 *   padding 1.67 vem natural do lucide). stroke-width 1.5px herdado.
 */
.dark .channels-search-input::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
}/* removed light-mode rule */
.dark .channels-search-icon {
  color: rgba(255, 255, 255, 0.32) !important;
}/* removed light-mode rule */

/* 2026-05-18u — forcar tamanho e mask-size do icone lucide search:
 * Tailwind plugin renderiza com mask-image; sem mask-size explicito
 * o icone pode aparecer menor que o container.
 */
.channels-search-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  mask-size: 100% 100% !important;
  -webkit-mask-size: 100% 100% !important;
  mask-position: center !important;
  -webkit-mask-position: center !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
}/* 2026-05-18v — fix lupa cor + altura do texto:
 * - background-color direto em vez de currentColor (alguma regra vencia)
 * - line-height 40px no input centraliza o texto vertical sem padding
 */
.dark .channels-search-icon {
  background-color: rgba(255, 255, 255, 0.32) !important;
  color: rgba(255, 255, 255, 0.32) !important;
}/* removed light-mode rule */
.channels-search-input {
  line-height: 40px !important;
}.channels-search-input::placeholder {
  line-height: 40px !important;
}/* 2026-05-18w — texto do input: line-height 24px (spec Figma) +
 * padding vertical 8px para centralizar no container de 40px.
 * Substitui o line-height 40px anterior que distorcia a metrica do texto.
 */
.channels-search-input,
.channels-search-input::placeholder {
  line-height: 24px !important;
}.channels-search-input {
  padding: 8px 0 !important;
}/* 2026-05-18x — centralizar texto no input via altura igual ao line-height:
 * Em vez de height:40 + padding:8,
deixar o input com height 24 (= line-height)
 * e o wrap flex (align-items:center) cuida do centralizar dentro dos 40px.
 * Mais robusto que padding pois nao depende de border do input.
 */
.channels-search-input {
  height: 24px !important;
  padding: 0 !important;
  line-height: 24px !important;
}/* 2026-05-18y — root cause descoberto via computed style:
 * Chatwoot aplica margin-bottom:16px em inputs (estilo global de form).
 * Isso desloca o texto pra cima dentro do wrap flex de 40px.
 * Forcar margin:0 com specificity maior.
 */
.channels-search-wrap input.channels-search-input,
input.channels-search-input {
  margin: 0 !important;
}/* 2026-05-18z — pin cor do placeholder com todos prefixos de browser:
 * Spec Figma: #FFFFFF 32%. Forcar em ::placeholder e nos pseudo
 * vendor-prefixed (::-webkit-input-placeholder etc) caso algum
 * CSS do Chatwoot esteja vencendo.
 */
.dark .channels-search-input::placeholder,
.dark .channels-search-input::-webkit-input-placeholder,
.dark .channels-search-input::-moz-placeholder,
.dark .channels-search-input:-ms-input-placeholder,
.dark .channels-search-input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important;
}/* removed light-mode rule */

/* 2026-05-19a — fix conflito dark/light: a classe .dark esta no <body>,
* nao no <html>. Regras /* removed light-mode rule */
body.dark .channels-search-input::placeholder,
body.dark .channels-search-input::-webkit-input-placeholder,
body.dark .channels-search-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important;
}/* Icone da lupa */
.channels-search-icon {
  color: rgba(0, 0, 0, 0.32) !important;
  background-color: rgba(0, 0, 0, 0.32) !important;
}body.dark .channels-search-icon {
  color: rgba(255, 255, 255, 0.32) !important;
  background-color: rgba(255, 255, 255, 0.32) !important;
}/* Wrap do input bg/border */
.channels-search-wrap {
  background: rgb(var(--slate-2)) !important;
  border-color: rgb(var(--slate-6)) !important;
}body.dark .channels-search-wrap {
  background: #242528 !important;
  border-color: #303138 !important;
}/* 2026-05-19b — specificity de /* removed light-mode rule */
:root body.dark .channels-search-icon {
  color: rgba(255, 255, 255, 0.32) !important;
  background-color: rgba(255, 255, 255, 0.32) !important;
}:root body.dark .channels-search-wrap {
  background: #242528 !important;
  border-color: #303138 !important;
}/* 2026-05-19c — specificity ainda maior no placeholder (0,
3,
3):
 * :root body.dark input.channels-search-input::placeholder.
 */
:root body.dark input.channels-search-input::placeholder,
:root body.dark input.channels-search-input::-webkit-input-placeholder,
:root body.dark input.channels-search-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important;
  opacity: 1 !important;
}/* 2026-05-19d — usar cor solida pre-blendada (#6A6B6D = rgba(255,
255,
255,
0.32)
 * sobre fundo #242528) em ambos placeholder e lupa. Cor solida elimina
 * diferenca visual entre antialiased text e mask-image shape,
que percebia
 * o texto mais palido que a lupa mesmo com mesma rgba.
 */
:root body.dark input.channels-search-input::placeholder,
:root body.dark input.channels-search-input::-webkit-input-placeholder,
:root body.dark input.channels-search-input::-moz-placeholder {
  color: #6a6b6d !important;
  -webkit-text-fill-color: #6a6b6d !important;
  opacity: 1 !important;
}:root body.dark .channels-search-icon {
  background-color: #6a6b6d !important;
  color: #6a6b6d !important;
}/* 2026-05-19e — aplicar cor SEM depender de body.dark (que nao esta vencendo
 * a regra /* removed light-mode rule */
.channels-search-icon.channels-search-icon {
  background-color: #6a6b6d !important;
  color: #6a6b6d !important;
}/* 2026-05-19f — fix specificity calc: regra anterior /* removed light-mode rule */

/* 2026-05-19g — texto e lupa com rgba(255,
255,
255,
0.32) (spec Figma exato).
 * Specificity (0,
4,
1) no placeholder para vencer light mode.
 */
.channels-search-input.channels-search-input.channels-search-input.channels-search-input::placeholder,
.channels-search-input.channels-search-input.channels-search-input.channels-search-input::-webkit-input-placeholder,
.channels-search-input.channels-search-input.channels-search-input.channels-search-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important;
  opacity: 1 !important;
}.channels-search-icon.channels-search-icon.channels-search-icon {
  background-color: rgba(255, 255, 255, 0.32) !important;
  color: rgba(255, 255, 255, 0.32) !important;
}

/* 2026-05-19j — caracteristicas da letra (texto + placeholder) conforme
 * spec Figma exato. Specificity nuclear.
 */
.channels-search-input.channels-search-input.channels-search-input.channels-search-input,
.channels-search-input.channels-search-input.channels-search-input.channels-search-input::placeholder,
.channels-search-input.channels-search-input.channels-search-input.channels-search-input::-webkit-input-placeholder {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: normal !important;
  font-style: normal !important;
  text-align: left !important;
  vertical-align: middle !important;
}

/* 2026-05-19k — light mode avatar: #A0A0A0 conforme Figma (dark mantem #4A4D52). */
body:not(.dark) .channels-avatar {
  background: #a0a0a0 !important;
}
body:not(.dark) .channels-avatar-svg path[fill="#4A4D52"] {
  fill: #a0a0a0 !important;
}

/* 2026-05-19l — badge Conectado em light mode: bg #D9EBDE (verde claro)
 * + texto #194121 (verde escuro). Pattern inverso do dark.
 */
body:not(.dark) .channels-badge-connected {
  background: #d9ebde !important;
  color: #194121 !important;
}

/* 2026-05-19m — texto "Novo canal" branco (era preto). */
.channels-toolbar-right a > button.channels-toolbar-right a > button {
  color: #ffffff !important;
}
.channels-toolbar-right a > button {
  color: #ffffff !important;
}

/* 2026-05-19n — light mode: lupa e placeholder com rgba(0,0,0,0.32)
 * (em vez de white 32% que fica invisivel em fundo claro).
 */
body:not(.dark) .channels-search-icon.channels-search-icon.channels-search-icon {
  background-color: rgba(0, 0, 0, 0.32) !important;
  color: rgba(0, 0, 0, 0.32) !important;
}
body:not(.dark) input.channels-search-input.channels-search-input.channels-search-input.channels-search-input::placeholder,
body:not(.dark) input.channels-search-input.channels-search-input.channels-search-input.channels-search-input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.32) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.32) !important;
}

/* 2026-05-19o — light mode: icone interno do avatar (WhatsApp svg inline +
 * ChannelIcon do Chatwoot) em branco para contrastar com bg #A0A0A0 claro.
 * Dark mantem #9797A0.
 */
body:not(.dark) .channels-avatar-svg path[fill="#9797A0"],
body:not(.dark) .channels-avatar-svg path[fill="#9797a0"] {
  fill: #ffffff !important;
}
body:not(.dark) .channels-avatar svg,
body:not(.dark) .channels-avatar svg * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* 2026-05-19p — alinhamento entre rows via CSS Grid:
 * Trocar flex+space-between por grid com larguras fixas garante que
 * "Numero de contato", "Criado em" e "Ultima mensagem em" alinhem
 * verticalmente entre todos os cards, independente do tamanho do nome.
 */
.channels-card {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) 200px 200px 200px auto !important;
  justify-content: initial !important;
  gap: 24px !important;
  align-items: center !important;
}
.channels-card-main {
  flex: initial !important;
  min-width: 0 !important;
}
.channels-col {
  flex: initial !important;
  min-width: 0 !important;
}
.channels-actions {
  flex: initial !important;
}

@media (max-width: 1280px) {
  .channels-card {
    grid-template-columns: minmax(240px, 1fr) 200px 200px auto !important;
  }
}
@media (max-width: 1024px) {
  .channels-card {
    grid-template-columns: minmax(240px, 1fr) 200px auto !important;
  }
}
@media (max-width: 768px) {
  .channels-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

/* 2026-05-19q — distribuir colunas com 1fr cada (em vez de 200px fixo)
 * e nome com largura fixa 280px. Assim as 3 cols info dividem espaco
 * igual entre si e ficam mais separadas conforme tamanho da tela.
 */
.channels-card {
  grid-template-columns: 280px 1fr 1fr 1fr auto !important;
  gap: 32px !important;
}

@media (max-width: 1280px) {
  .channels-card {
    grid-template-columns: 240px 1fr 1fr auto !important;
  }
}
@media (max-width: 1024px) {
  .channels-card {
    grid-template-columns: 240px 1fr auto !important;
  }
}
@media (max-width: 768px) {
  .channels-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

/* 2026-05-19r — garantir circle visual no .channels-avatar mesmo quando
 * criado via JS (sem [data-v-*]). Aplica dimensoes, bg e centralizacao.
 */
.channels-avatar {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.channels-avatar svg {
  width: 20px !important;
  height: 20px !important;
}
body.dark .channels-avatar {
  background: #4a4d52 !important;
}
body:not(.dark) .channels-avatar {
  background: #a0a0a0 !important;
}

/* 2026-05-19s — icone dentro do avatar SEMPRE branco (light + dark). */
.channels-avatar svg,
.channels-avatar svg * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* 2026-05-19t — chips de filtro em LIGHT MODE conforme Figma:
 * - Inativo: bg #FFFFFF, border 1px #E5E5E5, texto preto
 * - Ativo: bg #DFEFE3 (verde claro), sem border visivel, texto preto
 * - Contador: bg #000000, texto #FFFFFF, peso 600, font-size 10px line-height 20px
 */
body:not(.dark) .channels-filter-chip {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  color: #000000 !important;
}
body:not(.dark) .channels-filter-chip:hover {
  color: #000000 !important;
}
body:not(.dark) .channels-filter-chip.active {
  background: #dfefe3 !important;
  border-color: #dfefe3 !important;
  color: #000000 !important;
}
body:not(.dark) .channels-filter-count {
  background: #000000 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  line-height: 20px !important;
  min-width: 16px !important;
  padding: 0 5px !important;
}
body:not(.dark) .channels-filter-chip.active .channels-filter-count {
  background: #000000 !important;
  color: #ffffff !important;
}

/* 2026-05-19u — forcar bg do avatar no dark com specificity maior,
 * cobre o div criado pelo JS (que nao tem data-v scoped).
 */
html body.dark div.channels-avatar,
html body.dark .channels-avatar.channels-avatar {
  background: #4a4d52 !important;
}
html body:not(.dark) div.channels-avatar,
html body:not(.dark) .channels-avatar.channels-avatar {
  background: #a0a0a0 !important;
}

/* 2026-05-19v — texto Novo canal: preto no dark, branco no light */
body.dark .channels-toolbar-right a > button {
  color: #000000 !important;
}
body:not(.dark) .channels-toolbar-right a > button {
  color: #ffffff !important;
}

/* 2026-05-19w — icone interno do avatar = #9797A0 (nao branco). Spec Figma. */
.channels-avatar svg,
.channels-avatar svg * {
  color: #9797a0 !important;
  fill: #9797a0 !important;
  stroke: #9797a0 !important;
}

/* 2026-05-19x — icone interno do avatar adaptado por tema:
 * Dark mode: #9797A0 (cinza medio) | Light mode: #FFFFFF (branco)
 */
body.dark .channels-avatar svg,
body.dark .channels-avatar svg * {
  color: #9797a0 !important;
  fill: #9797a0 !important;
  stroke: #9797a0 !important;
}
body:not(.dark) .channels-avatar svg,
body:not(.dark) .channels-avatar svg * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
body:not(.dark) .channels-avatar-svg path[fill="#9797A0"],
body:not(.dark) .channels-avatar-svg path[fill="#9797a0"] {
  fill: #ffffff !important;
}