/* Статусы товаров и раздел «Архив», метки наличия (items.js). Компоненты - ui.css, здесь метка в строке каталога, кнопка
   действий строки, раскладка раздела (классы it-*) и нейтральный цвет каталога учетной записи (класс корня is-acc, в
   конце файла). Название-кнопка карточки товара (.nm-b, .it-open) - card.css. */

/* метка «Временно неактивная» в строке каталога (подстрока под названием) и в карточке товара */
.sub .it-tag { min-height: 0; margin-left: 6px; padding: 0 7px; font-size: 11.5px; vertical-align: 1px; }
.sub .it-tag::before { width: 6px; height: 6px; }
.it-v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--text-2); }

/* кнопка действий в строке каталога: рядом с кнопкой «Скопировать строку», так же появляется при наведении */
.it-act { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--dim); opacity: 0; transition: opacity .12s; }
.it-act .ui-ico { width: 18px; height: 18px; }
.row:hover .it-act, .it-act:focus-visible, .it-act[aria-expanded="true"] { opacity: 1; }
.it-act:hover, .it-act[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.it-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .it-act { opacity: 1; } }
:where(.main.cards) .it-act { width: 44px; height: 44px; opacity: 1; }      /* строки карточками (телефон): зона нажатия 44 px */
/* строки карточками: имя оставляет место двум кнопкам (статус 44 + промежуток 6 + «Скопировать строку» 32), иначе
   действия уходят на вторую строку и наезжают на фото и остаток (app.css оставляет место одной кнопке, 44 px) */
:where(.main.cards) .row:has(.it-act) .c-name { flex-basis: calc(100% - 82px); }

/* окно смены статуса */
.it-dlg-h { display: grid; gap: var(--s-1); margin: 0; }
.it-dlg-h span { font-size: var(--fs-sm); color: var(--text-3); }
.it-dlg p { margin: 0; }
@media (hover: none) { .it-dlg .ui-input { font-size: 16px; } }      /* касание (и планшет): 16 px - страница не увеличивается при вводе */

/* раздел «Архив» */
.it-page { max-width: 1400px; }
.it-count { margin: 0 0 var(--s-6); font-size: var(--fs-sm); color: var(--text-2); }
.it-note { margin-bottom: var(--s-6); }
.it-arch .it-name { display: flex; align-items: center; gap: var(--s-5); min-width: 0; }
.it-arch .it-name b { font-weight: 600; }
.it-ph { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-2); }
.it-ph.none { display: grid; place-items: center; color: var(--text-3); }
.it-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.it-arch th[data-sort]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }      /* сортировка с клавиатуры */
.it-left { font-weight: 600; }      /* архивный товар с остатком: его нужно уметь принять, выдать и переместить */
.it-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .it-when { white-space: normal; }
}
@media print {
  .it-act, .it-arch .act { display: none !important; }
}

/* ---------- каталог учетной записи вне предпросмотра (класс корня is-acc, этап 2.4, решение 14): цвет только у меток,
   кнопки основного действия, индикатора свежести данных и контура фокуса. Правила - по реестру цветных элементов
   экрана каталога (node tools/acc_colors.mjs: обе темы; поиск, сортировка, склад, изменения цен, режим «Выбрать»);
   дилер, клиент и вход по общему коду - как были. Рост и снижение цены различаются знаком ▲ ▼. ---------- */
html.is-acc .sh-user-a { background: var(--surface-2); color: var(--text); }
html.is-acc .sh-nav-i[aria-current="page"] { background: var(--surface-2); color: var(--text); }
html.is-acc .ui-tab.on, html.is-acc .ui-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
html.is-acc .view.on, html.is-acc .view.on[data-v="mv"] { background: var(--text); color: var(--surface); }
html.is-acc .node.on, html.is-acc .node.on .cnt { background: var(--surface-2); color: var(--text); }
html.is-acc .crumb-path button:hover { background: var(--hover); color: var(--text); }
html.is-acc .sec-h:hover .sec-leaf, html.is-acc .to-top:hover { color: var(--text); }
html.is-acc .kind:hover { border-color: var(--line-2); }
html.is-acc .kind.on, html.is-acc .kind.staff.on { background: var(--text); border-color: var(--text); color: var(--surface); }
html.is-acc .chk input { accent-color: var(--text-2); }
html.is-acc .chk:has(input:checked) { border-color: var(--line-2); background: var(--surface-2); color: var(--text); }
html.is-acc .cols .sorted, html.is-acc .cols .h-p.staff { color: var(--text); }
html.is-acc .c-p.staff .v, html.is-acc .c-p.sorted .v, html.is-acc .c-p.staff.sorted .v { color: var(--text); }
html.is-acc .c-st, html.is-acc .c-st.neg, html.is-acc .c-st.sorted { color: var(--text); }
html.is-acc .c-st:hover { background: var(--hover); }
html.is-acc .chg.up, html.is-acc .chg.down { color: var(--text-2); }
html.is-acc .ph.txt { background: var(--surface-2); color: var(--text-2); }
html.is-acc button.ph:hover { border-color: var(--line-2); }
html.is-acc .row.inf .nm:hover { color: var(--text); }
html.is-acc .copy:hover { background: var(--hover); color: var(--text); }
html.is-acc .copy.done { color: var(--text); }
html.is-acc mark { background: var(--line-2); }
html.is-acc .pop li.on, html.is-acc .pop-tb tr.on td { background: var(--surface-2); color: var(--text); }
html.is-acc .pop li.neg b, html.is-acc .pop-tb td.neg { color: var(--text); }
html.is-acc .v-p.staff { background: var(--surface-2); }
html.is-acc .bk-mode.on { background: var(--surface-2); border-color: var(--text-3); color: var(--text); }
html.is-acc .selbar { border-color: var(--line-2); }
html.is-acc .it-act:hover, html.is-acc .it-act[aria-expanded="true"] { background: var(--hover); color: var(--text); }
html.is-acc .fx-btn:hover, html.is-acc .fx-btn.on { border-color: var(--line-2); }
html.is-acc .fx-btn.on { background: var(--surface-2); color: var(--text); }
html.is-acc .fx-btn[aria-expanded="true"] { border-color: var(--text-3); }
html.is-acc .fx-bn { background: var(--text); color: var(--surface); }
html.is-acc .row.fx-hit { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--text-3); }
html.is-acc .fx-tags i { background: var(--surface-2); color: var(--text-2); }
html.is-acc .main.cards .c-p.staff, html.is-acc .main.cards .c-st, html.is-acc .main.cards .c-st.neg { background: var(--surface-2); }      /* узкий экран: строка - карточка */
/* счетчики «ждут действия» в навигации оболочки - нейтральной инверсией (цветной остается метка уровня проблемы .bad);
   подсветка только что изменившейся цены - нейтральной вспышкой */
html.is-acc .ui-badge:not(.bad):not(.muted) { background: var(--text); color: var(--surface); }
html.is-acc .c-p.fresh { animation-name: fresh-n; }
@keyframes fresh-n { 50% { background: var(--line-2); } }

/* пометка над таблицей каталога: метки наличия посчитаны без резерва */
.it-avnote { margin: -4px 0 12px; font-size: 12px; color: var(--muted); }