/* Карточка сделки (.dc-) и лента событий (.tl-, её же берёт карточка контакта). Образец — мобильный Битрикс24:
   research/screens/ios/07–13, ios2/01–38; десктоп — research/screens/desktop/02–06. Цвета — только переменные. */

.dc { --dc-ent: #a46fd1; }
.dc .detail-body { overflow-x: hidden; }
/* Чипы вкладок 36 px — зона касания 44 px */
.dc .detail-tabs .chip::after { content: ''; position: absolute; inset: -4px 0; }
.dc-ent { background: var(--dc-ent); }
.dc-head-t { min-width: 0; cursor: pointer; padding: 4px 0; border-radius: 8px; }
.dc-head-t:active { opacity: 0.7; }
.dc-create { color: var(--link); font-size: 17px; font-weight: 600; min-height: 44px; padding: 0 10px; flex: none; }
.dc-create:disabled { color: var(--text-4); }
.dc .flabel { font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.dc .req, .dc-ed-row .req { color: var(--danger); margin-left: 2px; }
.dc-lnk { color: var(--link); }

/* ---------- Детали ---------- */
.dc-details { padding-bottom: 24px; }
.dc-sec .section-head { gap: 12px; }
/* Подсказка над полями, которые ведёт модуль доставки (только для чтения) — одна на раздел */
.dc-managed { display: flex; align-items: center; gap: 6px; padding: 12px 0 0; font-size: 12px; color: var(--text-3); }
/* «Ведёт CRM» (модуль доставки): подсказка под переключателем, линия раздела — под подсказкой */
.dc-hinted { border-bottom: 0.5px solid var(--line); padding-bottom: 10px; }
.dc-hinted:last-child { border-bottom: 0; }
.dc-hinted > .frow { border-bottom: 0; padding-bottom: 2px; }
.dc-fhint { font-size: 13px; line-height: 1.35; color: var(--text-3); }
.dc-edit, .dc-pb-add { border-bottom: 0; padding: 0; min-height: 44px; text-decoration: underline dashed; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.dc-amount-wrap { padding: 10px 0 12px; border-bottom: 0.5px solid var(--line); }
.dc-amount { display: flex; align-items: center; gap: 12px; }
.dc-amount-l { flex: 1; min-width: 0; padding: 4px 0; border-radius: 8px; }
.dc-amount-l.tappable { cursor: pointer; }
.dc-amount-l.tappable:active { opacity: 0.7; }
.dc-amount-v { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.dc-sum { font-size: 26px; line-height: 1.15; white-space: nowrap; }
.dc-sum.sm { font-size: 20px; }
.dc-auto { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; background: var(--text-4); color: var(--surface); border-radius: 3px; padding: 2px 5px; line-height: 12px; white-space: nowrap; }
.dc-pen { color: var(--text-4); display: grid; place-items: center; }
.btn.dc-accept { flex: none; height: 44px; border-width: 1.5px; }

.dc-paybox { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 14px; margin-top: 12px; }
.dc-pb-title { font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-4); }
.dc-pb-text { color: var(--text-4); margin: 8px 0 2px; font-size: 16px; line-height: 1.35; }
.dc-pay { display: flex; align-items: center; gap: 6px; margin: 6px -6px 0 0; }
.dc-pay-main { flex: 1; min-width: 0; text-align: left; font-size: 16px; line-height: 1.3; padding: 6px 0; min-height: 44px; display: flex; flex-direction: column; gap: 4px; }
.dc-pay-main:active { opacity: 0.6; }
.dc-pay-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.dc-pay .status-badge { flex: none; }
.dc-pb-add { color: var(--link); font-size: 16px; margin-top: 2px; }
.dc-pb-line { display: flex; justify-content: space-between; color: var(--text-3); font-size: 15px; margin-top: 10px; }
.dc-pb-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; border-top: 0.5px solid var(--line-2); padding-top: 12px; margin-top: 12px; color: var(--text-2); font-size: 16px; }
/* Подпись не переносится посреди фразы: если с суммой не помещается — сумма уходит на строку ниже, вправо */
.dc-pb-total span { white-space: nowrap; }
.dc-pb-total b { color: var(--text); font-size: 18px; white-space: nowrap; margin-left: auto; }

/* Действия под оплатами: «Добавить» слева, «Вернуть» — у правого края, чтобы не нажать одно вместо другого */
.dc-pb-acts { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dc-pb-refund { margin-left: auto; }

/* ---------- Возвраты (screens/refunds.js) ---------- */
/* Строка возврата — как строка оплаты; нажимается только заявка «Ждёт кассу» (отменить) — её сумма цветом ссылки */
.dc-rf div.dc-pay-main:active { opacity: 1; }
.dc-rf-t { color: var(--text); }
.dc-rf button .dc-rf-t { color: var(--link); }
.dc-rf-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-rf .dc-pay-sub { flex-wrap: nowrap; }
.dc-rf-err { font-size: 14px; color: var(--danger-text); overflow-wrap: anywhere; }
/* «удержано: доставка 590 ₽, обратная доставка 400 ₽» — под суммой: объясняет, почему вернули меньше оплаченного */
.dc-rf-ded { font-size: 14px; line-height: 1.3; color: var(--text-3); overflow-wrap: anywhere; }
.status-badge.rf-requested { background: var(--warning-soft); color: var(--warning-text); }
.status-badge.rf-processing { background: var(--primary-soft); color: var(--link); }
.status-badge.rf-done { background: var(--success-soft); color: var(--success); }
.status-badge.rf-failed { background: var(--danger-soft); color: var(--danger-text); }
/* Шторка «Возврат»: сегмент «Всю сумму · Позиции · Сумму», ниже — выбранный способ */
.rf-seg { margin: 2px 0 16px; }
.rf-big { text-align: center; padding: 18px 0 22px; }
.rf-big-l { font-size: 13px; color: var(--text-3); }
.rf-big-v { font-size: 34px; font-weight: 700; line-height: 1.15; margin-top: 4px; white-space: nowrap; }
.rf-big-s { font-size: 14px; color: var(--text-3); margin-top: 6px; }
.rf-items { margin-bottom: 2px; }
.rf-it { border-bottom: 0.5px solid var(--line); }
/* Вся строка — флажок (касание 60 px); количество — степпером под названием, на линии текста */
.rf-it-main { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 0; text-align: left; color: var(--text); transition: opacity 100ms; }
.rf-it-main:active:not(:disabled) { opacity: 0.7; }
.rf-it-main:disabled { opacity: 0.5; cursor: default; }
.rf-it-main .grow { min-width: 0; }
.rf-it-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; line-height: 1.25; }
.rf-it-s { display: block; font-size: 13px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-it-sum { flex: none; white-space: nowrap; font-size: 16px; }
/* Вернули меньше стоимости — стоимость зачёркнута, сколько вернём — в поле ниже */
.rf-it-sum.was { color: var(--text-3); text-decoration: line-through; }
/* Под выбранной позицией: количество слева (или «Вернуть»), сумма возврата — у правого края, под суммой строки.
   Отступ 26 px + поле кнопки «−» 10 px = начало названия; на очень узком экране сумма переносится под степпер */
.rf-it-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin: -6px 0 8px 26px; }
.rf-step { display: flex; align-items: center; gap: 2px; }
.rf-it-l { padding-left: 10px; font-size: 15px; color: var(--text-3); }
.rf-it-err, .rf-it-held { margin: -2px 0 10px 36px; font-size: 13px; line-height: 1.35; }
.rf-it-held { color: var(--text-3); }
.rf-q { min-width: 96px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Поле суммы с «₽» внутри справа: цифры по правому краю — под суммами строк */
.rf-money { position: relative; flex: none; width: 116px; }
.rf-money .input { min-height: 44px; height: 44px; padding: 0 28px 0 10px; text-align: right; font-size: 17px; font-variant-numeric: tabular-nums; }
.rf-money-c { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--text-3); pointer-events: none; }
.rf-money.bad .input { border-color: var(--danger); }
/* «Удержать»: доставка до клиента, обратная доставка, другое. Строка — флажок (как позиции), сумма — полем справа;
   неотмеченная сумма — подсказка (серым), в итог не идёт */
.rf-ded { margin: 8px 0 0; }
.rf-sec { font-size: 13px; color: var(--text-3); margin: 0 0 2px; }
.rf-dd { border-bottom: 0.5px solid var(--line); }
.rf-dd-row { display: flex; align-items: center; gap: 8px; min-height: 60px; }
.rf-dd-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; text-align: left; color: var(--text); transition: opacity 100ms; }
.rf-dd-main:active { opacity: 0.7; }
/* Флажок «другого» — отдельная кнопка 44 px; поле названия начинается там же, где названия строк выше (36 px) */
.rf-dd-chk { flex: none; width: 44px; height: 44px; margin: 0 -8px 0 -10px; display: grid; place-items: center; }
.rf-dd-n { display: block; font-size: 16px; line-height: 1.25; }
/* Откуда подставлена сумма — до двух строк: обрезанное «из поля «Стоимость доставк…»» не объясняет, откуда она */
.rf-dd-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.3; color: var(--text-3); margin-top: 2px; overflow-wrap: anywhere; }
.rf-dd-label { flex: 1; min-width: 0; min-height: 44px; height: 44px; }
.rf-dd:not(.on) .rf-money .input { color: var(--text-3); }
.rf-dd-err { margin: -6px 0 10px 36px; font-size: 13px; }
/* Итог: из чего возвращаем, минус каждое удержание, «К возврату» — жирным под чертой */
.rf-sum-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: var(--text-3); padding: 3px 0; font-variant-numeric: tabular-nums; }
.rf-sum-l:first-child { margin-top: 12px; }
.rf-sum-l span:last-child { white-space: nowrap; }
.rf-sum-n { min-width: 0; overflow-wrap: anywhere; }
.rf-sum-l + .rf-total { border-top: 0.5px solid var(--line); margin-top: 6px; padding-top: 10px; }
.rf-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 18px; padding: 14px 0 6px; }
.rf-total b { white-space: nowrap; }
.rf-err { margin: 0 0 14px; }
.rf-reason-row { margin-top: 12px; }
.rf-empty { padding: 24px 0; }
.rf-amount { font-size: 22px; }
.rf-hint { font-size: 13px; color: var(--text-3); margin: 6px 0 0; }
.rf-hint.err { color: var(--danger-text); }
.rf-reason { min-height: 64px; }
.rf-info { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--text-3); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.rf-info .ic { flex: none; margin-top: 1px; }

/* ---------- Чеки в разделе «Оплата» (screens/receipts.js) ----------
   Только места под чеки: их присылает скрипт маркировки и кассы, руками в CRM не вносят. */
.dc .dc-rc .fvalue > a.dc-rc-link { display: inline-flex; align-items: center; gap: 6px; color: var(--link); }
.dc-rc-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }

.dc-stage { padding: 10px 0 8px; border-bottom: 0.5px solid var(--line); }
.dc-stage .stage-ribbon { margin-bottom: 2px; height: 44px; }
.dc-stage .stage-arrow { height: 44px; }
/* ✕ у даты — зона касания 44 px */
.dc .frow .fact { width: 44px; height: 44px; margin-right: -10px; }
.dc-pipe { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 14px; min-height: 44px; }

/* Рамка «Клиент» выходит в поля раздела на 10 px (1 px рамки + 9 px отступа): подпись и имя стоят на линии
   остальных подписей раздела, ✏️ — у того же правого края, что ✕ у полей. Телефон, почта, адрес — как строки каналов
   в карточке контакта: значок по центру колонки 24 px, текст на +32 px, шаг строк 44 px. */
.dc-client { border: 1px solid var(--line-2); border-radius: 12px; padding: 4px 9px 10px; margin: 12px -10px; }
.dc-client.hl { border-color: var(--primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent); }
.dc-client-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-right: -10px; }
.dc-client-head .flabel { margin: 0; }
.dc-cname { font-size: 19px; line-height: 1.3; word-break: break-word; }
.dc-cname a { color: var(--link); display: inline-block; padding: 10px 0; margin: -10px 0; }
.dc-cline, .dc-caddr, .dc-cadd { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-items: center; min-height: 44px; }
.dc-cline > svg.ic, .dc-caddr > svg.ic, .dc-cadd > svg.ic { justify-self: center; color: var(--text-4); }
.dc-cline { color: var(--text-3); font-size: 16px; overflow-wrap: anywhere; }
.dc-caddr { color: var(--text-2); font-size: 15px; line-height: 1.35; padding: 4px 0; }
.dc-caddr span { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; overflow-wrap: anywhere; }
.dc-cat { margin-top: 8px; font-size: 13px; color: var(--text-2); background: var(--surface-3); border-radius: 8px; padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-cat .k { color: var(--text-3); }
.dc-cat.good { background: var(--success-soft); }
.dc-cat.warn { background: var(--warning-soft); }
.dc-cat.bad { background: var(--danger-soft); color: var(--danger-text); }
.dc-cadd { color: var(--text-2); font-size: 17px; width: 100%; text-align: left; }
.dc-cadd > svg.ic { color: var(--text-3); }
.dc-cadd:active { opacity: 0.6; }
.dc-user .box { margin: 10px 0; }
.dc-utm-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 15px; margin-top: 4px; }
.dc-utm-grid span { overflow-wrap: anywhere; }
.dc-psum { gap: 12px; cursor: pointer; }
.dc-psum .fvalue { display: flex; align-items: center; gap: 6px; }
.dc-psum .fvalue.dc-lnk { color: var(--link); }
.dc-psum-r { text-align: right; flex: none; }
.dc-psum-r .fvalue { justify-content: flex-end; }

/* поля «Новой сделки» прямо в карточке */
.dc-inrow { cursor: text; }
.dc-inrow.bad .dc-in { color: var(--danger-text); }
.dc-inrow.bad { box-shadow: inset 0 -2px 0 var(--danger); }
/* Поле 44 px высотой, а в строке занимает 28 px (отрицательные поля) — касание не промахивается мимо */
.dc-in { width: 100%; border: 0; outline: none; background: transparent; font-size: 17px; color: var(--text); padding: 0; min-height: 44px; margin: -8px 0; }
/* Значение-ссылка (поле типа url): зона касания по высоте ≥ 44 px, вёрстка строки не меняется */
.dc .frow .fvalue > a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.dc-in::placeholder { color: var(--text-3); }
.dc-amount-in { align-items: flex-start; }
.dc-cur { flex: none; width: 76px; padding-left: 12px; border-left: 0.5px solid var(--line); }
.dc-cur .fvalue { font-size: 17px; }
.dc-new-body { padding-bottom: 40px; }

/* ---------- лента стадий во всю ширину (компьютер) ---------- */
.dc-desk-top { position: sticky; top: 0; z-index: 3; background: var(--surface); padding: 2px 12px 0; margin-bottom: 14px; border-bottom: 0.5px solid var(--line); }
.dc-strip { display: flex; gap: 2px; padding: 4px 8px 8px; }
/* Свёрнутые стадии делят ширину поровну; раскрытые (.open — текущая, наведённая, «Завершить сделку») получают
   из разметки flex-basis точно по тексту (deal.js stageWidth: поля 16+12, у первой 10+12, у «Завершить» 16+16).
   Узкая стрелка без текста — container query: лучше чистая стрелка с подсказкой, чем «Н…» в каждой. */
.dc-st { flex: 1 1 0px; min-width: 22px; height: 32px; padding: 0 6px 0 14px; font-size: 13px; position: relative; background: var(--st-bg); color: var(--st-fg); container-type: inline-size;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
  transition: flex 240ms var(--ease-out), padding 240ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), filter 120ms; }
.dc-st:first-child { padding-left: 10px; border-radius: 6px 0 0 6px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.dc-st.open { padding: 0 12px 0 16px; font-weight: 600; }
.dc-st.open:first-child { padding-left: 10px; }
.dc-st .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 46px) { .dc-st .t { visibility: hidden; } }
.dc-st.future { background: var(--surface-3); color: var(--text-3); box-shadow: inset 0 -3px 0 var(--c); }
.dc-st.fin { padding: 0 16px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .dc-st { transition: none; } }
.dc-st:active { filter: brightness(0.94); }
.dc-st:disabled { cursor: default; }

.dc-cols { display: grid; grid-template-columns: minmax(380px, 470px) minmax(0, 1fr); gap: 16px; padding: 0 16px; align-items: start; }
.dc-left .section { margin: 0 0 12px; }
.dc-right { min-width: 0; }
.dc-right .tl { padding: 0 0 24px; }
.dc-hist { padding: 0 16px; max-width: 900px; }
.dc-hist .tr { font-size: 15px; }
.dc-hist-u { min-width: 120px; text-align: right; color: var(--text-2); }
.dc-ok { color: var(--success); }
.dc-bad { color: var(--danger-text); }

/* ---------- Товары: карточки строк (телефон) ---------- */
.dc-plist { padding: 2px 0 24px; }
.dc-pitem { background: var(--surface); border-radius: var(--radius); margin: 8px 8px 0; padding: 12px 12px 14px; position: relative; }
.dc-pnum { position: absolute; left: 0; top: 0; background: var(--surface-3); color: var(--text-3); font-size: 12px; line-height: 16px; padding: 1px 8px; border-radius: 12px 0 10px 0; }
.dc-ptop { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0 0 4px; }
.dc-ptop .icon-btn { margin: -8px -8px 0 0; }
.dc-pname { flex: 1; min-width: 0; font-size: 17px; line-height: 1.3; text-align: left; color: var(--text); overflow-wrap: anywhere; min-height: 44px; padding: 2px 0; }
.dc-pname:disabled { cursor: default; }
.pimg { width: 60px; height: 60px; border-radius: 8px; background: var(--surface-3); flex: none; display: grid; place-items: center; color: var(--text-3); overflow: hidden; }
.pimg img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
/* «•••» строки товара (телефон) и корзина в таблице (компьютер); после удаления внизу — «Вернуть» */
.dc-pmore { color: var(--text-3); }
.dc-pdel { color: var(--text-4); }
.dc-pdel:active { color: var(--danger-text); }

/* Выбор товаров: фото, название в 2 строки, цена; отмечаются галочкой, добавляются разом */
.pp-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 0; border-bottom: 0.5px solid var(--line); text-align: left; transition: opacity 100ms; }
.pp-row:last-child { border-bottom: 0; }
.pp-row:active { opacity: 0.7; }
.pp-img { width: 48px; height: 48px; border-radius: 10px; background: var(--surface-3); color: var(--text-3); display: grid; place-items: center; overflow: hidden; flex: none; }
.pp-img.photo { background: #fff; box-shadow: inset 0 0 0 0.5px var(--line-2); }
.pp-img img { width: 100%; height: 100%; object-fit: contain; }
.pp-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; line-height: 1.25; }
.pp-sub { display: block; font-size: 13px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pimg.sm { width: 40px; height: 40px; border-radius: 6px; }
.dc-pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 10px; margin-top: 16px; }
.dc-fl { position: relative; display: flex; align-items: center; height: 46px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); min-width: 0; }
.dc-fl:focus-within { border-color: var(--primary); }
.dc-fl .lb { position: absolute; top: -8px; left: 8px; padding: 0 4px; background: var(--surface); font-size: 12px; line-height: 14px; color: var(--text-3); pointer-events: none; white-space: nowrap; }
.dc-fl.c .lb { left: 50%; transform: translateX(-50%); }
.dc-num { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: none; background: transparent; padding: 3px 10px 0; font-size: 18px; color: var(--text); border-radius: 8px; }
.dc-num.c { text-align: center; padding: 3px 4px 0; }
.dc-ro { flex: 1; min-width: 0; padding: 3px 10px 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ro.r { text-align: right; }
.dc-qty { display: flex; align-items: center; min-width: 0; }
.dc-qty .dc-fl { flex: 1; }
.dc-step { width: 44px; height: 46px; flex: none; display: grid; place-items: center; }
.dc-step span { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); display: grid; place-items: center; font-size: 20px; line-height: 1; transition: transform 100ms var(--ease-out); }
.dc-step:active span { transform: scale(0.9); }
.dc-step:disabled span { opacity: 0.45; }
.dc-dtype { flex: none; align-self: stretch; display: flex; align-items: center; gap: 3px; padding: 3px 10px 0 6px; color: var(--text-3); font-size: 17px; min-width: 44px; justify-content: center; }
.dc-dtype:active { opacity: 0.6; }
.dc-ptotal { background: var(--surface); border-radius: var(--radius); margin: 8px 8px 0; padding: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 18px; }
.dc-ptotal .r { text-align: right; }
.dc-ptotal b { font-size: 20px; white-space: nowrap; }
.dc-tax { font-size: 13px; margin-top: 2px; }
.dc-empty-t { font-size: 17px; color: var(--text-2); margin: 10px 0 6px; }

/* ---------- Товары: таблица (компьютер) ---------- */
.dc-ptab { padding: 0 16px 24px; }
.dc-ptools { display: flex; gap: 10px; margin-bottom: 12px; }
.dc-ptable-wrap { background: var(--surface); border-radius: var(--radius); overflow-x: auto; }
.dc-ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dc-ptable th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 13px; padding: 12px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dc-ptable td { padding: 8px; border-bottom: 0.5px solid var(--line); vertical-align: middle; }
.dc-ptable tr:last-child td { border-bottom: 0; }
.dc-ptable .r { text-align: right; }
.dc-ptable td.r b { white-space: nowrap; }
.dc-ptable .dc-num { height: 38px; width: 110px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px; font-size: 15px; text-align: right; background: var(--surface); }
.dc-ptable .dc-num.qty { width: 72px; }
.dc-ptable .dc-num:focus { border-color: var(--primary); }
.dc-pcell { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.dc-pname-btn { text-align: left; color: var(--link); font-size: 15px; line-height: 1.3; padding: 4px 0; }
.dc-pname-btn:disabled { color: var(--text); }
.dc-unit { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.dc-unit .dc-dtype { padding: 0 4px; min-width: 36px; height: 38px; font-size: 15px; }
.dc-totals { margin: 16px 0 0 auto; max-width: 420px; display: grid; gap: 8px; font-size: 15px; color: var(--text-2); }
.dc-totals > div { display: flex; justify-content: space-between; gap: 24px; }
.dc-totals .disc { color: var(--warning-text); }
.dc-totals .big { border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 4px; font-size: 22px; font-weight: 700; color: var(--text); }

/* ---------- шторки карточки ---------- */
.dc-ed-sec { background: var(--surface-2); border-radius: 12px; padding: 4px 14px 6px; margin-bottom: 12px; }
.dc-ed-h { font-size: 17px; font-weight: 600; padding: 12px 0 6px; }
.dc-ed-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 0.5px solid var(--line); min-width: 0; }
.dc-ed-row .flabel { font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-3); }
.dc-ed-sec > .dc-ed-row:last-child, .dc-ed-sec > .dc-ed-2:last-child .dc-ed-row { border-bottom: 0; }
.dc-ed-2 { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; }
.dc-ed-2 > .dc-ed-row:last-child { border-left: 0.5px solid var(--line); padding-left: 12px; }
/* Поля и списки «Данных товара» — 44 px по высоте (касание), строка от этого почти не растёт: поля строки 6 px */
.dc-ed-row:has(.dc-ed-in, .dc-ed-sel) { padding: 6px 0; }
.dc-ed-in { width: 100%; border: 0; outline: none; background: transparent; font-size: 17px; color: var(--text); padding: 0; min-height: 44px; }
.dc-ed-val { font-size: 17px; padding: 4px 0; min-height: 44px; display: flex; align-items: center; }
.dc-ed-sel { display: flex; align-items: center; gap: 4px; font-size: 17px; min-height: 44px; min-width: 44px; text-align: left; color: var(--text); }
.dc-ed-row .toggle { margin-top: 4px; }
/* «Вкл. в цену» всегда включено (налог входит в цену) — переключатель виден, но выглядит неактивным */
.dc-ed-row .toggle input:disabled + span { opacity: 0.5; }
.dc-wz-head { display: flex; align-items: center; gap: 12px; font-size: 17px; padding: 4px 0 10px; }
.dc-wz-num { width: 34px; height: 34px; border-radius: 50%; border: 2px dashed var(--accent); color: var(--accent); display: grid; place-items: center; font-weight: 700; flex: none; }
.dc-wz-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 12px; }
.dc-wz-bar span { height: 4px; border-radius: 2px; background: var(--line-2); }
.dc-wz-bar span.on { background: var(--accent); }
.dc-wz-img { border-radius: 8px !important; overflow: hidden; }
.dc-wz-img img { width: 100%; height: 100%; object-fit: cover; }
.dc-wz-sum { white-space: nowrap; font-size: 16px; }
.dc-wz-total { display: flex; justify-content: space-between; font-size: 18px; padding: 14px 0 6px; }

/* ---------- лента событий ---------- */
.tl { padding: 4px 8px 24px; }
.tl-sep { display: flex; justify-content: center; margin: 14px 0 10px; position: relative; }
.tl-sep::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 0.5px solid var(--line-2); }
.tl-sep span { position: relative; background: var(--accent); color: var(--surface); border-radius: 12px; padding: 3px 12px; font-size: 13px; font-weight: 600; line-height: 16px; }
.tl-sep.todo span { background: var(--green-badge); }
.tl-sep.pin span { background: var(--text-3); }
.tl-card { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; position: relative; min-width: 0; }
.tl-card.todo { background: var(--todo-bg); }
.tl-card.pinned { box-shadow: inset 3px 0 0 var(--accent); }
.tl-row { display: flex; align-items: flex-start; gap: 12px; }
.tl-tile { position: relative; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.tl-tile.big { width: 56px; height: 56px; border-radius: 14px; }
.tl-tile .ch-ic { right: -4px; bottom: -4px; }
.tl-tile.k-stage, .tl-tile.k-fields, .tl-tile.k-created { background: var(--surface-3); color: var(--text-3); }
.tl-tile.k-payment { background: var(--success-soft); color: var(--success); }
.tl-tile.k-task, .tl-tile.k-task_done { background: var(--warning-soft); color: var(--warning-text); }
/* Звонок — цветом связи, пропущенный — красным; чек — синим, удалённый из сделки — серым */
.tl-tile.k-call { background: var(--accent-soft); color: var(--accent); }
.tl-tile.k-call.missed { background: var(--danger-soft); color: var(--danger-text); }
.tl-tile.k-receipt { background: var(--primary-soft); color: var(--link); }
.tl-tile.k-receipt.void { background: var(--surface-3); color: var(--text-3); }
/* Возврат — деньги уходят клиенту: жёлтым; отменённый — серым, ошибка кассы — красным */
.tl-tile.k-refund { background: var(--warning-soft); color: var(--warning-text); }
.tl-tile.k-refund.void { background: var(--surface-3); color: var(--text-3); }
.tl-tile.k-refund.bad { background: var(--danger-soft); color: var(--danger-text); }
/* Доставка (модуль доставки): тревога — красным, отменённая накладная — серым */
.tl-tile.k-shipment.bad { background: var(--danger-soft); color: var(--danger-text); }
.tl-tile.k-shipment.void { background: var(--surface-3); color: var(--text-3); }
.tl-card.todo .tl-tile { width: 56px; height: 56px; border-radius: 14px; }
.tl-title { font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.25; padding-top: 2px; overflow-wrap: anywhere; }
.tl-time { font-size: 14px; color: var(--text-3); margin-top: 2px; }
.tl-sys { background: var(--surface-3); color: var(--text-3); }
.tl-kv { margin-top: 10px; font-size: 15px; color: var(--text); overflow-wrap: anywhere; line-height: 1.35; }
.tl-kv .k { color: var(--text-3); }
/* Менеджер звонка: маленький кружок с инициалами в строке, по центру текста */
.tl-who-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-who-row .av { width: 22px; height: 22px; font-size: 10px; }
.tl-link { color: var(--link); display: inline-block; padding: 11px 0; margin: -11px 0; }
/* Запись разговора: кнопка 44 px, системный ползунок во всю ширину, время справа цифрами одной ширины */
.tl-audio { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--surface-2); border-radius: 22px; padding: 0 12px 0 0; min-width: 0; }
.tl-play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); transition: transform 100ms var(--ease-out), background 120ms; }
.tl-play:active { transform: scale(0.94); }
.tl-play.on { background: var(--accent); color: var(--surface); }
/* Ползунок свой (системный в светлой теме Chrome — чёрная полоса): пройденное — цветом связи, остаток — линией; --p из плеера */
.tl-seek { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.tl-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--line-2) var(--p, 0%)); }
.tl-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface-2); }
.tl-seek::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-2); }
.tl-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.tl-seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--accent); }
.tl-seek:focus-visible { outline: none; }
.tl-seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 5px var(--primary); }
.tl-atime { flex: none; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn.tl-rc-open { height: 44px; gap: 6px; }
.tl-text { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-text.bad { color: var(--danger-text); }
.tl-text.muted { color: var(--text-3); font-size: 14px; }
.tl-fc { padding: 1px 0; }
.tl-quote { position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 16px; line-height: 1.4; }
.tl-quote.clamp { color: var(--text-2); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.tl-qtext { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; padding-right: 30px; }
.tl-qtext a { color: var(--link); }
.tl-qedit { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-4); }
.tl-note { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.tl-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tl-open { min-width: 150px; height: 44px; font-size: 17px; }
.btn.tl-pin { min-width: 120px; height: 44px; }
.tl-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; color: var(--text-4); }
.tl-chip { background: var(--surface-3); border-radius: 12px; padding: 3px 10px; font-size: 14px; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-chip.to { box-shadow: inset 0 -2px 0 var(--c); }

.tl-todo { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; padding-left: 4px; }
.tl-todo:active { filter: brightness(0.97); }
.tl-check { width: 44px; height: 44px; flex: none; display: grid; place-items: center; margin: -6px 0 0 -6px; }
.tl-check span { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--text-4); background: var(--surface); transition: border-color 120ms, background 120ms; }
.tl-check:active span { border-color: var(--success); background: var(--success-soft); }
.tl-todo-title { font-size: 17px; font-weight: 600; line-height: 1.3; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-todo-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tl-todo .av { margin-top: 2px; }

.tl-composer { background: var(--surface); border-radius: var(--radius); padding: 12px; margin-bottom: 8px; }
.tl-ctabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tl-ctabs .chip { height: 34px; font-size: 15px; }
.tl-cinput { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; resize: none; min-height: 44px; outline: none; background: var(--surface); line-height: 1.4; display: block; margin-bottom: 8px; }
.tl-cinput:focus { border-color: var(--primary); }
.tl-cfoot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tl-hint { font-size: 12px; color: var(--text-4); }
.tl-chips-box { display: flex; flex-direction: column; gap: 2px; }
.tl-chiprow { display: flex; align-items: center; gap: 8px; padding: 2px 0; min-width: 0; }
.tl-pchip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px; background: var(--surface-3); color: var(--text-2); font-size: 15px; min-width: 0; max-width: 100%; }
.tl-pchip:active { opacity: 0.7; }
.tl-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tl-who { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text-3); }
.tl-big { width: 100%; min-height: 40vh; border: 0; outline: none; resize: none; background: transparent; font-size: 17px; line-height: 1.4; color: var(--text); padding: 4px 0; display: block; }
.tl-big.short { min-height: 140px; }
.tl-big-input { width: 100%; border: 0; border-bottom: 0.5px solid var(--line-2); outline: none; background: transparent; font-size: 18px; font-weight: 600; color: var(--text); padding: 10px 0; margin-bottom: 6px; }

/* Тост с отменой: над капсулой связи. Выглядит как обычный тост (тёмная плашка в обеих темах); пока он на экране,
   обычные тосты поднимаются над ним (body.undo-open), а не ложатся сверху. */
.undo-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--safe-bottom) + 88px); z-index: 70; display: flex; align-items: center; gap: 12px; background: var(--text); color: var(--surface); border-radius: 12px; padding: 4px 6px 4px 16px; font-size: 15px; min-height: 48px; box-shadow: var(--shadow-pop); animation: dc-undo-in 220ms var(--ease-out); max-width: 520px; margin: 0 auto; }
.undo-bar .grow { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; padding: 4px 0; }
.undo-btn { color: var(--accent); font-weight: 700; min-height: 44px; padding: 0 12px; flex: none; }
body.undo-open .toast { bottom: calc(var(--safe-bottom) + 148px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .undo-bar { background: var(--surface-3); color: var(--text); outline: 1px solid var(--line-2); }
}
:root[data-theme='dark'] .undo-bar { background: var(--surface-3); color: var(--text); outline: 1px solid var(--line-2); }
@keyframes dc-undo-in { from { opacity: 0; transform: translateY(8px); } }

/* Старая раскладка карточки контакта — пока она не перешла на новую основу */
.desk-cols > .col-left { min-width: 0; }

@media (hover: hover) and (pointer: fine) {
  .dc-head-t:hover .ent-title { color: var(--link); }
  .dc-st:hover:not(:disabled) { cursor: pointer; }
  .dc-pdel:hover { color: var(--danger-text); background: var(--danger-soft); }
  .dc-pmore:hover { color: var(--text-2); }
  .pp-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
  .dc-pay-main:hover .dc-lnk, .dc-pname-btn:hover { text-decoration: underline; }
  .tl-todo:hover { filter: brightness(0.98); }
  .tl-pchip:hover, .dc-cadd:hover { color: var(--text); }
  .tl-qedit:hover { color: var(--text-2); }
  .tl-play:hover:not(.on) { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  .rf-it-main:hover:not(:disabled) { opacity: 0.85; }
  .dc-rc-link:hover, .dc-rf button.dc-pay-main:hover .dc-rf-t { text-decoration: underline; }
}

@media (min-width: 1024px) {
  .dc .ent-title { font-size: 24px; }
  .dc-details { padding-bottom: 0; }
  .undo-bar { bottom: 24px; }
  body.undo-open .toast { bottom: 84px; }
  .desk-cols { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 16px; padding: 0 12px; align-items: start; }
  /* Новая сделка на компьютере — одна колонка по центру слайдера, а не у левого края с пустой половиной */
  .dc-new .detail-body > .dc-new-body, .dc-new .detail-body > .dc-ptab { max-width: 760px; margin-left: auto; margin-right: auto; }
  /* В колонке полей лента стадии — внутри белой панели, а не от края до края */
  .dc-stage .stage-ribbon { margin-left: 0; margin-right: 0; }
}

/* Плавающая капсула связи: в тёмной теме тень не видна — тонкая обводка отделяет её от ленты под ней */
.dc .float-comm .comm-pill.h { box-shadow: inset 0 0 0 1px var(--line-2); }

/* Правка клиента прямо из сделки: «изменить» раскрывает поля контакта в рамке «Клиент» */
.dc-client-head .dc-cedit { position: relative; margin-left: auto; margin-right: 4px; font-size: 14px; padding: 6px 2px 5px; }
/* Ровные поля сверху и снизу (снизу ещё 1 px пунктира) — текст на одной линии с «КЛИЕНТ»; зона касания — 44 px */
.dc-client-head .dc-cedit::after { content: ''; position: absolute; inset: -8px -6px; }
button.dc-cline, button.dc-caddr, button.dc-cat { width: 100%; text-align: left; }
button.dc-caddr:disabled, button.dc-cat:disabled { opacity: 1; cursor: default; }
.dc-client .ct-inline { margin-top: 6px; }
.dc-client .ct-inline > .frow:last-child { border-bottom: 0; }
/* Запись ленты о задаче — ссылка на карточку задачи. */
.tl-card.tap { cursor: pointer; }
.tl-card.tap:active { opacity: 0.7; }