/* Свои классы приложения поверх кита (assets/b24ui). Префикс mcr-. У каждого — зачем. */

/* Стадия в «Журнале» — полоса стадий грида CRM портала (crm-list-stage-bar; замеры — ~/AI/Tickets/prototypes/stagebar-b24-measurements.md),
   в ките такой нет; форма — как tk-stagebar в Tickets (пилюля 12 px, сегменты встык, обводка base-5). Сегментов 4 (стадии канбана), до текущей
   включительно — цвет текущей стадии (как journalStageBar боевого), под полосой — название стадии. Без клика: стадию задаёт время / перезвон. */
.mcr-stagebar { width: 170px; max-width: 100%; }
.mcr-stagebar__bar { display: flex; box-sizing: border-box; height: 12px; border: 1px solid var(--ui-color-base-5); border-radius: var(--ui-border-radius-pill); overflow: hidden; }
.mcr-stagebar__seg { flex: 1 1 0; height: 100%; background: var(--ui-color-bg-content-primary); }
.mcr-stagebar__seg ~ .mcr-stagebar__seg { border-inline-start: 1px solid var(--ui-color-base-5); }
.mcr-stagebar__seg.is-on { background: var(--mcr-stage-color); }
.mcr-stagebar__label { margin-top: 5px; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-3); }

/* Полоса вкладок под шапкой раздела (DashboardToolbar) — поля 20 px, как у тела панели раздела (SECTION_BODY): вкладки ровно по левому краю карточки.
   У тулбара кита — 16 px (так же поправлено в Tickets: tk-toolbar). */
.b24-dashboard-toolbar.mcr-toolbar { padding-inline: 20px; }

/* «Настройки», вариант В пульта «Раскладка»: меню групп справа — 3 из 10 колонок сетки B24Page (в ките 2: подписи «Контрольные точки», «Права сотрудников»
   обрезались многоточием) — так же в форме сценария PRO (.mc-nav-page). align-self: start — меню по высоте содержимого, липнет к верху тела панели. */
@media (min-width: 64rem) {
  .b24-page.mcr-nav-page .b24-page__center { grid-column: span 7 / span 7; }
  .b24-page.mcr-nav-page .b24-page__right { grid-column: span 3 / span 3; }
  .b24-page.mcr-nav-page .b24-page-aside { align-self: start; }
}

/* «Фильтр + поиск» раздела (fltSlot в monitoring-b24ui.js): на телефоне (ниже 1024 px) вместо поля — кнопка «Фильтр» с числом у правого края шапки (пользователь 2026-10-07).
   Поле B24Filter остаётся в разметке невидимым точно под кнопкой: панель кита крепится к полю (fltPlace) и встаёт под кнопкой; сама панель — видимая.
   На компьютере обёртка не участвует в раскладке (display: contents), кнопка скрыта (lg:hidden). */
.mcr-flt-wrap { display: contents; }
/* телефонный вид — класс mcr-phone на <html> (monitoring-b24ui.js, по PHONE: 1024 px, во встройке 768 px); было @media (max-width: 1023.98px) */
  :root.mcr-phone .mcr-flt-wrap { display: inline-flex; position: relative; margin-inline-start: auto; } /* кнопка — у правого края шапки (пользователь 2026-10-07) */
  :root.mcr-phone .b24-section-navbar [data-slot=left]:has(.mcr-flt-wrap) { flex: 1 1 auto; min-width: 0; }
  /* правый блок шапки, где на телефоне всё скрыто (в Канбане — «Настройка просмотра», hidden lg:flex), не держит отступ 6 px — кнопка ровно у края, как «Колонки» */
  :root.mcr-phone .b24-section-navbar [data-slot=right]:not(:has(> :not(.hidden))) { display: none; }
  :root.mcr-phone .mcr-flt-wrap > .b24-filter { position: absolute; inset: 0; width: auto; min-width: 0; max-width: none; visibility: hidden; pointer-events: none; }
  :root.mcr-phone .mcr-flt-wrap > .b24-filter > [data-slot=panel] { visibility: visible; pointer-events: auto; }

/* Ширина поля «Фильтр + поиск» как у портала (по содержимому, растягивается только с курсором / открытой панелью) — с 2026-10-15 в ките (build.mjs, копия 20261015kit1).
   Метка периода в поле — целиком, без обрезки на 180 px кита / портала: решение этого приложения (пользователь 2026-10-15, в кит не переносить);
   при нескольких условиях — она и «и ещё N» (oneChip в monitoring-b24ui.js). Остальные метки — 180 px, как у кита. */
.b24-filter__chip[data-keys=date] .b24-filter__chip-text { max-width: none; }
/* «Когда пропущен» убрать нельзя (как в бою; пользователь 2026-10-15): в панели у строки нет «Убрать поле». Крестик на метке — только когда период
   не «Сегодня» (пользователь 2026-10-16): нажатие возвращает «Сегодня» (keepDate в monitoring-b24ui.js), на «Сегодня» крестика нет — сбрасывать некуда
   (метка помечается data-mcr-today в oneChip, поля 13 px с обеих сторон). Канбан, Журнал, Аналитика: у Стоп-листа поле даты своё и необязательное */
:is(#mcr-flt, #mcr-jflt, #mcr-aflt) .b24-filter__chip[data-keys=date][data-mcr-today] { padding-right: 13px; }
:is(#mcr-flt, #mcr-jflt, #mcr-aflt) .b24-filter__chip[data-keys=date][data-mcr-today] .b24-filter__chip-delete { display: none; }
:is(#mcr-flt, #mcr-jflt, #mcr-aflt) .b24-filter__row[data-name=date] .b24-filter__field-delete { display: none; }

/* Панель B24Filter в шторке на телефоне (#mcr-flt-drawer, fltDrawerOpen): поля шторки кита — 16 px (container), между шапкой и телом — 16 px.
   У панели фильтра свои поля 24 px (они для всплывающего окна) — в шторке складывались, поля уезжали от заголовка «Фильтр» на 24 px. */
#mcr-flt-drawer .b24-filter__fields { padding: 0; }
#mcr-flt-drawer .b24-filter__buttons { padding-inline: 0; }
/* на телефоне набор полей фильтра — всегда по умолчанию (fltKey без fieldsKey): «Добавить поле / Вернуть поля по умолчанию», «Убрать поле» и ручка
   перетаскивания ничего бы не запомнили — скрыты (пользователь 2026-10-07) */
#mcr-flt-drawer .b24-filter__fields-footer, #mcr-flt-drawer .b24-filter__field-delete, #mcr-flt-drawer .b24-filter__grab { display: none; }

/* Канбан на телефоне (ниже 1024 px): колонки канбана кита стопкой (stackSync в monitoring-b24ui.js; пользователь 2026-10-07, макет Figma).
   Раскладка — как у доски на компьютере: страница не прокручивается, доска занимает оставшуюся высоту экрана. Свёрнутые стадии — одна полоса;
   раскрытая (одна) — по содержимому, не выше свободного места, её карточки листаются внутри колонки — своя прокрутка колонки кита (.b24-kanban__items overflow-y: auto),
   полосы стадий и плашка фактоидов стоят на месте («карточки просто скроллятся внутри рамки» — пользователь). «Уши» и зоны автопрокрутки
   (для перетаскивания) скрыты. Отметка карточки видна всегда: у кита — по наведению, на телефоне наведения нет. Шеврон — outline/ChevronDownLIcon. */
.mcr-kb-chevron { display: none; }
/* телефонный вид — класс mcr-phone на <html> (monitoring-b24ui.js, по PHONE: 1024 px, во встройке 768 px); было @media (max-width: 1023.98px) */
  :root.mcr-phone .mcr-kb-stack .b24-kanban { flex-direction: column; gap: 12px; padding-top: 0; overflow: hidden; }
  :root.mcr-phone .mcr-kb-stack .b24-kanban__col { flex: none; width: auto; min-height: 0; padding-inline: 0; border-inline-start: 0; }
  /* раскрытая стадия — по содержимому, но не больше свободного места: пустая — одна полоса, мало карточек — окно по ним, полосы ниже сразу под окном;
     прокрутка — только когда карточек больше, чем помещается (пользователь 2026-10-07: «0 пропущено — для кого это место?») */
  :root.mcr-phone .mcr-kb-stack .b24-kanban__col:not(.is-collapsed) { flex: 0 1 auto; }
  /* справа 16 px: стрелка полосы (::after кита) начинается за 13 px до края и рисуется поверх — шеврон с полем 4 px уходил под неё на треть */
  :root.mcr-phone .mcr-kb-stack .b24-kanban__stage { cursor: pointer; padding-inline-end: 16px; }
  :root.mcr-phone .mcr-kb-stack .mcr-kb-chevron { display: block; position: relative; flex: none; width: 20px; height: 20px; margin-inline-start: auto; align-self: center;
    margin-top: -6px; transition: transform .2s; transform: rotate(180deg); }
  :root.mcr-phone .mcr-kb-stack .b24-kanban__col.is-collapsed .mcr-kb-chevron { transform: none; }
  /* счётчик стадии — у правого края, перед шевроном: в стопке четыре числа друг под другом, за названиями разной длины они «скакали» (пользователь
     2026-10-07; числа, которые сравнивают, — в одну колонку, bureau.ru/soviet/20170110/). У кита счётчик — сразу за названием (колонки рядом) */
  :root.mcr-phone .mcr-kb-stack .b24-kanban__stage-count { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
  :root.mcr-phone .mcr-kb-stack .b24-kanban__stage-count + .mcr-kb-chevron { margin-inline-start: 8px; }
  :root.mcr-phone .mcr-kb-stack .b24-kanban__col.is-collapsed .b24-kanban__sub, :root.mcr-phone .mcr-kb-stack .b24-kanban__col.is-collapsed .b24-kanban__body { display: none; }
  :root.mcr-phone .mcr-kb-stack .b24-kanban__sub { padding-block: 0; }
  /* зазор 8 px между полосой стадии и карточками — снаружи окна прокрутки: при прокрутке карточки обрезаются по окну и в зазор не заезжают
     (пользователь 2026-10-07); у окна верхний отступ кита — 1 px */
  :root.mcr-phone .mcr-kb-stack .b24-kanban__body { margin-top: 8px; }
  :root.mcr-phone .mcr-kb-stack .b24-kanban__scroll, :root.mcr-phone .mcr-kb-stack .b24-kanban__ear-col { display: none; }
  :root.mcr-phone .mcr-kb-stack .b24-kanban__item-check { opacity: 1; }
  /* «Звонков нет» под раскрытой пустой стадией в «Системной» (edge-dark): у кита — --ui-color-base-4 (белый 60 %), на светлых обоях не читалось
     (пользователь 2026-10-08); белый --ui-color-base-1 — как заголовок раздела и пункты меню на тех же обоях. В «Светлой» / «Тёмной» — как у кита */
  html.edge-dark.mcr-phone .mcr-kb-stack .b24-kanban__empty { color: var(--ui-color-base-1); }

/* Поля-списки со множественным выбором в шторке фильтра на телефоне (compactLists; пользователь 2026-10-07). Поле кита — InputMenu
   с метками; поверх — вид в одну строку высотой поля кита (lg). Подпись пустого поля («Любой», «Все сотрудники и отделы») — только у пустого поля. */
/* подпись пустого поля, место под крестик «очистить», строка ввода и центр ручки / крестика «убрать поле» — в ките с 2026-10-08 (перенесено из прототипа) */
/* метки в одну строку; не поместившиеся скрыты (hidden), в конце — «+N» видом метки кита (вариант Б пульта «Списки», выбран; «одна строка текстом» — отклонена) */
#mcr-flt-drawer .mcr-im-row.mcr-im-has { flex-wrap: nowrap; overflow: hidden; }
#mcr-flt-drawer .mcr-im-row > [data-slot=tagsItem][hidden] { display: none; }
/* метки в Б не сжимаются (в строке кит их сжимал до «К…») — сколько поместится, считает compactLists по факту раскладки; если видна одна — она может с многоточием (mcr-im-one) */
#mcr-flt-drawer .mcr-im-row > [data-slot=tagsItem] { flex: none; }
#mcr-flt-drawer .mcr-im-row.mcr-im-one > [data-slot=tagsItem]:not([hidden]) { flex: 0 1 auto; min-width: 0; }
#mcr-flt-drawer .mcr-im-row .mcr-im-more { flex: none; }
#mcr-flt-drawer .mcr-im-row.mcr-im-has .b24-input-menu__tags-input { flex: 1 1 12px; min-width: 12px; }

/* Журнал (и Стоп-лист, mcr-sl-phone) на телефоне — записи карточками вместо таблицы (drawPhone в monitoring-b24ui.js; пользователь 2026-10-08, вариант А; плотный список — отклонён).
   Карточки вида карточки канбана кита на фоне раздела, листаются внутри карточки раздела (у неё нет своей подложки и рамки); пагинация — отдельной
   карточкой кита внизу, одной строкой: «Всего: N» слева, страницы справа; «На странице» скрыт — на телефоне всегда 50 на странице (пользователь 2026-10-08: блок пагинации «пошёл в три строки») */
/* телефонный вид — класс mcr-phone на <html> (monitoring-b24ui.js, по PHONE: 1024 px, во встройке 768 px); было @media (max-width: 1023.98px) */
  :root.mcr-phone .mcr-jr-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 1px; }
  :root.mcr-phone .b24-card.mcr-jr-a { background: transparent; border-color: transparent; box-shadow: none; }
  :root.mcr-phone .mcr-jr-a .b24-kanban__card { position: relative; }
  :root.mcr-phone .mcr-jr-a .mcr-jr-menu { position: absolute; top: 6px; inset-inline-end: 6px; }
  :root.mcr-phone .mcr-jr-a [data-slot=footer] { margin-top: 8px; }
  :root.mcr-phone .mcr-jr-a [data-t=pag-row] { flex-direction: row; align-items: center; justify-content: space-between; }
  :root.mcr-phone .mcr-jr-a [data-t=pag-row] > [data-t=count] { width: auto; flex: none; }
  :root.mcr-phone .mcr-jr-a [data-t=pag-row] > .flex-1 { flex: none; }
  :root.mcr-phone .mcr-jr-a [data-t=page-size] { display: none; }
  /* Стоп-лист: те же карточки (mcr-sl-phone), полосы цвета нет — стадий нет */
  :root.mcr-phone .mcr-sl-phone .b24-kanban__card:before { display: none; }
  :root.mcr-phone .mcr-sl-phone .b24-kanban__item-title { padding-inline-end: 28px; }


/* «Когда пропущен» в панели фильтра — поле-триггер выбора периода (periodField в monitoring-b24ui.js) вместо списка кита: контролы кита в строке скрыты,
   но остаются в разметке (кит читает строку при «Найти»; значение подменяет черновик периода) */
.mcr-period-ctl > :not(.mcr-period) { display: none !important; }

/* «Аналитика» (analyticsHtml в monitoring-b24ui.js). Своё — только то, чего нет в сборке кита (lg:grid-cols-3, h-24 и т. п. в utilities.json нет) */
/* сетка плиток группы: 1 колонка на телефоне, 2 — от 640 px, по числу плиток группы (--cols) — от 1024 px (как pageGrid HomeStats: lg:grid-cols-4 gap-4) */
.mcr-an-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .mcr-an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mcr-an-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
/* заголовок группы и переключатель «Кол-во / %» справа — одной строкой */
.mcr-an-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
/* график плитки — HomeChart кита в уменьшенном виде (там h-96) */
.mcr-an-spark { height: 72px; }
/* «Плитки» Д — график под числом от края до края плитки и вплотную к её низу, как спарклайн в бою (.kw__spark): отступ PageCard кита
   (16 px, от 640 px — 24 px) график не держит — иначе «воздух» слева, справа и снизу (пользователь 2026-10-15) */
/* по бокам — ещё на 4 px за край: Unovis сдвигает линию внутрь на запас под толщину (bleed), плитка обрезает по контуру — линия вплотную к краям */
.mcr-an-spark--in { height: 72px; margin: auto -20px -16px; min-width: 0; position: relative; z-index: 1; } /* над ссылкой-оверлеем PageCard (inset-0) — иначе наведение до графика не доходит: нет вертикали и подсказки, как в бою */ /* к низу плитки (margin-top: auto — и в сетке ≥1024, и в колонке ниже), даже если соседняя выше */
@media (min-width: 40rem) { .mcr-an-spark--in { margin: auto -28px -24px; } }
/* подсказка спарклайна «Д» — читается на светло-серой плитке: белая (фон карточки), с рамкой и тенью кита. Только переменные подсказки графика кита
   (--vis-tooltip-*), сама подсказка — кита; у «А» (карточка белая) не трогаем. Пользователь 2026-10-15: правка — подсказки, не цвета плитки */
:is(.light, .edge-dark) .mcr-an-spark--in { --vis-tooltip-background-color: var(--ui-color-bg-content-primary); /* в тёмной — штатная подсказка кита: фон карточки там совпадает с плиткой */
  --vis-tooltip-border-color: var(--ui-color-divider-default);
  --vis-tooltip-box-shadow: var(--ui-shadow-bottom-s); }
.mcr-an-tile { cursor: pointer; }
/* «Плитки» Д: содержимое PageCard — к верху плитки (сетка кита растягивала строки — в широкой паре число стояло ниже соседнего); content-start в сборке кита нет */
.mcr-an-top { align-content: start; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; } /* колонка — по плитке, не по ширине графика (иначе график растягивал сетку и обрезался справа) */
/* «Звонил подряд»: подпись — полоса B24Progress — число */
.mcr-an-bar { display: grid; grid-template-columns: 56px 1fr 32px; align-items: center; gap: 8px; margin-top: 6px; }
/* список звонков — Slideover справа шире примера (таблица на 8–10 колонок) */
/* «как сейчас» — прототип боя во фрейме на всё тело раздела (пульт «Аналитика», А) */
.mcr-an-now { width: 100%; height: 100%; border: 0; display: block; }
/* тепловая карта — как в бою (в ките нет): сотрудники слева, сетка дни × часы; цвета — токены кита для трёх тем */
.mcr-hm-wrap { display: flex; gap: 16px; align-items: flex-start; }
.mcr-hm-side { flex: 0 0 200px; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.mcr-hm-scroll { flex: 1; min-width: 0; overflow-x: auto; }
.mcr-hm { display: grid; grid-template-columns: 36px repeat(24, 34px) 52px 52px; gap: 3px; font-size: 12px; }
.mcr-hm-h, .mcr-hm-d, .mcr-hm-s { color: var(--ui-color-base-4); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.mcr-hm-c { height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ui-color-base-1); }
.mcr-hm-c--work { background: var(--ui-color-accent-soft-blue-3, rgba(47, 125, 246, .1)); }
.mcr-hm--t1 { background: var(--ui-color-accent-soft-red-3, rgba(255, 87, 83, .22)) !important; }
.mcr-hm--t2 { background: var(--ui-color-accent-soft-red-2, rgba(255, 87, 83, .5)) !important; }
.mcr-hm--t3 { background: var(--ui-color-accent-main-alert) !important; color: #fff; }
.mcr-hm-c[data-c] { cursor: pointer; }
@media (max-width: 63.99rem) { .mcr-hm-wrap { flex-direction: column; } .mcr-hm-side { flex: none; width: 100%; max-height: 160px; } }

/* пульт «График» А: график плитки не нажимается — курсор обычный (щелчок по нему ничего не открывает, как в бою) */
.mcr-an[data-chart-click=none] [data-an-chart] { cursor: default; }
.mcr-an[data-chart-click=point] [data-an-chart] { cursor: pointer; }

/* стрелка › после заголовка плитки (пульт «Наведение» Г): признак ссылки, виден всегда */
.mcr-an-go { display: inline-block; width: 16px; height: 16px; margin-inline-start: 2px; vertical-align: -3px; color: var(--ui-color-base-5, currentColor); }

/* пульт «Наведение» Г (ревизор по бюро, 2026-10-15): название показателя — ссылка; при наведении на плитку заголовок со стрелкой синеет цветом ссылки
   (--ui-color-design-selection-content, как у b24-link). Обводки нет (читалась как фокус / выбор), фон не меняется */
/* заголовок синеет при наведении на плитку, кроме случая, когда курсор на «N ещё не закрыто» — тогда синеет только оно (пользователь 2026-10-16;
   диаграмму из исключения убрали: она занимает почти всю плитку, и заголовок переставал подсвечиваться) */
.mcr-an[data-tile-hover=title] .mcr-an-tile .b24-page-card--to:hover:not(:has(.mcr-an-open:hover)) [data-slot=title],
.mcr-an[data-tile-hover=title] .mcr-an-tile .b24-page-card--to:hover:not(:has(.mcr-an-open:hover)) .mcr-an-go { color: var(--ui-color-design-selection-content); }

/* график во всю ширину обрезает контейнер плитки (overflow-hidden), а скругление — у карточки: без radius у контейнера линия выходила за нижние углы */
.mcr-an-top { border-radius: inherit; }

/* ритм страницы (ревизор, пользователь выбрал вариант «Г» 2026-10-15): блоки разделяет расстояние — 48 px между блоками против 16 между плитками
   (было 24 / 16 — блоки сливались в одну сетку); заголовок блока 16 px / 600 — мельче числа плитки (22 px) и заголовка страницы, не спорит с ними;
   «Абонент дозвонился сам» — по содержимому, не тянется на высоту «Звонил подряд» со списком внутри. Отвергнуты: 40 px (на глаз почти не видно),
   заголовки 20 px (спорили с числом плитки, на телефоне были крупнее заголовка страницы) */
.mcr-an [data-an-body] { gap: 48px; }
.mcr-an .mcr-an-head h2 { font-size: 16px; font-weight: 600; }
.mcr-an .mcr-an-grid:has([data-an-kpi=persist]) { align-items: start; }

/* карта «Когда пропускаем», пульт «Карта» В (ревизор 2026-10-15): без прокрутки — часы делят ширину (minmax(0, 1fr)), итоги — колонками справа;
   пустые клетки тихие (едва заметный серый), цветом говорят только цифры; рабочее время (если задан график) — лёгкий голубой; цифра в нерабочее — без заливки, в рамке */
.mcr-an-head--wrap { flex-wrap: wrap; row-gap: 8px; }
.mcr-hv-wrap { display: flex; gap: 20px; align-items: flex-start; }
.mcr-hv-side { flex: 0 0 200px; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.mcr-hv-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 6px 10px; border-radius: 8px; border: 0; background: none;
  font: inherit; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-1); text-align: start; cursor: pointer; }
.mcr-hv-who:hover { background: var(--ui-color-bg-content-secondary); }
.mcr-hv-who.is-on { background: var(--ui-color-accent-soft-blue-3, rgba(47, 125, 246, .12)); color: var(--ui-color-accent-main-primary); font-weight: 600; }
.mcr-hv-who > :last-child { color: var(--ui-color-base-4); }
.mcr-hv-who.is-on > :last-child { color: inherit; }
.mcr-hv-map { flex: 1; min-width: 0; }
.mcr-hv { display: grid; grid-template-columns: 32px repeat(24, minmax(0, 1fr)) repeat(var(--tot, 1), 72px); gap: 3px; font-size: 12px; }
.mcr-hv-h, .mcr-hv-d, .mcr-hv-s { color: var(--ui-color-base-4); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; min-width: 0; }
.mcr-hv-h { height: 20px; font-size: 11px; }
.mcr-hv-d { justify-content: flex-start; white-space: nowrap; }
.mcr-hv-s { color: var(--ui-color-base-2, var(--ui-color-base-1)); }
.mcr-hv-h--tot, .mcr-hv-s { font-variant-numeric: tabular-nums; }
.mcr-hv-c { height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ui-color-base-1);
  background: color-mix(in srgb, var(--ui-color-base-4) 7%, transparent); min-width: 0; }
.mcr-hv-c--work { background: color-mix(in srgb, var(--ui-color-accent-main-primary) 7%, transparent); }
.mcr-hv-c--off { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-color-base-4) 35%, transparent); }
.mcr-hv-c[data-c] { cursor: pointer; }
/* телефон: часы строками, дни колонками */
.mcr-hv--rot { grid-template-columns: 32px repeat(var(--days), minmax(0, 1fr)) 52px; }
.mcr-hv--rot .mcr-hv-c { height: 24px; }
@media (max-width: 63.99rem) { .mcr-hv-wrap { flex-direction: column; } .mcr-hv-side { flex: none; width: 100%; max-height: 168px; } .mcr-hv-map { width: 100%; } }
/* за 1–2 дня: сотрудники строкой над картой (колонка рядом с одной строкой карты — пустота) */
.mcr-hv-wrap--flat { flex-direction: column; gap: 12px; }
.mcr-hv-side--flat { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 4px; max-height: 68px; }
.mcr-hv-side--flat .mcr-hv-who { width: auto; padding: 4px 10px; }
.mcr-hv-wrap--flat .mcr-hv-map { width: 100%; }

/* «Кто закрыл пропуск» (пульт «Как закрыли» Б): широкая плитка — 2/3 ряда, стоп-лист — 1/3; на 40–64rem стоп-лист под ней во всю ширину */
@media (min-width: 40rem) { .mcr-an-grid--wide { grid-template-columns: 1fr; } }
@media (min-width: 64rem) { .mcr-an-grid--wide[style*="--cols:2"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.mcr-an-split { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 14px; background: color-mix(in srgb, var(--ui-color-base-4) 12%, transparent); }
.mcr-an-split > span { min-width: 4px; }
.mcr-an-part--we { --part: var(--ui-color-accent-main-primary); }
.mcr-an-part--manual { --part: color-mix(in srgb, var(--ui-color-accent-main-primary) 45%, var(--ui-color-bg-content-primary)); }
.mcr-an-part--they { --part: var(--ui-color-accent-main-alert); }
.mcr-an-split > span { background: var(--part); }
.mcr-an-legend { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; position: relative; z-index: 1; } /* над ссылкой-оверлеем PageCard: части нажимаются сами */
.mcr-an-part { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-1); cursor: pointer; }
.mcr-an-part i { width: 8px; height: 8px; border-radius: 2px; background: var(--part); align-self: center; }
.mcr-an-part:hover > span:first-of-type { color: var(--ui-color-design-selection-content); }
/* «Звонил подряд» компактная: число слева, распределение справа */
.mcr-an-persist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.mcr-an-persist__bars .mcr-an-bar:first-child { margin-top: 0; }
@media (max-width: 39.99rem) { .mcr-an-persist { grid-template-columns: 1fr; gap: 8px; } }

/* «Звонил подряд» Б / В (ревизор 2026-10-15): строки от худшего, цвет — по тяжести, полоса короткая (до 240 px), число сразу за ней; строки нажимаются */
.mcr-an-sev { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; position: relative; z-index: 1; } /* над ссылкой-оверлеем PageCard */
.mcr-an-sev__row { display: grid; grid-template-columns: 64px minmax(0, 240px) auto; align-items: center; gap: 10px; padding: 2px 6px; margin: 0 -6px; border: 0; border-radius: 6px;
  background: none; font: inherit; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-1); text-align: start; cursor: pointer; justify-content: start; }
.mcr-an-sev__row:hover { background: var(--ui-color-bg-content-secondary); }
.mcr-an-sev__row:hover .mcr-an-sev__l { color: var(--ui-color-design-selection-content); }
.mcr-an-sev__bar { height: 8px; border-radius: 4px; overflow: hidden; }
.mcr-an-sev__bar i { display: block; height: 100%; border-radius: 4px; background: var(--sev); }
.mcr-an-sev__v { font-weight: 600; }
.mcr-an-sev--1 { --sev: color-mix(in srgb, var(--ui-color-base-4) 45%, transparent); }
.mcr-an-sev--2 { --sev: color-mix(in srgb, var(--ui-color-accent-main-alert) 40%, var(--ui-color-bg-content-primary)); }
.mcr-an-sev--3 { --sev: var(--ui-color-accent-main-alert); }
.mcr-an-sev--4 { --sev: color-mix(in srgb, var(--ui-color-accent-main-alert) 70%, #000); }
.mcr-an-sev--3 .mcr-an-sev__v, .mcr-an-sev--4 .mcr-an-sev__v { color: var(--ui-color-accent-main-alert); }
/* Б: главное — число «дозванивались 4+ раз» красным, нажимается */
.mcr-an-persist--alarm { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.mcr-an-alarm { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; position: relative; z-index: 1; }
.mcr-an-alarm__n { font-size: 28px; line-height: 1.1; color: var(--ui-color-accent-main-alert); }
.mcr-an-alarm__t { font-size: var(--ui-font-size-sm); color: var(--ui-color-base-1); }
.mcr-an-alarm:hover .mcr-an-alarm__t { color: var(--ui-color-design-selection-content); }
.mcr-an-persist--alarm .mcr-an-sev { margin-top: 0; }
/* В: две плитки в ряд — тревога 1/3, распределение 2/3 */
@media (min-width: 64rem) { .mcr-an-grid--alarm[style*="--cols:2"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
/* В: распределение в две колонки строк (сверху вниз, затем вправо) — плитка ниже, ряд с плиткой тревоги ровный; плитки ряда — одной высоты */
@media (min-width: 64rem) {
  .mcr-an-grid--alarm { align-items: stretch !important; }
  .mcr-an-grid--alarm [data-an-kpi=persist] .mcr-an-sev { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}

/* «Звонил подряд» Г: ряд квадратов одного размера, 5+ — красным; переносится в несколько рядов на узком экране; квадраты нажимаются */
.mcr-an-boxes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; } /* над ссылкой-оверлеем PageCard */
.mcr-an-box { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 4px;
  border: 0; border-radius: 10px; background: var(--ui-color-bg-content-primary); box-shadow: inset 0 0 0 1px var(--ui-color-divider-default);
  font: inherit; color: var(--ui-color-base-1); cursor: pointer; }
.mcr-an-box__v { font-size: 20px; line-height: 1.2; }
.mcr-an-box__l { font-size: var(--ui-font-size-xs); color: var(--ui-color-base-4); }
.mcr-an-box:hover { box-shadow: inset 0 0 0 1px var(--ui-color-design-selection-content); }
.mcr-an-box--hot { background: color-mix(in srgb, var(--ui-color-accent-main-alert) 12%, var(--ui-color-bg-content-primary));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-color-accent-main-alert) 35%, transparent); }
.mcr-an-box--hot .mcr-an-box__v, .mcr-an-box--hot .mcr-an-box__l { color: var(--ui-color-accent-main-alert); }
.mcr-an-box--hot:hover { box-shadow: inset 0 0 0 1px var(--ui-color-accent-main-alert); }
.mcr-an-boxes__sum { margin-top: 12px; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-2, var(--ui-color-base-1)); }
@media (max-width: 39.99rem) { .mcr-an-box { width: calc((100% - 24px) / 4); } }
/* второй уровень: 5 раз и больше — насыщенный красный, белые цифры (3–4 — бледно-красный, .mcr-an-box--hot) */
.mcr-an-box--hot2 { background: var(--ui-color-accent-main-alert); box-shadow: none; }
.mcr-an-box--hot2 .mcr-an-box__v, .mcr-an-box--hot2 .mcr-an-box__l { color: #fff; }
.mcr-an-box--hot2:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, #000 25%, var(--ui-color-accent-main-alert)); }


/* «Подряд» Б — таблица кита в плитке: над ссылкой-оверлеем PageCard, чтобы «N раз» нажимались */
.mcr-an-ptable { position: relative; z-index: 1; margin-top: 8px; }

/* «Карта» Г — тепловая карта как сейчас в бою (пользователь 2026-10-15): разметка anDrawHeat и стили style.css боя 1 в 1 (#page-analytics → .mcr-hm-prod), не кит */
.mcr-hm-prod {
  --an-blue: #0275FF;
  --an-blue-dark: #005fc9;
  --an-blue-bg: #E6F4FF;
  --an-hm-work: #CBE8FF;
  --an-green: #1DCE7C;
  --an-red: #FF5753;
  --an-red-dark: #D2312D;
  --an-red-bg: #FFE8E9;
  --an-text: #333;
  --an-muted: #525c69;
  --an-quiet: #828B95;
  --an-line: #edeef0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: var(--an-text);
}
.mcr-hm-prod .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mcr-hm-prod .box {
  background: #fff; border: 1px solid var(--an-line); border-radius: 12px; padding: 14px 16px 16px;
}
.mcr-hm-prod .box__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mcr-hm-prod .box__t { margin: 0; font-size: 15px; font-weight: 700; }
.mcr-hm-prod .hm-leg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11.5px;
  color: var(--an-quiet);
}
.mcr-hm-prod .hm-leg--foot {
  margin-top: 12px;
}
.mcr-hm-prod .hm-leg__i {
  width: 14px; height: 10px; border-radius: 2px; display: inline-block;
  vertical-align: middle; box-shadow: inset 0 0 0 1px var(--an-line);
  background: #fff;
}
.mcr-hm-prod .hm-leg__i--work { background: var(--an-hm-work); }
.mcr-hm-prod .hm-wrap {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, max-content);
  align-items: start; gap: 16px; margin-top: 14px;
}
.mcr-hm-prod .hm-side {
  overflow-y: auto; padding-right: 8px; border-right: 1px solid var(--an-line); max-height: 420px;
}
.mcr-hm-prod .hm-side button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%;
  border: 0; background: transparent; color: var(--an-muted); font: inherit; font-size: 12.5px;
  text-align: left; padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.mcr-hm-prod .hm-side button:hover { background: #f4f5f7; color: var(--an-text); }
.mcr-hm-prod .hm-side button.is-on { background: var(--an-blue-bg); color: var(--an-blue-dark); font-weight: 600; }
.mcr-hm-prod .hm-side__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mcr-hm-prod .hm-side__v { font-size: 11.5px; color: var(--an-quiet); flex: 0 0 auto; }
.mcr-hm-prod .hm-main { min-width: 0; }
.mcr-hm-prod .hm-scroll { overflow-x: auto; min-width: 0; padding-bottom: 6px; }
.mcr-hm-prod .hm-grid { display: grid; gap: 3px; width: max-content; }
.mcr-hm-prod .hm-sticky { position: sticky; left: 0; z-index: 2; background: #fff; }
.mcr-hm-prod .hm-h, .mcr-hm-prod .hm-d, .mcr-hm-prod .hm-s {
  font-size: 10px; color: var(--an-quiet); letter-spacing: .02em; text-align: center;
}
.mcr-hm-prod .hm-d { text-align: left; align-self: center; font-weight: 600; font-size: 11px; }
.mcr-hm-prod .hm-d--sum { color: var(--an-quiet); font-weight: 400; font-size: 10px; }
.mcr-hm-prod .hm-s { align-self: center; text-align: center; font-size: 11.5px; color: var(--an-muted); cursor: default; }
.mcr-hm-prod .hm-s.is-hit { cursor: pointer; border-radius: 4px; }
.mcr-hm-prod .hm-s.is-hit:hover { color: var(--an-blue-dark); background: #f4f6f8; }
.mcr-hm-prod .hm-s:not(.is-hit):hover { color: var(--an-muted); background: transparent; }
.mcr-hm-prod .hm-h--tot { text-align: center; line-height: 1.15; white-space: normal; padding: 0 2px; }
.mcr-hm-prod .hm-h--work, .mcr-hm-prod .hm-s--work { background: var(--an-hm-work); border-radius: 4px; }
.mcr-hm-prod .hm-c {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 4px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--an-line);
  font-size: 11.5px; font-weight: 600; cursor: default;
}
.mcr-hm-prod .hm-c.is-hit { cursor: pointer; }
.mcr-hm-prod .hm-c--work { background: var(--an-hm-work); }
.mcr-hm-prod .hm-c--work.hm-c--t1 {
  background: #FF9A98; color: #fff; box-shadow: inset 0 0 0 1px #FF9A98;
}
.mcr-hm-prod .hm-c--work.hm-c--t2 {
  background: #FFDEDD; color: var(--an-red-dark);
  box-shadow: inset 0 0 0 1px #FFDEDD;
}
.mcr-hm-prod .hm-c--work.hm-c--t3 {
  background: var(--an-red); color: #fff; box-shadow: inset 0 0 0 1px var(--an-red);
}
.mcr-hm-prod .hm-c--nil { background: #fff; cursor: default; }
.mcr-hm-prod .hm-c--nil.hm-c--work { background: var(--an-hm-work); }
.mcr-hm-prod .hm-c:hover { outline: none; }
.mcr-hm-prod .hm-c.is-hit:hover { outline: 2px solid rgba(2,117,255,.65); outline-offset: -1px; }
.mcr-hm-prod .hm-c--nil:hover { outline: none; }

.mcr-hm-prod .ld-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; justify-content: flex-end; }
.mcr-hm-prod .ld-tabs button {
  border: 0; background: #f4f6f8; color: #525c69;
  height: 30px; padding: 0 12px; border-radius: 6px;
  font: inherit; font-size: 13px; cursor: pointer;
}
.mcr-hm-prod .ld-tabs button.is-on { background: #e6f4ff; color: #005fc9; font-weight: 600; }
@media (max-width: 1280px) {
  .mcr-hm-prod .hm-wrap { grid-template-columns: 1fr; }
  .mcr-hm-prod .hm-side { border-right: 0; border-bottom: 1px solid var(--an-line); padding: 0 0 10px; max-height: 180px; }
}
/* «Кто пропускает» Б — таблица как в бою (style.css боя 1 в 1, #page-analytics → .mcr-hm-prod); .mcr-hm-prod — боевые стили аналитики для сравнения */
.mcr-hm-prod .ld-scroll { overflow-x: auto; margin-top: 14px; }
.mcr-hm-prod .ld-table { width: 100%; border-collapse: collapse; }
.mcr-hm-prod .ld-table th, .mcr-hm-prod .ld-table td {
  padding: 9px 10px; vertical-align: middle; border-bottom: 1px solid #f0f1f3;
}
.mcr-hm-prod .ld-table th:first-child, .mcr-hm-prod .ld-table td:first-child {
  padding-left: 4px; padding-right: 16px; min-width: 180px;
  position: sticky; left: 0; z-index: 1; background: #fff;
}
.mcr-hm-prod .ld-table th {
  font-size: 12px; font-weight: 600; color: var(--an-quiet);
  text-align: left; white-space: nowrap; border-bottom: 1px solid var(--an-line);
}
.mcr-hm-prod .ld-table td { font-size: 13.5px; }
.mcr-hm-prod .ld-table .r { text-align: right; white-space: nowrap; }
.mcr-hm-prod .ld-table .q { color: var(--an-muted); }
.mcr-hm-prod .ld-table .v { font-weight: 600; }
.mcr-hm-prod .ld-sort {
  border: 0; background: transparent; padding: 0; margin: 0;
  font: inherit; font-weight: inherit; color: inherit;
  cursor: pointer; text-align: inherit;
}
.mcr-hm-prod .ld-table th.r .ld-sort { text-align: right; }
.mcr-hm-prod .ld-sort:hover, .mcr-hm-prod .ld-sort.is-on { color: #0275FF; }
.mcr-hm-prod .ld-table tbody tr { cursor: pointer; }
.mcr-hm-prod .ld-table tbody tr:hover { background: #f7f9fc; }
.mcr-hm-prod .ld-table tbody tr:hover td:first-child { background: #f7f9fc; }
.mcr-hm-prod .ld-table tbody tr.ld-row--total { cursor: default; background: #f6f7f9; }
.mcr-hm-prod .ld-table tbody tr.ld-row--total:hover { background: #f6f7f9; }
.mcr-hm-prod .ld-table tbody tr.ld-row--total td { border-bottom: 0; font-weight: 600; }
.mcr-hm-prod .ld-table tbody tr.ld-row--total td:first-child { background: #f6f7f9; }
.mcr-hm-prod .ld-row__n { font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.mcr-hm-prod .ld-row__d { font-size: 12px; color: var(--an-quiet); margin-top: 2px; }
.mcr-hm-prod .ld-table tbody tr.is-hot .ld-row__n { color: var(--an-red-dark); }
/* «Карта» В: текст цветных клеток — по аналогии с боем (Г): на бледной заливке — тёмно-красный, на насыщенной — белый (пользователь 2026-10-15) */
.mcr-hv-c.mcr-hm--t1, .mcr-hv-c.mcr-hm--t2 { color: color-mix(in srgb, var(--ui-color-accent-main-alert) 78%, #000); } /* t2 — заливка 50 %: белый на ней не читается */
.mcr-hv-c.mcr-hm--t3 { color: #fff; }
/* «Кто закрыл» Б — столбцы Unovis (свой столбец у каждой части); В — три строки-полосы. Нажимаются над оверлеем PageCard */
.mcr-an-ccol { height: 200px; margin-top: 10px; position: relative; z-index: 1;
  --vis-axis-domain-color: var(--ui-color-divider-default); --vis-axis-tick-label-font-size: var(--ui-font-size-sm); --vis-axis-tick-label-color: var(--ui-color-base-2, var(--ui-color-base-1)); }
.mcr-an-srows { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; position: relative; z-index: 1; }
.mcr-an-srow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 48px 40px; align-items: center; gap: 10px; padding: 3px 6px; margin: 0 -6px; border: 0; border-radius: 6px;
  background: none; font: inherit; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-1); cursor: pointer; text-align: start; }
.mcr-an-srow:hover { background: var(--ui-color-bg-content-secondary); }
.mcr-an-srow:hover .mcr-an-srow__l { color: var(--ui-color-design-selection-content); }
.mcr-an-srow__bar { height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--ui-color-base-4) 12%, transparent); overflow: hidden; }
.mcr-an-srow__bar i { display: block; height: 100%; border-radius: 3px; background: var(--part); }
.mcr-an-srow > b, .mcr-an-srow > span:last-child { text-align: end; }
/* «Подряд» В + «Кто закрыл» Г — пара в одном стиле: толщина 20 px (= AN_PAIR_W), скругление 4 px, без подложки; подпись категории — sm base-2, число — 12 px base-1.
   Высота графиков одна: 7 полос × 20 + 6 × 8 = 188 px, столбцы — 188 px */
.mcr-an-hb { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }
.mcr-an-hb__r { display: grid; grid-template-columns: 176px minmax(0, 1fr); /* подпись «2 подряд / 21 абонент» (было 56 px под «2 раза») */ align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: start; }
.mcr-an-hb__l { white-space: nowrap; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-2, var(--ui-color-base-1)); }
.mcr-an-hb__t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mcr-an-hb__t i { flex: none; height: 20px; min-width: 2px; border-radius: 4px; background: var(--ui-color-accent-main-alert); }
.mcr-an-hb__t b { font-size: 12px; font-weight: 400; color: var(--ui-color-base-1); }
.mcr-an-hb__r:hover .mcr-an-hb__l, .mcr-an-hb__r:hover .mcr-an-hb__t b { color: var(--ui-color-design-selection-content); } /* число абонентов синеет при наведении вместе с «N раз» (пользователь 2026-10-16) */
.mcr-an-hb__r:hover .mcr-an-hb__t i { filter: brightness(.92); }
.mcr-an-ccol--pair { height: 188px; margin-top: 14px; }
/* «Кто закрыл» Б: подписи частей под столбцами и числа над ними нажимаются — курсор как у столбца */
.mcr-an-ccol text { cursor: pointer; }
/* «Как закрыт пропуск»: часть «Ещё не закрыт» — серым (= AN_PART_COLOR.open) */
.mcr-an-part--open { --part: color-mix(in srgb, var(--ui-color-base-4) 45%, transparent); }

/* «Подряд» Г — таблица с полосами: шапка с единицами, строки — числа по правому краю, полоса в последней ячейке; одна линия под шапкой */
.mcr-an-pg { margin-top: 12px; position: relative; z-index: 1; font-size: var(--ui-font-size-sm); }
.mcr-an-pg__h, .mcr-an-pg__r { display: grid; grid-template-columns: 96px 88px minmax(0, 1fr); align-items: center; column-gap: 16px; }
.mcr-an-pg__h { padding: 0 6px 6px; border-bottom: 1px solid var(--ui-color-divider-default); font-size: var(--ui-font-size-xs); color: var(--ui-color-base-4); }
.mcr-an-pg__h > :nth-child(-n+2), .mcr-an-pg__r > :nth-child(-n+2) { text-align: end; }
.mcr-an-pg__r { width: 100%; padding: 5px 6px; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--ui-color-base-1); cursor: pointer; text-align: start; }
.mcr-an-pg__r:hover { background: var(--ui-color-bg-content-secondary); }
.mcr-an-pg__r:hover > :nth-child(-n+2) { color: var(--ui-color-design-selection-content); }
.mcr-an-pg__bar { height: 14px; }
.mcr-an-pg__bar i { display: block; height: 100%; min-width: 2px; border-radius: 3px; background: var(--ui-color-accent-main-alert); }
@media (max-width: 39.99rem) { .mcr-an-pg__h, .mcr-an-pg__r { grid-template-columns: 76px 76px minmax(0, 1fr); column-gap: 12px; } }
/* «Подряд» Г: строка «Итого» — над ней линия, текст полужирный */
.mcr-an-pg__r--sum { margin-top: 2px; border-top: 1px solid var(--ui-color-divider-default); border-radius: 0 0 6px 6px; } /* без полужирного (пользователь 2026-10-16) */

/* «Подряд» Д — таблица по бюро: по левому краю, числа по разрядам, выделенная шапка и одна линия под ней, «Всего» — воздухом и полужирным */
.mcr-an-bt { margin-top: 12px; position: relative; z-index: 1; font-size: var(--ui-font-size-sm); }
.mcr-an-bt__h, .mcr-an-bt__r { display: grid; grid-template-columns: 104px 76px minmax(0, 1fr); align-items: center; column-gap: 16px; text-align: start; } /* шапка в одну строку (двухстрочную пробовали — зазор не сократился, 2026-10-16) */
.mcr-an-bt__h { padding: 0 8px 7px; border-bottom: 1px solid var(--ui-color-divider-default); color: var(--ui-color-base-1); } /* шапка тёмная при бледной линии — выделена без полужирного (ревизор 2026-10-16) */ /* без полужирного — в виджетах его нет (пользователь 2026-10-16); шапку отделяет линия */
.mcr-an-bt__r { width: 100%; padding: 4px 8px; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--ui-color-base-1); cursor: pointer; }
.mcr-an-bt__h + .mcr-an-bt__r { margin-top: 4px; }
.mcr-an-bt__r:hover { background: color-mix(in srgb, var(--ui-color-base-4) 16%, transparent); } /* полупрозрачный серый поверх плитки: bg-content-secondary на серой плитке светлее её самой (251 при 248) — подсветка не была видна (2026-10-16) */
.mcr-an-bt__r:hover .mcr-an-bt__n { color: var(--ui-color-design-selection-content); } /* синеет только число; метка «2» — нет (пользователь 2026-10-16) */
.mcr-an-bt__n { font-variant-numeric: tabular-nums; }
.mcr-an-bt__h > :nth-child(-n+2), .mcr-an-bt__r > :nth-child(-n+2) { text-align: end; } /* обе колонки по правому краю: метка «2» рядом со своим «24» (ревизор 2026-10-16) */ /* «Абонентов» — шапка и числа по правому краю (пользователь 2026-10-16) */
.mcr-an-bt__bar { height: 10px; }
.mcr-an-bt__bar i { display: block; height: 100%; min-width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ui-color-accent-main-alert) 55%, var(--ui-color-bg-content-primary)); }
.mcr-an-bt__r--sum { margin-top: 10px; } /* «Всего» — отделено воздухом, без полужирного */
@media (max-width: 39.99rem) { .mcr-an-bt__h, .mcr-an-bt__r { grid-template-columns: 104px 76px minmax(0, 1fr); column-gap: 12px; } }

/* «Подряд» Е: метка · полоса · число — полосы не шире 240 px, числа колонкой за ними по правому краю */
.mcr-an-bt--mid .mcr-an-bt__h, .mcr-an-bt--mid .mcr-an-bt__r { grid-template-columns: 104px minmax(0, 240px) 76px; justify-content: start; }
.mcr-an-bt--mid .mcr-an-bt__h > :nth-child(2), .mcr-an-bt--mid .mcr-an-bt__r > :nth-child(2) { text-align: start; }
.mcr-an-bt--mid .mcr-an-bt__h > :nth-child(3), .mcr-an-bt--mid .mcr-an-bt__r > :nth-child(3) { text-align: end; }
@media (max-width: 39.99rem) { .mcr-an-bt--mid .mcr-an-bt__h, .mcr-an-bt--mid .mcr-an-bt__r { grid-template-columns: 96px minmax(0, 1fr) 68px; } }
/* «Подряд» Д: при наведении полоса строки — яркая (обычно приглушённая), как числа синеют (пользователь 2026-10-16) */
.mcr-an-bt__r:hover .mcr-an-bt__bar i { background: var(--ui-color-accent-main-alert); }

/* «Карта» Д (ревизор 2026-10-16): форма Г — крупные клетки, сетку видно (спокойный голубой у пустых), насыщенная красная шкала по нарастанию;
   польза В — без прокрутки, итоги справа, короткий период — только его дни. Цвета — от токенов кита, оттенки как в бою (#FFDEDD / #FF9A98 / #FF5753) */
.mcr-hv--bold { gap: 4px; }
.mcr-hv--bold .mcr-hv-c { height: auto; aspect-ratio: 1; min-width: 0; min-height: 0; border-radius: 5px; /* квадратные клетки, как в Г — по ширине колонки. Был min-height 26 px: вместе с aspect-ratio он держал и ширину 26, и на ширине портала (колонка ~21 px) клетки налезали друг на друга сплошной полосой (akulapro, 2026-10-16) */ background: color-mix(in srgb, var(--ui-color-accent-main-primary) 13%, var(--ui-color-bg-content-primary)); }
.mcr-hv--rot.mcr-hv--bold .mcr-hv-c { height: 26px; }
.mcr-hv--bold .mcr-hv-c.mcr-hv-c--off { background: var(--ui-color-bg-content-primary); }
.mcr-hv--bold .mcr-hv-c.mcr-hm--t1 { background: color-mix(in srgb, var(--ui-color-accent-main-alert) 20%, var(--ui-color-bg-content-primary)) !important; color: color-mix(in srgb, var(--ui-color-accent-main-alert) 78%, #000); }
.mcr-hv--bold .mcr-hv-c.mcr-hm--t2 { background: color-mix(in srgb, var(--ui-color-accent-main-alert) 60%, var(--ui-color-bg-content-primary)) !important; color: #fff; }
.mcr-hv--bold .mcr-hv-c.mcr-hm--t3 { background: var(--ui-color-accent-main-alert) !important; color: #fff; }

/* пульт «Имена» Б (ревизор 2026-10-16): в таблицах «Кто пропускает / Кто закрывает» нажимается вся строка — подсветка, число под курсором синеет;
   имя — обычный текст (синее имя в Б24 обещает профиль сотрудника, а открывался список звонков) */
.mcr-an[data-who-link=row] :is([data-an-miss], [data-an-back]) tbody tr:has([data-an-row]) { cursor: pointer; }
.mcr-an[data-who-link=row] :is([data-an-miss], [data-an-back]) tbody tr:has([data-an-row]):hover > td { background: color-mix(in srgb, var(--ui-color-base-4) 12%, transparent); }
.mcr-an[data-who-link=row] :is([data-an-miss], [data-an-back]) tbody tr:has([data-an-row]) > td:hover { color: var(--ui-color-design-selection-content); }
.mcr-an-who__n { color: var(--ui-color-base-1); }
/* «Как закрыт пропуск»: «N ещё не закрыто» — кнопка над ссылкой плитки; при наведении подпись синеет, как заголовок плитки */
.mcr-an-open { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; position: relative; z-index: 1; align-self: start; justify-self: start; } /* ширина — по тексту: в сетке плитки кнопка растягивалась на всю ширину (458 px при тексте 136), и наведение срабатывало на всей строке */
.mcr-an-open:hover .mcr-an-open__t { color: var(--ui-color-design-selection-content); }
/* › после «ещё не закрыто» синеет вместе с текстом */
.mcr-an-open:hover .mcr-an-go { color: var(--ui-color-design-selection-content); }
/* шеврон у строчного текста «ещё не закрыто» — на 1 px ниже, чем у заголовка капсом: середина строчных ниже середины прописных (было на 1,6 px выше) */
.mcr-an-open .mcr-an-go { vertical-align: -4px; }
/* незакрытых нет: «Все пропуски закрыты» — обычный текст, не нажимается; высота — как у строки с числом (22 px), чтобы плитка не прыгала */
.mcr-an-open--none { min-height: 33px; align-items: center; cursor: default; font-size: var(--ui-font-size-md, 15px); color: var(--ui-color-base-1); }
/* «Кто пропускает» на телефоне — узкая таблица (Д, выбор пользователя 2026-10-16) */
.mcr-an-wp { padding: 12px 8px 8px; font-size: var(--ui-font-size-sm); }
.mcr-an-wp__h, .mcr-an-wp__r { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28%; align-items: center; column-gap: 12px; text-align: start; }
.mcr-an-wp__h > :nth-child(2) { white-space: nowrap; }
.mcr-an-wp__h { padding: 0 8px 7px; border-bottom: 1px solid var(--ui-color-divider-default); color: var(--ui-color-base-1); }
.mcr-an-wp__h > :nth-child(2), .mcr-an-wp__r > :nth-child(2) { text-align: end; }
.mcr-an-wp__h + .mcr-an-wp__r { margin-top: 4px; }
.mcr-an-wp__r { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--ui-color-base-1); cursor: pointer; text-align: start; }
.mcr-an-wp__r:hover { background: color-mix(in srgb, var(--ui-color-base-4) 16%, transparent); }
.mcr-an-wp__name { display: block; min-width: 0; overflow-wrap: anywhere; }
.mcr-an-wp__sub { display: block; color: var(--ui-color-base-3); font-size: var(--ui-font-size-xs); }
/* Д — узкая таблица: имя + три числа по правому краю, без прокрутки */
.mcr-an-wp--t { padding-top: 8px; }
.mcr-an-wp--t .mcr-an-wp__h, .mcr-an-wp--t .mcr-an-wp__r { grid-template-columns: minmax(0, 1fr) 72px 44px 44px; }
.mcr-an-wp--t .mcr-an-wp__h > :nth-child(n+2), .mcr-an-wp--t .mcr-an-wp__r > :nth-child(n+2) { text-align: end; }
.mcr-an-wp--t .mcr-an-wp__r:hover .mcr-an-wp__name { color: var(--ui-color-design-selection-content); }
.mcr-an-wp--t .mcr-an-wp__r:hover .mcr-an-bt__n { color: inherit; } /* синеет только имя — строка одна, цифр три */
/* телефон: слайдера со списками нет (пользователь 2026-10-16) — ничто, кроме «ещё не закрыто ›», не выглядит нажимаемым */
.mcr-an[data-nolist="1"] .mcr-an-tile, .mcr-an[data-nolist="1"] .mcr-an-ccol text { cursor: default; }
.mcr-an[data-nolist="1"] :is(.mcr-an-bt__r, .mcr-an-wp__r, .mcr-an-part) { pointer-events: none; cursor: default; }
/* телефон (ниже 1024 px): «?» и другие кнопки справа — на одной линии с «Фильтром». У кита правая группа min-height 38 px — под строку заголовка
   на компьютере (37,5); на телефоне заголовок ниже (34), и кнопка справа сидела на 2 px ниже «Фильтра» (пользователь 2026-10-16) */
/* телефонный вид — класс mcr-phone на <html> (monitoring-b24ui.js, по PHONE: 1024 px, во встройке 768 px); было @media (max-width: 1023.98px) */
  :root.mcr-phone .b24-dashboard-navbar.b24-section-navbar { align-items: center; }
  :root.mcr-phone .b24-section-navbar > [data-slot="right"] { min-height: 0; }
/* «Когда пропущен», пресеты справа от календаря: у кита колонка не выше --max-height-popup-menu (304 px) с прокруткой — из 6 пресетов видно 4,
   под ними пустое место (календарь выше), «Текущий / Прошлый месяц» — только прокруткой, о которой не догадаться (akulapro, пользователь 2026-10-16).
   Здесь колонка — во всю высоту, все 6 пресетов видны. Только наш выбор периода (поповер [id$=-period] и шторка) */
@media (min-width: 40rem) {
  [id$="-period"].b24-date-time-picker .b24-date-time-picker__presets { max-height: none; overflow: visible; }
}
/* «Кому звонили» — поле-кнопка (окно портала): текст слева, как в поле периода (у input type=button браузер ставит по центру) */

/* встройки (TELEPHONY_ANALYTICS_MENU, CRM_ANALYTICS_MENU; data-mcr-embed на <html>): сайдбара нет — телефонный вид только уже 768 px (mcr-phone), а не 1024:
   рамка на обычном экране ~1000 px (пользователь 2026-10-16: «почему во встройке чуть ли не мобильный вид?»), на ноутбуке с меню портала — ~460 px
   (там нужен телефонный вид: «всегда компьютерный» ломал шапку — «полное говно», пользователь). Здесь — то, что кит прячет утилитами lg: до 1024 px */
@media (max-width: 1023.98px) {
  :root[data-mcr-embed]:not(.mcr-phone) .hidden.lg\:flex { display: flex; }
  :root[data-mcr-embed]:not(.mcr-phone) .lg\:hidden { display: none; }
}

/* «Отчёт строится» (heavyBoot в monitoring-b24ui.js) — style.css v1 .boot (#page-analytics), только после «Загрузить» в окне «Большой объём данных».
   Слой поверх панели раздела (место — по панели, position: fixed); цвета — токены кита вместо #f5f7f8 / #333 v1, чтобы работала тёмная тема */
.mcr-boot { position: fixed; z-index: 60; overflow: hidden; background: var(--ui-color-bg-content-secondary); }
.mcr-boot.is-out { animation: mcrBootLeave .4s ease forwards; }
@keyframes mcrBootLeave { to { opacity: 0; } }
.mcr-boot__skels { position: absolute; inset: 0; pointer-events: none; filter: blur(4px); overflow: hidden; }
/* артборд 1240×629 с левой колонкой ~194 px — срезаем её, как v1 (--cut-l) */
.mcr-boot__skels-art { --cut-l: 0.1565; position: absolute; top: 0; left: 0; width: calc(100% / (1 - var(--cut-l))); height: 100%; transform: translateX(calc(var(--cut-l) * -100%)); }
.mcr-boot__skels-art svg { width: 100% !important; height: 100% !important; display: block; }
.mcr-boot__center { position: absolute; top: 50%; left: 50%; width: min(678px, 92%); min-height: 320px; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; z-index: 2; padding: 48px 24px 56px;
  background: radial-gradient(58% 54% at 50% 50%, color-mix(in srgb, var(--ui-color-bg-content-primary) 95%, transparent) 55%, transparent 78%); }
.mcr-boot__ico { width: 260px; height: 155px; }
.mcr-boot__ico svg { display: block; width: 260px; height: 155px; }
.mcr-boot__txt { display: block; margin-top: 8px; max-width: 450px; font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--ui-color-base-1); text-align: center; }
.mcr-boot__dots { display: inline-block; width: 26px; height: 26px; margin-left: 2px; vertical-align: -0.2em; }
.mcr-boot__dots svg { display: block; width: 26px; height: 26px; }

/* Тесная шапка раздела (пользователь 2026-10-16, встройка на ноутбуке: «полное говно» — метка периода обрезалась до «Ко», кнопки наезжали).
   1) В поле «Фильтр + поиск» первой сжимается строка поиска (у кита flex: 1 0 183px — не сжималась), метки остаются целыми, как у портала.
   2) Шапке уже 1000 px — у помощников справа только значки (подпись — aria-label / title). Контейнерный запрос по ширине шапки: работает и во встройке,
      и в приложении на небольшом экране, где место отнимает сайдбар */
.b24-section-navbar .b24-filter__input { flex: 1 1 60px; min-width: 60px; }
.b24-section-navbar .b24-filter__chip { flex-shrink: 0; }
.b24-section-navbar { container-type: inline-size; container-name: mcr-nav; }
@container mcr-nav (max-width: 999.98px) {
  .b24-section-navbar [data-slot=right] .b24-btn--use-label [data-slot=label] { display: none; }
}