/* ============================================================
   Instom — main.css (Bootstrap 5.3)
   Подключается после темы, которую ставит каркас платформы (Bootstrap со
   своим фирменным цветом, Cosmo, Flatly или Darkly), и перед platform.css.

   Оформление — штатным Bootstrap (решение владельца 09.10.2026): цвета —
   ролями (`text-*-emphasis`, `text-bg-*`), отступы, рамки, кегль — утилитами,
   формы, сетки, карточки, таблицы — компонентами. Здесь только то, чего в
   Bootstrap нет: настройка ширины списков, цвет стадии из справочника,
   курсор, размеры в пикселях там, где размер и есть смысл, канбан (его
   перестройка отложена владельцем).

   Правил на классах Bootstrap и платформы, на голых тегах здесь нет
   (правило 14 общих правил; проверка запуска platforma.E018). Своих
   переменных цвета нет. Старый Safari (iOS 12): флексовый `gap` своих
   правил не используется — отступы дают классы Bootstrap, запасные поля
   для них ставит платформа (сторож `core/tests_browser_support.py`).
   ============================================================ */

/* ─── Ширина списков ─────────────────────────────────────────
   Списки, карточки, детали — без потолка: на широком мониторе таблица
   занимает весь экран. Формы узкие — объявлением `w-form` в шаблоне
   (сторож `core/tests_page_width.py`). */
:root {
  --w-list: none;
}

/* ─── Подсказки при вводе (static/js/ac-multi.js, ac-search.js) ─────
   Поле поиска с подсказками в шапке списка: виджет заворачивает поле в свою
   обёртку — ей та же ширина, что полю `.list-search` у платформы (тянется до
   отборов, не уже 200px и не шире 32rem, на телефоне во всю строку).
   Мультивыбор в строке отборов — постоянной ширины, на телефоне по два. */
.list-tools .acs-wrap { flex: 1 1 auto; min-width: 12.5rem; max-width: 32rem; }
.list-tools .ac-multi { flex: 0 1 12rem; min-width: 0; }
@media (max-width: 575.98px) {
  .list-tools .acs-wrap { flex-basis: 100%; max-width: none; }
  .list-tools .ac-multi { flex-basis: calc(50% - .25rem); }
}
/* Ряд выбранных значений мультивыбора: пустой не занимает места. */
.ac-multi .ac-tags, .ac-tags { margin-bottom: .25rem; }
.ac-tags:empty { display: none; }

/* ─── Канбан (записи на курс, приглашения) ───────────────────
   Перестройка канбана на телефоне отложена владельцем (PROJECT_STATE);
   правила — до неё. */
.kanban-board { overflow-x: auto; align-items: flex-start; padding: .5rem 0 1.25rem; min-height: 60vh; }
.kanban-column {
  flex: 0 0 280px; display: flex; flex-direction: column;
  background: var(--bs-secondary-bg); border-radius: .5rem; padding: .625rem;
}
.kanban-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .375rem .625rem; margin-bottom: .5rem;
  background: var(--bs-body-bg); border-left: 4px solid var(--bs-border-color);
  border-radius: .25rem;
}
.kanban-cards { min-height: 50px; flex-grow: 1; }
/* Стадии-исходы в канбане приглашений: конверсия и отказ. */
.kanban-column--win { border: 2px solid var(--bs-success); }
.kanban-column--lost { border: 2px solid var(--bs-danger); }
.enrollment-card { cursor: grab; font-size: .8125rem; }
.enrollment-card:active { cursor: grabbing; }
.enrollment-card--clinic { border-left: 3px solid var(--bs-info); }
/* Карточка приглашения на доске. Тащить — только с адресом смены стадии:
   без права менять приглашение карточка не перетаскивается (v3.23). */
.invite-card[data-change-stage-url] { cursor: grab; }
.invite-card[data-change-stage-url]:active { cursor: grabbing; }
/* Классы библиотеки перетаскивания SortableJS: тень и место карточки. */
.sortable-ghost { opacity: .4; background: var(--bs-info-bg-subtle); }
.sortable-drag { box-shadow: var(--bs-box-shadow); }
@media (max-width: 767.98px) {
  .kanban-board { flex-direction: column !important; overflow-x: visible !important; min-height: 0 !important; }
  .kanban-column { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; }
}

/* ─── Личный кабинет (templates/client_area/base.html) ───────
   Каркас свой, оформлен штатным Bootstrap: шапка — классами, колонка
   ссылок — `nav nav-pills flex-column`, раскладка — `row`/`col`, блоки —
   `card`, таблицы — `table table-sm`. Цвета — токенами темы
   (`core/tests_cabinet_styles.py`). */
.cab-logo-img { height: 38px; width: auto; }  /* высота логотипа в шапке */
.cab-user { white-space: nowrap; }  /* почта вошедшего в шапке */
/* Телефон: почта вошедшего — своей строкой, а не выдавливает кнопки за край. */
@media (max-width: 767.98px) {
  .cab-user { order: 3; flex-basis: 100%; white-space: normal; overflow-wrap: break-word; }
}

/* ─── Курсор ─────────────────────────────────────────────────
   Утилиты курсора в Bootstrap нет. Щелчок по подписи с флажком, по
   заголовку раскрывающегося блока, по карточке дубля — курсор «рука» это
   показывает. Строке-ссылке (`data-href`) курсор ставит платформа. */
.cursor-pointer { cursor: pointer !important; }
/* Карточка записи-дубликата (сервисная панель): ширина в ряду и выбор
   щелчком; облик — `card`, выбранная — `border-primary` (ставит скрипт). */
.dupe-card { flex: 1; min-width: 260px; cursor: pointer; }

/* ─── Размеры, где размер и есть смысл ───────────────────────
   Заглушка фото лектора 200×250 (формат фотографии), поле суммы в строке
   мастера закрытия, флекс-текст, который должен переноситься
   (`min-width: 0`). */
.col-200 { width: 200px !important; }
.h-250 { height: 250px !important; }
.col-80 { width: 80px !important; }
.minw-0 { min-width: 0 !important; }

/* ─── Цвет стадии из справочника ─────────────────────────────
   Цвет стадии выбирает человек, в CSS-файл его не записать: разметка несёт
   только значение (`style="--stage-color: …"`), что им красить — решают эти
   классы. Цвет — опознавательный знак, а не краска для слов: название стадии
   пишется цветом текста, рядом кружок ● (решение владельца 08.10.2026 —
   жёлтое «Ожидает оплаты» на белом читалось с контрастом 2,1). Пустой цвет —
   переменная недействительна: текст наследует цвет, фон прозрачен.
   Держит `apps/instom/tests_stage_colour.py`. */
.stage-text { color: var(--stage-color) !important; }  /* только кружок ● — не слово */
.stage-fill { background: var(--stage-color) !important; }  /* заливка цветом стадии */
.stage-edge { border-left-color: var(--stage-color) !important; }  /* полоса слева у колонки канбана */
.stage-pill {
  display: inline-block; padding: 2px 12px; border-radius: 12px; font-size: .75em; font-weight: 600;
  border: 1.5px solid; border-color: var(--stage-color); white-space: nowrap;
}  /* стадия рамкой цвета стадии; слово — цветом текста, кружок — `.stage-text` */
.stage-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }  /* кружок цвета стадии; цвет — `.stage-fill` */
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; margin-right: 8px; }  /* кружок легенды «Воронки» */
.swatch-20 { display: inline-block; width: 20px; height: 20px; border-radius: 3px; vertical-align: middle; }  /* образец цвета стадии в справочнике */
/* Полоса доли в «Воронке» (`progress-bar`): `--pct` — число без единиц,
   точкой (`|unlocalize`): «12,5» с запятой браузер отбрасывал, и полоса
   вставала во всю ширину. */
.funnel-bar { width: calc(var(--pct) * 1%) !important; }