/* wa-kanban — camadas de layout do quadro. Consome APENAS tokens
   semantic/component do Ever UI (adocao.md). Importar DEPOIS de everui.css. */

[x-cloak] { display: none !important; }

/* ---------- shell simples (sem sidebar — app de 1 tela) ---------- */
.kb-app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.kb-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.kb-topbar-group { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.kb-topbar-group .tabs { border-bottom: none; }

/* ---------- toolbar ---------- */
.kb-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-8) 0;
}
.kb-toolbar .select-wrap { min-width: 200px; }
.kb-search-count { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }

/* ---------- área do quadro ----------
   Tint de contexto por pipeline: --pipeline-accent vem inline do JS
   (derivado do id) e entra DILUÍDO a 4% sobre a surface — nunca chapado. */
.kb-board-wrap {
  flex: 1; min-height: 0;
  padding: var(--space-4) var(--space-8) var(--space-8);
  background: color-mix(in oklch, var(--surface-page) 96%, var(--pipeline-accent, var(--surface-page)));
}
.kb-board {
  display: flex; align-items: flex-start; gap: var(--space-4);
  overflow-x: auto; padding-bottom: var(--space-4);
  min-height: 100%;
}

/* ---------- coluna ---------- */
.kb-col {
  flex: 0 0 290px; max-width: 290px;
  display: flex; flex-direction: column;
  max-height: calc(100svh - 190px);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.kb-col--ghost {
  background: transparent; border-style: dashed;
  align-items: stretch; justify-content: flex-start;
  padding: var(--space-2);
}
.kb-col__head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4);
}
.kb-col__title {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-col__title-input { min-height: 32px; font-size: var(--text-sm); }
.kb-col__count { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: var(--weight-medium); }
.kb-col__spacer { flex: 1; }
.kb-col__label { padding: 0 var(--space-4) var(--space-2); }
.kb-col__cards {
  flex: 1; min-height: 40px; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
}
.kb-col__foot { padding: var(--space-2) var(--space-3) var(--space-3); }
.kb-col__confirm { margin: var(--space-2) var(--space-3); }

/* ---------- cartão (sóbrio: sombra só no hover) ---------- */
.kb-card {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.kb-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-default); }
.kb-card:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.kb-card__top { display: flex; align-items: flex-start; gap: var(--space-2); }
.kb-card__handle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin: 0 0 0 calc(var(--space-1) * -1);
  border: none; background: transparent; border-radius: var(--radius-sm);
  color: var(--text-tertiary); cursor: grab; padding: 0;
}
.kb-card__handle:active { cursor: grabbing; }
.kb-card__handle .icon { width: 14px; height: 14px; }
.kb-card__title {
  flex: 1; min-width: 0;
  font-size: var(--text-sm); line-height: var(--leading-snug);
  color: var(--text-primary); font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
.kb-card__note {
  margin-top: var(--space-1);
  font-size: var(--text-xs); color: var(--text-secondary);
  line-height: var(--leading-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kb-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
}
.kb-card__meta:empty { display: none; }
.kb-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  max-width: 100%; min-height: 22px; padding: 0 var(--space-2);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-secondary);
  font-size: var(--text-xs); cursor: pointer;
}
.kb-chip:hover { color: var(--text-body); border-color: var(--border-strong); }
.kb-chip .icon { width: 12px; height: 12px; }
.kb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-card__flag { display: inline-flex; color: var(--warning); }
.kb-card__flag .icon { width: 14px; height: 14px; }
.kb-card__dot-note { display: inline-flex; color: var(--text-tertiary); }
.kb-card__dot-note .icon { width: 13px; height: 13px; }

/* checkbox rápido das tarefas */
.kb-card__check {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--field-bg); color: var(--text-on-action);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.kb-card__check .icon { width: 11px; height: 11px; opacity: 0; }
.kb-card__check:hover { border-color: var(--action); }
.kb-card__check[data-done="true"] { background: var(--action); border-color: var(--action); }
.kb-card__check[data-done="true"] .icon { opacity: 1; }
.kb-card--done .kb-card__title { color: var(--text-tertiary); text-decoration: line-through; }

/* densidade compacta */
:root[data-density="compact"] .kb-card { padding: var(--space-2); }
:root[data-density="compact"] .kb-card__note { display: none; }
:root[data-density="compact"] .kb-card__meta { margin-top: var(--space-1); }

/* ---------- drag & drop (feedback físico) ---------- */
.card--ghost { opacity: 0.35; border: 1px dashed var(--action); }
.card--chosen { border-color: var(--border-strong); }
.card--drag { transform: rotate(1deg); box-shadow: var(--shadow-md); cursor: grabbing; }
body.kb-dragging, body.kb-dragging * { cursor: grabbing !important; }
@media (prefers-reduced-motion: reduce) {
  .card--drag { transform: none; }
}

/* ---------- adicionar inline ---------- */
.kb-add { display: flex; gap: var(--space-2); }
.kb-add .input { min-height: 36px; font-size: var(--text-sm); }

/* ---------- notas (tarefas, fora do quadro) ---------- */
.kb-notas { padding: 0 var(--space-8) var(--space-8); }
.kb-notas__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3); margin-top: var(--space-3);
}
.kb-nota__titulo { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-1); }
.kb-nota__conteudo { font-size: var(--text-xs); color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- drawer: QR do WhatsApp ---------- */
.kb-qr {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  text-align: center; padding: var(--space-4) 0;
}
.kb-qr img {
  width: min(280px, 100%); border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle); background: var(--surface-card);
  padding: var(--space-3);
}

/* ---------- autocomplete de contato no drawer ---------- */
.kb-contact-results {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--surface-card); margin-top: var(--space-2);
  max-height: 220px; overflow-y: auto;
}
.kb-contact-results button {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: var(--tap-min); padding: 0 var(--space-3);
  border: none; background: transparent; color: var(--text-body);
  font: inherit; font-size: var(--text-sm); cursor: pointer; text-align: left;
}
.kb-contact-results button:hover { background: var(--surface-subtle); }
.kb-contact-results .muted { font-size: var(--text-xs); }

/* ---------- responsivo ---------- */
@media (max-width: 767px) {
  .kb-toolbar { padding: var(--space-3) var(--space-4) 0; }
  .kb-board-wrap { padding: var(--space-3) var(--space-4) var(--space-6); }
  .kb-notas { padding: 0 var(--space-4) var(--space-6); }
  .kb-col { flex-basis: 82vw; max-width: 82vw; max-height: calc(100svh - 220px); }
  .kb-board { scroll-snap-type: x proximity; }
  .kb-col { scroll-snap-align: start; }
  .kb-topbar-group .tabs { gap: var(--space-2); }
}