/* 240FPS CRM — лаконичная тема. Светлая по умолчанию, тёмная по настройке системы. */
:root {
  color-scheme: light;
  /* Светлая — серая, не белая; текст контрастный (Максим, 25.10): текст 16:1, подписи 10:1, статусы ≥5:1. */
  --bg: #d5dae2;
  --surface: #e6eaef;
  --surface-2: #dde2e9;
  --border: #aeb7c4;
  --text: #05070c;
  --muted: #283242;
  --accent: #1d4fc4;
  --on-accent: #ffffff;
  --focus: var(--accent);
  --disabled: #5b6577;
  --control-height: 32px;
  --accent-soft: #cbd7f2;
  --danger: #a8201a;
  --ok: #11632f;
  --warn: #7f4700;
  --shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 1px 3px rgba(16, 24, 40, .10);
  --radius: 10px;
}

/* Тёмная тема: по настройке системы или по выбору в меню («Оформление»). */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    color-scheme: dark;
    --bg: #0e1116;
    --surface: #151a21;
    --surface-2: #1a202a;
    --border: #262d38;
    --text: #e7ebf2;
    --muted: #98a2b3;
    --accent: #82aaff;
    --on-accent: #0e1116;
    --accent-soft: #1a2440;
    --danger: #f97066;
    --ok: #3ccb7f;
    --warn: #f5a524;
    --shadow: none;
  }
}

:root[data-scheme="dark"] {
    color-scheme: dark;
    --bg: #0e1116;
    --surface: #151a21;
    --surface-2: #1a202a;
    --border: #262d38;
    --text: #e7ebf2;
    --muted: #98a2b3;
    --accent: #82aaff;
    --on-accent: #0e1116;
    --accent-soft: #1a2440;
    --danger: #f97066;
    --ok: #3ccb7f;
    --warn: #f5a524;
    --shadow: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.3 -apple-system, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }

/* --- Каркас --- */
.shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100dvh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  min-height: 0; overflow: hidden;
  gap: 4px;
}

.logo {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 15px;
  padding: 4px 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo b { color: var(--accent); }

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

#nav { min-height: 0; overflow-y: auto; }
.sidebar-foot { flex-shrink: 0; margin-top: auto; border-top: 1px solid var(--border); padding-top: 12px; }
.who { padding: 6px 10px; font-size: 12px; color: var(--muted); }
.who strong { display: block; color: var(--text); font-size: 13px; }

.main { overflow: hidden; display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.page { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; }
.page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.page-head h1 { font-size: 20px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
.spacer { flex: 1; }

/* --- Элементы --- */
.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; box-shadow: none; background: none; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.ghost.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.btn.danger { color: var(--danger); }
.btn:disabled { color: var(--disabled); background: var(--surface-2); opacity: .65; cursor: default; box-shadow: none; }
:where(button,a,summary,[tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Поля и списки при выборе — только граница, без цветной рамки (замечание Максима 25.10). */
:where(input,textarea,select):focus-visible { outline: none; border-color: var(--accent); }
:is(input,textarea,select):disabled { color: var(--disabled); background: var(--surface-2); cursor: not-allowed; }

input[type=text], input[type=tel], input[type=password], input[type=number], input[type=search], input[type=date], textarea, select {
  width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  outline: none;
}

.order-date-input { cursor: pointer; }
.order-date-input::-webkit-calendar-picker-indicator { cursor: pointer; }
.order-date-picker { width: min(340px, 100%); margin: 0 auto; }
.order-date-nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 10px; }
.order-date-nav strong { text-align: center; text-transform: capitalize; }
.order-date-weekdays, .order-date-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.order-date-weekdays { margin-bottom: 5px; color: var(--muted); font-size: 12px; text-align: center; }
.order-date-weekdays span { padding: 4px 0; }
.order-date-empty { min-height: 38px; }
.order-date-day {
  min-height: 38px; border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--text); cursor: pointer;
}
.order-date-day:hover { background: var(--surface-2); border-color: var(--border); }
.order-date-day.today { border-color: var(--accent); }
.order-date-day.selected { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
/* Автозаполнение браузера красит поле в свой светлый фон — текст становится нечитаемым. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--text);
  transition: background-color 600000s 0s;
}
input:is([type=date], [type=month]), select { color-scheme: inherit; }
* { scrollbar-color: var(--muted) var(--surface-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--muted); border: 2px solid var(--surface-2); border-radius: 8px; }
label.field { display: block; margin-bottom: 6px; }
label.field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.empty { color: var(--muted); text-align: center; padding: 48px 16px; font-size: 13px; }

/* --- Диалоги --- */
/* minmax(0, 1fr) и min-height: 0 обязательны: без них строка сетки растягивается
   по высоте переписки, лишнее обрезается overflow: hidden и прокручивать нечего. */
.chat-layout { display: grid; grid-template-columns: var(--chat-list-width, 430px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; overflow: hidden; }
.chat-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--surface); min-height: 0; min-width: 0; position: relative; }
/* Ширину списка диалогов можно тянуть за правый край; двойной щелчок возвращает обычную. */
.chat-resizer { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 5; }
.chat-resizer:focus-visible, .chat-resizer:hover, .chat-resizer.dragging { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.chat-resizer::after { content: ""; position: absolute; top: 45%; left: 2px; width: 4px; height: 40px; border-radius: 3px; background: var(--muted); }
.chat-resizer { touch-action: none; }
.chat-search { padding: 12px; border-bottom: 1px solid var(--border); display: grid; gap: 8px;
  /* Колонка не шире списка: иначе длинные названия аккаунтов растягивают блок за край телефона (доработка №75). */
  grid-template-columns: minmax(0, 1fr); }

/* Переключатель аккаунтов над списком диалогов */
.segmented { display: flex; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.seg {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 6px; border: none; border-radius: 6px; background: none; color: var(--muted);
  cursor: pointer; font-size: 12px;
}
.seg:hover { color: var(--text); }
.seg.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.seg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.segmented.fit { flex-wrap: wrap; }
.segmented.fit .seg { flex: none; padding: 5px 10px; }
.city-tag { font-size: 10px; padding: 1px 6px; margin-left: 6px; flex: none; color: var(--muted); }
.seg-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg.active .seg-count { color: var(--accent); }
/* Фильтр стадий — выбор можно снять, поэтому без «подложки» у невыбранного состояния. */
.stage-tabs .seg.active { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.chat-filter-row { display: flex; gap: 5px; overflow-x: auto; padding: 1px; scrollbar-width: thin; }
.chat-filter { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 15px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 11px; cursor: pointer; }
.chat-filter:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.chat-filter.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); }
.chat-items { overflow-x: hidden; overflow-y: auto; flex: 1; min-height: 0; }

/* Колонка строго по ширине списка: длинное «Объявление: …» без переноса раньше расширяло
   строку, и на телефоне список ездил вбок (доработка №84). */
.chat-item { padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; display: grid;
  grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 3px; }
.chat-item:hover { background: var(--surface-2); }
.chat-item { border-left: 3px solid transparent; }
/* Открытый диалог: нейтральный фон и полоска слева, без «синевы» нового сообщения. */
.chat-item.active { background: var(--surface-2); border-left-color: var(--muted); }
/* Непрочитанное от клиента: рамка акцентным цветом и жирное превью. */
.chat-item.unread {
  border: 1px solid var(--accent); border-left-width: 3px; border-radius: 8px;
  margin: 4px 6px; background: var(--accent-soft);
}
.chat-item.unread .preview { color: var(--text); font-weight: 600; }
.chat-item .row { display: flex; align-items: center; gap: 8px; }
.chat-item .name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item .time { font-size: 11px; color: var(--muted); flex: none; }
.chat-item-context, .chat-head-context { display: flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: wrap; }
.chat-item-context .tag, .chat-head-context .tag { font-size: 10px; padding: 1px 6px; }
.chat-account-badge { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.chat-city-badge { color: var(--muted); }
.chat-item .preview { font-size: 12px; line-height: 1.35; color: var(--muted); overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-word; }
.chat-item .item-title { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item.needs-reply { border-left-color: var(--danger); }
.chat-item.thinking { border-left-color: color-mix(in srgb, var(--ok) 65%, var(--border)); }
.chat-wait-state, .chat-think-state { font-size: 11px; font-weight: 600; }
.chat-wait-state { color: var(--danger); }
.chat-think-state { color: var(--ok); }
.badge {
  background: var(--accent); color: var(--on-accent); border-radius: 20px;
  font-size: 11px; padding: 1px 6px; min-width: 18px; text-align: center; flex: none;
}

.chat-pane { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); min-height: 0; }
.chat-head {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.chat-head .title { font-weight: 650; }
.chat-head-main { display: grid; gap: 3px; min-width: 180px; max-width: min(460px, 42vw); }
.chat-listing { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-calc { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.calc-button-icon { font-size: 16px; line-height: 1; }
.think-button { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, var(--border));
  background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.conversation-body { display: grid; grid-template-columns: minmax(0, 1fr) 0; flex: 1; min-height: 0; overflow: hidden; transition: grid-template-columns .18s ease; }
.conversation-body.context-open { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
.conversation-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.chat-context { min-width: 0; overflow: hidden auto; border-left: 1px solid var(--border); background: var(--surface);
  padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.conversation-body:not(.context-open) .chat-context { visibility: hidden; padding: 0; border-left: 0; }
.chat-context-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.context-fields { display: grid; gap: 11px; }
.context-fields > div { display: grid; gap: 2px; overflow-wrap: anywhere; }
.context-attention, .context-thinking { display: grid; gap: 8px; padding: 10px; border-radius: 10px; }
.context-attention { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--border));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.context-thinking { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 34%, var(--border));
  background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.context-action { width: 100%; justify-content: center; }

.messages { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.messages > * { flex-shrink: 0; }
.history-more { align-self: center; border: 1px solid var(--border); border-radius: 16px; padding: 5px 12px;
  color: var(--muted); background: var(--surface); cursor: pointer; font-size: 11px; }
.new-message-jump { position: absolute; z-index: 3; right: 18px; bottom: 76px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 18px; padding: 7px 12px; background: var(--surface); color: var(--accent); box-shadow: var(--shadow); cursor: pointer; }
.msg { min-width: 0; max-width: min(85%, 680px); display: flex; flex-direction: column; gap: 3px; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.bubble {
  padding: 8px 12px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); white-space: pre-wrap; word-break: break-word;
}
.msg.out .bubble { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Ссылка в нашем (синем) сообщении иначе сливается с фоном: цвет текста и подчёркивание. */
.msg.out .bubble a { color: inherit; text-decoration: underline; }
/* Только px: процент от пузыря растягивал пузырь под исходный размер фото (25.10). */
.bubble img { display: block; width: auto; height: auto; max-width: 280px; border-radius: 8px; }
.bubble img.msg-photo { cursor: zoom-in; }
.msg .meta { font-size: 11px; color: var(--muted); }
.msg .ticks { margin-left: 5px; letter-spacing: -3px; font-weight: 600; }
.msg .ticks.read { color: var(--accent); }
.day-sep { text-align: center; font-size: 11px; color: var(--muted); margin: 6px 0; }

/* Ответ на сообщение: кнопка «↩» у пузыря, цитата внутри, полоска над полем ввода, меню по правой кнопке. */
.msg-row { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.msg.out .msg-row { flex-direction: row-reverse; }
.msg-row .bubble { min-width: 0; }
.msg-reply {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s;
}
.msg:hover .msg-reply, .msg-reply:focus-visible { opacity: 1; }
.msg-reply:hover { color: var(--accent); border-color: var(--accent); }
@media (pointer: coarse) { .msg-reply { opacity: .7; } }
.quote {
  border-left: 3px solid var(--accent); background: rgba(127, 127, 127, .12); border-radius: 6px;
  padding: 4px 8px; margin-bottom: 6px; font-size: 12px; white-space: normal;
}
.msg.out .quote { border-left-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .16); }
.quote-author { font-weight: 600; font-size: 11px; }
.quote-text { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-word; opacity: .9; }
.reply-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-top: 1px solid var(--border);
  background: var(--surface); font-size: 12px;
}
.reply-bar-body { flex: 1; min-width: 0; border-left: 3px solid var(--accent); padding-left: 8px; }
.reply-bar .quote-author { color: var(--accent); }
.ctx-menu {
  position: fixed; z-index: 1000; min-width: 180px; padding: 4px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.ctx-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none; border-radius: 6px; cursor: pointer; }
.ctx-item:hover { background: var(--surface-2); }

.composer { border-top: 1px solid var(--border); background: var(--surface); padding: 10px 14px; display: flex; gap: 8px; align-items: flex-end; }
.composer-tools { display: flex; flex: none; gap: 2px; align-items: flex-end; }
/* Три значка (📎 👋 ⚡) в ширине прежних двух: поле ввода не сужается. */
.composer-tools .btn { flex: none; padding-left: 6px; padding-right: 6px; }
.composer textarea { resize: none; min-height: 40px; max-height: 160px; }
.composer.drop { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

/* --- Воронка --- */
.board {
  display: grid; grid-template-columns: repeat(4, minmax(258px, 1fr)); gap: 12px;
  align-items: stretch; overflow-x: auto; padding-bottom: 12px; height: 100%;
}
.column {
  background: color-mix(in srgb, var(--surface) 78%, var(--bg));
  border: 1px solid var(--border); border-radius: var(--radius); min-width: 258px;
  display: flex; flex-direction: column; max-height: 100%; overflow: hidden;
}
.column-head {
  position: sticky; top: 0; z-index: 2; padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650;
}
.column-head .count { color: var(--muted); font-weight: 500; }
/* Карточки подстраиваются под содержимое; длинные колонки прокручиваются независимо. */
.board { --deal-gap: 7px; }
.column-body {
  padding: 6px; display: flex; flex-direction: column; gap: var(--deal-gap); overflow: auto; min-height: 80px;
  max-height: calc(100vh - 190px);
}
.column.drag-over .column-body { background: var(--accent-soft); border-radius: 8px; }

.deal {
  flex: none; min-height: 116px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 8px;
  padding: 7px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
}
.deal:hover { border-color: var(--accent); }
.deal-reply { border-left-color: var(--danger); }
.deal-overdue { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 5%, var(--surface)); }
.deal-reminder { border-left-color: var(--accent); }
.deal-waiting { border-left-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.deal-paused { border-left-color: var(--muted); }
.deal-new { border-left-color: var(--accent); }
.deal .top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.deal .top .avatar { width: 18px; height: 18px; font-size: 9px; }
.deal .who { color: var(--text); font-weight: 600; font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.deal .when { font-size: 11px; color: var(--muted); flex: none; }
.deal .sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal .last {
  font-size: 12px; line-height: 1.3; color: var(--muted); overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-word;
}
.funnel-toolbar {
  position: sticky; top: 0; z-index: 10; margin-bottom: 12px; padding: 4px 0 8px;
  flex-wrap: wrap; background: var(--bg);
}
.funnel-toolbar select { width: auto; min-width: 130px; }
.funnel-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.funnel-summary-btn { cursor: pointer; font: inherit; }
.funnel-summary-btn:hover, .funnel-summary-btn.active { border-color: var(--accent); color: var(--accent); }
.funnel-summary-btn.danger { color: var(--danger); }
.funnel-summary-btn.warn { color: var(--warn); }
.funnel-summary-btn.active { background: var(--accent-soft); font-weight: 650; }
.funnel-view-toggle { width: auto; }
.funnel-view-toggle .seg { min-width: 94px; }
.deal-state { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-state.reply,.deal-state.overdue { color: var(--danger); font-weight: 600; }
.deal-state.waiting { color: var(--warn); }
.deal-state.reminder { color: var(--accent); }
.deal-actions {
  display: flex; align-items: center; gap: 3px; margin-top: auto; opacity: 0;
  transform: translateY(2px); transition: opacity .12s ease, transform .12s ease;
}
.deal:hover .deal-actions, .deal:focus-within .deal-actions { opacity: 1; transform: none; }
.deal-actions .btn { min-height: 24px; padding: 2px 6px; font-size: 11px; }
.deal-actions .deal-more { margin-left: auto; font-size: 16px; line-height: 1; }
.deal-order { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.column-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 24px 10px; }
@media (hover: none), (max-width: 760px) {
  .deal-actions { opacity: 1; transform: none; }
  .board { display: flex; }
  .column { width: min(310px, 84vw); flex: none; }
  .column-body { max-height: calc(100dvh - 290px); }
  .funnel-toolbar { position: static; }
}
.avatar {
  width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center; flex: none; font-weight: 600;
}

/* --- Таблицы --- */
table.grid { width: 100%; border-collapse: collapse; background: var(--surface); }
table.grid th, table.grid td { text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--border); }
table.grid th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding-top: 6px; padding-bottom: 6px; }
table.grid tr:hover td { background: var(--surface-2); }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Сравнение цен: плотная таблица.
   Фиксированные ширины колонок пробовали — при 700–1200px текст наезжал друг на
   друга, поэтому колонки снова подстраиваются под содержимое. Компактность даёт
   уменьшенный отступ ячеек, а ширину строки держат переносы в тексте предложения. */
.supplier-table th, .supplier-table td { padding: 4px 8px; }
.supplier-compare-name { vertical-align: top; }
/* Название позиции — главное в строке, поэтому крупнее. */
.supplier-compare-name strong { font-size: 16px; font-weight: 650; line-height: 1.25; }
/* Длинные названия магазинов и сроки переносим, а не растягиваем строку. */
.supplier-cell, .supplier-cell-body, .supplier-compare-updated { overflow-wrap: anywhere; }
.supplier-table th.num { white-space: nowrap; }
/* Действия строки: пять значков в один ряд, без лишней высоты. */
.supplier-table .supplier-monitor-actions { flex-wrap: nowrap; gap: 2px; }
.supplier-table .supplier-monitor-actions .btn { flex: 0 0 auto; min-height: 28px; padding: 3px 6px; }

/* --- Сравнение цен на телефоне --------------------------------------------------------- */
/* Ячейка магазина — это сетка: подпись магазина сверху на всю ширину, под ней
   предложение и кнопка блокировки. Подпись обязательна: без неё непонятно, где WB, а где DNS.
   Порог 720px совпадает с основной карточной раскладкой строки (блок ниже по файлу),
   иначе на планшете карточки растягивались на всю ширину и выглядели пусто. */
@media (max-width: 720px) {
  /* Карточки магазинов сами решают, встать рядом или друг под другом: на телефоне
     карточка занимает всю ширину, на планшете рядом влезают две. Так текст не сжимается
     на узком экране и не остаётся пустоты на широком. */
  .supplier-table tr.supplier-compare-row { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .supplier-table tr.supplier-compare-row > .supplier-compare-name,
  .supplier-table tr.supplier-compare-row > .supplier-monitor-actions { grid-column: 1 / -1; }
  .supplier-table tr.supplier-compare-row > .supplier-cell::before {
    grid-column: 1 / -1; margin-bottom: 0;
  }
  .supplier-cell { min-width: 0; }
  /* Длинные названия магазинов и сроки переносим, а не обрезаем по краю. */
  .supplier-cell, .supplier-compare-updated { overflow-wrap: anywhere; }
  /* Название позиции чуть меньше, чем на большом экране: там рядом цены и кнопки. */
  .supplier-compare-name strong { font-size: 15.5px; }
  .supplier-table .supplier-monitor-actions { gap: 4px; }
  .supplier-table .supplier-monitor-actions .btn { flex: 1 1 30%; min-height: 32px; }
  .supplier-cell-block { min-height: 30px; padding: 4px 8px; }
}

/* --- Статистика --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.tile { padding: 8px 10px; }
.tile .label { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.tile .value { font-size: 20px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.section { margin-bottom: 14px; }
.section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 6px; }
.bar-row { display: grid; grid-template-columns: 160px 1fr 60px; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.bar { height: 8px; border-radius: 6px; background: var(--accent); min-width: 2px; }
.bar-track { background: var(--surface-2); border-radius: 6px; }

/* --- Модальные окна --- */
.overlay {
  position: fixed; inset: 0; background: rgba(16, 24, 40, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50;
}
.modal { background: var(--surface); border-radius: 12px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; border: 1px solid var(--border); }
.modal.wide { max-width: 760px; }
.modal-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.modal-head h2 { margin: 0; font-size: 15px; }
.modal-body { padding: 18px; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.perm { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; }
.perm input { margin-top: 3px; }
.perm .t { font-weight: 600; font-size: 13px; }
.perm .h { font-size: 12px; color: var(--muted); }

.toast {
  position: fixed; right: 20px; bottom: 20px; background: var(--text); color: var(--bg);
  padding: 10px 14px; border-radius: 8px; z-index: 100; font-size: 13px; max-width: 360px;
}

/* --- Вход --- */
.login-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-box { width: 340px; padding: 26px; }
.login-box h1 { font-size: 18px; margin: 0 0 4px; }
.login-box p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.error { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 8px; }

[hidden] { display: none !important; }

/* --- Склад --- */
.stock-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.stock-toolbar input[type="search"] { flex: 1 1 360px; min-width: min(100%, 240px); }
.stock-warning { padding: 8px 12px; margin-bottom: 8px; border-color: var(--warn); }
.stock-warning-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; font-size: 13px; }
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 8px; align-items: start; }
.stock-card { overflow: hidden; }
/* Шапка карточки: подписи стоят в строку с отступами и переносятся, а не слипаются. */
.stock-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 13px; }
.stock-card-head .spacer { flex: 1 1 0; min-width: 0; }
.stock-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.stock-row:hover { background: var(--surface-2); }
.stock-row.open { background: var(--accent-soft); }
.stock-item-movable { cursor: grab; }
.stock-item-movable.dragging { opacity: .45; cursor: grabbing; }
.stock-group-drop { transition: background-color .15s ease, box-shadow .15s ease; }
.stock-group-drop.drag-over { background: color-mix(in srgb, var(--ok) 14%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ok) 55%, var(--border)); border-radius: 8px; }
.stock-row.warn .stock-label > div:first-child { color: var(--warn); font-weight: 600; }
.stock-label { flex: 1; min-width: 0; }
.stock-qty { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-items { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 4px 0; }
.stock-item { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 24px; font-size: 12.5px; }
.stock-item-name { flex: 1; min-width: 0; color: var(--muted); }
.stock-item-qty { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-edit { padding: 2px 6px; font-size: 12px; }

/* --- Собранные ПК --- */
.pc-lines { display: grid; gap: 6px; }
.pc-line { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px auto auto; gap: 6px; align-items: center; }
.pc-line select, .pc-line input { min-width: 0; }
.pc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 12px; align-items: start; }
.pc-card { padding: 14px; display: grid; gap: 10px; }
.pc-card.sold { opacity: .85; }
.pc-card-head { display: flex; align-items: flex-start; gap: 10px; }
.pc-title { font-weight: 650; font-size: 15px; }
.pc-price { text-align: right; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-parts { display: grid; gap: 3px; font-size: 13px; }
.pc-part { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
.pc-meta { display: grid; gap: 2px; }
.pc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-ok { color: var(--ok); border-color: var(--ok); }
@media (max-width: 700px) {
  .pc-line { grid-template-columns: 1fr 64px auto auto; }
  .pc-line .pc-cat { grid-column: 1 / -1; }
  .pc-part { grid-template-columns: 1fr; gap: 0; }
}

/* --- Калькулятор --- */
.modal.calc-modal { max-width: 1120px; }
/* Перетаскиваемое окно: фон не затемняется и не перехватывает клики — переписку под окном видно и можно листать. */
.overlay.floating-overlay { background: transparent; pointer-events: none; }
.overlay.floating-overlay .modal {
  pointer-events: auto; box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  /* Слегка прозрачный фон: сквозь окно угадывается переписка, а текст и поля калькулятора читаются. */
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.overlay.floating-overlay .modal-head { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.modal-head.drag-handle { cursor: move; user-select: none; touch-action: none; }
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.calc-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.calc-platform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.calc-platform { text-align: left; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.calc-platform:hover { border-color: var(--accent); }
.calc-platform.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.calc-platform-title { font-weight: 650; }
.calc-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.calc-field { margin-bottom: 8px; }
.calc-thumbs { display: flex; gap: 4px; margin-top: 6px; }
.calc-thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; }
.calc-right { position: sticky; top: 0; }
.calc-summary { background: #0b1628; color: #e7ebf2; border-radius: 12px; padding: 16px; display: grid; gap: 6px; }
.calc-summary .muted { color: #8b97ab; }
.calc-summary-title { color: #22d3ee; font-weight: 650; margin-bottom: 4px; }
.calc-line { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; font-size: 12px; align-items: baseline; }
.calc-line.calc-sub { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 6px; }
.calc-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-total { display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 10px; margin-top: 4px; font-size: 18px; font-weight: 650; }
.calc-total span:last-child { color: #22d3ee; }
.calc-preview { width: 100%; border-radius: 8px; border: 1px solid var(--border); margin-top: 8px; }
.calc-actions { display: grid; gap: 6px; margin-top: 10px; }
.calc-actions .btn { text-align: center; }
.calc-lightbox { text-align: center; }
.calc-lightbox-img { max-width: 100%; max-height: 60vh; border-radius: 10px; }
@media (max-width: 900px) {
  .calc-layout { grid-template-columns: 1fr; }
  .calc-right { position: static; }
  .calc-platforms, .calc-parts { grid-template-columns: 1fr; }
}

/* --- Заказы на сборку --- */
.order-city { margin-bottom: 26px; }
.order-city-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.order-city-title { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 0; }
.order-list { display: grid; gap: 5px; }
.order-card { overflow: hidden; }
.order-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: none; border: none; cursor: pointer; text-align: left; }
.order-head:hover { background: var(--surface-2); }
.order-number { font-weight: 650; white-space: nowrap; }
.order-head .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.order-total { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-body { padding: 4px 10px 10px; border-top: 1px solid var(--border); }
.order-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 10px; margin-top: 6px; }
.order-wide { grid-column: 1 / -1; }
.order-table-wrap { overflow-x: auto; container-type: inline-size; container-name: order-parts; }
.order-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.order-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px; }
.order-table td { padding: 2px 5px; vertical-align: middle; }
.order-table td.center { text-align: center; }
/* Категория, кнопки склада и название — в одну строку, чтобы состав не тянулся по вертикали. */
.oi-cat { line-height: 1.2; white-space: nowrap; overflow: hidden; }
.order-table input, .order-table select { padding: 3px 6px; font-size: 12.5px; }
.order-item-name { min-width: 340px; }
.order-num { width: 12ch; min-width: 12ch; }
/* Цены целиком (до 1 000 000): без стрелок числового поля, они съедали последнюю цифру. */
.order-table .order-num input { width: 100%; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.order-table .order-num input::-webkit-inner-spin-button, .order-table .order-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.order-table .oi-avail select { min-width: 13ch; }
.oi-cat { color: var(--muted); font-size: 12px; }
textarea.order-item-text {
  resize: none; overflow: hidden; min-height: 0; line-height: 1.3; padding: 3px 6px; font-size: 12.5px;
  display: block; width: 100%;
}
/* На телефоне и узком окне строка комплектующего — карточка: название во всю ширину, поля с подписями ниже. */
@container order-parts (max-width: 850px) {
  .order-table thead { display: none; }
  .order-table, .order-table tbody { display: block; }
  .order-table tr.order-item {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; align-items: end;
    grid-template-areas: "name name name name" "qty price cost cost" "avail avail date date" "check warranty warranty del";
    padding: 10px 2px; border-bottom: 1px solid var(--border);
  }
  .order-table td { display: block; padding: 0; min-width: 0; width: auto; }
  .order-table .oi-check { grid-area: check; align-self: center; }
  .order-table .oi-name { grid-area: name; min-width: 0; }
  .order-table .oi-qty { grid-area: qty; }
  .order-table .oi-price { grid-area: price; }
  .order-table .oi-cost { grid-area: cost; }
  .order-table .oi-avail { grid-area: avail; }
  .order-table .oi-date { grid-area: date; }
  .order-table .oi-del { grid-area: del; align-self: center; }
  .order-table .oi-warranty { grid-area: warranty; display: flex; align-items: center; gap: 6px; }
  .order-table .oi-warranty::before { order: 2; margin: 0; }
  .order-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
  .order-table input, .order-table select, textarea.order-item-text { width: 100%; font-size: 14px; }
}
/* iOS увеличивает страницу при фокусе на поле со шрифтом меньше 16px. */
@media (max-width: 700px) {
  .order-table input, .order-table select, textarea.order-item-text { font-size: 16px; }
}
/* Строки деталей не красим по площадке (WB, Ozon, DNS…): площадка видна в «Наличии» (Максим, 25.10). */
.order-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
.order-issued-row { cursor: pointer; }
.order-issued-details td { background: var(--surface-2); }

/* Детали заказа со склада */
.oi-stock { display: inline-flex; align-items: center; flex: none; }
.oi-stock-btn { border: none; background: none; padding: 0 3px; font-size: 12px; line-height: 1.2; color: var(--muted); cursor: pointer; }
.oi-stock-btn:hover { color: var(--accent); }
.oi-stock-btn.on { color: var(--ok); font-weight: 700; font-size: 14px; }
/* Деталь взята со склада — зелёное поле названия, чтобы сразу было видно, что она выбрана. */
.oi-name-row.has-stock textarea.order-item-text {
  border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
  background: color-mix(in srgb, var(--ok) 13%, var(--surface));
}
.oi-name-row.has-stock textarea.order-item-text:focus { border-color: var(--ok); }
.pc-warranty { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.stock-pick { display: grid; gap: 8px; }
.stock-pick-list { max-height: 55vh; overflow: auto; display: grid; gap: 2px; }
.stock-pick-group { font-size: 11px; color: var(--muted); font-weight: 600; margin: 8px 0 2px; text-transform: uppercase; letter-spacing: .02em; }
.stock-pick-item { display: flex; justify-content: space-between; gap: 10px; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.stock-pick-item:hover:not([disabled]) { border-color: var(--accent); }
.stock-pick-item[disabled] { opacity: .5; cursor: not-allowed; }
.danger-text { color: var(--danger); }

/* Использует СЦ */
.service-list { display: grid; gap: 12px; }
.service-card { padding: 12px 14px; }
.service-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.service-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.service-name { min-width: 0; overflow: hidden; }
.service-row.service-used { opacity: .75; }
@media (max-width: 900px) {
  .service-row { grid-template-columns: 1fr 70px; }
  .service-name { grid-column: 1 / -1; }
}

/* --- Сервис --- */
.svc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.svc-card { min-width: 0; grid-template-columns: minmax(0, 1fr); padding: 12px 14px; display: grid; gap: 8px; font-size: 16px; line-height: 1.45; }
.svc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-to-pay { font-weight: 600; margin-top: 2px; }
.svc-to-pay-bad { color: var(--danger); }
.tag.tag-prepay { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.svc-number { font-weight: 650; }
.svc-model { font-weight: 600; flex: 1 1 220px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.svc-lines { display: grid; gap: 3px; white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.svc-status { max-width: 560px; background: transparent; border: 0; padding: 0; gap: 6px; }
.svc-status .seg {
  flex: none; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.svc-status .seg:hover { color: var(--accent); border-color: var(--accent); }
.svc-status .seg.active {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none;
}
.svc-status .seg[disabled] { opacity: .75; cursor: default; }
.svc-status .seg[disabled]:hover { color: var(--on-accent); border-color: var(--accent); }
.svc-waiting { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--warn); font-size: 13px; }
.svc-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.svc-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.svc-check input { width: auto; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  padding: 5px 10px; border-radius: 20px; cursor: pointer; font-size: 12px;
}
.chip:hover { color: var(--text); }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.svc-works-box { display: grid; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.svc-works { display: grid; gap: 6px; }
.svc-work-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 6px; align-items: center; }
.svc-part-expense-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px auto; gap: 6px; align-items: center; }
.svc-work-price { text-align: right; }
.svc-works-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svc-works-total { font-weight: 650; }
.svc-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--border); padding-top: 8px; }
@media (max-width: 700px) {
  .svc-part-expense-row { grid-template-columns: minmax(0, 1fr) 78px auto; }
  .svc-part-expense-row > :first-child { grid-column: 1 / -1; }
}

/* --- Доработки --- */
.imp-page { width: 100%; }
.imp-page > * { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; }
.imp-composer { padding: 12px; display: grid; gap: 8px; }
.imp-composer textarea { resize: vertical; min-height: 70px; }
.imp-composer-actions { display: flex; align-items: center; gap: 8px; }
.imp-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-thumbs:empty { display: none; }
.imp-thumb { position: relative; display: block; width: 88px; height: 66px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.imp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imp-thumb-del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; cursor: pointer; }
.imp-list { display: grid; gap: 10px; }
.imp-card { padding: 12px 14px; display: grid; gap: 8px; }
.imp-card.imp-closed { opacity: .72; }
.imp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-number { font-weight: 650; }
.imp-status { width: auto; font-weight: 600; padding: 4px 8px; }
.imp-text { white-space: pre-wrap; word-break: break-word; }
.imp-comments { display: grid; gap: 6px; border-left: 2px solid var(--border); padding-left: 10px; }
.imp-comment-author { font-weight: 600; font-size: 13px; }
.imp-comment-text { white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.imp-foot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.imp-foot input { flex: 1; min-width: 180px; }

/* --- Сборка ПК со склада в стиле калькулятора --- */
.pcb-select-row { display: flex; gap: 6px; }
.pcb-select-row select { flex: 1; min-width: 0; }
.pcb-select-row .pc-qty { width: 64px; flex: none; }
.pcb-hint { margin-top: 3px; }
.pcb-extras-title { font-weight: 650; margin: 16px 0 4px; }
/* Пустой основной слот — красным, в сборке и в карточке ПК. */
label.field.pcb-missing > span { color: var(--danger); }
.pcb-missing select { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.calc-summary .pcb-missing-line span { color: #f97066; }
.pc-part-missing { color: var(--danger); font-weight: 600; }
.pcb-warning select { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.pcb-warning-text { color: var(--warn); font-weight: 600; }
.pcb-fields { margin-top: 12px; }
.pc-qty { width: 70px; }

/* === Меню с иконками (компьютер) === */
.nav-item { justify-content: flex-start; gap: 10px; }
.nav-icon { display: inline-flex; flex: none; opacity: .85; }
.nav-label { flex: 1; min-width: 0; }
.nav-more { display: none; }
.chat-back { display: none; }
.login-box { max-width: calc(100vw - 32px); }

/* Лист «Ещё» */
.more-sheet { display: grid; }
.more-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 13px 4px; border: none; border-bottom: 1px solid var(--border); background: none;
  text-align: left; font-size: 15px; cursor: pointer; color: var(--text);
}
.more-item:last-child { border-bottom: none; }
.more-sep { height: 10px; }

/* === Телефон === */
@media (min-width: 761px) and (max-width: 1150px) {
  .chat-layout { grid-template-columns: var(--chat-list-width, 300px) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  html, body { overflow: hidden; overscroll-behavior: none; }
  /* 16px в полях ввода — иначе iPhone приближает страницу при каждом нажатии на поле. */
  input[type=text], input[type=tel], input[type=password], input[type=number], input[type=search], input[type=date], textarea, select { font-size: 16px; }

  .shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; height: 100vh; height: 100dvh; }
  .main { order: 1; padding-top: env(safe-area-inset-top); }

  /* Боковое меню превращается в нижнюю панель. */
  .sidebar {
    order: 2; flex-direction: row; gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--border);
  }
  .sidebar .logo, .sidebar-foot { display: none; }
  #nav { display: flex; width: 100%; }
  .nav-item {
    position: relative; flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center;
    gap: 2px; padding: 6px 2px; font-size: 10.5px; border-radius: 10px;
  }
  .nav-item .nav-icon { opacity: 1; }
  .nav-item .nav-label { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
  .nav-item .badge { position: absolute; top: 1px; left: 50%; margin-left: 4px; font-size: 10px; padding: 0 5px; }
  .nav-item.active { background: none; }
  .nav-item.active .nav-icon { background: var(--accent-soft); border-radius: 12px; padding: 1px 12px; }
  .nav-secondary { display: none; }
  .nav-more { display: flex; }

  .page { padding: 12px; }
  .page-head { margin-bottom: 10px; }
  .page-head h1 { font-size: 17px; }

  /* Диалоги: список и переписка — два экрана. */
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-pane { display: none; }
  .chat-open .chat-list { display: none; }
  .chat-open .chat-pane { display: flex; }
  .chat-list { border-right: none; }
  .chat-back { display: inline-flex; font-size: 20px; padding: 2px 8px; }
  .chat-head { padding: 6px 8px; gap: 6px; flex-wrap: wrap; }
  .chat-head .avatar, .chat-head .tag { display: none; }
  .chat-head .chat-account-badge, .chat-head .chat-city-badge { display: inline-flex; }
  .chat-head-main { flex: 1 1 calc(100% - 48px); max-width: none; min-width: 0; }
  .chat-listing { max-width: 100%; }
  .chat-calc .calc-button-label { display: none; }
  .chat-calc { min-width: 38px; padding-left: 8px; padding-right: 8px; }
  .chat-head select { width: auto; max-width: 46vw; padding: 5px 8px; font-size: 14px; }
  .chat-head .btn { padding: 6px 9px; font-size: 13px; }
  .conversation-body, .conversation-body.context-open { position: relative; grid-template-columns: minmax(0, 1fr); }
  .chat-context { display: none; }
  .conversation-body.context-open .chat-context { display: flex; position: absolute; z-index: 6; inset: 0; border-left: 0; }
  .messages { padding: 12px 10px; }
  .msg { max-width: 86%; }
  .bubble img { max-width: 62vw; }
  .composer { padding: 6px 8px; gap: 6px; }
  .composer-tools { flex-direction: column; gap: 2px; }
  .composer-tools .btn { width: 40px; min-height: 28px; padding: 2px 6px; }
  .composer select { max-width: 30vw; }

  /* Воронка: колонка на экран, листается вбок. */
  .board { scroll-snap-type: x mandatory; gap: 10px; }
  .column { width: 84vw; scroll-snap-align: start; }

  /* Окна — на весь экран, «Ещё» — снизу листом. */
  .overlay { padding: 0; align-items: stretch; }
  .modal, .modal.wide, .modal.calc-modal { max-width: none; max-height: none; height: 100%; border-radius: 0; border: none; }
  .modal-head { padding-top: calc(12px + env(safe-area-inset-top)); position: sticky; top: 0; background: var(--surface); z-index: 2; }
  .modal-foot { position: sticky; bottom: 0; background: var(--surface); padding-bottom: calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .sheet-overlay { align-items: flex-end; }
  .sheet-overlay .modal { height: auto; max-height: 85vh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .sheet-overlay .modal-head { padding-top: 14px; }
  .grid-2 { grid-template-columns: 1fr; }

  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile { padding: 10px; }
  .tile .value { font-size: 18px; }
  .card { overflow-x: auto; }
  table.grid th, table.grid td { padding: 8px; white-space: nowrap; }
  .bar-row { grid-template-columns: 110px 1fr 44px; }

  .order-head { flex-wrap: wrap; row-gap: 4px; }
  .order-foot .btn { flex: 1 1 auto; }
  .stock-toolbar { gap: 8px; }
  .pc-part { grid-template-columns: 1fr; gap: 0; }

  .toast { left: 12px; right: 12px; max-width: none; bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* --- Цены калькулятора --- */
input.price-input { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }

/* Склад → Цены: компактные закрытые категории, CRM рядом со справочной ценой DNS. */
.prices-toolbar { padding: 8px 10px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prices-sync { flex: 1; min-width: 200px; }
.prices-toolbar .btn, .prices-dns-toolbar .btn { padding: 5px 9px; min-height: 30px; font-size: 12px; }
.prices-dns-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.prices-dns-toolbar select { width: auto; max-width: 160px; padding: 5px 8px; min-height: 30px; font-size: 12px; }
.prices-dns-note { flex: 1; min-width: 220px; }
.prices-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.prices-section { min-width: 0; overflow: hidden; }
.prices-section.is-open { grid-column: 1 / -1; }
.prices-section .prices-section-head { min-height: 36px; padding: 7px 10px; font-size: 13px; }
.prices-section-body[hidden] { display: none; }
.prices-table .prices-item-row > td { padding: 4px 10px; white-space: normal; vertical-align: middle; }
.prices-table .prices-group-row > th { padding: 5px 10px; background: var(--surface-2); color: var(--text); font-size: 11px; }
.prices-table .prices-name { width: 45%; }
.prices-name .tag { margin-left: 6px; }
.prices-extra { display: block; font-size: 10px; }
.prices-table .prices-crm { width: 110px; }
.prices-table input.price-input { width: 96px; padding: 4px 7px; min-height: 29px; font-size: 13px; }
.prices-table .prices-dns { width: 180px; font-variant-numeric: tabular-nums; }
.prices-dns > a { font-size: 13px; font-weight: 600; }
.prices-dns-age { display: block; font-size: 10px; line-height: 1.25; }
.prices-dns-diff { display: block; width: fit-content; max-width: 100%; margin: 3px 0;
  padding: 2px 5px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 5px; background: color-mix(in srgb, currentColor 5%, transparent);
  font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.prices-dns-diff-lower { color: var(--ok); }
.prices-dns-diff-higher { color: var(--danger); }
.prices-dns-diff-equal { color: var(--muted); }
.supplier-return-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border); align-items: center; }
.supplier-return-row:last-child { border-bottom: 0; }
.supplier-return-main { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 4px; }
.supplier-return-tags, .supplier-return-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .supplier-return-row { grid-template-columns: 1fr; }
  .supplier-return-actions .btn { min-height: 40px; }
}
.prices-table .prices-actions { width: 70px; white-space: nowrap; text-align: right; }
.prices-actions .btn { padding: 3px 6px; min-height: 28px; }
.prices-add { padding: 4px 10px; }
.prices-add .btn { min-height: 28px; font-size: 12px; padding: 4px 0; }
.stock-items .prices-item.stock-search-result { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; }
.prices-qty input.price-input { width: 92px; padding: 4px 7px; min-height: 30px; font-size: 13px; font-weight: 600; text-align: right; }
.stock-items.prices-flat :is(.stock-search-result) { padding-left: 14px; }
.stock-card-head .stock-edit { padding: 0 8px; min-height: 26px; font-size: 15px; }
@media (max-width: 720px) {
  .prices-sections { grid-template-columns: 1fr; }
  .prices-dns-note { order: 5; flex-basis: 100%; }
  .prices-table, .prices-table tbody { display: block; width: 100%; }
  .prices-table thead { display: none; }
  .prices-table .prices-group-row, .prices-table .prices-group-row th { display: block; width: 100%; }
  .prices-table .prices-item-row { display: grid; grid-template-columns: 105px minmax(0, 1fr) 65px; padding: 7px 10px; gap: 4px 7px; border-bottom: 1px solid var(--border); }
  .prices-table .prices-item-row > td { display: block; width: auto; padding: 0; border: 0; min-width: 0; }
  .prices-table .prices-item-row > .prices-name { grid-column: 1 / -1; overflow-wrap: anywhere; }
  .prices-crm::before, .prices-dns::before { content: attr(data-label); display: block; color: var(--muted); font-size: 10px; margin-bottom: 2px; }
  .prices-table .prices-actions { align-self: center; }
  .prices-item-row:last-child { border-bottom: 0; }
}

/* «занято N шт» — кнопка с разбором, где именно лежит позиция. */
.usage-tag { cursor: pointer; font: inherit; }
.tag.usage-tag:hover { color: var(--accent); border-color: var(--accent); }
.usage-plain {
  background: none; border: 0; padding: 0; font-size: 12px; color: var(--muted);
  border-bottom: 1px dashed var(--border);
}
.usage-plain:hover { color: var(--accent); border-bottom-color: var(--accent); }
.usage-list { display: flex; flex-direction: column; gap: 8px; }
.usage-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.usage-main { flex: 1; min-width: 0; }
.usage-qty { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Подсказка под полем «Итоговая стоимость». */
.order-total-hint { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-top: 4px; }
.linklike {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; border-bottom: 1px dashed var(--accent);
}

/* Просмотр фото из переписки во весь экран. */
.overlay.viewer { background: rgba(0, 0, 0, .82); padding: 24px; }
.viewer-img {
  /* Картинка — элемент flex-контейнера: без этого мобильные браузеры сжимают её по ширине,
     оставляя высоту, и фото растягивается. Размеры считаем сами, пропорции держит contain. */
  flex: 0 0 auto; width: auto; height: auto; object-fit: contain; align-self: center;
  max-width: min(94vw, 1400px); max-height: 86vh; border-radius: 10px; cursor: default;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.overlay.viewer { z-index: 1000; }
.viewer-close {
  /* Под вырезом и статус-баром телефона кнопку не нажать — отступаем на безопасную зону. */
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 18px; cursor: pointer; z-index: 2;
}
.viewer-close:hover { color: var(--accent); border-color: var(--accent); }
.viewer-open { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); color: #fff; opacity: .85; font-size: 13px; z-index: 2; }
.viewer-open:hover { opacity: 1; }
@media (max-width: 720px) {
  .overlay.viewer { padding: 12px; }
  .viewer-img { max-width: 96vw; max-height: 80vh; }
}

/* Предоплата — заметный самостоятельный блок: сумма и одна касса/получатель. */
.order-prepay-highlight {
  padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--ok) 48%, var(--border));
  border-radius: 10px; background: color-mix(in srgb, var(--ok) 8%, var(--surface-2));
  box-shadow: inset 3px 0 color-mix(in srgb, var(--ok) 72%, transparent);
}
.order-prepay-highlight > span { color: var(--ok); font-weight: 750; font-size: 13px; }
.order-prepay-highlight.filled {
  border-color: var(--border); background: transparent; box-shadow: none;
}
.order-prepay-highlight.filled > span { color: var(--muted); font-weight: 500; }
.order-prepay { display: flex; flex-wrap: wrap; gap: 6px; }
.order-prepay input { flex: 1 0 12ch; min-width: 12ch; width: 12ch; text-align: right; font-variant-numeric: tabular-nums; }
.order-prepay select { flex: 1 1 140px; min-width: 0; }
.order-issued-payments {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.order-issued-payment {
  min-width: min(260px, 100%); display: grid; grid-template-columns: auto auto; align-items: baseline;
  gap: 3px 10px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface);
}
.order-issued-payment .small { grid-column: 1 / -1; color: var(--muted); }
.order-issued-edit-items { display: grid; gap: 8px; margin-top: 14px; }
.order-edit-issued-note { margin-bottom: 10px; padding: 10px 12px; color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* Быстрые ответы. */
.qr { display: grid; gap: 10px; }
.qr-list { display: grid; gap: 6px; max-height: 55vh; overflow: auto; }
.qr-item {
  display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-2); cursor: pointer;
}
.qr-item:hover { border-color: var(--accent); }
.qr-item.editing { cursor: default; }
.qr-item.editing:hover { border-color: var(--border); }
.qr-main { flex: 1; min-width: 0; }
.qr-title { font-weight: 600; font-size: 13px; }
.qr-text { font-size: 12px; color: var(--muted); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qr-actions { display: flex; gap: 2px; flex: none; }

/* Закупка. */
.purchase-table .purchase-row { cursor: pointer; }
.purchase-table .purchase-row.need td:first-child { font-weight: 600; }
.purchase-table .purchase-buy { font-weight: 700; color: var(--ok); }
.purchase-table .purchase-row.need .purchase-buy { color: var(--warn); font-size: 14px; }
.purchase-table .muted { color: var(--muted); }
.purchase-details td { background: var(--surface-2); }
.purchase-rules { display: grid; gap: 6px; max-height: 62vh; overflow: auto; }
.purchase-rule { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.purchase-rule.off { opacity: .55; }
.purchase-rule-main { flex: 1; min-width: 0; }
.pickup-list { display: grid; gap: 6px; max-height: 42vh; overflow: auto; margin-bottom: 12px; }
.pickup-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface-2); cursor: pointer; }
.pickup-item:has(input:checked) { border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
  background: color-mix(in srgb, var(--ok) 8%, var(--surface-2)); }
.pickup-item input { width: 18px; height: 18px; flex: none; }
.pickup-item-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pickup-preview { min-height: 150px; white-space: pre-wrap; font-family: inherit; }

/* Голосовые сообщения. */
.voice { display: grid; gap: 4px; min-width: 240px; }
.msg-voice { width: 260px; max-width: 100%; height: 36px; }
@media (max-width: 720px) { .voice { min-width: 0; } .msg-voice { width: 58vw; } }

/* Закупка: в пути. */
.incoming-lines { display: grid; gap: 6px; margin-bottom: 8px; }
.incoming-line { display: grid; grid-template-columns: minmax(0, 1fr) 170px 70px 90px auto; gap: 6px; align-items: center; }
.incoming-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border); }
.incoming-item.overdue { background: rgba(220, 133, 0, .10); }
.incoming-item.overdue .small { color: var(--warn); }
.incoming-main { flex: 1; min-width: 0; }
.incoming-count { font-weight: 600; white-space: nowrap; }
.purchase-table .purchase-transit { color: var(--accent); }
.purchase-needed { white-space: nowrap; }
.purchase-needed > span { display: block; }
.purchase-needed > .small { font-size: 10px; font-weight: 400; }
.purchase-table .purchase-buy { white-space: nowrap; }
.purchase-order { padding: 2px 8px; margin-left: 6px; font-size: 11px; }
@media (max-width: 720px) {
  .incoming-line { grid-template-columns: 1fr 60px 80px auto; }
  .incoming-line select { grid-column: 1 / -1; grid-row: 2; }
  .incoming-item { flex-wrap: wrap; }
}

/* Админка → 1С: изменения склада. */
.stock-change-group { border-top: 1px solid var(--border); padding: 8px 14px; }
.stock-change-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.stock-change-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; flex-wrap: wrap; font-size: 13px; }
.stock-change-name { flex: 1; min-width: 180px; }
.stock-change-plus { color: var(--ok); font-weight: 700; white-space: nowrap; }
.stock-change-minus { color: var(--warn); font-weight: 700; white-space: nowrap; }

/* Выдача ПК и предоплаты. */
.issue-sums { display: grid; gap: 6px; margin-bottom: 12px; }
.issue-sums > div { display: flex; justify-content: space-between; gap: 12px; }
.prepays .prepays-total td { font-weight: 700; border-top: 1px solid var(--border); }

/* Правило закупки: выбор групп склада кликом. */
.group-pick-box { margin: -4px 0 12px; display: grid; gap: 6px; }
.group-pick-search { max-width: 260px; }
.group-pick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow: auto; padding: 2px; }
.group-pick .chip { display: inline-flex; align-items: center; gap: 6px; }
.group-pick .chip-count { font-size: 11px; opacity: .7; }

/* Закупка: план компьютеров. */
.purchase-plan { padding: 10px 14px; margin-bottom: 12px; display: grid; gap: 4px; }
.purchase-plan-check { font-size: 13px; color: var(--warn); }

/* Выдача ПК: детали не со склада. */
.issue-loose { border: 1px solid var(--warn); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0;
  display: grid; gap: 6px; color: var(--text); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.issue-loose > strong { color: var(--warn); }

/* Закупка: «Докупить» — первым и крупно. */
.purchase-table td.purchase-buy { width: 130px; }
.purchase-buy-qty { font-size: 17px; font-weight: 700; color: var(--warn); }
.purchase-ok { color: var(--ok); }
.purchase-table tbody tr.purchase-row:not(.need) td { color: var(--muted); }

/* Склад: пометки «по гарантии» и «ждёт возврата». */
.tag.mark-warranty { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.tag.mark-return { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* Optional Witcher-inspired theme. Standard light/dark rules above are untouched. */
:root[data-theme="witcher"] {
  color-scheme: dark;
  --bg: #111514; --surface: #1b201e; --surface-2: #242b27;
  --border: #41483e; --text: #f0eee3; --muted: #b8bcae;
  --accent: #d6b775; --accent-soft: #343021;
  --danger: #ff9990; --ok: #9cccaa; --warn: #ebc475;
  --shadow: 0 8px 24px #00000020; --radius: 6px;
  --wine: #643339; --on-accent: #171b17;
}
[data-theme="witcher"] body { font-size: 15px; line-height: 1.32; }
[data-theme="witcher"] .shell { grid-template-columns: 228px minmax(0, 1fr); height: 100dvh; }
[data-theme="witcher"] .sidebar { padding: 12px 10px 10px; background: var(--bg); overflow-y: auto; }
[data-theme="witcher"] .logo { font-size: 16px; padding-bottom: 12px; letter-spacing: .04em; }
[data-theme="witcher"] .nav-item { min-height: 34px; border-radius: 4px; padding: 5px 10px; }
[data-theme="witcher"] .nav-item.active { box-shadow: inset 3px 0 var(--accent); }
[data-theme="witcher"] .page { padding: 14px 18px; }
[data-theme="witcher"] .page-head { padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
[data-theme="witcher"] .page-head h1 { font: 600 22px/1.15 Georgia, 'Times New Roman', serif; color: var(--text); }
[data-theme="witcher"] .btn { min-height: 32px; padding: 5px 11px; border-radius: 4px; font-weight: 600; box-shadow: none; }
[data-theme="witcher"] .btn.primary, [data-theme="witcher"] .svc-status .seg.active { color: var(--on-accent); }
[data-theme="witcher"] :is(button,a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-theme="witcher"] :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { min-height: 32px; border-radius: 4px; padding: 5px 9px; }
[data-theme="witcher"] :is(input[type=checkbox],input[type=radio]) { accent-color: var(--accent); width: 17px; height: 17px; }
[data-theme="witcher"] :is(.small,label.field span,.tag,.tile .label,.order-table th) { font-size: 12.5px; }
[data-theme="witcher"] .segmented { padding: 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); }
[data-theme="witcher"] .segmented .seg { min-height: 30px; padding: 4px 12px; font-size: 13px; border-radius: 3px; }
[data-theme="witcher"] .segmented .seg.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
[data-theme="witcher"] .order-city-head { margin-bottom: 14px; gap: 12px; }
[data-theme="witcher"] .order-city-title { min-height: 32px; font-size: 15px; letter-spacing: .06em; color: var(--accent); }
[data-theme="witcher"] .order-list { gap: 8px; }
[data-theme="witcher"] .order-card { border-left: 3px solid var(--wine); }
[data-theme="witcher"] .order-head { padding: 8px 12px; gap: 8px; min-height: 44px; }
[data-theme="witcher"] .order-number { color: var(--accent); }
[data-theme="witcher"] .order-total { font-size: 17px; margin-left: auto; }
[data-theme="witcher"] .order-head .tag { white-space: normal; overflow-wrap: anywhere; }
[data-theme="witcher"] .order-body { padding: 4px 12px 10px; }
[data-theme="witcher"] .order-fields { gap: 2px 12px; margin: 8px 0; }
[data-theme="witcher"] label.field span { margin-bottom: 2px; }
[data-theme="witcher"] .order-table { font-size: 14px; }
[data-theme="witcher"] .order-table :is(input,select,textarea.order-item-text) { font-size: 14px; }
[data-theme="witcher"] .order-table td { padding-bottom: 2px; }
[data-theme="witcher"] .order-table :is(input:not([type=checkbox]),select,textarea.order-item-text) { min-height: 26px; padding: 3px 7px; }
[data-theme="witcher"] .oi-stock-btn { color: var(--accent); min-height: 0; font-size: 13px; }
[data-theme="witcher"] .order-foot { gap: 10px; padding-top: 16px; }
[data-theme="witcher"] .modal-head h2 { font-size: 17px; }
[data-theme="witcher"] .calc-summary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
[data-theme="witcher"] .stock-card-head { flex-wrap: wrap; gap: 6px; font-size: 14px; padding: 8px 12px; }
@media (max-width: 1100px) and (min-width: 761px) {
  [data-theme="witcher"] .shell { grid-template-columns: 200px minmax(0, 1fr); }
  [data-theme="witcher"] .page { padding: 12px 14px; }
  [data-theme="witcher"] .order-head { flex-wrap: wrap; }
}
@container order-parts (max-width: 850px) {
  [data-theme="witcher"] .order-table tr.order-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'name name' 'qty price' 'cost avail' 'date date' 'check warranty' 'del del';
    gap: 6px 10px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 5px;
  }
  [data-theme="witcher"] .order-table td { padding: 0; }
  [data-theme="witcher"] .order-table td[data-label]::before { font-size: 12px; margin-bottom: 2px; }
  [data-theme="witcher"] .order-table :is(input,select,textarea.order-item-text) { font-size: 16px; min-width: 0; }
  [data-theme="witcher"] .order-table input[type=checkbox] { width: 24px; min-height: 24px; }
  [data-theme="witcher"] .oi-check { display: flex; align-items: center; gap: 6px; min-height: 30px; }
  [data-theme="witcher"] .oi-check::after { content: 'Принято'; font-size: 13px; color: var(--muted); }
  [data-theme="witcher"] .oi-warranty { min-height: 30px; }
  [data-theme="witcher"] .oi-del { justify-self: end; }
  [data-theme="witcher"] .oi-del button::after { content: ' Удалить позицию'; font-size: 13px; }
}
@media (max-width: 760px) {
  [data-theme="witcher"] .shell { grid-template-columns: minmax(0, 1fr); }
  [data-theme="witcher"] .sidebar { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); overflow: visible; }
  [data-theme="witcher"] #nav .nav-item { min-height: 48px; padding: 4px 2px; font-size: 11px; }
  [data-theme="witcher"] #nav .nav-item.active { box-shadow: inset 0 2px var(--accent); }
  [data-theme="witcher"] .page { padding: 10px 10px; }
  [data-theme="witcher"] .page-head { gap: 8px; padding-bottom: 6px; margin-bottom: 10px; }
  [data-theme="witcher"] .page-head h1 { font-size: 20px; }
  [data-theme="witcher"] .orders-page .page-head > .spacer { display: none; }
  [data-theme="witcher"] .orders-page .page-head .segmented { width: 100%; }
  [data-theme="witcher"] .orders-page .page-head .seg { flex: 1; padding: 8px 6px; }
  [data-theme="witcher"] .order-city-head { flex-wrap: wrap; }
  [data-theme="witcher"] .order-city-head > .btn { width: 100%; }
  [data-theme="witcher"] .order-head { padding: 7px 10px; gap: 8px; }
  [data-theme="witcher"] .order-customer { flex-basis: calc(100% - 32px); order: 1; white-space: normal; overflow-wrap: anywhere; }
  [data-theme="witcher"] .order-head .tag { order: 2; }
  [data-theme="witcher"] .order-head > .spacer { display: none; }
  [data-theme="witcher"] .order-body { padding: 4px 10px 10px; }
  [data-theme="witcher"] .order-fields { grid-template-columns: minmax(0, 1fr); }
  [data-theme="witcher"] .order-fields > * { min-width: 0; }
  [data-theme="witcher"] .order-prepay { flex-wrap: wrap; }
  [data-theme="witcher"] .order-foot .btn { flex-basis: 100%; white-space: normal; }
  [data-theme="witcher"] .modal-body { padding: 10px 12px; }
  [data-theme="witcher"] .more-item { min-height: 40px; }
}

/* Whole-CRM readability: these rules belong exclusively to the optional theme. */
[data-theme="witcher"] { scrollbar-color: var(--border) var(--bg); }
[data-theme="witcher"] :is(.card,.modal,.page,.grid-2 > *,.calc-layout > *,.calc-parts > *,label.field) { min-width: 0; }
[data-theme="witcher"] :is(button,a,input,select,textarea) { touch-action: manipulation; }
[data-theme="witcher"] :is(input,select,textarea) { max-width: 100%; }
[data-theme="witcher"] :is(.btn,.tag,.stock-item-name,.pc-part,.pc-title,.svc-model,.more-item,.modal-head h2,.stock-warning-row) { overflow-wrap: anywhere; }
[data-theme="witcher"] .btn:not(.chat-back) { display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
[data-theme="witcher"] :is(.badge,.msg.out .bubble) { color: var(--on-accent); }
[data-theme="witcher"] .msg.out .bubble { background: var(--accent); }
[data-theme="witcher"] .msg.out .quote { background: var(--accent-soft); color: var(--text); border-left-color: var(--wine); }
[data-theme="witcher"] .chat-layout { grid-template-columns: var(--chat-list-width, 430px) minmax(0, 1fr); }
[data-theme="witcher"] .chat-item { padding: 16px; gap: 6px; }
[data-theme="witcher"] .chat-item .preview { font-size: 14px; line-height: 1.5; }
[data-theme="witcher"] :is(.chat-item .time,.chat-item .item-title,.msg .meta,.day-sep,.quote-author,.city-tag) { font-size: 12px; }
[data-theme="witcher"] .chat-item .name { font-size: 16px; }
[data-theme="witcher"] .chat-head .title { font-size: 17px; }
[data-theme="witcher"] .chat-head > div { min-width: 0; overflow-wrap: anywhere; }
[data-theme="witcher"] .bubble { padding: 12px 14px; border-radius: 6px; font-size: 16px; }
[data-theme="witcher"] .msg { max-width: 82%; }
[data-theme="witcher"] .msg-reply { width: 30px; height: 30px; }
[data-theme="witcher"] :is(.quote,.reply-bar,.qr-text) { font-size: 14px; }
[data-theme="witcher"] .ctx-item { min-height: 32px; }
[data-theme="witcher"] .composer textarea { min-width: 0; }
/* Кнопка «Отправить» не должна переноситься по слогам, когда места мало. */
[data-theme="witcher"] .composer > .btn { white-space: nowrap; flex: none; }
[data-theme="witcher"] .chat-search .segmented { flex-wrap: wrap; }
[data-theme="witcher"] .chat-search .seg { padding: 6px; }
[data-theme="witcher"] .chat-search .seg-label { white-space: normal; }
[data-theme="witcher"] .board { --deal-gap: 10px; height: auto; min-height: 240px; }
[data-theme="witcher"] .column { width: auto; border-top: 2px solid var(--accent); }
[data-theme="witcher"] .column-head { padding: 16px; font-size: 15px; }
[data-theme="witcher"] .column-body { padding: 10px; max-height: calc(100dvh - 220px); }
[data-theme="witcher"] .deal { padding: 12px; border-radius: 4px; }
[data-theme="witcher"] .deal .top { flex-wrap: wrap; }
[data-theme="witcher"] .deal .who { font-size: 15px; }
[data-theme="witcher"] .deal .last { font-size: 14px; line-height: 1.5; }
[data-theme="witcher"] :is(.deal .when,.deal .sub) { font-size: 12px; }
[data-theme="witcher"] .city-tag { white-space: normal; }
[data-theme="witcher"] .tiles { grid-template-columns: repeat(auto-fit,minmax(min(190px,100%),1fr)); gap: 16px; }
[data-theme="witcher"] .tile { padding: 20px; border-top: 2px solid var(--wine); }
[data-theme="witcher"] .tile .value { font-size: 28px; overflow-wrap: anywhere; }
[data-theme="witcher"] .section h2 { font-size: 15px; color: var(--accent); margin-bottom: 14px; }
[data-theme="witcher"] .bar-row { min-height: 38px; }
[data-theme="witcher"] table.grid th { font-size: 12px; }
[data-theme="witcher"] table.grid td { font-size: 14px; padding: 14px 12px; vertical-align: top; }
[data-theme="witcher"] .stock-row { padding: 16px; min-height: 64px; }
[data-theme="witcher"] .stock-item { padding: 10px 12px; font-size: 14px; }
[data-theme="witcher"] .stock-grid { gap: 16px; }
[data-theme="witcher"] .stock-pick-item { min-height: 52px; }
[data-theme="witcher"] :is(.pc-card,.svc-card,.service-card,.imp-card,.imp-composer) { padding: 10px 12px; gap: 6px; }
[data-theme="witcher"] :is(.pc-title,.svc-number,.imp-number) { font-size: 18px; }
[data-theme="witcher"] :is(.pc-price,.svc-number,.imp-number) { color: var(--accent); }
[data-theme="witcher"] .pc-parts { font-size: 15px; gap: 12px; }
[data-theme="witcher"] .pc-actions { gap: 10px; }
[data-theme="witcher"] :is(.svc-card > .small,.service-name,.imp-comment-text,.imp-comment-author,.qr-title) { font-size: 14px; }
[data-theme="witcher"] .svc-status { flex-wrap: wrap; }
[data-theme="witcher"] .svc-status .segmented { background: none; }
[data-theme="witcher"] .svc-status .seg.active { background: var(--accent-soft); color: var(--accent); }
[data-theme="witcher"] .svc-model { white-space: normal; }
[data-theme="witcher"] :is(.svc-check,.perm,.chip) { min-height: 44px; font-size: 14px; }
[data-theme="witcher"] .perm .t { font-size: 15px; }
[data-theme="witcher"] .perm .h { font-size: 13px; }
[data-theme="witcher"] .calc-summary :is(.calc-summary-title,.calc-total span:last-child) { color: var(--accent); }
[data-theme="witcher"] .calc-summary .muted { color: var(--muted); }
[data-theme="witcher"] .calc-line { font-size: 14px; grid-template-columns: 100px minmax(0,1fr) auto; }
[data-theme="witcher"] .calc-line > * { min-width: 0; overflow-wrap: anywhere; }
[data-theme="witcher"] .calc-platform { border-radius: 4px; padding: 14px; }
[data-theme="witcher"] .calc-platform-title { font-size: 17px; }
[data-theme="witcher"] .calc-thumbs { flex-wrap: wrap; gap: 8px; }
[data-theme="witcher"] .calc-thumbs img { width: 56px; height: 56px; }
[data-theme="witcher"] .calc-actions { gap: 10px; }
[data-theme="witcher"] .admin-tabs { flex-wrap: wrap; }
[data-theme="witcher"] .purchase-plan { padding: 18px; margin-bottom: 16px; display: grid; gap: 10px; border-left: 3px solid var(--accent); }
[data-theme="witcher"] .purchase-plan-check { color: var(--warn); }
[data-theme="witcher"] .purchase-rule { padding: 12px; }
[data-theme="witcher"] .incoming-item { padding: 14px; }
[data-theme="witcher"] .login-wrap { min-height: 100dvh; height: auto; padding: 24px 16px; }
[data-theme="witcher"] .login-box { width: 420px; max-width: 100%; padding: 32px; border-top: 3px solid var(--accent); }
[data-theme="witcher"] .login-box h1 { font: 600 30px/1.3 Georgia,serif; }
[data-theme="witcher"] .login-box p { font-size: 15px; margin-top: 10px; }
.login-theme { width: 100%; margin-top: 8px; }
@media (min-width: 761px) and (max-width: 1150px) {
  [data-theme="witcher"] .calc-layout { grid-template-columns: minmax(0,1fr); }
  [data-theme="witcher"] .calc-right { position: static; }
  [data-theme="witcher"] .chat-layout { grid-template-columns: var(--chat-list-width, 300px) minmax(0,1fr); }
  [data-theme="witcher"] .composer { flex-wrap: wrap; }
  [data-theme="witcher"] .composer textarea { flex-basis: 100%; order: -1; }
}
@media (max-width: 760px) {
  [data-theme="witcher"] :is(.segmented,.admin-tabs) { flex-wrap: wrap; max-width: 100%; }
  [data-theme="witcher"] .segmented.fit .seg { flex: 1 1 auto; }
  [data-theme="witcher"] .seg-label { white-space: normal; overflow: visible; text-overflow: clip; }
  [data-theme="witcher"] :is(.page-head,.stock-toolbar) > :is(select,.btn) { max-width: 100%; }
  [data-theme="witcher"] .stock-toolbar > input { flex-basis: 100%; min-width: 0; }
  [data-theme="witcher"] .stock-toolbar > .btn.primary { width: 100%; }
  [data-theme="witcher"] .chat-layout { grid-template-columns: minmax(0,1fr); }
  [data-theme="witcher"] .chat-search { padding: 10px; gap: 8px; }
  [data-theme="witcher"] .chat-head { padding: 8px 10px; gap: 8px; max-height: 40dvh; overflow: auto; }
  [data-theme="witcher"] .chat-head > div:not(.spacer) { flex: 1; }
  [data-theme="witcher"] .chat-head select { font-size: 16px; max-width: 100%; }
  [data-theme="witcher"] .chat-head .btn { font-size: 14px; min-height: 44px; }
  [data-theme="witcher"] .chat-head .city-tag { display: inline-flex; }
  [data-theme="witcher"] .messages { padding: 12px 10px; gap: 14px; }
  [data-theme="witcher"] .msg { max-width: 96%; }
  [data-theme="witcher"] .msg-reply { opacity: 1; width: 44px; height: 44px; }
  [data-theme="witcher"] .bubble { padding: 10px; }
  [data-theme="witcher"] .composer { display: grid; grid-template-columns: 44px minmax(0,1fr); padding: 8px 10px; align-items: end; gap: 8px; }
  [data-theme="witcher"] .composer textarea { grid-column: 1 / -1; grid-row: 1; font-size: 16px; max-height: 24dvh; }
  [data-theme="witcher"] .composer-tools { grid-column: 1; grid-row: 2; }
  [data-theme="witcher"] .composer-tools .btn { width: 44px; min-height: 36px; }
  [data-theme="witcher"] .composer select { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 100%; }
  [data-theme="witcher"] .composer > .btn { padding: 8px; }
  [data-theme="witcher"] .composer > .btn.primary { grid-column: 2; grid-row: 2; justify-self: end; width: 100%; max-width: 170px; }
  [data-theme="witcher"] .column { width: min(310px,84vw); }
  [data-theme="witcher"] .column-body { max-height: calc(100dvh - 290px); }
  [data-theme="witcher"] .tiles { grid-template-columns: minmax(0,1fr); gap: 10px; }
  [data-theme="witcher"] .tile { padding: 16px; }
  [data-theme="witcher"] .bar-row { grid-template-columns: minmax(0,1fr) 44px; gap: 4px 10px; padding: 8px 0; }
  [data-theme="witcher"] .bar-row > :first-child { grid-column: 1 / -1; }
  [data-theme="witcher"] .bar-row .bar-track { min-width: 0; }
  [data-theme="witcher"] :is(.pc-card,.svc-card,.service-card,.imp-card,.imp-composer) { padding: 16px 12px; }
  [data-theme="witcher"] .pc-card-head { flex-wrap: wrap; }
  [data-theme="witcher"] .pc-price { width: 100%; text-align: left; font-size: 22px; }
  [data-theme="witcher"] .pc-part { grid-template-columns: minmax(0,1fr); gap: 2px; }
  [data-theme="witcher"] .pc-actions .btn { flex: 1 1 auto; }
  [data-theme="witcher"] .stock-item { flex-wrap: wrap; gap: 8px; }
  [data-theme="witcher"] .stock-item-name { flex-basis: calc(100% - 68px); overflow-wrap: anywhere; }
  [data-theme="witcher"] :is(.stock-warning-row,.service-head) { flex-wrap: wrap; }
  [data-theme="witcher"] .svc-work-row { grid-template-columns: minmax(0,1fr) 44px; }
  [data-theme="witcher"] .svc-work-row > :first-child { grid-column: 1 / -1; }
  [data-theme="witcher"] .svc-part-expense-row { grid-template-columns: minmax(0,1fr) 72px auto; }
  [data-theme="witcher"] .svc-part-expense-row > :first-child { grid-column: 1 / -1; }
  [data-theme="witcher"] .svc-work-price { min-width: 0; }
  [data-theme="witcher"] .svc-actions .btn { flex: 1 1 100%; }
  [data-theme="witcher"] .calc-line { grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; padding: 8px 0; }
  [data-theme="witcher"] .calc-line > :first-child { grid-column: 1 / -1; }
  [data-theme="witcher"] .calc-total { flex-wrap: wrap; gap: 8px; }
  [data-theme="witcher"] .calc-platform-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  [data-theme="witcher"] .calc-platform { padding: 12px 8px; }
  [data-theme="witcher"] .modal-head { gap: 8px; }
  [data-theme="witcher"] .modal-head .btn { flex-shrink: 0; min-width: 44px; }
  [data-theme="witcher"] .modal-foot .btn { flex: 1 1 auto; }
  [data-theme="witcher"] .qr-item { flex-wrap: wrap; }
  [data-theme="witcher"] .qr-main { flex-basis: 100%; }
  [data-theme="witcher"] .qr-actions { margin-left: auto; }
  [data-theme="witcher"] .imp-foot input { flex-basis: 100%; min-width: 0; }
  [data-theme="witcher"] .imp-status { width: 100%; }
  [data-theme="witcher"] .imp-thumb-del { width: 32px; height: 32px; }
  [data-theme="witcher"] .admin-tabs { width: 100%; }
  [data-theme="witcher"] .admin-tabs .btn { flex: 1 1 auto; }
  [data-theme="witcher"] .purchase-rule { flex-wrap: wrap; }
  [data-theme="witcher"] .purchase-rule-main { flex-basis: 100%; }
  [data-theme="witcher"] .incoming-line { grid-template-columns: minmax(0,1fr) 60px 76px 44px; }
  [data-theme="witcher"] .login-wrap { max-height: 100dvh; overflow-y: auto; }
  [data-theme="witcher"] .login-box { padding: 24px; }
}
@media (max-width:760px) {
  [data-theme="witcher"] .chat-head > div:not(.spacer) { flex: 1 1 calc(100% - 60px); }
  [data-theme="witcher"] .chat-head > .spacer { display: none; }
  [data-theme="witcher"] .chat-head > select { flex: 1 1 100%; width: 100%; }
  [data-theme="witcher"] .chat-head > .btn:not(.chat-back) { flex: 1 1 auto; }
  [data-theme="witcher"] .chat-head .chat-back { width: 44px; flex: none; }
}
@media (max-width:760px) {
  [data-theme="witcher"] .incoming-main { flex: 1 1 100%; }
  [data-theme="witcher"] .incoming-count { margin-right: auto; }
  [data-theme="witcher"] .admin-toolbar { flex-wrap: wrap; gap: 12px; }
  [data-theme="witcher"] .admin-toolbar > div { flex-basis: 100% !important; }
  [data-theme="witcher"] .admin-toolbar > .btn { width: 100%; }
}
[data-theme="witcher"] .daily-chart { overflow-x: auto; max-width: 100%; }
[data-theme="witcher"] .daily-chart > div { flex-shrink: 0 !important; }
@media(max-width:760px) {
  [data-theme="witcher"] .imp-thumb-del { width:44px; height:44px; }
}

[data-theme="witcher"] .segmented.fit { flex-wrap: wrap; }
/* Tables keep their native layout; each screen owns its mobile presentation. */
[data-theme="witcher"] ::placeholder { color:var(--muted); opacity:.8; }

/* Светлая или тёмная тема: маленькая кнопка-солнце рядом с выбором темы. */
.theme-row { display: flex; align-items: center; gap: 6px; }
.theme-row > .nav-item, .theme-row > .more-item { flex: 1; min-width: 0; }
.scheme-toggle {
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.scheme-toggle:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }

/* Закупка: заказ доехал до пункта выдачи. */
.incoming-item.at-point { border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.tag.tag-at-point { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }

/* Заказ: история изменений. */
.order-history { margin-top: 10px; }
.order-history-list { margin-top: 6px; display: grid; gap: 4px; }
.order-history-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px;
  border-top: 1px solid var(--border); padding-top: 4px; }
.order-history-what { flex: 1; min-width: 140px; }

/* Общий поиск сверху. */
.topbar { border-bottom: 1px solid var(--border); background: var(--surface); padding: 8px 24px; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.search-box { position: relative; max-width: 560px; }
.search-input { width: 100%; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.search-group { padding: 6px 0; border-top: 1px solid var(--border); }
.search-group:first-child { border-top: none; }
.search-group-title { font-size: 12px; color: var(--muted); padding: 2px 12px 4px; }
.search-hit { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 7px 12px;
  border: none; background: none; color: var(--text); cursor: pointer; }
.search-hit:hover { background: var(--surface-2); }
.search-hit-title { font-size: 14px; }
.search-empty { padding: 12px; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .topbar { padding: 6px 10px; }
}

/* Доработки: перетаскивание скриншота на форму. */
.imp-composer.imp-drop { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* Закупка: разделы по категориям. */
.purchase-group { margin-bottom: 10px; }
.purchase-group-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px;
  background: none; border: none; color: var(--text); cursor: pointer; text-align: left; }
.purchase-group-head:hover { background: var(--surface-2); border-radius: var(--radius); }

/* Закупка: «В пути» по категориям. */
.incoming-group + .incoming-group { border-top: 1px solid var(--border); }
.incoming-group .purchase-group-head { padding: 6px 14px; }

/* Касса: счета и движение денег. */
.cash-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 7px; margin-bottom: 9px; }
.cash-group { padding: 7px 9px; display: grid; gap: 2px; align-content: start; }
.cash-group-head { display: flex; align-items: baseline; gap: 8px; }
.cash-total, .cash-account > strong { white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cash-account > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.cash-group-head .cash-total { margin-left: auto; font-size: 15px; }
.cash-account { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--text); cursor: pointer; text-align: left; }
.cash-account:hover { background: var(--surface-2); }
.cash-account.active { border-color: var(--accent); color: var(--accent); }
.cash-collect { padding: 3px 8px; margin-left: 4px; font-size: 11px; color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 38%, var(--border));
  background: color-mix(in srgb, var(--ok) 7%, transparent); }
.cash-collect:hover { border-color: color-mix(in srgb, var(--ok) 65%, var(--border));
  background: color-mix(in srgb, var(--ok) 12%, transparent); }
.cash-edit { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 2px;
  font-size: 13px; opacity: .45; }
.cash-account:hover .cash-edit, .cash-edit:hover { opacity: 1; color: var(--accent); }
.cash-in { color: var(--ok); }
.cash-out { color: var(--warn); }
.cash-quick-forms { display: grid; gap: 8px; margin-top: 15px; padding: 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cash-quick-head { display: flex; align-items: center; min-height: 20px; }
.cash-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cash-quick-column { min-width: 0; padding: 7px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); }
.cash-quick-column.in { border-color: color-mix(in srgb, var(--ok) 24%, var(--border)); }
.cash-quick-column.out { border-color: color-mix(in srgb, var(--danger) 24%, var(--border)); }
.cash-quick-title { margin-bottom: 6px; font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.cash-quick-column.in .cash-quick-title { color: var(--ok); }
.cash-quick-column.out .cash-quick-title { color: var(--danger); }
.cash-quick-list { display: flex; align-items: center; align-content: flex-start; flex-wrap: wrap; gap: 5px; min-height: 28px; }
.cash-quick-chip-wrap { display: inline-flex; align-items: center; gap: 1px; max-width: 100%; }
.cash-quick-chip, .cash-quick-delete { min-height: 28px; border: 1px solid; cursor: pointer; transition: .15s ease; }
.cash-quick-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 160px; padding: 4px 8px;
  border-radius: 8px 4px 4px 8px; font-size: 12.5px; font-weight: 650; text-align: left; }
.cash-quick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cash-quick-sign { font-size: 15px; line-height: 1; font-weight: 800; }
.cash-quick-chip.in { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, var(--border));
  background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.cash-quick-chip.out { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.cash-quick-chip.in:hover { background: color-mix(in srgb, var(--ok) 17%, var(--surface)); }
.cash-quick-chip.out:hover { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); }
.cash-quick-delete { width: 23px; padding: 3px; border-radius: 4px 8px 8px 4px; font-size: 15px; line-height: 1;
  background: transparent; opacity: .55; }
.cash-quick-delete.in { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 28%, var(--border)); }
.cash-quick-delete.out { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.cash-quick-delete:hover { opacity: 1; background: var(--surface-2); }
.cash-quick-foot { display: flex; justify-content: center; padding-top: 2px; border-top: 1px solid var(--border); }
.cash-quick-create { padding: 5px 9px; font-size: 12px; }
.cash-journal { --cash-confirm-color: var(--ok); border-collapse: separate !important; border-spacing: 0 5px; }
.cash-journal th { border-bottom: 0; }
.cash-journal td { border-top: 1px solid transparent; border-bottom: 1px solid var(--border); transition: .18s ease; }
.cash-journal td:first-child { border-left: 1px solid transparent; border-radius: 11px 0 0 11px; }
.cash-journal td:last-child { border-right: 1px solid transparent; border-radius: 0 11px 11px 0; }
.cash-journal .cash-confirmed td {
  color: color-mix(in srgb, var(--text) 94%, var(--cash-confirm-color));
  background: color-mix(in srgb, var(--cash-confirm-color) 8%, var(--surface));
  border-top-color: color-mix(in srgb, var(--cash-confirm-color) 30%, transparent);
  border-bottom-color: color-mix(in srgb, var(--cash-confirm-color) 30%, transparent);
}
.cash-journal .cash-confirmed td:first-child { border-left-color: color-mix(in srgb, var(--cash-confirm-color) 30%, transparent); }
.cash-journal .cash-confirmed td:last-child { border-right-color: color-mix(in srgb, var(--cash-confirm-color) 30%, transparent); }
.cash-journal .cash-confirmed:hover td { background: color-mix(in srgb, var(--cash-confirm-color) 12%, var(--surface)); }
.cash-date-cell { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.cash-who { font-size: inherit; white-space: nowrap; }
.cash-confirm {
  appearance: none; width: 22px; height: 22px; margin: 0; flex: none; display: inline-grid; place-content: center;
  border: 1.5px solid color-mix(in srgb, var(--cash-confirm-color, var(--ok)) 42%, var(--muted)); border-radius: 50%;
  background: color-mix(in srgb, var(--cash-confirm-color, var(--ok)) 4%, var(--surface)); cursor: pointer; transition: .18s ease;
}
.cash-confirm::before {
  content: ''; width: 9px; height: 5px; border-left: 2px solid #fff8e9; border-bottom: 2px solid #fff8e9;
  transform: rotate(-45deg) scale(0); transform-origin: center; transition: transform .16s ease;
}
.cash-confirm:hover { border-color: var(--cash-confirm-color, var(--ok)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cash-confirm-color, var(--ok)) 9%, transparent); }
.cash-confirm:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cash-confirm-color, var(--ok)) 16%, transparent); }
.cash-confirm:checked { background: color-mix(in srgb, var(--cash-confirm-color, var(--ok)) 72%, #064e3b); border-color: color-mix(in srgb, var(--cash-confirm-color, var(--ok)) 72%, var(--muted)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cash-confirm-color, var(--ok)) 8%, transparent); }
.cash-confirm:checked::before { transform: rotate(-45deg) scale(1); }
.cash-confirm:disabled { cursor: default; opacity: .72; }
.cash-journal-card { overflow: auto; }

@media (max-width: 760px) {
  .cash-journal-card { padding: 0; overflow: visible; border: 0; background: transparent; }
  table.cash-journal { display: block; width: 100%; background: transparent; border-spacing: 0; }
  .cash-journal thead { display: none; }
  .cash-journal tbody { display: grid; gap: 8px; }
  .cash-journal tbody > tr, [data-theme="witcher"] table.cash-journal tbody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date amount" "kind kind" "category category" "note note" "who actions";
    column-gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px;
    background: var(--surface); box-shadow: 0 2px 8px color-mix(in srgb, #000 10%, transparent);
  }
  .cash-journal tbody > tr.cash-confirmed {
    border-color: color-mix(in srgb, var(--cash-confirm-color) 30%, var(--border));
    background: color-mix(in srgb, var(--cash-confirm-color) 7%, var(--surface));
  }
  table.cash-journal td, .cash-journal .cash-confirmed td {
    display: block; min-width: 0; padding: 3px 0; border: 0; border-radius: 0;
    background: transparent; white-space: normal; overflow-wrap: anywhere;
  }
  [data-theme="witcher"] table.cash-journal tbody { display: grid; }
  [data-theme="witcher"] table.cash-journal td { padding: 3px 0; }
  .cash-journal .cash-confirmed:hover td, table.cash-journal tr:hover td { background: transparent; }
  .cash-cell-date { grid-area: date; align-self: center; font-weight: 600; }
  .cash-cell-amount { grid-area: amount; align-self: center; font-size: 16px; font-weight: 750; white-space: nowrap !important; }
  .cash-cell-kind { grid-area: kind; display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px; }
  .cash-cell-category { grid-area: category; }
  .cash-cell-category:empty, .cash-cell-note:empty, .cash-cell-who:empty, .cash-cell-actions:empty { display: none; }
  .cash-cell-note { grid-area: note; padding-top: 6px !important; font-size: 14px; line-height: 1.35; }
  .cash-cell-who { grid-area: who; align-self: center; font-size: 14px; }
  .cash-cell-who:not(:empty)::before { content: 'Кто: '; color: var(--muted); font-size: 12px; }
  .cash-cell-actions { grid-area: actions; align-self: center; text-align: right !important; white-space: nowrap !important; }
  .cash-cell-actions .btn { padding: 5px 8px; }
}
.num-input { max-width: 110px; }

/* Калькулятор: наличие на складе города. */
.calc-city { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.calc-city select { width: auto; min-width: 140px; }
.calc-field > span:first-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calc-stock { font-size: 12px; padding: 0 6px; border-radius: 6px; border: 1px solid currentColor;
  align-self: center; white-space: nowrap; }
.calc-stock.ok { color: var(--ok); }
.calc-stock.wait { color: var(--warn); }
.calc-stock.point { color: var(--accent); }
option.calc-opt-ok { color: var(--ok); }
option.calc-opt-wait { color: var(--warn); }
option.calc-opt-point { color: var(--accent); }

/* Тема «Ведьмак»: плотная вёрстка — на экран помещается больше строк. */
[data-theme="witcher"] table.grid th, [data-theme="witcher"] table.grid td { padding: 5px 10px; }
[data-theme="witcher"] .tiles { gap: 8px; margin-bottom: 10px; }
[data-theme="witcher"] .tile { padding: 8px 10px; }
[data-theme="witcher"] .tile .value { font-size: 20px; }
[data-theme="witcher"] .stock-item { padding: 2px 8px 2px 22px; font-size: 12.5px; }
[data-theme="witcher"] .svc-lines { gap: 3px; font-size: 15px; }
[data-theme="witcher"] .stock-toolbar { gap: 8px; margin-bottom: 8px; }
[data-theme="witcher"] .segmented { padding: 2px; }
[data-theme="witcher"] .chat-item { padding: 6px 10px; }
[data-theme="witcher"] .msg { padding: 6px 10px; }

/* Склад: сколько штук помечено — «ждёт возврата» оранжевым, «по гарантии» зелёным. */
.stock-mark-count { font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 5px; border-radius: 6px;
  border: 1px solid currentColor; font-size: 12px; }
.stock-mark-count.wait { color: var(--warn); }
.stock-mark-count.ok { color: var(--ok); }

/* Закупка: позиция оплачена при заказе. */
.tag.tag-paid { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }

/* Заказ: позиция в одну строку — склад, категория и название рядом. */
.oi-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.oi-name-row .oi-cat { flex: none; width: 86px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-name-row .order-item-text { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .oi-name-row { flex-wrap: wrap; }
  .oi-name-row .oi-cat { width: auto; }
  .oi-name-row .order-item-text { flex-basis: 100%; }
}

/* Касса: загрузка истории из Telegram и сверка остатков с чатом. */
.cash-import-skip { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.cash-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-height: 60vh; overflow: auto; }
.cash-check { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.cash-check-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cash-check table.grid td { padding: 2px 8px; }
.cash-check .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Касса: список чатов, которые слушает бот. */
.cash-chats { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cash-chat { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }

/* Касса: инструкция по вебхуку бота. */
.cash-hook { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.cash-hook:empty { display: none; }
.cash-hook-url { display: block; word-break: break-all; font-size: 11.5px; line-height: 1.35;
  padding: 6px 8px; border-radius: 6px; background: var(--surface); }

.cash-hook-secret { display: flex; align-items: center; gap: 6px; }
.cash-hook-secret code { flex: 1; word-break: break-all; font-size: 11.5px; padding: 4px 8px;
  border-radius: 6px; background: var(--surface); }

/* Касса: строка поиска в панели фильтров. */
.cash-search { width: 260px; max-width: 45vw; }
@media (max-width: 700px) { .cash-search { width: 100%; max-width: none; } }

/* Закупка «в пути»: суммы заказов. */
.incoming-sum { min-width: 86px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.incoming-money { font-weight: 650; white-space: nowrap; }

/* Закупка: окно со скриптом для заказов Wildberries. */
.supplier-status { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.supplier-status .supplier-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: none; }
.supplier-status-live .supplier-dot { background: var(--ok); }
.supplier-status-warn .supplier-dot { background: var(--warn); }
.supplier-status-off .supplier-dot { background: var(--danger, #e5484d); }
.supplier-status-off { border-color: color-mix(in srgb, var(--danger, #e5484d) 40%, var(--border)); }
.wb-row { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; }
.wb-row code { flex: 1; word-break: break-all; font-size: 12px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); }
.wb-accounts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.wb-account { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; }
.wb-account .wb-account-name { max-width: 180px; }
.wb-account code { font-size: 12px; color: var(--muted); }
.wb-account select { max-width: 150px; }

/* Закупка: предложения поставщиков и сравнение цен. */
.supplier-job { margin-bottom: 12px; padding: 10px 12px; }
.supplier-job-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.supplier-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.supplier-column { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.supplier-column-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.supplier-offer { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--border); }
.supplier-offer:first-child { border-top: none; }
.supplier-offer.best { background: rgba(18, 161, 80, .10); border-radius: 6px; padding-left: 4px; }
.supplier-offer.rejected { opacity: .65; }
.supplier-offer-main { flex: 1; min-width: 0; }
.supplier-offer-main a { color: var(--text); }
.supplier-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.supplier-sources { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.supplier-source-pick, .supplier-check { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.supplier-confirm { margin: 8px 0 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.supplier-table td, .supplier-table th { vertical-align: top; }
.supplier-cell { min-width: 120px; }
.supplier-cell.best { background: rgba(18, 161, 80, .12); }
.supplier-cell.stale { opacity: .6; }
/* Магазин дороже минимального: цена приглушена, минимум виден сразу. */
.supplier-cell.over a, .supplier-cell.over strong { color: var(--muted); font-weight: 500; }
.supplier-monitor-note { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  margin-bottom: 10px; border-left: 3px solid var(--ok); }
.supplier-monitor-note .muted { flex: 1; }
.supplier-monitor-actions { min-width: 190px; white-space: nowrap; }
.supplier-monitor-actions .btn { padding: 5px 7px; }
.supplier-price-drop td { background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  border-top-color: color-mix(in srgb, var(--ok) 35%, var(--border));
  border-bottom-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.supplier-price-rise td { background: color-mix(in srgb, var(--danger, #e5484d) 10%, var(--surface));
  border-top-color: color-mix(in srgb, var(--danger, #e5484d) 35%, var(--border));
  border-bottom-color: color-mix(in srgb, var(--danger, #e5484d) 35%, var(--border)); }
.supplier-price-drop td:first-child, .supplier-price-rise td:first-child { border-left: 1px solid currentColor;
  border-radius: 9px 0 0 9px; }
.supplier-price-drop td:last-child, .supplier-price-rise td:last-child { border-right: 1px solid currentColor;
  border-radius: 0 9px 9px 0; }
.supplier-price-alert { margin-left: 8px; font-weight: 700; }
.supplier-price-alert.drop { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.supplier-price-alert.rise { color: var(--danger, #e5484d); border-color: color-mix(in srgb, var(--danger, #e5484d) 35%, var(--border)); }

/* История цен: сводка, адаптивный график и только заметные изменения вместо журнала. */
.supplier-history { display: grid; gap: 14px; min-width: 0; }
.supplier-history-periods { justify-self: start; }
.supplier-history-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.supplier-history-source { border: 1px solid var(--border); border-left: 4px solid var(--muted);
  border-radius: 10px; padding: 11px 13px; background: var(--surface-2); }
.supplier-history-source.wb { border-left-color: var(--ok); }
.supplier-history-source.dns { border-left-color: var(--accent); }
.supplier-history-source-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.supplier-history-current { display: inline-block; margin: 5px 0 3px; font-size: 24px; font-weight: 750;
  color: var(--text); font-variant-numeric: tabular-nums; }
.supplier-history-change { font-weight: 700; white-space: nowrap; }
.supplier-history-change.drop { color: var(--ok); }
.supplier-history-change.rise { color: var(--danger); }
.supplier-history-chart-wrap { border: 1px solid var(--border); border-radius: 12px; padding: 10px;
  background: var(--surface-2); min-width: 0; }
.supplier-history-chart { display: block; width: 100%; height: min(310px, 42vh); overflow: visible; }
.supplier-chart-grid { stroke: var(--border); stroke-width: 1; }
.supplier-chart-axis { fill: var(--muted); font-size: 12px; }
.supplier-chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.supplier-chart-line.wb { stroke: var(--ok); }
.supplier-chart-line.dns { stroke: var(--accent); }
.supplier-chart-dot { stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.supplier-chart-dot.wb { fill: var(--ok); }
.supplier-chart-dot.dns { fill: var(--accent); }
.supplier-chart-dot:hover, .supplier-chart-dot:focus { r: 7; outline: none; }
.supplier-history-detail { min-height: 32px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 10px 0; }
.supplier-history-events { display: grid; gap: 6px; }
.supplier-history-event { display: grid; grid-template-columns: 105px 94px minmax(150px, auto) 70px 1fr;
  gap: 10px; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--border); }
.supplier-history-event-date { color: var(--muted); font-size: 13px; }
.supplier-history-source-label { font-weight: 650; }
.supplier-history-source-label.wb { color: var(--ok); }
.supplier-history-source-label.dns { color: var(--accent); }
.supplier-history-no-events { padding: 10px 0; }

/* Закупка на телефоне: таблицы становятся карточками без горизонтальной прокрутки. */
@media (max-width: 720px) {
  .purchase-page { padding-left: 10px; padding-right: 10px; }
  .purchase-page .page-head { align-items: center; gap: 6px; }
  .purchase-page .page-head h1 { flex-basis: 100%; }
  .purchase-page .page-head .btn { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }
  .purchase-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .purchase-tabs .seg { min-width: 0; padding: 7px 4px; }
  .purchase-tabs .seg-label { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }

  .purchase-page .stock-toolbar { align-items: stretch; gap: 8px; }
  .purchase-page .stock-toolbar > .spacer { display: none; }
  .purchase-page .stock-toolbar label { min-height: 32px; }
  .purchase-page .stock-card-head { align-items: flex-start; }
  .purchase-page .stock-card-head > .spacer { display: none; }
  .purchase-page .incoming-money { width: 100%; text-align: left; }
  .purchase-page .purchase-group-head { flex-wrap: wrap; padding: 9px 8px; gap: 6px; }
  .purchase-page .purchase-group-head .purchase-buy-qty { font-size: 14px; }

  .purchase-table, .purchase-table tbody { display: block; width: 100%; }
  .purchase-table thead { display: none; }
  .purchase-table tr.purchase-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px 6px; padding: 11px 12px; border-bottom: 1px solid var(--border); }
  .purchase-table tr.purchase-row:last-of-type { border-bottom: 0; }
  .purchase-table tr.purchase-row > td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
  .purchase-table tr.purchase-row > td::before,
  .supplier-table tr.supplier-compare-row > td::before {
    content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted);
    font-size: 10px; font-weight: 500; line-height: 1.2; text-align: left;
  }
  .purchase-table tr.purchase-row > .purchase-name { grid-column: 1 / -1; font-size: 14px; font-weight: 650; }
  .purchase-table tr.purchase-row > .purchase-buy { grid-column: 1 / -1; display: flex; align-items: center;
    flex-wrap: wrap; gap: 6px; }
  .purchase-table tr.purchase-row > .purchase-buy::before { flex-basis: 100%; }
  .purchase-table .purchase-order { margin-left: 0; min-height: 30px; }
  .purchase-table .purchase-details:not([hidden]) { display: block; }
  .purchase-table .purchase-details > td { display: block; padding: 9px 12px; border-bottom: 1px solid var(--border); }

  .incoming-item { display: grid; grid-template-columns: 1fr auto auto; gap: 7px; padding: 10px 12px; }
  .incoming-item .incoming-main { grid-column: 1 / -1; }
  .incoming-item .incoming-count { align-self: center; }
  .incoming-item .incoming-sum { min-width: 0; align-self: center; }
  .incoming-item .btn { min-width: 38px; padding-left: 8px; padding-right: 8px; }
  .incoming-item .btn:nth-of-type(1) { grid-column: 1; }

  .supplier-status { flex-wrap: wrap; }
  .supplier-status > div { flex: 1; min-width: 0; }
  .supplier-status > .spacer { display: none; }
  .supplier-monitor-note { display: grid; gap: 6px; }
  .supplier-monitor-note .muted { width: 100%; }
  .supplier-compare-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .supplier-compare-toolbar .cash-search,
  .supplier-compare-toolbar select { grid-column: 1 / -1; width: 100%; max-width: none; }
  .supplier-compare-toolbar .btn { width: 100%; }

  .supplier-table, .supplier-table tbody { display: block; width: 100%; }
  .supplier-table thead { display: none; }
  /* Ширины колонок заданы выше (блок «Сравнение цен на телефоне»): здесь только
     карточный вид строки. Раньше тут стояло `1fr 1fr`, и оно перебивало auto-fit,
     из-за чего карточки магазинов разъезжались по разным рядам. */
  .supplier-table tr.supplier-compare-row { display: grid;
    gap: 10px 8px; padding: 12px; border-bottom: 1px solid var(--border); }
  .supplier-table tr.supplier-compare-row:last-child { border-bottom: 0; }
  .supplier-table tr.supplier-compare-row > td { display: block; min-width: 0; padding: 0; border: 0;
    text-align: left; background: transparent; }
  .supplier-table tr.supplier-compare-row > .supplier-compare-name,
  .supplier-table tr.supplier-compare-row > .supplier-monitor-actions { grid-column: 1 / -1; }
  .supplier-table tr.supplier-compare-row > .supplier-cell { padding: 8px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface-2); }
  .supplier-table tr.supplier-compare-row > .supplier-cell.best { border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
    background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
  .supplier-table .supplier-monitor-actions { display: flex !important; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .supplier-table .supplier-monitor-actions::before { flex-basis: 100%; }
  .supplier-table .supplier-monitor-actions .btn { flex: 1 1 38px; min-height: 34px; }
  .supplier-history-periods { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .supplier-history-periods .seg { min-width: 0; padding: 7px 4px; font-size: 12px; }
  .supplier-history-current { font-size: 21px; }
  .supplier-history-chart-wrap { padding: 4px; }
  .supplier-history-chart { height: 250px; }
  .supplier-chart-axis { font-size: 20px; }
  .supplier-history-detail { padding: 7px 8px 3px; align-items: flex-start; }
  .supplier-history-event { grid-template-columns: 1fr auto; gap: 3px 8px; padding: 9px 4px; }
  .supplier-history-event-date, .supplier-history-source-label { grid-column: auto; }
  .supplier-history-event > :nth-child(3) { grid-column: 1; }
  .supplier-history-event > :nth-child(4) { grid-column: 2; }
  .supplier-history-event > :nth-child(5) { grid-column: 1 / -1; }
}
.svc-profit { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--ok) 34%, var(--border)); border-radius: 10px;
  background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.svc-profit > span:first-child { font-weight: 700; }
.svc-profit-result { display: grid; justify-items: end; gap: 2px; text-align: right; }
.svc-profit-value { font-size: 20px; font-variant-numeric: tabular-nums; }

/* Сумма ремонта в шапке карточки сервиса: главный акцент карточки.
   Стоит последним правилом, чтобы не терять размер в теме «Ведьмак»,
   где общий .tag уменьшается до 12.5px. */
.svc-amount {
  font-size: 17px; font-weight: 700; padding: 4px 12px; border-radius: 10px;
  color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .01em;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
}
/* Выданный ремонт — деньги уже получены, спокойный изумрудный. */
.svc-amount.svc-amount-ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 11%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 40%, var(--border));
}
/* В светлой теме изумрудный нужно притемнить: на светлом фоне он даёт 2.98:1
   (норма 4.5). В тёмной теме яркий изумрудный читается хорошо, его не трогаем. */
:root:not([data-scheme="dark"]):not([data-theme="witcher"]) .svc-amount.svc-amount-ok {
  color: color-mix(in srgb, var(--ok) 76%, #000);
}
/* На телефоне сумма переносится на свою строку и прижимается вправо. */
@media (max-width: 640px) {
  .svc-head .svc-amount { flex-basis: 100%; margin-left: auto; text-align: right; }
}

/* --- Настройки уведомлений: личные галочки сотрудника ---------------------------------- */
.notify-settings { display: grid; }
.notify-section-title { font-weight: 650; margin: 14px 0 8px; }
.notify-section-title:first-child { margin-top: 0; }
.notify-kinds { display: grid; gap: 4px; }
.notify-kind {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.notify-kind:hover { border-color: var(--accent); }
.notify-kind input { width: auto; margin-top: 2px; flex: none; }
.notify-kind-label { font-weight: 600; }
.notify-kind.notify-off { opacity: .55; cursor: default; }
.notify-kind.notify-off:hover { border-color: var(--border); }
.notify-accounts { display: grid; gap: 6px; }
.notify-account {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px;
}
.notify-account:hover { border-color: var(--accent); }
.notify-account input { width: auto; flex: none; }
.notify-account-name { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .notify-kind, .notify-account { padding: 11px 12px; }
}

/* --- Сравнение цен: строка ячейки магазина -------------------------------------------- */
/* На десктопе видимая подпись под предложением, на телефоне компактная кнопка справа. */
.supplier-cell { position: relative; }
.supplier-cell-body { min-width: 0; }
.supplier-cell-block {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 4px 7px; min-height: 28px; max-width: 100%;
  line-height: 1.25; font-size: 11px; white-space: normal; text-align: left;
  color: var(--muted); border: 1px solid var(--border); border-radius: 7px;
}
.supplier-cell-block:hover, .supplier-cell-block:focus-visible {
  color: var(--text); background: var(--surface-2); border-color: var(--muted);
}
.supplier-block-icon { flex: none; font-size: 17px; line-height: 1; }
.supplier-block-label { min-width: 0; }
@media (max-width: 720px) {
  /* Ячейка — сетка: предложение слева, кнопка блокировки справа. */
  .supplier-table tr.supplier-compare-row > .supplier-cell {
    display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 6px;
  }
  .supplier-cell .supplier-cell-block {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; margin-top: 0; padding: 4px 8px; min-height: 30px; line-height: 1.2;
    font-size: 13px; opacity: 1; transition: none;
  }
  .supplier-block-label { display: none; }
}

/* --- Склад: читаемая раскрытая группа -------------------------------------------------- */
/* Закрытые категории остаются компактными. Раскрытая карточка получает две колонки,
   чтобы длинное название детали не зажималось ценой, остатком и кнопками. */
.stock-grid { grid-auto-flow: row dense; }
.stock-card.has-open { grid-column: span 2; min-width: 0; }
.stock-row.open {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: inset 3px 0 color-mix(in srgb, var(--accent) 72%, transparent);
}
.stock-items {
  padding: 2px 0;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--surface));
}
.stock-items :is(.stock-item-movable,.stock-search-result) {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 10px 8px 24px;
  min-width: 0;
}
.stock-items :is(.stock-item-movable,.stock-search-result) + :is(.stock-item-movable,.stock-search-result) {
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.stock-items :is(.stock-item-movable,.stock-search-result):hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.stock-item-main { min-width: 0; }
.stock-items :is(.stock-item-movable,.stock-search-result) .stock-item-name {
  display: block;
  color: var(--text);
  font-weight: 540;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.stock-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  margin-top: 3px;
  color: var(--muted);
}
.stock-items :is(.stock-item-movable,.stock-search-result) .stock-item-qty { font-weight: 700; align-self: center; }
.stock-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.stock-item-actions .stock-edit {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  opacity: .78;
}
.stock-item-actions .stock-edit:hover { opacity: 1; }

/* Тема «Ведьмак» ниже по файлу раньше принудительно уплотняла складские строки.
   Для раскрытого содержимого сохраняем новую структуру во всех темах. */
[data-theme="witcher"] .stock-items :is(.stock-item-movable,.stock-search-result) {
  display: grid;
  padding: 8px 10px 8px 22px;
  font-size: 13px;
}
[data-theme="witcher"] .stock-items .stock-item-name { flex-basis: auto; }
.stock-search-summary { margin: 4px 0 10px; }
.stock-search-view { min-width: 0; }
.stock-search-group { cursor: default; }
.stock-search-hit {
  padding: 0 2px;
  border-radius: 3px;
  color: var(--text);
  background: color-mix(in srgb, var(--warn) 38%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (max-width: 760px) {
  .stock-card.has-open { grid-column: span 1; }
  .stock-row { padding: 10px 12px; gap: 8px; }
  .stock-items :is(.stock-item-movable,.stock-search-result),
  [data-theme="witcher"] .stock-items :is(.stock-item-movable,.stock-search-result) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 10px 10px 10px 14px;
  }
  .stock-item-actions { grid-column: 1 / -1; justify-self: end; gap: 4px; }
  .stock-item-actions .stock-edit {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    font-size: 14px;
  }
  .stock-item-meta { gap: 5px 8px; }
}
.receipt-pending-stock { background: color-mix(in srgb, #ef9b38 10%, var(--surface)); border-inline-start: 3px solid color-mix(in srgb, #ef9b38 65%, var(--border)); }
.receipt-pending-tag { color: var(--text); background: color-mix(in srgb, #ef9b38 12%, var(--surface)); border: 1px solid color-mix(in srgb, #ef9b38 50%, var(--border)); border-radius: 9px; padding: 4px 8px; }
.onec-difference { padding: 12px 14px; display: flex; gap: 9px; flex-wrap: wrap; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; align-items: center; }
.onec-diff-comments { flex-basis: 100%; display: grid; gap: 3px; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.onec-difference > .stock-item-name { flex: 1 1 100%; }
.stock-card-head.stock-arrival-highlight,.stock-row.stock-arrival-highlight {
  background:color-mix(in srgb,var(--accent,#59b9f5) 13%,var(--panel,#161c24));
  box-shadow:inset 3px 0 var(--accent,#59b9f5);
}
.stock-item.stock-arrival-item {
  box-shadow:inset 3px 0 var(--accent,#59b9f5);
  outline:1px solid color-mix(in srgb,var(--accent,#59b9f5) 30%,transparent);
  outline-offset:-1px;
  border-radius:8px;
}
.stock-arrival-tag {
  display:inline-flex;padding:2px 7px;border-radius:10px;font-size:11px;
  color:var(--text);background:color-mix(in srgb,var(--accent,#59b9f5) 18%,var(--panel,#161c24));
}

/* Закупка → Доставки: карточки кабинетов сверху, ниже «На пункте» (зелёный) и «В пути» (серый). */
.delivery-cabinets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.delivery-cabinet { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); cursor: pointer; font: inherit; }
.delivery-cabinet:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.delivery-cabinet.active { border: 2px solid var(--accent); padding: 11px 13px; background: var(--accent-soft); }
.delivery-cabinet-title { font-weight: 600; font-size: 15px; }
.delivery-counts { font-size: 13px; margin-top: 4px; }
.delivery-limit { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 8px; }
.delivery-limit-text { color: var(--muted); }
.delivery-limit-track { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; }
.delivery-limit-fill { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.delivery-limit-mid .delivery-limit-fill { background: var(--warn); }
.delivery-limit-low .delivery-limit-fill { background: var(--danger, #d33); }
.delivery-limit-low .delivery-limit-text { color: var(--danger, #d33); }
.tag.tag-keep { color: var(--muted); }
.tag.tag-keep-urgent { color: var(--danger, #d33); border-color: color-mix(in srgb, var(--danger, #d33) 45%, transparent); }
.delivery-at-point { color: var(--ok); font-weight: 600; }
.delivery-overdue { color: var(--warn); }
.delivery-state { font-size: 12px; color: var(--muted); }
.delivery-state::before { content: '●'; margin-right: 5px; }
.delivery-state-live::before { color: var(--ok); }
.delivery-state-warn::before { color: var(--warn); }
.delivery-state-off::before, .delivery-state-manual::before { color: var(--border); }
.delivery-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.delivery-head h2 { margin: 0 0 2px; font-size: 18px; }
.delivery-section { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--border); }
.delivery-section-point { border-left-color: var(--ok); }
.delivery-section-point strong { color: var(--ok); }
.delivery-section-courier { border-left-color: var(--accent); }
.delivery-section-courier strong, .delivery-courier { color: var(--accent); }
.tag.tag-courier { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.delivery-list { margin-bottom: 18px; overflow: hidden; }
.delivery-list .incoming-item:first-child { border-top: 0; }
.delivery-empty { padding: 12px 14px; margin-bottom: 18px; text-align: left; }
.tag.tag-unpaid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
@media (max-width: 760px) {
  .delivery-cabinets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-head .btn { flex: 1 1 auto; }
}

/* --- Сравнение цен: читаемая таблица (19.10) ------------------------------------------- */
/* Позиции сгруппированы по категориям, в ячейке магазина — крупная цена и одна строка
   подробностей. Минимум отмечен меткой «мин», у дорогого магазина — «+разница».
   Кнопка чёрного списка — значок ⊘, на компьютере появляется при наведении на цену. */
.supplier-compare-toolbar select { flex: 0 1 230px; width: auto; min-width: 160px; }
.supplier-monitor-note.muted { display: block; margin: 0 2px 10px; padding: 0; border: 0; font-size: 12px; }
.supplier-compare-card { padding: 0; overflow: auto; }
.supplier-table { width: 100%; }
.supplier-table th { padding: 9px 12px; }
.supplier-table th.supplier-source-head { text-align: left; }
.supplier-table td { padding: 10px 12px; vertical-align: top; }
.supplier-table tr.supplier-group-row td, table.grid tr.supplier-group-row:hover td {
  padding: 14px 12px 6px; background: var(--surface-2); color: var(--muted);
  font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
}
.supplier-group-row td span + span { margin-left: 8px; font-weight: 500; letter-spacing: 0; }
.supplier-compare-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.supplier-compare-name strong { font-size: 15px; font-weight: 650; }
.supplier-compare-name .supplier-price-alert { margin-left: 0; }
.supplier-compare-updated { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 3px; color: var(--muted); font-size: 12px; }
.supplier-cell-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; }
.supplier-cell-price { color: var(--text); font-size: 17px; font-weight: 650; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
a.supplier-cell-price:hover { color: var(--accent); text-decoration: underline; }
.supplier-cell.best { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.supplier-cell.best .supplier-cell-price { color: var(--ok); }
.supplier-cell.over a.supplier-cell-price, .supplier-cell.over strong.supplier-cell-price { color: var(--text); font-weight: 600; }
.supplier-cell-mark { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.supplier-cell-mark.best { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.supplier-cell-mark.over { color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.supplier-cell-meta { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.supplier-cell-meta.stale-note { color: var(--warn); }

@media (min-width: 721px) {
  .supplier-compare-name { min-width: 200px; }
  .supplier-cell { width: 26%; min-width: 190px; padding-right: 36px !important; }
  /* Подробности — одной строкой; полный текст во всплывающей подсказке. */
  .supplier-cell-meta { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .supplier-cell .supplier-cell-block { position: absolute; top: 9px; right: 6px; margin: 0;
    min-height: 0; padding: 2px 5px; border-color: transparent; opacity: 0; }
  .supplier-cell:hover .supplier-cell-block, .supplier-cell .supplier-cell-block:focus-visible { opacity: 1; }
  .supplier-cell .supplier-block-label { display: none; }
  .supplier-table .supplier-monitor-actions { width: 1%; }
  .supplier-table .supplier-monitor-actions .btn { opacity: 1; color: var(--text); }
  .supplier-table tr:hover .supplier-monitor-actions .btn,
  .supplier-table .supplier-monitor-actions .btn:focus-visible { opacity: 1; }
}
@media (max-width: 720px) {
  .supplier-table tr.supplier-group-row { display: block; }
  .supplier-table tr.supplier-group-row td { display: block; padding: 12px 12px 6px; }
  .supplier-cell-meta { overflow-wrap: anywhere; }
}

/* Диалоги на телефоне: четыре вкладки стадий (включая «Скупку») сеткой 2×2, а не лентой за край экрана. */
@media (max-width: 760px) {
  .chat-search .segmented.stage-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .chat-search .segmented.stage-tabs .seg { flex: none; min-width: 0; justify-content: space-between; }
  /* Аккаунты — лентой с прокруткой, как фильтры ниже: названия видны целиком. */
  .chat-search .segmented:not(.stage-tabs) { overflow-x: auto; scrollbar-width: none; }
  .chat-search .segmented:not(.stage-tabs)::-webkit-scrollbar { display: none; }
  .chat-search .segmented:not(.stage-tabs) .seg { flex: none; }
}
@media (max-width: 760px) { .chat-resizer { display: none; } }

/* История комплектующей (component-history.js) */
.ch-btn { padding: 0 6px; min-height: 0; font-size: 13px; margin-left: 6px; }
.ch-body { display: flex; flex-direction: column; gap: 6px; }
.ch-warranties { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.ch-warranty { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; }
.ch-warranty.ok { border-color: var(--ok); }
.ch-warranty.over { color: var(--muted); }
.ch-serials { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ch-events { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ch-event { display: flex; gap: 10px; align-items: flex-start; }
.ch-event.probable { opacity: .75; }
.ch-icon { width: 20px; flex: none; text-align: center; }
.ch-serial-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ch-candidate { display: block; width: 100%; text-align: left; margin-top: 4px; }
.ch-alt { margin-top: 4px; }
.ch-alt summary { cursor: pointer; }
.ch-names-box { position: relative; max-width: 720px; }
.ch-names-box input { width: 100%; }
.cash-trash { display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.cash-trash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.unit-serial-list { display: grid; gap: 10px; max-height: 60vh; overflow: auto; }
.unit-serial-row { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.unit-serial-edit { display: flex; gap: 6px; }
.unit-serial-edit input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; }
.unit-serial-onec { display: grid; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--border); }
.pc-city-section + .pc-city-section { margin-top: 18px; }
.pc-city-title { font-size: 15px; margin: 4px 0 10px; }

/* Диалоги: ограничения относятся к доступной колонке, а не к картинке. */
.chat-search .stage-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chat-search .stage-tabs .seg { justify-content: space-between; padding: 5px 6px; }
.chat-search .seg-label { white-space: normal; overflow: visible; }
.chat-filter-row { flex-wrap: wrap; overflow: visible; }
.chat-head-main { min-width: 0; flex: 1 1 180px; max-width: 100%; }
.bubble, .msg-row { max-width: 100%; }
.bubble audio { max-width: 100%; }
.bubble video { max-width: 280px; }
.composer { flex-wrap: wrap; }
.composer textarea { min-width: 0; flex: 1 1 140px; }
.chat-account-select { min-width: 0; }
.prepays { max-width: 100%; }
.prepays table { min-width: 420px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .conversation-body.context-open { grid-template-columns: minmax(0, 1fr); }
  .conversation-body.context-open .chat-context { max-height: 30dvh; border-left: 0; border-top: 1px solid var(--border); }
}

/* Общие состояния: одинаковая семантика и контраст во всех темах. */
.btn { min-height: var(--control-height); }
:is(input:not([type=checkbox]):not([type=radio]),select) { min-height: var(--control-height); }
:is(.num,.order-total,.calc-price,.cash-amount,.svc-amount) { font-variant-numeric: tabular-nums; }
.num { text-align: right; }
.profile-menu > summary { cursor: pointer; padding: 8px 10px; border-radius: 6px; color: var(--text); font-size: 13px; }
.profile-menu[open] { max-height: 40dvh; overflow-y: auto; }
.profile-menu > summary:hover { background: var(--surface-2); }
.profile-menu .nav-item { font-size: 13px; }
.theme-row > [data-theme-toggle] { font-size: 12px; min-width: 0; }
.scheme-toggle:disabled { opacity: 1; color: var(--muted); cursor: default; }
.supplier-monitor-actions .btn.danger { color: var(--danger); margin-left: 6px; border-left: 1px solid var(--border); }
@media (min-width: 761px) {
  [data-theme="witcher"] #nav .nav-item { padding: 5px 8px; }
  [data-theme="witcher"] #nav .nav-label { font-size: 13px; }
  .sidebar-foot { padding-top: 6px; }
}

/* Компоновка экранов; существующие действия и расчёты остаются на месте. */
.prepays > summary.stock-card-head { cursor: pointer; list-style: none; display: block; padding: 8px 12px; }
.prepays > summary::before { content: "▸"; margin-right: 6px; color: var(--accent); }
.prepays[open] > summary::before { content: "▾"; }
.prepays > summary > span + span { margin-left: 12px; }
.prepays .stock-card-head { font-size: 13px; }
.order-city.is-empty { margin-bottom: 10px; }
.order-city.is-empty .order-city-head { margin-bottom: 2px; }
.order-city-empty { padding: 2px 0 4px; }
.order-head { flex-wrap: wrap; }
.order-customer { color: var(--text); flex: 1 1 200px; }
.order-author { font-size: 12px; }
.order-fields > * { min-width: 0; }
.order-table :is(input[type=number],.order-num) { font-variant-numeric: tabular-nums; text-align: right; }
.purchase-plan { padding: 10px 12px; }
.purchase-help summary, .permissions-summary summary { cursor: pointer; color: var(--accent); }
.purchase-help p { margin: 6px 0 0; max-width: 75ch; }
.purchase-table td:last-child { border-left: 1px solid var(--border); }
.stock-item-name { overflow-wrap: anywhere; }
.calc-platform.active { box-shadow: inset 0 0 0 2px var(--accent); }
.calc-summary-title { font-weight: 650; }
.receipt-test-banner { display: block; padding: 8px 12px; margin-bottom: 10px; }
.receipt-test-banner > summary { cursor: pointer; font-size: 13px; }
.receipt-test-banner[open] > span { display: block; margin-top: 8px; max-width: 85ch; }
.receipt-card-meta { font-variant-numeric: tabular-nums; }
.cash-period-note { flex-basis: 100%; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.cash-journal-filters { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.svc-documents { flex: 1 1 100%; }
.svc-documents > summary { cursor: pointer; width: fit-content; font-size: 13px; padding: 5px 0; color: var(--accent); }
.svc-documents > div { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.permissions-summary > div { max-width: 55ch; margin-top: 8px; line-height: 1.5; }
@container order-parts (max-width: 850px) {
  .order-item-name, .order-num { min-width: 0; width: 100%; }
  .order-table .oi-avail select { min-width: 0; }
  .oi-name-row { flex-wrap: wrap; }
  .oi-name-row .order-item-text { flex-basis: 100%; }
}

/* Вкладки и инструменты не расширяют всю прокручиваемую страницу. */
.admin-tabs { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.admin-toolbar { flex-wrap: wrap; gap: 8px; }
.admin-toolbar > div { min-width: 0; }

/* Боковое меню выразительнее (Максим, 25.10): тёмный полужирный текст, иконки без прозрачности,
   пункт при наведении — как кнопка, активный — залит фирменным синим. Только стандартная тема на компьютере. */
@media (min-width: 761px) {
  :root:not([data-theme="witcher"]) #nav .nav-item { color: var(--text); font-weight: 600; font-size: 15px; padding: 9px 12px; border: 1px solid transparent; }
  :root:not([data-theme="witcher"]) #nav .nav-icon { opacity: 1; }
  :root:not([data-theme="witcher"]) #nav .nav-item:hover { background: var(--surface-2); border-color: var(--border); }
  :root:not([data-theme="witcher"]) #nav .nav-item.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
  :root:not([data-theme="witcher"]) #nav .nav-item.active .badge { background: var(--on-accent); color: var(--accent); }
  :root:not([data-theme="witcher"]) .sidebar-foot :is([data-theme-toggle], .profile-menu > summary) { color: var(--text); font-weight: 600; }
}

/* Логотип 240FPS вместо надписи (25.10). Анимация как в обоях, но лёгкая: раз в 10 с по логотипу проходит
   световая волна (маска — сам логотип, фон не светится) и вспыхивает глаз гепарда. Без анимации — если она отключена в системе. */
.logo:has(.logo-mark) { justify-content: center; padding: 0 6px 12px; }
.logo-mark { position: relative; display: block; width: 160px; max-width: 100%; line-height: 0; }
.logo-mark img { display: block; width: 100%; height: auto; }
.logo-mark { --logo-mask: url(/static/img/logo-240fps.png); --logo-eye-x: 92.8%; --logo-eye-y: 25.7%; }
/* «Ведьмак»: свой гепард; после того как Геральт трижды упадёт — лошадь (Максим, 26.10). */
.logo-mark .logo-alt { display: none; }
[data-theme="witcher"] .logo-mark picture { display: none; }
[data-theme="witcher"]:not([data-witcher-logo="horse"]) .logo-mark .logo-w-cheetah { display: block; }
[data-theme="witcher"][data-witcher-logo="horse"] .logo-mark .logo-w-horse { display: block; }
[data-theme="witcher"] .logo-mark { --logo-mask: url(/static/img/logo-witcher-cheetah.webp); --logo-eye-x: 92.5%; --logo-eye-y: 29%; }
[data-theme="witcher"][data-witcher-logo="horse"] .logo-mark { --logo-mask: url(/static/img/logo-witcher-horse.webp); --logo-eye-x: 92%; --logo-eye-y: 21%; }
.logo-shine {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: var(--logo-mask) center / 100% 100% no-repeat; mask: var(--logo-mask) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 0 38%, rgba(135,222,255,.25) 44%, rgba(255,255,255,.75) 50%, rgba(255,173,73,.2) 56%, transparent 62% 100%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0; animation: logo-shine 10s ease-in-out infinite;
}
.logo-eye {
  position: absolute; left: var(--logo-eye-x); top: var(--logo-eye-y); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 12%, rgba(255,222,143,.85) 22%, rgba(255,156,40,.35) 48%, transparent 70%);
  opacity: 0; transform: scale(.4); animation: logo-eye 10s ease-out infinite;
}
@keyframes logo-shine { 0%, 10% { background-position: 130% 0; } 40%, 100% { background-position: -30% 0; } }
@keyframes logo-eye { 0%, 40.8% { opacity: 0; transform: scale(.4); } 42.5% { opacity: 1; transform: scale(1.15); } 46.2%, 100% { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .logo-shine, .logo-eye { animation: none; opacity: 0; } }

/* Наведение мышью — мягкая «лупа» (Максим, 25.10): элемент под курсором плавно и чуть-чуть увеличивается
   и подсвечивается; строки — целиком (состав заказа, касса, таблицы, списки, карточки). Только мышь
   (на телефоне нет) и не при отключённой в системе анимации. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn, .nav-item, .seg, .order-card, tbody > tr, .order-table tr.order-item, .chat-item, .receipt-card, .receipt-view-line,
  .stock-item, .stock-row, .stock-pick-item, .receipt-catalog-result, .svc-card, .pc-card, .imp-card, .deal, .incoming-item,
  .pickup-item, .purchase-row, .supplier-compare-row, .prices-item-row, .unit-serial-row, .usage-row, .service-row, .cash-trash-row {
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, background-color .28s ease;
  }
  .btn:not(:disabled):hover, .seg:hover { transform: scale(1.03); }
  .btn:not(:disabled):active, .seg:active { transform: scale(.98); transition-duration: .08s; }
  #nav .nav-item:hover { transform: scale(1.015); }
  /* Строки и карточки: еле заметное увеличение, мягкая тень и подсветка — без «вылета». */
  :is(tbody > tr, .order-table tr.order-item, .order-issued-row, .chat-item, .receipt-view-line, .stock-item, .stock-row,
      .stock-pick-item:not([disabled]), .receipt-catalog-result, .incoming-item, .pickup-item, .purchase-row, .supplier-compare-row,
      .prices-item-row, .unit-serial-row, .usage-row, .service-row, .cash-trash-row):hover {
    transform: scale(1.004); background-color: color-mix(in srgb, var(--accent) 7%, transparent);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .12); position: relative; z-index: 1;
  }
  :is(.order-card:has(> .order-head:hover), .receipt-card:has(summary:hover), .svc-card:hover, .pc-card:hover, .imp-card:hover, .deal:hover) {
    transform: scale(1.004); box-shadow: 0 4px 14px rgba(16, 24, 40, .14); position: relative; z-index: 1;
  }
  thead > tr:hover { transform: none; background-color: transparent; box-shadow: none; }
  /* Лупа на строках таблиц остаётся, а полосу прокрутки не даёт запас по краям: увеличенная строка
     (на 0,4% — ~3 px с каждой стороны) помещается во внутренний отступ контейнера (Максим, 25.10). */
  :is(.order-table-wrap, .stats-table-wrap) { padding: 3px 5px; }
}

/* Без полос прокрутки в боковом меню (Максим, 25.10): колесо/палец прокручивают, но полос не видно;
   горизонтальной прокрутки нет вовсе. На невысоком экране логотип меньше, чтобы пункты помещались. */
#nav { overflow-x: hidden; scrollbar-width: none; }
#nav::-webkit-scrollbar { display: none; }
@media (min-width: 761px) and (max-height: 860px) { .logo-mark { width: 112px; } .logo:has(.logo-mark) { padding-bottom: 6px; } }
@media (min-width: 761px) and (max-height: 720px) { .logo-mark { width: 84px; } }

/* Закупка: оплаченные позиции подсвечены своим цветом в каждой теме (26.10.2026). */
:root { --paid: #2f66d8; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --paid: #b48cff; } }
:root[data-scheme="dark"] { --paid: #b48cff; }
:root[data-theme="witcher"] { --paid: #d6b775; }
.incoming-item.paid { background: color-mix(in srgb, var(--paid) 13%, transparent); }
.incoming-item.paid:not(.at-point) { box-shadow: inset 3px 0 var(--paid); }
/* Текст оплаченных — тоже цветом оплаты: название, количество, сумма и строка под названием. */
.incoming-item.paid :is(.incoming-main strong, .incoming-count, .incoming-sum) { color: var(--paid); }
.incoming-item.paid .incoming-main .small.muted { color: color-mix(in srgb, var(--paid) 70%, var(--text)); }
.incoming-item.paid .tag.tag-paid { color: var(--paid); border-color: color-mix(in srgb, var(--paid) 55%, transparent); }

/* Цены → рекомендации (27.10.2026). */
.price-recs { padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 8px; }
.price-recs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.price-recs-head .small { flex: 1; min-width: 220px; }
.price-recs-head .btn, .price-recs-actions .btn { padding: 5px 10px; min-height: 30px; font-size: 12px; }
.price-recs-cats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; }
.price-recs-cat { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.price-recs-table td { padding: 5px 8px; vertical-align: middle; }
.price-recs-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-rec-group td { padding-top: 10px; border-bottom: 1px solid var(--border); }
.price-rec-group-label { cursor: pointer; }
.price-rec-change { margin-left: 6px; font-size: 12px; font-weight: 600; }
.price-rec-change.up { color: var(--ok); }
.price-rec-change.down { color: var(--danger); }
.price-rec-row:not(.price-rec-recommend) { opacity: .75; }
.price-recs-actions { display: flex; justify-content: flex-end; }
.price-rec-offer { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.price-rec-block { border: 0; background: none; padding: 0 3px; cursor: pointer; color: var(--muted, #8a93a3); font-size: 13px; line-height: 1; }
.price-rec-block:hover { color: var(--danger); }
.price-recs-excluded { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.price-recs-excluded-item { display: inline-flex; align-items: center; gap: 4px; }
.price-recs-excluded .btn { padding: 2px 8px; min-height: 24px; font-size: 12px; }
.price-recs-table thead th { font-size: 12px; font-weight: 600; color: var(--muted, #8a93a3); text-align: left; padding: 4px 8px; }
.price-rec-offer-cell .price-rec-seller { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-rec-offer .supplier-price-alert { margin-left: 4px; }
.price-rec-actions { white-space: nowrap; text-align: right; }
.price-rec-actions .btn { padding: 2px 6px; min-height: 28px; }
.price-searches { display: grid; gap: 12px; }
.price-searches-source { display: grid; gap: 6px; }
.price-searches-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.price-searches-name { flex: 1 1 260px; min-width: 0; }
.price-searches-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.price-searches-add input[type="text"] { flex: 1 1 280px; min-width: 0; }
/* Склад → Цены: карточки сворачиваются и переставляются за ⠿ (28.10.2026). */
.prices-card .stock-card-head { justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: 4px 8px; padding: 6px 10px; }
.prices-card .stock-card-head > span:not(.spacer):not(.tag):not(.muted) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prices-card .stock-card-head > .muted { white-space: nowrap; }
.prices-card .prices-drag { cursor: grab; touch-action: none; user-select: none; }
.stock-grid.prices-free { display: block; position: relative; }
.prices-free > .prices-card { position: absolute; margin: 0; }
.prices-card-dragging { opacity: .85; outline: 2px dashed var(--accent); outline-offset: -2px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.prices-card-dragging .prices-drag { cursor: grabbing; }
.prices-card.is-collapsed .stock-card-head { border-bottom: 0; }
/* Весть Геральта о зарплате (28.10.2026). */
.geralt-mail { display: grid; gap: 8px; }
.geralt-mail-line { font-style: italic; font-size: 15px; line-height: 1.4; }
.geralt-mail-title { font-weight: 700; font-size: 16px; color: var(--ok); }
.cash-category-reset { padding: 0 6px; min-height: 0; margin-left: 4px; font-size: 12px; }
.svc-finder { padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); }
.svc-clients { display: grid; gap: 6px; margin-top: 6px; }
.svc-clients:empty { display: none; }
.svc-client { display: grid; gap: 4px; padding: 6px 8px; border-radius: 8px; background: var(--surface); }
.svc-client-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 2px 0;
  border: 0; background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.svc-client-head:hover strong { color: var(--accent); }
.svc-client-devices { display: flex; flex-wrap: wrap; gap: 6px; }