/* Оформление ОБЩЕЙ карточки и колонки канбана (см. board-view.js). Эти
   правила подключают обе страницы — панель исполнителей и приложение
   гражданина, — поэтому правка здесь меняет оба интерфейса сразу
   (owner, 02.10.2026). Цвета берутся из переменных темы каждой страницы:
   --surface/--border/--text/--text-dim у панели и их аналоги у приложения
   объявлены в самих страницах, одинаковыми именами. */
.ki-kanban { display: flex; flex-direction: column; gap: 10px; }
.ki-kanban .column { display: flex; flex-direction: column; min-width: 0; }
.ki-kanban .col-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 6px 10px;
  position: sticky; top: 0; z-index: 2;
}
.ki-kanban .col-head .icon { font-size: 14px; }
.ki-kanban .col-count { color: var(--text-dim, var(--muted)); font-weight: 500; }
.ki-kanban .cards { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 10px; }
.ki-kanban .card { position: relative; cursor: pointer; }
/* Общая «начинка» карточки: заголовок, строка данных, подвал с людьми. */
.card-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 1px 8px 1px 6px;
  color: var(--c, var(--text-dim)); border: 1px solid color-mix(in srgb, var(--c, currentColor) 36%, transparent);
  background: color-mix(in srgb, var(--c, currentColor) 13%, transparent);
}
.card-status-pill .icon { font-size: 12px; }
.card-status-pill[data-stage="plan"] { --c: var(--plan); }
.card-status-pill[data-stage="work"] { --c: var(--work); }
.card-status-pill[data-stage="wait"] { --c: var(--wait); }
.card-status-pill[data-stage="review"] { --c: var(--review); }
.card-status-pill[data-stage="reopen"] { --c: var(--reopen); }
.card-status-pill[data-stage="done"] { --c: var(--done); }
.card-status-pill[data-stage="archive"] { --c: var(--text-dim, var(--muted)); }

/* --- Цвета статусов: ОДИН источник на все интерфейсы ---------------------
   Панель раньше брала их из своей темы, приложение — из своей; совпадение
   держалось на честном слове. Теперь значения объявлены здесь, и обе
   страницы наследуют их, если своих не задали (--plan и т.д. у панели
   по-прежнему могут переопределить тему целиком). */
:root {
  --ki-plan: #78909C;
  --ki-work: #1E88E5;
  --ki-wait: #E2A03F;
  --ki-review: #8E7CC3;
  --ki-reopen: #B3542E;
  --ki-done: #576F5A;
  --ki-archive: #90A4AE;
  --plan: var(--ki-plan);
  --work: var(--ki-work);
  --wait: var(--ki-wait);
  --review: var(--ki-review);
  --reopen: var(--ki-reopen);
  --done: var(--ki-done);
}
/* Заголовок колонки — одинаковый в обоих интерфейсах: значок статуса своим
   цветом, название, счётчик, лёгкая подложка тем же цветом. */
.ki-kanban .col-head, .flow-col-head.col-head {
  color: var(--text, var(--fg));
  background: color-mix(in srgb, var(--c, var(--plan)) 14%, transparent);
  border-radius: 10px;
}
.col-head.plan { --c: var(--plan); }
.col-head.work { --c: var(--work); }
.col-head.wait { --c: var(--wait); }
.col-head.review { --c: var(--review); }
.col-head.reopen { --c: var(--reopen); }
.col-head.done { --c: var(--done); }
.col-head.archive { --c: var(--ki-archive); }
.col-head .icon { color: var(--c, var(--plan)); }

/* --- строка данных карточки: номер · время · адрес · телефон · справа
   статус и категория. Пилюля категории НЕ обрезается: при нехватке места
   строка переносится, а не ужимает её до «Ком…» (owner, 02.10.2026). */
.card-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: flex-start; gap: 5px; row-gap: 4px; margin-top: 5px;
  font-size: 10.5px; color: var(--text-dim, var(--muted));
}
.card-meta .meta-right {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  flex: 0 0 auto; max-width: 100%;
}
.card-meta .data-pill { font-size: 10.5px; padding: 1px 8px; max-width: 46%; }
.card-meta .data-pill .icon { font-size: 11px; }
.card-meta .meta-right .data-pill, .card-meta .meta-right .card-status-pill { max-width: 100%; }
.card-meta .meta-right .data-pill span, .card-meta .meta-right .card-status-pill { white-space: normal; overflow: visible; text-overflow: clip; }
.card { overflow: hidden; }