/* =============================================================
   CRM OrunAye — kanban.css
   Layout de colunas horizontais, cartões arrastáveis,
   indicadores visuais de status
   ============================================================= */

/* ─── Kanban Board ───────────────────────────────────────────── */
.kanban-board {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-md);
  align-items: flex-start;
  /* Snap scrolling on mobile for a swipe-through experience */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Stretch to use full viewport minus sidebar on desktop */
  min-height: calc(100dvh - var(--topbar-height) - 120px);
}

/* ─── Kanban Column ──────────────────────────────────────────── */
.kanban-column {
  flex: 0 0 280px;
  min-width: 260px;
  max-width: 300px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  max-height: calc(100dvh - var(--topbar-height) - 120px);
  overflow: hidden;
}

.kanban-column-header {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 1;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  gap: var(--space-xs);
}

.kanban-column-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-column-count {
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  flex-shrink: 0;
}

/* Column accent bars by status */
.kanban-column[data-status="Novo"]                   .kanban-column-header { border-top: 3px solid #3b82f6; }
.kanban-column[data-status="Contato Enviado"]         .kanban-column-header { border-top: 3px solid #6366f1; }
.kanban-column[data-status="Respondeu"]               .kanban-column-header { border-top: 3px solid #10b981; }
.kanban-column[data-status="Entendendo Necessidade"]  .kanban-column-header { border-top: 3px solid #f59e0b; }
.kanban-column[data-status="Produto Apresentado"]     .kanban-column-header { border-top: 3px solid #8b5cf6; }
.kanban-column[data-status="Negociação"]              .kanban-column-header { border-top: 3px solid #ec4899; }
.kanban-column[data-status="Link Enviado"]            .kanban-column-header { border-top: 3px solid #06b6d4; }
.kanban-column[data-status="Comprou"]                 .kanban-column-header { border-top: 3px solid #059669; }
.kanban-column[data-status="Perdido"]                 .kanban-column-header { border-top: 3px solid #ef4444; }
.kanban-column[data-status="Sem Resposta"]            .kanban-column-header { border-top: 3px solid #9ca3af; }

/* ─── Kanban Cards List ──────────────────────────────────────── */
.kanban-cards {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 60px; /* allow drop on empty column */
}

/* Drop target highlight */
.kanban-cards.drag-over {
  background: var(--color-brand-light);
  border-radius: var(--radius-md);
  outline: 2px dashed var(--color-brand);
  outline-offset: -2px;
}

/* ─── Kanban Card ────────────────────────────────────────────── */
.kanban-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  user-select: none;
  transition: box-shadow var(--transition), border-color var(--transition), opacity var(--transition);
  position: relative;
}

.kanban-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand);
}

/* While dragging */
.kanban-card.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* Ghost placeholder during drag */
.kanban-card-ghost {
  background: var(--color-brand-light);
  border: 2px dashed var(--color-brand);
  border-radius: var(--radius-md);
  height: 64px;
}

/* ─── Card Content ───────────────────────────────────────────── */
.kanban-card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-instagram {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.kanban-card-assignee {
  font-size: var(--text-xs);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.kanban-card-avatar {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-brand-light);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ─── Card Indicators ────────────────────────────────────────── */
/* Follow-up today */
.kanban-card.has-followup-today {
  border-left: 3px solid var(--color-warning);
}

/* No contact > 3 days */
.kanban-card.no-contact {
  border-left: 3px solid var(--color-danger);
}

.kanban-card-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: var(--radius-full);
}

.indicator-followup {
  background: #fef3c7;
  color: #92400e;
}

.indicator-nocontact {
  background: #fee2e2;
  color: #991b1b;
}

/* ─── Kanban Toolbar ─────────────────────────────────────────── */
.kanban-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
}

.kanban-filter-user {
  flex: 0 0 auto;
}

/* ─── Drop zone empty message ────────────────────────────────── */
.kanban-empty {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-xs);
  padding: var(--space-md);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--space-xs);
}

/* ─── Mobile scroll hint ─────────────────────────────────────── */
.kanban-scroll-hint {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: center;
  margin-bottom: var(--space-sm);
}

@media (max-width: 767px) {
  .kanban-scroll-hint { display: block; }

  .kanban-board {
    /* On mobile, show partial next column as affordance */
    padding-right: var(--space-xl);
  }

  .kanban-column {
    max-height: calc(100dvh - var(--topbar-height) - 160px);
  }
}

/* ─── Drag-over visual indicator line ────────────────────────── */
.kanban-card.drop-above::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-xs);
}

.kanban-card.drop-below::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  margin-top: var(--space-xs);
}