/* Окно «Каталог» для подбора позиций (счёт, предложение, заказ в кабинете партнёра). Цвета заданы через --cp-*: по умолчанию палитра окна бухгалтерии,
   класс cat-portal — палитра кабинета партнёра. */
.cat-ov { --cp-bg: var(--bg, #fff); --cp-chrome: var(--chrome, #f4f2ec); --cp-chrome2: var(--chrome-2, #e8e6de); --cp-line: var(--line, #d0cdc2); --cp-accent: var(--yellow, #f7c600);
  --cp-accent-line: var(--yellow-line, #b88a00); --cp-sel: var(--sel, #fff3b0); --cp-muted: var(--muted, #6b6b60); --cp-ok: var(--ok, #2e7d32); --cp-err: var(--err, #b3261e);
  --cp-card: #fff; --cp-thumb: #f6f5f1; --cp-side: #fbfaf7; --cp-text: #222; --cp-head-ink: #222; }
.cat-ov.cat-portal { --cp-bg: var(--card, #fff); --cp-chrome: var(--blue-soft, #e8f3fb); --cp-chrome2: var(--line, #d6e1ec); --cp-line: var(--line, #d6e1ec); --cp-accent: var(--navy, #10233f);
  --cp-accent-line: var(--blue, #1b86c8); --cp-sel: var(--blue-soft, #e8f3fb); --cp-muted: var(--muted, #5b6e86); --cp-ok: var(--ok, #1b8a4b); --cp-err: var(--err, #b3261e);
  --cp-card: var(--card, #fff); --cp-thumb: var(--blue-soft, #f4f9fd); --cp-side: var(--card, #fff); --cp-text: var(--ink, #17263a); --cp-head-ink: #fff; }
.cat-portal .btn { background: var(--blue, #1b86c8); color: #fff; border: 0; border-radius: 7px; padding: 6px 14px; cursor: pointer; font: inherit; }
.cat-portal .btn:disabled { opacity: .5; cursor: default; }
.cat-portal .cat-x { background: transparent; color: #fff; }
.cat-portal .cat-close { background: transparent; color: var(--cp-text); border: 1px solid var(--cp-line); }
.cat-portal a { color: var(--blue, #1b86c8); }
.cat-ov { position: fixed; inset: 0; z-index: 9000; background: rgba(40,38,30,.55); display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; }
.cat-box { color: var(--cp-text); background: var(--cp-bg); width: 96vw; height: 92vh; max-width: 1500px; display: flex; flex-direction: column; border: 1px solid var(--cp-accent-line); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.cat-head { color: var(--cp-head-ink); background: var(--cp-accent); border-bottom: 1px solid var(--cp-accent-line); padding: 6px 12px; display: flex; align-items: center; gap: 12px; }
.cat-head b { font-size: 15px; white-space: nowrap; }
.cat-q { flex: 1; min-width: 200px; padding: 6px 10px; border: 1px solid #8f8c80; font: inherit; background: var(--cp-card); color: var(--cp-text); }
.cat-chk { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.cat-cnt { color: var(--cp-head-ink); white-space: nowrap; }
.cat-x { font-size: 18px; line-height: 1; padding: 2px 10px; }
.cat-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 360px; }
.cat-side { overflow: auto; border-right: 1px solid var(--cp-line); background: var(--cp-chrome); padding: 6px 0; }
.cat-g, .cat-sec { padding: 5px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 6px; }
.cat-sec { font-weight: bold; margin-top: 6px; color: #4a4638; }
.cat-g.sub { padding-left: 22px; font-weight: normal; }
.cat-g:hover, .cat-sec:hover { background: var(--cp-chrome2); }
.cat-g.on, .cat-sec.on { background: var(--cp-sel); }
.cat-side em { font-style: normal; color: var(--cp-muted); font-weight: normal; }
.cat-list { overflow: auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; align-content: start;
  /* высота строки по содержимому: иначе у карточек с трёхстрочным названием поле количества и кнопка выходят за низ карточки и прячутся под следующей строкой */
  grid-auto-rows: max-content; }
.cat-card { position: relative; border: 1px solid var(--cp-line); background: var(--cp-card); display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; padding: 6px; cursor: pointer; min-height: 88px; }
.cat-card:hover { border-color: var(--cp-accent-line); }
.cat-card.on { background: var(--cp-sel); border-color: var(--cp-accent-line); }
.cat-card.used::after { content: "в документе"; position: absolute; right: 6px; bottom: 4px; font-size: 11px; color: var(--cp-ok); }
.cat-mk { position: absolute; top: 2px; left: 4px; background: rgba(255,255,255,.85); padding: 0 2px; line-height: 1; }
.cat-th { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; background: var(--cp-thumb); overflow: hidden; }
.cat-th img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-noph { font-size: 10.5px; color: var(--cp-muted); text-align: center; }
.cat-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cat-tx b { font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-art { color: var(--cp-muted); font-size: 11.5px; }
.cat-pr { font-weight: bold; font-size: 13px; margin-top: auto; }
.cat-det { overflow: auto; border-left: 1px solid var(--cp-line); padding: 10px 12px; background: var(--cp-side); }
.cat-big { height: 230px; background: var(--cp-card); border: 1px solid var(--cp-line); display: flex; align-items: center; justify-content: center; }
.cat-big img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-big.none { color: var(--cp-muted); }
.cat-thumbs { display: flex; gap: 4px; margin: 6px 0; flex-wrap: wrap; }
.cat-thumbs img { width: 46px; height: 46px; object-fit: contain; border: 1px solid var(--cp-line); background: var(--cp-card); cursor: pointer; }
.cat-thumbs img.on { border-color: var(--cp-accent-line); outline: 2px solid var(--cp-accent); }
.cat-det h3 { margin: 8px 0 4px; font-size: 14px; line-height: 1.3; }
.cat-meta { color: var(--cp-muted); font-size: 12px; margin-bottom: 6px; }
.cat-sd { margin: 6px 0; font-weight: bold; }
.cat-ds { margin: 6px 0; line-height: 1.45; max-height: 220px; overflow: auto; font-size: 12.5px; }
.cat-tiers { width: 100%; border-collapse: collapse; margin: 8px 0; }
.cat-tiers th, .cat-tiers td { border-bottom: 1px solid var(--cp-line); padding: 3px 4px; text-align: left; }
.cat-tiers .r { text-align: right; }
.cat-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; position: sticky; bottom: 0; background: var(--cp-side); padding: 6px 0; }
.cat-qty { width: 80px; padding: 4px; }
.cat-foot { border-top: 1px solid var(--cp-line); background: var(--cp-chrome); padding: 6px 12px; display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.cat-marked { margin-right: auto; color: var(--cp-muted); }
.cat-empty { color: var(--cp-muted); padding: 20px; grid-column: 1 / -1; }
.cat-empty.err { color: var(--cp-err); }
.cat-quick { width: 190px; padding: 4px 6px; font: inherit; border: 1px solid #8f8c80; }
@media (max-width: 1100px) { .cat-body { grid-template-columns: 200px minmax(0, 1fr) 300px; } }

@media (max-width: 800px) {
  .cat-ov { padding: 0; }
  .cat-box { width: 100vw; height: 100vh; max-width: none; }
  .cat-head { flex-wrap: wrap; gap: 6px 10px; }
  .cat-q { min-width: 0; flex: 1 1 160px; }
  .cat-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .cat-side { max-height: 96px; border-right: 0; border-bottom: 1px solid var(--cp-line); }
  .cat-list { grid-template-columns: minmax(0, 1fr); }
  .cat-det { max-height: 38vh; border-left: 0; border-top: 1px solid var(--cp-line); }
  .cat-big { height: 150px; }
}
.cat-qrow { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.cat-cq { width: 78px; padding: 3px 5px; font: inherit; border: 1px solid var(--cp-line); background: var(--cp-card); color: var(--cp-text); text-align: right; }
.cat-plus { padding: 3px 10px; font-size: 12px; white-space: nowrap; }
.cat-card { cursor: default; }