/*
 * Стили приложения: глобальный сброс, лейаут "topbar + main",
 * форма логина и аватар. Палитра/типографика — из tokens.css
 * (подключается первым). Общая визуальная система согласована с
 * макетом Figma 155:2327 (главная Glassno).
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Атрибут hidden скрывает элемент безусловно. Дефолтное правило агента
   [hidden]{display:none} имеет специфичность класса и перебивается любым
   компонентным .x{display:flex|inline-flex}, из-за чего hidden-элементы
   (диалоги календаря, строки/меню popover, кнопки .btn) протекали на экран.
   !important делает hidden источником правды для всех таких компонентов. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  background: #f5f5f5;
  color: var(--c-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Старый каркас AppLayout (.app-layout/.app-topbar/.app-main) удалён —
   все авторизованные страницы перешли на кабинет-каркас AppShell. */

/* ---------------- Avatar (правый верхний угол) ---------------- */

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #7dc7bf;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar__icon {
  width: 20px;
  height: 20px;
  display: block;
}

.avatar-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  /* JURHELP-153 #1: длинное ФИО не должно растягивать топбар (absolute,
     прижат вправо) и наезжать на заголовок страницы. */
  max-width: 100%;
  min-width: 0;
}

.avatar-menu__user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  min-width: 0;
  max-width: 200px;
}

.avatar-menu__name {
  font-size: var(--fs-case-name);
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-menu__role {
  font-size: var(--fs-case-type);
  color: var(--c-text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-menu__logout {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--rd-md);
  font-family: inherit;
  font-size: var(--fs-case-type);
  color: var(--c-text-muted);
}

.avatar-menu__logout:hover {
  background: var(--c-bg-input);
  color: var(--c-text-primary);
}

/* ---------------- Login screen ---------------- */

/* ---------------- Авторизация (Figma 556:9623) ---------------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  background: var(--c-bg-field); /* #f7f7f7 — Frame/bg/inverted */
}

/* Карточка-модалка: 438px, белая, лёгкая граница + тень (по макету). */
.login-card {
  width: 100%;
  max-width: 438px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-8);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-xl);
  box-shadow: 0 0 7.5px rgba(0, 0, 0, 0.05);
}

.login-card__logo {
  display: block;
  height: 24px;
  width: auto;
  margin: 6px auto;
}

/* Используется на forgot/reset/change-password (заголовок + подзаголовок). */
.login-card__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.login-card__title {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  text-align: center;
}

.login-card__subtitle {
  font-size: 13px;
  color: var(--c-text-muted);
  text-align: center;
}

/* Сноска под кнопкой «Войти». */
.login-card__note {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  text-align: center;
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5); /* дефолт для forgot/reset/change-password */
}

/* На странице входа крупнее разделяем блок полей и блок кнопки (макет). */
.login-form--login { gap: var(--sp-8); }

/* Группа полей логина (gap 16 между полями). */
.login-form__fields,
.login-form__submit-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.login-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.login-form__label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted); /* #787878, без UPPERCASE — по макету */
}

.login-form__input {
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
}

.login-form__input--with-icon { padding-right: 42px; }

.login-form__input::placeholder {
  color: var(--c-text-muted);
}

.login-form__input:focus {
  background: #ffffff;
  border-color: var(--c-accent);
}

/* Поле с ошибкой входа (Figma 870:2818): розовый фон + красная рамка/подпись.
   Перебивает обычный фон и :focus, чтобы ошибка оставалась видимой. */
.login-form__label--error { color: var(--c-text-error); }
.login-form__input--error,
.login-form__input--error:focus {
  background: var(--c-bg-error);
  border-color: var(--c-text-error);
}

/* Обёртка поля пароля + кнопка «глаз». */
.login-form__input-wrap {
  position: relative;
  width: 100%;
}

.login-form__eye {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  border-radius: var(--rd-md);
}
.login-form__eye:hover { color: var(--c-text-primary); }
.login-form__eye--on { color: var(--c-accent); } /* пароль показан */

/* Крестик быстрой очистки поля (Figma 795:6374, JURHELP-120). Кнопку
   показывает field-clear.js при непустом значении (атрибут hidden). */
.login-form__clear {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--c-text-primary);
  cursor: pointer;
  border-radius: var(--rd-md);
}
.login-form__clear:hover { color: var(--c-text-muted); }
.login-form__clear[hidden] { display: none; }

/* Строка «Запомнить меня» ↔ «Забыли пароль?». */
.login-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.login-form__remember {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  cursor: pointer;
}
/* Чекбокс «Запомнить меня» (JURHELP-120): в активном состоянии залит
   бирюзовым Frame/bg/brand #7dc7bf с белой галочкой (Figma 795:6383). */
.login-form__remember input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px; /* Radius/radius 4 */
  background: #ffffff;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.login-form__remember input:checked {
  background: var(--c-bg-brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.8 2.8L9 1' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 10px 8px no-repeat;
  border-color: var(--c-bg-brand);
}

.login-form__forgot {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-blue, #317ff2);
  text-decoration: none;
  white-space: nowrap;
}
.login-form__forgot:hover { text-decoration: underline; }

.login-form__error {
  padding: 10px 14px;
  border-radius: var(--rd-md);
  background: #fff0f0;
  color: #c0392b;
  font-size: 13px;
  text-align: center;
  border: 1px solid #ffd6d6;
}

/* Generic-уведомление «письмо отправлено» (UC-UA-10, AC-UA-10.1). */
.login-form__success {
  padding: 10px 14px;
  border-radius: var(--rd-md);
  background: #f1faf3;
  color: #2e7d4f;
  font-size: 13px;
  text-align: center;
  border: 1px solid #d6f0de;
}

/* Тост ошибки входа снизу-справа (Figma 870:2818, JURHELP-128). Серверный
   рендер: виден без JS (role="alert"); auth-toast.js скрывает через 6с. */
.auth-toast {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: min(360px, calc(100vw - 2 * var(--sp-6)));
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-error);
  border-radius: var(--rd-md);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  animation: auth-toast-in 0.25s ease both;
}
.auth-toast__icon { flex: none; color: var(--c-text-error); }
.auth-toast__text { line-height: 1.35; }
.auth-toast--hide {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
@keyframes auth-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Поясняющий текст под заголовком (Figma 795:6341: «Мы отправим…»). */
.login-card__lead {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  line-height: 1.4;
}

/* Узкий блок кнопок «Сохранить/Отправить» + «Назад» (Figma btns, gap 8). */
.login-form__submit-group--tight {
  gap: var(--sp-3);
}

/* ---------- Требования к паролю (Figma 795:6397, JURHELP-128) ---------- */

.pwd-rules {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  background: var(--c-bg-card);
}

.pwd-rules__title {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
}

.pwd-rules__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
}

.pwd-rule {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  line-height: 16px;
}

.pwd-rule__icon { flex: none; }

/* Невыполненное правило — серый «⊖», выполненное — зелёный «✓»
   (Frame/icon/secondary #787878 → Frame/icon/green #7ac555). */
.pwd-rule__icon--todo { color: var(--c-text-muted); }
.pwd-rule__icon--ok { color: var(--c-marker-green); display: none; }
.pwd-rule--ok .pwd-rule__icon--todo { display: none; }
.pwd-rule--ok .pwd-rule__icon--ok { display: inline; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px var(--sp-4);
  border: none;
  border-radius: var(--rd-md);
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.btn:hover {
  opacity: 0.9;
}

.btn:active {
  transform: translateY(1px);
}

/* Неактивная кнопка — серая (Figma Button/bg/disabled #787878).
   Используется, например, на форме входа, пока поля не заполнены. */
.btn:disabled,
.btn[disabled] {
  background: var(--c-text-muted);
  color: #ffffff;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

.btn--primary {
  background: var(--c-bg-button-primary);
  color: var(--c-text-on-primary);
}

.btn--block {
  width: 100%;
}

.btn--secondary {
  background: var(--c-bg-input);
  color: var(--c-text-primary);
}

/* Светлая кнопка «Назад» (Figma Button/bg/secondary #f7f7f7). */
.btn--light {
  background: var(--c-bg-field);
  color: var(--c-text-primary);
}

/* ---------------- Admin users list (UC-UA-1) ---------------- */

/* Список встроен в кабинет-каркас AppShell (сайдбар), как главная и
   профиль; собственного контейнера-страницы (.app-main) больше нет. */
.admin-users {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  text-align: left;
  /* Уводим всю секцию вниз из-под абсолютного аватар-меню AppShell
     (top-right). Так кнопка «Создать пользователя» в одной строке с
     заголовком не наезжает на аватар при любой длине имени — надёжнее
     резерва padding-right. */
  padding-top: calc(var(--sp-8) + var(--sp-5));
}

.admin-users__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

@media (max-width: 720px) {
  .admin-users__header { flex-direction: column; align-items: stretch; }
}

.admin-users__title {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-accent);
}

.admin-users__error {
  padding: 10px 14px;
  border-radius: var(--rd-md);
  background: #fff0f0;
  color: #c0392b;
  font-size: 13px;
  border: 1px solid #ffd6d6;
}

.admin-users__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-bg-card);
  border-radius: var(--rd-lg);
  box-shadow: var(--c-shadow-card);
}

.admin-users__search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 280px;
  flex: 1 1 280px;
}

.admin-users__filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-users__filter-group:has(.admin-users__checkbox:only-child) {
  align-self: center;
  flex-direction: row;
  align-items: center;
}

.admin-users__label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-section);
  text-transform: uppercase;
  letter-spacing: var(--ls-section-title);
}

.admin-users__input,
.admin-users__select {
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--rd-md);
  background: var(--c-bg-input);
  font-family: inherit;
  font-size: var(--fs-button);
  color: var(--c-text-primary);
  outline: none;
}

.admin-users__input:focus,
.admin-users__select:focus {
  background: #ffffff;
  border-color: var(--c-accent);
}

.admin-users__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-button);
  color: var(--c-text-primary);
  cursor: pointer;
}

.admin-users__empty {
  padding: var(--sp-8);
  background: var(--c-bg-card);
  border-radius: var(--rd-lg);
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-button);
}

.admin-users__table-wrap {
  background: var(--c-bg-card);
  border-radius: var(--rd-lg);
  box-shadow: var(--c-shadow-card);
  overflow: hidden;
  overflow-x: auto;
}

.admin-users__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-button);
}

.admin-users__table thead th {
  text-align: left;
  padding: 12px 10px;
  background: var(--c-bg-input);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-section);
  text-transform: uppercase;
  letter-spacing: var(--ls-section-title);
  border-bottom: 1px solid var(--c-divider);
  /* Заголовки переносятся (а не nowrap) — иначе длинные «Статус пароля»,
     «Последний вход» раздувают таблицу шире main и она скроллится. */
  white-space: normal;
  vertical-align: bottom;
}

.admin-users__table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--c-divider);
  color: var(--c-text-primary);
  vertical-align: middle;
}

.admin-users__table tbody tr:last-child td {
  border-bottom: none;
}

.admin-users__user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.admin-users__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #d6e1ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.admin-users__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-users__avatar-fallback {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-accent);
  text-transform: uppercase;
}

.admin-users__user { max-width: 260px; min-width: 0; }
.admin-users__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* JURHELP-138 п.13: длина строки в списке фиксирована — длинные ФИО/логин/
   email/должность обрезаются многоточием (полное значение — в title). */
.admin-users__name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-users__cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-users__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-users__badge--system {
  background: rgba(40, 35, 93, 0.1);
  color: var(--c-text-accent);
}

.admin-users__badge--warn {
  background: #fff0f0;
  color: #c0392b;
  border: 1px solid #ffd6d6;
}

.admin-users__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: var(--fw-medium);
}

.admin-users__pill--active {
  background: #e6f7e6;
  color: #2c7a2c;
}

.admin-users__pill--temporary {
  background: #fff5d9;
  color: #8a6500;
}

.admin-users__pill--expired,
.admin-users__pill--blocked {
  background: #fff0f0;
  color: #c0392b;
}

.admin-users__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-3);
}

.admin-users__pagination-info {
  color: var(--c-text-muted);
  font-size: 13px;
}

.admin-users__pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.admin-users__pagination-link {
  padding: 6px 12px;
  border-radius: var(--rd-md);
  color: var(--c-text-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: var(--fw-medium);
  background: var(--c-bg-input);
}

.admin-users__pagination-link:hover {
  background: #e0e0e0;
}

.admin-users__pagination-link--disabled {
  color: var(--c-text-muted);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

.admin-users__pagination-page {
  color: var(--c-text-muted);
  font-size: 13px;
}

/* ---------------- Flash-баннер (UC-UA-3 успешное создание) ---------------- */

.admin-users__flash {
  margin: var(--sp-4) 0;
  padding: 12px 16px;
  border-radius: var(--rd-md);
  background: #effdf3;
  border: 1px solid #b9ecc2;
  color: #25744c;
  font-size: 13px;
}

/* ---------------- Страница создания пользователя (UC-UA-3) ---------------- */

.admin-user-create {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
}

/* Внутри кабинет-каркаса AppShell аватар-меню (absolute, справа сверху)
   может перекрыть шапку на узких экранах, где сайдбар скрыт — уводим
   контейнер ниже. На широких центрированный 640px-блок аватара не задевает. */
@media (max-width: 900px) {
  .admin-user-create { padding-top: calc(var(--sp-8) + var(--sp-6)); }
}

.admin-user-create__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.admin-user-create__back {
  font-size: 13px;
  color: var(--c-text-muted);
  text-decoration: none;
}

.admin-user-create__back:hover {
  color: var(--c-text-primary);
  text-decoration: underline;
}

.admin-user-create__title {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-accent);
}

.admin-user-create__error {
  margin-bottom: var(--sp-5);
  padding: 12px 16px;
  border-radius: var(--rd-md);
  background: #fff0f0;
  border: 1px solid #ffd6d6;
  color: #c0392b;
  font-size: 13px;
}

.admin-user-create__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--c-bg-card);
  border-radius: var(--rd-md);
  box-shadow: var(--c-shadow-card);
}

.admin-user-create__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-user-create__label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-section);
  text-transform: uppercase;
  letter-spacing: var(--ls-section-title);
}

.admin-user-create__input,
.admin-user-create__select {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--rd-md);
  background: var(--c-bg-input);
  font-family: inherit;
  font-size: var(--fs-button);
  color: var(--c-text-primary);
  outline: none;
}

.admin-user-create__input:focus,
.admin-user-create__select:focus {
  background: #fff;
  border-color: var(--c-accent);
}

.admin-user-create__field-error {
  font-size: 12px;
  color: #c0392b;
}

/* JURHELP-153 #3–6: строка-идентификатор пользователя (ФИО (логин, email)) на
   страницах удаления/блокировки/сброса пароля/выдачи токена — длинное ФИО без
   пробелов переносится внутри карточки, а не выходит за её границы. */
.admin-user-create__target {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-user-create__actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  margin-top: var(--sp-3);
}

.admin-user-create__hint {
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 1.5;
}

/* ---------------- Страница успеха создания пользователя (UC-UA-3) ---------------- */

.admin-user-create__success-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--c-bg-card);
  border-radius: var(--rd-md);
  box-shadow: var(--c-shadow-card);
}

.admin-user-create__success-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}

.admin-user-create__success-grid dt {
  color: var(--c-text-muted);
}

.admin-user-create__success-grid dd {
  color: var(--c-text-primary);
  /* JURHELP-153 #2: длинное ФИО без пробелов не должно выходить за карточку. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-user-create__password-block {
  padding: var(--sp-5);
  border: 1px dashed #d6b88a;
  background: #fffaf0;
  border-radius: var(--rd-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.admin-user-create__password-label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-section);
  text-transform: uppercase;
  letter-spacing: var(--ls-section-title);
}

.admin-user-create__password-row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

.admin-user-create__password-value {
  flex: 1 1 auto;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  letter-spacing: 1px;
  user-select: all;
  word-break: break-all;
}

.admin-user-create__copy-btn {
  flex-shrink: 0;
}

.admin-user-create__password-warning {
  font-size: 12px;
  color: #8a6d3b;
}

.admin-user-create__success-note {
  font-size: 13px;
  color: var(--c-text-muted);
  padding: 12px 14px;
  background: var(--c-bg-input);
  border-radius: var(--rd-md);
}

/* ---------------- Danger-кнопка (UC-UA-5 Заблокировать, UC-UA-6 Удалить) ---------------- */

.btn--danger {
  background: #c0392b;
  color: #ffffff;
}

.btn--danger:hover {
  background: #a93226;
}

.btn--danger[disabled],
.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ---------------- Предупреждающий блок UC-UA-5 A3 ---------------- */

.admin-user-create__warning {
  padding: 12px 14px;
  border-radius: var(--rd-md);
  background: #fff8e1;
  border: 1px solid #f0d68b;
  color: #7a5800;
  font-size: 13px;
}

/* ---------------- Подтверждение безвозвратного действия (UC-UA-6) ---------------- */

.admin-user-create__danger-confirm {
  padding: 14px 16px;
  border-radius: var(--rd-md);
  background: #fff0f0;
  border: 1px solid #ffd6d6;
  color: #b02a37;
  font-size: 13px;
  line-height: 1.5;
}

/* ---------------- UC-UA-9: policy rules под формой смены пароля ---------------- */

.change-password__rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.change-password__rule {
  font-size: 12px;
  color: var(--c-text-muted);
  padding-left: 16px;
  position: relative;
}

.change-password__rule::before {
  content: "•";
  position: absolute;
  left: 4px;
}

.change-password__rule--violated {
  color: #c0392b;
}

/* ---------------- JURHELP-15: Avatar (UC-UP-4) ---------------- */

.avatar2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  user-select: none;
  background: #6c7a89;
}

.avatar2--xs { width: 20px; height: 20px; font-size: 9px; }
.avatar2--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar2--md { width: 32px; height: 32px; font-size: 12px; }
.avatar2--lg { width: 48px; height: 48px; font-size: 18px; }
.avatar2--xl { width: 96px; height: 96px; font-size: 36px; }

/* Палитра подложек (детерминированно по user_id, см. AvatarColorClass). */
.avatar2--color-1 { background: #e57373; }
.avatar2--color-2 { background: #ba68c8; }
.avatar2--color-3 { background: #7986cb; }
.avatar2--color-4 { background: #4db6ac; }
.avatar2--color-5 { background: #aed581; }
.avatar2--color-6 { background: #ffb74d; }
.avatar2--color-7 { background: #a1887f; }
.avatar2--color-8 { background: #90a4ae; }

.avatar2__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Если есть и img, и initials — initials держим как fallback (скрыт). */
.avatar2__initials--fallback { display: none; }
.avatar2--fallback .avatar2__initials--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.avatar2__system {
  width: 70%;
  height: 70%;
  fill: currentColor;
}

.avatar2-blocked {
  margin-left: 6px;
  color: #c0392b;
  font-size: 12px;
  vertical-align: middle;
}

/* Доступная, но визуально скрытая подпись (для th «Действия» и пр.). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Колонка/ячейка действий — узкая, прижата вправо. Раньше была
   position:sticky (чтобы ⋯ был виден при горизонтальном скролле), но при
   переполнении таблицы липкая ячейка наезжала на колонку «Последний вход»
   (выглядело как слипшиеся колонки). Теперь обычная ячейка: таблица
   подогнана по ширине (заголовки переносятся, паддинги уменьшены), а при
   нехватке ширины контейнер `.admin-users__table-wrap` скроллится. */
.admin-users__actions-col,
.admin-users__actions-cell {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
.admin-users__muted { color: var(--c-text-muted); }

/* ⋯-меню действий по строке. Триггер — обычная кнопка; список —
   position:fixed (координаты ставит JS), чтобы не обрезался scroll-
   контейнером таблицы. По умолчанию список скрыт (display:none),
   ссылки при этом присутствуют в DOM — это упрощает тесты/доступность. */
.row-menu { position: relative; display: inline-block; }

.row-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--rd-md);
  background: transparent;
  color: var(--c-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.row-menu__trigger:hover,
.row-menu--open .row-menu__trigger {
  background: var(--c-bg-input);
  color: var(--c-text-primary);
}

.row-menu__list {
  display: none;
  position: fixed;
  z-index: 1000;
  min-width: 210px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--c-divider);
  border-radius: var(--rd-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.row-menu__item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--rd-sm, 8px);
  color: var(--c-text-primary);
  text-decoration: none;
  font-size: var(--fs-button);
  white-space: nowrap;
}
.row-menu__item:hover { background: var(--c-bg-input); }
.row-menu__item--danger { color: #c0392b; }
.row-menu__item--danger:hover { background: #fff0f0; }
/* Пункт-кнопка (например, смена статуса POST-формой): сброс стилей button. */
.row-menu__form { margin: 0; }
button.row-menu__item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

/* ---------------- Карточка пользователя (UC-UA-2) ---------------- */
/* Внутри кабинет-каркаса AppShell, в стиле карточки профиля. Действия
   вынесены в ⋯-меню списка — здесь только просмотр. */
.admin-user-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.admin-user-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-right: 240px; /* не наезжать на аватар-меню справа сверху */
}

.admin-user-card__back {
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
}
.admin-user-card__back:hover { color: var(--c-text-primary); }

.admin-user-card__title {
  font-size: 32px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  margin: 0;
}

.admin-user-card__error {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--rd-md);
  background: #fff5f5;
  color: #c62828;
  font-size: var(--fs-button);
}

/* Панель на светлом фоне (как profile-card): слева аватар+статусы,
   справа — поля. */
.admin-user-card__layout {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
  padding: var(--sp-6);
  background: var(--c-bg-field);
  border-radius: var(--rd-lg);
}

.admin-user-card__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  width: 200px;
}

.admin-user-card__avatar-wrap { line-height: 0; }

.admin-user-card__name {
  font-size: var(--fs-section-title, 16px);
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  text-align: center;
  /* JURHELP-138 п.12: длинное имя не должно вылезать за пределы колонки 200px. */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-user-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.admin-user-card__warn {
  font-size: 12px;
  color: #8a6500;
  background: #fff5d9;
  border-radius: var(--rd-md);
  padding: var(--sp-3);
  text-align: left;
}

.admin-user-card__body { flex: 1 1 auto; min-width: 0; }

.admin-user-card__fields {
  display: grid;
  grid-template-columns: minmax(170px, max-content) 1fr;
  gap: var(--sp-3) var(--sp-5);
  align-content: start;
  margin: 0;
}

.admin-user-card__fields dt {
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
  font-size: var(--fs-button);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* JURHELP-138 п.12: длинные логин/email/должность не должны ломать сетку
   карточки — переносим неразрывные строки внутри ячейки значения. */
.admin-user-card__fields dd {
  color: var(--c-text-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-button);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-user-card__muted { color: var(--c-text-muted); }

.admin-user-card__note {
  margin: var(--sp-2) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-button);
}
.admin-user-card__note-link { color: var(--c-accent, #4f46e5); }

@media (max-width: 900px) {
  .admin-user-card { padding-top: calc(var(--sp-8) + var(--sp-6)); }
  .admin-user-card__header { padding-right: 0; }
}

@media (max-width: 720px) {
  .admin-user-card__layout { flex-direction: column; align-items: stretch; }
  .admin-user-card__aside { width: 100%; }
  .admin-user-card__fields { grid-template-columns: 1fr; gap: 2px var(--sp-5); }
}

/* ---------------- /profile (UC-UP-1) ---------------- */

/* Профиль (JURHELP-15) — внутри кабинет-каркаса AppShell. */
.profile-page {
  position: relative;
  max-width: 720px;
}

.profile-page__head {
  margin-bottom: var(--sp-6);
  padding-right: 220px; /* не наезжать на аватар-меню справа сверху */
}

.profile-page__title {
  font-size: 32px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  margin: 0;
}

/* Карточка-панель на светлом фоне (как колонки доски), внутри белого main. */
.profile-card {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6);
  background: var(--c-bg-field);
  border-radius: var(--rd-lg);
}

.profile-card__avatar {
  flex-shrink: 0;
}

.profile-card__fields {
  display: grid;
  grid-template-columns: minmax(150px, max-content) 1fr;
  gap: var(--sp-3) var(--sp-5);
  align-content: start;
}

.profile-card__fields dt {
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
  font-size: var(--fs-button);
}

.profile-card__fields dd {
  color: var(--c-text-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-button);
  margin: 0;
}

.profile-actions {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}

.profile-actions__form {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
}

.profile-actions__hint {
  color: var(--c-text-muted);
  font-size: var(--fs-section-title);
  flex-basis: 100%;
}

/* Кнопки блока действий профиля (Загрузить/Изменить/Удалить аватар):
   не переносим подпись на две строки и даём чуть больше горизонтального
   «воздуха», чтобы «Загрузить аватар» помещалось в одну строку (JURHELP-157). */
.profile-actions .btn {
  white-space: nowrap;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

.alert {
  border-radius: var(--rd-md);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-button);
}

@media (max-width: 640px) {
  .profile-page__head { padding-right: 0; }
  .profile-card { flex-direction: column; align-items: flex-start; }
}

.alert--success { background: #e8f5e9; color: #2e7d32; }
.alert--error { background: #fff5f5; color: #c62828; }

/* Снек-бары (Figma 1140:4743). Флеши-уведомления об успехе/ошибке действия
   помечены атрибутом data-snackbar; snackbar.js переносит их в общий фикс-стек
   СНИЗУ-СПРАВА поверх всего интерфейса (z-index выше модалок 1100) и авто-скрывает
   через 5с. Персистентные ошибки (загрузка/валидация формы) остаются обычным
   .alert в потоке — снек-барами НЕ становятся. Без JS снек-флеш виден в потоке
   страницы (прогрессивное улучшение). Успех — pale-green #f2faee + зелёный
   кружок-галка (#7ac555), ошибка — pale-red + красный кружок «×». */
.snackbar-stack {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: min(420px, calc(100vw - 2 * var(--sp-6)));
  pointer-events: none;
}
.alert[data-snackbar] {
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-5);
  border-radius: var(--rd-md);
  box-shadow: 0 4px 7.5px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: normal;
  color: var(--c-text-primary);
  overflow-wrap: anywhere;
  pointer-events: auto;
  cursor: pointer;
  animation: snackbar-in 0.25s ease both;
}
.alert[data-snackbar]:not([hidden]) { display: flex; }
.alert[data-snackbar]::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: center / contain no-repeat;
}
.alert--success[data-snackbar] { background: var(--c-bg-success); }
.alert--success[data-snackbar]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%237ac555'/%3E%3Cpath d='M5.8 10.2l2.7 2.7 5.7-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.alert--error[data-snackbar] { background: var(--c-bg-error); }
.alert--error[data-snackbar]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ff0000'/%3E%3Cpath d='M12.5 7.5l-5 5M7.5 7.5l5 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.alert--hide {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
@keyframes snackbar-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Кликабельная обёртка аватара в топбаре. */
.avatar-menu__avatar-link {
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
}
.avatar-menu__avatar-link:focus-visible {
  outline: 2px solid var(--c-accent, #4a90e2);
  outline-offset: 2px;
}

/* ============ Форма создания дела (JURHELP-75, Figma 414-7138) ============ */

/* На странице формы main растягиваем и центрируем модалку на подложке. */
/* Формы дел — модальное окно ПОВЕРХ кабинета AppShell: затемнённая
   подложка перекрывает весь вьюпорт (сайдбар виден за полупрозрачным
   затемнением), карточка центрирована по экрану. */
.case-create__backdrop {
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  z-index: 50;
}

/* Карточка-модалка: фиксирована по центру вьюпорта, поверх backdrop.
   JURHELP-158 п.7: колонка из трёх регионов — шапка и футер зафиксированы,
   скроллится только тело (.case-create__body / .modal-form + .modal-body). */
.case-create {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 51;
  width: calc(100% - 2 * var(--sp-6));
  max-width: var(--modal-width);
  max-height: calc(100vh - 2 * var(--sp-6));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  text-align: left;
}

.case-create__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--c-divider);
}

.case-create__title {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  margin: 0;
}

.case-create__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--c-text-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--rd-md);
}
.case-create__close:hover { opacity: 0.7; }

.case-create__required-note {
  margin: 0;
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
}

.case-create__error {
  padding: var(--sp-4);
  border-radius: var(--rd-md);
  background: #fff5f5;
  color: #c62828;
  font-size: 13px;
}

/* ---------- Общий каркас прокручиваемой модалки (JURHELP-158 п.7) ----------
   Шапка (.case-*__header, flex:0) и футер (.modal-footer / .case-*__actions,
   flex:0) зафиксированы; тело прокручивается. Форма, оборачивающая поля и
   футер, растягивается на всю высоту (.modal-form), поля лежат в .modal-body. */
.modal-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.case-create__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Ряд из двух колонок (320 + gap16 + 320 = 656). На узких экранах — в столбик. */
.case-create__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 640px) {
  .case-create__row { grid-template-columns: 1fr; }
}

.case-create__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.case-create__label {
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
}

.case-create__input,
.case-create__select,
.case-create__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-4);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  outline: none;
}

.case-create__input::placeholder,
.case-create__textarea::placeholder { color: var(--c-text-muted); }

.case-create__input:focus,
.case-create__select:focus,
.case-create__textarea:focus { border-color: var(--c-accent); }

.case-create__input:disabled {
  color: var(--c-text-muted);
  cursor: not-allowed;
}

.case-create__textarea {
  min-height: 100px;
  resize: vertical;
}

.case-create__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-8);
  /* JURHELP-153 #7: длинное ФИО исполнителя не должно растягивать select за
     пределы поля — обрезаем выбранное (закрытое) значение многоточием. */
  text-overflow: ellipsis;
}

.case-create__field-error {
  font-size: 12px;
  color: #c0392b;
}

/* Сегментированный переключатель «Категория дела». */
.case-create__segmented {
  display: inline-flex;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--c-bg-field);
  border-radius: var(--rd-md);
  align-self: flex-start;
}
.case-create__segment {
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--rd-md);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  user-select: none;
}
.case-create__segment input { position: absolute; opacity: 0; pointer-events: none; }
.case-create__segment:has(input:checked) {
  background: #fff;
  color: var(--c-text-primary);
}

/* Палитра цвета: кружки-радиокнопки. */
.case-create__colors {
  display: flex;
  align-items: center;
  gap: var(--sp-5h);
  min-height: 43px;
  flex-wrap: wrap;
}
.case-create__color {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.case-create__color input { position: absolute; opacity: 0; pointer-events: none; }
.case-create__color-dot {
  width: 20px;
  height: 20px;
  margin: 2px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--c-border-input);
}
/* «Без цвета» — пустой кружок. */
.case-create__color--none .case-create__color-dot { background: #fff; }
/* Выбранный — кольцо вокруг кружка. */
.case-create__color:has(input:checked) .case-create__color-dot {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-text-primary);
}

/* Футер модалки: зафиксирован, отделён линией; кнопки справа (JURHELP-158 п.7). */
.modal-footer,
.case-create__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--c-divider);
  background: var(--c-bg-card);
}

/* ============ Кабинет: каркас с сайдбаром (Figma 414-6477) ============ */

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--c-bg-field);
}

.app-shell__sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  box-sizing: border-box;
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  overflow: hidden;
  /* JURHELP-155 п.1: левая навигация статична и не уезжает при скролле страницы.
     sticky+height:100vh пришпиливает сайдбар к верху вьюпорта; align-self:flex-start
     не даёт flex-stretch растянуть его на всю (высокую) высоту .app-shell — иначе
     липкость не работает. Внутренний список «ДЕЛА» (.app-shell__cases-list) скролится
     сам, поэтому контент не обрезается. */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
}

.app-shell__logo-img { height: 24px; width: auto; }

.app-shell__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.app-shell__search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 43px;
  padding: 0 var(--sp-4);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  color: var(--c-text-muted);
}
.app-shell__search-input,
.app-home__search-input {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: var(--fs-button);
  color: var(--c-text-primary);
  width: 100%;
}

.app-shell__menu { display: flex; flex-direction: column; gap: var(--sp-1); }
.app-shell__menu-title,
.app-shell__cases-title {
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-section-title);
  text-transform: uppercase;
  color: var(--c-text-special);
  margin-bottom: var(--sp-3);
}

.app-shell__nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 43px;
  padding: 0 var(--sp-4);
  border-radius: var(--rd-md);
  font-size: var(--fs-nav-link);
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  text-decoration: none;
}
.app-shell__nav-link--active { background: var(--c-bg-card); font-weight: var(--fw-semibold); }
.app-shell__nav-link--disabled { color: var(--c-text-muted); cursor: default; }
.app-shell__icon { flex: none; }

/* ---------- Раздел «ДЕЛА» в сайдбаре (UC-HP-4, Figma 835:22459) ---------- */
/* details/summary — нативное сворачивание секции без JS (п. 5.4 шаг 1). */
/* JURHELP-155: секция «ДЕЛА» забирает остаток высоты сайдбара (flex:1), а список
   внутри скролится колесом мыши. Раньше секция ужималась и ОБРЕЗАЛА список
   (overflow:hidden), т.к. скролл-контейнером был не сам список — теперь высоту
   держит .app-shell__cases-list (flex:1 + min-height:0 + overflow-y:auto, ниже).
   В свёрнутом виде (details без open) высоту не занимаем — flex:0. */
.app-shell__cases { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.app-shell__cases:not([open]) { flex: 0 0 auto; }
/* Chrome 131+ оборачивает раскрытое содержимое <details> в псевдоэлемент
   ::details-content — он становится реальным flex-контейнером для списка. Делаем
   его flex-колонкой во всю высоту секции, чтобы .app-shell__cases-list внутри
   скролился (без этого правила список — не прямой flex-потомок и flex:1 на нём
   игнорируется). В браузерах без ::details-content правило просто не применяется,
   а список и так остаётся прямым flex-потомком <details>. */
.app-shell__cases::details-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.app-shell__cases-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none; /* убрать дефолтный маркер summary */
  margin-bottom: var(--sp-3);
  color: var(--c-text-special);
}
.app-shell__cases-head::-webkit-details-marker { display: none; }
.app-shell__cases-title { margin-bottom: 0; }
.app-shell__cases-chevron { flex: 0 0 var(--icon-size); transition: transform 0.15s ease; }
.app-shell__cases[open] .app-shell__cases-chevron { transform: scaleY(-1); }
.app-shell__cases-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2); /* gap 4 между строками (Figma Case-list) */
  overflow-y: auto;
  /* JURHELP-155: список — скролл-контейнер раздела «ДЕЛА» (flex:1 забирает остаток
     высоты секции, min-height:0 разрешает ужаться ниже контента → включается скролл). */
  flex: 1 1 auto;
  min-height: 0;
  /* тонкий скроллбар как в макете (3px, тамб #28235d) */
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) rgba(0, 0, 0, 0.05);
}
.app-shell__cases-list::-webkit-scrollbar { width: 3px; }
.app-shell__cases-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
.app-shell__cases-list::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: var(--rd-lg); }
.app-shell__case-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); /* 8×12 (Figma Case) */
  border-radius: var(--rd-md);
  background: var(--c-bg-card); /* белая карточка на сером фоне сайдбара */
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}
.app-shell__case-link:hover { border-color: var(--c-divider); }
/* Текущее открытое дело (п. 5.4 шаг 3): подсветка в языке макета — как
   активный пункт меню (рамка + тень + основной цвет текста имени). */
.app-shell__case-link--current {
  border-color: var(--c-divider);
  box-shadow: var(--c-shadow-card);
}
.app-shell__case-link--current .app-shell__case-title { color: var(--c-text-primary); }
.app-shell__case-main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1 1 auto; }
.app-shell__case-title { font-size: var(--fs-case-name); font-weight: var(--fw-semibold); color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell__case-sub { font-size: var(--fs-case-type); color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell__case-status {
  font-size: var(--fs-case-type);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  background: var(--c-bg-field); /* бейдж статуса (Figma Button: #f7f7f7, r8, 6×4) */
  border-radius: var(--rd-md);
  padding: var(--sp-2) 6px;
  white-space: nowrap;
}
.app-shell__case-dot { flex: 0 0 var(--marker-size); width: var(--marker-size); height: var(--marker-size); border-radius: 50%; }
.app-shell__cases-empty,
.app-shell__cases-error {
  font-size: var(--fs-case-name);
  color: var(--c-text-muted);
  padding: var(--sp-3) var(--sp-4);
}
.app-shell__cases-error { display: flex; flex-direction: column; gap: var(--sp-2); }
.app-shell__cases-retry { color: var(--c-text-blue); text-decoration: none; }
.app-shell__cases-retry:hover { text-decoration: underline; }
.app-shell__cases-all {
  display: block;
  margin-top: var(--sp-3);
  padding: 0 var(--sp-4);
  font-size: var(--fs-case-name);
  font-weight: var(--fw-semibold);
  color: var(--c-text-blue);
  text-decoration: none;
  white-space: nowrap;
}
.app-shell__cases-all:hover { text-decoration: underline; }

/* Версия сборки (JURHELP-157) — низ бокового меню, слева, приглушённо.
   margin-top:auto прижимает к нижнему краю сайдбара на страницах без секции
   «ДЕЛА» (профиль/админка); при наличии секции — сразу под её списком.
   Длинное значение не ломает вёрстку: обрезаем многоточием, полное — в title. */
.app-shell__version {
  margin-top: auto;
  padding-top: var(--sp-4);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-muted);
  font-size: var(--fs-section-title);
}

.app-shell__main {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  margin: var(--sp-8) var(--sp-8) var(--sp-8) 0;
  padding: var(--sp-6);
  background: var(--c-bg-card);
  border-radius: var(--rd-xl);
  box-shadow: var(--c-shadow-card);
}
.app-shell__topbar { position: absolute; top: var(--sp-6); right: var(--sp-6); max-width: calc(100% - var(--sp-6) * 2); }

/* ============ Главная: шапка, доска, карточки, пусто ============ */

.app-home__head { margin-bottom: var(--sp-5); padding-right: 220px; }
.app-home__title { font-size: 32px; font-weight: var(--fw-semibold); color: var(--c-text-primary); margin: 0; }

.app-home__actions { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.app-home__search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 1 350px;
  height: 43px;
  padding: 0 var(--sp-4);
  background: var(--c-bg-field);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  color: var(--c-text-muted);
}
.app-home__actions .btn { margin-left: auto; }
.app-home__search-icon { flex: 0 0 auto; color: var(--c-text-muted); }

/* Переключатель «Показать архивные» (UC-R-3 AC-R-3.1). Ссылка-тогл (role=switch)
   в виде switch: дорожка + бегунок. Работает без JS (href инвертирует ?archived,
   сохраняя поиск). On-состояние — бирюзовая заливка (--c-bg-brand). */
.app-home__archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--c-text-muted);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.app-home__archive-track {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  background: var(--c-border-input);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.app-home__archive-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--c-bg-card);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}
.app-home__archive-toggle--on { color: var(--c-text-primary); }
.app-home__archive-toggle--on .app-home__archive-track { background: var(--c-bg-brand); }
.app-home__archive-toggle--on .app-home__archive-thumb { transform: translateX(16px); }

/* Строка-фильтр над доской (UC-R-3): несёт переключатель «Показать архивные».
   Вынесена из тулбара в #board-region — htmx подменяет её вместе с доской. */
.app-home__filters { display: flex; align-items: center; margin-bottom: var(--sp-5); }

/* Индикатор htmx-загрузки при переключении архива (AC-R-3.7): затемняем область
   доски на время фонового запроса. Класс htmx-request вешает htmx на hx-indicator
   (#board-region) на время запроса и снимает после. */
#board-region.htmx-request { opacity: 0.55; pointer-events: none; transition: opacity 0.1s ease; }

/* Поиск по делам (UC-HP-3): плейсхолдер и неактивное (disabled) состояние
   поля при пустом списке дел (п. 2.4). Иконка лупы наследует цвет контейнера. */
.app-home__search-input::placeholder,
.app-shell__search-input::placeholder { color: var(--c-text-muted); }
.app-home__search-input:disabled,
.app-shell__search-input:disabled { cursor: not-allowed; background: transparent; }
.app-shell__search:has(.app-shell__search-input:disabled) { opacity: 0.6; }

/* Состояние «ничего не найдено» (UC-HP-3 A1 / AC-HP-3.4): сообщение по центру
   основной зоны + ссылка «Сбросить поиск». Доска ниже отображается с пустыми
   колонками. */
.case-search-empty { text-align: center; padding: var(--sp-5) 0 var(--sp-6); }
.case-search-empty__text { margin: 0 0 var(--sp-3); font-size: 18px; color: var(--c-text-primary); }
.case-search-empty__reset {
  color: var(--c-text-blue);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.case-search-empty__reset:hover { text-decoration: underline; }

/* Ссылка «Искать во всём реестре (включая архив)» под результатами поиска
   (UC-HP-3 A3 / AC-HP-3.6). */
.case-search-registry { margin-top: var(--sp-5); }
.case-search-registry__link {
  color: var(--c-text-blue);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.case-search-registry__link:hover { text-decoration: underline; }

.case-board { display: flex; gap: var(--sp-5); align-items: flex-start; overflow-x: auto; padding-bottom: var(--sp-4); }
/* Тонкий горизонтальный скроллбар доски (Figma 835:7276). */
.case-board::-webkit-scrollbar { height: 4px; }
.case-board::-webkit-scrollbar-track { background: var(--c-divider); border-radius: 999px; }
.case-board::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: 999px; }

.case-board__column {
  flex: 0 0 338px;                 /* Figma 835:7043: колонка ~338px */
  box-sizing: border-box;
  /* JURHELP-153 #15: без min-width:0 nowrap-бейдж/клиент карточки задают
     min-content и распирают колонку шире 338px (flex-basis игнорируется).
     С min-width:0 колонка держит ширину, а ellipsis/clamp карточки работают. */
  min-width: 0;
  background: var(--c-bg-field);
  border-radius: var(--rd-xl);     /* Radius/radius 16 */
  padding: var(--sp-5h);           /* Spacing/spacing 20 */
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: relative;              /* якорь кнопки «Наверх» */
  /* Реестр (UC-R-1 п. 2.7): колонка фиксированной высоты, карточки сверх
     неё прокручиваются внутри колонки (пагинация — AC-R-1.8). */
  max-height: calc(100vh - 13rem);
}
/* Лента карточек колонки — единственная прокручиваемая область (шапка
   со счётчиком закреплена сверху). ⋯-меню выносится в document.body
   (row-menu.js), поэтому overflow его не обрезает. */
.case-board__col-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}
.case-board__col-empty { font-size: var(--fs-button); color: var(--c-text-muted); padding: var(--sp-3) 0; }
.case-board__col-head { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }
/* Заголовок колонки — серый для всех статусов (макет 835:7043). */
.case-board__col-title { font-size: 20px; font-weight: var(--fw-semibold); color: var(--c-text-muted); }
.case-board__col-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--c-bg-input); /* Frame/bg/secondary */
  font-size: var(--fs-button); font-weight: var(--fw-semibold); color: var(--c-text-muted);
}

/* Триггер пагинации колонки (UC-R-1 AC-R-1.8): no-JS ссылка «Показать ещё»,
   с case-board.js — sentinel ленивой подгрузки. */
.case-board__more {
  display: block;
  text-align: center;
  padding: var(--sp-3);
  border-radius: var(--rd-md);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  color: var(--c-text-blue);
  text-decoration: none;
}
.case-board__more:hover { background: rgba(49, 127, 242, 0.06); }
.case-board__more--loading { opacity: 0.5; pointer-events: none; }
/* Индикатор «Все дела загружены» (UC-R-1 п. 2.8). */
.case-board__col-end {
  text-align: center;
  font-size: var(--fs-case-type);
  color: var(--c-text-muted);
  padding: var(--sp-2) 0;
}
/* Кнопка «Наверх» колонки (UC-R-1 п. 2.8): показывает case-board.js при
   прокрутке ленты больше чем на один экран. */
.case-board__top {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--c-bg-button-primary);
  color: var(--c-text-on-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--c-shadow-card);
}

/* --- Drag-n-drop смены статуса дела (UC-HP-1 AC-HP-1.7, JURHELP-152) --- */
/* Карточка с включённым DnD — «ручка» захвата; перетаскиваемая приподнята. */
[data-case-dnd] { cursor: grab; }
[data-case-dnd].case-card--dragging { cursor: grabbing; opacity: 0.55; box-shadow: var(--c-shadow-card); }
/* Подсветка колонок при перетаскивании (по образцу Яндекс Трекера): куда можно
   перенести — зелёная рамка + пастельная заливка; куда нельзя (переход запрещён)
   — красная рамка + пастельная красная заливка. Текстовую подсказку убрали по
   решению заказчика (JURHELP-152, замечание ревью): оверлей с текстом сливался с
   карточками дел, а красная подсветка сама по себе достаточно очевидна. */
.case-board__column--drop-ok {
  outline: 2px dashed var(--c-marker-green);
  outline-offset: -2px;
  background: var(--c-cal-mint);
}
.case-board__column--drop-forbidden {
  outline: 2px dashed var(--c-marker-red);
  outline-offset: -2px;
  background: var(--c-cal-red);
}

/* Ошибка загрузки списка дел (UC-R-1 E-R-1.1 / AC-R-1.10). */
.case-board-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) 0;
  text-align: center;
}
.case-board-error__text { font-size: 16px; font-weight: var(--fw-semibold); color: var(--c-text-primary); }

/* Карточка дела (Figma 835:7048): контейнер (относительный) + кликабельная
   ссылка-тело (переход в пространство дела, UC-S-1) + ⋯-меню сверху справа.
   Цвет дела — тонировка бейджа типа (отдельной цветовой полосы слева в макете
   нет). Архивная карточка (.case-card--archived, раздел «Архив») — без ссылки,
   содержимое прямо в контейнере. */
.case-card {
  position: relative;
  background: var(--c-bg-card);
  border-radius: 12px;             /* Radius/radius 12 */
  display: flex;
  flex-direction: column;
  overflow: hidden;                /* содержимое скругляется вместе с карточкой */
  /* JURHELP-138 п.1/8/9: размер карточки не зависит от количества карточек в
     колонке и от объёма контента — карточка не сжимается и не растягивается,
     прокручивается сама колонка (.case-board__col-cards / .archive-grid). */
  flex: 0 0 auto;
  /* JURHELP-153 #15: снимаем min-width:auto, иначе nowrap-бейдж/клиент задают
     min-content и распирают карточку шире колонки (338px). С min-width:0 +
     max-width:100% работает ellipsis бейджа/клиента и clamp названия/предмета. */
  min-width: 0;
  max-width: 100%;
}
.case-card:hover { box-shadow: var(--c-shadow-card); }

.case-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  padding-right: calc(var(--sp-5) + 26px); /* место под ⋯ */
  text-decoration: none;
  color: inherit;
  /* JURHELP-153 #15: разрешаем колонке-ссылке сжиматься, чтобы ellipsis бейджа
     и клиента считались от ширины карточки, а не от их min-content. */
  min-width: 0;
}

.case-card__menu { position: absolute; top: var(--sp-4); right: var(--sp-4); }

/* ---------- Статус-бейдж дела (UC-5) ----------
   На доске реестра не используется (статус определяет колонка — UC-R-1
   п. 2.7); остаётся на странице «Архив» (статичный, AC5.7). */
.case-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.case-card__status--static { margin-top: var(--sp-2); } /* статичный бейдж в архиве */

.case-status--new { background: #eef2ff; color: #3730a3; }
.case-status--in_progress { background: #e6f7e6; color: #2c7a2c; }
.case-status--paused { background: #fff5d9; color: #8a6500; }
.case-status--completed { background: #eceff1; color: #546e7a; }

/* Бейдж типа дела (Figma 835:7051: 12px Medium, px 6 / py 4, radius 4;
   tint цветом дела — inline из caseBadgeStyle). */
.case-card__badge {
  align-self: flex-start;
  padding: var(--sp-2) 6px;
  border-radius: 4px;
  font-size: var(--fs-case-name);
  font-weight: var(--fw-medium);
  background: var(--c-bg-field);
  color: var(--c-text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Бейдж «в архиве» на карточке доски (UC-R-3 AC-R-3.2, Figma 835:7204):
   приглушённый серый — иконка архива + текст #787878, фон #f7f7f7, r8,
   px 6 / py 4, gap 4. Отображается только при включённом фильтре «Показать
   архивные». */
.case-card__archived-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 6px;
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  color: var(--c-text-muted);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.case-card__archived-icon { flex: 0 0 auto; }

/* Название дела — до 2 строк с многоточием (UC-R-1 п. 2.3 / AC-R-1.5). */
.case-card__title {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* JURHELP-138 п.8: длинная неразрывная строка (без пробелов) не должна
     раздувать карточку по ширине — переносим внутри. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.case-card__client {
  font-size: var(--fs-case-name);
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Номер дела слева, категория справа (Figma 835:7056: 12px SemiBold #787878). */
.case-card__meta {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-case-name);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
}
.case-card__court { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-card__category { text-align: right; white-space: nowrap; }
.case-card__subject-label { font-size: var(--fs-case-name); font-weight: var(--fw-medium); color: var(--c-text-muted); }
/* JURHELP-138 п.7/8: «Предмет иска» на карточке — не более 3 строк с
   многоточием; длинные неразрывные строки переносятся (фикс-размер карточки). */
.case-card__subject {
  font-size: var(--fs-case-name);
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.case-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  text-align: center;
  padding: 96px var(--sp-6);
}
.case-empty__title { font-size: 24px; font-weight: var(--fw-semibold); color: var(--c-text-primary); margin: 0; }
.case-empty__text { max-width: 420px; color: var(--c-text-muted); font-size: var(--fs-button); line-height: 1.5; margin: 0; }

/* ---------------- Архив (UC-3) ---------------- */

/* JURHELP-164 п.1: серый фон-панель (--c-bg-field #f7f7f7) под карточками архива.
   Белые карточки (.case-card) без рамки сливались с белым фоном страницы — на
   сером их границы читаются (репортёр: «не видно границ карточек»). */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-5);
  background: var(--c-bg-field);
  padding: var(--sp-5);
  border-radius: var(--rd-md);
}

/* Модалка подтверждения архивирования (поверх кабинета, как формы дел). */
.case-modal__backdrop {
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  z-index: 50;
}
/* JURHELP-158 п.7: тот же трёхрегионный каркас, что и у .case-create —
   шапка/футер зафиксированы, тело (.modal-body / .modal-form) прокручивается. */
.case-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 51;
  width: calc(100% - 2 * var(--sp-6));
  max-width: 480px;
  max-height: calc(100vh - 2 * var(--sp-6));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.case-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--c-divider);
}
.case-modal__title { font-size: 20px; font-weight: var(--fw-semibold); color: var(--c-text-primary); margin: 0; }
.case-modal__close { font-size: 24px; line-height: 1; color: var(--c-text-muted); text-decoration: none; }
.case-modal__close:hover { color: var(--c-text-primary); }
.case-modal__error {
  padding: 10px 14px;
  border-radius: var(--rd-md);
  background: #fff5f5;
  color: #c62828;
  font-size: var(--fs-button);
}

.case-archive__text { margin: 0; color: var(--c-text-primary); font-size: var(--fs-button); line-height: 1.5; }
.case-archive__case {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4);
  background: var(--c-bg-field);
  border-radius: var(--rd-md);
  min-width: 0; /* JURHELP-138 п.11: даёт детям сжиматься и переносить текст */
}
/* JURHELP-138 п.11: длинные заголовок/клиент/номер не должны вылезать за
   рамки модалки — переносим неразрывные строки. */
.case-archive__case-title { font-weight: var(--fw-semibold); color: var(--c-text-primary); overflow-wrap: anywhere; word-break: break-word; }
.case-archive__case-client { font-size: var(--fs-case-type); color: var(--c-text-muted); overflow-wrap: anywhere; word-break: break-word; }
/* JURHELP-158 п.7: футер модалки .case-modal — зафиксирован, отделён линией. */
.case-archive__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--c-divider);
  background: var(--c-bg-card);
}
.case-archive__actions form { display: inline; }

/* ---------- Стороны дела (UC-6) ---------- */
.parties__back {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-case-type);
  color: var(--c-text-muted);
  text-decoration: none;
}
.parties__back:hover { color: var(--c-text-primary); }
.parties__banner {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: var(--c-bg-field);
  border-radius: var(--rd-md);
  color: var(--c-text-muted);
  font-size: var(--fs-case-type);
}
.parties-group { margin-bottom: var(--sp-6); }
.parties-group__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  color: var(--c-text-section);
}
.parties-group__count {
  min-width: 22px;
  padding: 0 6px;
  text-align: center;
  font-size: var(--fs-case-type);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  background: var(--c-bg-field);
  border-radius: 999px;
}
.parties-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.parties-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-bg-card);
  border-radius: var(--rd-md);
  box-shadow: var(--c-shadow-card);
}
.parties-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* JURHELP-153 (комм.): длинное ФИО/пояснение стороны переносим внутри карточки
   (родитель .parties-item__body уже min-width:0), чтобы не растягивать строку. */
.parties-item__name { font-weight: var(--fw-semibold); color: var(--c-text-primary); overflow-wrap: anywhere; word-break: break-word; }
.parties-item__clar { font-size: var(--fs-case-type); color: var(--c-text-muted); overflow-wrap: anywhere; word-break: break-word; }
.parties-item__menu { flex-shrink: 0; }
.case-create--narrow { max-width: 480px; }
.case-create__hint { margin-top: var(--sp-1); font-size: var(--fs-case-type); color: var(--c-text-muted); }

/* ---------- Пространство дела: вкладки (UC-D-1, Figma 439:5251) ---------- */
.case-space__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  /* Резерв справа под абсолютный аватар-топбар AppShell (как в .admin-users). */
  padding-right: 200px;
  margin-bottom: var(--sp-4);
}
/* Заголовок пространства: название дела + индикатор статуса (UC-5 AC5.1/AC5.7,
   JURHELP-121, Figma 854:2897 «Label + status»). Пилюля прижата к низу строки. */
.case-space__title-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
/* JURHELP-138 п.10: длинное название дела не вмещается в шапке пространства —
   ограничиваем шириной строки, переносим и клампим до 2 строк с многоточием. */
.case-space__title {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Кликабельный вариант — обёртка .row-menu; статичный (архив) — сам span-пилюля. */
.case-space__status { margin-bottom: 6px; }
.case-space__status-trigger,
.case-space__status--static {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  height: auto;
  padding: 4px 6px;
  background: var(--c-bg-field);
  border: none;
  border-radius: var(--rd-md);
  color: var(--c-text-muted);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.case-space__status-trigger { cursor: pointer; }
.case-space__status-trigger:hover,
.row-menu--open .case-space__status-trigger {
  background: var(--c-bg-input);
  color: var(--c-text-primary);
}
.case-space__status--static { cursor: default; }
.case-space__status-chevron { display: block; flex: none; }
.case-space__tabbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
/* JURHELP-164 п.5: таб-бар пространства дела — серая скруглённая «рамка»
   (segmented control) с белой активной вкладкой. Раньше рамочный вид жил только
   в оверрайде карточки задачи (.task-card__actions .case-space__tabs); теперь он
   базовый и применяется на ВСЕХ вкладках дела (репортёр: «как внутри задачи»). */
.case-space__tabs {
  display: flex;
  gap: var(--sp-2);
  flex: 0 1 auto;
  flex-wrap: wrap;
  padding: var(--sp-2);
  background: var(--c-bg-field);
  border-radius: var(--rd-md);
}
.case-space__tab {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  text-decoration: none;
  border-radius: var(--rd-md);
  cursor: pointer;
}
.case-space__tab[aria-disabled="true"] { color: var(--c-text-muted); opacity: .5; cursor: default; }
.case-space__tab:not([aria-disabled="true"]):hover { color: var(--c-text-primary); background: var(--c-bg-card); }
.case-space__tab--active {
  color: var(--c-text-primary);
  background: var(--c-bg-card);
  opacity: 1;
}

/* ---------- Документы: тулбар + таблица ---------- */
.documents__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.documents__search {
  flex: 1;
  max-width: 420px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-button);
  background: var(--c-bg-field);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  color: var(--c-text-primary);
}
/* Форма-обёртка поиска (UC-D-5): display:contents — input участвует во flex
   тулбара напрямую, сохраняя стили .documents__search. */
.documents__search-form { display: contents; }
/* Тулбар массового выбора (UC-D-6, макет 807:24656): кнопки на сером фоне,
   «Удалить» — красный текст (Button/text/critical), «Скачать» — чёрный. */
.documents__bulk { display: flex; gap: var(--sp-3); }
.documents__bulk-btn {
  background: var(--c-bg-field);
  border: none;
  border-radius: var(--rd-md);
  padding: var(--sp-4);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.documents__bulk-btn--delete { color: var(--c-marker-red, #ff0000); }
.documents__bulk-btn--download { color: var(--c-text-primary); }
.documents__bulk-btn:disabled { opacity: .4; cursor: default; }
/* Модалка подтверждения массового удаления — скрыта до показа из doc-bulk.js. */
.doc-bulk-modal[hidden] { display: none; }

/* Таблица — плоская внутри белой основной области (.app-shell__main), без
   собственной карточки/тени (Figma 809:33857): строки на белом с тонкими
   разделителями (--c-divider ≈ Frame/contour/light #0000000d). Заголовки —
   токен «Специальный» (SemiBold 12, letter-spacing 1.5, #787878). */
.documents__table-wrap { overflow-x: auto; }
.documents__table { width: 100%; border-collapse: collapse; font-size: var(--fs-button); }
.documents__table thead th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-section-title);
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-divider);
  white-space: nowrap;
}
.documents__table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-divider);
  color: var(--c-text-primary);
  vertical-align: middle;
}
.documents__table tbody tr:last-child td { border-bottom: none; }
.documents__col-check { width: 40px; }
.documents__col-check input { accent-color: var(--c-bg-brand); cursor: pointer; }
.documents__col-check input:disabled { cursor: default; }
.documents__col-title { max-width: 360px; }
.documents__col-type { width: 84px; }
.documents__col-actions { width: 128px; text-align: right; white-space: nowrap; }
.documents__sort { color: var(--c-text-muted); font-size: var(--fs-case-type); }
/* Название: не-PDF — простой span с многоточием; PDF — flex-ссылка с иконкой
   «открыть» (material Open_in_new) перед текстом. min-width:0 на тексте нужен,
   чтобы ellipsis работал внутри flex при длинном имени (JURHELP-138/149). */
.documents__title-text {
  display: inline-block;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
/* Название — тёмный текст по макету 809:33857 (не синяя ссылка); для PDF
   остаётся кликабельным (UC-D-3, подчёркивание при наведении). */
.documents__title-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 340px;
  color: var(--c-text-primary);
  text-decoration: none;
  vertical-align: bottom;
}
.documents__title-link .documents__title-text { max-width: none; min-width: 0; }
.documents__title-link:hover .documents__title-text { text-decoration: underline; }
.documents__title-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--c-text-muted);
}
/* Колонка «Тип» — компактный чип с расширением файла (PDF, DOCX…). */
.documents__type {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--rd-sm);
  background: var(--c-bg-field);
  color: var(--c-text-muted);
  font-size: var(--fs-case-type);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.documents__type--none { background: transparent; padding: 0; font-weight: 400; }
.documents__author--system { color: var(--c-text-special); }
.documents__author--blocked { color: var(--c-text-muted); }
.documents__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  margin-left: var(--sp-3);
  border: none;
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  color: var(--c-text-primary);
  text-decoration: none;
  cursor: pointer;
}
.documents__action:first-child { margin-left: 0; }
.documents__action:hover { background: var(--c-bg-hover, #ebebeb); }
.documents__action-icon { display: block; width: 20px; height: 20px; }
.documents__action--danger { color: var(--c-marker-red, #ff0000); }
.documents__action[disabled] { opacity: .4; cursor: default; }

.documents__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.documents__page-info { color: var(--c-text-muted); font-size: var(--fs-case-type); }
.documents__pages { display: flex; gap: var(--sp-2); }
.documents__page {
  min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-2);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  color: var(--c-text-primary);
  text-decoration: none;
  font-size: var(--fs-button);
}
.documents__page--active { background: var(--c-bg-button-primary); color: #fff; }

/* ---------- Пространство дела: вкладка «Дело» (Figma 429:5345) ---------- */
.btn--danger-soft {
  background: #ffece9;
  color: #e5484d;
  border: none;
  border-radius: var(--rd-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.btn--danger-soft:hover { background: #ffdcd6; }

.case-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-6);
  align-items: start;
}
.case-view__main {
  padding: var(--sp-6);
  background: var(--c-bg-card);
  border-radius: var(--rd-lg);
  box-shadow: var(--c-shadow-card);
}
.case-view__section-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
}
.case-view__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.case-view__fieldset[disabled] { opacity: .75; }

.case-view__aside { display: flex; flex-direction: column; gap: var(--sp-4); }
.case-view__card {
  padding: var(--sp-5);
  background: var(--c-bg-card);
  border-radius: var(--rd-lg);
  box-shadow: var(--c-shadow-card);
}
.case-view__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.case-view__card-title { margin: 0; font-size: var(--fs-button); font-weight: var(--fw-semibold); color: var(--c-text-primary); }
.case-view__card-link { font-size: var(--fs-case-type); color: var(--c-text-special); text-decoration: none; }
.case-view__card-link:hover { text-decoration: underline; }
.case-view__card-empty { margin: 0; font-size: var(--fs-case-type); color: var(--c-text-muted); }
.case-view__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.case-view__participant { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.case-view__participant-role { font-size: var(--fs-case-type); color: var(--c-text-muted); }
/* JURHELP-138 п.2: длинное ФИО участника обрезаем многоточием (полное — в
   title), чтобы не вылезало за рамки карточки сайдбара. */
.case-view__participant-name {
  color: var(--c-text-primary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-view__doc { font-size: var(--fs-button); min-width: 0; }
/* JURHELP-153 (комм.): длинное имя документа не должно вылезать за карточку —
   обрезаем многоточием в одну строку, полное имя — в title. */
.case-view__doc-link,
.case-view__doc-text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-view__doc-link { color: var(--c-text-blue); text-decoration: none; }
.case-view__doc-link:hover { text-decoration: underline; }
.case-view__doc-text { color: var(--c-text-primary); }
.case-view__card-btn { display: inline-block; margin-top: var(--sp-4); }

/* ---------- Пространство дела (UC-S-1) ---------- */
/* Пространство дела — две колонки: слева состояние+заметки, справа история
   (макет 414:9362). На узких экранах колонки складываются в одну. */
.case-space__body { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-5); }
.case-space__col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
@media (max-width: 1024px) { .case-space__body { flex-direction: column; } }
.case-space__panel {
  padding: var(--sp-6);
  background: var(--c-bg-card);
  border-radius: var(--rd-lg);
  box-shadow: var(--c-shadow-card);
}
.case-space__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); }
/* Шапка блока «Движение дела»: карандаш «Этапы дела» прижат вплотную к заголовку
   (слева), а не к правому краю панели — justify-content:flex-start + компактный
   gap. У «Заметок» кнопка «+» остаётся справа (базовый space-between). */
.case-space__panel-head--flow { justify-content: flex-start; gap: var(--sp-3); }
/* JURHELP-158 п.3/4 (макет 836:30890): шапка панели статуса — две колонки: слева
   «Предмет иска» + название дела, справа «Номер дела» + номер; значения крупные
   (H2 24px). Выравнивание по верху, номер прижат вправо (space-between). */
.case-space__panel-head--split { align-items: flex-start; margin-bottom: var(--sp-6); }
/* JURHELP-164 п.2: фиксированное соотношение колонок шапки — 70% «Предмет иска»
   / 30% «Номер дела». flex-basis:0 + grow 7/3 делит доступную ширину ровно 70/30
   с учётом gap между колонками; min-width:0 сохраняет ellipsis/clamp значений. */
.case-space__subject-col { flex: 7 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.case-space__number-col { flex: 3 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.case-space__panel-title { margin: 0; font-size: var(--fs-section-title); font-weight: var(--fw-semibold); color: var(--c-text-primary); }
.case-space__panel-label { font-size: var(--fs-section-title); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-section-title); color: var(--c-text-special); }
.case-space__subject { margin: 0; font-size: 24px; font-weight: var(--fw-semibold); color: var(--c-text-primary); overflow-wrap: anywhere; word-break: break-word; }
/* JURHELP-138 п.7: длинный «Предмет иска» показываем сокращённо (4 строки) с
   раскрытием полностью. Checkbox-hack — работает без JS; короткое описание
   рендерится без тоггла (см. subjectLong в case_space.templ). */
.case-space__subject--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-space__subject-toggle:checked ~ .case-space__subject--clamped {
  -webkit-line-clamp: unset;
  display: block;
}
.case-space__subject-more {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  cursor: pointer;
  color: var(--c-text-blue);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
}
.case-space__subject-more::after { content: "Показать полностью"; }
.case-space__subject-toggle:checked ~ .case-space__subject-more::after { content: "Свернуть"; }
.case-space__panel-subtitle { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-button); font-weight: var(--fw-semibold); color: var(--c-text-primary); }
.case-space__hint { margin: var(--sp-3) 0 0; font-size: var(--fs-case-type); color: var(--c-text-muted); }
/* JURHELP-158 п.1: иконка-карандаш «Этапы дела» рядом с заголовком «Движение
   дела» (вместо прежней кнопки-текста) — 32×32, как кнопка «+» в «Заметках». */
.case-space__flow-edit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; font-size: 16px; line-height: 1; color: var(--c-text-muted); text-decoration: none; background: var(--c-bg-field); border: 1px solid var(--c-border-input); border-radius: var(--rd-sm); }
.case-space__flow-edit:hover { color: var(--c-text-primary); border-color: var(--c-text-muted); }
.case-flow { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--c-bg-field); border-radius: var(--rd-md); }
.case-flow__node {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  background: var(--c-bg-card); border-radius: 999px;
  box-shadow: var(--c-shadow-card);
}
.case-flow__body { min-width: 0; }
.case-flow__group { font-size: var(--fs-case-type); color: var(--c-text-muted); }
.case-flow__detail { font-size: var(--fs-button); font-weight: var(--fw-medium); color: var(--c-text-primary); }
.case-flow__meta { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-case-type); color: var(--c-text-muted); }
.case-flow__done { color: var(--c-text-special); }
.case-space__case-number { font-size: 24px; font-weight: var(--fw-semibold); color: var(--c-text-primary); overflow-wrap: anywhere; word-break: break-word; }
/* Пустой номер дела — прочерк-плейсхолдер приглушённым цветом (значения нет). */
.case-space__case-number--empty { color: var(--c-text-muted); }

/* История изменений — колонка «Изменения по делу» (UC-H-1, макет 414:8684/8866).
   Панель: белая, рамка-контур, радиус 16; карточки — серые (#f7f7f7), радиус 8.
   Карточка строго 3 строки: описание / автор / дата (иконка календаря + время). */
/* JURHELP-155 п.3: колонка «Изменения по делу» зафиксирована — sticky пришпиливает
   её к верху при скролле страницы, высота ограничена вьюпортом, а лента карточек
   (.case-history__feed) скролится колесом мыши внутри себя. */
.case-history {
  flex: 0 0 300px;
  position: sticky;
  top: var(--sp-8);
  max-height: calc(100vh - var(--sp-8) * 2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-xl);
}
@media (max-width: 1024px) {
  /* На узких экранах колонки складываются в одну — фиксацию и ограничение высоты
     снимаем, иначе панель «зависнет» посреди потока. */
  .case-history { flex-basis: auto; width: 100%; position: static; max-height: none; }
}
.case-history__title { margin: 0; font-size: var(--fs-section-title); font-weight: var(--fw-semibold); color: var(--c-text-primary); }
.case-history__feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  /* Внутренний скролл ленты колесом мыши; overscroll-behavior:contain не даёт
     докрутке «протечь» на страницу (п.3 «зафиксировать и скролить колесиком»). */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) rgba(0, 0, 0, 0.05);
}
.case-history__feed::-webkit-scrollbar { width: 6px; }
.case-history__feed::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
.case-history__feed::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: var(--rd-lg); }
/* Карточка-действие (UC-H-2): рендерится как <a>/<button>, выглядит как карточка.
   Сброс стилей кнопки/ссылки + аффорданс клика (hover/focus). */
.case-history__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  padding: 9px 13px;
  background: var(--c-bg-field);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .12s ease;
}
.case-history__item:hover { border-color: var(--c-text-muted); }
.case-history__item:focus-visible { outline: 2px solid var(--c-bg-brand, #7dc7bf); outline-offset: 2px; }
.case-history__main { display: flex; flex-direction: column; gap: var(--sp-2); }
/* JURHELP-143: строка «описание + бадж типа объекта справа сверху». Бадж не
   сжимается; описание занимает остаток и переносится (min-width:0). */
.case-history__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.case-history__desc { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--fs-button); font-weight: var(--fw-semibold); color: var(--c-text-primary); word-break: break-word; }
.case-history__badge {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: var(--fs-case-type);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  padding: 2px 8px;
  border-radius: var(--rd-sm);
  background: var(--c-bg-input);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.case-history__author { margin: 0; font-size: var(--fs-case-type); color: var(--c-text-muted); }
.case-history__author--blocked { font-style: italic; }
.case-history__date { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-case-type); color: var(--c-text-muted); }
.case-history__cal-icon { flex: 0 0 auto; width: 16px; height: 16px; display: block; }
.case-history__more { margin: 0; font-size: var(--fs-case-type); color: var(--c-text-muted); text-align: center; }

/* Подсветка цели перехода ~2.5с (UC-H-2 AC-H2.5): мягкое кольцо + тон, затухает.
   box-shadow/outline — без сдвига layout. Применяется к #space-case / этапу
   степпера / карточке заметки. */
@keyframes history-flash {
  0%   { box-shadow: 0 0 0 3px var(--c-bg-brand, #7dc7bf); }
  70%  { box-shadow: 0 0 0 3px var(--c-bg-brand, #7dc7bf); }
  100% { box-shadow: 0 0 0 3px rgba(125, 199, 191, 0); }
}
.is-highlighted { animation: history-flash 2.5s ease-out; border-radius: var(--rd-md); outline: none; }

/* Тосты (UC-H-2): переход недоступен / тип не поддерживается. */
.toast-container { position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; pointer-events: none; }
.toast { max-width: 360px; padding: 10px 16px; background: var(--c-text-primary, #000); color: #fff; border-radius: var(--rd-md); font-size: var(--fs-case-type); line-height: 1.35; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.toast--shown { opacity: 1; transform: translateY(0); }

/* Заметки (UC-N-1 / UC-N-4, макет 414:9134) */
/* JURHELP-155 п.4: лента «Заметки» зафиксирована по высоте и скролится колесом
   мыши внутри себя (как «Изменения по делу»). max-height ограничивает рост блока,
   чтобы заметки не растягивали страницу; overscroll-behavior:contain удерживает
   докрутку внутри ленты. Right-padding оставляет место скроллбару. */
.note-feed {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 50vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) rgba(0, 0, 0, 0.05);
}
.note-feed::-webkit-scrollbar { width: 6px; }
.note-feed::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
.note-feed::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: var(--rd-lg); }
/* Карточки — светлые с тонкой рамкой (по макету). */
.note-card { padding: var(--sp-4); background: var(--c-bg-surface, #fff); border: 1px solid var(--c-border-input); border-radius: var(--rd-md); }
.note-card__body { margin: 0; color: var(--c-text-primary); white-space: pre-wrap; word-break: break-word; }
/* Нижняя строка карточки: слева мета (автор/дата/изменено), справа действия. */
.note-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.note-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-case-type); color: var(--c-text-muted); min-width: 0; }
.note-card__author { color: var(--c-text-primary); }
.note-card__author--blocked { color: var(--c-text-muted); }
.note-card__edited { font-style: italic; }
.note-card__actions { flex: 0 0 auto; display: flex; gap: var(--sp-1, 4px); }
.note-card__action { color: var(--c-text-muted); text-decoration: none; font-size: var(--fs-button); line-height: 1; padding: 2px 6px; border-radius: var(--rd-sm); }
.note-card__action:hover { color: var(--c-text-primary); background: var(--c-bg-hover, rgba(0,0,0,0.05)); }
.note-card__action--danger:hover { color: var(--c-text-danger, #d92d20); }
/* Компактная квадратная кнопка «+» в шапке блока «Заметки» (по макету). */
.note-add-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 20px; line-height: 1; color: var(--c-text-muted); text-decoration: none; background: var(--c-bg-field); border: 1px solid var(--c-border-input); border-radius: var(--rd-sm); }
.note-add-btn:hover { color: var(--c-text-primary); border-color: var(--c-text-muted); }
.note-delete__excerpt { margin: var(--sp-3) 0 0; padding: var(--sp-3); border-left: 3px solid var(--c-border-input); background: var(--c-bg-field); color: var(--c-text-muted); font-size: var(--fs-case-type); white-space: pre-wrap; word-break: break-word; }

/* ---------- JURHELP-155: экран «Статус» в высоту вьюпорта (без скролла страницы) ----------
   Сама страница пространства дела не скролится — экран фиксируется на 100vh, а
   скролятся ТОЛЬКО внутренние ленты: «Движение дела» (горизонтально, см. .case-stepper),
   «Изменения по делу» (.case-history__feed) и «Заметки» (.note-feed). Включается
   точечно классом .app-shell--fit (handler ставит Shell.FitViewport на странице
   «Статус»); другим страницам кабинета вертикальный скролл нужен. */
.app-shell--fit { height: 100vh; overflow: hidden; }
/* Основная область — колонка фиксированной высоты, сама не скролится. */
.app-shell--fit .app-shell__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* Тело страницы занимает остаток высоты под шапкой/вкладками; колонки тянутся
   на всю высоту, переполнение уводится во внутренние ленты. */
.app-shell--fit .case-space__body {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}
.app-shell--fit .case-space__col { min-height: 0; }
/* Левая колонка: панель состояния (со степпером) — по содержимому; «Заметки» —
   занимают остаток и скролят ленту внутри себя. */
.app-shell--fit .case-space__panel--status { flex: 0 0 auto; min-height: 0; }
.app-shell--fit .case-space__panel--notes {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app-shell--fit .case-space__panel--notes .note-feed {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none; /* в fit-режиме высоту задаёт колонка, не 50vh */
}
/* «Изменения по делу» — на всю высоту тела, без sticky (страница не скролится);
   лента скролится внутри (.case-history__feed уже overflow-y:auto). */
.app-shell--fit .case-history {
  align-self: stretch;
  position: static;
  max-height: none;
  min-height: 0;
}
/* На узких экранах (колонки складываются в одну) fit-режим отключаем — иначе
   стопка не влезает в 100vh и обрезается. Возвращаем обычный скролл страницы и
   ограничение высоты ленты заметок. */
@media (max-width: 1024px) {
  .app-shell--fit { height: auto; overflow: visible; }
  .app-shell--fit .app-shell__main { display: block; overflow: visible; }
  .app-shell--fit .case-space__body { overflow: visible; }
  .app-shell--fit .case-space__panel--notes { display: block; overflow: visible; }
  .app-shell--fit .case-space__panel--notes .note-feed { max-height: 50vh; }
}

/* Движение дела — степпер (UC-F-1, макет 414:7917) */
/* JURHELP-155 п.2: «Движение дела» — горизонтальная лента-степпер, скролится
   колесом мыши при наведении (вертикальное колесо → горизонталь через
   case-space-scroll.js по [data-wheel-x]). overscroll-behavior-x:contain не даёт
   докрутке уехать на историю браузера/страницу; тонкий скроллбар — как у списка дел. */
.case-stepper {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0 0 var(--sp-2);
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) rgba(0, 0, 0, 0.05);
}
.case-stepper::-webkit-scrollbar { height: 6px; }
.case-stepper::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
.case-stepper::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: var(--rd-lg); }
.case-stepper__item { position: relative; flex: 0 0 auto; min-width: 130px; max-width: 180px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--sp-3); }
/* Соединительная линия между узлами. */
.case-stepper__item:not(:first-child)::before { content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 2px; background: var(--c-border-input); z-index: 0; }
.case-stepper__item--done:not(:first-child)::before { background: var(--c-bg-brand); }
.case-stepper__node { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-bg-field); border: 2px solid var(--c-border-input); color: var(--c-text-primary); }
/* JURHELP-158: иконка-документ узла степпера (SVG stroke=currentColor, макет
   836:30890). Невыполненный — тёмная на светлом фоне; выполненный — белая на
   бирюзовом (color:#fff ниже). */
.case-stepper__icon { display: block; width: 20px; height: 20px; }
.case-stepper__item--done .case-stepper__node { background: var(--c-bg-brand); border-color: var(--c-bg-brand); color: #fff; }
/* JURHELP-183: длинное название группы/этапа не должно растягивать узел
   степпера за пределы max-width и рвать горизонтальный скролл ленты — обрезаем
   многоточием в одну строку, полное значение в title (тултип). */
.case-stepper__group { margin-top: var(--sp-2); font-size: var(--fs-case-type); color: var(--c-text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-stepper__detail { font-size: var(--fs-button); font-weight: var(--fw-medium); color: var(--c-text-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-stepper__date { font-size: var(--fs-case-type); color: var(--c-text-muted); }
.case-stepper__item--add .case-stepper__add { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 2px dashed var(--c-border-input); color: var(--c-text-muted); text-decoration: none; font-size: 20px; }
.case-stepper__item--add .case-stepper__add:hover { color: var(--c-text-primary); border-color: var(--c-text-muted); }

/* Модалка «Этапы дела» (UC-F-1, макет 414:9134) */
/* Скролл/высоту задаёт общий каркас .case-modal (JURHELP-158 п.7). */
.case-flow-modal { max-width: 520px; width: min(520px, calc(100vw - 2 * var(--sp-6))); }
.flow-add { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border-input); }
.flow-add__field { display: flex; flex-direction: column; gap: 4px; }
.flow-add__label { font-size: var(--fs-case-type); color: var(--c-text-muted); }
.flow-add__check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-button); }
/* Список этапов — вертикальный таймлайн (чекбокс + круглый узел + линия + название), макет 414:8152. */
.flow-steps { list-style: none; margin: 0; padding: 0; }
.flow-step { display: flex; align-items: flex-start; gap: var(--sp-4); }
.flow-step__rail { flex: 0 0 48px; align-self: stretch; display: flex; flex-direction: column; align-items: center; }
.flow-step__node { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--c-bg-secondary, #ebebeb); color: var(--c-text-primary); display: inline-flex; align-items: center; justify-content: center; }
.flow-step--done .flow-step__node { background: var(--c-bg-brand); color: #fff; }
.flow-step__line { flex: 1 1 auto; width: 4px; min-height: 12px; background: var(--c-bg-secondary, #ebebeb); }
.flow-step--done .flow-step__line { background: var(--c-bg-brand); }
.flow-step__body { flex: 1 1 auto; min-width: 0; padding: 14px 0; }
/* JURHELP-183: длинное название этапа в списке модалки переносим по любому
   символу (min-width:0 на .flow-step__body уже есть) — иначе неразрывный токен
   даёт горизонтальный скролл модалки. Здесь нужен весь текст, поэтому перенос,
   а не обрезка. */
.flow-step__name { font-size: var(--fs-button); font-weight: var(--fw-semibold, 600); color: var(--c-text-primary); overflow-wrap: anywhere; }
.flow-step__actions { flex: 0 0 auto; align-self: center; display: flex; gap: var(--sp-2); }
.flow-step__action { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--rd-sm); background: var(--c-bg-field); color: var(--c-text-muted); text-decoration: none; font-size: var(--fs-button); line-height: 1; }
.flow-step__action:hover { color: var(--c-text-primary); }
.flow-step__action--complete:hover { color: var(--c-bg-brand); }
.flow-step__action--danger:hover { color: var(--c-text-danger, #d92d20); }
/* JURHELP-183: в модалках «Завершить этап»/«Удалить этап» название этапа
   встроено в текст — переносим по любому символу, чтобы длинное значение не
   раздувало модалку по горизонтали. */
.flow-complete { display: flex; flex-direction: column; gap: var(--sp-4); overflow-wrap: anywhere; }
/* Inline-редактор этапа под названием: небольшой отступ сверху от текста до полей. */
.flow-complete--inline { margin-top: var(--sp-3); }

/* Мини-меню «Завершить этап» по правому клику на узле степпера (case-flow-menu.js,
   !РЕШЕНИЕ! JURHELP-100). Позиционируется у курсора (position: fixed). */
.case-stepper__node--actionable { cursor: context-menu; }
.case-stepper__node--actionable:hover { border-color: var(--c-text-muted); }
.flow-menu {
  position: fixed;
  z-index: 60;
  min-width: 168px;
  padding: var(--sp-1);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.flow-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--rd-sm);
  color: var(--c-text-primary);
  text-decoration: none;
  font-size: var(--fs-button);
  white-space: nowrap;
}
.flow-menu__item:hover { background: var(--c-bg-field); }

.note-compose { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.note-compose__input {
  width: 100%;
  min-height: 96px;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  background: var(--c-bg-field);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  color: var(--c-text-primary);
  resize: vertical;
}
.note-compose__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); }
.note-compose__error { color: #d33; font-size: var(--fs-case-type); }

/* ---------- Просмотрщик документа (UC-D-3) ---------- */
.doc-preview { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.doc-preview__card {
  position: relative;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(92vw, 1000px);
  height: min(92vh, 900px);
  background: var(--c-bg-card);
  border-radius: var(--rd-lg);
  box-shadow: var(--c-shadow-card);
  overflow: hidden;
}
.doc-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-divider);
}
.doc-preview__title { font-weight: var(--fw-semibold); color: var(--c-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-preview__actions { display: flex; gap: var(--sp-3); flex-shrink: 0; }
.doc-preview__frame { flex: 1; width: 100%; border: 0; background: var(--c-bg-field); }
/* Состояние ошибки просмотрщика (E-D-3.3, JURHELP-129): файл недоступен в хранилище. */
.doc-preview__error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  text-align: center;
  background: var(--c-bg-field);
}
.doc-preview__error-icon { color: var(--c-text-danger, #d92d20); }
.doc-preview__error-title { font-weight: var(--fw-semibold); color: var(--c-text-primary); margin: 0; }
.doc-preview__error-text { color: var(--c-text-muted); margin: 0; max-width: 32ch; }

/* ---------- Модалка загрузки документов (UC-D-2) ---------- */
.doc-upload[hidden] { display: none; }
.doc-upload__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  text-align: center;
  border: 2px dashed var(--c-border-input);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  cursor: pointer;
}
.doc-upload__drop.is-drag { border-color: var(--c-accent, #69658e); background: #efeefb; }
.doc-upload__input { display: none; }
.doc-upload__drop-text { color: var(--c-text-primary); font-size: var(--fs-button); }
.doc-upload__drop-hint { color: var(--c-text-muted); font-size: var(--fs-case-type); }
.doc-upload__msg { margin-top: var(--sp-3); color: #e5484d; font-size: var(--fs-case-type); min-height: 1em; }
.doc-upload__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.doc-upload__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-bg-field);
  border-radius: var(--rd-md);
}
.doc-upload__item-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.doc-upload__title {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-button);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  background: var(--c-bg-card);
  color: var(--c-text-primary);
}
.doc-upload__meta { font-size: var(--fs-case-type); color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-upload__remove {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: none; border-radius: var(--rd-md);
  background: var(--c-bg-card); color: var(--c-text-muted);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.doc-upload__remove:hover { color: #e5484d; }

@media (max-width: 900px) {
  .app-shell__sidebar { display: none; }
  .app-shell__main { margin: var(--sp-4); }
  .app-home__head { padding-right: 0; }
  .case-view { grid-template-columns: 1fr; }
}

/* ============================================================
 * Задачи по делу (UC-T-1 список + форма создания, Figma 822:36625 / 807:22551)
 * ============================================================ */

/* --- Таблица задач (переиспользует .documents__table) --- */
.tasks__num { font-weight: var(--fw-semibold); color: var(--c-text-muted); white-space: nowrap; }
.tasks__title { font-weight: var(--fw-medium); }
.tasks__deadline { white-space: nowrap; }
/* JURHELP-148 #3: просроченный дедлайн — красным. Селектор со специфичностью
   выше `.documents__table tbody td { color: … }` (0,1,2), иначе цвет ячейки
   перебивал красный и дедлайн оставался чёрным/жирным (как в баг-репорте). */
.tasks__table td.tasks__deadline--overdue { color: var(--c-marker-red); font-weight: var(--fw-semibold); }

.tasks__badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--rd-md);
  font-size: var(--fs-case-type);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.tasks__badge--new { background: #ebebeb; color: #5a5a5a; }
.tasks__badge--in_progress { background: #ebf3fe; color: var(--c-marker-blue); }
.tasks__badge--paused { background: #fff6e6; color: var(--c-marker-orange); }
.tasks__badge--done { background: #f2faee; color: var(--c-marker-green); }
.tasks__badge--cancelled { background: #e4e4e4; color: #3a3a3a; }

.tasks__prio { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap; }
.tasks__prio-dot { width: var(--marker-size); height: var(--marker-size); border-radius: 50%; background: #b0b0b0; }
.tasks__prio--low .tasks__prio-dot { background: #b0b0b0; }
.tasks__prio--medium .tasks__prio-dot { background: var(--c-marker-blue); }
.tasks__prio--high .tasks__prio-dot { background: var(--c-marker-orange); }
.tasks__prio--critical .tasks__prio-dot { background: var(--c-marker-red); }

.tasks__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tasks__tag {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  color: var(--c-text-muted);
  font-size: var(--fs-case-type);
  white-space: nowrap;
}
.tasks__tag--more { background: transparent; color: var(--c-text-muted); padding-left: 0; }
/* UC-T-7 «по тегу» (JURHELP-147): кликабельный чип-ссылка фильтра. */
.tasks__tag--link { text-decoration: none; cursor: pointer; transition: background-color .12s, color .12s; }
.tasks__tag--link:hover { background: var(--c-bg-brand); color: #fff; }
/* активный фильтр по тегу над таблицей */
.tasks__active-tag { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.tasks__active-tag-label { font-size: var(--fs-case-type); color: var(--c-text-muted); }
.tasks__active-tag .tasks__tag { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 280px; }
.tasks__active-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks__active-tag-remove { display: inline-flex; align-items: center; color: var(--c-text-muted); cursor: pointer; }
.tasks__active-tag-remove:hover { color: var(--c-marker-red); }

/* Исполнитель — аватар + ФИО (UC-T-5, Figma 822:36769) */
.tasks__executor { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; max-width: 100%; }
.tasks__created { white-space: nowrap; color: var(--c-text-muted); }

/* JURHELP-148: длинные значения в таблице задач не должны ломать вёрстку —
   фикс-ширина колонок + обрезка многоточием (полное значение в title), как в
   списке пользователей (.admin-users__*, JURHELP-138). #1 название, #5 теги,
   #7/#8 исполнитель. */
.tasks__col-title { width: 28%; }
.tasks__title { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks__title-link {
  display: inline-block; max-width: 100%; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tasks__col-executor { max-width: 220px; overflow: hidden; }
.tasks__executor-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tasks__col-tags { max-width: 260px; }
/* display:inline-block обязателен: на inline-элементе (span по умолчанию)
   max-width и text-overflow:ellipsis игнорируются. В строке тег — flex-потомок
   .tasks__tags и блокифицируется, но не полагаемся на это (тег может оказаться
   вне flex) — задаём блочность явно. */
.tasks__tag { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* Колонка «Таймлайн» события (UC-T-5, ТЗ 6.3): иконка-часы + интервал, в одну
   строку (JURHELP-148 #6). */
.tasks__col-timeline { white-space: nowrap; color: var(--c-text-muted); }
.tasks__timeline { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.tasks__timeline-icon { flex: none; color: var(--c-text-muted); }

/* Бейдж статуса в строке как триггер дропдауна смены статуса (UC-T-4 из списка,
   JURHELP-148 #2): сброс нативной кнопки до вида пилюли-бейджа, но кликабельной.
   width/height:auto перекрывают геометрию .row-menu__trigger (32×32). */
.tasks__status-menu { display: inline-flex; }
button.tasks__status-trigger {
  width: auto; height: auto;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  border: none; font-family: inherit; font-size: inherit; cursor: pointer;
}
.tasks__status-trigger .case-space__status-chevron { width: 14px; height: 14px; }

/* Сортируемые заголовки колонок (UC-T-5, Figma Arrow_Down_Up) */
.tasks__sort {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: inherit; text-decoration: none; cursor: pointer;
}
.tasks__sort:hover { color: var(--c-text-blue); }
.tasks__sort-arrow { font-size: 11px; color: var(--c-text-muted); line-height: 1; }
.tasks__sort--active { color: var(--c-text-primary); }
.tasks__sort--active .tasks__sort-arrow { color: var(--c-text-blue); }

/* Поиск (UC-T-6) + панель фильтров (UC-T-7) над таблицей задач. Стиль —
   на токенах дизайн-системы, поле поиска наследует .documents__search. */
.tasks__toolbar-form { margin-bottom: var(--sp-4); }
.tasks__toolbar { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.tasks__search { flex: 1; max-width: 480px; }

.tasks__filters {
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  padding: 0 var(--sp-4);
}
.tasks__filters-summary {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) 0;
  font-size: var(--fs-button); font-weight: var(--fw-semibold);
  color: var(--c-text-primary); cursor: pointer; list-style: none;
}
.tasks__filters-summary::-webkit-details-marker { display: none; }
.tasks__filters-summary::before { content: "▸"; color: var(--c-text-muted); font-size: 11px; }
.tasks__filters[open] .tasks__filters-summary::before { content: "▾"; }
.tasks__filters-body {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  padding: var(--sp-3) 0 var(--sp-4);
  border-top: 1px solid var(--c-border-input);
}
.tasks__filter-group {
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 160px; max-width: 240px; margin: 0; padding: 0; border: 0;
}
.tasks__filter-legend {
  padding: 0; margin-bottom: var(--sp-1);
  font-size: var(--fs-case-type); font-weight: var(--fw-semibold); color: var(--c-text-muted);
}
.tasks__filter-check {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0; /* допускаем сжатие, чтобы длинная подпись клампилась многоточием */
  font-size: var(--fs-button); color: var(--c-text-primary); cursor: pointer;
}
.tasks__filter-check input { cursor: pointer; flex: none; /* чекбокс не сжимается */ }
/* JURHELP-149: длинные имена (исполнители) не должны ломать вёрстку дропдауна —
   обрезаем многоточием; полное имя доступно в title (тултип). */
.tasks__filter-check-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tasks__filters-actions {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
  margin-top: var(--sp-2); padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border-input);
}
.tasks__filters-count { margin-right: auto; font-size: var(--fs-case-type); color: var(--c-text-muted); }
.tasks__filters-reset { white-space: nowrap; }

/* --- Модалка «Создать задачу» (широкая, прокручиваемая) --- */
.task-create {
  max-width: 880px;
}
.task-create__section {
  margin: var(--sp-3) 0 0;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
}
/* .modal-form управляет высотой (flex:1) и прячет переполнение; тело задаёт
   отступы между секциями через .modal-body. Собственный gap не нужен. */
.task-create__form { display: flex; flex-direction: column; }
.task-create__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.task-create__grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.task-create__col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

.task-create__control {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-4);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  outline: none;
}
.task-create__control::placeholder { color: var(--c-text-muted); }
/* JURHELP-148 #7: длинное имя исполнителя/название дела не должно растягивать
   select за пределы поля — обрезаем выбранное значение многоточием. */
select.task-create__control { max-width: 100%; text-overflow: ellipsis; }
.task-create__control:focus { border-color: var(--c-accent); }
.task-create__control:disabled { color: var(--c-text-muted); cursor: not-allowed; }
.task-create__textarea { min-height: 120px; resize: vertical; }
.task-create__multi { padding: var(--sp-2); }

.task-create__notify { display: flex; gap: var(--sp-3); }
.task-create__notify-unit { max-width: 110px; }

/* Зона загрузки файлов (drag-drop). */
.task-create__dropzone {
  position: relative;
  border: 1px dashed var(--c-text-muted);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  padding: var(--sp-6);
  text-align: center;
}
.task-create__dropzone--over { border-color: var(--c-accent); background: #f0f0f7; }
.task-create__file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.task-create__dropzone-title { margin: 0; font-weight: var(--fw-semibold); color: var(--c-text-primary); }
.task-create__dropzone-hint { margin: var(--sp-2) 0 0; font-size: var(--fs-case-type); color: var(--c-text-muted); }
.task-create__file-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; text-align: left; }
.task-create__file-item { font-size: var(--fs-case-type); color: var(--c-text-primary); }

.task-create__docs { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.task-create__doc { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-button); }
/* JURHELP-184: длинное название документа не растягивает форму — обрезаем многоточием (полное в title). */
.task-create__doc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.task-create__ext { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.task-create__ext-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  font-size: var(--fs-case-type);
}
.task-create__ext-remove { border: none; background: none; cursor: pointer; color: var(--c-text-muted); font-size: 16px; line-height: 1; }
.task-create__ext-add { align-self: flex-start; }
.task-create__hint { font-size: var(--fs-case-type); color: var(--c-text-muted); }
.task-create__actions { justify-content: flex-end; }

/* Чип-мультиселект внутренних участников (Figma 807:23774). */
.task-create__ms { position: relative; }
.task-create__ms-body {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  box-sizing: border-box;
  min-height: 43px;
  padding: var(--sp-3);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  cursor: pointer;
}
.task-create__ms-body:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.task-create__ms-tags { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.task-create__ms-placeholder { color: var(--c-text-muted); font-size: var(--fs-button); font-weight: var(--fw-medium); }
.task-create__ms-chevron { flex: 0 0 auto; color: var(--c-text-primary); }
.task-create__ms-list {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 200px;
  overflow-y: auto;
  padding: var(--sp-2);
  background: var(--c-bg-card, #fff);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  box-shadow: var(--c-shadow-card);
}
.task-create__ms-list[hidden] { display: none; }
.task-create__ms-option {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: var(--sp-3);
  border: none;
  border-radius: var(--rd-sm);
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  /* JURHELP-153 #9: длинное ФИО в списке участников обрезаем многоточием
     (полное — в атрибуте title). */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-create__ms-option:hover { background: var(--c-bg-field); }
.task-create__ms-option[hidden] { display: none; }

/* Чип участника / тега (Figma 535:5371, 807:23813). */
.task-create__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 6px;
  border-radius: var(--rd-sm);
  background: var(--c-bg-secondary, #ebebeb);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  white-space: nowrap;
}
.task-create__chip--tag { background: var(--c-bg-field); border: 1px solid var(--c-border-input); }
/* JURHELP-153 #9/#10: длинное имя участника или тег не должны растягивать чип
   за пределы поля — обрезаем подпись чипа многоточием (полное — в title). */
.task-create__chip-label {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.task-create__chip-remove {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
  color: var(--c-text-primary);
  display: inline-flex;
  align-items: center;
}
.task-create__chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }

/* Внешние участники: поле-чипы + кнопка «Создать участника». */
.task-create__ext-row { display: flex; align-items: stretch; gap: var(--sp-3); }
.task-create__ext-field { flex: 1 1 auto; min-width: 0; cursor: default; }
.task-create__ext-add { flex: 0 0 auto; white-space: nowrap; }

/* Строки прикреплённых документов в правке (Figma 807:23786). */
.task-create__doc-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }
.task-create__doc-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
}
.task-create__doc-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  color: var(--c-accent, #ef4123);
}
.task-create__doc-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.task-create__doc-name { font-size: var(--fs-button); font-weight: var(--fw-semibold); color: var(--c-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-create__doc-size { font-size: 12px; font-weight: var(--fw-medium); color: var(--c-text-muted); }
.task-create__doc-remove {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
}

/* Мини-диалог «Создать участника» (поверх модалки). */
.task-ext-dialog {
  position: fixed;
  inset: 0;
  /* Выше .row-menu__list (z-index:1000, переносится в body): модальный диалог
     подтверждения смены статуса должен перекрывать выпадающий список, а не
     наоборот (JURHELP-148, замечание ревью). */
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-overlay);
}
/* Атрибут hidden должен победить авторский display:flex (иначе диалог всегда
 * виден и перекрывает форму). */
.task-ext-dialog[hidden] { display: none; }
.task-ext-dialog__box {
  width: calc(100% - 2 * var(--sp-6));
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--c-bg-card);
  border-radius: var(--rd-xl);
  box-shadow: var(--c-shadow-card);
}
.task-ext-dialog__title { margin: 0 0 var(--sp-2); font-size: 18px; font-weight: var(--fw-semibold); }
.task-ext-dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-2); }

@media (max-width: 720px) {
  .task-create__grid,
  .task-create__grid--3 { grid-template-columns: 1fr; }
}

/* ============================================================
 * Карточка задачи (UC-T-2 «Просмотр карточки», Figma 807:23188)
 * ============================================================ */
.task-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: var(--sp-8);
  align-items: start;
}

/* --- Ряд действий: сегмент-контрол вкладок + кнопка «Редактировать» (макет
   807:23282, items-start). Переиспользуем caseSpaceTabs, переопределяя его
   подчёркнутый стиль на сегмент-контрол (#f7f7f7 трек, активная — белая пилюля).
   Прочие страницы пространства используют caseSpaceTabs без этого override. --- */
.task-card__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
/* JURHELP-164 п.5: рамочный вид таб-бара стал базовым (.case-space__tabs) —
   отдельный оверрайд карточки задачи больше не нужен, удалён. */
.task-card__edit { white-space: nowrap; align-self: flex-start; }

/* --- Левая карточка «Info» --- */
.task-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-5h);
  background: var(--c-bg-card);
  border: 1px solid var(--c-divider);
  border-radius: var(--rd-xl);
  min-width: 0;
}
.task-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.task-card__back {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-section-title); font-weight: var(--fw-semibold);
  color: var(--c-text-muted); text-decoration: none;
}
.task-card__back:hover { color: var(--c-text-primary); }
.task-card__case-link {
  font-size: var(--fs-section-title); font-weight: var(--fw-semibold);
  color: var(--c-text-blue); text-decoration: none; white-space: nowrap;
}
.task-card__case-link:hover { text-decoration: underline; }

.task-card__num {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-divider); border-radius: var(--rd-md);
  background: var(--c-bg-field); color: var(--c-text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-case-type); font-weight: var(--fw-semibold);
  cursor: pointer;
}
.task-card__num:hover { color: var(--c-text-primary); }
.task-card__num--copied { color: var(--c-marker-green); border-color: var(--c-marker-green); }
.task-card__num-flash { color: var(--c-marker-green); }

.task-card__title {
  margin: 0; font-size: 20px; font-weight: var(--fw-semibold);
  color: var(--c-text-primary); line-height: 1.25; word-break: break-word;
}

.task-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.task-card__badges { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
/* JURHELP-153 (комм.): длинный номер дела суда на детали задачи не переносился
   (white-space:nowrap) и уходил за правый край строки-меты. Разрешаем перенос
   неразрывной строки — как у .case-space__case-number в панели статуса. */
.task-card__court { font-size: var(--fs-button); font-weight: var(--fw-medium); color: var(--c-text-special); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* Бейджи статуса/приоритета как в макете (807:23298/23302). Статус — кликабельный
   дропдаун смены (UC-T-4, chevron). Приоритет (JURHELP-175) — обычный индикатор
   без chevron: смена приоритета — через «Редактировать задачу» (некликабельную
   стрелку убрали). Геометрия переопределяет базовый .tasks__badge/.tasks__prio
   (цвета — из их модификаторов --<status>/--<priority>). */
.task-card__status {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--rd-sm);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  cursor: default;
}
.task-card__prio {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  cursor: default;
}
.task-card__status .case-space__status-chevron { width: 16px; height: 16px; }

/* Бейдж статуса как триггер дропдауна смены статуса (UC-T-4): сброс стилей
   нативной кнопки, чтобы выглядел как пилюля-бейдж, но был кликабелен. */
.task-card__status-menu { display: inline-flex; }
button.task-card__status {
  /* width/height:auto перекрывают фикс-геометрию .row-menu__trigger (32×32),
     иначе подпись статуса («Новая» и т.п.) обрезается до 32px (JURHELP-153). */
  width: auto; height: auto;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.task-card__status--static { cursor: default; }

.task-card__field { display: flex; flex-direction: column; gap: var(--sp-3); }
.task-card__label {
  font-size: var(--fs-section-title); font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
}
.task-card__desc {
  margin: 0; font-size: var(--fs-button); font-weight: var(--fw-medium); color: var(--c-text-primary);
  white-space: pre-wrap; word-break: break-word; line-height: 1.5;
}

/* Параметры — сетка 3 колонки с автозаполнением (макет: ряды по 3) */
.task-card__params {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-5); row-gap: var(--sp-6);
}
.task-card__param { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.task-card__value { font-size: var(--fs-button); font-weight: var(--fw-medium); color: var(--c-text-primary); word-break: break-word; }
.task-card__value--overdue { color: var(--c-marker-red); font-weight: var(--fw-semibold); }
.task-card__link { color: var(--c-text-blue); font-weight: var(--fw-medium); text-decoration: none; }
.task-card__link:hover { text-decoration: underline; }
.task-card__blocked { color: var(--c-text-muted); font-size: var(--fs-case-type); margin-left: var(--sp-1); }

/* Теги — кликабельные чипы-ссылки на фильтр UC-T-7 «по тегу» (JURHELP-147) */
.task-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.task-card__tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 7px;
  background: var(--c-bg-field); border: 1px solid var(--c-divider);
  border-radius: var(--rd-sm);
  font-size: var(--fs-button); font-weight: var(--fw-semibold); color: var(--c-text-primary);
  /* JURHELP-153 #17: длинный тег не должен выходить за карточку задачи. */
  max-width: 100%; min-width: 0;
}
/* JURHELP-147: чип — ссылка на отфильтрованный список (× убран). */
.task-card__tag--link { text-decoration: none; cursor: pointer; transition: background-color .12s, border-color .12s; }
.task-card__tag--link:hover { background: var(--c-bg-brand); border-color: var(--c-bg-brand); color: #fff; }
.task-card__tag--link:hover .task-card__tag-text { color: #fff; }
/* Текст тега обрезаем многоточием. */
.task-card__tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.task-card__icon { display: block; flex: none; }

/* --- Правые виджеты (Участники / Документы) --- */
.task-card__widgets { display: flex; flex-direction: column; gap: var(--sp-5); }
.task-card__widget {
  padding: var(--sp-5h);
  background: var(--c-bg-card);
  border: 1px solid var(--c-divider);
  border-radius: var(--rd-xl);
}
.task-card__widget-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.task-card__widget-title { margin: 0; font-size: 20px; font-weight: var(--fw-semibold); color: var(--c-text-primary); }
.task-card__more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border: none; border-radius: var(--rd-md);
  background: var(--c-bg-field); color: var(--c-text-muted); cursor: default;
}
.task-card__people { display: flex; flex-direction: column; gap: var(--sp-5); }
.task-card__people + .task-card__people { margin-top: var(--sp-6); }
.task-card__people-title { font-size: var(--fs-button); font-weight: var(--fw-semibold); color: var(--c-text-muted); }
.task-card__person { display: flex; align-items: center; gap: var(--sp-3); }
/* JURHELP-153 #16: длинное ФИО участника не должно выходить за пределы узкого
   виджета — переносим внутри (полное — в title). */
.task-card__person-name { flex: 1; min-width: 0; font-size: var(--fs-button); font-weight: var(--fw-medium); color: var(--c-text-primary); overflow-wrap: anywhere; word-break: break-word; }

.task-card__docs { display: flex; flex-direction: column; gap: var(--sp-3); }
.task-card__doc { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.task-card__doc-icon { display: block; flex: none; color: var(--c-text-muted); }
.task-card__doc-link { font-size: var(--fs-section-title); font-weight: var(--fw-medium); color: var(--c-text-primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-card__doc-link:hover { color: var(--c-text-blue); text-decoration: underline; }
.task-card__doc-text { font-size: var(--fs-section-title); font-weight: var(--fw-medium); color: var(--c-text-muted); }
.task-card__doc-gone { margin-left: var(--sp-2); font-size: var(--fs-case-type); color: var(--c-text-muted); }

/* UC-T-8/UC-T-9: управление ссылками и участниками задачи (кнопки на карточке + пикеры) */
.task-card__widget-actions { display: flex; gap: var(--sp-3); flex: none; }
.task-card__widget-add { flex: none; font-size: var(--fs-button); font-weight: var(--fw-medium); color: var(--c-text-blue); text-decoration: none; white-space: nowrap; }
.task-card__widget-add:hover { text-decoration: underline; }
.task-card__docs-empty { font-size: var(--fs-section-title); color: var(--c-text-muted); margin: 0; }
.task-card__doc-remove-form { flex: none; margin-left: auto; display: flex; }
.task-card__doc-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--rd-sm);
  background: transparent; color: var(--c-text-muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.task-card__doc-remove:hover { background: var(--c-bg-subtle, rgba(0, 0, 0, .05)); color: var(--c-text-danger, #d23); }
/* JURHELP-158 п.7: .modal-form/.modal-body фиксируют шапку и футер пикера,
   прокручивается список. Собственный gap/скролл задаёт .modal-body. */
.task-links__form { display: flex; flex-direction: column; }
.task-links__search { padding: var(--sp-5) var(--sp-6) 0; }
.task-links__list { display: flex; flex-direction: column; gap: var(--sp-1); }
.task-links__row { cursor: pointer; }
.task-links__empty { font-size: var(--fs-section-title); color: var(--c-text-muted); margin: 0; }

/* Кликабельные ссылки в строках списка задач (UC-T-2 шаг 1) */
.tasks__link { color: inherit; text-decoration: none; }
.tasks__link:hover { color: var(--c-text-blue); text-decoration: underline; }

@media (max-width: 900px) {
  .task-card { grid-template-columns: 1fr; }
  .task-card__params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .task-card__params { grid-template-columns: 1fr; }
}

/* ======================================================================
 * Календарь (UC-CAL-1, JURHELP-114). Месячная (835:14062/14369) и недельная
 * (835:14870) сетки + popover задачи. Цвета карточек — бледная палитра по
 * коду цвета дела (см. tokens.css --c-cal-*).
 * ==================================================================== */

/* --- тулбар: переключатель режимов + «+ Добавить задачу» --- */
.calendar__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-5);
}
.calendar__toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
}
.calendar__modes {
  display: inline-flex;
  background: var(--c-bg-field);
  border-radius: var(--rd-md);
  padding: 3px;
  gap: 2px;
}
.calendar__mode {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  text-decoration: none;
  line-height: 1;
}
.calendar__mode--active {
  background: var(--c-bg-card);
  color: var(--c-text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* --- карточка-контейнер календаря --- */
.calendar {
  background: var(--c-bg-card);
  border: 1px solid var(--c-divider);
  border-radius: var(--rd-xl);
  padding: var(--sp-5h);
  margin-top: var(--sp-5);
}
.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.calendar__period {
  font-size: 20px;
  font-weight: var(--fw-semibold);
  margin: 0;
}
.calendar__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.calendar__today {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
}
.calendar__today:hover { color: var(--c-text-primary); }
.calendar__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  color: var(--c-text-primary);
}
.calendar__nav-btn:hover { background: var(--c-bg-input); }
/* JURHELP-164 п.6: поле выбора даты — как datetime-local в форме задачи
   (.task-create__control): рамка, паддинг, скругление, фон-поле. Раньше нативный
   input выглядел «голым» и не вязался с соседними кнопками (репортёр: «сделать
   по аналогии с тем, как внутри задачи»). */
.calendar__datepicker {
  padding: 7px 12px;
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-md);
  background: var(--c-bg-field);
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--c-text-primary);
  outline: none;
}
.calendar__datepicker:focus { border-color: var(--c-accent); }
.calendar__error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.calendar__empty {
  color: var(--c-text-muted);
  font-size: 13px;
  margin: 0 0 var(--sp-4);
}

/* --- месячная сетка --- */
.cal-month {
  border-top: 1px solid var(--c-cal-grid);
  border-left: 1px solid var(--c-cal-grid);
  overflow: hidden;
  border-radius: var(--rd-md);
}
.cal-month__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-month__cell {
  position: relative;
  min-height: 120px;
  padding: 6px 6px 7px;
  border-right: 1px solid var(--c-cal-grid);
  border-bottom: 1px solid var(--c-cal-grid);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.cal-month__cell--out { background: var(--c-bg-field); }
.cal-month__cell--today { background: var(--c-cal-today); }
.cal-month__cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cal-month__daynum {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
}
.cal-month__daynum--weekend { color: var(--c-marker-red); }
.cal-month__weekday {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
}
.cal-month__tasks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* --- недельная часовая сетка --- */
/* Единый скролл-контейнер: вертикальный скролл — на .cal-week, а шапка дней
   «липкая» (sticky) сверху. Раньше скроллилось только тело (.cal-week__body),
   и его вертикальный скроллбар сужал колонки тела относительно шапки → линии
   дней шапки и сетки расходились (тем сильнее, чем правее день; JURHELP-160,
   замечание в превью). При общем скроллере скроллбар одинаково влияет на шапку
   и сетку — колонки совпадают при любой ширине скроллбара. */
.cal-week { display: flex; flex-direction: column; min-width: 0; max-height: 64vh; overflow-y: auto; }
.cal-week__head {
  display: grid;
  grid-template-columns: 55px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--c-cal-grid);
  position: sticky;
  top: 0;
  /* JURHELP-174: шапка дней должна перекрывать ВСЕ слои событий при скролле
     вверх, а не наоборот (события — под датами). Слои событий: resize 4,
     многодневные полосы .cal-week__bar 5, перетаскивание/resize 30. Значение
     40 выше их всех и ниже popover/модалок календаря (60+). Раньше было 2 —
     полосы (5) и перетаскиваемые карточки (30) наезжали на числа дат. */
  z-index: 40;
  background: var(--c-bg-card);
}
.cal-week__time-col { border-right: 1px solid var(--c-cal-grid); }
.cal-week__dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 12px;
  border-right: 1px solid var(--c-cal-grid);
}
.cal-week__daynum {
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
}
.cal-week__daynum--weekend { color: var(--c-marker-red); }
.cal-week__dayhead--today .cal-week__daynum { color: var(--c-bg-brand); }
.cal-week__weekday { font-size: 12px; font-weight: var(--fw-semibold); color: var(--c-text-muted); }
.cal-week__body {
  display: grid;
  grid-template-columns: 55px 1fr;
}
.cal-week__times { position: relative; }
.cal-week__time {
  height: var(--cal-hour);
  font-size: 11px;
  color: var(--c-text-muted);
  text-align: right;
  padding-right: 8px;
  box-sizing: border-box;
}
.cal-week__time span { display: block; transform: translateY(-6px); }
.cal-week__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  position: relative;
}
.cal-week__col {
  position: relative;
  height: calc(24 * var(--cal-hour));
  border-right: 1px solid var(--c-cal-grid);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--cal-hour) - 1px),
    var(--c-divider) calc(var(--cal-hour) - 1px),
    var(--c-divider) var(--cal-hour)
  );
}
.cal-week__col--today { background-color: rgba(125, 199, 191, 0.07); }
.cal-week__block { position: absolute; padding: 0 2px; box-sizing: border-box; min-height: 16px; }
/* JURHELP-114: аватар/иконки (.cal-task__meta) НЕ переносятся на новую строку и не
   обрезаются нижней границей карточки. flex-wrap:nowrap держит заголовок и аватар
   на одной flex-строке (аватар — в правом-верхнем углу, align-items:flex-start);
   длинный заголовок переносится/клампится ВНУТРИ себя (line-clamp), не выталкивая
   аватар вниз. Раньше flex-wrap:wrap уводил аватар под заголовок → половина срезалась. */
.cal-week__block .cal-task {
  height: 100%;
  align-items: flex-start;
  flex-wrap: nowrap;
}
/* Заголовок — В ОДНУ строку с «…» (наследует базовый .cal-task__title). Многостроч-
   ный перенос в коротких (получасовых) карточках срезал вторую строку по высоте
   (замечание пользователя) — поэтому без wrap: одна строка одинаково чисто
   обрезается в карточке любой высоты. Полное название — в tooltip/popover. */
.cal-week__block .cal-task__title { align-self: flex-start; }
/* Аватар/иконки — фиксированы по ширине, не сжимаются и липнут к верху карточки. */
.cal-week__block .cal-task__meta { flex: 0 0 auto; align-self: flex-start; }
/* A1: курсор-захват на перетаскиваемых карточках (не архивных) режима «Неделя». */
.cal-week__block .cal-task:not([data-cal-readonly="true"]) { cursor: grab; }
.cal-week__block--dragging { z-index: 30; opacity: 0.85; }
.cal-week__block--dragging .cal-task { cursor: grabbing; }
.cal-week__block--dragging, .cal-week__block--resizing { user-select: none; }
.cal-week__block--resizing { z-index: 30; }
/* A2: невидимые ручки resize верхней/нижней грани интервальной карточки. */
.cal-week__resize {
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  cursor: ns-resize;
  z-index: 4;
  touch-action: none;
}
.cal-week__resize--top { top: -1px; }
.cal-week__resize--bottom { bottom: -1px; }

/* JURHELP-114 п.2: горизонтальная полоса многодневной задачи поверх 7 столбцов
   (left/width — по дням, top — по времени старта). Карточка внутри использует
   дефолтную горизонтальную раскладку .cal-task (title с «…», аватар справа) —
   оверрайды .cal-week__block (clamp в 3 строки) к полосе не применяются. */
.cal-week__bar { position: absolute; padding: 0 2px; box-sizing: border-box; z-index: 5; min-height: 16px; }
.cal-week__bar .cal-task { height: 100%; }

/* --- карточка задачи на сетке --- */
.cal-task {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: var(--rd-sm);
  font-size: 11px;
  line-height: 1.3;
  color: var(--c-text-primary);
  text-decoration: none;
  background: var(--c-cal-none);
  min-width: 0;
  overflow: hidden;
}
.cal-task:hover { filter: brightness(0.97); }
.cal-task__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-task__meta { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.cal-task__icon { font-size: 10px; line-height: 1; flex: 0 0 auto; }
.cal-task__icon--done { color: var(--c-marker-green); font-weight: 700; }
.cal-task__avatar { display: inline-flex; flex: 0 0 auto; }
.cal-task__avatar .avatar2 { width: 16px; height: 16px; font-size: 8px; }
.cal-task__avatar--blocked .avatar2 { box-shadow: 0 0 0 1.5px #b0b0b0; filter: grayscale(1); }

/* цвет фона по делу */
.cal-task--red { background: var(--c-cal-red); }
.cal-task--amber { background: var(--c-cal-amber); }
.cal-task--mint { background: var(--c-cal-mint); }
.cal-task--blue { background: var(--c-cal-blue); }
.cal-task--violet { background: var(--c-cal-violet); }
.cal-task--pink { background: var(--c-cal-pink); }
.cal-task--teal { background: var(--c-cal-teal); }
.cal-task--slate { background: var(--c-cal-slate); }
.cal-task--none { background: var(--c-cal-none); }

/* состояния */
.cal-task--done, .cal-task--cancelled { opacity: 0.6; }
.cal-task--cancelled .cal-task__title { text-decoration: line-through; }
.cal-task--overdue { box-shadow: inset 0 0 0 1.5px var(--c-marker-red); }
.cal-task--archived { opacity: 0.75; }

/* --- popover задачи --- */
.cal-popover {
  position: fixed;
  z-index: 60;
  /* JURHELP-153 п.14: расширено на 50% (было 380px) — ряд кнопок
     «Действия/Редактировать/Открыть» встаёт в одну строку без переноса и
     без паразитного горизонтального скролла (решение команды в трекере). */
  width: 570px;
  max-width: calc(100vw - 16px);
  background: var(--c-bg-card);
  border: 1px solid var(--c-divider);
  border-radius: var(--rd-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: var(--sp-5);
  /* JURHELP-153 п.14: при длинном контенте popover не должен уходить за экран —
     ограничиваем высотой вьюпорта и даём вертикальную прокрутку (значения
     дополнительно клампятся ниже, полный текст — в title/в карточке).
     overflow-x:hidden — иначе одиночный overflow-y превращает overflow-x в auto
     и появляется паразитный горизонтальный скролл (ревью). */
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden;
}
.cal-popover__close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--c-text-muted);
  cursor: pointer;
}
.cal-popover__num { font-size: 12px; color: var(--c-text-muted); margin-bottom: 2px; }
/* JURHELP-153 #14: длинные название/исполнитель/место/дело переносятся внутри
   popover фикс. ширины (570px), а не выходят за его пределы. */
.cal-popover__title { font-size: 15px; font-weight: var(--fw-semibold); margin: 0 24px 8px 0; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cal-popover__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cal-popover__badge {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 3px 8px;
  border-radius: var(--rd-sm);
  background: var(--c-bg-field);
  color: var(--c-text-muted);
}
.cal-popover__badge.badge-in_progress { background: var(--c-cal-blue); color: var(--c-marker-blue); }
.cal-popover__badge.badge-paused { background: var(--c-cal-amber); color: var(--c-marker-orange); }
.cal-popover__badge.badge-done { background: var(--c-cal-mint); color: var(--c-marker-green); }
.cal-popover__badge.badge-cancelled { background: var(--c-bg-input); color: var(--c-text-muted); }
.cal-popover__row { display: flex; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.cal-popover__label { color: var(--c-text-muted); flex: 0 0 84px; }
.cal-popover__value { color: var(--c-text-primary); min-width: 0; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cal-popover__case { color: var(--c-text-blue); text-decoration: none; }
.cal-popover__case:hover { text-decoration: underline; }
.cal-popover__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
/* JURHELP-158 п.8: кнопки popover компактнее — крупные .btn (14px, паддинг 14px)
   визуально не вязались с мелким 13px-контентом карточки. */
.cal-popover__actions .btn { padding: 7px var(--sp-4); font-size: 13px; border-radius: var(--rd-sm); }
.cal-popover__video { color: var(--c-text-blue); text-decoration: none; font-size: 13px; font-weight: var(--fw-semibold); }

@media (max-width: 900px) {
  .calendar { overflow-x: auto; }
  .cal-month__row { min-width: 760px; }
  .cal-week__head, .cal-week__body { min-width: 760px; }
}

/* UC-CAL-2: подсказка «нет активных дел» в селекторе «Дело» формы создания. */
.task-create__no-cases {
  margin: 0;
  font-size: 13px;
  color: var(--c-text-muted);
}

/* UC-CAL-3: inline-правка названия в popover + toast отката. */
.cal-popover__title { cursor: text; }
.cal-popover__title-input {
  width: 100%;
  margin: 0 0 8px;
  padding: 4px 8px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  border: 1px solid var(--c-border-input);
  border-radius: var(--rd-sm);
  box-sizing: border-box;
}
.cal-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 80;
  max-width: 90vw;
  padding: 10px 16px;
  background: #2b2b2b;
  color: #fff;
  font-size: 13px;
  border-radius: var(--rd-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cal-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* UC-CAL-5: toast c повтором загрузки периода (сетевой сбой навигации). */
.cal-toast--retry { display: flex; align-items: center; gap: 12px; }
.cal-toast__action {
  flex: none;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--rd-sm);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.cal-toast__action:hover { background: rgba(255, 255, 255, 0.12); }

/* UC-CAL-4: меню «Действия» (смена статуса) в popover + диалоги подтверждения. */
.cal-popover__status-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-divider);
}
.cal-popover__status-item {
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--rd-sm);
  font-size: 13px;
  color: var(--c-text-primary);
  cursor: pointer;
}
.cal-popover__status-item:hover { background: var(--c-bg-field); }
.cal-popover__status-item--danger { color: var(--c-marker-red); }

.cal-dialog {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-dialog__backdrop { position: absolute; inset: 0; background: var(--c-overlay); }
.cal-dialog__card {
  position: relative;
  z-index: 1;
  width: 420px;
  max-width: calc(100vw - 32px);
  background: var(--c-bg-card);
  border-radius: var(--rd-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: var(--sp-6);
}
.cal-dialog__title { font-size: 18px; font-weight: var(--fw-semibold); margin: 0 0 var(--sp-4); }
.cal-dialog__text { font-size: 14px; color: var(--c-text-primary); margin: 0 0 var(--sp-4); }
.cal-dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-4); margin-top: var(--sp-5); }

/* ==========================================================================
   JURHELP-169: размеры material-иконок (go-icons/material, вариант Rounded).
   Компоненты material жёстко задают width/height=24 атрибутом, а дублирующий
   атрибут в HTML игнорируется — поэтому размер фиксируем в CSS. Заливка идёт
   через fill=currentColor (передаётся в атрибутах компонента) + цвет из класса.
   ========================================================================== */
.app-shell__cases-chevron,
.case-card__archived-icon,
.login-form__clear-icon,
.pwd-rule__icon,
.task-create__ms-chevron,
.task-card__icon { width: 16px; height: 16px; }
/* Пункты меню сайдбара — крупнее (JURHELP-169 follow-up: 16px читались мелко). */
.app-shell__icon { width: 20px; height: 20px; }
.app-home__search-icon,
.login-form__eye-icon { width: 18px; height: 18px; }
.auth-toast__icon,
.task-card__doc-icon,
.task-create__doc-icon,
.calendar__nav-icon { width: 20px; height: 20px; }
.doc-preview__error-icon { width: 48px; height: 48px; }
.tasks__timeline-icon { width: 14px; height: 14px; }
/* Глифы, заменённые на material внутри ссылок/кнопок — размер по вложенному svg. */
.cal-task__icon-svg { width: 12px; height: 12px; }
.cal-popover__close-icon { width: 18px; height: 18px; }
.case-space__flow-edit svg,
.flow-step__action svg,
.case-create__close svg { width: 18px; height: 18px; }
.case-stepper__add svg,
.note-add-btn svg { width: 20px; height: 20px; }
.note-card__action svg,
.task-card__doc-remove svg,
.task-create__chip-remove svg,
.task-create__doc-remove svg { width: 16px; height: 16px; vertical-align: middle; }
.case-modal__close svg { width: 20px; height: 20px; vertical-align: middle; }

/* ---------------- Раздел «Справочники» (движение дела) ---------------- */

/* Ряд кнопок тулбара (Импорт + Добавить): flex, чтобы высоты совпадали. */
.admin-users__toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Кнопка с иконкой (Импорт): иконка + подпись в ряд. Иконка ≤ высоты строки
   текста (14px→~17px), чтобы кнопка не становилась выше соседних. */
.btn--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* Колонки таблицы справочника. «Этап» — самая широкая, с переносом текста
   (длинные формулировки этапов должны читаться целиком, не обрезаться).
   width:100% в table-layout:auto заставляет колонку забрать всё свободное
   место, остальные ужимаются под контент. */
.dict-col--stage {
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: none;
}

/* Числовые колонки «Порядок группы»/«Порядок» — минимальная ширина под
   содержимое (width:1% + nowrap = «сжать до контента» в auto-раскладке). */
.dict-col--num {
  width: 1%;
  white-space: nowrap;
}

/* Колонка «Группа» — 20% ширины таблицы, но не уже 250px, с переносом
   (длинные названия групп должны читаться целиком, а не обрезаться). */
.dict-col--group {
  width: 20%;
  min-width: 250px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Кастомный combobox «Группа» в форме: инпут + выпадающий список, который
   всегда показывает все группы (без фильтрации по вводу). */
.dict-combo {
  position: relative;
  width: 100%;
}
/* Инпут комбобокса лежит в .dict-combo (position:relative, не flex),
   поэтому flex:1 из .documents__search не растягивает его — задаём ширину явно,
   чтобы поле «Группа» совпадало по ширине с остальными полями формы. */
.dict-combo__input {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.dict-combo__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border-input);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.dict-combo__option {
  padding: 8px 12px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dict-combo__option:hover {
  background: var(--c-hover, #f2f2f2);
}

/* Стилизованный select категории (панель поиска + модалка). Рамка + свой
   треугольник-стрелка вместо нативного (единый вид на всех платформах). */
.dict-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--c-border-input);
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23787878' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
  max-width: 100%;
  text-overflow: ellipsis;
}
.dict-select:focus {
  border-color: var(--c-accent);
}

/* Иконочные действия таблицы (редактировать/удалить). */
.dict-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dict-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rd-md);
  color: var(--c-text-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.dict-actions__btn:hover {
  background: var(--c-bg-input);
}
.dict-actions__btn--danger {
  color: #c0392b;
}
.dict-actions__btn--danger:hover {
  background: #ffe6e1;
}
.dict-actions__icon {
  width: 18px;
  height: 18px;
}

/* Отчёт об ошибках импорта CSV. */
.dict-import__errors {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-5);
  font-size: 13px;
  color: var(--c-text-primary);
  max-height: 260px;
  overflow-y: auto;
}
.dict-import__errors li {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

/* Сводка удаляемой строки в модалке подтверждения. */
.dict-delete__summary {
  margin: var(--sp-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.dict-delete__row {
  display: flex;
  gap: var(--sp-3);
  min-width: 0;
}
.dict-delete__row dt {
  flex: 0 0 96px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-section);
  text-transform: uppercase;
  letter-spacing: var(--ls-section-title);
}
.dict-delete__row dd {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  color: var(--c-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}