/* Поверх apps-ds — только то, чего в системе нет. Используются её токены, не свои. */

.cards { display: grid; gap: var(--ds-gap); grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); }

.card {
    background: var(--ds-surface);
    border-radius: var(--ds-r-card);
    padding: 24px 28px;
    display: flex; flex-direction: column;
    cursor: pointer;
    transition: box-shadow var(--ds-t);
}
.card:hover { box-shadow: var(--ds-ring); }
.card__name { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ds-gray-080); }
.card__val { margin-top: 10px; font-size: 40px; line-height: 44px; font-weight: 400; font-variant-numeric: tabular-nums; }
.card__val--money { font-size: 30px; line-height: 44px; }
.card__meta { margin-top: 6px; color: var(--ds-gray-060); font-size: 12px; line-height: 16px; }
.card__bars { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.card__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; font-size: 13px; line-height: 18px; }
/* Длинное имя направления («Мастер-классы - Продуктовое направление») занимало три строки
   и растило карточку — режем многоточием, полное имя в подсказке */
.card__bar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__bar b { font-weight: 400; font-variant-numeric: tabular-nums; }
.card__track { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--ds-gray-015); overflow: hidden; }
.card__fill { height: 100%; background: var(--ds-accent-060); }
.card--err .card__val { font-size: 14px; line-height: 20px; color: var(--ds-red); }


.fields { display: grid; gap: 12px 20px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.field-block { margin-top: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chips--scroll { max-height: 124px; overflow-y: auto; }
.chip {
    border: 0; border-radius: var(--ds-r-sm); height: var(--ds-h-sm); padding: 0 12px;
    background: var(--ds-gray-015); color: var(--ds-gray-080); cursor: pointer;
    transition: background var(--ds-t), color var(--ds-t);
}
.chip:hover { background: var(--ds-gray-020); }
.chip[aria-pressed="true"] { background: var(--ds-accent); color: #fff; }
#tplName { max-width: 260px; }
#adhoc:not(:empty) { margin-top: 20px; }

.popup {
    position: absolute; z-index: 40; min-width: 260px; max-height: 62vh; overflow-y: auto;
    background: var(--ds-surface); border-radius: var(--ds-r-ctl); padding: 6px;
    box-shadow: var(--ds-shadow-pop);
}
.popup-item {
    display: flex; align-items: center; gap: 8px;
    height: var(--ds-h-ctl); padding: 0 12px;
    border-radius: var(--ds-r-sm); cursor: pointer;
}
.popup-item:hover { background: var(--ds-gray-015); }
.popup-item[aria-selected="true"] { background: var(--ds-accent-010); color: var(--ds-accent); }
.popup-item__name { flex: 1; }
.popup-item__cnt { color: var(--ds-gray-060); font-variant-numeric: tabular-nums; font-size: 13px; }
.popup-item__tick { flex: none; opacity: 0; color: var(--ds-accent); }
.popup-item[aria-selected="true"] .popup-item__tick { opacity: 1; }

/* ---- панель управления ---- */
.ds-row--tight { gap: 6px; }
.datenav { display: flex; align-items: center; gap: 4px; }
.datenav .ds-input { height: var(--ds-h-sm); width: 152px; border-radius: var(--ds-r-sm); }
.datenav .ds-btn[disabled] { opacity: .35; pointer-events: none; }
.ds-input--sm { height: var(--ds-h-sm); }

.picked { display: flex; flex-wrap: wrap; gap: 6px; }
.picked__item {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--ds-h-sm); padding: 0 10px; border: 0; border-radius: var(--ds-r-sm);
    background: var(--ds-accent-010); color: var(--ds-accent); cursor: pointer;
}
.picked__item:hover { background: var(--ds-accent-020); }
.picked__item svg { opacity: .6; }

/* ---- карточки ---- */
.cards--loading { opacity: .45; transition: opacity var(--ds-t); }
.card-skel { height: 176px; border-radius: var(--ds-r-card); }
/* ⓘ-подсказка из apps-ds: свой тултип за 0,1 с вместо системного title — тот всплывает с задержкой браузера */
.ds-hint { position: relative; display: inline-flex; margin-left: 6px; color: var(--ds-gray-050); font-weight: 400; cursor: help; }
.ds-hint:hover, .ds-hint:focus { color: var(--ds-gray-080); outline: 0; }
.ds-hint .ds-tooltip {
    position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 1000;
    width: max-content; max-width: 320px; padding: 10px 12px; font-size: 13px; line-height: 18px; white-space: normal;
    opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(4px);
    transition: opacity .1s ease-in, transform .1s ease-in;
}
.ds-hint:hover .ds-tooltip, .ds-hint:focus .ds-tooltip { opacity: 1; transform: translateX(-50%); }
/* У левого края страницы центрированный тултип уехал бы за экран — растим его вправо от значка */
.ds-hint--start .ds-tooltip { left: -12px; transform: translateY(4px); }
.ds-hint--start:hover .ds-tooltip, .ds-hint--start:focus .ds-tooltip { transform: none; }

.card:hover 

.adhoc-res {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--ds-surface-muted); border-radius: var(--ds-r-ctl); padding: 18px 22px;
}

.popup__hint { padding: 8px 12px 6px; }

@media (max-width: 640px) {
    .cards { grid-template-columns: 1fr; }
    .datenav .ds-input { width: 138px; }
}

/* Атрибут hidden слабее классов дизайн-системы (display:flex) — возвращаем ему силу */
[hidden] { display: none !important; }

.banner { margin-top: 16px; display: block; }   /* .ds-note — flex: <b> внутри растягивался бы в колонку */

/* Карточки одной высоты: заголовок в две строки не должен ломать ряд значений */
.card { height: 100%; }


.cards { align-items: stretch; }

/* «Подробнее» — сразу под содержимым: при одной воронке разбивки нет и карточка
   не должна растягиваться пустотой */

.card { height: auto; }
.cards { align-items: start; }

/* ---- модалка деталей ---- */
.modal-sum { margin-bottom: 4px; }
.modal-descr { margin: 12px 0 4px; }
.modal-cap { margin: 20px 0 6px; }
.modal-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.modal-table td { padding: 8px 0; border-bottom: 1px solid var(--ds-line); }
.modal-table tr:last-child td { border-bottom: 0; }
.modal-table td:nth-child(2) { text-align: right; width: 72px; }
.modal-table td:nth-child(3) { text-align: right; width: 116px; }
.ds-modal { max-height: 82vh; overflow-y: auto; }

/* Зазор между строками: соседние выбранные пункты иначе сливаются в одно пятно */
#catList { display: flex; flex-direction: column; gap: 2px; }

/* ---- заголовок карточки: имя + уточнение вместо капслока из ТЗ ---- */
.card__head { min-height: 42px; }
.card__tag { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ds-gray-060); }
.modal-tag { font-size: 14px; font-weight: 400; color: var(--ds-gray-060); }

/* ---- «Подробнее»: полноценная кнопка, а не серая надпись ---- */
.card__more {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    margin-top: 0; height: var(--ds-h-sm); padding: 0 12px;
    border: 0; border-radius: var(--ds-r-sm); cursor: pointer;
    background: var(--ds-gray-015); color: var(--ds-gray-080);
    font-size: 13px; line-height: 18px;
    transition: background var(--ds-t), color var(--ds-t);
}
.card__more svg { opacity: .55; }
.card:hover .card__more { background: var(--ds-accent-010); color: var(--ds-accent); }
.card__more:hover { background: var(--ds-accent-020) !important; }

/* Карточки в ряду одной высоты, кнопка прижата к низу: строка «Дата создания…»
   бывает в одну или две строки и иначе кнопки скачут по вертикали */
.cards { align-items: stretch; }
.card { height: 100%; }

/* ---- страница входа ---- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login__card { width: 100%; max-width: 380px; }
.login__logo { display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 28px; margin-bottom: 24px; }

.login__submit { width: 100%; margin-top: 24px; }
.login__err { margin-top: 16px; }

/* ---- учётки ---- */
.users-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.users-table th { text-align: left; font-weight: 400; color: var(--ds-gray-060); padding: 0 12px 10px 0; }
.users-table td { padding: 10px 12px 10px 0; border-top: 1px solid var(--ds-line); }
.users-table td:last-child, .users-table th:last-child { text-align: right; padding-right: 0; }
.users-table tr[data-off="1"] td:not(:last-child) { opacity: .45; }
.pass-box {
    display: flex; align-items: center; gap: 10px; margin-top: 14px;
    background: var(--ds-surface-muted); border-radius: var(--ds-r-ctl); padding: 14px 18px;
}
.pass-box code { font-size: 16px; letter-spacing: .04em; flex: 1; }

/* Знак: вместо голого круга из ДС — столбики отчёта в скруглённом квадрате */
.logo-mark { flex: none; border-radius: 9px; }
.ds-logo .logo-mark { margin-right: 2px; }
.login__logo .logo-mark { width: 30px; height: 30px; }

/* Откуда взята цифра за прошлый день */
.card__badge {
    display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: var(--ds-r-xs);
    background: var(--ds-gray-015); color: var(--ds-gray-060);
    font-size: 11px; line-height: 16px; vertical-align: 2px; cursor: help;
}
.card__badge--warn { background: rgba(255, 130, 0, .14); color: #a35400; }

/* Скелетон ровно той же высоты, что карточка: иначе при загрузке сетка прыгает */
.card--skel {
    min-height: 232px; background: var(--ds-surface); border-radius: var(--ds-r-card);
    position: relative; overflow: hidden; cursor: default;
}
.card--skel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--ds-gray-010), transparent);
    animation: skel 1.2s infinite;
}
@keyframes skel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.cards--loading { opacity: .5; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200; max-width: 80vw; }
.toast--bad { background: var(--ds-red); }

.prob { margin: 8px 0 0; padding-left: 20px; }
.prob li { margin: 3px 0; }
.banner .ds-btn { margin-top: 12px; }

/* Распорка: снизу от контента до кнопки всегда минимум 18px, а если в карточке
   есть свободное место — она его съедает и прижимает кнопку к низу.
   Одним margin-top:auto это не решается: без свободного места он даёт ноль. */
.card__spacer { flex: 1 1 auto; min-height: 18px; }

.card__val--none { color: var(--ds-gray-040); }

/* ── расшифровка показателя в список сделок ─────────────────────────────── */
.modal-row { cursor: pointer; }
.modal-row:hover td { background: var(--ds-surface-muted); }
.modal-sum { cursor: pointer; border-radius: var(--ds-r-ctl); }
.modal-sum:hover { background: var(--ds-surface-muted); }
.modal-back { margin-bottom: 12px; }
.modal-note { margin: 0 0 10px; }

/* Список сделок шире разбивки: пять-шесть колонок в 560 px не читаются */
.ds-modal--wide { max-width: 1100px; }
.deals-wrap { max-height: 60vh; overflow: auto; margin-top: 4px; }
.deals-table { width: 100%; }
.deals-table th { position: sticky; top: 0; z-index: 1; background: var(--ds-surface);
                  text-align: left; font-weight: 500; color: var(--ds-gray-060);
                  padding: 0 10px 6px 0; white-space: nowrap; }
.deals-table td { vertical-align: top; padding-right: 10px; }
.deals-table td.col-stage { white-space: nowrap; }
.deals-table a { color: var(--ds-accent); text-decoration: none; }
.deals-table a:hover { text-decoration: underline; }
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--ds-gray-080); }
.deals-table th.ds-right, .deals-table td.ds-right { text-align: right; }

@media (max-width: 1180px) { .ds-modal--wide { max-width: 100%; } }

/* ---- крестик удаления пользовательского показателя (только админу) ---- */
.card { position: relative; }
.card__del {
    position: absolute; top: 16px; right: 16px;
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--ds-r-sm); cursor: pointer;
    background: transparent; color: var(--ds-gray-060); opacity: 0;
    transition: opacity var(--ds-t), background var(--ds-t), color var(--ds-t);
}
.card:hover .card__del, .card__del:focus-visible { opacity: 1; }
.card__del:hover { background: var(--ds-gray-015); color: var(--ds-red); }

/* ---- карандаш + крестик на пользовательском показателе (только админу) ---- */
.card__ctl { position: absolute; top: 16px; right: 16px; display: flex; gap: 2px; }
.card__del { position: static; }
.card__edit {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--ds-r-sm); cursor: pointer;
    background: transparent; color: var(--ds-gray-060); opacity: 0;
    transition: opacity var(--ds-t), background var(--ds-t), color var(--ds-t);
}
.card:hover .card__edit, .card__edit:focus-visible { opacity: 1; }
.card__edit:hover { background: var(--ds-gray-015); color: var(--ds-accent); }

/* Режим правки показателя в конструкторе */
.edit-bar { margin-top: 20px; display: block; }
#tplTag { max-width: 260px; }

/* ---- отчёт картинкой ---- */
.ex-bar { margin-bottom: 16px; }
.ex-bar .ds-select { width: auto; min-width: 200px; }
.ex-preview { background: var(--ds-bg); border-radius: var(--ds-r-ctl); padding: 8px; }
.ex-preview img { display: block; width: 100%; max-width: 860px; margin: 0 auto; border-radius: var(--ds-r-ctl); }

.ex-line {
    display: grid; grid-template-columns: minmax(200px, 1fr) minmax(220px, 1.4fr) auto;
    gap: 8px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--ds-line);
}
.ex-line:first-child { border-top: 0; }
.ex-line__fields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ex-line__fields .ds-select { flex: 0 0 auto; width: 160px; height: var(--ds-h-sm); padding: 4px 32px 4px 10px; color: var(--ds-gray-060); }
.ex-line__ctl { display: flex; gap: 2px; }
.ex-chip {
    display: inline-flex; align-items: center; gap: 4px;
    height: var(--ds-h-sm); padding: 0 6px 0 10px; border-radius: var(--ds-r-sm);
    background: var(--ds-accent-010); color: var(--ds-accent); font-size: 13px;
}
.ex-chip--bad { background: var(--ds-red-020); color: var(--ds-red); }
.ex-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; padding: 0 4px; opacity: .6; }
.ex-chip button:hover { opacity: 1; }
@media (max-width: 720px) { .ex-line { grid-template-columns: 1fr; } }

/* Модалка отчёта: прокручивается только тело, шапка и подвал закреплены.
   Прокрутка на самой .ds-modal рисовала скроллбар поверх скруглённых углов. */
#exportModal .ds-modal {
    display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: 82vh;
}
#exportModal .ds-modal__head { flex: none; padding: 28px 36px 0; margin-bottom: 16px; }
#exBody {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 36px;
    scrollbar-width: thin; scrollbar-color: var(--ds-gray-030-solid) transparent;
}
#exBody::-webkit-scrollbar { width: 8px; }
#exBody::-webkit-scrollbar-thumb { background: var(--ds-gray-030-solid); border-radius: 4px; }
#exBody::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
#exportModal .ds-modal__foot {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: 16px; padding: 16px 0 24px;
    background: var(--ds-surface);
    box-shadow: 0 -12px 12px -8px var(--ds-surface);
}

/* ---- перетаскивание плиток (порядок свой у каждого, лежит в user_prefs) ---- */
.card__grip {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ds-gray-060); opacity: 0; cursor: grab;
    transition: opacity var(--ds-t), color var(--ds-t);
}
.card:hover .card__grip { opacity: 1; }
.card__grip:hover { color: var(--ds-gray-080); }
.card--drag { opacity: .4; }
.card--drag .card__grip { cursor: grabbing; }
/* Куда встанет карточка: подсвечиваем цель тем же кольцом, что и hover */
.card--over { box-shadow: 0 0 0 2px var(--ds-accent) inset; }
.card--drag .card__grip { opacity: 1; cursor: grabbing; }

/* ---- разделы в шапке (общие с Call-Review: те же классы, тот же вид) ---- */
.topnav { display: inline-flex; padding: 2px; height: var(--ds-h-ctl); border-radius: var(--ds-r-ctl); background: var(--ds-gray-015); }
.topnav .navlink { display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--ds-r-ctl); color: var(--ds-gray-080); transition: background var(--ds-t); }
.topnav .navlink:hover { background: var(--ds-gray-015); }
.topnav + .topnav { margin-left: 8px; }
.topnav .navlink.active { background: var(--ds-surface); }
.topnav[hidden] { display: none; }
.users-table td { vertical-align: middle; }

/* ---- активная вкладка: одна подложка на группу, по клику скользит к цели ещё до ухода
   со страницы (nav.js / topnav.js); на новой странице встаёт без анимации ---- */
.ds-topbar { position: relative; }
.topnav .navlink { position: relative; z-index: 2; }
.topnav .navlink.active { background: transparent; }
.topnav__pill { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; border-radius: var(--ds-r-ctl); background: var(--ds-surface); }
.topnav__pill.anim { transition: left .25s cubic-bezier(.2,.8,.2,1), width .25s cubic-bezier(.2,.8,.2,1); }
.topnav__pill.fade { transition: opacity .13s linear; }
/* «Заказы» — капсула из одного пункта: серый ободок вокруг активной вкладки тут ничего не разделяет.
   Активная — капсула целиком белая; неактивная остаётся серой, как соседние группы. */
#navOrders:has(.navlink.active) { background: var(--ds-surface); }

/* ---- выпадашка аккаунта (общая с Call-Review) ---- */
.acct { position: relative; }
.acct-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--ds-h-ctl); padding: 0 12px; border: 0; border-radius: var(--ds-r-ctl); background: transparent; color: var(--ds-gray-060); cursor: pointer; transition: background var(--ds-t), color var(--ds-t); }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { background: var(--ds-gray-015); color: var(--ds-gray-080); }
.acct-btn .chev { width: 14px; height: 14px; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--ds-surface); border-radius: var(--ds-r-ctl); box-shadow: var(--ds-shadow-pop); padding: 6px; z-index: 60; }
.acct-menu a, .acct-menu button { display: flex; align-items: center; width: 100%; height: var(--ds-h-ctl); text-align: left; background: none; border: 0; padding: 8px 12px; border-radius: var(--ds-r-sm); color: var(--ds-gray-080); text-decoration: none; cursor: pointer; white-space: nowrap; font: inherit; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--ds-gray-015); }
.acct-menu .sep { height: 1px; background: var(--ds-line); margin: 6px 0; }
[hidden] { display: none !important; }

/* ---- появление страницы: контент под шапкой мягко проявляется (180 мс) ---- */
.ds-main, .wrap { animation: page-in .18s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ds-main, .wrap { animation: none; } }

/* логотип без подписи */
.ds-logo { margin-right: 16px; }
.login__logo { justify-content: center; }

/* ---- логотип: при наведении линия пульса плавно стирается слева и рисуется заново ---- */
.pulse-line { stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.ds-logo:hover .pulse-line, .login__logo:hover .pulse-line { animation: pulse-draw 1.6s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes pulse-draw { to { stroke-dashoffset: -200; } }
@media (prefers-reduced-motion: reduce) { .pulse-line { animation: none !important; } }

/* шапка в той же сетке, что и контент: логотип и вкладки над левым краем карточек */
.ds-topbar { max-width: 1280px; width: 100%; margin: 0 auto; }

/* плашка режима дня меняет цвет плавно */
.banner { transition: background var(--ds-t); }

/* Строки грида заданы явно. Без этого при коротком контенте (пустой продуктовый отчёт)
   свободное место до 100vh делится между шапкой и main поровну — и main уезжает вниз. */
.ds-app { grid-template-rows: auto 1fr; }

/* ---- продуктовый отчёт ---- */
/* Предпросмотр отчёта — крупнее: в узкой модалке картинка нечитаема */
/* Окно по ширине картинки: фиксированная ширина оставляла пустые поля по бокам у короткого
   отчёта и ужимала длинный. Шире экрана не растёт — картинка прокручивается. */
#imgModal .ds-modal { width: fit-content; min-width: 560px; max-width: min(1080px, 94vw); }
.img-preview { max-height: 64vh; overflow: auto; border-radius: 28px; padding: 10px;
    background: var(--ds-surface-muted); display: flex; }
/* Центр через auto-поля, а не justify-content: при картинке шире окна flex-центрирование
   срезает её левый край и доскроллить туда нельзя */
.img-preview > canvas { margin: auto; }
.img-preview canvas { border-radius: 20px; }
.img-preview canvas { display: block; }
.row-day { cursor: pointer; }
#eFields { margin-top: 20px; }
#dirsTable { margin-top: 16px; }

/* ---- календарь (datepicker.js) ---- */
.dp-input { cursor: pointer; }
.dp {
    /* Поверх модалки ввода (.ds-modal-backdrop, z-index 100) — иначе календарь
       открывается под затемнением и кажется, что он не работает */
    position: absolute; z-index: 200; width: 268px; padding: 12px;
    background: var(--ds-surface); border-radius: var(--ds-r-ctl);
    box-shadow: var(--ds-shadow-pop);
}
.dp__head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.dp__title { flex: 1; text-align: center; font-weight: 500; text-transform: capitalize; }
.dp__nav {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--ds-r-sm); background: transparent; color: var(--ds-gray-070);
    cursor: pointer; transition: background var(--ds-t);
}
.dp__nav:hover { background: var(--ds-gray-015); }
.dp__dow, .dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp__dow span { text-align: center; font-size: 12px; line-height: 20px; color: var(--ds-gray-060); }
.dp__day {
    height: 32px; border: 0; border-radius: var(--ds-r-sm); background: transparent;
    font: inherit; font-variant-numeric: tabular-nums; color: var(--ds-gray-080);
    cursor: pointer; transition: background var(--ds-t), color var(--ds-t);
}
.dp__day:hover { background: var(--ds-gray-015); }
.dp__day--out { color: var(--ds-gray-050); }
.dp__day--today { box-shadow: inset 0 0 0 1px var(--ds-accent-060); }
.dp__day--on { background: var(--ds-accent); color: #fff; }
.dp__day--on:hover { background: var(--ds-accent-hover); }
.dp__day--off { color: var(--ds-gray-040); pointer-events: none; }
.dp__foot { margin-top: 8px; display: flex; justify-content: flex-end; }
.dp__today {
    border: 0; background: transparent; color: var(--ds-accent); font: inherit;
    padding: 6px 8px; border-radius: var(--ds-r-sm); cursor: pointer;
}
.dp__today:hover { background: var(--ds-accent-010); }

/* Выбранные пункты в выпадашке шли встык — подсветки сливались в один блок */
.popup-item + .popup-item { margin-top: 2px; }

/* Поля периода: под «09.09.2026» нативная ширина 152px оставляла пустоту по бокам */
#dFrom, #dTo { width: 108px; }

/* Список направлений внутри модалки — поверх её затемнения */
#eDirPopup, #eFieldPopup { z-index: 200; }

/* «Добавить показатель» — под полями, с отступом как между строками сетки */
#eAddField { margin-top: 12px; margin-left: -10px; }

/* «руб.» стоит сразу за числом, но в значение поля не входит: иначе Backspace в конце
   стирал бы суффикс, и казалось бы, что клавиша не работает. */
/* Подписи в две строки («Сумма заказов в работе на месяц») сдвигали своё поле вниз
   относительно соседнего — подписи и поля выравниваются по общим строкам сетки. */
.fields > .ds-field { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 6px; }

.money-wrap { position: relative; }
.money-cur {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: var(--ds-gray-060); pointer-events: none;
}

/* Направление в форме — как поле: текст слева, шеврон справа.
   Колонка полей minmax(0,1fr): иначе длинное название направления (nowrap у кнопки)
   растягивало колонку, и «Дата» с «Направлением» вылезали за край модалки. */
#entryModal .ds-form-row { grid-template-columns: 200px minmax(0, 1fr); }
#eDirBtn { width: 100%; justify-content: space-between; min-width: 0; }
#eDirLabel { overflow: hidden; text-overflow: ellipsis; }

/* Плашка «уже вносили» шла встык с полями */
#eExists { margin-top: 16px; }

/* Разделитель и пункт-действие в выпадашке направлений */
.popup__sep { height: 1px; margin: 6px 8px; background: var(--ds-line); }
.popup-item--act { color: var(--ds-accent); }

/* Права на разделы: применяются инлайном в <head> до первой отрисовки шапки */
html[data-hide-reports] #lnkReports,
html[data-hide-product] #lnkProduct,
html[data-hide-reports-group] #navReports,
html[data-hide-review] #topnav { display: none !important; }
/* «По менеджерам» — пока только владельцу (can_managers): вкладка показывается по флагу, а не прячется */
html:not([data-show-managers]) #lnkManagers { display: none !important; }
/* «Заказы» — по праву can_orders: вкладка скрыта, пока права её не откроют */
/* «Заказы» — своя капсула в шапке; без права скрыта целиком, чтобы не оставалась пустая подложка */
html:not([data-show-orders]) #navOrders,
/* У кого нет ни отчётов, ни продуктового, тому не нужна и пустая капсула этой группы */
html[data-hide-reports][data-hide-product]:not([data-show-managers]) #navReports { display: none !important; }
/* Меню из одного пункта — не меню: учётке с единственным разделом капсулу не показываем вовсе.
   (У звонков пунктов два, поэтому их группа одна не остаётся.) */
html[data-hide-review][data-hide-reports][data-hide-product]:not([data-show-managers]) #navOrders,
html[data-hide-review][data-hide-product]:not([data-show-orders]):not([data-show-managers]) #navReports,
html[data-hide-review][data-hide-reports]:not([data-show-orders]):not([data-show-managers]) #navReports { display: none !important; }

/* Свои подтверждения — поверх модалки направлений */
.ask { z-index: 300; }
.ask__box { max-width: 420px; }
.ask #askInput { margin-top: 4px; width: 100%; }

/* Роль правится селектом прямо в строке таблицы учёток */
.users-table .ds-select { height: var(--ds-h-sm); padding: 4px 28px 4px 8px; border-radius: var(--ds-r-sm); background-position: right 8px center; }

/* «По дням»: 12 колонок, значения и даты не переносить — иначе строка распухает вдвое */
#byDay th, #byDay td { white-space: nowrap; }

/* ── раздел «Заказы» (склад «Тони») ─────────────────────────────────────── */
.ord-search { width: 240px; }
/* Строка фильтров должна влезать в ~1400px вместе с кнопкой товаров: дате хватает 116px */
.ord-dates .ds-input { width: 116px; }
/* Сводка по статусам — одна карточка-строка: итог слева, статусы по ходу жизни заказа.
   Не переносится никогда: на узком экране строка прокручивается вбок (только там — overflow обрезал бы подсказку ⓘ) */
.ord-sum { display: flex; padding: 18px 8px; }
@media (max-width: 900px) { .ord-sum { overflow-x: auto; } }
.ord-sum__cell { flex: 1 0 auto; min-width: 120px; padding: 2px 20px; border-left: 1px solid var(--ds-line); white-space: nowrap; }
.ord-sum__cell:first-child { border-left: 0; }
.ord-sum__name { font-size: 13px; line-height: 18px; color: var(--ds-gray-070); }
.ord-sum__val { margin-top: 4px; font-size: 22px; line-height: 28px; font-variant-numeric: tabular-nums; }
.ord-sum__meta { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ds-gray-060); }
.ord-sum__cell--total .ord-sum__name { font-weight: 500; color: var(--ds-gray-080); }
.ord-sum__cell--total .ord-sum__val { font-weight: 500; }
.ord-sum__cell--zero .ord-sum__val { color: var(--ds-gray-050); }
.ord-table th.ds-right, .ord-table td.ds-right { text-align: right; }
.ord-table td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; height: auto; }
.ord-nowrap { white-space: nowrap; }
/* Название товара в кнопке фильтра бывает длинным — не даём ему раздвинуть строку фильтров */
.ord-filter-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
/* Название заказа заводят руками — длинное не должно раздвигать таблицу */
.ord-name { max-width: 320px; overflow-wrap: anywhere; }
.ord-del { margin-left: 8px; vertical-align: 1px; }
.ord-lines { min-width: 220px; }
.ord-line { line-height: 20px; overflow-wrap: anywhere; }
/* Удалённый заказ остаётся в списке (его сумма уже могла попасть в расчёт), но приглушён */
.ord-row--deleted td { color: var(--ds-gray-050); }
.ord-row--deleted .ord-name > span:first-child { text-decoration: line-through; }
.ord-more { padding: 12px 28px 16px; }
.ord-empty { flex-direction: column; gap: 4px; }
.ord-state { padding: 0 4px; }
.ord-state__bad { margin-top: 4px; color: var(--ds-red); }
/* Ширины колонок списка — по содержимому: где данных мало (№, дата, статус, стадия, оплата, сумма), колонка
   ужимается до текста и не переносится; всё остальное место делят «Название» и «Позиции» */
.ord-fit { width: 1%; white-space: nowrap; }
/* Видео-инструкция: место под ролик занято сразу (16:9), модалка не прыгает при загрузке */
.ord-guide { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ds-r-sm); background: #000; }
.ord-empty__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Полоса прокрутки страницы (Windows) появлялась и пропадала вместе с длиной списка — и двигала всю вёрстку */
html { scrollbar-gutter: stable; }
/* Список заказов — ширины колонок заданы жёстко: при «по содержимому» смена фильтра (другие статусы, стадии,
   суммы) двигала все колонки. Узкие — под самое длинное значение; остаток поровну делят «Название» и «Позиции».
   Стадия Б24 переносится: свои стадии портал называет как угодно длинно. На узком экране — прокрутка обёртки. */
#list { table-layout: fixed; min-width: 1096px; }
#list th:nth-child(1) { width: 96px; }
#list th:nth-child(3) { width: 140px; }
#list th:nth-child(4) { width: 100px; }
#list th:nth-child(5) { width: 140px; }
#list th:nth-child(6) { width: 152px; }
#list th:nth-child(8) { width: 132px; }
#list td:nth-child(5) { white-space: normal; overflow-wrap: anywhere; }
#list .ord-name { max-width: none; }   /* общий потолок 320px тут отдал бы место пустоте */
/* название заказа в списке — максимум две строки с многоточием */
.ord-name__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* шапка таблиц раздела — всегда в одну строку; полный текст в title */
.ord-th { white-space: nowrap; }
th.ord-th[title] { cursor: help; }
/* Список найденного в каталоге — колонкой, по одному товару в строке (кнопки по умолчанию строчные) */
.ord-seen__list { display: flex; flex-direction: column; gap: 2px; }
.ord-seen__more { margin-top: 6px; align-self: flex-start; }
/* ссылки наружу: заказ в «Тони», сделка в Б24 */
.ord-ext { color: var(--ds-accent); text-decoration: none; }
.ord-ext:hover { text-decoration: underline; }
.ord-fresh { white-space: nowrap; }
.ord-fresh--stale { color: var(--ds-red); }
@media (max-width: 720px) { .ord-fresh { white-space: normal; } }

/* карточка заказа */
.ord-kv { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ord-kv__item { overflow-wrap: anywhere; }
/* Позиция с товаром сотрудника — точка у названия (только когда в карточке есть и другие позиции) */
.ord-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--ds-accent); vertical-align: middle; }
#cItems td:first-child, #cItems th:first-child { padding-left: 12px; }
#cItems td:last-child, #cItems th:last-child { padding-right: 12px; }
.ord-hist { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.ord-hist__row { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--ds-line); overflow-wrap: anywhere; }
.ord-hist__row:last-child { border-bottom: 0; }
.ord-hist__row--bound { color: var(--ds-accent); }
.ord-hist__at { flex: none; width: 124px; }
.ord-hist__note { margin-top: 10px; }

/* товары сотрудника */
.ord-prod { max-width: 720px; }
.ord-prod .ds-form-row { grid-template-columns: 120px 1fr; align-items: center; }
.ord-prod__table { margin-top: 16px; }
.ord-prod__table td { vertical-align: top; }
.ord-prod__table td:first-child { overflow-wrap: anywhere; }
/* Первая строка названия и счётчик заказов — по центру кнопок (--ds-h-sm): иначе кнопки висят ниже текста */
.ord-prod__table td:nth-child(2) { width: 96px; text-align: right; padding-top: calc(8px + (var(--ds-h-sm) - 16px) / 2); }
.ord-prod__table td:nth-child(3) { width: 176px; text-align: right; white-space: nowrap; }
.ord-prod__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-top: calc((var(--ds-h-sm) - 18px) / 2); }
.ord-prod__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* Редактируемый товар — бейджем, без заливки строки: заливка была квадратной и от края до края */
.ord-editing { display: none; margin-left: 8px; padding: 0 8px; }
.ord-prod__row--edit .ord-editing { display: inline-flex; }
/* Подписей у полей нет (текст в плейсхолдерах): две строки subgrid из .fields — ввод + ошибка под полем id */
.ord-prod__form .fields { margin-top: 10px; }
.ord-prod__aliases { margin-top: 14px; }
.ord-prod__form .ds-note { margin-top: 12px; }
#pEmpty, #pPickHint { margin-top: 12px; }

/* Ввод подстрок чипами: поле выглядит как обычный .ds-input, но растёт по содержимому */
.ord-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; height: auto; min-height: var(--ds-h-ctl); padding: 4px 8px; cursor: text; }
.ord-chips input { flex: 1 1 140px; min-width: 120px; height: 26px; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; padding: 0 4px; }
.ord-chips input::placeholder { color: var(--ds-gray-050); }
.ord-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 26px; padding: 0 4px 0 10px; border-radius: var(--ds-r-xs); background: var(--ds-accent-010); color: var(--ds-accent); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.ord-chip--static { padding: 0 10px; height: 22px; background: var(--ds-gray-015); color: var(--ds-gray-070); font-size: 12px; }
.ord-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: var(--ds-r-xs); background: transparent; color: inherit; cursor: pointer; opacity: .7; }
.ord-chip__x:hover { opacity: 1; background: var(--ds-accent-020); }

/* Поиск по каталогу отдаёт до 20 строк: без потолка они уводили под сгиб модалки и хвост списка,
   и кнопку «Добавить товар». Поля по бокам — под отрицательные отступы строк (.ord-seen__item),
   иначе при overflow подсветка строки обрезалась бы. */
.ord-seen { margin: 10px -10px 0; padding: 0 10px; display: flex; flex-direction: column; gap: 2px; min-height: 18px;
    max-height: 264px; overflow-y: auto; }
.ord-seen > * { flex: 0 0 auto; }
/* Пустая подсказка места не занимает: она стоит между полями, а не в хвосте формы */
.ord-seen:empty { display: none; }
.ord-seen__warn { color: var(--ds-red); }
.ord-seen__item {
    border: 0; background: transparent; text-align: left; padding: 6px 10px; margin: 0 -10px;
    border-radius: var(--ds-r-sm); cursor: pointer; font: inherit; color: inherit; overflow-wrap: anywhere;
}
.ord-seen__item:hover { background: var(--ds-gray-015); }
.ord-seen__item:disabled { cursor: default; color: var(--ds-gray-050); background: transparent; }
/* Найденное в каталоге — рамкой и обычным кеглем: серую мелкую строку под формой принимали за подпись */
.ord-seen__list { margin-top: 4px; padding: 6px; border: 1px solid var(--ds-gray-030); border-radius: var(--ds-r-sm);
    background: var(--ds-surface); font-size: 14px; line-height: 20px; color: var(--ds-gray-080); }
.ord-seen__list .ord-seen__item { margin: 0; }
.ord-seen__item .ord-seen__warn { display: block; }
/* Поверх модалки товаров (.ds-modal-backdrop, z-index 100) — иначе список сотрудников
   открывается ПОД ней и кажется, что кнопка не работает */
#pUserPopup { z-index: 200; }

@media (max-width: 640px) { .ord-search { width: 100%; } }

/* Продуктовый отчёт: запись «за направление | за себя» и справка, кто ещё вносил за день */
.entry-scope { margin-top: 12px; align-items: center; }
.entry-others { margin-top: 10px; line-height: 20px; }
.entry-others__row { color: var(--ds-accent); text-decoration: none; }
.entry-others__row:hover { text-decoration: underline; }
.row-person { cursor: pointer; }
/* Строка общих записей «за направление» — не менеджер, приглушена */
.row-person--common td:first-child { color: var(--ds-gray-060); }

/* Длинное имя направления («Мастер-классы - Продуктовое направление») раздвигало кнопку фильтра,
   и ряд переносился на вторую строку — режем многоточием, полное имя в title */
#dirLabel, #pplLabel { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Отчёт по менеджерам ---- */
/* Выпадашка «Доступ» на странице учёток: строка раздела с уровнем нет / доступ / админ */
.popup-item--lvl { cursor: default; gap: 12px; }
.popup-item--lvl:hover { background: transparent; }
.popup-item--lvl[aria-selected="true"] { background: transparent; color: inherit; }
.popup-item--lvl[aria-selected="true"] .popup-item__tick { color: var(--ds-accent); }
.lvl-seg { flex: none; }
.new-user { flex-wrap: wrap; }
.new-user .ds-input { flex: 1 1 180px; min-width: 0; }
.new-user .ds-select { width: 160px; }
.new-user .rights-btn { max-width: 260px; }
.new-user .rights-btn > span:first-child, .users-table .rights-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup__search { width: 100%; margin-bottom: 6px; }
/* Выпадашка менеджеров: переключатель вида сверху, дерево «направление → группа → люди» */
.popup--wide { min-width: 340px; }
.popup__seg { display: flex; width: 100%; margin-bottom: 6px; }
.popup__seg .ds-seg__item { flex: 1; justify-content: center; }
.popup-dir { font-weight: 500; padding-left: 8px; }
.popup-item + .popup-dir { margin-top: 6px; }
.popup-item--lvl1 { padding-left: 30px; }
.popup-item--lvl2 { padding-left: 76px; }
.popup-chev { flex: none; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center;
    border: 0; border-radius: var(--ds-r-sm); background: transparent; color: var(--ds-gray-060); cursor: pointer; }
.popup-chev:hover { background: var(--ds-gray-015); color: var(--ds-gray-080); }
.popup-chev .ds-chev { transform: rotate(-90deg); transition: transform var(--ds-t); }
.popup-chev[aria-expanded="true"] .ds-chev { transform: none; }
.popup-item--off .popup-item__name { color: var(--ds-gray-060); }
.popup-item[data-part="true"] .popup-item__tick { opacity: .35; }
#mgrLabel { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd { display: inline-flex; align-items: center; }
.upd .ds-tooltip { left: auto; right: -8px; transform: translateY(4px); }
.upd .ds-hint:hover .ds-tooltip, .upd .ds-hint:focus .ds-tooltip { transform: none; }
.mgr-table th { white-space: nowrap; }
.mgr-table td:first-child { font-weight: 500; }
.mgr-table .ds-tr-total td { font-weight: 500; }
.mgr-row { cursor: pointer; }
/* Сортировка кликом по заголовку; стрелка занимает место всегда, чтобы колонки не прыгали */
.mgr-th { cursor: pointer; user-select: none; }
.mgr-th:hover { color: var(--ds-gray-080); }
.mgr-th__arrow { display: inline-block; width: 12px; margin-left: 2px; color: var(--ds-accent); }
.mgr-foot { padding-top: 12px; padding-bottom: 14px; }
/* Окно менеджера: стадии раскрываются в сделки */
#mgrModal .ds-modal { max-width: 760px; }
/* Название сделки — в одну строку с многоточием (Alex: «в строку максимум, пусть сокр.»);
   table-layout: fixed, иначе ячейка растягивает таблицу под самый длинный заголовок */
.mgr-stages { margin-top: 16px; table-layout: fixed; }
.mgr-stages td:nth-child(2) { width: 110px; }
.mgr-stages td:nth-child(3) { width: 140px; }
.mgr-stages td.mgr-deal__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mgr-stages td.mgr-deal__date { white-space: nowrap; font-size: 12px; text-align: right; }
.mgr-stages tr:first-child td { padding-top: 0; font-weight: 400; }
.mgr-st { cursor: pointer; }
.mgr-st td:first-child { font-weight: 500; }
.mgr-name { display: inline-flex; align-items: center; gap: 6px; }
.mgr-chev { width: 14px; height: 14px; color: var(--ds-gray-050); transition: transform var(--ds-t); }
.mgr-st[aria-expanded="true"] .mgr-chev { transform: rotate(180deg); }
.mgr-deal td { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; color: var(--ds-gray-080); }
.mgr-deal td.mgr-deal__name { padding-left: 20px; }
.mgr-deal a { color: var(--ds-accent); text-decoration: none; }
.mgr-deal a:hover { text-decoration: underline; }
.mgr-deal + .mgr-st td, .mgr-deal + .mgr-deal td:first-child { border-top: 0; }