/* ============ Канбан клиентов ============ */
.kanban {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}
/* колонки занимают свободную ширину, но не ужимаются: места мало — появится прокрутка,
   места много — растягиваются вместо пустоты справа */
.kanban-col {
  flex: 1 1 272px; min-width: 248px; max-width: 420px;
  display: flex; flex-direction: column; max-height: calc(100vh - 240px);
  /* подложка колонки: карточки внутри читаются как отдельные, доска не сливается в чёрное */
  background: var(--col-bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.kanban-col-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px;
  font-weight: 600; font-size: 13px;
}
.kanban-col-head .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0;
  box-shadow: 0 0 7px -2px currentColor; /* цвет этапа приходит инлайном (background + color) */
}
.kanban-col-head .cnt { color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.kanban-col-head .sum { margin-left: auto; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.kanban-add {
  background: none; border: none; color: var(--faint); text-align: left;
  padding: 0 14px 8px; font-size: 12.5px; transition: color .15s;
}
.kanban-add:hover { color: var(--accent-text); }
.kanban-col-body {
  padding: 2px 10px 12px; overflow-y: auto; min-height: 40px;
  display: flex; flex-direction: column; gap: 10px;
}
.kanban-card {
  /* непрозрачный фон: на подложке колонки полупрозрачный дал бы наложение и карточка
     не отделялась бы (в тёмной теме карточка темнее подложки, в светлой — светлее) */
  background: var(--card-solid); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 13px; cursor: grab; user-select: none; -webkit-user-select: none;
  transition: transform .15s ease, border-color .15s ease;
}
.kanban-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .45; }
.kanban-card.drag-clone {
  position: fixed; z-index: 80; pointer-events: none; width: 250px;
  transform: rotate(2deg); opacity: .92;
}
.kc-name { font-weight: 600; font-size: 13.5px; word-break: break-word; }
.kc-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.kc-amount { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
/* кружок исполнителя: цвет личный, но подложка мягкая — их на доске много, кричать не должны */
.kc-assignee {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text); font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kc-menu {
  background: none; border: none; color: var(--faint); padding: 0 2px;
  font-size: 15px; line-height: 1; float: right; margin: -2px -4px 0 4px;
}
.kc-menu:hover { color: var(--accent-text); }

/* Полоса оплаты внизу канбан-карточки: полупрозрачная, чтобы не спорить с содержимым.
   Видит только владелец (у остальных в данных нет сумм — блок просто не рисуется). */
.kc-pay { margin-top: 9px; opacity: .75; }
.kc-paybar {
  height: 3px; border-radius: 2px; background: var(--border); overflow: hidden;
}
.kc-paybar > i { display: block; height: 100%; background: var(--green); border-radius: 2px; }
.kc-paybar.full > i { opacity: .55; }
.kc-payrow {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums;
}
.kc-owe { margin-left: auto; color: var(--amber); }