/* ============================================================================
   CRM — канбан стадий, карточки сделок, строки связей.

   Подключается после deos.css и только уточняет то, что там уже названо:
   своих цветов, отступов и скруглений здесь нет.
   ========================================================================= */

/* ══════════════════════════════════════════════════════════ КАНБАН
   СТОЛБЦЫ СТОЯТ В РЯД И ПРОКРУЧИВАЮТСЯ ВБОК, а не переносятся вниз.
   Стадий семь, и перенос превратил бы воронку в две ступеньки, по которым
   уже не видно движения слева направо — а ради этого движения канбан и
   заводят.

   ВЫСОТУ ДЕРЖИТ ОСТРОВ, А НЕ СТОЛБЦЫ. Столбец растянут на всю доступную
   высоту, и карточки внутри него прокручиваются сами: иначе самый полный
   столбец растягивал бы весь ряд, а соседние стояли бы с пустотой. */
.kb-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-150);
  min-height: 100%;
  overflow-x: auto;
  /* ═══ КРАЯ РЯДА РАСТВОРЯЮТСЯ, А НЕ ОБРЫВАЮТСЯ ═══
     Столбцов семь, в окно они не помещаются, и крайний обрывался ровным
     вертикальным срезом. Заказчик 24.08: «чтобы эту обрезку убрать —
     сделай эффект фэйда».

     Рисуется МАСКОЙ, а не завесой поверх. Завеса — это прямоугольник
     цвета подложки; здесь под рядом лежит остров, а за его краем —
     страница, и один цвет на оба места не подобрать. Маска же не
     красит, а гасит: содержимое честно исчезает, чем бы под ним ни
     было. Гаснет только та сторона, за которой ещё есть столбцы:
     отметку ставит общий наблюдатель (`kit/edges.js`).

     Высота растворения — общее число `--fade`, как у всех прокруток. */
  /* Сам рисунок растворения вбок живёт в `deos.css` рядом с завесами
     верха и низа — он один на все боковые прокрутки программы. Здесь
     остаётся только то, что у доски своё: воздух в конце ряда. */

  /* ВОЗДУХ В КОНЦЕ РЯДА — ЧТОБЫ ПОСЛЕДНИЙ СТОЛБЕЦ НЕ УПИРАЛСЯ В ОБРЕЗ.
     Домотав вбок до упора, человек видел у крайнего столбца всё, кроме
     правой грани: она приходилась ровно на точку, по которой остров
     обрезает содержимое, и пропадала. Заказчик 24.08: «у крайнего
     столбца сломана обводка почему-то». Обводка была цела — её срезал
     край. Поле берётся тем же числом, что и зазор между столбцами:
     конец ряда выглядит так же, как промежуток в нём. */
  padding-right: var(--sp-150);
  /* РЯД ЗАНИМАЕТ ОСТРОВ ЦЕЛИКОМ, И ГОВОРИТ ОБ ЭТОМ САМ.
     Общее правило острова обратное: житель едущего столбца стоит своей
     высотой и не ужимается (`.sblock > .sflow > *`) — иначе списки и
     графики сплющиваются вместо того, чтобы уехать под прокрутку. Доска
     тут исключение по сути: её столбцы обязаны быть ростом в остров, а
     карточки внутри прокручиваются сами. Пока рост брался чужим
     правилом, доска на него и опиралась — и потеряла его молча: столбцы
     стали ростом в содержимое, а растворение у переполненного столбца
     пропало вовсе (поймано мерой `check_crm_ui`).

     ИМЯ ЗАПИСАНО ТРЕМЯ ЧАСТЯМИ (`.sblock > .sflow > .kb-row`), и это не
     украшение: общее правило весит два имени, а `.kb-row` — одно, и при
     меньшем весе оно проигрывает МОЛЧА. Свод про это уже написан целой
     статьёй — «вес правила проверяется, а не предполагается», — и я
     попался в неё снова, первым же заходом. */
}
.sblock > .sflow > .kb-row { flex: 1 1 auto; }
.kb-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-100);
  /* Ширина столбца — не доля от ряда, а своя мера: доля на семи столбцах
     давала бы 14% ширины, то есть карточку в полторы буквы. */
  flex: 0 0 232px;
  min-height: 0;
  padding: var(--sp-100);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  background: var(--a-100);
}
/* Столбец под указателем во время переноса. Подсветка обязана быть
   заметной: без неё человек отпускает карточку наугад. */
.kb-col.kb-over {
  border-color: var(--acc-solid);
  background: var(--acc-weak);
}
.kb-title { font-weight: var(--fw-med); color: var(--ink); }
.kb-sum {
  min-height: var(--lh-s);
  font-size: var(--fs-s);
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.kb-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-100);
  /* ПОЛЕ КАРТОЧЕК ЗАНИМАЕТ СТОЛБЕЦ ЦЕЛИКОМ, а не жмётся к заголовку.
     Без этого столбец был высотой во весь остров (рамка тянулась), а
     поле внутри него — ровно по карточкам: 60 точек при столбце в 838.
     Две беды сразу. Видно: пустой столбец выглядел обрезком под шапкой.
     И на ощупь: бросить карточку в нижние три четверти столбца было
     некуда — там уже не поле, а пустая рамка, и бросок не засчитывался.

     `min-height: 0` рядом с ростом обязателен: у растянутого элемента в
     колонке наименьшая высота по умолчанию равна содержимому, и своя
     прокрутка у него не включается — вместо неё растёт сам столбец. */
  flex: 1 1 auto;
  min-height: 60px;
  overflow-y: auto;
}
.kb-empty {
  padding: var(--sp-200) 0;
  text-align: center;
  font-size: var(--fs-s);
  color: var(--ink3);
}

/* Карточка сделки. Курсор — «схватить»: она и правда берётся рукой. */
.kb-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-050);
  padding: var(--sp-100) var(--sp-150);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-s);
  background: var(--bg);
  cursor: var(--cur-grab);
  user-select: none;
}
.kb-card:hover { border-color: var(--a-300); }
/* Взятая карточка приподнимается и слегка бледнеет: рука должна видеть,
   что несёт именно её, а не соседнюю. */
/* Вид поднятого предмета — общий (`.drag-lift` в deos.css). Своего у
   карточки сделки здесь нет ничего: поднимают в программе не только её. */
.kb-card-top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-100);
}
.kb-no {
  font-weight: var(--fw-med);
  font-variant-numeric: tabular-nums;
}
.kb-amount {
  margin-left: auto;
  font-size: var(--fs-s);
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.kb-card-title {
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  color: var(--ink);
  /* Длинное название изделия обрезается: карточка в четыре строки
     ломает столбец, а прочесть её целиком можно, открыв сделку. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-card-who {
  font-size: var(--fs-xs);
  color: var(--ink3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-card-tag {
  display: flex;
  align-items: center;
  gap: var(--sp-050);
  font-size: var(--fs-xs);
  color: var(--ink3);
}

/* Строка связи — в окнах клиента и сделки: сделка клиента, просчёт
   сделки. Не таблица: строк единицы, и шапка над ними была бы длиннее
   самого списка. */
.crm-line {
  align-items: center;
  gap: var(--sp-150);
  padding: var(--sp-100) 0;
  border-bottom: var(--bw) solid var(--line);
}
.crm-line:last-child { border-bottom: none; }

/* ═══ РУКА ВЕЗДЕ, ГДЕ ТЯНУТ ═══
   Доску возят за ЛЮБОЕ свободное место — значит и рука должна быть на
   любом свободном месте. Заказчик 24.08: «при перетаскивании CRM не
   везде появляется рука перетаскивания, хотя работает оно везде».

   Курсор объявляется РЯДУ и наследуется всем, что в нём лежит: столбец,
   его шапка, сумма, поле карточек, надпись «Пусто» — всё это свободное
   место, и за всё это везут. Перечислять их поимённо значило бы забыть
   следующего.

   Выбивается из наследования только то, у кого своё дело: карточку
   берут рукой (тот же знак, но своё действие), а по надписи в поле ввода
   ставят курсор. */
.kb-row, .kb-row * { cursor: var(--cur-grab); }
.kb-row input, .kb-row textarea { cursor: text; }
.kb-row button, .kb-row .combo-button { cursor: pointer; }
/* Пока везут — «держим», и это перебивает всё: рука занята доской. */
.kb-row.kb-panning, .kb-row.kb-panning * { cursor: var(--cur-hold); }
.kb-row.kb-panning { scroll-behavior: auto; }

/* Карточка доезжает до нового места, а не появляется в нём: сдвиг ей
   ставит и снимает код (см. `доехать`), а довести до места — дело
   перехода. Только положение: рост и вид карточки при перекладке не
   меняются, и объявлять им переход значило бы обещать движение там, где
   его нет. */
.kb-card { transition: transform .18s cubic-bezier(.2, .7, .3, 1); }
[data-motion="calm"] .kb-card { transition: none; }

/* Второй список настройки отбит от первого воздухом — заголовком и
   пустотой, как отбиваются смысловые группы внутри острова везде в
   программе. Второй оправы (карточки внутри карточки) не заводится. */
.crm-setup-gap { margin-top: var(--sp-400); }