.price-desk__toolbar { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin:12px 0; }
.price-desk__toolbar label { display:flex; flex-direction:column; font-size:12px; gap:4px; }
.price-desk__toolbar label.pd-check { flex-direction:row; align-items:center; gap:6px; }
.price-desk__toolbar input[type="search"] { min-width:240px; }

.price-desk__columns { margin:12px 0; }
.price-desk__columns h3 { font-size:14px; margin:0 0 8px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.pd-column-picker { display:flex; flex-wrap:wrap; gap:8px; }
.pd-column { display:flex; flex-direction:column; gap:2px; border:1px solid var(--line,#d8dde5); border-radius:8px;
             padding:6px 10px; cursor:pointer; min-width:190px; }
.pd-column.is-on { border-color:var(--accent,#2f6feb); background:color-mix(in srgb, var(--accent,#2f6feb) 8%, transparent); }
.pd-column__name { font-weight:600; font-size:13px; }
.pd-column__meta { font-size: 12px; opacity:.72; }
.pd-column-note { flex-basis:100%; margin:6px 0 0; font-size:12px; }

.pd-summary { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.pd-summary__card { border:1px solid var(--line,#d8dde5); border-radius:10px; padding:10px 12px; min-width:230px; }
.pd-summary__card.is-lead { border-color:var(--accent,#2f6feb); }
.pd-summary__card h4 { margin:0 0 6px; font-size:13px; }
.pd-lead-flag { font-size: 12px; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
.pd-summary__card dl { display:grid; grid-template-columns:auto auto; gap:2px 10px; margin:0; font-size:12px; }
.pd-summary__card dt { opacity:.7; }
.pd-summary__card dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }

/* Знаменатель. Он стоит НАД таблицей и набран так, чтобы его нельзя было не
   заметить: человек, отобравший категорию и увидевший пятьдесят строк, обязан
   тут же знать, пятьдесят это из пятидесяти или из двенадцати тысяч. */
/* 18.09.2026: знаменатель — строка «Итог» макета (.mk-itog), без своей синей полосы. */
.pd-denominator { margin:0; }

.pd-table th, .pd-table td { vertical-align:top; }
.pd-table .pd-subhead th { font-weight:500; font-size: 12px; opacity:.75; }
.pd-th-price { text-align:center; }
.pd-th-price span { display:block; font-weight:400; font-size: 12px; }
.pd-cat span, .pd-age span, .pd-num span, .pd-table td span.t-dim { display:block; font-size: 12px; opacity:.7; }
.pd-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.pd-num { text-align:right; font-variant-numeric:tabular-nums; }
.pd-link { background:none; border:none; padding:0; font:inherit; color:var(--accent,#2f6feb); cursor:pointer; text-align:left; }
.pd-link:hover { text-decoration:underline; }
.pd-flag--deleted { font-size: 12px; padding:1px 5px; border-radius:4px; background:#f3d6d6; color:#7a2020; }

/* Возраст цены. Свежих цен в системе 16 из 10 098 — заливка честно покажет,
   что зелёного почти не будет. */
.pd-age { font-variant-numeric:tabular-nums; }
.pd-age--fresh    { background:#e3f5e6; }
.pd-age--ok       { background:#f0f6e6; }
.pd-age--old      { background:#fdf3e0; }
.pd-age--ancient  { background:#f6e6e6; }
.pd-age--none     { opacity:.55; }

.pd-price { position:relative; }
.pd-price__input { width:106px; text-align:right; font-variant-numeric:tabular-nums; }
.pd-price__input.is-saved { outline:2px solid #2f9e56; }
.pd-price__input.is-bad   { outline:2px solid #c0392b; }
.pd-price--own { background:color-mix(in srgb, #2f6feb 7%, transparent); }
.pd-price--empty .pd-price__input { opacity:.65; }
.pd-own-flag { display:block; font-size: 12px; opacity:.8; }

/* Наценка. Полосы ровно те же, по которым отбирает сервер, — иначе цвет
   ячейки и отбор «наценка ниже 20 %» рано или поздно разошлись бы. */
.pd-mk { text-align:right; font-variant-numeric:tabular-nums; }
.pd-mk--negative { background:#f7d9d6; color:#7a1f14; font-weight:600; }
.pd-mk--low      { background:#fdefd6; color:#7a4d0c; }
.pd-mk--mid      { background:#eef3f8; }
.pd-mk--high     { background:#dff0e2; color:#1d5c31; }
.pd-mk--unknown  { opacity:.6; }
.pd-mk__reason   { font-size: 12px; }
.pd-mk__value    { color:inherit; font-weight:inherit; }

.pd-pager { display:flex; gap:12px; align-items:center; margin:12px 0; }
.pd-footnote { margin:8px 0 24px; }
.pd-empty__title { font-weight:600; margin:0 0 4px; }

.pd-dialog { max-width:min(1180px, 94vw); width:1180px; max-height:88vh; overflow:auto;
             border:1px solid var(--line,#d8dde5); border-radius:12px; padding:16px; }
.pd-dialog::backdrop { background:rgba(15,23,42,.45); }
.pd-dialog .card-hd { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.pd-dialog h4 { margin:16px 0 6px; font-size:13px; }
.pd-dialog__controls { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-bottom:12px; }
.pd-dialog__controls label { display:flex; align-items:center; gap:6px; font-size:12px; }
.pd-dialog__controls input[type="number"] { width:80px; }

.pd-avg-figures { display:flex; flex-wrap:wrap; gap:10px; }
.pd-avg-figure { border:1px solid var(--line,#d8dde5); border-radius:10px; padding:10px 12px; min-width:200px; }
.pd-avg-figure span { display:block; font-size: 12px; opacity:.7; }
.pd-avg-figure strong { display:block; font-size:18px; font-variant-numeric:tabular-nums; }
.pd-avg-figure em { display:block; font-size: 12px; opacity:.7; font-style:normal; }
.pd-avg-basis { font-size:12px; max-width:90ch; }

.pd-facts { display:grid; grid-template-columns:auto 1fr; gap:2px 14px; font-size:13px; margin:0 0 12px; }
.pd-facts dt { opacity:.7; }
.pd-facts dd { margin:0; }

.pd-waterfall th { text-align:left; width:230px; }
.pd-waterfall__total th, .pd-waterfall__total td { border-top:2px solid var(--line,#d8dde5); font-weight:600; }

/* ───────────────────────────────────────────────────────────────────────
   Плотная сетка. Экран для работы со списком в восемнадцать тысяч строк
   читается как таблица, а не как лента карточек: клетка одна на факт,
   строка в одну линию, границы видны, шапка и первые две колонки не
   уезжают. Подстрочники, из-за которых строка вырастала в три этажа,
   разведены по своим колонкам.
   ─────────────────────────────────────────────────────────────────────── */

.pd-table-wrap { max-height:72vh; overflow:auto; border:1px solid var(--line,#d8dde5); border-radius:8px; }

table.pd-grid { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%;
                font-size:12px; line-height:1.25; font-variant-numeric:tabular-nums; }
table.pd-grid th, table.pd-grid td {
  border-right:1px solid var(--line,#e3e7ee); border-bottom:1px solid var(--line,#e3e7ee);
  padding:3px 8px; vertical-align:middle; white-space:nowrap; background:var(--card,#fff); }
table.pd-grid tbody tr:nth-child(even) td { background:color-mix(in srgb, var(--line,#e3e7ee) 18%, var(--card,#fff)); }
table.pd-grid tbody tr:hover td { background:color-mix(in srgb, var(--accent,#2f6feb) 7%, var(--card,#fff)); }

/* Шапка. Две строки, обе липкие: без второй строки не видно, где цена, а
   где наценка, и на сороковой строке колонки становятся безымянными. */
table.pd-grid thead th { position:sticky; z-index:3; top:0;
  background:color-mix(in srgb, var(--line,#e3e7ee) 40%, var(--card,#fff));
  font-weight:600; text-align:left; border-bottom:1px solid var(--line,#c9d0da); }
table.pd-grid thead tr.pd-subhead th { top:34px; z-index:2; font-weight:500; font-size: 12px; opacity:.85; }
table.pd-grid thead .pd-th-price { text-align:center; }
table.pd-grid thead .pd-th-price span { display:block; font-weight:400; font-size: 12px; opacity:.7; }

/* Номер строки и две первые колонки не уезжают вбок: иначе на двадцатой
   колонке цены непонятно, чья это строка. */
.pd-rownum { width:44px; text-align:right; color:var(--muted,#6b7280); position:sticky; left:0; z-index:4; }
/* Фон липкой колонки обязан перекрывать общий фон ячейки (наведение и
   чередование строк из redesign.css, специфичность 204) — иначе под номером
   строки просвечивает уезжающее содержимое. Раньше это держал !important;
   теперь спор выигран специфичностью: .dt + .pd-grid + .pd-rownum = 301. */
table.dt.pd-grid .pd-rownum { background:color-mix(in srgb, var(--line,#e3e7ee) 30%, var(--card,#fff)); }
.pd-sticky-1 { position:sticky; left:44px; z-index:4; max-width:190px; overflow:hidden; text-overflow:ellipsis;
               border-right:1px solid var(--line,#c9d0da); }
.pd-sticky-2 { position:sticky; left:234px; z-index:4; max-width:320px; overflow:hidden; text-overflow:ellipsis;
               border-right:1px solid var(--line,#c9d0da); }
table.pd-grid thead .pd-rownum, table.pd-grid thead .pd-sticky-1, table.pd-grid thead .pd-sticky-2 { z-index:6; }
table.pd-grid tbody tr:nth-child(even) .pd-sticky-1,
table.pd-grid tbody tr:nth-child(even) .pd-sticky-2 { background:color-mix(in srgb, var(--line,#e3e7ee) 18%, var(--card,#fff)); }
.pd-sticky-2 .pd-link { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom; }
.pd-product-cell span,.pd-product-cell small{display:block;overflow:hidden;text-overflow:ellipsis}
.pd-product-cell small{margin-top:2px;color:var(--muted,#6b7280);font-size:11px}
.pd-dialog #pdProductForm.pd-product-form{display:block;position:static;float:none;min-height:0;padding:0;border:0;background:transparent}
.pd-product-editor-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pd-product-editor-head span{color:var(--muted);font-size:12px}
.pd-dialog .pd-product-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.pd-dialog .pd-product-fields>label{display:grid;position:static;float:none;width:auto;max-width:none;height:auto;margin:0;padding:0;gap:5px;min-width:0;font-size:12px;font-weight:600}
.pd-product-fields label>span{display:flex;justify-content:space-between;align-items:center}
.pd-product-fields i{padding:1px 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:10px;font-style:normal;font-weight:700}
.pd-product-fields i.is-1c{background:var(--surface-2);color:var(--muted)}
.pd-dialog .pd-product-fields input,.pd-product-footer input{min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text)}
.pd-dialog #pdProductBody{display:block;flex:1 1 auto;min-height:0}
.pd-dialog #pdProductBody>.pd-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.pd-dialog #pdProductBody>.pd-facts>div{display:block;position:static;float:none;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.pd-dialog #pdProductBody>.pd-facts dt{margin:0 0 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.pd-dialog #pdProductBody>.pd-facts dd{margin:0;font-size:12px;line-height:1.35}
.pd-modal-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:8px}
.pd-modal-table{width:100%;border-collapse:collapse;font-size:12px;background:var(--surface)}
.pd-modal-table th,.pd-modal-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}
.pd-modal-table th{position:sticky;top:0;z-index:1;background:var(--surface-2);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.03em}
.pd-modal-table tbody tr:last-child td{border-bottom:0}
.pd-product-footer{flex:none;display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:12px;align-items:end;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface);box-shadow:0 -8px 24px rgba(15,23,42,.06)}
.pd-product-footer[hidden]{display:none}.pd-product-footer label{display:grid;gap:4px;font-size:12px;font-weight:600}.pd-product-footer [data-pd-product-status]{align-self:center;white-space:nowrap}
#pdProductDialog[open]{height:min(680px,calc(100dvh - 32px))}
.pd-ellipsis { max-width:210px; overflow:hidden; text-overflow:ellipsis; }

/* Группа. Её строка — заголовок, а не данные, и выглядеть должна иначе. */
/* Строка-заголовок группы: её фон тоже спорил с общими правилами .dt.
   Специфичность .dt + .pd-grid + .pd-group = 304 против 204, !important не нужен. */
table.dt.pd-grid tbody tr.pd-group td { background:color-mix(in srgb, var(--accent,#2f6feb) 9%, var(--card,#fff));
                 border-bottom:1px solid var(--line,#c9d0da); padding:2px 8px; }
.pd-group__toggle { display:inline-flex; align-items:baseline; gap:8px; background:none; border:0; padding:2px 0;
                    font:inherit; font-weight:600; cursor:pointer; color:inherit; }
.pd-group__caret { font-size: 12px; opacity:.7; }
.pd-group__count { font-weight:400; font-size: 12px; opacity:.7; }

/* Чипы видов цен. Выбранное всегда на виду, справочник — под кнопкой. */
.pd-chips-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 6px; }
.pd-chips-label { font-size:12px; font-weight:600; opacity:.8; }
.pd-chips { display:flex; gap:6px; flex-wrap:wrap; }
.pd-chip.is-lead { border-color:var(--accent,#2f6feb); background:color-mix(in srgb, var(--accent,#2f6feb) 9%, transparent); }
.pd-chip__x { border:0; background:none; cursor:pointer; font-size:14px; line-height:1; padding:0 4px;
              color:var(--muted,#6b7280); border-radius:999px; }
.pd-chip__x:hover { background:color-mix(in srgb, #c0392b 14%, transparent); color:#7a1f14; }
.pd-chips-toggle { padding:3px 10px; font-size:12px; }
.pd-column-picker { display:flex; flex-wrap:wrap; gap:6px; padding:10px; border:1px solid var(--line,#d8dde5);
                    border-radius:8px; background:color-mix(in srgb, var(--line,#e3e7ee) 14%, var(--card,#fff)); }
.pd-column { min-width:0; flex-direction:row; align-items:baseline; gap:6px; padding:4px 10px; border-radius:999px;
             font-size:12px; max-width:340px; background:var(--card,#fff); }
.pd-column__name { font-weight:500; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-column__meta { font-size: 12px; }

/* В плотной сетке поле цены — клетка, а не виджет: рамка появляется по
   наведению и фокусу, иначе двадцать полей в ряд рябят. */
table.pd-grid .pd-price { padding:0; }
table.pd-grid .pd-price__input { width:100%; min-width:92px; border:1px solid transparent; background:transparent;
  padding:3px 8px; text-align:right; font:inherit; font-variant-numeric:tabular-nums; border-radius:0; }
table.pd-grid .pd-price__input:hover { border-color:var(--line,#c9d0da); }
table.pd-grid .pd-price__input:focus { border-color:var(--accent,#2f6feb); background:var(--card,#fff); outline:none; }
table.pd-grid .pd-own-flag { display:none; }
table.pd-grid .pd-price--own { position:relative; }
table.pd-grid .pd-price--own::after { content:""; position:absolute; top:0; right:0; border:4px solid transparent;
  border-top-color:var(--accent,#2f6feb); border-right-color:var(--accent,#2f6feb); }
table.pd-grid .pd-mk__reason { font-size: 12px; }
table.pd-grid .pd-cat span, table.pd-grid .pd-age span, table.pd-grid .pd-num span { display:none; }

/* `display:flex` в классе перебивает UA-правило для [hidden], и панель
   справочника оставалась раскрытой при выставленном атрибуте. */
.pd-column-picker[hidden] { display:none; }

/* Сводка по колонкам. Шесть чисел на вид цены — это таблица, а не карточки:
   в карточках они занимали два ряда и отжимали саму таблицу ниже сгиба. */
.pd-summary { gap:8px; margin:10px 0; }
.pd-summary__card { min-width:0; flex:1 1 220px; padding:6px 10px; border-radius:8px; font-size:12px; }
.pd-summary__card h4 { font-size:12px; margin:0 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-summary__card dl { gap:1px 8px; font-size: 12px; }

/* Галочка группы рисуется рамкой, а не символом: ▾ в безголовом браузере и
   на части машин выпадает в «квадрат неизвестного глифа», и заголовок группы
   начинается с мусора. Направление берётся из aria-expanded — признак и
   картинка не могут разойтись. */
.pd-group__caret { width:0; height:0; border-left:5px solid currentColor;
                   border-top:4px solid transparent; border-bottom:4px solid transparent;
                   transform:rotate(90deg); transition:transform .12s ease; opacity:.65; }
.pd-group__toggle[aria-expanded="false"] .pd-group__caret { transform:rotate(0deg); }

/* Подшапка над постоянными колонками пуста по делу: у них нет пары
   «цена/наценка». Пустая полоса в полстроки — это шов сетки, а не место. */
table.pd-grid thead tr.pd-subhead th { padding:1px 8px; height:16px; }

/* ───────────────────────────────────────────────────────────────────────
   Навигатор ТМЦ и облик стола.

   Правило владельца — «премиально». Здесь это значит не украшения, а
   дисциплину: одна шкала отступов, один радиус, одна линия, числа моноширинно
   и вправо, у каждой цифры видно, из чего она сложилась. Цвет несёт смысл
   только вместе с числом или словом — никогда один.
   ─────────────────────────────────────────────────────────────────────── */

.price-desk { --pd-line:#e2e7ee; --pd-ink:#16202b; --pd-dim:#68737f;
              --pd-accent:#2f6feb; --pd-r:10px; --pd-gap:14px; }

.pd-tree { margin:14px 0; border:1px solid var(--pd-line); border-radius:var(--pd-r); overflow:hidden;
           background:var(--card,#fff); }
.pd-tree__head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px;
                 border-bottom:1px solid var(--pd-line);
                 background:linear-gradient(180deg,color-mix(in srgb,var(--pd-line) 26%,var(--card,#fff)),var(--card,#fff)); }
.pd-tree__head h3 { margin:0; font-size:13px; letter-spacing:.02em; text-transform:uppercase; }
.pd-tree__search { margin-left:auto; min-width:240px; padding:5px 10px; font-size:12px;
                   border:1px solid var(--pd-line); border-radius:999px; }
.pd-tree__reset { padding:4px 12px; font-size:12px; }
.pd-tree__body { max-height:264px; overflow:auto; padding:6px 8px; }
.pd-tree__pick.is-on { color:var(--pd-accent); text-decoration:underline; text-underline-offset:3px; }
.pd-tree__group { display:inline-flex; align-items:baseline; gap:6px; max-width:260px;
                  border:1px solid var(--pd-line); border-radius:999px; padding:2px 9px; font-size:12px;
                  background:var(--card,#fff); cursor:pointer; color:inherit; }
.pd-tree__group:hover { border-color:var(--pd-accent); color:var(--pd-accent); }
.pd-tree__group.is-on { border-color:var(--pd-accent); background:color-mix(in srgb,var(--pd-accent) 10%,transparent);
                        color:var(--pd-accent); font-weight:600; }
.pd-tree__group-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-tree__group-n { font-size: 12px; font-variant-numeric:tabular-nums; opacity:.65; }

/* Карточки видов цен. Каждая цифра — кнопка в разбор, поэтому она набрана
   как значение, а не как подпись, и отзывается на наведение. */
.pd-summary__card { border-radius:var(--pd-r); padding:12px 14px; min-width:250px;
                    box-shadow:0 1px 2px rgba(16,24,40,.04); }
.pd-summary__card h4 { font-size:12px; letter-spacing:.02em; }
.pd-summary__card dd button { border:0; background:none; padding:0 2px; font:inherit;
                              font-variant-numeric:tabular-nums; cursor:pointer; color:inherit;
                              border-bottom:1px dashed color-mix(in srgb,currentColor 45%,transparent); }
.pd-summary__card dd button:hover { color:var(--pd-accent); }

@media (prefers-color-scheme: dark) {
  .price-desk { --pd-line:#2b3440; --pd-ink:#e6ebf2; --pd-dim:#96a2b0; }
}

/* ───────────────────────────────────────────────────────────────────────
   Навигатор ТМЦ: плитки категорий + панель групп одной категории.

   Прежний вид — 192 строки, и внутри каждой сразу все её группы, 1225 кнопок
   разом — читался простынёй и валил вкладку по памяти. Здесь в разметке
   одновременно живут плитки категорий и группы ОДНОЙ открытой категории.
   Доступны при этом по-прежнему все: поиск ищет и по категориям, и по группам.
   ─────────────────────────────────────────────────────────────────────── */

.pd-tree__body { max-height:none; padding:0; overflow:visible; }

.pd-nav__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px;
                padding:12px 14px; max-height:236px; overflow:auto; }

.pd-nav__tile { display:grid; grid-template-columns:1fr auto; grid-template-areas:"name n" "bar bar" "meta meta";
                gap:3px 8px; align-items:center; text-align:left; cursor:pointer;
                border:1px solid var(--pd-line,#e2e7ee); border-radius:9px; padding:8px 10px;
                background:var(--card,#fff); color:inherit; font:inherit;
                transition:border-color .12s ease, box-shadow .12s ease; }
.pd-nav__tile:hover { border-color:var(--pd-accent,#2f6feb); box-shadow:0 1px 3px rgba(16,24,40,.07); }
.pd-nav__tile.is-open { border-color:var(--pd-accent,#2f6feb);
                        box-shadow:0 0 0 1px var(--pd-accent,#2f6feb) inset; }
.pd-nav__tile.is-on { background:color-mix(in srgb,var(--pd-accent,#2f6feb) 8%,var(--card,#fff)); }
.pd-nav__tile-name { grid-area:name; font-weight:600; font-size:12.5px; line-height:1.3;
                     overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-nav__tile-n { grid-area:n; font-size:12px; font-variant-numeric:tabular-nums; color:var(--pd-dim,#68737f); }
.pd-nav__tile-bar { grid-area:bar; height:3px; border-radius:999px; overflow:hidden;
                    background:color-mix(in srgb,var(--pd-line,#e2e7ee) 90%,transparent); }
.pd-nav__tile-bar i { display:block; height:100%; width:var(--w,0%); background:var(--pd-accent,#2f6feb); }
.pd-nav__tile-meta { grid-area:meta; font-size: 12px; color:var(--pd-dim,#68737f);
                     overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.pd-nav__panel { border-top:1px solid var(--pd-line,#e2e7ee);
                 background:color-mix(in srgb,var(--pd-line,#e2e7ee) 16%,var(--card,#fff)); }
.pd-nav__panel-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:9px 14px 4px; }
.pd-nav__pick { border:0; background:none; padding:0; font:inherit; font-weight:600; font-size:12.5px;
                cursor:pointer; color:var(--pd-accent,#2f6feb); }
.pd-nav__pick.is-on { text-decoration:underline; text-underline-offset:3px; }
.pd-nav__groups { display:flex; flex-wrap:wrap; gap:5px; padding:4px 14px 12px; max-height:180px; overflow:auto; }

/* ───────────────────────────────────────────────────────────────────────
   Происхождение цены в самой клетке (пункт 2 задания владельца).

   Под числом стоит СЛОВО об источнике — «1С» или «VISION» — и возраст
   именно этой цены. Слово, а не цвет: заливка возраста повторяет полосы
   колонки «Возраст самой свежей цены», но одна ничего не означает.
   Нажатие открывает разбор «Почему такая цена».
   ─────────────────────────────────────────────────────────────────────── */

.pd-src { display:block; width:100%; margin-top:1px; padding:0 8px; border:0; background:none;
          font:inherit; font-size: 12px; line-height:1.3; text-align:right; cursor:pointer;
          color:var(--muted,#6b7280); border-radius:3px; }
.pd-src:hover { text-decoration:underline; }
.pd-src--own  { color:#1d4ed8; font-weight:600; }
.pd-src--none { cursor:default; opacity:.55; text-decoration:none; }
.pd-src--none:hover { text-decoration:none; }

/* Разбор «Почему такая цена». Побеждённый источник назван вслух — молчаливое
   применение сильнейшего выглядит одинаково с ошибкой в расчёте. */
.pd-why th { text-align:left; width:230px; }
.pd-why__shown th, .pd-why__shown td { background:color-mix(in srgb, var(--accent,#2f6feb) 8%, transparent); font-weight:600; }
.pd-why__total th, .pd-why__total td { border-top:2px solid var(--line,#d8dde5); font-weight:600; }
.pd-why__win  { color:#1d5c31; font-weight:600; }
.pd-why__lose { color:#7a4d0c; font-weight:600; }

/* ───────────────────────────────────────────────────────────────────────
   Панель массовых действий.

   Стоит ПОД таблицей и появляется только при выделении: постоянно висящая
   панель отнимает место у строк, ради которых пришли. Тёмная — чтобы её
   нельзя было спутать с отборами наверху: те сужают показ, эта МЕНЯЕТ ДАННЫЕ.
   ─────────────────────────────────────────────────────────────────────── */

.pd-bulk { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
           margin:10px 0 0; padding:10px 14px; border-radius:9px;
           background:var(--pd-ink,#16202b); color:#f2f5f9; font-size:12.5px; }
.pd-bulk__count { font-weight:600; font-variant-numeric:tabular-nums; }
.pd-bulk__all { border:1px solid rgba(255,255,255,.3); background:none; color:inherit;
                border-radius:5px; padding:4px 10px; font:inherit; cursor:pointer; }
.pd-bulk__all:hover { background:rgba(255,255,255,.12); }
.pd-bulk__sep { width:1px; height:20px; background:rgba(255,255,255,.22); }
.pd-bulk__field { display:inline-flex; align-items:center; gap:7px; font-size:12px; opacity:.92; }
.pd-bulk__field input { width:86px; padding:3px 8px; border-radius:5px; border:1px solid rgba(255,255,255,.3);
                        background:rgba(255,255,255,.1); color:inherit; text-align:right;
                        font-variant-numeric:tabular-nums; }
.pd-bulk .btn { padding:4px 12px; font-size:12px; }
.pd-bulk__note { font-size: 12px; opacity:.85; flex-basis:100%; }

/* Колонка отметок. Липкая слева, как номер строки: иначе на двадцатой колонке
   цены непонятно, что именно отмечено. */
.pd-pick { width:32px; text-align:center; position:sticky; left:0; z-index:5; }
/* То же и по той же причине: .dt + .pd-grid + .pd-pick = 301 против 204. */
table.dt.pd-grid .pd-pick { background:color-mix(in srgb, var(--pd-line,#e2e7ee) 30%, var(--card,#fff)); }
table.pd-grid .pd-rownum { left:32px; }
table.pd-grid .pd-sticky-1 { left:76px; }
table.pd-grid .pd-sticky-2 { left:266px; }

.pd-bulk__undo { border:1px solid rgba(255,255,255,.45); background:none; color:inherit; border-radius:5px;
                 padding:4px 12px; font:inherit; cursor:pointer; font-weight:600; }
.pd-bulk__undo:hover { background:rgba(255,255,255,.15); }

/* Спарклайн хода закупки. Читается, а не украшает: рядом со линией всегда
   стоит число процентов, и цвет — не единственный носитель смысла. */
.pd-spark { width:104px; }
.pd-spark__wrap.is-up { color:#a8352c; }     /* закупка выросла — это плохо для маржи */
.pd-spark__wrap.is-down { color:#2c6e49; }
.pd-spark__pct { font-size: 12px; font-variant-numeric:tabular-nums; font-weight:600; min-width:38px; text-align:right; }
.pd-spark svg { display:block; }
.pd-spark-th { white-space:nowrap; }

/* Сохранённые виды. Стоят над отборами: вид — способ НЕ собирать отборы
   руками, и ниже них они предлагали бы повторить только что сделанную работу. */
.pd-views { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 4px; }
.pd-views__label { font-size:12px; font-weight:600; opacity:.8; }
.pd-views__list { display:flex; gap:6px; flex-wrap:wrap; }
.pd-view { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--pd-line,#e2e7ee);
           border-radius:999px; padding:3px 10px; font-size:12px; background:var(--card,#fff);
           cursor:pointer; color:inherit; max-width:260px; }
.pd-view:hover { border-color:var(--pd-accent,#2f6feb); color:var(--pd-accent,#2f6feb); }
.pd-view.is-on { border-color:var(--pd-accent,#2f6feb);
                 background:color-mix(in srgb,var(--pd-accent,#2f6feb) 10%,transparent);
                 color:var(--pd-accent,#2f6feb); font-weight:600; }
.pd-view__x { color:var(--pd-dim,#68737f); font-size:13px; line-height:1; padding:0 2px; border-radius:999px; }
.pd-view__x:hover { background:color-mix(in srgb,#c0392b 16%,transparent); color:#7a1f14; }
.pd-views__save, .pd-views__link { padding:3px 10px; font-size:12px; }

/* Водопад цены. Все полосы на ОДНОЙ шкале от нуля до цены — в этом весь смысл:
   длины сравнимы и между ступенями, и между товарами. Полосы разной шкалы
   выглядят как водопад, но сравнивать их нельзя, и это хуже таблицы. */
.pd-wf { display:grid; gap:6px; margin:4px 0 12px; }
.pd-wf__row { display:grid; grid-template-columns:minmax(120px,150px) 1fr minmax(120px,auto);
              gap:12px; align-items:center; font-size:12.5px; }
.pd-wf__label { color:var(--pd-dim,#68737f); }
.pd-wf__track { position:relative; height:18px; border-radius:4px;
                background:color-mix(in srgb, var(--pd-line,#e2e7ee) 55%, transparent); }
.pd-wf__track i { position:absolute; top:0; bottom:0; border-radius:4px; background:var(--c,#8a7c85); }
.pd-wf__val { text-align:right; font-variant-numeric:tabular-nums; font-size:12.5px; }
.pd-wf__row--total .pd-wf__label, .pd-wf__row--total .pd-wf__val { font-weight:700; color:inherit; }
.pd-wf__note { margin:0 0 14px; font-size:12px; line-height:1.5; max-width:78ch;
               border-left:3px solid var(--pd-line,#e2e7ee); padding-left:12px; }

/* Экран различий. Итоги по группам стоят ВЫШЕ списка строк: аномалия должна
   быть видна до раскрытия группы, а список из трёх тысяч строк на вопрос
   «где поехало» не отвечает никак. */
.pd-diff { max-width:min(1100px,94vw); width:1100px; }
.pd-diff h4 { margin:16px 0 6px; font-size:13px; }
.pd-diff .dt-wrap { max-height:280px; overflow:auto; border:1px solid var(--pd-line,#e2e7ee); border-radius:8px; }
.pd-diff__stats { display:flex; gap:18px; flex-wrap:wrap; padding:10px 12px; border-radius:8px;
                  background:color-mix(in srgb,var(--pd-line,#e2e7ee) 22%,transparent); font-size:13px; }
.pd-diff__stats b { font-variant-numeric:tabular-nums; font-size:16px; }
.pd-diff__foot { display:flex; align-items:center; gap:12px; margin-top:16px;
                 padding-top:12px; border-top:1px solid var(--pd-line,#e2e7ee); }
.pd-diff__foot .t-dim { flex:1; font-size:12px; }

/* Persistent dialog header, independent scroll region for long calculations. */
.pd-dialog[open] { display:flex; flex-direction:column; overflow:hidden; padding:0; max-height:calc(100dvh - 32px); }
.pd-dialog > .card-hd { flex:none; padding:14px 18px; margin:0; border-bottom:1px solid var(--line); background:var(--surface); }
.pd-dialog > .pd-dialog__controls { flex:none; margin:0; padding:10px 18px; border-bottom:1px solid var(--line); }
.pd-dialog > :is(#pdAvgBody,#pdMarkupBody,#pdProductBody,#pdWhyBody,#pdDiffBody) { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:14px 18px; }
.pd-dialog > .card-hd button { min-width:36px; min-height:36px; }
@media(max-width:620px) { .pd-dialog[open] { max-height:calc(100dvh - 16px); width:calc(100vw - 16px); } .pd-dialog > .pd-dialog__controls { max-height:36dvh; overflow:auto; } }

.pd-dialog > .pd-diff__foot { flex:none; margin:0; padding:12px 18px; }

/* Compact filter controls share one outline and retain native select behavior. */
.price-desk__toolbar { gap:8px; align-items:center; margin:10px 0; }
.price-desk__toolbar label:has(select) { flex-direction:row; align-items:center; gap:6px; min-height:34px; padding:0 9px; border:1px solid var(--line,#dce4e8); border-radius:8px; background:var(--surface,#fff); color:var(--muted,#62737e); white-space:nowrap; }
.price-desk__toolbar label:has(select):focus-within { border-color:var(--accent,#087f72); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#087f72) 12%,transparent); }
.price-desk__toolbar label select { width:auto; max-width:215px; min-width:0; min-height:32px; padding:4px 18px 4px 2px; border:0; border-radius:0; outline-offset:1px; background:transparent; color:var(--text,#20313b); font-family:inherit; font-size:12px; font-weight:500; line-height:1.4; box-shadow:none; }
.price-desk__toolbar input[type="search"] { appearance:none; min-height:34px; padding:7px 10px; border:1px solid var(--line,#dce4e8); border-radius:8px; background:var(--surface,#fff); box-shadow:none; }
.price-desk__toolbar label.pd-check { min-height:34px; padding:0 9px; border:1px solid var(--line,#dce4e8); border-radius:8px; background:var(--surface,#fff); }
.price-desk__toolbar label.pd-check:has(input:checked) { border-color:color-mix(in srgb,var(--accent,#087f72) 35%,var(--line,#dce4e8)); background:color-mix(in srgb,var(--accent,#087f72) 6%,var(--surface,#fff)); }
.price-desk__toolbar input[type="checkbox"] { accent-color:var(--accent,#087f72); }
.price-desk__toolbar button { min-height:34px; border-radius:8px; }
@media(max-width:680px) {
 .price-desk__toolbar { gap:7px; }
 .price-desk__toolbar label:has(select) { max-width:100%; min-height:40px; }
 .price-desk__toolbar label select { min-height:38px; max-width:min(215px,55vw); }
 .price-desk__toolbar label:has(input[type="search"]) { width:100%; }
 .price-desk__toolbar input[type="search"] { min-width:0; width:100%; min-height:40px; }
 .price-desk__toolbar label.pd-check { min-height:40px; }
}
.price-desk__toolbar label:has(input[type="search"]) { flex-direction:row; align-items:center; gap:7px; }
.price-desk__toolbar input[type="search"] { flex:1; }
.price-desk__toolbar input[type="checkbox"] { width:14px; height:14px; min-height:14px; padding:0; margin:0; flex:none; }
.pd-summary-fold{ margin:2px 0 0; }
.pd-summary-fold > summary{
  cursor:pointer; font-size:12px; color:var(--pd-dim,#6b7686);
  padding:2px 0; list-style:none; display:inline-flex; align-items:center; gap:6px; }
.pd-summary-fold > summary::before{ content:"▸"; font-size: 12px; }
.pd-summary-fold[open] > summary::before{ content:"▾"; }
.pd-summary-fold > summary::-webkit-details-marker{ display:none; }
.pd-summary-fold { margin:10px 0; }
.pd-nav__grid { max-height:148px; }

/* ── 16.09.2026: тулбар и ряды по макету «Цены: таблица и наценка» ──────── */
.price-desk__toolbar.ek-s1{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0 6px; margin:0 }
.price-desk__toolbar.ek-s1 > select{ height:34px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); padding:0 28px 0 10px; font:inherit; font-size:13px }
.pd-more{ position:relative }
.pd-more > summary{ list-style:none; cursor:pointer; height:34px; display:inline-flex; align-items:center; gap:6px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:13px; white-space:nowrap }
.pd-more > summary::-webkit-details-marker{ display:none }
.pd-more > summary b{ font-family:var(--mono); font-weight:500; font-size:12px; color:var(--muted) }
.pd-more[open] > summary{ border-color:var(--accent); color:var(--accent) }
.pd-more__body{ position:absolute; z-index:30; top:40px; right:0; min-width:300px; display:grid; gap:10px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 34px -16px rgba(23,35,31,.35) }
.pd-more__body label{ display:grid; gap:4px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.pd-more__body label.pd-check{ display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:13px; color:var(--text) }
.pd-more__body select{ height:32px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font:inherit; font-size:13px; padding:0 8px }
.pd-toggle{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border:1px solid var(--line); border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap }
.pd-toggle:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); color:var(--accent) }
.pd-toggle input{ margin:0 }
.pd-row{ display:flex; align-items:flex-start; gap:14px; padding:6px 0 }
.pd-row-label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500; padding-top:9px; min-width:70px; white-space:nowrap }
.pd-row-chips{ flex:1 1 auto; min-width:0 }
.pd-views.ek-s1{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 0 }
.pd-views.ek-s1 .pd-views__label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500 }
.kp-relsa .dt-enhancer-controls, .kp-relsa .kp-listanie{ display:inline-flex; align-items:center; gap:8px }
.kp-relsa .kp-listanie .pd-pager{ display:inline-flex; align-items:center; gap:4px }
.kp-relsa .kp-listanie .pd-pager .btn{ height:34px; min-width:34px; padding:0 8px }


/* ── 18.09.2026 · шапка стола цен по макету «Три экрана» ─────────────────
   Виды — в строке заголовка («Вид: … | + | 🔗 | Прайсы поставщиков»), чип
   вида цены несёт свой «×», знаменатель — одна строка, «Скрыть удалённые» —
   пилюля-переключатель без системного чекбокса. До первых строк таблицы —
   не дальше сгиба. */
.pd-hd-act { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pd-hd-act .pd-views { margin:0; padding:0; gap:6px; flex-wrap:nowrap; }
.pd-hd-act .pd-views__list { flex-wrap:nowrap; max-width:420px; overflow:hidden; }
.pd-hd-act .pd-views__list .ek-chips { flex-wrap:nowrap; }
.pd-hd-act .pd-views__drop:empty, .pd-hd-act #pdViewsNote:empty { display:none; }
.pd-hd-act .pd-views__save, .pd-hd-act .pd-views__link { height:32px; min-width:32px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; line-height:1; }
.pd-chips-pary { gap:6px 8px; }
.pd-chip-para { display:inline-flex; align-items:center; gap:2px; }
.pd-chip-para .mk-chip { border-top-right-radius:0; border-bottom-right-radius:0; }
.pd-chip-para .pd-chip__x { height:30px; width:26px; display:inline-grid; place-items:center; border:1px solid var(--line,#d8dde5); border-left:0;
  border-radius:0 8px 8px 0; background:var(--surface,#fff); color:var(--muted,#6b7280); font-size:14px; line-height:1; cursor:pointer; }
.pd-chip-para .pd-chip__x:hover { color:var(--bad,#b42318); border-color:var(--bad,#b42318); }
.pd-chip-para .pd-chip__x:focus-visible { outline:2px solid var(--accent,#087864); outline-offset:1px; }
#pdChipsOff[hidden] { display:none; }
.pd-chips-bar { margin:4px 0 2px; }
.pd-chips-bar #pdColumnsHint { font-family:var(--mono,ui-monospace); font-size:12px; }
.pd-toggle input { position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
.price-desk .mk-relsa-verh .pd-toggle.mk-upr { position:relative; padding-left:28px; }
.price-desk .mk-relsa-verh #pdSupplier.mk-upr { flex:0 1 240px; min-width:160px; }
.price-desk .mk-relsa-verh #pdMarkup.mk-upr { flex:0 1 190px; }
.price-desk .mk-relsa-verh .mk-poisk { flex:1 1 320px; }
.pd-denominator.mk-itog { flex-wrap:nowrap; overflow:hidden; }
.pd-denominator.mk-itog > span { white-space:nowrap; }
.pd-denominator.mk-itog > span:last-child { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pd-toggle::before { content:""; position:absolute; left:10px; top:50%; width:10px; height:10px; transform:translateY(-50%);
  border:1.5px solid var(--line,#c9d0da); border-radius:3px; background:var(--surface,#fff); }
.pd-toggle:has(input:checked)::before { border-color:var(--accent,#087864); background:var(--accent,#087864);
  box-shadow:inset 0 0 0 2px var(--surface,#fff); }
.pd-toggle:has(input:focus-visible) { outline:2px solid var(--accent,#087864); outline-offset:1px; }
.price-desk .mk-relsa .mk-listanie > b { font-family:var(--mono,ui-monospace); font-size:12px; white-space:nowrap; }

/* Desktop reference density: the control rail starts below the global sticky
   bar, occupies at most two wrapped lines, and never lets the search SVG
   establish layout height. */
.price-desk .mk-lupa{position:absolute;width:16px;height:16px;max-width:16px;max-height:16px;left:10px;top:50%;transform:translateY(-50%)}
.price-desk form#pdFilters.mk-relsa .mk-relsa-verh{display:flex;flex-wrap:nowrap;align-items:center;align-content:center;gap:6px 8px;min-height:0;max-height:none;overflow:visible}
.price-desk form#pdFilters .mk-poisk{min-width:220px;flex:1 1 320px}.price-desk form#pdFilters #pdSupplier{min-width:135px;flex:0 1 210px}.price-desk form#pdFilters #pdMarkup{min-width:125px;flex:0 1 170px}
.price-desk .mk-relsa-verh .mk-relsa-pravo{display:flex;align-items:center;gap:8px;margin-left:auto;white-space:nowrap}
.price-desk .mk-relsa-verh .mk-listanie{display:flex;align-items:center;gap:6px;margin:0}
.price-desk .mk-relsa-verh .pd-pager{margin:0;gap:4px}
.price-desk .mk-ekran-stol .mk-otbor{min-height:0;padding-block:4px}
.price-desk .mk-ekran-stol .mk-chipy{gap:4px}
.price-desk .mk-ekran-stol .mk-chip,.price-desk .mk-ekran-stol .ek-chip{min-height:26px;padding-block:3px}
.price-desk .pd-chips-bar{margin:0}
.price-desk .pd-denominator{min-height:34px}
@media(max-width:1350px){
  .price-desk form#pdFilters.mk-relsa .mk-relsa-verh{flex-wrap:wrap}
  .price-desk .mk-relsa-verh .mk-relsa-pravo{margin-left:0}
}