/* Кабинет продавца — десктоп. Отдельный интерфейс: не витрина, а рабочее место.
   Подключается ПОСЛЕ tokens.css, но НЕ использует desktop.css — у кабинета
   своя оболочка с боковым меню вместо шапки-поиска.

   Приоритеты из ТЗ:
   4.9 — SLA подтверждения заказа 2 часа, просрочка = автоотмена. Таймер должен
         кричать, иначе продавец теряет заказ и деньги.
   4.3 — офлайн-продажа (быстрая касса) — самое частое действие за прилавком,
         поэтому она в один клик из любого раздела. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-fg);
  background: var(--c-bg);
}

.num, .price, .art, input, table td, table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Шрифт наследуем, цвет — НЕТ: `color: inherit` на поле ввода делает
   текст невидимым, если поле стоит на тёмном фоне (в кабинете это
   боковая панель). Цвет полям задаёт `base.css`. */
button, select { font: inherit; color: inherit; }
input, textarea { font: inherit; }

/* Табличные цифры ПОСЛЕ `font: inherit` — сокращённое `font` обнуляет
   их, а в кабинете в поля вводят цены и количества. */
input, textarea {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-sm); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Оболочка: боковое меню + рабочая область ────── */
.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  /* Фиксированный тёмный — сайдбар остаётся тёмным в обеих темах
     (var(--c-primary) переворачивается в светлый и ломает белый текст). */
  background: #1C1C1E;
  color: #F5F5F7;
  border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.side-top {
  padding: var(--s-4);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.shop-badge { display: flex; align-items: center; gap: var(--s-2); }

/* Значок вместо логотипа: логотипы есть только у демонстрационных
   магазинов, а у настоящего заявителя картинки нет — подставлять чужую
   нельзя. */
.shop-ava {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-muted);
  color: var(--c-muted-fg);
  flex: none;
}

.shop-name { font-size: var(--fs-base); font-weight: 600; }
.shop-role { font-size: 11px; color: var(--c-muted-fg); }

.verified-pill {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--s-2);
  padding: 3px var(--s-2);
  border-radius: var(--r-sm);
  background: rgba(48, 200, 212, .18);
  color: #5FD3DD;
  font-size: 11px;
  font-weight: 700;
}
/* Зелёный значок — только активному магазину: заявке на проверке или
   отказу он обещал бы статус, которого у них нет. */
.verified-pill.is-off { background: var(--c-muted); color: var(--c-muted-fg); }
.verified-pill[hidden] { display: none; }

/* Навигация */
.nav { padding: var(--s-2) 0; flex: 1; overflow-y: auto; }

.nav-item {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  color: #C7D0DA;
  font-size: var(--fs-sm);
  text-align: left;
  transition: background var(--t), color var(--t);
}

.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }

.nav-item[aria-current="page"] {
  background: rgba(255,255,255,.1);
  border-left-color: var(--c-accent);
  color: #fff;
  font-weight: 600;
}

.nav-item svg { flex: none; }

.nav-count {
  margin-left: auto;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  font-size: 11px;
  font-weight: 700;
  display: grid; place-items: center;
}

.nav-count.is-urgent { background: var(--c-accent-fill); color: #fff; }

.nav-sep {
  margin: var(--s-2) var(--s-4);
  border: 0; border-top: 1px solid rgba(255,255,255,.1);
}

.side-bottom { padding: var(--s-3) var(--s-4); border-top: 1px solid rgba(255,255,255,.1); }

.side-link { font-size: var(--fs-xs); color: var(--c-muted-fg); display: block; min-height: 40px; line-height: 40px; }
.side-link:hover { color: #fff; }

/* ── Рабочая область ─────────────────────────────── */
.work { min-width: 0; display: flex; flex-direction: column; }

.work-top {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--c-card);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 20;
}

.page-title { font-size: var(--fs-lg); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.page-sub { font-size: var(--fs-xs); color: var(--c-muted-fg); }

.work-acts { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }


.btn-accent:hover { background: var(--c-accent-fill-hover); }
.btn-primary:hover { background: var(--c-primary-hover); }
.btn-ghost:hover { background: var(--c-muted); }
.btn-ok:hover { filter: brightness(1.08); }
/* Высота приходит из base.css: 44px. Прежние 34-36px возвращали
   промах пальцем ради экономии восьми пикселей. */
.btn-sm { padding: 0 var(--s-3); font-size: var(--fs-xs); }

.body { padding: var(--s-5); flex: 1; }

/* ── Панель: срочные заказы (SLA) ────────────────── */
/* ТЗ 4.9: 2 часа на подтверждение, иначе автоотмена и возврат покупателю.
   Это главный риск продавца — поэтому блок первый и красный. */
.sla-panel {
  border: 2px solid var(--c-accent);
  border-radius: var(--r-lg);
  background: var(--c-card);
  overflow: hidden;
  margin-bottom: var(--s-5);
}

.sla-hd {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--c-err-bg);
  color: var(--c-err);
  font-weight: 700;
  font-size: var(--fs-base);
}

.sla-hd .cnt {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.sla-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 140px 120px auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
}

.sla-row:last-child { border-bottom: 0; }

.sla-timer {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  text-align: center;
}

.sla-timer.is-calm { background: var(--c-ok-bg); color: var(--c-ok); }
.sla-timer.is-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.sla-timer.is-hot { background: var(--c-err-bg); color: var(--c-err); }

.sla-timer small { display: block; font-size: 10px; font-weight: 500; }

.ord-no { font-size: var(--fs-xs); color: var(--c-muted-fg); }
.ord-item { font-size: var(--fs-sm); font-weight: 500; }
.ord-art { font-size: var(--fs-xs); color: var(--c-muted-fg); }
.ord-sum { font-size: var(--fs-md); font-weight: 700; }
.ord-earn { display: block; font-size: 11px; color: var(--c-ok); }

.sla-acts { display: flex; gap: var(--s-2); }

/* ── Плитки показателей ──────────────────────────── */
/* Плитки показателей. `auto-fit` вместо жёстких четырёх колонок: этот файл
   подключает и админка, а на узком окне четыре колонки давали плиткам
   130px, и «8 890 000 сум» вылезало за край. Теперь плитки сами
   перестраиваются в 2 колонки или в одну — без медиа-запроса. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.tiles > * { min-width: 0; }

.tile {
  padding: var(--s-4);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.tile-label {
  font-size: var(--fs-xs);
  color: var(--c-muted-fg);
  margin: 0 0 var(--s-2);
}

/* Значение может переноситься: на узкой плитке «8 890 000 сум» не влезало
   в одну строку и обрезалось на «8 890 0». Обрезанная сумма хуже,
   чем сумма в две строки — по ней невозможно принять решение. */
.tile-value {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tile-value span { font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted-fg); }

.tile-note { margin: var(--s-2) 0 0; font-size: 11px; color: var(--c-muted-fg); }
.tile-note.is-up { color: var(--c-ok); }
.tile-note.is-down { color: var(--c-err); }

/* ── Карточка раздела ────────────────────────────── */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s-5);
}

.card-hd {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
}

.card-ttl { font-size: var(--fs-base); font-weight: 700; margin: 0; }
.card-note { font-size: var(--fs-xs); color: var(--c-muted-fg); }
.card-acts { margin-left: auto; display: flex; gap: var(--s-2); }
.card-bd { padding: var(--s-4); }

/* ── Таблица ─────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; }

.tbl th {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-muted-fg);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-muted);
  white-space: nowrap;
}

.tbl td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-border);
  height: 48px;
  vertical-align: middle;
  font-size: var(--fs-sm);
}

.tbl tbody tr:hover { background: var(--c-muted); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; }

.tbl-scroll { overflow-x: auto; max-width: 100%; }

.item-name { font-weight: 500; }
.item-art { display: block; font-size: var(--fs-xs); color: var(--c-muted-fg); }

/* Остаток */
.stock-val { font-weight: 700; font-size: var(--fs-base); }
.stock-val.is-low { color: var(--c-warn); }
.stock-val.is-zero { color: var(--c-err); }

.reserved {
  display: block;
  font-size: 11px;
  color: var(--c-muted-fg);
}

/* Статусы */

.chip-live { background: var(--c-ok-bg); color: var(--c-ok); }
.chip-off { background: var(--c-muted); color: var(--c-muted-fg); }
.chip-wait { background: var(--c-warn-bg); color: var(--c-warn); }
.chip-new { background: var(--c-err-bg); color: var(--c-err); }

/* ── Быстрая касса ───────────────────────────────── */
/* Продажа за прилавком — самое частое действие. Всегда доступна. */
.till {
  position: fixed;
  right: var(--s-5); bottom: var(--s-5);
  z-index: 60;
}

.till-fab {
  min-height: 52px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: 26px;
  background: var(--c-accent-fill);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: var(--s-2);
  box-shadow: var(--shadow-lg);
  transition: background var(--t);
}

.till-fab:hover { background: var(--c-accent-fill-hover); }

.modal-back {
  position: fixed; inset: 0;
  z-index: 70;
  background: rgba(15,23,42,.5);
  display: grid; place-items: center;
  padding: var(--s-4);
}

.modal-back[hidden] { display: none; }

.modal {
  width: min(100%, 560px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--c-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.modal-hd {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; background: var(--c-card);
}

.modal-ttl { font-size: var(--fs-md); font-weight: 700; margin: 0; }

.modal-x {
  margin-left: auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-md);
  background: transparent;
  color: var(--c-muted-fg);
}

.modal-x:hover { background: var(--c-muted); color: var(--c-fg); }

.modal-bd { padding: var(--s-4); }
.modal-ft {
  padding: var(--s-4);
  border-top: 1px solid var(--c-border);
  display: flex; gap: var(--s-2);
  position: sticky; bottom: 0; background: var(--c-card);
}

.modal-ft .btn { flex: 1; }

/* Поля формы */
.field { margin-bottom: var(--s-3); }

.field-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-muted-fg);
  margin-bottom: var(--s-1);
}

.field-input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-card);
}

.field-input:focus { border-color: var(--c-focus); }

.field-hint { margin: var(--s-1) 0 0; font-size: 11px; color: var(--c-muted-fg); line-height: 1.45; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* Найденный товар в кассе */
.found {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-ok);
  border-radius: var(--r-md);
  background: var(--c-ok-bg);
  margin-bottom: var(--s-3);
}

.found img { width: 44px; height: 44px; border-radius: var(--r-sm); flex: none; }
.found-name { font-size: var(--fs-sm); font-weight: 600; }
.found-meta { font-size: var(--fs-xs); color: var(--c-muted-fg); }
.found-stock { margin-left: auto; text-align: right; font-size: var(--fs-sm); }

/* Итог кассы */
.till-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-muted);
  margin-top: var(--s-3);
}

.till-total-label { font-size: var(--fs-sm); font-weight: 600; }
.till-total-value { font-size: 22px; font-weight: 700; }

/* Важное пояснение про закупочную цену.
   ТЗ 4.3: закупочная НЕ база комиссии — если это не сказать прямо,
   продавцы начнут занижать приход. */
.note-box {
  display: flex; gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-accent) 12%, var(--c-card));
  border: 1px solid #BFDBFE;
  font-size: var(--fs-xs);
  color: #1E3A8A;
  line-height: 1.5;
}

.note-box svg { flex: none; margin-top: 1px; }

.note-box.is-ok { background: var(--c-ok-bg); border-color: var(--c-ok); color: var(--c-ok); }

/* ── Разделы: показываем один ────────────────────── */
.section[hidden] { display: none; }

/* ── Финансы ─────────────────────────────────────── */
.fin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }

.fin-rows { display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.fin-rows > div { display: flex; justify-content: space-between; gap: var(--s-3); }
.fin-rows dt { color: var(--c-muted-fg); }
.fin-rows dd { margin: 0; font-weight: 600; }
.fin-rows .is-minus dd { color: var(--c-err); }
.fin-rows .is-plus dd { color: var(--c-ok); }

.fin-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--s-3);
  margin-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}

.fin-total-value { font-size: 22px; font-weight: 700; }

/* Расшифровка комиссии по траншам — прозрачность из ТЗ 4.11 */
.tranche { font-size: var(--fs-xs); color: var(--c-muted-fg); }
.tranche-row { display: flex; justify-content: space-between; padding: 2px 0; }

/* ── Импорт прайса ───────────────────────────────── */
.drop {
  padding: var(--s-6) var(--s-4);
  border: 2px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  text-align: center;
  background: var(--c-muted);
}

.drop-ico {
  width: 48px; height: 48px;
  margin: 0 auto var(--s-3);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-muted);
  color: var(--c-muted-fg);
}

.progress {
  height: 6px;
  border-radius: 3px;
  background: var(--c-muted);
  overflow: hidden;
  margin: var(--s-3) 0 var(--s-2);
}

.progress-bar {
  height: 100%;
  background: var(--c-ok);
  transition: width 300ms ease;
}

.import-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }

.import-stat {
  padding: var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-align: center;
}

.import-stat-val { font-size: var(--fs-lg); font-weight: 700; }
.import-stat-lbl { font-size: 11px; color: var(--c-muted-fg); }
.import-stat.is-err .import-stat-val { color: var(--c-err); }
.import-stat.is-warn .import-stat-val { color: var(--c-warn); }

/* ── Пустое состояние ────────────────────────────── */
.empty { padding: var(--s-6) var(--s-4); text-align: center; }
.empty-ttl { font-size: var(--fs-md); font-weight: 700; margin: 0 0 var(--s-2); }
.empty-txt { font-size: var(--fs-sm); color: var(--c-muted-fg); margin: 0 auto var(--s-4); max-width: 420px; }

/* ── Узкий десктоп и планшет ─────────────────────── */
@media (max-width: 1180px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .fin-grid { grid-template-columns: 1fr; }
  .import-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 940px) {
  .shell { grid-template-columns: 64px minmax(0, 1fr); }
  .side-top, .side-bottom { display: none; }
  .nav-item { padding: 0 var(--s-3); justify-content: center; }
  .nav-item span, .nav-count { display: none; }
  .sla-row { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .sla-row .ord-sum-cell, .sla-row .ord-ship-cell { display: none; }
}

/* ══ Подключение Телеграма ═══════════════════════════════════════
   Пока не подключено — панель заметная (бот это единственный способ
   успеть за 2 часа SLA). После подключения гасим до спокойного вида:
   постоянный призыв к уже сделанному раздражает. */
.tg-panel {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  border: 2px solid #229ED9;               /* фирменный синий Telegram */
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #F2FAFE, var(--c-card));
}
.tg-panel.is-linked {
  border: 1px solid var(--c-ok);
  background: var(--c-card);
}

.tg-icon {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #229ED9;
  color: #fff;
}
.tg-panel.is-linked .tg-icon { background: var(--c-ok); }

.tg-body { min-width: 0; }
.tg-ttl {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-size: var(--fs-base); font-weight: 700;
}
.tg-state {
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-warn-bg);
  color: var(--c-warn);
  font-size: 11px; font-weight: 700;
  text-transform: none;
}
.tg-panel.is-linked .tg-state { background: var(--c-ok-bg); color: var(--c-ok); }

.tg-note {
  margin: 0 0 var(--s-3);
  max-width: 62ch;                          /* длинная строка не читается */
  color: var(--c-muted-fg);
  font-size: var(--fs-xs); line-height: 1.55;
}
.tg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }

.tg-hint {
  margin: var(--s-3) 0 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-muted);
  font-size: var(--fs-xs); line-height: 1.5;
}
.tg-hint.is-ok { background: var(--c-ok-bg); color: var(--c-ok); }
.tg-hint.is-err { background: var(--c-err-bg); color: var(--c-err); }
.tg-hint[hidden] { display: none; }

/* Живой блок продавца: реальные заказы и выручка из API */
.live-seller {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.ls-hd { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.ls-login { font-weight: 600; }
.ls-hd .sel { height: 36px; padding: 0 10px; border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md); background: var(--c-card); font: inherit; }
.ls-note { margin-left: auto; font-size: var(--fs-xs); color: var(--c-muted-fg); }
.ls-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.ls-tile { padding: var(--s-3); border-radius: var(--r-md); background: var(--c-muted); }
.ls-tile.is-earned { background: var(--c-ok-bg); }
.ls-tile-label { display: block; font-size: var(--fs-xs); color: var(--c-muted-fg); margin-bottom: 4px; }
.ls-tile.is-earned .ls-tile-label { color: var(--c-ok); }
.ls-tile-val { font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.ls-tile.is-earned .ls-tile-val { color: var(--c-ok); }
.ls-order { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) 0; border-top: 1px solid var(--c-border); }
.ls-order-main { min-width: 0; flex: 1; }
.ls-order-id { font-weight: 600; }
.ls-order-items { font-size: var(--fs-sm); color: var(--c-muted-fg); overflow-wrap: anywhere; }
.ls-order-stage { font-size: var(--fs-sm); color: var(--c-primary); font-weight: 600; }
.ls-order-payout { font-variant-numeric: tabular-nums; font-weight: 700; }
.ls-empty { color: var(--c-muted-fg); padding: var(--s-3) 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}