/* Проектная вёрстка поверх дизайн-системы. Классы канона здесь не объявляются
   и не переопределяются — за этим следит tests/test_дизайн_система.py */

/* Базовый слой. Канон даёт компоненты (.ds-*), но не трогает html/body: он
   родился из React-showcase, где базу задавал фреймворк. На голом Jinja её
   задать некому, и без этих девяти строк страница рисуется системным serif
   на белом фоне, а поля из-за content-box вылезают за свои контейнеры и
   наезжают на соседние кнопки. Проверено глазами 02.09.2026. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  padding: var(--space-6) 0;
}

.шапка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* ===== Экран входа (/, /login/boss) — перенесено из design/Login.dc.html =====
   Ширина ограничена 55rem: 12 карточек в четыре колонки, как в макете. */

.вход {
  max-width: 55rem;
  margin: 0 auto;
  padding: var(--space-10) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.вход__шапка {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.вход__титул {
  margin: var(--space-1) 0 0;
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}

.вход__подпись {
  margin: 0;
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.вход__люди {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.вход__люди form { margin: 0; }

.вход__персона {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.вход__персона:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.вход__аватар {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

/* Четыре оттенка по кругу — чтобы соседние карточки различались взглядом. */
.вход__аватар--0 { background: var(--color-primary-muted); color: #0052a3; }
.вход__аватар--1 { background: var(--color-success-muted); color: #046b4d; }
.вход__аватар--2 { background: var(--color-warning-muted); color: #8a5a06; }
.вход__аватар--3 { background: var(--color-surface-muted); color: var(--color-text-muted); }

.вход__имя { min-width: 0; }

.вход__низ {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.вход__черта {
  flex-grow: 1;
  height: 1px;
  background: var(--color-border);
}

.вход__второй-вход {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.вход__второй-вход:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.вход__пин {
  align-self: center;
  width: 100%;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

@media (max-width: 60rem) {
  .вход__люди { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
  .вход__люди { grid-template-columns: minmax(0, 1fr); }
}

.прокрутка { overflow-x: auto; }

.по-центру { text-align: center; }

.правка { font-size: var(--text-xs); }

.корзина { opacity: 0.45; }
.корзина:hover { opacity: 1; }

.итого td { font-weight: var(--font-weight-semibold); }

.добавление { margin-top: var(--space-6); }

.строка.статус-Зарегистрирован { background: var(--color-success-muted, transparent); }
/* Отказ — красный фон, а не приглушение: строка должна читаться так же ясно,
   как остальные (в ней часто лежит причина отказа), но опознаваться с одного взгляда. */
.строка.статус-Отказ { background: var(--color-danger-muted, transparent); }

/* На экране менеджера (карточки) статус уже виден чипом — фон всей карточки
   красным/зелёным здесь избыточен и спорит с макетом (там карточки всегда
   белые). Правило выше по-прежнему нужно обзору руководителя (та же таблица,
   тот же _строка.html) — здесь его просто перебиваем более специфичным. */
.карточки-клиентов .строка.статус-Зарегистрирован,
.карточки-клиентов .строка.статус-Отказ {
  background: var(--color-surface);
}

/* Баннер сетевых/серверных ошибок htmx — без этого код формирует внятные
   сообщения ("Это не ваша запись" и т.п.), а пользователь их не видит: htmx 2
   по умолчанию не подставляет ответ при 4xx/5xx и молчит при обрыве связи.
   position: fixed — виден поверх таблицы без прокрутки к месту клика. */
.баннер-ошибки {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger);
  color: var(--color-on-danger);
  text-align: center;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

/* ===== Экран менеджера (/my): шапка, карточки-фильтры, поиск, карточки клиентов =====
   Перенесено из design/Main.dc.html. Цвета и отступы — токены канона; там, где в
   макете был фиксированный px без соответствующего токена (ширина колонок сетки,
   размеры инлайн-иконок), используются гибкие единицы (fr/minmax) или, для икон
   (это размер ассета, не «отступ»), — целочисленный px на самом svg. */

.шапка-мен {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.шапка-мен__лево { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.шапка-мен__имя { margin: 0; font-size: var(--text-xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; }
.шапка-мен__подпись { font-size: var(--text-sm); color: var(--color-text-muted); }
.шапка-мен__право { display: flex; align-items: center; gap: var(--space-5); }
.шапка-мен__разделитель { width: 1px; height: 1.5rem; background: var(--color-border); }

.прогресс { display: flex; align-items: center; gap: var(--space-3); }
.прогресс__дорожка {
  width: 12.5rem;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  overflow: hidden;
}
.прогресс__залив { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); }
.прогресс__число { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }

/* Шесть карточек-фильтров: сетка из шести равных колонок */
.фильтры {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.фильтр {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-subtle);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.фильтр:hover { border-color: var(--color-border-strong); }

.фильтр__верх {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-text-subtle);
}

.фильтр__подпись { font-size: var(--text-xs); color: var(--color-text-muted); }

.фильтр__число {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.фильтр__дорожка {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  overflow: hidden;
}

.фильтр__залив { height: 100%; border-radius: var(--radius-full); background: var(--color-text-subtle); }
.фильтр__залив--тускло { background: var(--color-border-strong); }

.фильтр--call .фильтр__верх,
.фильтр--think .фильтр__верх { color: var(--color-primary); }
.фильтр--call { border-left-color: var(--color-primary); }
.фильтр--call .фильтр__залив { background: var(--color-primary); }
.фильтр--think { border-left-color: var(--color-primary); }
.фильтр--think .фильтр__залив { background: var(--color-primary); }

.фильтр--push { border-left-color: var(--color-warning); }
.фильтр--push .фильтр__верх { color: var(--color-warning); }
.фильтр--push .фильтр__залив { background: var(--color-warning); }

.фильтр--done { border-left-color: var(--color-success); }
.фильтр--done .фильтр__верх { color: var(--color-success); }
.фильтр--done .фильтр__залив { background: var(--color-success); }

.фильтр--no { border-left-color: var(--color-danger); }
.фильтр--no .фильтр__верх { color: var(--color-danger); }
.фильтр--no .фильтр__залив { background: var(--color-danger); }

.фильтр--активен { box-shadow: var(--shadow-md); }
.фильтр--all.фильтр--активен { border-color: var(--color-text-subtle); }
.фильтр--call.фильтр--активен,
.фильтр--think.фильтр--активен { border-color: var(--color-primary); }
.фильтр--push.фильтр--активен { border-color: var(--color-warning); }
.фильтр--done.фильтр--активен { border-color: var(--color-success); }
.фильтр--no.фильтр--активен { border-color: var(--color-danger); }

/* Поиск по организации/фамилии */
.поиск { position: relative; display: inline-flex; align-items: center; margin-bottom: var(--space-5); }
.поиск__иконка { position: absolute; left: var(--space-3); display: flex; color: var(--color-text-subtle); pointer-events: none; }
.поиск__ввод {
  height: var(--control-height-md);
  width: 20rem;
  max-width: 100%;
  padding: 0 var(--space-3) 0 calc(var(--space-6) + var(--space-2));
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  outline: none;
}
.поиск__ввод:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

.список-заголовок {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 0 var(--space-1);
  margin-bottom: var(--space-3);
}
.список-заголовок__титул { font-size: var(--text-md); font-weight: var(--font-weight-semibold); }
.список-заголовок__счёт { font-size: var(--text-sm); color: var(--color-text-subtle); }

/* Таблица клиентов менеджера, отрисованная как карточки: <tr>/<td> остаются
   настоящими — фрагмент _строка.html делят с обзором руководителя (там это
   по-прежнему обычная таблица) — здесь их только переукладывает CSS Grid.
   Если карточка когда-нибудь перестанет быть <tr>, hx-sync у контролов
   строки ("closest tr:queue") нужно будет поправить на актуальный контейнер. */
.карточки-клиентов { width: 100%; border-collapse: separate; font-size: var(--text-sm); line-height: var(--text-sm--line); }

.карточки-клиентов tbody tr.строка {
  display: grid;
  /* Ширины колонок статуса и приглашения фиксированы намеренно: при `auto`
     они считались по содержимому, и строка с «Не звонили» разъезжалась
     относительно строки с «Думает» — левые края чипов и комментариев прыгали. */
  grid-template-columns: minmax(200px, 1.3fr) minmax(170px, 1fr) 10.5rem 9.5rem 1fr 2.75rem;
  grid-template-areas:
    "client contacts status  invite  .       trash"
    "client contacts comment comment comment trash";
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.карточки-клиентов tbody tr.строка:hover { box-shadow: var(--shadow-md); }

.карточки-клиентов td { padding: 0; border: none; vertical-align: top; }
.карточки-клиентов td:nth-child(1) { grid-area: client; }
.карточки-клиентов td:nth-child(2) { grid-area: contacts; }
.карточки-клиентов td:nth-child(3) { grid-area: status; }
.карточки-клиентов td:nth-child(4) { grid-area: invite; }
.карточки-клиентов td:nth-child(5) { grid-area: comment; }
.карточки-клиентов td:nth-child(6) { grid-area: trash; justify-self: end; }
.карточки-клиентов td:nth-child(6) .корзина { width: 2rem; height: 2rem; padding: 0; }

.клиент-инфо { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.клиент-инфо__орг { font-size: var(--text-md); font-weight: var(--font-weight-semibold); line-height: 1.35; }
.клиент-инфо__перс { font-size: var(--text-sm); color: var(--color-text-muted); }
.клиент-инфо__роль { font-size: var(--text-xs); color: var(--color-text-subtle); }

.контакты { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.телефон-кнопка {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2rem;
  padding: 0 var(--space-3);
  width: fit-content;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
}
.телефон-кнопка svg { color: var(--color-primary); flex-shrink: 0; }
.телефон-кнопка:hover { border-color: var(--color-primary); }

.контакты__почта {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.контакты__почта--ссылка {
  color: var(--color-text-muted);
  border-bottom: 1px dotted var(--color-border-strong);
  width: fit-content;
}
.контакты__почта--ссылка:hover { color: var(--color-primary); }

/* Чип статуса: <details>/<summary> без единой строчки своего JS — раскрытие
   списка цветных вариантов делает браузер, а сама смена статуса — обычный
   htmx-пост по клику на вариант (см. _строка.html). */
.чип-статус summary { list-style: none; cursor: pointer; width: fit-content; }
.чип-статус summary::-webkit-details-marker { display: none; }
.чип-статус[open] .чип__шеврон { transform: rotate(180deg); }

.чип {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 1.875rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

button.чип { cursor: pointer; }
button.чип.чип--выбран { font-weight: var(--font-weight-semibold); }

.чип__точка { width: 7px; height: 7px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
.чип__шеврон { opacity: 0.5; }

.чип-статус__меню {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Тона статусов — тот же смысл, что в .строка.статус-*, но на чипе, а не на
   всей карточке; "Не дозвонились" и "Придёт" в макете сознательно делят
   один янтарный тон — оба «требуют действия в ближайшее время». */
.чип--Не-звонили { background: var(--color-surface-muted); color: var(--color-text-muted); border-color: var(--color-border); }
.чип--Не-дозвонились,
.чип--Придёт {
  background: var(--color-warning-muted);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
}
.чип--Думает {
  background: var(--color-primary-muted);
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
.чип--Отказ {
  background: var(--color-danger-muted);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
}
.чип--Зарегистрирован {
  background: var(--color-success-muted);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border));
}

.чип-приглашение {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 1.875rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  background: var(--color-surface);
  color: var(--color-text-subtle);
  border: 1px dashed var(--color-border-strong);
}
.чип-приглашение--вкл {
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 35%, var(--color-border));
}

.комментарий-поле {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  /* Поле растёт под текст, где браузер это умеет: иначе у коротких комментариев
     оставался пустой хвост с уголком, а длинные приходилось прокручивать. */
  field-sizing: content;
  resize: vertical;
  padding: var(--space-2);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.комментарий-поле::placeholder { color: var(--color-border-strong); }
.комментарий-поле:hover { border-color: var(--color-border); }
.комментарий-поле:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

.пусто-строка td { padding: 0; border: none; }
.пусто { padding: var(--space-10) 0; text-align: center; }
.пусто__титул { font-size: var(--text-md); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.пусто__текст { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Отсчёт до конца регистрации. Серверная подпись видна сразу,
   скрипт в базовом шаблоне обновляет её раз в секунду. */
.отсчёт {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-warning-muted);
  border: 1px solid var(--color-warning);
  color: var(--color-text);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line);
}

.отсчёт b {
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ===== Экран руководителя (/overview): воронка, горячий резерв, ход обзвона =====
   Перенесено из design/Overview.dc.html. Цвета и отступы — токены канона; где
   в макете был фиксированный px без токена (ширина колонок сетки резерва),
   использованы гибкие minmax()/fr, как и в карточках клиентов на /my. */

.воронка {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.воронка__карта {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.воронка__верх { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.воронка__точка { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-text-subtle); flex-shrink: 0; }
.воронка__метка { font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.воронка__число {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.воронка__доля { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-2); }

.воронка__карта--primary { border-left-color: var(--color-primary); }
.воронка__карта--primary .воронка__точка { background: var(--color-primary); }
.воронка__карта--primary .воронка__метка { color: var(--color-primary); }

.воронка__карта--warning { border-left-color: var(--color-warning); }
.воронка__карта--warning .воронка__точка { background: var(--color-warning); }
.воронка__карта--warning .воронка__метка { color: var(--color-warning); }

.воронка__карта--success { border-left-color: var(--color-success); }
.воронка__карта--success .воронка__точка { background: var(--color-success); }
.воронка__карта--success .воронка__метка { color: var(--color-success); }

.воронка__карта--danger { border-left-color: var(--color-danger); }
.воронка__карта--danger .воронка__точка { background: var(--color-danger); }
.воронка__карта--danger .воронка__метка { color: var(--color-danger); }

/* Горячий резерв: выделенный блок с жёлтой рамкой — главный «ресурс» перед событием */
.резерв {
  background: var(--color-surface);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}

.резерв__шапка {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-warning-muted);
  border-bottom: 1px solid var(--color-warning);
}
.резерв__значок { color: var(--color-warning); flex-shrink: 0; margin-top: 2px; }
.резерв__текст { display: flex; flex-direction: column; gap: 0.1875rem; }
.резерв__титул { font-size: var(--text-md); font-weight: var(--font-weight-semibold); }
.резерв__пояснение { font-size: var(--text-sm); color: var(--color-text-muted); }

.резерв__список { display: flex; flex-direction: column; }
.резерв__строка {
  display: grid;
  grid-template-columns: minmax(11rem, 1.2fr) minmax(12rem, 1.6fr) minmax(9rem, 1fr) minmax(7rem, 0.8fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.резерв__строка:last-child { border-bottom: none; }
.резерв__орг { font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.резерв__коммент {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.резерв__контакт { font-size: var(--text-sm); color: var(--color-text); }
.резерв__менеджер { font-size: var(--text-sm); color: var(--color-text-subtle); }

/* Таблица менеджеров: полоса хода обзвона вместо голого процента.
   Три сегмента общей дорожки — зарегистрированы/придут/отказались,
   доли считает app.сводка._доля_бара (сумма не выше 100%, см. тест). */
.таблица-менеджеров td,
.таблица-менеджеров th { vertical-align: middle; }

.ход-бар { display: flex; align-items: center; gap: var(--space-3); min-width: 11rem; }
.ход-бар__дорожка {
  flex-grow: 1;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  overflow: hidden;
  display: flex;
}
.ход-бар__сегмент { height: 100%; }
.ход-бар__сегмент--рег { background: var(--color-success); }
.ход-бар__сегмент--прид { background: var(--color-warning); }
.ход-бар__сегмент--отказ { background: var(--color-danger-muted); }
.ход-бар__счёт {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.конверсия { font-variant-numeric: tabular-nums; }
.конверсия--выс { color: var(--color-success); font-weight: var(--font-weight-semibold); }
.конверсия--низ { color: var(--color-text-subtle); }