/* ============================================================
   ОБЩИЙ СЛОЙ ИНТЕРФЕЙСА — сюда пишем всё новое.

   styles.css остаётся замороженным: это исходный монолит, его
   правки задевают слишком много разом. Все новые правила и
   исправления идут в этот файл, он грузится последним и
   перекрывает частные стили разделов.

   Порядок работы:
   1. Берём значение из набора ниже, а не придумываем своё.
      Нужного значения нет — сначала добавляем его в набор,
      потом пользуемся. Так набор остаётся единственным местом,
      где эти числа вообще существуют.
   2. Радиус, отступ и цвет состояния пишем токеном:
      border-radius: var(--r-card), а не 14px.
   3. Строку списка и плашку состояния не собираем заново —
      берём готовые .ui-row и .ui-state в конце файла.
   4. Любая правка этого файла требует поднять номер в
      index.html: ui-v1.css?v=NN. Иначе браузер отдаст старую.

   Почему это понадобилось: на 28.08.2026 в проекте было
   37 разных значений border-radius, 47 значений gap и
   418 цветов, из них 94 оттенка бордового. Разнобой брался
   не из вкуса, а из того, что каждому новому разделу
   приходилось изобретать числа заново.
   ============================================================ */

:root {
  /* --- Радиусы. Один на уровень вложенности, а не на элемент --- */
  --r-hair: 4px;      /* засечки, полоски состояния, мелкие метки */
  --r-chip: 8px;      /* теги, плашки, кнопки внутри строки */
  --r-control: 10px;  /* поля ввода, выпадающие списки, кнопки */
  --r-card: 14px;     /* карточки, панели фильтров */
  --r-panel: 18px;    /* крупные блоки и боковые панели */
  --r-modal: 22px;    /* диалоговые окна */
  --r-pill: 999px;    /* статусы-таблетки */
  --r-round: 50%;     /* аватары и точки состояния */

  /* --- Отступы. Шаг сетки, промежуточных значений не заводим --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* --- Цвета состояния. Означают только состояние.
         Принадлежность и действие остаются за фирменным бордовым --- */
  --state-ok: #0f7a5f;
  --state-ok-bg: #e4f6ef;
  --state-warn: #96660d;
  --state-warn-bg: #fdf3e0;
  --state-crit: #b02a3d;
  --state-crit-bg: #fdeaed;
  --state-info: #1a6fb5;
  --state-info-bg: #e8f2fc;
  --state-idle: #6b7a93;
  --state-idle-bg: #eef2f7;

  /* --- Строка списка. Одна плотность на весь портал --- */
  --row-pad-y: 10px;
  --row-gap: 10px;
  --row-title: 13px;
  --row-meta: 11px;
  --row-dot: 8px;
}

[data-theme=dark] {
  --state-ok: #4cbf9c;
  --state-ok-bg: rgba(76, 191, 156, .14);
  --state-warn: #d8a33f;
  --state-warn-bg: rgba(216, 163, 63, .14);
  --state-crit: #e0748a;
  --state-crit-bg: rgba(224, 116, 138, .14);
  --state-info: #6ab0ee;
  --state-info-bg: rgba(106, 176, 238, .14);
  --state-idle: #8b9ab3;
  --state-idle-bg: rgba(139, 154, 179, .14);
}

/* ============================================================
   ЕДИНЫЙ СЛОЙ ИНТЕРФЕЙСА
   Грузится последним, поэтому перекрывает частные правила разделов,
   не требуя их переписывания.

   Панели фильтров разошлись не сетками, а «оправой»: у Задач один
   радиус и отступ, у АХЧ другой, у Ссылок третий, у Графика вдобавок
   градиентная подложка. Сетки колонок у каждой страницы настроены под
   своё содержимое и остаются как есть — здесь только оправа,
   типографика подписей и сами органы управления.
   ============================================================ */

.list-filter-panel,
.maintenance-filters,
.links-filter-bar,
.schedule-final-row,
.calendar-toolbar {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-card);
  box-shadow: 0 10px 26px rgba(42, 65, 103, .06);
}

/* Подпись поля: одинаковая всюду, независимо от того, обёрнута она
   в <span> (Задачи, Ссылки) или лежит текстом прямо в <label> (АХЧ). */
.list-filter-panel label,
.maintenance-filters label,
.links-filter-bar label,
.schedule-final-row label,
.schedule-final-row p {
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: none;
}
.list-filter-panel label > span,
.links-filter-bar label > span {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
}

/* Орган управления: одна высота, радиус и рамка. */
.list-filter-panel label > select,
.list-filter-panel label > input,
.maintenance-filters label > select,
.maintenance-filters label > input,
.links-filter-bar label > select,
.links-filter-bar label > input,
.schedule-final-row label > select,
.schedule-final-row select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

/* Кнопка сброса — тихая, чтобы не спорить с основной. */
.list-filter-panel .reset-filters,
.links-filter-bar .reset-filters {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-chip);
  font-size: 11.5px;
}

/* Строка настроек списка под фильтрами. */
.list-toolbar {
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.list-toolbar label { font-size: 9.5px; font-weight: 700; color: var(--muted); }
.list-toolbar select { min-height: 32px; border-radius: var(--r-chip); font-size: 12px; }

/* Плитки-счётчики. */
.summary-strip { gap: 8px; }

@media (max-width: 720px) {
  .list-filter-panel,
  .maintenance-filters,
  .links-filter-bar,
  .schedule-final-row,
  .calendar-toolbar { padding: 11px 12px; border-radius: var(--r-card); }
  .list-filter-panel label > select,
  .list-filter-panel label > input,
  .maintenance-filters label > select,
  .maintenance-filters label > input,
  .links-filter-bar label > select,
  .links-filter-bar label > input { min-height: 42px; font-size: 13px; }
}

/* Ссылки задают панель селектором из двух классов и местами с !important,
   поэтому общее правило выше их не перебивало. */
.useful-links-page .links-filter-bar {
  padding: 13px 15px;
  border-radius: var(--r-card);
  box-shadow: 0 10px 26px rgba(42, 65, 103, .06);
}
.useful-links-page .links-filter-bar label > select,
.useful-links-page .links-filter-bar label > input,
.useful-links-page .links-filter-bar select,
.useful-links-page .links-filter-bar input {
  min-height: 34px;
  border-radius: var(--r-chip);
  font-size: 12px;
}
@media (max-width: 720px) {
  .useful-links-page .links-filter-bar { padding: 11px 12px !important; border-radius: var(--r-card); }
  .useful-links-page .links-filter-bar label > select,
  .useful-links-page .links-filter-bar label > input,
  .useful-links-page .links-filter-bar select,
  .useful-links-page .links-filter-bar input { min-height: 42px; font-size: 13px; }
}

/* ── Цвет центра ────────────────────────────────────────────────────
   Плашка получает цвет переменной --center-color, поэтому оформление
   описано один раз и работает всюду, где центр показан плашкой. */
.category-pill[style*="--center-color"],
.employee-center-chip[style*="--center-color"],
.profile-center-pill[style*="--center-color"] {
  background: color-mix(in srgb, var(--center-color) 14%, transparent);
  color: var(--center-color);
  border: 1px solid color-mix(in srgb, var(--center-color) 30%, transparent);
}
[data-theme=dark] .category-pill[style*="--center-color"],
[data-theme=dark] .employee-center-chip[style*="--center-color"],
[data-theme=dark] .profile-center-pill[style*="--center-color"] {
  background: color-mix(in srgb, var(--center-color) 24%, transparent);
  color: color-mix(in srgb, var(--center-color) 55%, #ffffff);
  border-color: color-mix(in srgb, var(--center-color) 42%, transparent);
}

/* Кружок цвета в списке центров администрирования. */
.center-color-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: var(--r-round);
  margin-right: 7px; background: var(--center-color); vertical-align: baseline;
}

/* Выбор цвета: радиокнопки, оформленные как образцы. */
.center-color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.center-color-swatch { display: inline-flex; cursor: pointer; padding: 0; }
.center-color-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.center-color-swatch i {
  display: block; width: 26px; height: 26px; border-radius: var(--r-chip);
  background: var(--center-color); box-shadow: 0 0 0 1px rgba(24, 45, 72, .12) inset;
  transition: transform .12s, box-shadow .12s;
}
.center-color-swatch input:checked + i {
  box-shadow: 0 0 0 2px var(--panel) inset, 0 0 0 2px var(--center-color);
  transform: scale(1.08);
}
.center-color-swatch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Полоска над карточками Главной ─────────────────────────────────
   Одного бордового цвета: разноцветные полоски вернули бы пестроту,
   которую мы убрали, и ничего бы при этом не сообщали. */
.home-v2-card { position: relative; overflow: hidden; }
.home-v2-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent); opacity: .9;
}

/* Плашка центра в расписании автобусов. Раньше цвет задавался жёсткой
   развилкой на два центра, теперь приходит из настроек центра. */
.bus-center-badge[style*="--center-color"] {
  background: color-mix(in srgb, var(--center-color) 14%, transparent);
  color: var(--center-color);
  border: 1px solid color-mix(in srgb, var(--center-color) 30%, transparent);
}
[data-theme=dark] .bus-center-badge[style*="--center-color"] {
  background: color-mix(in srgb, var(--center-color) 24%, transparent);
  color: color-mix(in srgb, var(--center-color) 55%, #ffffff);
  border-color: color-mix(in srgb, var(--center-color) 42%, transparent);
}

/* Заголовок карточки, у которого справа не одна кнопка, а набор контролов:
   выбор центра рядом с «Добавить». Без этого select уезжает под кнопку. */
.card-title-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.card-title-actions .primary { white-space: nowrap; }

.inline-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.inline-select select {
  height: 34px;
  padding: 0 9px;
  border-radius: var(--r-chip);
  font-weight: 700;
  color: var(--text);
}

/* Поясняющая строка в диалоге: объясняет последствия до того, как нажали
   «Добавить», а не после. */
.dialog-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .card-title-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* Плашка центра. Цвет приходит из справочника центров переменной
   --center-color; без неё плашка остаётся нейтральной, а не ломается. */
.center-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: var(--r-chip);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(120, 134, 153, .12);
  color: var(--muted);
  border: 1px solid transparent;
}
.center-chip[style*="--center-color"] {
  background: color-mix(in srgb, var(--center-color) 14%, transparent);
  color: var(--center-color);
  border-color: color-mix(in srgb, var(--center-color) 30%, transparent);
}
[data-theme=dark] .center-chip[style*="--center-color"] {
  background: color-mix(in srgb, var(--center-color) 24%, transparent);
  color: color-mix(in srgb, var(--center-color) 55%, #ffffff);
  border-color: color-mix(in srgb, var(--center-color) 42%, transparent);
}

/* Ячейка центра теперь содержит несколько плашек, а не одну строку. */
.row-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* Шапка АХЧ-заявки: центр встал рядом со статусом, им нужен общий контейнер,
   иначе на узком экране они разъезжаются по разным строкам. */
.maintenance-row-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ============================================================
   ТУЛБАРЫ: ОСТАВШИЕСЯ РАЗДЕЛЫ

   Единый блок переключателей в styles.css охватил девять семей, но
   мимо прошли две: переключатель центров (График, ФМБА) и админ-вкладки
   Ссылок. Плюс у ФМБА и Базы знаний собственные размеры полей — 48px и
   радиус 12–14px против общих 34px и 9px. Здесь это сводится к одному
   виду. Файл грузится последним, поэтому переписывать разделы не нужно.
   ============================================================ */

/* ---- переключатели: две последние семьи ---- */
.schedule-desktop-centers,
.link-admin-tabs,
.fmba-mobile-center-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  grid-auto-flow: row;
  grid-template-columns: none;
  width: auto;
  min-width: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--tb-track);
  box-shadow: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.schedule-desktop-centers::-webkit-scrollbar,
.link-admin-tabs::-webkit-scrollbar,
.fmba-mobile-center-switch::-webkit-scrollbar { display: none; }

.schedule-desktop-centers > button,
.link-admin-tabs > button,
.fmba-mobile-center-switch > button {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-right: 0;
  border-radius: var(--r-chip);
  background: transparent;
  box-shadow: none;
  color: var(--tb-ink);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.schedule-desktop-centers > button:hover,
.link-admin-tabs > button:hover,
.fmba-mobile-center-switch > button:hover { background: transparent; color: var(--accent); }

.schedule-desktop-centers > button.selected,
.link-admin-tabs > button.selected,
.fmba-mobile-center-switch > button.selected {
  background: var(--surface-card);
  color: var(--accent);
  font-weight: 800;
  border: 0;
  box-shadow: 0 1px 3px rgba(24, 45, 72, .14);
}
[data-theme=dark] .schedule-desktop-centers > button.selected,
[data-theme=dark] .link-admin-tabs > button.selected,
[data-theme=dark] .fmba-mobile-center-switch > button.selected {
  background: var(--surface-card);
  color: #e58ba6;
}
/* У Ссылок активная вкладка подчёркивалась полоской снизу — с таблеткой
   это два разных указателя на одно и то же. */
.link-admin-tabs > button.selected::after { content: none; display: none; }

.schedule-desktop-centers > button:focus-visible,
.link-admin-tabs > button:focus-visible,
.fmba-mobile-center-switch > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ФМБА переопределял переключатель центров внутри своей строки: там кнопки
   становились отдельными таблетками с бордовым градиентом. */
@media (min-width: 721px) {
  .fmba-desktop-row1 .schedule-desktop-centers {
    display: inline-flex;
    grid-template-columns: none;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    background: var(--tb-track);
  }
  .fmba-desktop-row1 .schedule-desktop-centers button {
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: var(--r-chip);
    background: transparent;
    box-shadow: none;
    font-size: 12px;
  }
  .fmba-desktop-row1 .schedule-desktop-centers button.selected {
    background: var(--surface-card);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(24, 45, 72, .14);
  }
}

/* ---- ФМБА: поля панели ---- */
.fmba-course-select,
.fmba-search-box input {
  min-height: 34px;
  border-radius: var(--r-chip);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.fmba-desktop-row2 > .outline.slim {
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--r-chip);
  font-size: 11.5px;
}
@media (min-width: 721px) {
  .fmba-course-select { min-height: 34px; padding-left: 10px; font-size: 12px; }
  .fmba-search-box input { min-height: 34px; border-radius: var(--r-chip); }
  .fmba-desktop-row2 > .outline.slim { min-height: 34px; padding: 0 14px; border-radius: var(--r-chip); }
}
/* Иконка внутри поиска рассчитана на поле в 48px. */
.fmba-desktop-search .fmba-field-icon { top: 50%; transform: translateY(-50%); }

/* ---- База знаний: панель фильтров осталась обычной карточкой ---- */
.document-filter-panel {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-card);
  box-shadow: 0 10px 26px rgba(42, 65, 103, .06);
}
@media (min-width: 721px) {
  /* Подписи на мобильном намеренно скрыты через font-size:0, поэтому
     типографику задаём только на широком экране. */
  .document-filter-panel label {
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted);
  }
  .document-filter-panel label > select,
  .document-filter-panel label > input {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-chip);
    background: var(--panel);
    color: var(--text);
    font-size: 12px;
  }
}
@media (max-width: 720px) {
  /* Раздел задаёт отступ через !important, поэтому и здесь без него никак. */
  .documents-page .document-filter-panel { padding: 11px 12px !important; border-radius: var(--r-card); }
}

/* ---- Календарь: кнопки внутри тулбара были на 4px выше общих ---- */
.calendar-toolbar-btn,
.calendar-toolbar-nav {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-chip);
  font-size: 12px;
}
.calendar-toolbar select,
.calendar-toolbar label > select,
.calendar-toolbar label > input {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

/* ---- Плитки-счётчики: радиус согласован с оправой панели ---- */
.summary-card { border-radius: var(--r-card); }

@media (max-width: 720px) {
  .schedule-desktop-centers > button,
  .link-admin-tabs > button,
  .fmba-mobile-center-switch > button { min-height: 40px; padding: 0 14px; font-size: 12.5px; }
  .fmba-course-select,
  .fmba-search-box input,
  .calendar-toolbar-btn,
  .calendar-toolbar-nav { min-height: 42px; font-size: 13px; }
  .document-filter-panel label > select,
  .document-filter-panel label > input { min-height: 42px; font-size: 13px; }
}

/* Панель Базы знаний живёт в узкой колонке рядом с правой врезкой, а её
   сетка была расписана по ширине окна: пятая колонка и кнопка сброса
   уезжали за край. Переносим по фактическому месту, а не по медиазапросу.
   !important — потому что раздел задаёт колонки так же. */
.document-filter-panel {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
  align-items: end;
}
.document-filter-panel > label:first-child { grid-column: 1 / -1; }
.document-filter-panel > button { grid-column: 1 / -1; justify-self: start; }

/* Строка страницы, в которой остались только действия: без заголовка
   space-between прижимал бы кнопку влево. */
.page-head.is-actions-only { justify-content: flex-end; }

/* ============================================================
   ЧИТАЕМОСТЬ НА ЛЮБОМ ЭКРАНЕ

   Три разные причины давали один и тот же результат — часть страницы
   не видно:
   1) высота посчитана вычитанием из 100vh «на глазок» — календарь
      обрывался, хотя место на экране оставалось;
   2) широкая таблица лежит в карточке с overflow:hidden — колонки
      обрезаются вместо того, чтобы прокручиваться;
   3) полоса вкладок шире контейнера и уходит за край.
   ============================================================ */

/* ---- 1. Задачи: контейнер плашек больше не рисует свою подложку ----
   .row-center раньше сам был плашкой; теперь внутри него настоящие
   плашки центров, и его фон читался как лишний прямоугольник. */
.row-center {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* ---- 2. Календарь: страница занимает экран целиком ----
   Было max-height:calc(100vh - 268px): при другой высоте шапки или
   тулбара снизу оставалась пустота, а сетка всё равно обрывалась.
   Теперь высоту задаёт flex, а не арифметика. */
@media (min-width: 961px) {
  .calendar-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 64px);
    min-height: 560px;
    padding-bottom: 18px;
  }
  .calendar-layout {
    flex: 1;
    min-height: 0;
    align-items: stretch;
  }
  .calendar-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .calendar-board {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .calendar-grid-scroll {
    flex: 1;
    max-height: none;
    min-height: 0;
  }
  /* Список локаций упирался в край экрана и дальше был недоступен:
     панель прилипшая, а прокрутки у неё своей не было. */
  .calendar-sidebar-panel {
    position: sticky;
    top: 0;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .calendar-sidebar-inner { min-height: 0; }
}

/* ---- 3. Широкие таблицы прокручиваются внутри карточки ----
   min-width равен сумме минимумов колонок с отступами: без него сетка
   сжимает колонки до нечитаемого, а не показывает прокрутку. */
.bus-table { overflow-x: auto; scrollbar-width: thin; }
.bus-table-head,
.bus-table-row { min-width: 940px; }  /* 1180 -> 940 вслед за сжатыми колонками */

.document-table { overflow-x: auto; scrollbar-width: thin; }
.document-table-head,
.document-row { min-width: 1010px; }

.link-admin-table { overflow-x: auto; scrollbar-width: thin; }
.link-admin-head,
.link-admin-row { min-width: 1140px; }

/* Карточки этих таблиц скрывают переполнение, чтобы обрезать уголки —
   прокручиваемому потомку это не мешает, но по вертикали ему нужен
   видимый край, иначе тень прокрутки съедается. */
.bus-list-card,
.document-list-card,
.link-admin-table-card { overflow: hidden; }

/* ---- 4. Полосы вкладок не уходят за край ----
   overflow-x:auto у них был, а ограничения по ширине — только на
   мобильном, поэтому на ПК «Редактор графика» просто отрезался. */
.seg,
.tabs,
.admin-tabs,
.profile-tabs,
.bus-tabs,
.ai-source-tabs,
.schedule-mode-tabs,
.schedule-final-segment,
.calendar-mode-tabs,
.link-admin-tabs,
.schedule-desktop-centers,
.fmba-mobile-center-switch { max-width: 100%; }

/* ---- 5. CMD AI занимает ту же ширину, что и остальные разделы ----
   Было 1180px против 1580px у всех прочих страниц. */
.cmdai-page { max-width: 1580px; }

/* ---- 6. Ничто не тянет страницу по горизонтали ---- */
.content { min-width: 0; }
.card { min-width: 0; }

/* Между .calendar-board и прокручиваемой сеткой есть ещё одна обёртка —
   .calendar-time-grid. Без flex:1 она вырастала под содержимое, и вся
   цепочка высот обрывалась именно на ней. */
@media (min-width: 961px) {
  .calendar-time-grid {
    flex: 1;
    min-height: 0;
  }
}

/* Широкие полосы вкладок переносятся, а не прокручиваются: у вкладок
   спрятанный за краем пункт всё равно никто не найдёт. Узким полосам
   (три режима, два состояния) перенос ничего не меняет. */
.tabs,
.admin-tabs,
.bus-tabs,
.link-admin-tabs,
.profile-tabs {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 2px;
}

/* В диапазоне 761–1360px строка списка перестраивается в столбик, и все
   её части переводятся в третью колонку. В том правиле остался старый
   класс .row-assignee, а в разметке давно .row-person — из-за этого блок
   с ответственным попадал в первую колонку шириной 34px и налезал на
   плашки центров. */
@media (min-width: 761px) and (max-width: 1360px) {
  .list-row-card .row-person {
    grid-column: 3;
    margin: 0;
  }
}

/* Панель заняла весь экран — но строка текста во всю ширину монитора
   читается плохо. Сужаем не саму панель, а поле сообщений отступами:
   так выравнивание «свои справа, ответы слева» остаётся как было. */
@media (min-width: 1240px) {
  .cmdai-messages {
    padding-left: max(20px, (100% - 1040px) / 2);
    padding-right: max(20px, (100% - 1040px) / 2);
  }
}

/* Значок «КАНИКУЛЫ» стоит в строке времени, у которой nowrap и
   overflow:hidden. В узком блоке (когда мероприятия наложены) он не
   влезал рядом со временем и просто обрезался. Разрешаем перенос: на
   широком блоке он всё равно останется на одной строке со временем. */
.calendar-block-time { white-space: normal; }
.calendar-vacation-badge { margin-left: 0; max-width: 100%; }
.calendar-block-time .calendar-vacation-badge { margin-left: 4px; }

/* Панель АХЧ: четыре колонки с минимумом 180px не влезали в узкую
   рабочую область на 1024px и вылезали за край. Переносим по месту,
   как в Базе знаний; поиску возвращаем двойную ширину там, где она есть. */
.maintenance-filters {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (min-width: 1100px) {
  .maintenance-filters > label:first-child { grid-column: span 2; }
}

/* Первая строка тулбара ФМБА была жёсткой сеткой из трёх колонок, где
   первая — max-content. Переключатель центров с длинными названиями
   («ЦМД «Крылатское»») раздувал её, и строка вылезала за край на узком
   экране. Ниже 1200px даём перенос вместо переполнения. */
@media (min-width: 721px) and (max-width: 1200px) {
  .fmba-desktop-row1 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .fmba-desktop-row1 > * { min-width: 0; }
  .fmba-desktop-row1 .schedule-desktop-centers { max-width: 100%; }
  .fmba-desktop-row1 .fmba-select-wrap { flex: 0 1 180px; }
  .fmba-desktop-row1 .fmba-desktop-search { flex: 1 1 220px; }
}

/* Подвкладки внутри раздела «Сотрудники»: тот же переключатель, что и
   в остальных разделах, но со своим отступом от заголовка. */
.users-subtabs {
  margin: 0 0 14px;
  flex-wrap: wrap;
}

/* Подтверждение увольнения — действие необратимое по ощущениям
   (учётка гаснет сразу), поэтому кнопка «Да» красная, а не фирменная. */
.user-dismiss-confirm {
  background: #c0392f;
  box-shadow: 0 6px 14px rgba(192, 57, 47, .22);
}
.user-dismiss-confirm:hover { background: #a52f27; }

/* Карточка уволенного: приглушена, чтобы архив не путался с рабочим списком. */
.user-card.is-dismissed h3 { color: var(--muted); }
.user-card.is-dismissed .maintenance-status {
  background: rgba(192, 57, 47, .12);
  color: #c0392f;
}

/* Имя в вопросе об увольнении — отдельной строкой: так фразу не приходится
   согласовывать с полом сотрудника. */
.dialog-confirm-name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

/* Автобусы: вкладки месяцев и кнопка добавления жили в двух строках —
   заголовок страницы давно уехал в верхнюю панель, и в page-head осталась
   одна кнопка. Теперь это одна строка: вкладки слева, кнопка справа. */
.bus-toolbar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}
.bus-toolbar-row .bus-tabs {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.bus-toolbar-row .primary {
  flex: none;
  white-space: nowrap;
}

/* Таблице рейсов требовалось окно ~1470px, поэтому колонка «Действия»
   уезжала за край и до кнопок приходилось доскроллировать вбок.
   Колонки и просветы поджаты — теперь хватает ~1240px. */
.bus-table-head,
.bus-table-row {
  grid-template-columns: 44px 140px 150px minmax(200px, 1fr) 112px 116px 88px;
  gap: 10px;
  padding-left: 16px;
  padding-right: 16px;
}
.bus-table-row .bus-type-badge,
.bus-table-row .bus-center-badge {
  padding: 5px 8px;
  font-size: 10.5px;
}
.bus-table-row .bus-group-link { font-size: 11.5px; }
.bus-table-row .row-menu { gap: 6px; }
.bus-table-row .row-menu button { width: 32px; height: 32px; }

@media (max-width: 1360px) {
  .bus-toolbar-row { flex-wrap: wrap; }
}

/* Даже с поджатыми колонками таблица не влезает в окна уже ~1240px, и
   уезжает за край всегда именно колонка «Действия» — то есть кнопки, ради
   которых в строку и заходят. Закрепляем её у правого края: остальное
   прокручивается под ней, кнопки доступны при любой ширине.

   Строкам нужен непрозрачный фон: карточка сама полупрозрачная, и сквозь
   закреплённую ячейку просвечивал бы уезжающий текст. */
.bus-table-row { background: #ffffff; }
.bus-table-row:hover { background: #f3f7fb; }
.bus-table-head { background: #f8fafc; }
[data-theme=dark] .bus-table-row { background: #172435; }
[data-theme=dark] .bus-table-row:hover { background: #223247; }
[data-theme=dark] .bus-table-head { background: #14202f; }

.bus-table-head > :last-child,
.bus-table-row .bus-actions {
  position: sticky;
  right: 0;
  background: inherit;
  border-left: 1px solid var(--line-soft);
  padding-left: 10px;
}

/* ============================================================
   ПРОХОД ПО ЧИТАЕМОСТИ НА РАЗНЫХ ЭКРАНАХ
   ============================================================ */

/* --- Задачи и Объявления: плашки центров ---
   .row-center рисовалась как одна серо-голубая плашка с фоном и отступами —
   это было верно, пока внутри лежала строка «ЦМД «Крылатское», ЦМД «Можайский»».
   Теперь внутри собственные цветные плашки, и внешний фон читается как
   лишний прямоугольник вокруг них. */
.row-center {
  background: none;
  padding: 0;
  border-radius: 0;
}
[data-theme=dark] .row-center { background: none; }

/* --- Календарь: сетка занимает всё, что осталось до низа окна ---
   Высота сетки считалась от константы (100vh минус фиксированный запас),
   поэтому при другой высоте панели снизу оставалась пустота, а расписание
   выглядело обрезанным. Делаем страницу колонкой и отдаём сетке остаток. */
@media (min-width: 721px) {
  .calendar-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 64px);
    padding-bottom: 18px;
  }
  .calendar-page .calendar-layout {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }
  .calendar-page .calendar-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .calendar-page .calendar-board {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .calendar-page .calendar-time-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .calendar-page .calendar-grid-scroll {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 340px;
  }
  /* Список локаций тянется вместе со страницей и прокручивается сам,
     а не обрывается на фиксированной высоте. */
  .calendar-page .calendar-sidebar-panel {
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* --- База знаний ---
   Правая колонка (типы, хранилище, быстрые действия) держалась до 1240px,
   хотя таблице документов нужно ~870px: на 1280px ей оставалось 612px и
   «Действия» уезжали за край. Отпускаем колонку под таблицу, пока на неё
   действительно не хватает места. */
/* Две колонки требуют 902px таблице + 320px правому блоку + отступы, то
   есть окно от ~1540px. Ниже правый блок уходит под таблицу. */
@media (max-width: 1559px) {
  .documents-layout { grid-template-columns: 1fr !important; }
}
.document-table-head,
.document-row {
  grid-template-columns: minmax(190px, 1.4fr) minmax(96px, .7fr) minmax(84px, .55fr) minmax(96px, .6fr) minmax(78px, .45fr) minmax(56px, .34fr) minmax(76px, .45fr) 108px !important;  /* 3 кнопки действий не влезали в 76px */
  gap: 8px !important;
  min-width: 870px;
}
/* Колонка действий закреплена у правого края — на узких экранах уезжает
   именно она, а это единственное, ради чего в строку нажимают. */
.document-row { background: #ffffff; }
.document-row:hover { background: #f3f7fb; }
.document-table-head { background: #f8fafc; }
[data-theme=dark] .document-row { background: #172435; }
[data-theme=dark] .document-row:hover { background: #223247; }
[data-theme=dark] .document-table-head { background: #14202f; }
.document-table-head > :last-child,
.document-row .document-row-actions {
  position: sticky;
  right: 0;
  background: inherit;
  border-left: 1px solid var(--line-soft);
  padding-left: 8px;
}

/* --- Администрирование: вкладки в две строки не должны слипаться --- */
.admin-tabs {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* --- CMD AI ---
   Страница упиралась в общий предел ширины 1580px и не тянулась по высоте,
   из-за чего на большом мониторе чат занимал середину, а вокруг было пусто. */
.cmdai-page {
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 64px);
  padding-bottom: 18px;
}
.cmdai-page .cmdai-layout {
  flex: 1 1 auto;
  min-height: 0;
}
.cmdai-page .cmdai-chat,
.cmdai-page .cmdai-history {
  min-height: 0;
}

/* ============================================================
   ССЫЛКИ: ПЛОТНЫЙ СПИСОК ВМЕСТО КАРТОЧЕК
   Карточка занимала 90px, из которых две трети приходились на поля,
   одинаковые почти у всех ссылок. Строка занимает 30px, поэтому все
   ссылки помещаются на один экран вместо пяти.
   ============================================================ */

/* Две колонки набором, а не сеткой: группы разной длины укладываются
   плотно, без дыр под короткими категориями. */
.link-groups {
  columns: 2;
  column-gap: 18px;
}
.link-group {
  break-inside: avoid;
  margin: 0 0 14px;
}

.link-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-soft, var(--muted));
}
.link-group-head i { font-style: normal; font-size: 12px; }
.link-group-head em {
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .8;
}

.link-group-list {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 0;
  border-top: 1px solid var(--line-soft);
}
.link-row:first-child { border-top: 0; }
.link-row:hover { background: var(--surface-hover); }

/* Вся строка — кнопка перехода: попасть по ней проще, чем по значку. */
.link-row-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px 7px 10px;
  text-align: left;
  font-size: 13px;
  color: var(--text);
}
.link-row-open i {
  font-style: normal;
  font-size: 13px;
  width: 17px;
  flex: none;
  text-align: center;
}
.link-row-open b {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Домен — второстепенное, прижимаем вправо и гасим. */
.link-row-open span,
.link-row-open em {
  margin-left: auto;
  padding-left: 8px;
  flex: none;
  font-style: normal;
  font-size: 11px;
  white-space: nowrap;
}
.link-row-open span { color: var(--text-soft, var(--muted)); }
/* Пометка со сроком («по ПН до 11:00») — единственное описание, которое
   у ссылок реально заполнено, и его стоит замечать. */
.link-row-open em { color: #a8601c; font-weight: 700; }
[data-theme=dark] .link-row-open em { color: #d99a4e; }

.link-row-center {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--r-chip);
  white-space: nowrap;
  background: color-mix(in srgb, var(--center-color, var(--muted)) 14%, transparent);
  color: var(--center-color, var(--muted));
}

.link-row-star {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--r-chip);
  font-size: 12px;
  line-height: 1;
  color: var(--text-soft, var(--muted));
}
.link-row-star:hover { background: var(--surface-selected); color: var(--accent); }
.link-row-star.is-on { color: var(--accent); }

/* ============================================================
   ЦВЕТ КАТЕГОРИИ У ЗНАЧКОВ-ПАПОК
   Две трети ссылок ведут на Google Docs и Яндекс Диск, и подбор значка
   выдаёт им всем эмодзи «папка». Эмодзи рисует шрифт — покрасить его нельзя,
   поэтому список выглядел сплошной жёлтой лентой. Значки с классом is-folder
   портал отдаёт пустыми по смыслу: сам символ гасим и рисуем папку вектором
   в цвет категории (--link-color приходит на строку).
   Под @supports — чтобы в браузере без масок остался прежний эмодзи,
   а не пустое место.
   ============================================================ */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .link-row-open i.is-folder {
    width: 17px;
    height: 14px;
    font-size: 0;
    line-height: 0;
    background-color: var(--link-color, var(--muted));
    -webkit-mask: var(--folder-glyph) center / 15px 13px no-repeat;
    mask: var(--folder-glyph) center / 15px 13px no-repeat;
  }
}
:root {
  --folder-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Cpath d='M2.4 1h5.1c.5 0 1 .25 1.3.68L9.9 3.1h7.7c1 0 1.9.85 1.9 1.9v9.1c0 1.05-.85 1.9-1.9 1.9H2.4C1.35 16 .5 15.15.5 14.1V2.9C.5 1.85 1.35 1 2.4 1z'/%3E%3C/svg%3E");
}

/* Кромка в цвет категории: заголовки набраны мелко и одинаково, цветная
   грань разделяет группы быстрее, чем чтение подписи. */
.link-group-list { border-left: 3px solid var(--group-color, var(--line)); }

/* На тёмном фоне тёмный цвет категории пропадает: бордовый #7f1438 давал
   контраст 1,54 при норме 3 — папки «Проектов» было не разглядеть. Подмешиваем
   белого: 70% цвета поднимает бордовый до 3,24, а яркие цвета не выцветают.
   Кромку избранного не трогаем — правило ниже перебивает её акцентом. */
[data-theme=dark] .link-row-open i.is-folder {
  background-color: color-mix(in srgb, var(--link-color, var(--muted)) 70%, #fff);
}
[data-theme=dark] .link-group-list {
  border-left-color: color-mix(in srgb, var(--group-color, var(--line)) 70%, #fff);
}

/* Избранное — первая группа и единственная выделенная. */
.link-group.is-favorites .link-group-head { color: var(--accent); }
.link-group.is-favorites .link-group-list { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }

/* В одну колонку — только когда на две действительно не хватает ширины.
   На 1100px две колонки по ~395px читаются нормально, а список вдвое короче. */
@media (max-width: 820px) {
  .link-groups { columns: 1; }
}

/* Длинное название в строке (nowrap) задавало колонке минимальную ширину по
   содержимому, из-за чего весь блок расползался под правую панель. Явно
   разрешаем сжатие на каждом уровне — обрезание по многоточию уже настроено. */
.links-main-stack { min-width: 0; }
.link-groups,
.link-group,
.link-group-list,
.link-row,
.link-row-open { min-width: 0; }
.link-row-open b { min-width: 0; flex: 0 1 auto; }
/* Домен уступает место названию: он полезен, но не ценой обрезанного имени. */
.link-row-open span,
.link-row-open em {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Чуть плотнее: 32px -> 28px на строку. */
.link-row-open { padding-top: 5px; padding-bottom: 5px; }
.link-group { margin-bottom: 11px; }

/* Название получает всю свободную ширину, пометка со сроком уступает первой:
   обрезанный срок ещё можно пережить, обрезанное имя — нет. */
.link-row-open b { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.link-row-open em { flex: 0 1 auto; max-width: 42%; }

/* ============================================================
   АВТОБУСЫ: ЭКСКУРСИЯ ИЗ СПРАВОЧНИКА
   ============================================================ */

/* Плашка ЦМД с длинным названием («Тропарево-Никулино») не помещалась в
   свою колонку и наезжала на код группы. Колонка шире, а сама плашка
   умеет сжаться с многоточием, если название окажется ещё длиннее. */
.bus-table-head,
.bus-table-row {
  grid-template-columns: 40px 128px 140px minmax(230px, 1fr) 132px 116px 92px;
}
.bus-table-row .bus-center-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
  line-height: 18px;
}

/* Название и краткое описание — одна кликабельная ячейка. */
.bus-excursion-cell { min-width: 0; }
.bus-excursion-open {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  color: inherit;
}
.bus-excursion-open strong,
.bus-excursion-cell > strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}
.bus-excursion-open small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}
.bus-excursion-open:hover strong { color: var(--brand-dark); }
.bus-excursion-open:hover small { color: var(--text); }
.bus-excursion-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-chip); }

/* Плашка с полным описанием — узкая и без лишнего обрамления. */
.bus-excursion-details {
  padding: 22px;
  display: grid;
  gap: 14px;
  max-height: min(560px, calc(100dvh - 40px));
  overflow: auto;
}
.bus-excursion-details h2 { margin: 0; font-size: 17px; line-height: 1.3; }
.bus-excursion-details p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text); }

/* --- подбор экскурсии в форме --- */
.bus-excursion-field { position: relative; }
.bus-excursion-box { position: relative; }
.bus-excursion-list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  box-shadow: 0 14px 32px rgba(42, 65, 103, .16);
}
.bus-excursion-box.is-open .bus-excursion-list { display: block; }
.bus-excursion-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 11px;
  border-top: 1px solid var(--line-soft);
}
.bus-excursion-list button:first-child { border-top: 0; }
.bus-excursion-list button:hover,
.bus-excursion-list button.is-chosen { background: var(--surface-hover); }
.bus-excursion-list button b { display: block; font-size: 12.5px; font-weight: 650; }
.bus-excursion-list button small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--muted);
}
.bus-excursion-empty { margin: 0; padding: 12px; font-size: 11.5px; color: var(--muted); }
.bus-excursion-hint {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--muted);
}

/* Форма рейса сама прокручивается (max-height + overflow), поэтому
   абсолютно позиционированный список подсказок обрезался её краем.
   Показываем список в потоке: он раздвигает форму, и ничего не пропадает. */
.bus-excursion-list {
  position: static;
  margin-top: 5px;
  max-height: 210px;
  box-shadow: none;
}
.bus-excursion-box.is-open .bus-excursion-list { display: block; }

/* ============================================================
   СВОРАЧИВАНИЕ БОКОВОГО МЕНЮ (только ПК)
   Ниже 721px меню и так превращается в нижнюю панель, поэтому все
   правила заперты в медиазапросе — на телефоне кнопки не будет.
   ============================================================ */
@media (min-width: 721px) {
  .nav-collapse {
    display: grid;
    place-items: center;
    margin-left: auto;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--r-chip);
    color: var(--nav-me-sub);
    transition: background .12s, color .12s, transform .18s;
  }
  .nav-collapse:hover { background: rgba(255, 255, 255, .1); color: var(--nav-ink-hover); }
  .nav-collapse:focus-visible { outline: 2px solid var(--nav-on-ink); outline-offset: 1px; }

  /* Без анимации ширины: страница перерисовывается по таймеру живого
     обновления, переход прерывается на полпути и меню зависает в
     промежуточной ширине. Переключение мгновенное — это и надёжнее. */

  body[data-nav="collapsed"] .sidebar { width: 66px; padding-left: 9px; padding-right: 9px; }
  body[data-nav="collapsed"] .shell { margin-left: 66px; }

  /* Прячем всё, что несёт текст: остаются одни значки. */
  body[data-nav="collapsed"] .nav-label,
  body[data-nav="collapsed"] .nav-group-title,
  body[data-nav="collapsed"] .brand strong,
  body[data-nav="collapsed"] .sidebar-me b,
  body[data-nav="collapsed"] .sidebar-me i { display: none; }

  body[data-nav="collapsed"] .brand { padding: 0 0 20px; justify-content: center; }
  body[data-nav="collapsed"] .brand-logo { margin: 0; }
  body[data-nav="collapsed"] .nav-collapse {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    margin: 0;
  }
  body[data-nav="collapsed"] .sidebar nav { margin-top: 34px; }
  body[data-nav="collapsed"] .nav-group { gap: 4px; }

  body[data-nav="collapsed"] .sidebar nav button,
  body[data-nav="collapsed"] .sidebar-bottom > button {
    justify-content: center;
    padding: 11px 0;
    gap: 0;
  }
  body[data-nav="collapsed"] .sidebar button.active { box-shadow: none; }

  /* Счётчик уведомлений превращается в точку на значке: цифра рядом со
     значком в 66px просто не помещается. */
  body[data-nav="collapsed"] .nav-badge {
    position: absolute;
    top: 6px;
    right: 12px;
    margin: 0;
    min-width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    border-radius: var(--r-round);
  }
  body[data-nav="collapsed"] .sidebar-bottom > button { position: relative; }

  body[data-nav="collapsed"] .sidebar-me {
    justify-content: center;
    padding: 9px 0;
  }
  body[data-nav="collapsed"] .sidebar-me span { margin: 0; }
}

/* Кнопка сворачивания не нужна там, где меню и так скрыто. */
@media (max-width: 720px) {
  .nav-collapse { display: none; }
}

/* В свёрнутом виде эта кнопка — единственный способ вернуть меню, поэтому
   она не должна выглядеть просто серой галочкой на тёмном фоне. */
@media (min-width: 721px) {
  body[data-nav="collapsed"] .nav-collapse {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--nav-ink-hover);
    width: 30px;
    height: 30px;
  }
  body[data-nav="collapsed"] .nav-collapse:hover {
    background: rgba(255, 255, 255, .16);
  }
}

/* --- Свёрнутое меню: нижние кнопки ---
   <button> сжимается по содержимому даже как flex-контейнер, поэтому
   кнопка была шириной 18px и центрировать в ней было нечего. Пункты
   верхнего меню лежат в grid и растягивались сами — отсюда и разница. */
@media (min-width: 721px) {
  body[data-nav="collapsed"] .sidebar-bottom > button { width: 100%; }
  body[data-nav="collapsed"] .nav-badge { right: 14px; }
}

/* --- Автобусы: фильтры в общем стиле ---
   Панель не входила в единый слой, поэтому её поля выглядели иначе, чем
   в остальных разделах: даты со своей рамкой, списки — системные. */
.bus-filter-card {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-card);
  box-shadow: 0 10px 26px rgba(42, 65, 103, .06);
}
.bus-filter-card label {
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: none;
}
.bus-filter-card label > select,
.bus-filter-card label > input,
.bus-filter-card .bus-date-range input {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}
.bus-filter-card .quiet {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-chip);
  font-size: 11.5px;
}

/* --- Описание экскурсии: воздух между абзацами --- */
.bus-excursion-details p + p { margin-top: 11px; }
.bus-excursion-details p { line-height: 1.65; }

/* --- Заявки на главной стали кнопками --- */
.home-v2-list button.request {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-chip);
  transition: background .12s;
}
.home-v2-list button.request:hover { background: var(--surface-hover); }
.home-v2-list button.request:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 720px) {
  .bus-filter-card label > select,
  .bus-filter-card label > input,
  .bus-filter-card .bus-date-range input { min-height: 42px; font-size: 13px; }
}

/* Пароли: список центров стоит прямо в панели, без обёртки <label>, поэтому
   общие правила единого слоя (они рассчитаны на label > select) его не
   доставали — отсюда высота 46 и радиус 14 против 34 и 9 у поиска. */
.links-filter-bar > select,
.links-filter-bar > input {
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

/* АХЧ: поиск занимал две доли против одной у остальных, из-за чего «Центр»,
   «Статус» и «Документ» выглядели урезанными. Колонки равные. */
.maintenance-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .links-filter-bar > select,
  .links-filter-bar > input { min-height: 42px; height: auto; font-size: 13px; }
  .maintenance-filters { grid-template-columns: 1fr; }
}

/* Поле поиска было растянуто на две колонки — из-за этого «Центр», «Статус»
   и «Документ» выглядели вдвое уже. Все четыре занимают по одной. */
.maintenance-filters > label:first-child { grid-column: auto; }
@media (max-width: 720px) {
  .maintenance-filters > label:first-child { grid-column: 1 / -1; }
}

/* Центров у сотрудника может быть несколько — плашки переносятся строкой
   и не растягивают карточку. */
.profile-center-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 2px;
}

/* Дополнительные настройки выгрузки: галочка открывает поле со значением. */
.export-tuning {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface-hover);
}
.export-tuning .check-row { font-size: 12px; font-weight: 600; }
.export-tuning-value {
  gap: 5px;
  margin-left: 24px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.export-tuning-value input {
  min-height: 32px;
  border-radius: var(--r-chip);
  font-size: 12.5px;
  max-width: 140px;
}
.export-tuning-hint {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
}

/* Снимок состояния push — читаем построчно, без переносов посередине слов. */
.push-diag {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface-hover);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

/* ════════════════════════════════════════════════════════════════════════
   Список АХЧ-заявок: строки со снимком, сгруппированные по центрам.
   Раньше каждая заявка была карточкой на карточке — два почти одинаковых
   фона, тонкая линия между ними и по четыре кнопки на строку. Теперь это
   один список с разделителями: снимок слева опознаёт заявку, локация —
   заголовок, описание уходит в серый, кнопки появляются при наведении.
   ════════════════════════════════════════════════════════════════════ */
.maintenance-list {
  display: block;
  padding: 0;
  overflow: hidden;
}

.maintenance-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px 10px;
  border-top: 1px solid var(--line);
  background: var(--surface-card-2);
}
.maintenance-group-head:first-child { border-top: 0; }
.maintenance-group-head b {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--center-color, var(--brand-dark));
}
.maintenance-group-head span {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}

.maintenance-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 16px;
  border-top: 1px solid var(--line-soft);
  transition: background .14s ease;
}
.maintenance-row:hover { background: var(--surface-hover); }
.maintenance-row.selected { background: var(--surface-selected); }
/* Цветная полоска слева — статус заявки. */
.maintenance-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--row-rail, transparent);
}
.maintenance-row.new  { --row-rail: #1473d8; }
.maintenance-row.work { --row-rail: #078155; }
.maintenance-row.done { --row-rail: #98a5ba; }

.maintenance-row-check { position: relative; width: 22px; height: 22px; flex: none; }
.maintenance-row-check.is-empty { width: 4px; }
.maintenance-row-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.maintenance-row-check span {
  display: block;
  width: 22px; height: 22px;
  border: 2px solid color-mix(in srgb, var(--text) 26%, transparent);
  border-radius: var(--r-chip);
  background: var(--surface-card);
  transition: .14s ease;
  pointer-events: none;
}
.maintenance-row-check input:checked + span {
  background: linear-gradient(135deg, #a01c4c, #921841);
  border-color: #921841;
}
.maintenance-row-check input:checked + span::after {
  content: "✓";
  display: grid;
  place-items: center;
  height: 100%;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.maintenance-row-check input:focus-visible + span { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

/* Вся строка — одна кнопка: на телефоне по ней просто тапают. */
.maintenance-row-open {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  font: inherit;
}
.maintenance-row-open:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 3px; border-radius: var(--r-card); }

.maintenance-row-thumb {
  position: relative;
  display: block;
  width: 76px;
  height: 60px;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-card-2);
  flex: none;
}
.maintenance-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.maintenance-row-thumb.is-empty {
  display: grid;
  place-items: center;
  font-size: 9.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
}
.maintenance-row-thumb i {
  position: absolute;
  right: 4px; bottom: 4px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: var(--r-chip);
  background: rgba(12, 22, 38, .72);
  color: #fff;
}

.maintenance-row-body { display: grid; gap: 3px; min-width: 0; }
.maintenance-row-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.maintenance-row-title b { font-size: 14.5px; font-weight: 900; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-row-doc { font-size: 12px; color: var(--muted); flex: none; }
.maintenance-row-text {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.maintenance-row-body small { color: var(--muted); font-size: 11px; font-weight: 700; opacity: .85; }

.maintenance-row-right { display: flex; align-items: center; gap: 12px; flex: none; }
.maintenance-row .maintenance-status { min-height: 26px; padding: 0 11px; font-size: 11.5px; }
.maintenance-row-actions { display: flex; gap: 6px; }
.maintenance-row-actions .slim {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-control);
  border-color: transparent;
  color: var(--muted);
  font-size: 12px;
}
.maintenance-row:hover .maintenance-row-actions .slim,
.maintenance-row-actions .slim:focus-visible {
  border-color: var(--line);
  color: var(--brand-dark);
  background: var(--surface-card);
}
.maintenance-row-actions .slim.is-icon { padding: 0 10px; font-size: 15px; line-height: 1; }

.maintenance-menu-list { display: grid; gap: 6px; }
.maintenance-menu-list button {
  min-height: 46px;
  padding: 0 14px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface-card-2);
  text-align: left;
  font-weight: 800;
  color: var(--text);
}
.maintenance-menu-list button:hover { background: var(--surface-hover); }
.maintenance-menu-list button.danger-link { color: #c92a2a; }

@media (max-width: 720px) {
  .maintenance-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px 12px 14px 15px;
  }
  .maintenance-row-open { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; }
  .maintenance-row-thumb { width: 56px; height: 56px; }
  .maintenance-row-text { -webkit-line-clamp: 2; }
  .maintenance-row-body small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Статус переезжает под текст: в одну строку с описанием он не помещался
     и уезжал за край экрана. Кнопки не нужны — по строке тапают. */
  .maintenance-row-right { grid-column: 2 / -1; margin-top: 8px; }
  .maintenance-row-actions { display: none; }
  .maintenance-group-head { padding: 12px 15px 9px; }
}

/* В тёмной теме статус «Принята в работу» / «Заявка направлена» был малиновым —
   тем же цветом, каким помечают опасные действия, — тогда как в светлой теме
   он зелёный. Один и тот же статус не может значить разное в разных темах. */
[data-theme=dark] .maintenance-status.work {
  background: rgba(16, 140, 96, .22);
  color: #59d3a4;
}

/* ============================================================
   БОКОВОЕ МЕНЮ: активный пункт и прилипающая шапка на телефоне
   ============================================================ */

/* Полоска активного пункта рисовалась inset-тенью на скруглённой плашке.
   Тень обходит скругление, поэтому вместо прямой чёрточки получался белый
   «крючок» по левому краю — на телефоне он читался как обрезанный контур.
   Отдельный элемент внутри плашки даёт ровную полоску с любым скруглением. */
.sidebar nav button.active,
.sidebar-bottom > button.active {
  position: relative;
  box-shadow: none;
}
.sidebar nav button.active::before,
.sidebar-bottom > button.active::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: var(--r-hair);
  background: var(--nav-on-bar);
}
/* У профиля своя рамка и своё скругление — полоска там лишняя. */
.sidebar .sidebar-me.active::before { content: none; }

@media (min-width: 721px) {
  /* В свёрнутом меню плашка размером со значок, полоска в неё не влезает. */
  body[data-nav="collapsed"] .sidebar nav button.active::before,
  body[data-nav="collapsed"] .sidebar-bottom > button.active::before { content: none; }
}

@media (max-width: 720px) {
  /* Шапка меню прилипшая и с фоном, а под ней было 8px — первый пункт стоял
     к ней вплотную и при малейшей прокрутке уезжал под неё, оставляя видимым
     только краешек. Меню длиннее экрана, прокрутка нужна, поэтому даём запас. */
  .sidebar .brand { margin-bottom: 14px; }
  .sidebar { scroll-padding-top: 84px; }
  .sidebar nav { padding-top: 2px; }
}

/* ════════════════════════════════════════════════════════════════════════
   РАЗДЕЛ «ГРАФИК» — оформление v221
   Сверху своё расписание, ниже команда центра. Одна вёрстка на все экраны:
   раньше их было две, из-за чего телефон и компьютер вели себя по-разному.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --sch-usual-bg: #e6f7ef; --sch-usual-br: #c4e9d8; --sch-usual-ink: #126c4a;
  --sch-eve-bg: #e8f1fe;   --sch-eve-br: #cadff9;   --sch-eve-ink: #1660ac;
  --sch-short-bg: #fdf3dd; --sch-short-br: #f2ddab; --sch-short-ink: #8a6512;
  --sch-off-bg: #f2f5f9;   --sch-off-br: #e4eaf2;   --sch-off-ink: #8b97ab;
  --sch-vac-bg: #f0eafd;   --sch-vac-br: #ddd0f7;   --sch-vac-ink: #6144bd;
  --sch-sick-bg: #fdeef1;  --sch-sick-br: #f7d2da;  --sch-sick-ink: #bd3f52;
}
[data-theme=dark] {
  --sch-usual-bg: rgba(30,150,105,.24); --sch-usual-br: rgba(30,150,105,.4); --sch-usual-ink: #66d5a6;
  --sch-eve-bg: rgba(60,130,230,.22);   --sch-eve-br: rgba(60,130,230,.4);   --sch-eve-ink: #8cc0ff;
  --sch-short-bg: rgba(200,150,40,.2);  --sch-short-br: rgba(200,150,40,.36); --sch-short-ink: #e8c069;
  --sch-off-bg: rgba(150,170,200,.1);   --sch-off-br: rgba(150,170,200,.2);  --sch-off-ink: #93a1b7;
  --sch-vac-bg: rgba(140,100,230,.22);  --sch-vac-br: rgba(140,100,230,.4);  --sch-vac-ink: #b79cf7;
  --sch-sick-bg: rgba(220,80,110,.2);   --sch-sick-br: rgba(220,80,110,.38); --sch-sick-ink: #f093a4;
}

.sch-board { display: grid; gap: 16px; }
/* Элемент сетки по умолчанию не сжимается уже своего содержимого, поэтому
   таблица месяца с min-width:1180px растягивала всю доску, а с ней и панель
   фильтров — страница уезжала вбок на несколько пикселей. С min-width:0
   таблица прокручивается внутри себя, как и задумано. */
.sch-board > *, .sch-month, .sch-week { min-width: 0; max-width: 100%; }
.sch-controls-wide { display: block; }
.sch-controls-narrow { display: none; }
.sch-only-narrow { display: none; }
.sch-only-wide { display: block; }

/* ── клетка смены, одна на все виды ── */
.sch-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 30px; padding: 0 9px; border-radius: var(--r-chip); border: 1px solid transparent;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sch-chip b { font-weight: inherit; }
.sch-short { display: none; }
.sch-chip.work.usual { background: var(--sch-usual-bg); border-color: var(--sch-usual-br); color: var(--sch-usual-ink); }
.sch-chip.work.evening { background: var(--sch-eve-bg); border-color: var(--sch-eve-br); color: var(--sch-eve-ink); }
.sch-chip.work.short { background: var(--sch-short-bg); border-color: var(--sch-short-br); color: var(--sch-short-ink); }
.sch-chip.status { background: var(--sch-off-bg); border-color: var(--sch-off-br); color: var(--sch-off-ink); }
.sch-chip.status.vacation { background: var(--sch-vac-bg); border-color: var(--sch-vac-br); color: var(--sch-vac-ink); }
.sch-chip.status.sick { background: var(--sch-sick-bg); border-color: var(--sch-sick-br); color: var(--sch-sick-ink); }
.sch-chip.none { color: var(--muted); opacity: .55; border-style: dashed; border-color: var(--line); }
.sch-mark {
  font-style: normal; font-size: 9.5px; font-weight: 900; line-height: 1; flex: none;
  display: grid; place-items: center; width: 15px; height: 15px; border-radius: var(--r-hair);
}
.sch-mark.duty { background: rgba(201,138,5,.18); color: #9a6a04; }
.sch-mark.away { background: rgba(120,140,170,.2); color: var(--text-soft); }
[data-theme=dark] .sch-mark.duty { background: rgba(240,192,74,.2); color: #f0c04a; }

/* ── своё расписание ── */
.sch-mine { display: grid; gap: 14px; }
.sch-mine-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sch-mine-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.sch-mine-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.sch-next { text-align: right; }
.sch-next small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sch-next b { font-size: 14.5px; color: var(--sch-usual-ink); }
.sch-daycards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sch-daycard {
  display: grid; gap: 8px; justify-items: center; padding: 12px 6px;
  border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface-card-2);
}
.sch-daycard-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.sch-daycard-head i { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; padding: 2px 5px; border-radius: var(--r-hair); background: var(--brand); color: #fff; }
.sch-daycard.is-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.sch-daycard .sch-chip { min-height: 34px; font-size: 13px; }

/* ── группа центра ── */
.sch-group-head { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px 7px; border-top: 1px solid var(--line); }
.sch-group:first-child .sch-group-head { border-top: 0; padding-top: 4px; }
/* Подпись центра стоит под его таблицей. Чтобы строки нельзя было принять
   за чужие, блок закрывается подложкой с цветной чертой центра слева — она
   идёт по всей его высоте и видна раньше, чем читается сама подпись. */
.sch-week .sch-group, .sch-month .sch-group {
  position: relative;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--center-color, var(--brand)) 55%, transparent);
}
.sch-week .sch-group + .sch-group, .sch-month .sch-group + .sch-group { margin-top: 10px; }
.sch-group-head.is-footer {
  padding: 7px 16px 8px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--center-color, var(--brand)) 5%, transparent);
}
.sch-week .sch-group:first-child .sch-group-head.is-footer,
.sch-month .sch-group:first-child .sch-group-head.is-footer { padding-top: 7px; }
.sch-week-counts { background: color-mix(in srgb, var(--center-color, var(--brand)) 5%, transparent); }
.sch-group-head b { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--center-color, var(--brand-dark)); }
.sch-group-head span { font-size: 12px; color: var(--muted); font-weight: 600; }
.sch-ava {
  flex: none; width: 26px; height: 26px; border-radius: var(--r-chip); display: grid; place-items: center;
  background: var(--surface-card-2); border: 1px solid var(--line); color: var(--text-soft);
  font-style: normal; font-size: 10.5px; font-weight: 800;
}

/* ── команда: неделя ── */
.sch-week { padding: 0; overflow: hidden; }
.sch-week-row { display: grid; grid-template-columns: 210px repeat(7, minmax(72px, 1fr)); align-items: center; gap: 8px; padding: 0 16px; }
.sch-week-head { padding-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); background: var(--surface-card-2); }
.sch-week-day { display: grid; justify-items: center; gap: 1px; font-size: 11.5px; }
.sch-week-day b { font-weight: 800; color: var(--text-soft); }
.sch-week-day i { font-style: normal; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.sch-week-day.is-today b, .sch-week-day.is-today i { color: var(--brand-dark); }
/* Итог под таблицей центра, а не над ней. */
.sch-week-counts { padding-top: 0; padding-bottom: 9px; color: var(--muted); }
.sch-week-counts .sch-week-person { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.sch-week-counts span:not(.sch-week-person) { text-align: center; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sch-week-counts .is-zero { color: var(--sch-sick-ink); }
.sch-week-row:not(.sch-week-head):not(.sch-week-counts) { padding-top: 5px; padding-bottom: 5px; border-top: 1px solid var(--line-soft); }
.sch-week-row.is-me { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.sch-week-row.is-me .sch-week-person b { color: var(--brand-dark); }
.sch-week-person { display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: 10px; }
.sch-week-person b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-week-cell { display: grid; place-items: center; }

/* ── свой месяц: календарь ── */
.sch-cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sch-cal-weekdays span { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sch-cal-weekdays .is-weekend { color: var(--sch-short-ink); }
.sch-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sch-cal-day {
  min-height: 66px; border: 1px solid var(--line); border-radius: var(--r-control); padding: 7px 8px;
  display: grid; gap: 4px; align-content: start; justify-items: start; text-align: left;
  background: var(--surface-card-2); font: inherit; color: inherit;
}
.sch-cal-day.is-empty { background: transparent; border-color: transparent; pointer-events: none; }
.sch-cal-num { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800;
  color: var(--muted); font-variant-numeric: tabular-nums; }
/* Та же подпись «сегодня», что и в неделе: в календаре месяца сегодняшний
   день отличался только цветом цифры, и его приходилось искать. */
.sch-cal-num i { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 5px; border-radius: var(--r-hair);
  background: var(--brand); color: #fff; white-space: nowrap; }
.sch-cal-val { position: relative; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sch-cal-val b { font-weight: inherit; }
.sch-cal-day.work.usual { background: var(--sch-usual-bg); border-color: var(--sch-usual-br); }
.sch-cal-day.work.usual .sch-cal-val { color: var(--sch-usual-ink); }
.sch-cal-day.work.evening { background: var(--sch-eve-bg); border-color: var(--sch-eve-br); }
.sch-cal-day.work.evening .sch-cal-val { color: var(--sch-eve-ink); }
.sch-cal-day.work.short { background: var(--sch-short-bg); border-color: var(--sch-short-br); }
.sch-cal-day.work.short .sch-cal-val { color: var(--sch-short-ink); }
.sch-cal-day.status .sch-cal-val { color: var(--sch-off-ink); }
.sch-cal-day.status.vacation { background: var(--sch-vac-bg); border-color: var(--sch-vac-br); }
.sch-cal-day.status.vacation .sch-cal-val { color: var(--sch-vac-ink); }
.sch-cal-day.status.sick { background: var(--sch-sick-bg); border-color: var(--sch-sick-br); }
.sch-cal-day.status.sick .sch-cal-val { color: var(--sch-sick-ink); }
.sch-cal-day.none { background: transparent; border-style: dashed; }
.sch-cal-day.none .sch-cal-val { color: var(--muted); }
/* Выбранный день — кольцо, а не заливка: заливка закрасила бы цвет своей
   смены, ради которого календарь и раскрашен. */
.sch-cal-grid .sch-cal-day.is-selected { box-shadow: 0 0 0 2px var(--brand); border-color: var(--brand); }
.sch-cal-grid .sch-cal-day.is-today .sch-cal-num { color: var(--brand-dark); }
.sch-cal-grid .sch-cal-day.is-today .sch-cal-num { font-weight: 900; }
.sch-cal-duty { display: inline-block; width: 6px; height: 6px; border-radius: var(--r-round); background: var(--brand); margin-left: 5px; vertical-align: middle; font-style: normal; }
.sch-cal-away { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sch-cal-hint { margin: 0; font-size: 11.5px; color: var(--muted); font-weight: 600; text-align: center; }

/* ── команда: месяц таблицей ── */
.sch-month { padding: 0; overflow: auto; }
.sch-month-row { display: grid; grid-template-columns: 148px repeat(31, minmax(28px, 1fr)); gap: 2px; padding: 0 12px; min-width: 1180px; }
.sch-month-head { position: sticky; top: 0; z-index: 2; background: var(--surface-card-2); border-bottom: 1px solid var(--line); padding-top: 8px; padding-bottom: 8px; }
.sch-month-col { display: grid; justify-items: center; line-height: 1.15; }
.sch-month-col i { font-style: normal; font-size: 8.5px; font-weight: 800; color: var(--muted); }
.sch-month-col b { font-size: 10px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.sch-month-col.is-today b { background: var(--brand); color: #fff; border-radius: var(--r-hair); padding: 0 3px; }
.sch-month-row:not(.sch-month-head) { padding-top: 2px; padding-bottom: 2px; border-top: 1px solid var(--line-soft); }
.sch-month-row.is-me { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.sch-month-row.is-me .sch-month-person { color: var(--brand-dark); }
.sch-month-person { display: flex; align-items: center; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.sch-month-cell { display: grid; place-items: stretch; }
.sch-month .sch-group-head { padding-left: 12px; }
/* В таблице месяца клетка узкая при любом экране, поэтому подпись всегда
   короткая: «9–18» и «В». Полное время — в подсказке при наведении. */
.sch-chip.is-tiny { min-height: 22px; padding: 0 1px; border-radius: var(--r-hair); font-size: 8.5px; letter-spacing: -.04em; gap: 1px; }
.sch-chip.is-tiny { position: relative; }
.sch-chip.is-tiny .sch-full { display: none; }
.sch-chip.is-tiny .sch-short { display: inline; }
/* Значки уходят в угол клетки: в строке они отнимали ширину у времени,
   и «09–18 Д» не помещалось в тридцать пикселей. */
.sch-chip.is-tiny .sch-mark { position: absolute; width: auto; height: auto; border-radius: 0; background: transparent; }
.sch-chip.is-tiny .sch-mark.duty { top: 1.5px; right: 1.5px; width: 4px; height: 4px; border-radius: var(--r-round); background: var(--brand); font-size: 0; }
.sch-chip.is-tiny .sch-mark.away { right: 1.5px; bottom: 0; font-size: 7px; line-height: 1; color: var(--text-soft); }
.sch-chip.is-tiny .sch-mark { width: 11px; height: 11px; font-size: 7.5px; border-radius: var(--r-hair); }

/* ── команда: один день списком ── */
.sch-day { padding: 0 16px 14px; }
.sch-day-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 4px; }
.sch-day-title h3 { margin: 0; font-size: 16px; font-weight: 800; }
.sch-day-title span { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.sch-day .sch-group-head { padding-left: 0; padding-right: 0; }
.sch-day-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.sch-day-person.is-off { opacity: .62; }
.sch-day-person.is-me { background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: var(--r-control); padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.sch-day-copy { min-width: 0; display: grid; gap: 1px; }
.sch-day-copy b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-day-copy small { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  /* Клетка уже полной подписи — переходим на короткую: «В» вместо
     «Выходной», «9–18» вместо «09:00–18:00». Полное время остаётся
     в подсказке при нажатии и наведении. */
  .sch-cal-val .sch-full, .sch-cal-day .sch-cal-away { display: none; }
  .sch-cal-val .sch-short { display: inline; }
  .sch-daycards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .sch-controls-wide { display: none; }
  .sch-controls-narrow { display: block; }
  .sch-only-wide { display: none; }
  .sch-only-narrow { display: block; }
  .sch-board { gap: 12px; }
  .sch-mine-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sch-next { text-align: left; }
  .sch-cal-weekdays, .sch-cal-grid { gap: 4px; }
  .sch-cal-day { min-height: 50px; padding: 4px 3px; gap: 2px; justify-items: center; border-radius: var(--r-chip); }
  .sch-cal-num { font-size: 11px; gap: 0; }
  /* В клетку 36 пикселей слово не помещается — сегодняшнее число становится
     залитой плашкой, это тот же сигнал без текста. */
  .sch-cal-num i { display: none; }
  .sch-cal-grid .sch-cal-day.is-today .sch-cal-num { background: var(--brand); color: #fff;
    border-radius: var(--r-hair); padding: 0 4px; }
  .sch-cal-val { font-size: 11px; letter-spacing: -.02em; }
  /* «Моя неделя» плитками занимала на телефоне весь экран — здесь это
     список из семи строк, он вчетверо ниже. */
  .sch-daycards { grid-template-columns: 1fr; gap: 0; }
  .sch-daycard {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 2px; border: 0; border-top: 1px solid var(--line-soft);
    border-radius: 0; background: transparent;
  }
  .sch-daycard:first-child { border-top: 0; }
  .sch-daycard.is-today { box-shadow: none; border-radius: var(--r-control); padding-left: 8px; padding-right: 8px;
    margin: 0 -8px; background: color-mix(in srgb, var(--brand) 6%, transparent); }
  /* Сетка команды шире экрана — прокручивается вбок, фамилия остаётся на
     месте. Раньше правые дни просто обрезались и добраться до них было нельзя. */
  .sch-week { overflow-x: auto; }
  .sch-week-row { grid-template-columns: 118px repeat(7, minmax(46px, 1fr)); gap: 4px; padding: 0 10px; min-width: 500px; }
  .sch-week-person { position: sticky; left: 0; z-index: 1; background: var(--panel); padding-right: 6px; }
  .sch-week-head .sch-week-person, .sch-week-counts .sch-week-person { background: var(--surface-card-2); }
  .sch-week-row.is-me .sch-week-person { background: color-mix(in srgb, var(--brand) 6%, var(--panel)); }
  .sch-week-person b { font-size: 12px; }
  .sch-week-person .sch-ava { display: none; }
  .sch-week .sch-full { display: none; }
  .sch-week .sch-short { display: inline; }
  .sch-week .sch-chip { min-height: 26px; padding: 0 3px; font-size: 10.5px; gap: 2px; }
  .sch-week .sch-mark { width: 12px; height: 12px; font-size: 8px; border-radius: var(--r-hair); }
  .sch-day { padding: 0 12px 12px; }
}

/* ── График: панель фильтров на телефоне ────────────────────────────────
   Полосы кнопок были inline-grid и растягивались по содержимому: три центра
   давали 431 пиксель при экране 375. У страницы overflow-x:hidden, поэтому
   лишнее не прокручивалось, а просто срезалось — вместе со временем смен
   в списке дня, который стоял ниже. Теперь полоса шириной с экран, а кнопки
   внутри неё прокручиваются пальцем. */
@media (max-width: 720px) {
  .schedule-page .schedule-section-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
  }
  .schedule-page .schedule-final-segment,
  .schedule-page .schedule-final-tabs,
  .schedule-page .schedule-final-grouping {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .schedule-page .schedule-section-tabs::-webkit-scrollbar,
  .schedule-page .schedule-final-segment::-webkit-scrollbar,
  .schedule-page .schedule-final-tabs::-webkit-scrollbar,
  .schedule-page .schedule-final-grouping::-webkit-scrollbar { display: none; }
  /* Элементы сетки по умолчанию не сжимаются уже своего содержимого —
     именно это и растягивало всю страницу. */
  .schedule-page .schedule-final-row,
  .schedule-page .schedule-final-row > *,
  .schedule-page .sch-controls-narrow,
  .schedule-page .mobile-filter-group,
  .schedule-page .mobile-filter-body,
  .schedule-page .mobile-filter-summary { min-width: 0; max-width: 100%; }
}

/* Подсказка обещает то, чего на компьютере не происходит: список дня показан
   только на узком экране, а на широком под календарём и так лежит таблица
   команды за весь месяц. */
@media (min-width: 721px) {
  .sch-cal-hint { display: none; }
}

/* Выгрузка расписания автобусов. Класс кнопки — свой, а не общий .quiet:
   тот переопределён в разделах десятком правил, вплоть до display:none. */
.bus-toolbar-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Метрики повторяют соседнюю «+ Добавить рейс»: рядом стоящие кнопки разной
   высоты и скругления смотрелись как чужие друг другу. */
.bus-export-btn {
  white-space: nowrap;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface-card);
  color: #536982;
  font-size: 13px;
  font-weight: 700;
}
.bus-export-btn:hover {
  border-color: rgba(162, 26, 71, .45);
  color: var(--brand-dark);
}

/* Перед скачиванием показываем состав выгрузки: иначе не видно, что «Все
   центры» дают отдельный лист на каждую пару «центр + автобус». */
.bus-export-lead {
  margin: -4px 0 2px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.bus-export-preview {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  padding: 12px 14px;
  margin: 6px 0 12px;
  font-size: 12.5px;
}
.bus-export-preview b {
  display: block;
  color: var(--brand-dark);
  font-size: 13px;
}
.bus-export-preview ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--muted);
}
.bus-export-empty {
  margin: 0;
  color: var(--muted);
}
.bus-export-form .primary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .bus-toolbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
  }
}

/* Подсветка карточки под курсором в styles.css написана через
   `.calendar-view-week`, хотя оба вида рисует один calendarTimeGridHtml.
   Повторяем её для дня: там карточки накладываются сильнее, и без подъёма
   наверх до нижней не добраться. z-index обязательно с !important — у каждого
   блока он свой, проставлен инлайном. */
.calendar-view-day .calendar-block:hover {
  z-index: 99 !important;
  transform: translateY(-1px);
  border-color: var(--block-color, var(--accent));
  box-shadow: 0 8px 20px rgba(24, 45, 72, .16);
}

/* Закончившиеся мероприятия гаснут, чтобы предстоящие читались первыми.
   Идущее прямо сейчас не гаснет: класс вешается по времени окончания.
   `.is-vacation` тоже играет прозрачностью — это правило идёт позже и его
   перебивает, так что каникулы в прошлом бледнеют ровно так же, как всё
   остальное прошлое, а не вдвое сильнее. */
.calendar-block.is-past,
.calendar-month-pill.is-past {
  opacity: .42;
}

/* Карточка под курсором и так выходит вперёд — заодно возвращаем ей полную
   яркость, чтобы прошедшее можно было прочитать. */
.calendar-view-week .calendar-block.is-past:hover,
.calendar-view-day .calendar-block.is-past:hover {
  opacity: 1;
}

/* Дневной вид: столбец — локация, а не «что с чем пересеклось». Шапка столбца
   несёт цветную точку локации и число занятий, чтобы свободную комнату было
   видно, не вчитываясь. */
.calendar-loc-heads .calendar-loc-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 9px 7px 10px;
  border-right: 1px solid var(--cal-dayline);
  font-size: 10.5px;
}
.calendar-loc-head i {
  width: 8px;
  height: 8px;
  border-radius: var(--r-round);
  flex: none;
}
.calendar-loc-head b {
  min-width: 0;
  font-weight: 800;
  line-height: 1.15;
  /* Столбцы узкие, и заголовок обрезался посередине буквы. `break-word`, а не
     `anywhere`: слово рвётся только если целиком не влезает в строку, поэтому
     «Тренажерный зал» переносится по пробелу, а не как «Тренажерны / й зал». */
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.calendar-loc-head em {
  margin-left: auto;
  font-style: normal;
  font-weight: 800;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.calendar-loc-head.is-empty { background: rgba(240, 244, 249, .55); }
.calendar-loc-head.is-empty b { color: var(--muted); font-weight: 700; }
/* У свободной комнаты нечего считать, а место под название нужнее. */
.calendar-loc-head.is-empty em { display: none; }

/* Линия «сейчас» лежит поверх всех столбцов сразу — отсюда и точка отсчёта. */
.calendar-view-day .calendar-grid-columns { position: relative; }

/* В неделе внутренняя обёртка тянется по содержимому — семь столбцов по 140px
   иначе не прокрутить. В дне столбцов десять, и от max-content они раздувались
   до двух экранов: здесь ширину задаёт сама сетка (min-width инлайном). */
.calendar-view-day .calendar-grid-inner { min-width: 100%; }

/* Штриховка вместо пустоты: столбец свободной комнаты не должен читаться как
   «сюда просто не поместились карточки». */
.calendar-grid-column.is-empty {
  background: repeating-linear-gradient(135deg,
    transparent 0 7px,
    var(--cal-hourline) 7px 8px,
    transparent 8px 14px);
}

/* Выбор раскладки дневного календаря стоит рядом с темой и компактным режимом,
   поэтому подпись под ним держим тише самой настройки. */
.profile-setting-select small {
  color: var(--muted);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.45;
}

/* Фотография внутри кружка аватара. Обёртки у разных мест свои — у комментария
   одна, у графика другая, — поэтому картинка просто заполняет родителя и
   наследует его скругление. object-fit:cover нужен, чтобы портрет не сплющило. */
.ava-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Круг задаём самой фотографии, а не обёртке. Обёртки достались от плиток с
     инициалами и скруглены по-разному — 9 px в графике, 13–16 px в
     комментариях, 50% в боковой панели. С буквами разнобой не бросался в
     глаза, с лицами читался как «местами кружок, местами обрезанный».
     Круг вписан в квадрат, поэтому скругление обёртки его не задевает. */
  border-radius: var(--r-round);
}
/* Там, где кружок рисовался фоном и текстом, при фотографии фон уже не нужен. */
:is(.comment-avatar, .cmdai-message-avatar, .sch-ava, .initial, span):has(> .ava-img) {
  background: none;
  padding: 0;
  overflow: hidden;
}

/* Обрезка фотографии профиля. Квадратное окно, круглая маска поверх — кружок
   показывает ровно то, что попадёт в аватар. */
.avatar-crop { padding: 22px; display: grid; gap: 12px; }
.avatar-crop h2 { margin: 0; }
.avatar-crop-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.avatar-crop-view {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 2px auto 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #101a2b;
  cursor: grab;
  touch-action: none;
}
.avatar-crop-view:active { cursor: grabbing; }
.avatar-crop-view img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;
}
/* Дырка в затемнении — она же граница будущего аватара. */
.avatar-crop-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 122px at 50% 50%, transparent 121px, rgba(12, 20, 33, .62) 122px);
}
.avatar-crop-mask::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 244px;
  height: 244px;
  margin: -122px 0 0 -122px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-round);
}
.avatar-crop-zoom { display: flex; align-items: center; gap: 12px; }
.avatar-crop-zoom span { color: var(--muted); font-weight: 900; }
.avatar-crop-zoom input { flex: 1; }
.avatar-crop-hint { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

/* Имя сотрудника в графике ведёт на его страницу. */
.sch-week-person.is-clickable,
.sch-day-person.is-clickable { cursor: pointer; }
.sch-week-person.is-clickable:hover b,
.sch-day-person.is-clickable:hover b { color: var(--brand-dark); }
.sch-day-person.is-clickable:hover { background: var(--surface-hover); }

/* Страница коллеги */
.employee-head { display: flex; gap: 22px; align-items: flex-start; }
.employee-head .profile-avatar { flex: none; }
.employee-ident { flex: 1; min-width: 0; }
.employee-ident h2 { margin: 0 0 4px; font-size: 20px; }
.employee-ident p { margin: 0 0 11px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.employee-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.employee-center { padding: 4px 10px; border-radius: var(--r-chip); background: #f1e1e6; color: #7b1436; font-size: 11px; font-weight: 800; }
.employee-status { padding: 4px 10px; border-radius: var(--r-chip); background: var(--surface-card-2); color: var(--muted); font-size: 11px; font-weight: 800; }
.employee-status.is-live { background: #ddf8f1; color: #0f6b52; }
.employee-contacts { display: flex; flex-wrap: wrap; gap: 9px; }
.employee-btn { display: inline-block; padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card); font-size: 12px; font-weight: 700; color: var(--text); text-decoration: none; }
.employee-btn.is-empty { color: var(--muted); font-weight: 600; }
.employee-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
.employee-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.employee-cal-wd { font-style: normal; text-align: center; font-size: 10px; color: var(--muted); font-weight: 800; }
.employee-cal-cell { font-style: normal; display: grid; place-items: center; height: 34px; border-radius: var(--r-chip);
  font-size: 12px; font-weight: 700; background: var(--surface-card-2); color: var(--muted); border: 1px solid transparent; }
.employee-cal-cell.is-blank { background: transparent; }
.employee-cal-cell.is-work { background: #ddf8f1; color: #0f6b52; }
.employee-cal-cell.is-off { background: #fff7df; color: #8b6817; }
.employee-cal-cell.is-vac { background: #f1edff; color: #7759cf; }
.employee-cal-cell.is-sick { background: #fff0f3; color: #c4485a; }
.employee-cal-cell.is-today { border-color: var(--brand-dark); }
.employee-cal-legend { display: flex; gap: 15px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.employee-cal-legend span { display: flex; align-items: center; gap: 6px; }
.employee-cal-legend b { width: 11px; height: 11px; border-radius: var(--r-hair); display: block; }
.employee-cal-legend b.is-work { background: #ddf8f1; }
.employee-cal-legend b.is-off { background: #fff7df; }
.employee-cal-legend b.is-vac { background: #f1edff; }
.employee-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.employee-next li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r-control); font-size: 12.5px; }
.employee-next li.is-now { border-color: #bfe9db; background: #f2fbf8; }
.employee-next li b { font-weight: 800; }
.employee-next li span { color: var(--brand-dark); font-weight: 800; font-variant-numeric: tabular-nums; }
.employee-next li u { grid-column: 1 / -1; text-decoration: none; font-size: 11px; color: var(--muted); }
.employee-next li em { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: #b3651a; font-weight: 700; }
.employee-privacy { margin: 16px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.profile-work { display: grid; gap: 16px; }
@media (max-width: 900px) {
  .employee-grid { grid-template-columns: 1fr; }
  .employee-head { flex-direction: column; }
}

/* Профиль: шапка одной полосой, вкладки таблетками под ней. */
.profile-page .profile-head {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.profile-page .profile-head .profile-avatar { flex: none; }
.profile-head-ident { flex: 1; min-width: 0; }
.profile-head-ident h2 { margin: 0 0 4px; font-size: 21px; }
.profile-head-ident p { margin: 0 0 11px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.profile-head-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.profile-head-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--text); }
.profile-head-actions { flex: none; }
.profile-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
}
.profile-nav-pills button {
  flex: none;
  width: auto;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-card);
  color: var(--muted);
  font-weight: 800;
  font-size: 12.5px;
}
.profile-nav-pills button.selected {
  background: #f1e1e6;
  border-color: #e7becc;
  color: #7b1436;
}
.profile-nav-pills .profile-nav-divider { display: none; }
@media (max-width: 900px) {
  .profile-page .profile-head { flex-direction: column; }
  .profile-head-actions { width: 100%; }
  .profile-head-actions button { width: 100%; }
}

/* ── Профиль, содержимое вкладок ───────────────────────────────────────── */

/* Статистика: узкая полоса вместо пяти крупных карточек. */
.profile-stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.profile-stat-tile {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface-card); text-align: left; cursor: pointer;
}
.profile-stat-tile b { display: block; font-size: 21px; line-height: 1; color: var(--text); }
.profile-stat-tile span { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.profile-stat-tile:hover { border-color: rgba(162, 26, 71, .35); }

.profile-overview-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.employee-cal-summary { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.employee-cal-summary b { color: var(--text); font-size: 13.5px; }
.employee-cal-cell u { position: absolute; right: 4px; top: 4px; width: 5px; height: 5px; border-radius: var(--r-round); background: #b3651a; }
.employee-cal-cell { position: relative; }
.employee-cal-legend b.is-duty { background: #b3651a; border-radius: var(--r-round); width: 7px; height: 7px; }

/* «Моя работа»: счётчики сверху, один раздел под ними. */
.profile-work-seg { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.profile-work-seg button {
  display: flex; align-items: center; gap: 7px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-card);
  font-weight: 800; font-size: 12.5px; color: var(--muted);
}
.profile-work-seg button.is-on { background: #f1e1e6; border-color: #e7becc; color: #7b1436; }
.profile-work-seg em {
  font-style: normal; font-size: 11px; font-weight: 900; color: var(--brand-dark);
  background: #f7eef1; padding: 1px 6px; border-radius: var(--r-chip);
}
.profile-work-seg em.is-zero { color: var(--muted); background: var(--surface-card-2); }

/* Настройки строками. */
.profile-set-rows { display: grid; }
.profile-set-row { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.profile-set-row:last-child { border-bottom: 0; }
.profile-set-row > div:first-child { flex: 1; min-width: 0; }
.profile-set-row b { display: block; font-size: 12.5px; }
.profile-set-row em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--muted); }
.profile-set-select { max-width: 320px; padding: 8px 10px; }
.profile-set-time { width: 104px; padding: 8px 10px; }
.profile-choice { display: flex; border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; flex: none; }
.profile-choice button { padding: 7px 15px; font-weight: 800; font-size: 11.5px; color: var(--muted); }
.profile-choice button.is-on { background: #f1e1e6; color: #7b1436; }

.profile-switch {
  width: 38px; height: 22px; border-radius: var(--r-pill); background: #dbe3ee;
  position: relative; flex: none; transition: background .15s; padding: 0;
}
.profile-switch::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  border-radius: var(--r-round); background: #fff; box-shadow: 0 1px 3px rgba(16, 26, 43, .28); transition: left .15s;
}
.profile-switch.is-on { background: var(--brand-dark); }
.profile-switch.is-on::after { left: 19px; }

.profile-push {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-card-2);
}
.profile-push.is-on { border-color: #dff0e9; background: #f4fbf8; }
.profile-push > div:first-child { flex: 1; min-width: 0; }
.profile-push b { display: block; font-size: 12.5px; }
.profile-push.is-on b { color: #0f6b52; }
.profile-push em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--muted); }
.profile-push-actions { display: flex; gap: 7px; flex: none; }

.profile-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.profile-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card); font-size: 12px;
}

.profile-security { padding: 0; }
.profile-security summary { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px; cursor: pointer; }
.profile-security summary b { font-size: 15px; }
.profile-security summary span { font-size: 11px; color: var(--muted); }
.profile-security .profile-set-rows { padding: 0 18px 14px; }

@media (max-width: 900px) {
  .profile-stat-strip { grid-template-columns: 1fr 1fr; }
  .profile-overview-cols, .profile-cats { grid-template-columns: 1fr; }
  .profile-set-row { flex-wrap: wrap; }
}

/* Заявки, ждущие решения в CRM. Возраст заявки — главный сигнал страницы,
   поэтому он и стоит первым, и красит строку. */
.crm-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.crm-tile { padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-card); }
.crm-tile b { display: block; font-size: 24px; line-height: 1; color: var(--text); }
.crm-tile span { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.crm-tile em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; color: var(--text-soft); }
.crm-tile.is-old { background: linear-gradient(160deg, #fdeef0, var(--surface-card)); border-color: #f0ccd2; }
.crm-tile.is-old b { color: #b3243c; }
.crm-tile.is-warn { background: linear-gradient(160deg, #fff5e8, var(--surface-card)); border-color: #f2ddc4; }
.crm-tile.is-warn b { color: #b3651a; }

.crm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.crm-filters button { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card); font-weight: 800; font-size: 12px; color: var(--muted); }
.crm-filters button.is-on { background: #f1e1e6; border-color: #e7becc; color: #7b1436; }
.crm-filters button.is-ghost { margin-left: auto; color: var(--brand-dark); border-color: #e8cdd8; }
.crm-select { padding: 8px 10px; }
.crm-sep { width: 1px; height: 20px; background: var(--line); }

.crm-table-wrap { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface-card); }
.crm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.crm-table th { text-align: left; padding: 10px 14px; background: var(--surface-card-2);
  border-bottom: 1px solid var(--line); font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; }
.crm-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.crm-table tr:last-child td { border-bottom: 0; }
.crm-table tr.is-old { background: #fdf3f4; }
.crm-table tr.is-warn { background: #fffaf2; }
.crm-age { white-space: nowrap; }
.crm-age b { display: block; font-size: 12.5px; font-weight: 800; }
.crm-age span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
tr.is-old .crm-age b { color: #b3243c; }
tr.is-warn .crm-age b { color: #b3651a; }
.crm-who b { display: block; font-weight: 700; }
.crm-who a { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.crm-course { display: inline-block; padding: 4px 9px; border-radius: var(--r-chip); background: var(--surface-card-2);
  font-size: 11px; font-weight: 700; color: #4a5b73; }
.crm-center { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.crm-act { text-align: right; white-space: nowrap; }
.crm-open { font-size: 11.5px; font-weight: 800; color: var(--brand-dark); text-decoration: none; }
.crm-note { margin: 14px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) {
  .crm-strip { grid-template-columns: 1fr 1fr; }
  .crm-table thead { display: none; }
  .crm-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft); }
  .crm-table td { border: 0; padding: 2px 0; }
  .crm-act { grid-column: 1 / -1; text-align: left; margin-top: 4px; }
}

/* Окно обрезки открывается поверх формы профиля, а не вместо неё. */
dialog.dialog-stacked { width: min(420px, calc(100% - 30px)); }

/* ============================================================
   СПЕЦЗАНЯТИЯ ПО ЧЕТВЕРГАМ (Курсы ФМБА)
   Время приёма в CRM не хранится — его назначает портал, поэтому
   у слотов есть собственный выпадающий список, а «✓» отмечает тех,
   кого поставили вручную: их автораздача больше не двигает.
   ============================================================ */
.fmba-board-special { padding: 0; background: transparent; border: 0; box-shadow: none; }
.fmba-special { display: grid; gap: 14px; }
.fmba-special-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-card);
}
.fmba-special-head h3 { margin: 0; font-size: 15px; }
.fmba-special-head p { margin: 4px 0 0; font-size: 11px; color: var(--muted); font-weight: 700; }
.fmba-special-head-actions { display: flex; align-items: center; gap: 10px; }
.fmba-special-sync { font-size: 10.5px; font-weight: 800; color: var(--muted); }
.fmba-special-sync.is-loading { color: #1883f5; }
.fmba-special-sync.is-error { color: #d54d5a; }

.fmba-special-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.fmba-special-card {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-card);
  padding: 16px; box-shadow: 0 10px 26px rgba(42, 65, 103, .06);
}
.fmba-special-card > header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.fmba-special-card h4 { margin: 0; font-size: 14px; }
.fmba-special-card > header p { margin: 5px 0 0; font-size: 11px; color: var(--muted); font-weight: 700; }
.fmba-special-count { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fmba-special-count b { font-size: 20px; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.fmba-capacity-static { font-size: 11px; color: var(--muted); font-weight: 700; }
.fmba-capacity { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-weight: 700; }
.fmba-capacity input {
  width: 58px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-chip);
  background: var(--surface-card-2); color: var(--text); font-weight: 800; text-align: center;
}

.fmba-special-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: fmba-person; }
.fmba-special-people li {
  display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.fmba-special-people li:last-child { border-bottom: 0; }
.fmba-special-people li::before {
  counter-increment: fmba-person; content: counter(fmba-person);
  width: 22px; flex: none; text-align: center; font-size: 10px; font-weight: 800; color: var(--muted);
}
.fmba-special-people li > .fmba-person { flex: 1; min-width: 0; }
.fmba-special-empty { margin: 0; padding: 18px 0; text-align: center; color: var(--muted); font-size: 11.5px; }
.fmba-special-warn {
  margin: 0 0 10px; padding: 9px 11px; border-radius: var(--r-control);
  background: #fff4cf; color: #8a6a12; font-size: 11px; font-weight: 800;
}
[data-theme=dark] .fmba-special-warn { background: rgba(231, 180, 22, .16); color: #e7b416; }

.fmba-slot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fmba-slot {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.fmba-slot:last-child { border-bottom: 0; }
.fmba-slot-time { font-size: 12px; font-weight: 800; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.fmba-slot.is-free .fmba-slot-time { color: var(--muted); }
.fmba-slot-free { font-size: 11px; color: var(--muted); }
.fmba-slot-body { min-width: 0; display: grid; gap: 6px; }

.fmba-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.fmba-person-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fmba-person-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fmba-person-name b { font-size: 12.5px; line-height: 1.25; overflow-wrap: break-word; }
.fmba-person-meta { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.fmba-person-phone { color: var(--muted); text-decoration: none; }
.fmba-person-phone:hover { color: var(--brand); }
.fmba-person-pin { font-size: 10px; color: #10a37f; font-weight: 900; flex: none; }
.fmba-person-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.fmba-slot-select {
  padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--r-chip);
  background: var(--surface-card-2); color: var(--text); font-size: 11px; font-weight: 800;
}
.fmba-person-crm { font-size: 10.5px; font-weight: 800; color: var(--brand-dark); text-decoration: none; white-space: nowrap; }
.fmba-person-crm:hover { text-decoration: underline; }
.fmba-special-waiting {
  margin-top: 14px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-card);
  background: var(--surface-card-2); display: grid; gap: 8px;
}
.fmba-special-waiting h4 { margin: 0; font-size: 12px; }
.fmba-special-waiting p { margin: 0; font-size: 10.5px; color: var(--muted); }

@media (max-width: 1100px) { .fmba-special-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .fmba-person { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fmba-person-actions { width: 100%; }
  .fmba-slot { grid-template-columns: 46px minmax(0, 1fr); align-items: start; }
}

/* Спецзанятия вынесены на отдельную страницу: панель та же, что у курсов,
   но без фильтра по курсу и поиска участника — они здесь ни к чему. */
.special-page .fmba-desktop-toolbar { margin-bottom: 14px; }
.special-page .fmba-desktop-row1 { min-height: 0; }
.special-page .fmba-special-sync { margin-right: 6px; white-space: nowrap; }
.special-page .fmba-board-special { padding: 0; }
@media (max-width: 900px) {
  .special-page .fmba-desktop-row2 { flex-wrap: wrap; row-gap: 10px; }
  .special-page .schedule-desktop-spacer { display: none; }
}

/* Ссылка «для всего проекта»: пока галочка стоит, выбор центра не нужен. */
.link-center-field.is-disabled { opacity: .5; }
.link-center-field.is-disabled select { pointer-events: none; }

/* Ссылка восстановления под формой входа. */
.auth-forgot {
  display: block; width: 100%; margin-top: 4px; padding: 10px;
  background: none; border: 0; color: var(--muted);
  font-size: 12px; font-weight: 700; text-align: center;
}
.auth-forgot:hover:not([disabled]) { color: var(--brand); }
.auth-forgot[disabled] { opacity: .6; cursor: default; }

/* ============================================================
   ПРИМИТИВЫ. Не собираем заново — берём эти.

   .ui-row  — строка списка: точка состояния, название с
              пояснением, срок справа. Сегодня в графике,
              задачах и заявках три разные строки; новые
              списки делаем этой.
   .ui-state — плашка состояния. Цвет берётся из набора и
              означает только состояние.
   ============================================================ */

.ui-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--row-gap);
  align-items: center;
  padding: var(--row-pad-y) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--row-title);
}
.ui-row:last-child { border-bottom: 0; }

/* Точка состояния. Без модификатора — нейтральная. */
.ui-row > .ui-dot {
  width: var(--row-dot);
  height: var(--row-dot);
  border-radius: var(--r-round);
  background: var(--state-idle);
  font-style: normal;
  flex: none;
}
.ui-row > .ui-dot.is-ok { background: var(--state-ok); }
.ui-row > .ui-dot.is-warn { background: var(--state-warn); }
.ui-row > .ui-dot.is-crit { background: var(--state-crit); }
.ui-row > .ui-dot.is-info { background: var(--state-info); }

.ui-row-main { min-width: 0; }
.ui-row-main b { display: block; font-weight: 700; line-height: 1.3; }
.ui-row-main small {
  display: block;
  margin-top: 2px;
  font-size: var(--row-meta);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-row-aside {
  font-size: var(--row-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.ui-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  background: var(--state-idle-bg);
  color: var(--state-idle);
}
.ui-state.is-ok { background: var(--state-ok-bg); color: var(--state-ok); }
.ui-state.is-warn { background: var(--state-warn-bg); color: var(--state-warn); }
.ui-state.is-crit { background: var(--state-crit-bg); color: var(--state-crit); }
.ui-state.is-info { background: var(--state-info-bg); color: var(--state-info); }

@media (max-width: 640px) {
  .ui-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
  .ui-row-aside { grid-column: 2; text-align: left; }
}

/* Галочка остаётся галочкой.
   Разделы задают полям формы width:100% (links-v68.css и другие), под это
   правило попадал и флажок — он растягивался на всю строку, а подпись
   сжималась до нескольких символов. Общий слой возвращает флажку размер. */
.check-row input[type="checkbox"],
.check-row input[type="radio"],
.checkline input[type="checkbox"],
.checkline input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: none;
  padding: 0;
}
.check-row span,
.checkline span { flex: 1 1 auto; min-width: 0; }

/* Выбор центров у пароля: тот же список галочек, что и у документов. */
.password-edit-form .password-center-field { display: grid; gap: 4px; }
.password-edit-form .password-center-field > b { font-size: 11px; font-weight: 700; }
.password-edit-form .password-center-field > small { color: var(--muted); font-size: 10px; }
.password-edit-form .document-center-checks { display: grid; gap: 6px; margin-top: 4px; max-height: 210px; overflow-y: auto; }

/* ============================================================
   КАЛЕНДАРЬ НА ТЕЛЕФОНЕ

   Почасовая сетка на 375 пикселях нечитаема: семь колонок дают по
   50 пикселей на день, мероприятия налезают друг на друга. Вместо
   неё — список по дням; сетка остаётся на компьютере.
   ============================================================ */

/* --- Панель: была треть экрана до первого мероприятия ---
   Порядок в разметке: ☰, «Сегодня», ←, →, дата. На телефоне переставляем
   через order в одну строку: ☰ · ← · дата · → · «Сегодня». --- */
@media (max-width: 720px) {
  .calendar-page-narrow .calendar-toolbar {
    display: grid;
    gap: var(--sp-2);
    padding: 10px 12px;
  }
  .calendar-page-narrow .calendar-toolbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .calendar-page-narrow .calendar-toolbar-left h2 {
    order: 3;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
  }
  .calendar-page-narrow .calendar-sidebar-toggle-btn { order: 1; flex: none; }
  .calendar-page-narrow .calendar-toolbar-left > .calendar-toolbar-nav:nth-child(3) { order: 2; }
  .calendar-page-narrow .calendar-toolbar-left > .calendar-toolbar-nav:nth-child(4) { order: 4; }
  .calendar-page-narrow .calendar-toolbar-btn { order: 5; flex: none; font-size: 11px; padding: 7px 10px; }
  .calendar-page-narrow .calendar-toolbar-nav {
    width: 32px; height: 32px; padding: 0; flex: none;
    display: grid; place-items: center;
  }

  .calendar-page-narrow .calendar-toolbar-right {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-2);
    align-items: center;
  }
  .calendar-page-narrow .calendar-mode-tabs { grid-column: 1 / -1; display: flex; }
  .calendar-page-narrow .calendar-mode-tabs button { flex: 1; font-size: 12px; padding: 8px 4px; }
  .calendar-page-narrow .calendar-export-btn { font-size: 11px; padding: 9px 11px; white-space: nowrap; }
  .calendar-page-narrow .calendar-toolbar-right > .primary { font-size: 12px; padding: 10px 12px; }
}

/* --- Список по дням --- */
.calendar-board-agenda { padding: 0; }
.cal-agenda { display: grid; gap: var(--sp-3); padding: var(--sp-3); }
.cal-agenda-day {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-card-2);
  overflow: hidden;
}
.cal-agenda-day.is-today { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }

.cal-agenda-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-card);
}
.cal-agenda-head b { font-size: 14px; }
.cal-agenda-head span { font-size: 11px; color: var(--muted); font-weight: 700; }
.cal-agenda-day.is-today .cal-agenda-head b { color: var(--brand); }
.cal-agenda-head i {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  background: var(--state-idle-bg);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}

.cal-agenda-list { display: grid; }
.cal-agenda-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  width: 100%;
  padding: 11px 14px 11px 11px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-left: 3px solid var(--item-color, var(--accent));
  background: var(--surface-card);
  text-align: left;
  color: inherit;
}
.cal-agenda-list > .cal-agenda-item:first-child { border-top: 0; }
.cal-agenda-item:active { background: var(--surface-hover); }
.cal-agenda-item.is-past { opacity: .55; }
.cal-agenda-item.is-vacation { background: repeating-linear-gradient(135deg, var(--surface-card), var(--surface-card) 9px, var(--surface-card-2) 9px, var(--surface-card-2) 18px); }

.cal-agenda-time { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.cal-agenda-time b { font-size: 13px; font-weight: 800; }
.cal-agenda-time small { font-size: 10.5px; color: var(--muted); }
.cal-agenda-body { display: grid; gap: 3px; min-width: 0; }
.cal-agenda-body > b { font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.cal-agenda-body > small { font-size: 11px; color: var(--muted); overflow-wrap: break-word; }
.cal-agenda-empty { margin: 0; padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* --- Месяц на телефоне: точки вместо обрезанных названий --- */
.cal-month-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; padding: 2px 0; }
.cal-month-dots i {
  width: 6px; height: 6px; border-radius: var(--r-round);
  background: var(--pill-color, var(--accent)); display: block; font-style: normal;
}
.cal-month-dots span { font-size: 9px; font-weight: 800; color: var(--muted); }
@media (max-width: 720px) {
  .calendar-page-narrow .calendar-month-cell { min-height: 58px; }
  .calendar-page-narrow .calendar-month-cell-body { padding: 0 4px 4px; }
}

/* --- Окно выгрузки: афиша и точный вид --- */
.afisha-qr-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); }
.afisha-qr-row > span { font-size: 12px; font-weight: 700; }


/* Атрибут hidden должен побеждать: у .export-tuning стоит display:grid, и
   скрытые блоки показывались всё равно — поля «размер шрифта» и «высота
   строки» были видны при снятой галочке, а блок афиши не прятался. */
.calendar-export-form [hidden] { display: none !important; }

/* Точный вид — окно шире обычного диалога: страницы А4 в колонке 440 px
   нечитаемы, а смотреть их и есть смысл этого окна. */

/* QR канала в карточке центра */
.afisha-qr-field { display: grid; gap: 6px; grid-column: 1 / -1; }
.afisha-qr-field > b { font-size: 11px; font-weight: 700; }
.afisha-qr-box {
  display: grid; place-items: center; width: 108px; height: 108px;
  border: 1px dashed var(--line); border-radius: var(--r-chip);
  background: var(--surface-card-2); overflow: hidden;
}
.afisha-qr-box img { width: 100%; height: 100%; object-fit: contain; display: block; }
.afisha-qr-box img[hidden] { display: none; }
.afisha-qr-empty { font-size: 10.5px; color: var(--muted); text-align: center; padding: 0 8px; }
.afisha-qr-field > label { justify-self: start; }

/* ============================================================
   ГЛАВНАЯ: рабочий стол вместо витрины

   Было шесть карточек одинакового веса, половина пустовала.
   Стало: строка состояния, два главных блока и лента ближайшего.
   Число в очереди означает срок, а не количество, — цвет полосы
   говорит, пора ли беспокоиться.
   ============================================================ */

/* minmax(0,1fr), а не auto: колонка по умолчанию тянется под самый широкий
   элемент, и лента ближайшего вместо своей прокрутки разъезжала страницу. */
.home2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-content: start;
  /* Тёмная тема: бордовый --brand на тёмной карточке читается плохо, а мелкие
     подписи («Разобрать →», время события) набраны им же. Держим отдельный
     осветлённый оттенок акцента и берём его только для этих подписей. */
  --home-accent: var(--brand); }
[data-theme=dark] .home2 { --home-accent: #e88ca5; }

.home2-context {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: 14px 18px; background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
.home2-context .date { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.home2-context .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.home2-context > .primary { margin-left: auto; }

.home2-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-3); align-items: start; }

.home2-card {
  background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.home2-card { min-width: 0; }
.home2-grid > * { min-width: 0; }
/* header переносится: на телефоне подпись справа («ЦМД «Можайский»») длиннее
   заголовка и без переноса распирала карточку за край экрана. */
.home2-card > header { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: 12px; flex-wrap: wrap; }
.home2-card h4 {
  margin: 0; min-width: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.home2-card .count { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.home2-empty { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* --- Центры --- */
.home2-centers { display: grid; gap: 10px; }
.home2-center {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 13px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card-2); padding: 12px 14px 12px 0; overflow: hidden;
}
.home2-center .rail { align-self: stretch; background: var(--state-idle); }
.home2-center .rail.ok { background: var(--state-ok); }
.home2-center .rail.warn { background: var(--state-warn); }
.home2-center .rail.off { background: var(--state-idle); opacity: .5; }
.home2-center .body b { display: block; font-size: 14.5px; letter-spacing: -.01em; }
.home2-center .body > small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.home2-center .who { display: grid; gap: 5px; margin-top: 9px; }
.home2-center .who div { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.home2-center .who em { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 82px; }
.home2-center .who span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home2-center .who .duty {
  margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 800;
  color: var(--home-accent); background: color-mix(in srgb, var(--brand) 11%, transparent);
  border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap;
}
.home2-state {
  margin-right: 14px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--state-ok-bg); color: var(--state-ok);
}
.home2-state.off { background: var(--state-idle-bg); color: var(--state-idle); }
.home2-state.warn { background: var(--state-warn-bg); color: var(--state-warn); }

/* --- Очередь --- */
.home2-queue { display: grid; gap: 8px; }
.home2-q {
  display: grid; grid-template-columns: 3px 62px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card-2); padding: 10px 13px 10px 0; overflow: hidden;
  text-align: left; color: inherit; font: inherit;
}
.home2-q:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.home2-q .rail { align-self: stretch; background: var(--state-idle); }
.home2-q.warn .rail { background: var(--state-warn); }
.home2-q.crit .rail { background: var(--state-crit); }
.home2-q .age { text-align: center; }
.home2-q .age b { display: block; font-size: 18px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.home2-q .age small { font-size: 9px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.home2-q.warn .age b { color: var(--state-warn); }
.home2-q.crit .age b { color: var(--state-crit); }
.home2-q .body { min-width: 0; }
.home2-q .body b { display: block; font-size: 13px; font-weight: 700; }
.home2-q .body small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home2-q .go { font-size: 11px; font-weight: 800; color: var(--home-accent); white-space: nowrap; }

/* --- Лента ближайшего --- */
.home2-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.home2-ev {
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card-2); padding: 12px 13px; display: grid; gap: 5px; align-content: start;
}
.home2-ev .when { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--home-accent); }
.home2-ev b { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.home2-ev small { font-size: 11px; color: var(--muted); }
.home2-ev .kind {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--state-info); background: var(--state-info-bg); border-radius: var(--r-pill);
  padding: 2px 8px; justify-self: start;
}
.home2-ev .kind.bus { color: var(--state-warn); background: var(--state-warn-bg); }

/* --- Смена сотрудника --- */
.home2-shift {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-5); align-items: center;
  background: linear-gradient(112deg, #f7eaef, #f2f9ff 60%, #eaf0ff);
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 22px;
}
[data-theme=dark] .home2-shift { background: linear-gradient(112deg, rgba(160,28,76,.18), rgba(19,37,64,.4)); }
.home2-shift.is-off { background: var(--surface-card); }
.home2-shift .lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.home2-shift .big { font-size: 27px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.home2-shift .mid b { display: block; font-size: 15px; }
.home2-shift .mid small { font-size: 12.5px; color: var(--text-soft, var(--muted)); }
.home2-shift .duty {
  font-size: 10px; font-weight: 800; color: #fff; background: var(--brand);
  border-radius: var(--r-pill); padding: 7px 13px; white-space: nowrap;
}
.home2-shift .duty.warn { background: var(--state-warn-bg); color: var(--state-warn); }

/* --- Люди на смене --- */
.home2-people { display: grid; }
.home2-person {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.home2-person:last-child { border-bottom: 0; }
.home2-person .ava {
  width: 34px; height: 34px; border-radius: var(--r-round); display: grid; place-items: center;
  background: var(--surface-hover); color: var(--text-soft, var(--muted)); font-size: 11px; font-weight: 800;
}
.home2-person.is-me .ava { background: var(--brand); color: #fff; }
.home2-person b { display: block; font-size: 13px; font-weight: 700; }
.home2-person small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home2-person em { font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Ссылки чипами --- */
.home2-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.home2-chips button {
  font-size: 11.5px; font-weight: 700; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 14px; background: var(--surface-card-2); color: inherit;
}
.home2-chips button:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.home2-chips-hint { font-size: 12px; color: var(--muted); align-self: center; }
.home2-chips button.more { color: var(--home-accent); border-color: transparent; background: color-mix(in srgb, var(--brand) 11%, transparent); }

@media (max-width: 900px) {
  .home2-grid { grid-template-columns: 1fr; }
  .home2-shift { grid-template-columns: 1fr; gap: var(--sp-3); }
  .home2-context > .primary { margin-left: 0; width: 100%; }
}

/* Кнопка центра носит своё число. Центр с нулём остаётся в ряду приглушённой
   строкой, а сорванная синхронизация помечается «!»: ноль по недоступному
   центру — это не пустая очередь, и путать их нельзя. */
.crm-filters button { display: inline-flex; align-items: center; gap: 7px; }
.crm-filters button em {
  font-style: normal; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 17px; padding: 1px 5px; border-radius: var(--r-pill); text-align: center;
  background: var(--surface-hover); color: var(--muted);
}
.crm-filters button.is-on em { background: #fff; color: #7b1436; }
.crm-filters button.is-empty { color: var(--text-soft); }
.crm-filters button.is-empty em { opacity: .65; }
.crm-filters button.is-broken { border-color: var(--state-crit); color: var(--state-crit); }
.crm-filters button.is-broken em { background: var(--state-crit-bg); color: var(--state-crit); }
.crm-note.is-broken { color: var(--state-crit); font-weight: 700; }

/* ============================================================
   УВЕДОМЛЕНИЯ: лента вместо витрины карточек

   Плитка ставила все уведомления в один вес, а высоту карточки задавала
   длина чужого текста. Строка здесь фиксирована, день собирает свои
   события, повторы по одной ссылке сложены в одну строку с числом.
   ============================================================ */

.notif-page { max-width: 1000px; }

.notif-page .n2-head { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 16px; }
.notif-page .n2-head h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.notif-page .n2-head .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.notif-page .n2-head .acts button { font-size: 11.5px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); background: var(--surface-card); border-radius: var(--r-control); padding: 8px 13px; }
.notif-page .n2-head .acts button:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }

.n2-push { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); background: var(--surface-card); border-radius: var(--r-control);
  padding: 10px 14px; margin-bottom: 16px; }
.n2-push b { color: var(--text); font-size: 12.5px; }
.n2-push .dot { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--state-idle); }
.n2-push .dot.is-on { background: var(--state-ok); }
.n2-push .links { margin-left: auto; display: flex; gap: 14px; }
.n2-push .links button { font-size: 11.5px; font-weight: 700; color: var(--brand); }

.n2-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.n2-chips button { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--line); background: var(--surface-card); color: var(--muted);
  border-radius: var(--r-pill); padding: 7px 13px; }
.n2-chips button em { font-style: normal; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface-hover); border-radius: var(--r-pill); padding: 1px 6px; }
.n2-chips button.is-on { background: #f1e1e6; border-color: #e7becc; color: #7b1436; }
.n2-chips button.is-on em { background: #fff; color: #7b1436; }
[data-theme=dark] .n2-chips button.is-on { background: var(--surface-selected); border-color: rgba(214,69,117,.34); color: #e88ca5; }
[data-theme=dark] .n2-chips button.is-on em { background: rgba(0,0,0,.25); color: #e88ca5; }

.n2-day { margin-bottom: 24px; }
.n2-day h3 { margin: 0 0 9px 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); }
.n2-list { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-card);
  overflow: hidden; box-shadow: var(--shadow); }

/* Сетка живёт на строке-кнопке и на summary, а сам details остаётся блоком:
   при display:contents вложенный список схлопывался в узкую колонку. */
.n2-row { border-bottom: 1px solid var(--line-soft); color: inherit; display: block; width: 100%; text-align: left; }
button.n2-row, details.n2-row > summary {
  display: grid; grid-template-columns: 3px 36px minmax(0, 1fr) auto auto;
  align-items: center; gap: 13px; padding-right: 16px; width: 100%; }
details.n2-row > summary { list-style: none; cursor: pointer; }
details.n2-row > summary::-webkit-details-marker { display: none; }
.n2-row:last-child { border-bottom: 0; }
button.n2-row:hover, details.n2-row > summary:hover { background: var(--surface-hover); }
button.n2-row::before, details.n2-row > summary::before { content: ""; align-self: stretch; background: transparent; }
button.n2-row.is-unread::before, details.n2-row.is-unread > summary::before { background: var(--brand); }
details.n2-row[open] { background: var(--surface-card-2); }

.n2-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--state-idle-bg); color: var(--state-idle); margin: 12px 0; }
.n2-ico .nav-ico { width: 17px; height: 17px; }
.n2-row.is-warn .n2-ico { background: var(--state-warn-bg); color: var(--state-warn); }
.n2-row.is-info .n2-ico { background: var(--state-info-bg); color: var(--state-info); }
.n2-row.is-ok .n2-ico { background: var(--state-ok-bg); color: var(--state-ok); }

.n2-body { min-width: 0; padding: 11px 0; }
.n2-body b { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.n2-row.is-unread .n2-body b { font-weight: 800; color: var(--text); }
/* Одна строка и многоточие — жёсткое правило: высота строки не должна
   зависеть от того, сколько текста вставила чужая система. */
.n2-body small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.n2-count { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface-hover); color: var(--muted); border-radius: var(--r-pill); padding: 2px 8px; }
.n2-time { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

.n2-subs { padding: 2px 14px 10px 52px; display: grid; gap: 2px; }
.n2-sub { display: flex; gap: 12px; align-items: baseline; width: 100%; text-align: left;
  padding: 6px 10px; border-radius: var(--r-control); font-size: 11.5px; color: var(--muted); }
.n2-sub:hover { background: var(--surface-hover); }
.n2-sub em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.n2-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n2-sub.is-unread span { color: var(--text); font-weight: 700; }
.n2-sub i { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800;
  color: var(--brand); opacity: 0; white-space: nowrap; }
[data-theme=dark] .n2-sub i { color: #e88ca5; }
.n2-sub:hover i { opacity: 1; }

@media (max-width: 720px) {
  button.n2-row, details.n2-row > summary { grid-template-columns: 3px 34px minmax(0, 1fr) auto auto; gap: 10px; padding-right: 12px; }
  .n2-subs { padding-left: 18px; }
  .notif-page .n2-head .acts { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ПОСТАВЩИКИ

   Печатный лист отсортирован по направлению — так его вешают на стену;
   за стойкой спрашивают «что идёт сегодня» и «куда записать», поэтому
   основной вид — по дням, печатный порядок остаётся вторым.

   Зелёный — цвет «Московского долголетия», которым напечатан сам лист;
   портальный бордовый остаётся на действиях.
   ============================================================ */

/* Токены и на диалоге тоже: <dialog> живёт в body, а не внутри .sup-page,
   и кнопка «Открыть в КИС МД» получала background от несуществующей
   переменной — белый текст на белом фоне, кнопки как будто нет. */
.sup-page, dialog.sup-dialog { --md: #0e6b58; --md-soft: #e6f2ef; }
[data-theme=dark] .sup-page, [data-theme=dark] dialog.sup-dialog { --md: #4fbfa4; --md-soft: rgba(79,191,164,.14); }
.sup-page { max-width: 1240px; }

.sup-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 14px; }
.sup-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.sup-stat { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-card); padding: 13px 15px; }
.sup-stat b { display: block; font-size: 22px; line-height: 1; }
.sup-stat span { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.sup-stat em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; color: var(--text-soft); }
.sup-stat.is-warn b { color: var(--state-warn); }

.sup-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sup-bar input[type=search], .sup-bar select { border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 9px 12px; background: var(--surface-card); color: var(--text); font-size: 12.5px; }
.sup-bar input[type=search] { flex: 1 1 240px; min-width: 190px; }
.sup-centers, .sup-modes { display: flex; gap: 4px; border: 1px solid var(--line);
  background: var(--surface-card); border-radius: var(--r-control); padding: 3px; }
.sup-modes { margin-left: auto; }
.sup-centers button, .sup-modes button { font-size: 11.5px; font-weight: 700; color: var(--muted);
  border-radius: 7px; padding: 6px 12px; }
.sup-centers button.is-on, .sup-modes button.is-on { background: var(--md-soft); color: var(--md); }

.sup-days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.sup-days button { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--line); background: var(--surface-card); color: var(--muted);
  border-radius: var(--r-pill); padding: 8px 13px; }
.sup-days button em { font-style: normal; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface-hover); border-radius: var(--r-pill); padding: 1px 6px; }
.sup-days button.is-on { background: var(--md-soft); border-color: color-mix(in srgb, var(--md) 35%, transparent); color: var(--md); }
.sup-days button.is-on em { background: var(--surface-card); color: var(--md); }

.sup-day { margin-bottom: 22px; }
.sup-day h3 { display: flex; align-items: baseline; gap: 9px; margin: 0 0 9px 2px; font-size: 10.5px;
  font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--md); }
.sup-day h3 em { font-style: normal; letter-spacing: 0; text-transform: none; font-size: 11px;
  font-weight: 700; color: var(--muted); }
.sup-list { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-card);
  overflow: hidden; box-shadow: var(--shadow); }

/* Колонка отметок фиксированной ширины: пока она подгонялась под содержимое,
   строка с чатом сдвигала фамилию ответственного относительно соседних. */
.sup-row { display: grid; width: 100%; text-align: left; color: inherit;
  grid-template-columns: 104px minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, .8fr) 152px;
  gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.sup-row:last-child { border-bottom: 0; }
.sup-row:hover { background: var(--surface-hover); }
.sup-time { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text);
  border-left: 3px solid var(--md); padding-left: 10px; }
.sup-what { min-width: 0; }
.sup-what b { display: block; font-size: 13px; }
.sup-what small, .sup-where { display: block; font-size: 11.5px; color: var(--muted); letter-spacing: .008em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-what small { margin-top: 2px; }
/* Имя класса развели с формой-диалогом .sup-form: одинаковое имя давало
   метке юрформы display:grid, и «ГБПОУ МИК» разъезжалось на две строки. */
.sup-legal { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--text-soft);
  background: var(--surface-hover); border-radius: 4px; padding: 1px 5px; margin-right: 5px; white-space: nowrap; }
.sup-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11.5px; color: var(--text-soft); }
.sup-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-who em { font-style: normal; color: var(--muted); }
.sup-ava { flex: none; width: 24px; height: 24px; border-radius: var(--r-round); display: grid; place-items: center;
  font-style: normal; font-size: 9.5px; font-weight: 800; background: var(--md-soft); color: var(--md); }
.sup-ava.is-empty { background: var(--surface-hover); color: var(--muted); }
.sup-tags { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.sup-grp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; font-size: 11px;
  font-weight: 700; color: var(--md); background: var(--md-soft); border-radius: var(--r-pill);
  padding: 4px 9px; white-space: nowrap; }
.sup-chat { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--state-info); background: var(--state-info-bg); border-radius: var(--r-pill); padding: 3px 8px; }

.sup-table-wrap { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-card);
  overflow-x: auto; box-shadow: var(--shadow); }
table.sup-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sup-table th { text-align: left; padding: 11px 14px; background: var(--md-soft); color: var(--md);
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.sup-table td { padding: 10px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.sup-table td.q { color: var(--muted); } .sup-table td.nowrap { white-space: nowrap; }
.sup-table tbody tr:hover { background: var(--surface-hover); cursor: pointer; }

/* --- диалоги --- */
dialog.sup-dialog { width: min(680px, calc(100% - 28px)); }
.sup-card { padding: 22px 24px 18px; display: grid; gap: 15px; }
.sup-card-head { display: flex; align-items: flex-start; gap: 12px; }
.sup-card-head h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.sup-card-head p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.sup-card-head .sup-grp { margin-left: auto; font-size: 12px; padding: 6px 11px; }
.sup-card-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sup-card-links a, .sup-card-links .off { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px;
  font-weight: 700; text-decoration: none; border-radius: var(--r-control); padding: 9px 13px; }
.sup-card-links a.kis { background: var(--md); color: #fff; }
.sup-card-links a.chat { background: var(--state-info-bg); color: var(--state-info); }
.sup-card-links .off { background: var(--surface-hover); color: var(--muted); }
.sup-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sup-card-grid > div { border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card-2); padding: 11px 13px; min-width: 0; }
.sup-card-grid small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.sup-card-grid b { display: block; font-size: 12.5px; font-weight: 700; }
.sup-card-grid b.muted { color: var(--muted); font-weight: 500; }
.sup-card-slots { display: grid; gap: 3px; }
.sup-card-slots span { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sup-card-slots .muted { font-weight: 500; color: var(--muted); }
.sup-card-owner { display: flex; align-items: center; gap: 9px; }
.sup-phone { display: block; font-size: 11.5px; font-weight: 700; color: var(--md); text-decoration: none; margin-top: 2px; }
.sup-nophone { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.sup-members { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 3px; }
.sup-members.is-warn { color: var(--state-warn); font-weight: 700; }

.sup-card-note { margin: 0; font-size: 12px; color: var(--text-soft); }
.sup-card-foot { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 13px; }
.sup-card-foot .hint { font-size: 10.5px; color: var(--muted); }
.sup-card-foot .right { margin-left: auto; display: flex; gap: 8px; }

.sup-form { padding: 22px 24px 18px; display: grid; gap: 14px; }
.sup-form h2 { margin: 0; font-size: 18px; }
.sup-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sup-fields > label, .sup-fields > .full { min-width: 0; }
.sup-fields label.full, .sup-fields .full { grid-column: 1 / -1; }
.sup-fields label { display: grid; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.sup-fields input, .sup-fields select { border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 9px 11px; background: var(--surface-card); color: var(--text); font-size: 12.5px;
  font-weight: 500; letter-spacing: 0; text-transform: none; }
.sup-fields select[multiple] { padding: 6px; }
.sup-hint, .sup-form-hint { font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--muted); }
.sup-form-hint { margin-right: auto; }
.sup-label { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.sup-slot { display: grid; grid-template-columns: minmax(0, 1fr) 108px 108px 34px; gap: 8px;
  align-items: center; margin-bottom: 7px; }
.sup-slot-days { display: flex; gap: 4px; flex-wrap: wrap; }
.sup-slot-days label { display: inline-flex; align-items: center; justify-content: center; min-width: 34px;
  border: 1px solid var(--line); border-radius: var(--r-control); padding: 8px 0; font-size: 11.5px;
  font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); cursor: pointer; }
.sup-slot-days label.is-on { background: var(--md-soft); border-color: color-mix(in srgb, var(--md) 35%, transparent); color: var(--md); }
.sup-slot-days input { position: absolute; opacity: 0; width: 0; height: 0; }
.sup-slot-del { color: var(--state-crit); font-size: 13px; }
.sup-add-slot { font-size: 11.5px; font-weight: 700; color: var(--brand); }

.sup-dir { padding: 22px 24px 18px; display: grid; gap: 12px; }
.sup-dir h2 { margin: 0; font-size: 18px; }
.sup-dir-hint { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.sup-dir-add { display: flex; gap: 8px; flex-wrap: wrap; }
.sup-dir-add input { flex: 1 1 140px; border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 9px 11px; background: var(--surface-card); color: var(--text); font-size: 12.5px; }
.sup-dir-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--r-control); background: var(--surface-card-2); padding: 6px 10px; }
.sup-dir-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px 92px; gap: 10px; align-items: center;
  padding: 7px 2px; border-bottom: 1px solid var(--line-soft); }
.sup-dir-row.is-plain { grid-template-columns: minmax(0, 1fr) auto; }
.sup-dir-row:last-child { border-bottom: 0; }
.sup-dir-row b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-dir-row input { border: 1px solid var(--line); border-radius: var(--r-control); padding: 6px 9px;
  background: var(--surface-card); color: var(--text); font-size: 11.5px; }
.sup-dir-row em { font-style: normal; font-size: 11px; color: var(--muted); text-align: right; }
.sup-dir-group { margin: 12px 0 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--md); }

/* Статус группы — подпись рядом с направлением. Обычный «идут» приглушён:
   он у большинства и кричать не должен; всё остальное — повод посмотреть. */
.sup-st { display: inline-block; margin-left: 7px; font-style: normal; font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px;
  color: var(--state-warn); background: var(--state-warn-bg); border-radius: var(--r-pill); padding: 2px 8px; }
.sup-st.is-ok { color: var(--muted); background: var(--surface-hover); }

.sup-import .sup-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.sup-bm { display: inline-block; margin-left: 4px; padding: 5px 12px; border-radius: var(--r-control);
  background: var(--md); color: #fff; font-size: 11.5px; font-weight: 700; text-decoration: none;
  cursor: grab; }
.sup-file { display: grid; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-control);
  padding: 12px 14px; background: var(--surface-card-2); }
.sup-file input { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); }
.sup-code summary { font-size: 11.5px; font-weight: 700; color: var(--brand); cursor: pointer; }
.sup-code textarea { width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 9px 11px; background: var(--surface-card-2); color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; resize: vertical; }
.sup-import .sup-steps li button.primary { padding: 5px 12px; font-size: 11.5px; vertical-align: 1px; }
.sup-import code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: var(--surface-hover); border-radius: 4px; padding: 1px 5px; }

.sup-import-report { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.sup-import-report li { font-size: 12.5px; color: var(--text-soft); }
.sup-import-report li small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.sup-import-bad { margin: 12px 0 0; font-size: 12.5px; font-weight: 700; color: var(--state-crit); }

/* Каникулы: слева крупно — сколько осталось, потому что список читают
   ради этой цифры. Красное — срок уже прошёл, янтарное — неделя и меньше. */
.sup-vrow-list .sup-vrow { display: grid; width: 100%; text-align: left; color: inherit;
  grid-template-columns: 62px minmax(0, 1.05fr) minmax(0, .75fr) minmax(0, .7fr) 146px auto; gap: 14px;
  align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.sup-vrow-list .sup-vrow:last-child { border-bottom: 0; }
.sup-vrow-list .sup-vrow:hover { background: var(--surface-hover); }
.sup-vrow-left { text-align: center; }
.sup-vrow-left b { display: block; font-size: 19px; font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--md); }
.sup-vrow-left small { font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
.sup-vrow.is-soon .sup-vrow-left b { color: var(--state-warn); }
.sup-vrow.is-over .sup-vrow-left b { color: var(--state-crit); }
.sup-vrow-when { font-size: 12px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.sup-vrow-when small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; color: var(--muted); }

.sup-danger h2 { margin: 0; font-size: 18px; }
.sup-danger-what { margin: 0; display: grid; gap: 3px; border: 1px solid var(--line);
  border-radius: var(--r-control); background: var(--surface-card-2); padding: 11px 13px; }
.sup-danger-what b { font-size: 13.5px; }
.sup-danger-what span { font-size: 11.5px; color: var(--muted); }
.dialog-actions .primary.danger { background: var(--state-crit); box-shadow: none; }

@media (max-width: 980px) {
  .sup-vrow-list .sup-vrow { grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "left what" "left where" "left who" "left when" "left tags"; row-gap: 3px; }
  .sup-vrow-list .sup-who { grid-area: who; }
  .sup-vrow-left { grid-area: left; align-self: start; }
  .sup-vrow-list .sup-what { grid-area: what; } .sup-vrow-list .sup-where { grid-area: where; }
  .sup-vrow-when { grid-area: when; } .sup-vrow-list .sup-tags { grid-area: tags; justify-content: flex-start; }
}

/* Чаты: ссылка и кнопка копирования — одна плашка, чтобы не расползались. */
.sup-chat-pill { display: inline-flex; align-items: stretch; border-radius: var(--r-control); overflow: hidden; }
.sup-chat-pill .chat { border-radius: 0; }
.sup-copy { display: grid; place-items: center; width: 32px; border: 0;
  background: var(--state-info-bg); color: var(--state-info);
  border-left: 1px solid color-mix(in srgb, var(--state-info) 22%, transparent); }
.sup-copy:hover { filter: brightness(.96); }
.sup-copy.is-done { background: var(--state-ok-bg); color: var(--state-ok); }
.sup-copy.is-done svg { display: none; }
.sup-copy.is-done::after { content: "✓"; font-size: 13px; font-weight: 800; }

.sup-chats-field { border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card-2); padding: 11px 13px; }
.sup-chats-field .sup-label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sup-chats-field .sup-label span { font-size: 10px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--muted); }
.sup-chat-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px;
  align-items: center; margin-bottom: 6px; }
.sup-chat-row:last-child { margin-bottom: 0; }
.sup-chat-row input { border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 8px 10px; background: var(--surface-card); color: var(--text); font-size: 12px; }
.sup-chat-kind { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--state-info); text-align: center;
  background: var(--state-info-bg); border-radius: var(--r-pill); padding: 5px 0; }
.sup-chat-kind:empty { background: none; }

/* Педагоги группы: строка на человека, а не мультиселект во весь справочник. */
.sup-teachers-field { border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card-2); padding: 11px 13px; }
.sup-teachers-field .sup-label { display: flex; align-items: baseline; gap: 8px; }
.sup-teachers-field .sup-label span { font-size: 10px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--muted); }
#sup-teachers { display: grid; gap: 4px; }
.sup-tch { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 26px; gap: 10px;
  align-items: center; background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--r-control); padding: 8px 10px; }
.sup-tch b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-tch .sup-phone, .sup-tch .sup-nophone { margin: 0; white-space: nowrap; }
.sup-tch-print { display: inline-flex !important; align-items: center; gap: 6px; grid-template-columns: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); cursor: pointer; }
.sup-tch-print input { width: 14px; height: 14px; accent-color: var(--md); }
.sup-tch-del { color: var(--state-crit); font-size: 12px; }
.sup-teacher-add { display: grid; gap: 5px; margin-top: 9px; }
.sup-teacher-add select { border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 8px 10px; background: var(--surface-card); color: var(--text); font-size: 12px; }

/* Кого печатать: отмеченные педагоги — плашками, чтобы выбор читался
   одним взглядом, а не как ряд одинаковых галочек. */
.sup-export-field { border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card-2); padding: 11px 13px; }
#sup-export-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.sup-exp { display: inline-flex !important; align-items: center; gap: 7px; grid-template-columns: none;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted);
  background: var(--surface-card); }
.sup-exp.is-on { background: var(--md-soft); border-color: color-mix(in srgb, var(--md) 35%, transparent); color: var(--md); }
.sup-exp input { width: 14px; height: 14px; accent-color: var(--md); }

/* Подвал карточки переносится: три кнопки на телефоне в строку не встают,
   и «Закрыть» уезжала за край. */
.sup-card-foot { flex-wrap: wrap; }
.sup-card-foot .right { flex-wrap: wrap; }

/* Каникулы: строка гаснет, а не прячется — сотруднику важно видеть, что
   группа существует и когда вернётся, просто в печать она не пойдёт. */
.sup-row.is-vacation .sup-time,
.sup-row.is-vacation .sup-what b { color: var(--muted); }
.sup-row.is-vacation .sup-time { border-left-color: var(--state-idle); }
.sup-vac { display: inline-block; margin-left: 7px; font-style: normal; font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px;
  color: var(--state-warn); background: var(--state-warn-bg); border-radius: var(--r-pill); padding: 2px 8px; }

.sup-vac-field { border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-card-2); padding: 11px 13px; }
.sup-vac-toggle { display: flex !important; align-items: center; gap: 8px; grid-template-columns: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; }
.sup-vac-toggle input { width: 16px; height: 16px; accent-color: var(--brand); }
.sup-vac-dates { display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
.sup-vac-field.is-on .sup-vac-dates { display: grid; }
.sup-vac-dates .sup-hint { grid-column: 1 / -1; }

@media (max-width: 980px) {
  .sup-stats { grid-template-columns: 1fr 1fr; }
  .sup-card-grid, .sup-fields { grid-template-columns: 1fr; }
  .sup-modes { margin-left: 0; }
  .sup-row { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; row-gap: 3px;
    grid-template-areas: "time what" "time where" "time who" "time tags"; }
  .sup-time { grid-area: time; align-self: start; padding-top: 1px; }
  .sup-what { grid-area: what; } .sup-where { grid-area: where; }
  .sup-who { grid-area: who; } .sup-tags { grid-area: tags; justify-content: flex-start; margin-top: 3px; }
  .sup-what small, .sup-where { white-space: normal; overflow: visible; }
  .sup-slot { grid-template-columns: minmax(0, 1fr) 1fr 34px; }
  .sup-dir-row { grid-template-columns: minmax(0, 1fr) 120px; }
  .sup-dir-row em { display: none; }
  .sup-actions { justify-content: stretch; }
  .sup-actions button { flex: 1 1 44%; }
}

/* Вклад сотрудника: шесть цифр одной полосой. Цвет — метка направления
   работы, а не оценка: большое число здесь не «хорошо», а просто много. */
.employee-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
.employee-stat { position: relative; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface-card); box-shadow: var(--shadow); padding: 15px 16px 14px; overflow: hidden; }
.employee-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone, var(--line)); }
.employee-stat b { display: block; font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--tone, var(--text)); font-variant-numeric: tabular-nums; }
.employee-stat span { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 700; color: var(--text); }
.employee-stat em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; color: var(--muted); }
.employee-stat.is-bus { --tone: #1a6fb5; }
.employee-stat.is-task { --tone: #0f7a5f; }
.employee-stat.is-event { --tone: #7d58eb; }
.employee-stat.is-sup { --tone: #0e6b58; }
.employee-stat.is-chat { --tone: #b3651a; }
.employee-stat.is-ahch { --tone: #a01c4c; }
[data-theme=dark] .employee-stat.is-bus { --tone: #6fb6ee; }
[data-theme=dark] .employee-stat.is-task { --tone: #4cbf9c; }
[data-theme=dark] .employee-stat.is-event { --tone: #b199f5; }
[data-theme=dark] .employee-stat.is-sup { --tone: #4fbfa4; }
[data-theme=dark] .employee-stat.is-chat { --tone: #d8a33f; }
[data-theme=dark] .employee-stat.is-ahch { --tone: #e88ca5; }

@media (max-width: 1180px) { .employee-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .employee-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .employee-stat b { font-size: 22px; } }

/* Фото ответственного вместо инициалов, когда оно загружено. Размер и форма
   те же, чтобы строка не прыгала между людьми с фото и без. */
img.sup-ava.is-photo { object-fit: cover; display: block; padding: 0; background: none; }
.sup-card-owner img.sup-ava.is-photo { width: 24px; height: 24px; }

/* ============================================================
   АРХИВ ГРУПП ПОСТАВЩИКОВ
   Группа, закрытая в КИС, уходит из рабочего списка, но её чаты и заметки
   нужны и после закрытия — здесь они остаются на виду, без открытия карточки.
   ============================================================ */
.sup-archive-list { display: grid; gap: 10px; }

.sup-arch {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 11px 13px;
  display: grid;
  gap: 8px;
}
.sup-arch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.sup-arch-head b { display: block; font-size: 14px; font-weight: 700; }
.sup-arch-head small { display: block; font-size: 12px; color: var(--text-soft, var(--muted)); }

.sup-arch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11.5px;
  color: var(--text-soft, var(--muted));
}
/* Причина ухода в архив — главное, что здесь читают: почему группы нет в списке. */
.sup-arch-why {
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
}
.sup-arch-why.is-kis {
  background: color-mix(in srgb, #b45309 16%, transparent);
  color: #8a4708;
}
[data-theme=dark] .sup-arch-why.is-kis {
  background: color-mix(in srgb, #f59e0b 20%, transparent);
  color: #f6c67a;
}

.sup-arch-keep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sup-arch-keep .off { font-size: 11.5px; color: var(--text-soft, var(--muted)); }
.sup-arch-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  color: var(--text-soft, var(--muted));
}
.sup-arch-actions { display: flex; justify-content: flex-end; }

@media (max-width: 560px) {
  .sup-arch-head { flex-direction: column; gap: 4px; }
  .sup-arch-actions { justify-content: stretch; }
  .sup-arch-actions button { width: 100%; }
}