/* «Продажи → Юнит-экономика» (/sales/uniteconomics): вид как у МойСклада — у него этот отчёт только в новом оформлении
   (живая сверка 21.10.2026, окно 1996×1000 при 1,925). Шрифт ALS Hauss заменён свободным Onest ('Svod Onest' — card.css),
   размеры, цвета и отступы — его. Приставка ms-ue-. */
.ms-page.ms-page-ue { --ue-font: 'Svod Onest', Arial, sans-serif; box-sizing: border-box; margin: 0; padding: 20px 40px 0 20px;
  background: #f1f4f9; color: #091739; font: 400 14px/20px var(--ue-font); }
.ms-page-ue *, .ms-page-ue *::before, .ms-page-ue *::after { box-sizing: border-box; }
/* Onest шире ALS Hauss, а его цифры — пропорциональные: межбуквенный интервал и табличные цифры подобраны по живой сверке
   21.10.2026 так, что ширины надписей и чисел — как у МойСклада до 1–2 px («441 546,63» — 481…557 px, как у него). */
.ms-ue-title { letter-spacing: -.1px; }
.ms-ue-label { letter-spacing: -.25px; }
.ms-ue-switch-text, .ms-ue-export, .ms-ue-table tbody th { letter-spacing: -.2px; }
.ms-ue-th { letter-spacing: -.06px; }
.ms-ue-table td { font-variant-numeric: tabular-nums; letter-spacing: -.7px; }
.ms-ue-table tfoot td { letter-spacing: -.45px; }
.ms-ue-all { letter-spacing: -.2px; }
.ms-ue-all-n { font-variant-numeric: tabular-nums; letter-spacing: -.8px; }
.ms-page-ue [hidden] { display: none !important; }
.ms-page-ue button, .ms-page-ue input { font-family: inherit; }

/* Строка над карточкой: заголовок, «?», период, переключатель расходов, «?», справа «Выгрузить в Excel». */
.ms-ue-top { display: flex; align-items: center; min-height: 32px; margin: 0 0 16px; white-space: nowrap; }
.ms-ue-title { flex: none; margin: 0; padding: 0; font: 700 24px/30px var(--ue-font); color: #091739; }
.ms-page-ue .ms-ue-help { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0;
  padding: 0; border: 0; border-radius: 50%; background: none; color: #5f6d79; cursor: pointer; position: static; }
.ms-page-ue .ms-ue-help > svg { display: block; width: 20px; height: 20px; }
.ms-page-ue .ms-ue-help:hover, .ms-page-ue .ms-ue-help[aria-expanded="true"] { color: #036ce5; }
.ms-ue-top > .ms-ue-help { margin-left: 12px; }
.ms-ue-controls { display: flex; flex: none; align-items: center; margin: 0 0 0 24px; }
.ms-ue-period { display: inline-flex; align-items: center; gap: 8px; }
.ms-ue-label { font: 400 14px/20px var(--ue-font); color: #5f6d79; }
/* Общие стили поля даты (.ms-date — рамка и белый фон старого вида) здесь сняты: у МойСклада поле прозрачное, рамка — тонкая обводка. */
.ms-page-ue .ms-ue-date { position: relative; display: inline-block; flex: none; box-sizing: border-box; width: 162px; height: 30px; border: 0;
  background: none; }
.ms-page-ue .ms-ue-date .ms-input { box-sizing: border-box; display: block; width: 162px; height: 30px; margin: 0; padding: 0 8px 0 32px; border: 0;
  border-radius: 8px; outline: .5px solid #bec6d7; outline-offset: 0; box-shadow: none; background: transparent; color: #091739;
  font: 400 14px/30px var(--ue-font); font-variant-numeric: tabular-nums; }
.ms-page-ue .ms-ue-date .ms-input:focus { outline: 1px solid #036ce5; }
.ms-page-ue .ms-ue-date .ms-date-open { position: absolute; left: 12px; top: 9px; z-index: 1; display: block; width: 12px; height: 12px;
  margin: 0; padding: 0; border: 0; background: none; color: #5f6d79; cursor: pointer; }
.ms-page-ue .ms-ue-date .ms-date-open > svg { display: block; width: 12px; height: 12px; }
.ms-ue-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-left: 24px; cursor: pointer; user-select: none;
  font: 400 14px/20px var(--ue-font); color: #091739; }
.ms-ue-switch > input { position: absolute; left: 0; top: 2px; width: 28px; height: 16px; margin: 0; opacity: 0; cursor: pointer; }
.ms-ue-switch-track { position: relative; flex: none; width: 28px; height: 16px; border-radius: 12px; background: #9fa7af; transition: background-color .15s; }
.ms-ue-switch-track::after { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 1px #9fa7af; transition: left .15s, box-shadow .15s; }
.ms-ue-switch > input:checked + .ms-ue-switch-track { background: #036ce5; }
.ms-ue-switch > input:checked + .ms-ue-switch-track::after { left: 12px; box-shadow: inset 0 0 0 1px #036ce5; }
.ms-ue-switch > input:focus-visible + .ms-ue-switch-track { outline: 2px solid #036ce5; outline-offset: 2px; }
.ms-ue-switch > input:disabled, .ms-ue-switch > input:disabled + .ms-ue-switch-track { cursor: default; opacity: .5; }
.ms-ue-switch:has(> input:disabled) { color: #9fa7af; cursor: default; }
.ms-page-ue .ms-ue-opex-help { margin-left: 12px; }
.ms-ue-export { display: inline-flex; flex: none; align-items: center; height: 32px; margin-left: auto; padding: 6px 16px; border: 0; border-radius: 8px;
  background: transparent; color: #036ce5; font: 400 14px/20px var(--ue-font); text-decoration: none; cursor: pointer; }
.ms-ue-export:hover { background: #e5effc; }
.ms-ue-export:disabled { color: #9fa7af; cursor: default; background: transparent; }

.ms-ue-help-menu { max-width: 460px; padding: 12px 14px; font: 400 12px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #222;
  white-space: normal; }
.ms-ue-help-menu p { margin: 0 0 8px; }
.ms-ue-help-menu p:last-child { margin-bottom: 0; }
.ms-ue-error { margin: 0 0 12px; padding: 6px 10px; border-radius: 8px; background: #fdeeee; color: #a32121; }

/* Белая карточка таблицы: плашка «Все N» и шестерёнка столбцов, под ними таблица с прокруткой внутри карточки. */
.ms-ue-card { position: relative; display: flex; flex-direction: column; min-height: 240px; border-radius: 8px; background: #fff; overflow: hidden; }
.ms-ue-bar { display: flex; flex: none; align-items: center; height: 51px; padding: 10px 21px 13px 13px; }
/* inline-block, не flex: во flex пробел «Все 921» перед числом схлопывается. */
.ms-ue-all { display: inline-block; height: 28px; padding: 0 12px; border-radius: 8px; background: #f1f4f9; color: #091739; white-space: nowrap;
  font: 400 14px/28px var(--ue-font); }
.ms-ue-gear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: auto; padding: 0;
  border: 0; background: none; color: #036ce5; cursor: pointer; }
.ms-ue-gear > svg { display: block; width: 20px; height: 20px; }
.ms-ue-columns { min-width: 220px; padding: 12px 14px; }
.ms-ue-columns > b { display: block; margin-bottom: 8px; }
.ms-ue-columns .ms-check { display: flex; margin: 6px 0; }
.ms-ue-columns p { margin: 8px 0 0; color: #777; font-size: 11px; }

.ms-ue-table-wrap { position: relative; flex: 1 1 auto; min-height: 0; margin-left: 1px; overflow: auto; }
.ms-ue-table { width: max-content; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  font: 400 14px/20px var(--ue-font); color: #091739; }
.ms-ue-table th, .ms-ue-table td { position: relative; height: 32px; padding: 0 8px; background: #fff; text-align: right; white-space: nowrap;
  vertical-align: middle; font-weight: 400; }
.ms-ue-table .ms-ue-name { position: sticky; left: 0; z-index: 1; width: 400px; min-width: 400px; max-width: 400px; overflow: hidden;
  text-overflow: ellipsis; text-align: left; }
.ms-ue-table .ms-ue-money { width: 152px; min-width: 152px; }
.ms-ue-table .ms-ue-pct { width: 74px; min-width: 74px; }
.ms-ue-table .ms-ue-pct.ms-ue-total { width: 144px; min-width: 144px; }
/* Общая прибыль и рентабельность — серые столбцы; у прибыли справа белый зазор 8 px (серое — 144 px из 152). */
.ms-ue-table .ms-ue-total { background: #e1e3e6; }
.ms-ue-table .ms-ue-money.ms-ue-total { padding-right: 16px; box-shadow: inset -8px 0 0 #fff; }

.ms-ue-table thead th { position: sticky; top: 0; z-index: 2; padding: 0 12px 0 8px; text-align: left; box-shadow: 0 1px 0 #d1d6df; }
.ms-ue-table thead th.ms-ue-money.ms-ue-total { padding-right: 20px; box-shadow: inset -8px 0 0 #fff, 0 1px 0 #d1d6df; }
.ms-ue-table thead .ms-ue-name { z-index: 3; }
.ms-ue-th { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; color: #5f6d79; text-decoration: none;
  font: 400 12px/20px var(--ue-font); }
.ms-ue-th-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ms-ue-chev { flex: none; display: block; width: 12px; height: 12px; color: #5f6d79; }
.ms-ue-th:hover .ms-ue-th-label { color: #091739; }

.ms-ue-table tbody th, .ms-ue-table tbody td { box-shadow: inset 0 -1px 0 #f0f3f8; }
.ms-ue-table tbody .ms-ue-pct.ms-ue-total { box-shadow: none; }
.ms-ue-table tbody .ms-ue-money.ms-ue-total { box-shadow: inset -8px 0 0 #fff; }
.ms-ue-table tbody .ms-ue-name a, .ms-ue-table tbody .ms-ue-name > span:first-child { color: #091739; text-decoration: none; }
.ms-ue-table tbody .ms-ue-name a:hover { color: #036ce5; }
.ms-ue-f { color: #5f6d79; }
.ms-ue-mark { margin-left: 5px; color: #db5202; font-weight: 700; cursor: help; }
.ms-ue-table td.ms-ue-empty { height: 64px; color: #5f6d79; text-align: center; white-space: normal; }

/* Итоги с листалкой — прилипают к низу карточки, как у МойСклада (тень сверху 1 px #d1d6df). */
.ms-ue-table tfoot th, .ms-ue-table tfoot td { position: sticky; bottom: 0; z-index: 2; font-weight: 700; color: #091739;
  box-shadow: 0 -1px 0 #d1d6df, 0 2px 0 #fff; }
.ms-ue-table tfoot .ms-ue-name { z-index: 3; padding: 0; overflow: visible; }
.ms-ue-table tfoot td.ms-ue-money:nth-child(2) { padding-right: 16px; }
.ms-ue-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ms-ue-pager { display: flex; align-items: center; gap: 4px; height: 32px; padding-left: 6px; font: 400 14px/20px var(--ue-font); }
.ms-ue-page { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #000; }
.ms-ue-page > svg { display: block; width: 20px; height: 20px; }
.ms-ue-page:hover { color: #036ce5; }
.ms-ue-page.off { color: #797979; cursor: default; pointer-events: none; }
.ms-ue-range { min-width: 103px; height: 20px; margin-right: -1px; padding: 0; border: 0; background: none; color: #091739; text-align: center;
  font: 400 14px/20px var(--ue-font); font-variant-numeric: tabular-nums; letter-spacing: -.8px; cursor: pointer; }
.ms-ue-pages { min-width: 150px; }
.ms-ue-pages .ms-menu-item.on { font-weight: 700; }

.ms-ue-notes { max-width: 1100px; padding: 12px 0 20px; }
.ms-ue-note { margin: 0 0 6px; color: #5f6d79; font: 400 12px/16px var(--ue-font); }
.ms-ue-discrepancy { color: #8a5a00; }
.ms-ue-denied { margin: 30px; color: #a32121; }

/* Уже ~1100 px строка над карточкой в одну строку не входит: переносится, а не обрезается. */
@media (max-width: 1099px) {
  .ms-ue-top { flex-wrap: wrap; row-gap: 8px; white-space: normal; }
  .ms-ue-controls { flex-wrap: wrap; row-gap: 8px; margin-left: 12px; }
  .ms-ue-export { margin-left: 0; }
}
@media (max-width: 899px) {
  .ms-page.ms-page-ue { padding: 16px 16px 0; }
  .ms-ue-period { flex-wrap: wrap; row-gap: 6px; }
  .ms-ue-switch { margin-left: 0; white-space: normal; }
  .ms-ue-table .ms-ue-name { width: 200px; min-width: 200px; max-width: 200px; }
}
@media print {
  .ms-page.ms-page-ue { padding: 0; background: #fff; }
  .ms-page-ue .ms-ue-controls, .ms-page-ue .ms-ue-export, .ms-page-ue .ms-ue-help, .ms-ue-gear, .ms-ue-pager, .ms-page-ue .ms-menu { display: none !important; }
  .ms-ue-card { display: block; height: auto !important; overflow: visible; }
  .ms-ue-table-wrap { overflow: visible; }
  .ms-ue-table .ms-ue-name, .ms-ue-table thead th, .ms-ue-table tfoot th, .ms-ue-table tfoot td { position: static; }
}