/* ═══════════════════════════════════════════════════════════════════════
   crm-kanban.css — a APARENCIA do kanban do CRM. Par visual do js/crm-core.js
   (que e a logica: renderKanban + moverCard + Sortable).

   Extraido do inline de pages/crm.html em 2026-08-02, quando a Proativa virou
   o terceiro consumidor da engine e o CSS ia ser copiado pela quarta vez.

   ANCORA — POR QUE AS VARIAVEIS --k-* EXISTEM, NAO "SIMPLIFICAR" DE VOLTA:
   as paginas deste repo NAO dividem o mesmo tema. crm.html e inss-obra.html
   vivem no app-shell ESCURO (--surface/--raised/--hairline de workspace-dark.css);
   pages/proativa.html tem tema proprio e CLARO (--papel/--pauta/--tinta), e nao
   carrega nenhum daqueles arquivos. Colar aqui `var(--surface)` direto faz o
   kanban da Proativa renderizar sem fundo, sem borda e sem contraste.
   Por isso toda cor passa por `var(--k-algo, var(--token-escuro))`:
   - quem esta no tema escuro nao declara nada e cai no fallback (visual inalterado);
   - quem tem tema proprio declara as 8 variaveis no :root e ganha o kanban na
     paleta da casa dele.
   O mesmo erro (logica portada, visual nao) ja entregou uma tela "horrivel" em
   2026-06-17 no CRM-INSS.

   As cores POR COLUNA (.col-novo, .col-fechado, ...) NAO moram aqui: os estagios
   sao de cada produto. Cada pagina declara as suas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Alternador de view (Kanban | Lista | ...) ── */
.view-switcher {
  display:flex; gap:4px; background:var(--k-surface, var(--surface));
  border:1px solid var(--k-borda, var(--hairline)); border-radius:10px;
  padding:4px;
}
.view-btn {
  padding:7px 16px; font-size:13px; font-weight:500;
  border-radius:7px; border:none; cursor:pointer;
  background:transparent; color:var(--k-texto-2, var(--text-secondary));
  transition:all .2s; display:flex; align-items:center; gap:6px;
}
.view-btn.active { background:var(--k-ativo, var(--hairline-md)); color:var(--k-ativo-texto, #fff); }
.view-btn:hover:not(.active) { background:var(--k-raised, var(--raised)); color:var(--k-texto, var(--text-primary)); }

/* ── Barra de estagios (chips) ── */
.kanban-stage-bar {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:12px; align-items:center;
}
.ksb-pill {
  display:flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px; cursor:pointer;
  border:1px solid var(--k-borda, var(--hairline)); background:var(--k-surface, var(--surface));
  font-size:12px; font-weight:500; color:var(--k-texto-2, var(--text-secondary));
  transition:all .15s; white-space:nowrap;
}
.ksb-pill:hover { border-color:var(--k-borda-md, var(--hairline-md)); color:var(--k-texto, var(--text-primary)); }
.ksb-pill.active { color:var(--k-texto, var(--text-primary)); background:var(--k-raised, var(--raised)); }
.ksb-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ksb-count {
  font-size:10px; font-weight:700; padding:1px 6px;
  border-radius:10px; background:var(--k-raised, var(--raised));
}
.ksb-pill.active .ksb-count { background:var(--k-count-ativo, rgba(255,255,255,.12)); }

/* ── Wrapper (ancora de posicao para setas e fades) ── */
.kanban-wrapper { position:relative; }
.kanban-wrapper::before, .kanban-wrapper::after {
  content:''; position:absolute; top:0; bottom:12px; width:56px;
  pointer-events:none; z-index:10; transition:opacity .2s;
}
.kanban-wrapper::before {
  left:0;
  background:linear-gradient(to right, var(--k-fundo, var(--base,#0B1120)) 20%, transparent);
  opacity:0;
}
.kanban-wrapper::after {
  right:0;
  background:linear-gradient(to left, var(--k-fundo, var(--base,#0B1120)) 20%, transparent);
}
.kanban-wrapper.at-start::before { opacity:0; }
.kanban-wrapper.at-end::after   { opacity:0; }

/* setas de navegacao */
.kanban-nav-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:20; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--k-borda, var(--hairline)); background:var(--k-surface, var(--surface));
  color:var(--k-texto, var(--text-primary)); cursor:pointer; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px var(--k-sombra, rgba(0,0,0,.35)); transition:all .15s;
}
.kanban-nav-btn:hover { background:var(--k-raised, var(--raised)); border-color:var(--k-borda-md, var(--hairline-md)); }
.kanban-nav-btn.hidden { opacity:0; pointer-events:none; }
.kanban-nav-btn--prev { left:-18px; }
.kanban-nav-btn--next { right:-18px; }

/* ── Quadro ── */
.kanban-board {
  display:flex; gap:12px; overflow-x:auto;
  padding-bottom:12px; min-height:60vh;
  scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:var(--k-borda, var(--hairline)) transparent;
}
.kanban-board::-webkit-scrollbar { height:6px; }
.kanban-board::-webkit-scrollbar-track { background:transparent; }
.kanban-board::-webkit-scrollbar-thumb { background:var(--k-borda, var(--hairline)); border-radius:3px; }
.kanban-col {
  flex-shrink:0; width:240px;
  display:flex; flex-direction:column;
}
.kanban-col-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-radius:10px 10px 0 0;
  background:var(--k-surface, var(--surface)); border:1px solid var(--k-borda, var(--hairline));
  border-bottom:none;
}
.kanban-col-title {
  font-size:13px; font-weight:700; display:flex;
  align-items:center; gap:8px;
  color:var(--k-texto, var(--text-primary));
}
.kanban-col-count {
  font-size:12px; font-weight:700; padding:2px 9px;
  border-radius:12px; background:var(--k-raised, var(--raised));
  color:var(--k-texto, var(--text-primary));
}
.kanban-cards {
  flex:1; padding:10px;
  background:var(--k-surface, var(--surface)); border:1px solid var(--k-borda, var(--hairline));
  border-radius:0 0 10px 10px; min-height:120px;
  max-height:min(72vh, calc(100vh - 220px));
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:8px;
  scrollbar-width:thin;
  scrollbar-color:var(--k-borda, var(--hairline)) transparent;
}
.kanban-cards::-webkit-scrollbar { width:6px; }
.kanban-cards::-webkit-scrollbar-thumb { background:var(--k-borda, var(--hairline)); border-radius:4px; }
.kanban-cards.drag-over { border-color:var(--k-borda-md, var(--hairline-md)); background:rgba(196,154,60,.05); }

/* ── Card ── */
.lead-card {
  background:var(--k-raised, var(--raised)); border:1px solid var(--k-borda, var(--hairline));
  border-radius:8px; padding:10px 12px; cursor:grab;
  transition:box-shadow .15s, border-color .15s;
  user-select:none;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.lead-card:hover { border-color:var(--k-borda-md, var(--hairline-md)); box-shadow:0 4px 16px var(--k-sombra, rgba(0,0,0,.3)); }
.lead-card.sortable-drag { opacity:0; }
.lead-card.sortable-ghost { opacity:.4; }
.lead-card-name { font-size:13px; font-weight:600; color:var(--k-texto, var(--text-primary)); margin-bottom:4px; }
.lead-card-phone { font-size:12px; color:var(--k-texto-2, var(--text-secondary)); }
.lead-card-meta { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.lead-chip {
  font-size:10px; font-weight:500; padding:2px 7px;
  border-radius:12px; background:var(--k-surface, var(--surface));
  color:var(--k-texto-2, var(--text-secondary)); border:1px solid var(--k-borda, var(--hairline));
}
.lead-days { font-size:10px; color:var(--k-texto-3, var(--text-muted)); margin-left:auto; }
.lead-card-actions {
  display:flex; flex-direction:column; gap:6px; margin-top:8px;
  width:100%;
}
.lead-card-actions-row {
  display:flex; flex-wrap:wrap; gap:4px; width:100%;
  align-items:center;
}
.lead-card-actions-row--quick .lead-act-btn { flex:1 1 28%; min-width:56px; }
.lead-card-actions-row--more .lead-act-btn { flex:1 1 30%; min-width:0; }
.lead-act-btn {
  font-size:10px; padding:3px 7px; border-radius:6px;
  min-width:0;
  box-sizing:border-box;
  text-decoration:none; text-align:center;  /* a acao pode ser <a> (wa.me) ou <button> */
  border:1px solid var(--k-borda, var(--hairline)); background:transparent;
  color:var(--k-texto-2, var(--text-secondary)); cursor:pointer;
  transition:all .15s;
}
.lead-act-btn:hover { background:var(--k-surface, var(--surface)); color:var(--k-texto, var(--text-primary)); }
.lead-act-btn.danger:hover { border-color:var(--k-perigo, var(--red)); color:var(--k-perigo, var(--red)); }
.lead-act-btn--wa { border-color:rgba(37,211,102,.35); color:#25d366; }
.lead-act-btn--wa:hover { background:rgba(37,211,102,.08); color:#4ade80; }
.lead-act-btn--tg { border-color:rgba(0,136,204,.35); color:#38bdf8; }
.lead-act-btn--tg:hover { background:rgba(0,136,204,.1); color:#7dd3fc; }

/* badge de etapa tocavel no card (abre o seletor de mover) */
.lead-stage-badge { display:inline-block; margin-top:6px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:12px; cursor:pointer; }

/* ── Toast — exigido por CrmCore.toast()/moverCard() ──
   Sem um #toast na pagina, o rollback de um card que falhou ao salvar acontece
   MUDO (CrmCore.toast faz `if (!t) return`). Quem consome a engine precisa deste
   elemento, entao o estilo dele mora junto. */
#toast {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  background:var(--k-surface, var(--surface)); border:1px solid var(--k-borda, var(--hairline));
  border-left:3px solid var(--k-ok, var(--green)); border-radius:8px;
  padding:12px 18px; font-size:13px; color:var(--k-texto, var(--text-primary));
  box-shadow:0 8px 32px var(--k-sombra, rgba(0,0,0,.4));
  transform:translateY(80px); opacity:0; transition:all .3s;
  max-width:340px;
}
#toast.show { transform:translateY(0); opacity:1; }
#toast.error { border-left-color:var(--k-perigo, var(--red)); }

/* ═══════════════ MOBILE (<=768px) ═══════════════
   A resposta ao "kanban nao cabe em 390px", ja validada em producao no CRM
   imobiliario: NAO se arrasta card com o dedo. As colunas viram secoes
   empilhadas de largura cheia e os chips da barra de estagio filtram, deixando
   uma coluna por vez (.stage-filtrado + .col-ativa). Trocar isso por colunas
   lado a lado com drag no toque e regressao, nao melhoria: o dedo cobre o card
   e o gesto briga com a rolagem da pagina. */
@media (max-width:768px) {
  .kanban-board { flex-direction:column; overflow-x:visible; min-height:auto; gap:20px; }
  .kanban-col   { width:100%; }
  .kanban-cards { max-height:none; overflow-y:visible; }  /* nao corta; a pagina rola */
  .kanban-nav-btn { display:none; }
  .kanban-wrapper::before, .kanban-wrapper::after { display:none; }

  .kanban-board.stage-filtrado .kanban-col { display:none; }
  .kanban-board.stage-filtrado .kanban-col.col-ativa { display:flex; }
  .kanban-stage-bar { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .kanban-stage-bar::-webkit-scrollbar { display:none; }
  .ksb-pill { flex-shrink:0; }

  /* acoes primarias grandes no card */
  .lead-card-actions-row--quick { gap:6px; }
  .lead-card-actions-row--quick .lead-act-btn { flex:1 1 0; min-width:0; padding:10px 6px; font-size:13px; font-weight:600; text-align:center; }
  .lead-card { cursor:default; }

  .view-switcher { width:100%; overflow-x:auto; scrollbar-width:none; }
  .view-switcher::-webkit-scrollbar { display:none; }
  .view-btn { flex-shrink:0; }
}