/*
 * RU: Кабинет организации, раздел «Магазин, заказы и запись» (ДО5–ДО8, 26.09.2026): вкладки Магазин · Товары · Заказы ·
 *     Услуги и запись · Сообщения · Аналитика. Общий словарь классов `.bc-*` для всех модулей вкладок
 *     (public/js/biz-shop.js, biz-goods.js, biz-orders.js, biz-services.js, biz-inbox.js): карточки, поля, таблицы,
 *     плашки статусов, шаги мастера, разовый показ секрета. Свой вид вкладки живут в этом же словаре — так кабинет
 *     выглядит одной программой, а не пятью.
 *
 *     Только токены `--k-*` из kartivi.css (храповик `npm run check:theme`): литерал цвета не перекрасился бы ни палитрой,
 *     ни ночным тоном. Кнопки по умолчанию берут вид из biz.css (`button` — заливка акцентом); здесь — вторичные.
 *     Все цели нажатия не ниже `--k-tap-min` (44 px), таблицы прокручиваются вбок внутри своей обёртки — страница на 375 px
 *     вбок не прокручивается никогда.
 *
 * EN: The organisation cabinet, the "Shop, orders and booking" section (DO5–DO8, 2026-09-26): the Shop · Goods · Orders ·
 *     Services and booking · Messages · Analytics tabs. A shared `.bc-*` class vocabulary for all the tab modules
 *     (public/js/biz-shop.js, biz-goods.js, biz-orders.js, biz-services.js, biz-inbox.js): cards, fields, tables, status
 *     chips, wizard steps, a one-time secret display. The tabs' own looks live in the same vocabulary — so the cabinet
 *     looks like one program, not five.
 *
 *     Only `--k-*` tokens from kartivi.css (the `npm run check:theme` ratchet): a colour literal would be repainted by
 *     neither palette nor night tone. Buttons take their default look from biz.css (`button` — an accent fill); the
 *     secondary ones are here. Every tap target is at least `--k-tap-min` (44 px), tables scroll sideways inside their own
 *     wrapper — the page never scrolls sideways at 375 px.
 */

.bc {
  margin: var(--k-s-5) 0 var(--k-s-6);
  min-width: 0;
}

.bc[hidden] {
  display: none;
}

.bc-lead {
  margin: 0 0 var(--k-s-3);
  color: var(--k-text-muted);
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
}

/* ——— Вкладки / Tabs ——— */

/* RU: Ряд вкладок листается вбок сам по себе, как лента разделов кабинета (.biz-sections): шесть вкладок не помещаются в
       375 px, а перенос на две строки ломал бы ощущение «одного ряда переключателей».
   EN: The tab row scrolls sideways on its own, like the cabinet's section row (.biz-sections): six tabs do not fit 375 px,
       and wrapping onto two lines would break the "one row of switches" feel. */
.bc-tabs {
  display: flex;
  gap: var(--k-s-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 var(--k-s-4);
  padding: var(--k-s-1) 0 var(--k-s-2);
  border-bottom: 1px solid var(--k-border-soft);
}

.bc-tabs::-webkit-scrollbar {
  display: none;
}

.bc-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-1);
  min-height: var(--k-tap-min);
  padding: 0 var(--k-s-4);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-pill);
  background: var(--k-surface-2);
  color: var(--k-text);
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
  font-weight: 600;
}

.bc-tab[aria-selected="true"] {
  background: var(--k-brand-soft);
  border-color: var(--k-brand);
  color: var(--k-brand-ink);
}

.bc-tab-count {
  min-width: 1.4em;
  padding: 0 var(--k-s-1);
  border-radius: var(--k-r-pill);
  background: var(--k-brand);
  color: var(--k-text-on-accent);
  font-size: var(--k-fs-1);
  line-height: var(--k-lh-cap);
  font-weight: 700;
  text-align: center;
}

.bc-tab-count[hidden] {
  display: none;
}

.bc-panel {
  min-width: 0;
}

.bc-panel[hidden] {
  display: none;
}

/* ——— Карточки, заголовки, текст / Cards, headings, text ——— */

.bc-card {
  margin: 0 0 var(--k-s-4);
  padding: var(--k-s-4);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-3);
  background: var(--k-surface-2);
  min-width: 0;
}

.bc-card > h4,
.bc-card-title {
  margin: 0 0 var(--k-s-3);
  font-size: var(--k-fs-4);
  line-height: var(--k-lh-read);
  font-weight: 700;
}

.bc-card > h5 {
  margin: var(--k-s-3) 0 var(--k-s-2);
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
  font-weight: 700;
}

.bc-hint {
  margin: 0 0 var(--k-s-2);
  color: var(--k-text-muted);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
}

.bc-empty {
  margin: var(--k-s-2) 0;
  padding: var(--k-s-4);
  border: 1px dashed var(--k-border);
  border-radius: var(--k-r-2);
  color: var(--k-text-muted);
  text-align: center;
}

/* RU: Строка статуса действия: живая область (role="status" ставит разметка), пустая — не занимает места.
   EN: The action status line: a live region (the markup sets role="status"); when empty it takes no room. */
.bc-msg {
  margin: var(--k-s-2) 0;
  color: var(--k-brand-ink);
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
}

.bc-msg:empty {
  margin: 0;
}

.bc-msg.is-error {
  color: var(--k-danger);
}

.bc-msg.is-warn {
  padding: var(--k-s-2) var(--k-s-3);
  border: 1px solid color-mix(in srgb, var(--k-warn) 40%, transparent);
  border-radius: var(--k-r-2);
  background: var(--k-warn-soft);
  color: var(--k-text);
}

/* ——— Поля и формы / Fields and forms ——— */

.bc-form {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-3);
}

/* RU: Сетка полей: две колонки на широком экране, одна — на телефоне; minmax(0, …) не даёт длинному значению распереть
       сетку шире экрана.
   EN: The field grid: two columns on a wide screen, one on a phone; minmax(0, …) stops a long value from pushing the grid
       wider than the screen. */
.bc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--k-s-3);
}

.bc-field {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-1);
  min-width: 0;
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
  font-weight: 600;
}

.bc-field input,
.bc-field select,
.bc-field textarea,
.bc-filters input,
.bc-filters select,
.bc-inline-input {
  width: 100%;
  min-width: 0;
  min-height: var(--k-tap-min);
  box-sizing: border-box;
  padding: var(--k-s-2);
  border: 1px solid var(--k-border-strong);
  border-radius: var(--k-r-1);
  background: var(--k-bg);
  color: var(--k-text);
  font: inherit;
  font-weight: 400;
}

.bc-field textarea {
  min-height: 5em;
  resize: vertical;
}

.bc-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--k-s-2);
  min-height: var(--k-tap-min);
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
  font-weight: 400;
}

.bc-check input {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
}

.bc-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--k-s-4);
  margin: 0;
  padding: 0;
  border: 0;
}

.bc-checks legend {
  margin-bottom: var(--k-s-1);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
  font-weight: 600;
}

.bc-field input:focus-visible,
.bc-field select:focus-visible,
.bc-field textarea:focus-visible,
.bc-filters input:focus-visible,
.bc-filters select:focus-visible,
.bc-inline-input:focus-visible,
.bc-check input:focus-visible,
.bc-tab:focus-visible,
.bc-btn:focus-visible,
.bc-link:focus-visible,
.bc-card summary:focus-visible,
.bc-item-open:focus-visible {
  outline: none;
  box-shadow: var(--k-focus);
}

/* ——— Кнопки / Buttons ——— */

.bc-actions,
.bc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-s-2);
}

.bc-actions {
  margin-top: var(--k-s-1);
}

.bc-row-between {
  justify-content: space-between;
}

/* RU: Вторичные кнопки поверх заливки из biz.css. `min-height` — цель нажатия; `margin: 0` снимает отступ .biz-ghost.
   EN: Secondary buttons over the biz.css fill. `min-height` is the tap target; `margin: 0` drops .biz-ghost's offset. */
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-s-1);
  min-height: var(--k-tap-min);
  margin: 0;
  padding: 0 var(--k-s-4);
  border: 1px solid var(--k-brand);
  border-radius: var(--k-r-2);
  background: var(--k-brand);
  color: var(--k-text-on-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.bc-btn.is-ghost {
  border-color: var(--k-border);
  background: var(--k-surface);
  color: var(--k-text);
}

.bc-btn.is-danger {
  border-color: color-mix(in srgb, var(--k-danger) 45%, var(--k-border));
  background: var(--k-surface);
  color: var(--k-danger);
}

.bc-btn.is-small {
  padding: 0 var(--k-s-3);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
}

.bc-btn:disabled {
  cursor: default;
  opacity: 0.55;
}

.bc-link {
  color: var(--k-brand);
  font-weight: 600;
}

/* ——— Плашки статуса / Status chips ——— */

.bc-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem var(--k-s-2);
  border-radius: var(--k-r-pill);
  background: var(--k-surface-3);
  color: var(--k-text);
  font-size: var(--k-fs-1);
  line-height: var(--k-lh-cap);
  font-weight: 600;
  white-space: nowrap;
}

.bc-chip.is-ok {
  background: var(--k-ok-soft);
  color: var(--k-ok);
}

.bc-chip.is-warn {
  background: var(--k-warn-soft);
  color: var(--k-warn);
}

.bc-chip.is-danger {
  background: var(--k-danger-soft);
  color: var(--k-danger);
}

.bc-chip.is-brand {
  background: var(--k-brand-soft);
  color: var(--k-brand-ink);
}

.bc-chip.is-info {
  background: var(--k-info-soft);
  color: var(--k-info);
}

.bc-chip.is-muted {
  background: var(--k-surface-3);
  color: var(--k-text-muted);
}

/* ——— Фильтры / Filters ——— */

.bc-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--k-s-2);
  margin: 0 0 var(--k-s-3);
}

/* RU: Сегментированный переключатель (статусы заказов, день/неделя): кнопки с aria-pressed в ряд с прокруткой вбок.
   EN: A segmented switch (order statuses, day/week): aria-pressed buttons in a row that scrolls sideways. */
.bc-seg {
  display: flex;
  gap: var(--k-s-1);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 var(--k-s-3);
  padding-bottom: var(--k-s-1);
}

.bc-seg::-webkit-scrollbar {
  display: none;
}

.bc-seg .bc-btn {
  flex: 0 0 auto;
}

.bc-seg .bc-btn[aria-pressed="true"] {
  border-color: var(--k-brand);
  background: var(--k-brand-soft);
  color: var(--k-brand-ink);
}

/* ——— Таблицы / Tables ——— */

/* RU: Прокрутка вбок — у обёртки, а не у страницы: таблица товаров на 375 px шире экрана, и без обёртки уехала бы вся
       страница. tabindex="0" у обёртки ставит разметка — тогда таблицу можно листать и с клавиатуры.
   EN: Sideways scrolling belongs to the wrapper, not the page: the goods table is wider than 375 px, and without the
       wrapper the whole page would shift. The markup sets tabindex="0" on the wrapper — then the table scrolls from the
       keyboard too. */
/* RU: position: relative — обязательно: скрытые подписи для читалки (.sr-only) внутри таблицы позиционированы абсолютно,
       и без своего блока-контейнера они вылезали из прокрутки обёртки и раздвигали страницу до 600 px на телефоне.
   EN: position: relative is required: screen-reader captions (.sr-only) inside the table are absolutely positioned, and
       without their own containing block they escaped the wrapper's scroll and widened the page to 600 px on a phone. */
.bc-table-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-2);
  background: var(--k-surface);
}

.bc-table-wrap:focus-visible {
  outline: none;
  box-shadow: var(--k-focus);
}

.bc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
}

.bc-table th,
.bc-table td {
  padding: var(--k-s-2);
  border-bottom: 1px solid var(--k-border-soft);
  text-align: left;
  vertical-align: top;
}

.bc-table th {
  color: var(--k-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.bc-table tr:last-child td {
  border-bottom: 0;
}

/* RU: Широкая таблица (товары): своя минимальная ширина, чтобы колонка названия не сжималась до буквы в столбик рядом с
       полями ввода цены и остатка — лишнее уходит в прокрутку обёртки, а не в перенос по слогам.
   EN: A wide table (goods): its own minimum width so the title column does not shrink to one letter per line next to the
       price and stock inputs — the excess goes into the wrapper's scroll rather than per-syllable wrapping. */
.bc-table.is-wide {
  min-width: 52rem;
}

.bc-table .bc-col-main {
  min-width: 13rem;
}

.bc-table .is-num {
  text-align: right;
  white-space: nowrap;
}

.bc-table-thumb {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--k-r-1);
  background: var(--k-surface-3);
}

.bc-inline-input {
  width: 7rem;
}

/* ——— Списки / Lists ——— */

.bc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--k-s-2);
}

.bc-item {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-2);
  padding: var(--k-s-3);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-2);
  background: var(--k-surface);
  min-width: 0;
}

.bc-item.is-accent {
  border-color: var(--k-brand);
}

.bc-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-s-1) var(--k-s-3);
}

.bc-item-title {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.bc-item-meta {
  margin: 0;
  color: var(--k-text-muted);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
  overflow-wrap: anywhere;
}

/* RU: Длинный текст — 15/22 (ТГ2): 14 px со строкой normal в абзаце слипался. EN: Long text is 15/22 (ТГ2): 14 px with a normal line clumped in paragraphs. */
.bc-item-body {
  margin: 0;
  font-size: var(--k-fs-read);
  line-height: var(--k-lh-read);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* RU: Строка-кнопка списка (диалог ящика, заказ) — вся строка нажимается, текст выровнен влево.
   EN: A list row button (an inbox dialogue, an order) — the whole row is pressable, text left-aligned. */
.bc-item-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--k-s-1);
  width: 100%;
  min-height: var(--k-tap-min);
  padding: var(--k-s-3);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-2);
  background: var(--k-surface);
  color: var(--k-text);
  font: inherit;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.bc-item-open.is-unread {
  border-color: var(--k-brand);
  background: var(--k-brand-soft);
}

/* ——— Ключ-значение / Key-value ——— */

.bc-kv {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--k-s-1) var(--k-s-3);
  margin: 0;
  font-size: var(--k-fs-3);
  line-height: var(--k-lh-base);
}

.bc-kv dt {
  color: var(--k-text-muted);
}

.bc-kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ——— Шаги мастера / Wizard steps ——— */

.bc-steps {
  display: flex;
  gap: var(--k-s-1);
  overflow-x: auto;
  margin: 0 0 var(--k-s-3);
  padding: 0;
  list-style: none;
  counter-reset: bc-step;
}

.bc-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-1);
  padding: var(--k-s-1) var(--k-s-2);
  border-radius: var(--k-r-pill);
  color: var(--k-text-muted);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
}

.bc-step::before {
  counter-increment: bc-step;
  content: counter(bc-step);
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--k-surface-3);
  font-weight: 700;
}

.bc-step.is-on {
  background: var(--k-brand-soft);
  color: var(--k-brand-ink);
  font-weight: 700;
}

.bc-step.is-on::before {
  background: var(--k-brand);
  color: var(--k-text-on-accent);
}

.bc-step.is-done::before {
  content: "✓";
  background: var(--k-ok-soft);
  color: var(--k-ok);
}

/* ——— Выбор цвета обложки / Cover colour picker ——— */

.bc-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-s-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.bc-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--k-tap-min);
  min-height: var(--k-tap-min);
  border: 2px solid var(--k-border);
  border-radius: var(--k-r-2);
  cursor: pointer;
}

/* RU: Цвет образца задаёт разметка переменной --bc-swatch (цвет обложки — выбор магазина, а не тема); без неё — акцент.
   EN: The markup sets the swatch colour through --bc-swatch (a cover colour is the shop's choice, not the theme); without
       it — the accent. */
.bc-swatch span {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: var(--k-r-1);
  background: var(--bc-swatch, var(--k-brand));
}

.bc-swatch:has(input:checked) {
  border-color: var(--k-brand);
  box-shadow: var(--k-focus);
}

.bc-swatch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* ——— Показатели / Stats ——— */

.bc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--k-s-2);
  margin: 0 0 var(--k-s-3);
}

.bc-stat {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-1);
  padding: var(--k-s-3);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-2);
  background: var(--k-surface);
}

.bc-stat strong {
  font-size: var(--k-fs-6);
  line-height: var(--k-lh-title);
  font-variant-numeric: tabular-nums;
}

.bc-stat span {
  color: var(--k-text-muted);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
}

/* ——— Разовый секрет / One-time secret ——— */

.bc-secret {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-s-2);
  padding: var(--k-s-3);
  border: 1px solid color-mix(in srgb, var(--k-warn) 45%, transparent);
  border-radius: var(--k-r-2);
  background: var(--k-warn-soft);
}

.bc-secret code {
  flex: 1 1 14rem;
  min-width: 0;
  padding: var(--k-s-2);
  border-radius: var(--k-r-1);
  background: var(--k-surface);
  font-family: var(--k-font-mono);
  font-size: var(--k-fs-2);
  line-height: var(--k-lh-sm);
  overflow-wrap: anywhere;
  user-select: all;
}

/* ——— Отчёт фида / Feed report ——— */

.bc-report {
  max-height: 22rem;
  overflow: auto;
}

/* ——— Раскрывающиеся блоки / Disclosures ——— */

.bc-card details > summary,
.bc-details > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--k-tap-min);
  color: var(--k-brand);
  font-weight: 600;
  cursor: pointer;
}

.bc-details {
  margin: var(--k-s-2) 0;
}

@media (max-width: 560px) {
  .bc-card {
    padding: var(--k-s-3);
  }

  .bc-kv {
    grid-template-columns: minmax(0, 1fr);
  }

  .bc-kv dd {
    margin-bottom: var(--k-s-2);
  }
}