/* Единый стиль кабинета. Все цвета/отступы/шрифты — только через переменные :root.
   Хардкод цветов запрещён (см. промпт-кабинет-себестоимость.md, §4). */

:root {
  --color-bg: #e8ece9;
  --color-surface: #ffffff;
  --color-surface-alt: #f3f5f3;
  --color-border: #d3d9d4;
  --color-border-soft: #e3e8e4;
  --color-text: #16201b;
  --color-muted: #5b665f;
  /* Единственный яркий цвет — цвет текущей площадки («ярлык площадки»).
     Переопределяется ниже по body[data-mp]; без площадки — графит. */
  --color-accent: #16201b;
  --color-accent-hover: #000000;
  --color-accent-tint: #eef1ee;
  /* Основные кнопки и активные фильтры — всегда графит, не цвет площадки. */
  --color-ink: #16201b;
  --color-ink-hover: #000000;
  --color-error: #a3231b;
  --color-error-bg: #fce9e7;
  --color-ok: #1d6b45;
  --color-ok-bg: #e2f1e8;
  --color-warn: #7a4800;
  --color-warn-bg: #fbebcb;
  --color-warn-ink: #5a3500;      /* текст на жёлтых плашках */
  --color-warn-border: #e9c98a;
  --color-on-ink: #ffffff;        /* текст на графитовых кнопках/чипах */
  --color-on-ink-bad: #ffb4ab;    /* «плохой» счётчик на графитовом чипе */
  --color-column: #dfe4e0;        /* фон колонок канбана, наведение в меню настроек */
  --color-border-strong: #b7bfb9;
  --color-text-soft: #3f4a44;

  /* Баланс в «Финансах» (вариант A): заливки блоков и подсветка столбца «Сейчас». */
  --fin-now: #fbf3dc;
  --fin-now-mark: #eda100;
  --fin-faint: #a3aca6;
  --fin-b-fixed: #eef0ec;  --fin-b-fixed-ink: #5b665f;
  --fin-b-stock: #e8f0ea;  --fin-b-stock-ink: #1d6b45;
  --fin-b-cash: #e7eef6;   --fin-b-cash-ink: #1f5a96;
  --fin-b-debt: #f1ecf6;   --fin-b-debt-ink: #5b3a8c;

  --radius: 10px;
  --radius-sm: 8px;
  --font-sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Unbounded", "Onest", sans-serif;
  --sidebar-width: 232px;
  --sidebar-width-collapsed: 64px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
}

body[data-mp="ozon"] { --color-accent: #0050e0; --color-accent-hover: #003fb3; --color-accent-tint: #e5edff; }
body[data-mp="wb"]   { --color-accent: #8b1b7c; --color-accent-hover: #6e1462; --color-accent-tint: #f6e7f3; }
body[data-mp="uzum"] { --color-accent: #6420d0; --color-accent-hover: #4f18a6; --color-accent-tint: #efe7fc; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1rem; }
h2 { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; font-weight: 700; margin: 0 0 0.75rem; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

[x-cloak] { display: none !important; }

/* ---------- Навигация (боковое меню, сворачиваемое как activity bar в VS Code) ---------- */

.app-shell { display: flex; align-items: stretch; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 1rem 0.6rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width 0.18s ease;
}
.sidebar--collapsed { width: var(--sidebar-width-collapsed); }
.sidebar--collapsed .navlabel,
.sidebar--collapsed .sidebar__brand-text { display: none; }

.sidebar__brand-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.1rem 0.1rem 1.1rem;
}
.sidebar__logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-ink);
  color: var(--color-on-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.sidebar__brand-text { font-weight: 700; font-size: 0.92rem; flex: 1; white-space: nowrap; overflow: hidden; padding-right: 2.1rem; }
.sidebar__collapse-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  position: fixed;
  top: 1.15rem;
  left: calc(var(--sidebar-width) - 14px);
  z-index: 20;
  transition: left 0.18s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sidebar--collapsed .sidebar__collapse-btn { left: calc(var(--sidebar-width-collapsed) - 14px); }
.sidebar__collapse-btn:hover { background: var(--color-surface-alt); color: var(--color-text); transform: scale(1.18); }

/* Ярлык площадки: крупная бирка в цвете текущей площадки + переключатель под ней.
   Цвет берётся из --color-accent (body[data-mp]). */
.mp-label {
  position: relative;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.95rem 0.85rem 0.6rem;
  margin-bottom: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mp-label::after {
  content: "";
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}
.mp-label__name { font: 700 1.85rem/1 var(--font-display); letter-spacing: -0.02em; }
.mp-label__switch { display: flex; gap: 3px; background: rgba(0, 0, 0, 0.18); border-radius: var(--radius-sm); padding: 3px; }
.mp-label__switch a {
  flex: 1;
  text-align: center;
  padding: 0.35rem 0.2rem;
  border-radius: 6px;
  color: #fff;
  opacity: 0.75;
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
}
.mp-label__switch a:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); text-decoration: none; }
.mp-label__switch a.is-active { opacity: 1; background: #fff; color: var(--color-accent); }
/* В свёрнутом меню ярлык — квадрат с первой буквой площадки, переключатель скрыт. */
.mp-label__short { display: none; font: 700 0.9rem/1 var(--font-display); }
.sidebar--collapsed .mp-label { padding: 0; height: 40px; align-items: center; justify-content: center; }
.sidebar--collapsed .mp-label::after,
.sidebar--collapsed .mp-label__name,
.sidebar--collapsed .mp-label__switch { display: none; }
.sidebar--collapsed .mp-label__short { display: block; }

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar__bottom { border-top: 1px solid var(--color-border); padding-top: 0.6rem; display: flex; flex-direction: column; gap: 2px; }

.navrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.navrow svg { width: 21px; height: 21px; flex-shrink: 0; }
.navrow:hover { background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; }
.navrow--active { background: var(--color-accent-tint); color: var(--color-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--color-accent); }

.chev { color: var(--color-muted); font-size: 0.8em; }

.usermenu { position: relative; }
.usermenu__trigger {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
}
.usermenu__trigger:hover { background: var(--color-surface-alt); }
.usermenu__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 600; color: var(--color-muted); flex-shrink: 0;
}

.usermenu__dropdown {
  position: absolute;
  left: 0.4rem;
  bottom: calc(100% + 4px);
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  z-index: 60;
}
.usermenu__dropdown a,
.usermenu__dropdown .link-button {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-align: left;
  width: 100%;
}
.usermenu__dropdown a:hover,
.usermenu__dropdown .link-button:hover {
  background: var(--color-surface-alt);
  text-decoration: none;
}

.link-button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
}

/* ---------- Лендинг выбора маркетплейса ---------- */

.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.marketplace-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.marketplace-card:hover { border-color: var(--color-ink); text-decoration: none; }

.marketplace-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.marketplace-card__label { font-weight: 700; font-size: 1.1rem; }
.marketplace-card__hint { font-size: 0.85rem; color: var(--color-muted); }

/* ---------- Layout ---------- */

.main { flex: 1; min-width: 0; padding: 1.75rem 2rem 3rem; }
.main--centered {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.page { display: flex; flex-direction: column; gap: 1rem; max-width: 1500px; }
.page--narrow { max-width: 640px; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.card--stub { color: var(--color-muted); }

/* Аккордеон-«кнопка» (<details class="card">...<summary>...): раньше summary
   сидела внутри полного паддинга .card (1.25rem со всех сторон) - закрытая
   карточка получалась ~70px высотой при обычной кнопке (.btn) ~40px.
   Тянем summary к краям card отрицательным margin, даём ей свой компактный
   паддинг под высоту .btn; в закрытом состоянии низ card не резервирует
   место под невидимое тело. */
details.card > summary {
  margin: -1.25rem -1.25rem 0;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
}
details.card:not([open]) { padding-bottom: 0; }

.muted { color: var(--color-muted); }

.guide-content {
  max-width: 720px;
  line-height: 1.55;
}
.guide-content h1 { font-size: 1.4rem; margin: 1.5rem 0 0.75rem; }
.guide-content h2 { font-size: 1.2rem; margin: 1.5rem 0 0.6rem; }
.guide-content h3 { font-size: 1.05rem; margin: 1.1rem 0 0.5rem; }
.guide-content p { margin: 0 0 0.75rem; }
.guide-content ul, .guide-content ol { margin: 0 0 0.75rem; padding-left: 1.4rem; }
.guide-content li { margin-bottom: 0.3rem; }
.guide-content code { background: var(--color-bg); padding: 0.1rem 0.3rem; border-radius: 4px; }
.page--guide { max-width: 960px; }
.page--guide .guide-content { max-width: 880px; }
.guide-figure { margin: 1rem 0 1.25rem; }
.guide-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.guide-figure figcaption { margin-top: 0.45rem; font-size: 0.85rem; color: var(--color-muted); }
.guide-content blockquote { margin: 0.9rem 0; padding: 0.75rem 1rem; background: var(--color-warn-bg); border-radius: var(--radius-sm); color: var(--color-warn-ink); }
.guide-content blockquote p { margin: 0; }
.guide-content table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.9rem; background: var(--color-surface); }
.guide-content th, .guide-content td { border: 1px solid var(--color-border); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.guide-content th { background: var(--color-surface-alt); font-weight: 600; }

.digest-preview {
  white-space: pre-wrap;
  font-family: "Consolas", "Menlo", monospace;
  font-size: 0.9rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 0.75rem;
}

/* ---------- Формы ---------- */

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 420px;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.88rem;
  color: var(--color-muted);
}
.form-grid input[type="text"],
.form-grid input[type="password"],
.form-grid input[type="number"],
.form-grid input[type="time"],
.form-grid select {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.form-grid label.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.form-grid input:focus,
.form-grid select:focus {
  outline: 2px solid var(--color-ink);
  outline-offset: 1px;
}
.hint { font-size: 0.78rem; color: var(--color-muted); }

.inline-form { display: inline-block; margin: 0; }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn--primary { background: var(--color-ink); color: var(--color-on-ink); }
.btn--primary:hover { background: var(--color-ink-hover); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn--secondary:hover { background: var(--color-surface-alt); }
.btn--small { padding: 0.32rem 0.6rem; font-size: 0.82rem; font-weight: 500; background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn--small:hover { background: var(--color-surface-alt); }
.btn--block { width: 100%; }

.btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* ---------- Алерты и тосты ---------- */

.alert {
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.alert--error { background: var(--color-error-bg); color: var(--color-error); }
.alert--ok { background: var(--color-ok-bg); color: var(--color-ok); }
.alert--warn { background: var(--color-warn-bg); color: var(--color-text); }

.toast-root {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
}
.toast {
  background: var(--color-text);
  color: var(--color-surface);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 0.88rem;
}

/* ---------- Таблицы ---------- */

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; }
.data-table th, .data-table td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 0.88rem;
}
.data-table { font-variant-numeric: tabular-nums; }
.data-table td { border-bottom-color: var(--color-border-soft); }
.data-table th { color: var(--color-muted); font-weight: 600; font-size: 0.8rem; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--color-ink); }
.data-table .actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.data-table th .col-total {
  display: block;
  margin-top: 0.2rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* Закреплённые при прокрутке поиск + шапка таблицы (см. app.js: syncStickyTableOffsets).
   overflow сбрасывается на visible, т.к. hidden/auto на предках рвёт position:sticky. */
.costs-toolbar--sticky {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--color-bg);
  padding: 0.6rem 0;
  margin: 0;
}
.table-wrap--sticky { overflow-x: visible; }
.data-table--sticky-head { overflow: visible; }
.data-table--sticky-head thead th {
  position: sticky;
  top: var(--sticky-toolbar-h, 0px);
  z-index: 11;
  background: var(--color-surface);
  box-shadow: inset 0 -2px 0 var(--color-ink);
}

.row--variant td:nth-child(2) { padding-left: 1.5rem; }
.expand-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem; margin-right: 0.4rem;
  border: 1px solid var(--color-border); border-radius: 4px;
  background: var(--color-surface); color: var(--color-muted);
  font-weight: 700; line-height: 1; cursor: pointer;
}

/* ---------- Вкладки внутри страницы (Настройки/Финансы/Склад) ---------- */

.tab {
  padding: 0 0 0.6rem;
  color: var(--color-muted);
  white-space: nowrap;
  font-size: 0.88rem;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--color-text); text-decoration: none; }
.tab--active {
  color: var(--color-text);
  font-weight: 600;
  border-bottom-color: var(--color-accent);
}
.subtabs { display: flex; gap: 1.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); }

.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Единая ширина колонки «Название»/«Товар» во всех таблицах со списком
   товаров (Себестоимость, Мой склад, Аналитика) — чтобы строки выглядели
   одинаково независимо от количества остальных столбцов в конкретной
   таблице. Раньше ширина была случайной (авто-раскладка таблицы отдаёт
   этой колонке тем меньше места, чем больше в таблице других столбцов). */
.col-name { width: 320px; }
.truncate1 {
  display: block;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; }
.kv dt { color: var(--color-muted); }
.kv dd { margin: 0; }

/* ---------- Авторизация ---------- */

.auth-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  width: 100%;
  max-width: 360px;
}
.auth-card__title { text-align: center; margin-bottom: 1.25rem; }

/* ---------- Себестоимость ---------- */

.costs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.costs-header h1 { margin: 0; }
.costs-sync { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  display: block;
}
.stat-tile:hover { text-decoration: none; border-color: var(--color-ink); }
.stat-tile--active { border-color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ink); }
.stat-tile--warn .stat-tile__value { color: var(--color-error); }
.stat-tile--static { cursor: default; }
.stat-tile__value { font: 700 1.4rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.stat-tile__label { font-size: 0.8rem; color: var(--color-muted); margin-top: 0.15rem; }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.metric-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.metric-tile__name { font-size: 0.85rem; font-weight: 600; }
.metric-tile__sku { font-size: 0.75rem; color: var(--color-muted); }
.metric-tile__value { font-size: 1.5rem; font-weight: 700; }
.metric-tile__value--bad { color: var(--color-error); }
.metric-tile__footer { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; }
.metric-switcher { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.costs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.25rem 0;
}
.costs-search {
  flex: 1 1 240px;
  min-width: 180px;
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
}
.chip:hover { border-color: var(--color-ink); color: var(--color-text); }
.chip--active { border-color: var(--color-ink); color: var(--color-on-ink); background: var(--color-ink); font-weight: 600; }
.costs-sort {
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.thumb { border-radius: var(--radius-sm); object-fit: cover; background: var(--color-surface-alt); }
/* Стандартный размер фото в строке таблицы (Себестоимость/Склад/заказ поставщику) -
   40px, с обычным паддингом ячейки (0.5rem) вокруг даёт небольшой зазор сверху/снизу,
   не растягивая строку так же плотно, как раньше (было 56/48px). */
.thumb--empty { width: 40px; height: 40px; background: var(--color-border); }

.offer-id { font-variant-numeric: tabular-nums; color: var(--color-muted); font-size: 0.88rem; }
.chevron-btn { background: none; border: none; cursor: pointer; padding: 0.15rem 0.3rem; vertical-align: middle; }
.chevron { display: inline-block; color: var(--color-muted); transition: transform 0.15s ease; }
.chevron--open { transform: rotate(90deg); }

.row--no-cost { box-shadow: inset 3px 0 0 var(--color-error); }
.row--archived { opacity: 0.6; }

.cost-cell { min-width: 140px; }
.cost-value {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  padding: 0.2rem 0.35rem;
  border-radius: var(--radius-sm);
}
.cost-value:hover { background: var(--color-surface-alt); }
.cost-edit-form { display: flex; gap: 0.35rem; align-items: center; }
.cost-edit-form input[type="text"] {
  width: 100px;
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

.badge { font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 999px; margin-left: 0.4rem; }
.badge--ok { background: var(--color-ok-bg); color: var(--color-ok); }
.badge--error { background: var(--color-error-bg); color: var(--color-error); }
.badge--warn { background: var(--color-warn-bg); color: var(--color-warn); }
.badge--muted { background: var(--color-surface-alt); color: var(--color-muted); }

.text-ok { color: var(--color-ok); }
.text-error { color: var(--color-error); }

.import-export { margin-top: 0.5rem; max-width: 640px; }
.import-export__body { display: flex; flex-direction: column; gap: 1rem; padding-top: 0.5rem; }

.data-table--compact th, .data-table--compact td { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
/* Ниже строка, чем базовый паддинг таблицы, но фото в ячейке (40px, см. .thumb)
   не трогаем - только вертикальный паддинг вокруг него ужимаем. Себестоимость/
   Склад/Аналитика - три таблицы со списком товаров. */
.data-table--tight-rows th, .data-table--tight-rows td { padding-top: 0.25rem; padding-bottom: 0.25rem; }
/* Числа/бейджи в этих таблицах не должны переноситься на 2 строки (ломает
   высоту строки, которую мы специально ужимали) - колонка просто станет
   пошире под самое длинное значение. Название по-прежнему обрезается
   многоточием через .truncate1, тут это не мешает. */
.data-table--tight-rows td { white-space: nowrap; }

/* Столбец «Свой склад» в Оборачиваемости — визуально выделяем среди остальных
   остатков (на Uzum/накладные/в пути), чтобы сразу было видно физический
   остаток на своём складе. */
.col-own-stock { background: var(--color-accent-tint); }

.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.history-content { padding: 0.75rem 0; }

/* ---------- Склад ---------- */

h3 { font-size: 1rem; margin: 1.1rem 0 0.5rem; }

.stock-tabs { margin: 0.25rem 0 0.5rem; }

.stock-row { cursor: pointer; }
.stock-row:hover { background: var(--color-surface-alt); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  overflow-y: auto;
}
.modal {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
}
.modal__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--color-muted);
  padding: 0.25rem 0.5rem;
}
.modal__close:hover { color: var(--color-text); }

.stock-modal-header { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 1rem; }
.stock-modal-header h2 { margin: 0; }

.batch-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.batch-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; }
.batch-card--spent { opacity: 0.55; }
.batch-card__head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; cursor: pointer; flex-wrap: wrap; }
.batch-card__body { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--color-border); display: flex; flex-direction: column; gap: 0.5rem; }
.batch-consumptions { margin: 0; padding-left: 1.2rem; font-size: 0.85rem; color: var(--color-muted); }

.incoming-list { display: flex; flex-direction: column; gap: 0.75rem; }
.incoming-card__head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.incoming-card__eta { font-weight: 600; white-space: nowrap; }
.incoming-card__stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* ---------- Задачи ---------- */

.btn--ok { background: var(--color-ok); border-color: var(--color-ok); color: var(--color-on-ink); }
.btn--ok:hover { opacity: 0.9; }
.btn--danger { background: var(--color-error-bg); border-color: var(--color-error-bg); color: var(--color-error); }
.btn--danger:hover { background: var(--color-error); color: var(--color-on-ink); }

.icon-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
}
.icon-btn:hover { background: var(--color-surface-alt); color: var(--color-text); border-color: var(--color-border); }
.icon-btn--danger:hover { color: var(--color-error); }

.task-overview-board { margin-bottom: 1.5rem; }
.task-overview-board h2 { margin-bottom: 0.6rem; }
.task-overview-board h2 a { color: var(--color-text); }

.task-board { overflow-x: auto; padding-bottom: 0.5rem; }
.task-board__columns { display: flex; gap: 0.9rem; align-items: flex-start; min-height: 60px; }

.task-column {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 260px;
  flex-shrink: 0;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background-color 0.12s ease;
}
.task-column--over { background: var(--color-accent-tint); }
.task-column--done { opacity: 0.92; }
.task-column--new {
  width: 200px;
  flex-shrink: 0;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 0.7rem;
  display: flex;
  gap: 0.4rem;
  align-self: flex-start;
}
.task-column--new input { flex: 1; min-width: 0; }

.task-column__header { display: flex; flex-direction: column; gap: 0.35rem; }
.task-column__title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.task-column__title { font-weight: 600; font-size: 0.92rem; }
.task-column__count { color: var(--color-muted); font-size: 0.8rem; }
.task-column__controls { display: flex; gap: 0.15rem; }
.task-column__rename { display: flex; gap: 0.3rem; }
.task-column__rename input { flex: 1; min-width: 0; padding: 0.3rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }

.task-column__list { display: flex; flex-direction: column; gap: 0.5rem; min-height: 8px; }

.task-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  cursor: grab;
  box-shadow: var(--shadow-sm);
}
.task-card:hover { border-color: var(--color-accent); }
.task-card--dragging { opacity: 0.4; }
.task-card--done { opacity: 0.6; }
.task-card--done .task-card__title { text-decoration: line-through; }
.task-card__title { font-size: 0.88rem; margin-bottom: 0.3rem; }
.task-card__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.76rem; color: var(--color-muted); }
.task-card__due { padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--color-bg); }
.task-card__due--overdue { background: var(--color-error-bg); color: var(--color-error); }

.task-column__add-btn {
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem;
  width: 100%;
  text-align: left;
}
.task-column__add-btn:hover { color: var(--color-text); border-color: var(--color-accent); }
.task-column__add form { display: flex; flex-direction: column; gap: 0.4rem; }
.task-column__add input[type="text"],
.task-column__add select,
.task-column__add input[type="date"] {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.task-column__add-actions { display: flex; gap: 0.4rem; }

.task-modal-form { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.75rem; }
.task-modal-title-input { font: inherit; font-size: 1.15rem; font-weight: 600; padding: 0.4rem 0.5rem; border: 1px solid transparent; border-radius: var(--radius-sm); }
.task-modal-title-input:hover, .task-modal-title-input:focus { border-color: var(--color-border); }
.task-modal-form textarea {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.form-grid--row { flex-direction: row; max-width: none; }
.form-grid--row label { flex: 1; }
.task-modal-saved { margin-left: 0.5rem; color: var(--color-ok); font-size: 0.85rem; }
.task-modal-meta { font-size: 0.85rem; margin-bottom: 0.75rem; }
.task-modal-actions { display: flex; gap: 0.6rem; margin-bottom: 1.25rem; }

.task-comments { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.75rem; }
.task-comment { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; }
.task-comment__meta { font-size: 0.8rem; margin-bottom: 0.2rem; }
.task-comment__body { font-size: 0.9rem; white-space: pre-wrap; }
.task-comment-form { display: flex; flex-direction: column; gap: 0.4rem; }
.task-comment-form textarea {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.tasks-view-tabs { margin: 0.25rem 0 0.5rem; }

.task-list-add { margin-bottom: 0.75rem; }
.task-list-add__form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.task-list-add__form input[type="text"],
.task-list-add__form input[type="date"],
.task-list-add__form select {
  font: inherit;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.task-list-add__form input[type="text"] { flex: 1; min-width: 180px; }

.task-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.task-table th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

/* ---------- WISELL ---------- */
/* Visual language borrowed from Notion Calendar: pastel tinted event cards
   with a solid left accent bar, compact rounded corners, hairline gridlines,
   an hour ruler, today's column picked out with an accent top border. */

:root {
  /* Палитра категорий — цвет не привязан к конкретному названию колонки YouGile
     (их можно переименовывать/добавлять там), а вычисляется хэшем названия
     (см. wisell_service.category_class), стабильно попадая в один из 8 слотов. */
  --wisell-cat0: #8b5cf6; --wisell-cat0-bg: #f5f0ff;
  --wisell-cat1: #0ea5e9; --wisell-cat1-bg: #eaf7fd;
  --wisell-cat2: #f59e0b; --wisell-cat2-bg: #fef6e7;
  --wisell-cat3: #10b981; --wisell-cat3-bg: #e9fbf3;
  --wisell-cat4: #ec4899; --wisell-cat4-bg: #fdeef6;
  --wisell-cat5: #6366f1; --wisell-cat5-bg: #eef0fe;
  --wisell-cat6: #ef4444; --wisell-cat6-bg: #fdecec;
  --wisell-cat7: #64748b; --wisell-cat7-bg: #f1f4f7;
  --wisell-now: #ef4444;
}

.wisell-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.wisell-sidebar { flex: 0 0 220px; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.wisell-main { flex: 1; min-width: 0; }
.wisell-sidebar__heading {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.wisell-minical {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem;
}
.wisell-minical__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.82rem;
}
.wisell-minical__nav {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
}
.wisell-minical__nav:hover { background: var(--color-surface-alt); color: var(--color-accent); }
.wisell-minical__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.65rem;
  color: var(--color-muted);
  margin-bottom: 0.2rem;
}
.wisell-minical__grid { display: flex; flex-direction: column; gap: 2px; }
.wisell-minical__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; border-radius: var(--radius-sm); }
.wisell-minical__week--shown { background: var(--color-surface-alt); }
.wisell-minical__cell {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.74rem;
  padding: 0.32rem 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.wisell-minical__cell:hover { background: var(--color-surface-alt); }
.wisell-minical__cell--muted { color: var(--color-muted); opacity: 0.5; }
.wisell-minical__cell--today { background: var(--color-accent); color: #fff; font-weight: 600; }

.wisell-categories {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem;
}
.wisell-categories__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wisell-category-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.3rem 0.3rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--color-text);
}
.wisell-category-toggle:hover,
.wisell-category-toggle--menu { background: var(--color-surface-alt); }

/* Иконки «···» и глаз — 14px контурные, как в Notion Calendar: видны при
   наведении на строку; перечёркнутый глаз скрытой категории виден всегда. */
.wisell-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--color-muted);
  cursor: pointer;
  flex: 0 0 auto;
}
.wisell-icon-btn:hover { background: var(--color-border-soft); color: var(--color-text); }
.wisell-icon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.wisell-category-toggle__more svg { fill: currentColor; stroke: none; }
.wisell-category-toggle__more,
.wisell-category-toggle__eye { visibility: hidden; }
.wisell-category-toggle:hover .wisell-category-toggle__more,
.wisell-category-toggle:hover .wisell-category-toggle__eye,
.wisell-category-toggle--menu .wisell-category-toggle__more,
.wisell-category-toggle--off .wisell-category-toggle__eye { visibility: visible; }
.wisell-eye-off { display: none; }
.wisell-category-toggle--off .wisell-eye-on { display: none; }
.wisell-category-toggle--off .wisell-eye-off { display: block; }

.wisell-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 20;
  min-width: 190px;
  padding: 0.3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.wisell-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.82rem;
  color: var(--color-text);
  cursor: pointer;
}
.wisell-menu__item:hover { background: var(--color-surface-alt); }
.wisell-category-toggle__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--color-accent); }
.wisell-category-toggle__dot--cat0 { background: var(--wisell-cat0); }
.wisell-category-toggle__dot--cat1 { background: var(--wisell-cat1); }
.wisell-category-toggle__dot--cat2 { background: var(--wisell-cat2); }
.wisell-category-toggle__dot--cat3 { background: var(--wisell-cat3); }
.wisell-category-toggle__dot--cat4 { background: var(--wisell-cat4); }
.wisell-category-toggle__dot--cat5 { background: var(--wisell-cat5); }
.wisell-category-toggle__dot--cat6 { background: var(--wisell-cat6); }
.wisell-category-toggle__dot--cat7 { background: var(--wisell-cat7); }
.wisell-category-toggle__label { flex: 1; }
.wisell-category-toggle--off .wisell-category-toggle__dot,
.wisell-category-toggle--off .wisell-category-toggle__label { opacity: 0.45; }

.wisell-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.wisell-nav__range { font-weight: 600; }

.wisell-timeline-wrap {
  display: flex;
  gap: 0;
  overflow-x: auto;
  margin-bottom: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.wisell-hours {
  flex: 0 0 3.6rem;
  border-right: 1px solid var(--color-border);
  padding-top: 2.4rem;
}
/* Метки часов позиционируются внутри этой обёртки, а не .wisell-hours: у
   absolute-детей отсчёт идёт от края padding-box, и без обёртки метки съезжали
   вверх на высоту шапки дня (2.4rem) относительно линий сетки. */
.wisell-hours__inner { position: relative; }
.wisell-hour-label {
  position: absolute;
  right: 0.5rem;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--color-muted);
}

.wisell-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  flex: 1;
}
.wisell-day {
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}
.wisell-day:last-child { border-right: none; }
.wisell-day--today { background: var(--color-accent-tint); }
@keyframes wisell-flash {
  0% { background: transparent; }
  50% { background: var(--color-error-bg); }
  100% { background: transparent; }
}
.wisell-day--flash { animation: wisell-flash 2s ease; }
.wisell-day__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  height: 2.4rem;
  box-sizing: border-box;
}
.wisell-day--today .wisell-day__header { color: var(--color-accent); }
.wisell-day__add-btn {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
}
.wisell-day__add-btn:hover { background: var(--color-surface-alt); color: var(--color-accent); }

.wisell-timeline { position: relative; cursor: cell; user-select: none; }

/* Линия текущего времени (рисует wisellRenderNowLine в app.js). */
.wisell-now {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--wisell-now);
  opacity: 0.35;
  z-index: 4;
  pointer-events: none;
}
.wisell-now--today { border-top-width: 2px; opacity: 1; margin-top: -1px; }
.wisell-now--today::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wisell-now);
}
.wisell-now-label {
  position: absolute;
  right: 0.3rem;
  transform: translateY(-50%);
  background: var(--wisell-now);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  z-index: 2;
}

/* Выделенный мышью диапазон / черновик дела, пока открыта панель. */
.wisell-selection {
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-accent);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}

/* Правая панель нового дела. */
.wisell-layout--panel .wisell-main { margin-right: 360px; }
.wisell-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.wisell-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem 0.4rem;
}
.wisell-panel__head .modal__close { position: static; }
.wisell-panel__kind { font-weight: 600; font-size: 0.85rem; color: var(--color-muted); }
.wisell-panel__form { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 1rem 1rem; }
.wisell-panel__title {
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
  margin-bottom: 0.4rem;
}
.wisell-panel__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
}
.wisell-panel__row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.wisell-panel__icon { width: 1.2rem; text-align: center; opacity: 0.7; }
.wisell-panel input[type="time"],
.wisell-panel input[type="date"],
.wisell-panel select,
.wisell-panel textarea {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.wisell-panel select { flex: 1; }
.wisell-panel textarea { resize: vertical; }
.wisell-panel__title:focus,
.wisell-panel input:focus,
.wisell-panel select:focus,
.wisell-panel textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.wisell-panel__duration { font-size: 0.78rem; color: var(--color-muted); white-space: nowrap; }
.wisell-panel__duration--bad { color: var(--color-error); }
.wisell-panel__warn { color: var(--color-error); }
.wisell-panel .task-column__add-actions { padding-top: 0.5rem; }
.wisell-gridline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--color-border);
}

.wisell-block {
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  background: repeating-linear-gradient(
    -45deg, var(--color-surface-alt), var(--color-surface-alt) 4px,
    var(--color-border) 4px, var(--color-border) 5px
  );
  border-left: 3px solid var(--color-muted);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.4rem;
  font-size: 0.72rem;
  color: var(--color-muted);
  overflow: hidden;
  box-sizing: border-box;
}
.wisell-block__label { display: block; font-weight: 600; }
.wisell-block__time { display: block; font-size: 0.68rem; }

.wisell-slot {
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-tint);
  border-radius: var(--radius-sm);
  padding: 0.15rem 1.3rem 0.15rem 0.4rem;
  font-size: 0.74rem;
  overflow: hidden;
  box-sizing: border-box;
}
.wisell-slot__label { display: block; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.wisell-slot__time { display: block; font-size: 0.68rem; color: var(--color-muted); }
.wisell-slot__delete {
  position: absolute;
  top: 0.1rem;
  right: 0.25rem;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0.1rem;
  line-height: 1;
}
.wisell-slot__delete:hover { color: var(--color-error); }

.wisell-slot { cursor: grab; }
.wisell-slot--dragging { opacity: 0.4; cursor: grabbing; }
.wisell-timeline--over { background: var(--color-accent-tint); }
.wisell-slot--synced { border-left-style: dashed; }
/* Короткая карточка (≈30 мин): название и время в одну строку, иначе время обрезается. */
.wisell-slot--short { white-space: nowrap; text-overflow: ellipsis; }
.wisell-slot--short .wisell-slot__label,
.wisell-slot--short .wisell-slot__time { display: inline; }
.wisell-slot--short .wisell-slot__time { margin-left: 0.3rem; }

.wisell-slot--cat0 { border-left-color: var(--wisell-cat0); background: var(--wisell-cat0-bg); }
.wisell-slot--cat1 { border-left-color: var(--wisell-cat1); background: var(--wisell-cat1-bg); }
.wisell-slot--cat2 { border-left-color: var(--wisell-cat2); background: var(--wisell-cat2-bg); }
.wisell-slot--cat3 { border-left-color: var(--wisell-cat3); background: var(--wisell-cat3-bg); }
.wisell-slot--cat4 { border-left-color: var(--wisell-cat4); background: var(--wisell-cat4-bg); }
.wisell-slot--cat5 { border-left-color: var(--wisell-cat5); background: var(--wisell-cat5-bg); }
.wisell-slot--cat6 { border-left-color: var(--wisell-cat6); background: var(--wisell-cat6-bg); }
.wisell-slot--cat7 { border-left-color: var(--wisell-cat7); background: var(--wisell-cat7-bg); }

.wisell-blocks__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.wisell-blocks__header h3 { margin: 0; }
.wisell-blocks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.wisell-blocks__list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.88rem; }

.wisell-days { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wisell-days .checkbox-label { flex-direction: row; }

.wisell-tasks__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.wisell-tasks__header h3 { margin: 0; }
.wisell-tasks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.wisell-task { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.wisell-task__title { flex: 1; }
.wisell-task__column { font-size: 0.74rem; color: var(--color-muted); white-space: nowrap; }

.task-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--color-border); vertical-align: top; font-size: 0.88rem; }
.task-table__check-col { width: 2.2rem; }
.task-row { cursor: pointer; }
.task-row:hover { background: var(--color-surface-alt); }
.task-row:last-child td { border-bottom: none; }
.task-row--done .task-row__title { text-decoration: line-through; color: var(--color-muted); }
.task-row__date { white-space: nowrap; }
.task-row__title { font-weight: 500; }
.task-row__desc { font-size: 0.8rem; margin-top: 0.15rem; }
.task-row__due--overdue { color: var(--color-error); font-weight: 600; }

.task-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.task-check:hover { border-color: var(--color-accent); }
.task-check--done { background: var(--color-ok); border-color: var(--color-ok); }

.status-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--color-bg);
  font-size: 0.78rem;
  white-space: nowrap;
}
.status-pill--done { background: var(--color-ok-bg); color: var(--color-ok); }

/* ---------- Аналитика: сводная таблица с группами колонок (редизайн 2026-10) ---------- */

.num { text-align: right; }
/* td тоже: общее правило «.data-table th, .data-table td { text-align: left }»
   специфичнее голого .num и иначе перебивает выравнивание чисел вправо. */
.data-table th.num, .data-table td.num { text-align: right; }
.cell-stack { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.cell-stack--left { align-items: flex-start; display: flex; }
.cell-sub { font-size: 0.78rem; color: var(--color-muted); font-weight: 400; }

/* Две строки шапки: групповая (Остатки / Запас / Цена) и названия колонок.
   Липнет вся шапка целиком, иначе две строки th с одинаковым top налезают друг на друга. */
.data-table--grouped.data-table--sticky-head thead { position: sticky; top: var(--sticky-toolbar-h, 0px); z-index: 11; }
.data-table--grouped.data-table--sticky-head thead th { position: static; }
.data-table--grouped thead tr.thead-groups th {
  color: var(--color-text);
  font-size: 0.78rem;
  padding-top: 0.6rem;
  padding-bottom: 0.3rem;
  box-shadow: inset 0 -2px 0 var(--color-ink);
}
.data-table--grouped thead tr:not(.thead-groups) th { box-shadow: inset 0 -1px 0 var(--color-border); font-weight: 500; }
.data-table--grouped .col-group-start { padding-left: 1.1rem; }

.stock-bar { position: relative; display: block; width: 96px; height: 4px; margin-top: 3px; border-radius: 2px; background: var(--color-border-soft); }
.stock-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 2px; background: var(--color-muted); }
.stock-bar--low .stock-bar__fill { background: var(--color-error); }
.stock-bar::after { content: ""; position: absolute; left: 33.33%; top: -3px; width: 1px; height: 10px; background: var(--color-ink); }
.days--low { color: var(--color-error); font-weight: 700; }

.rec--up { color: var(--color-ok); font-weight: 600; }
.rec--down { color: var(--color-error); font-weight: 600; }

.act-list { display: flex; flex-wrap: wrap; gap: 4px; }
.act { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 5px; white-space: nowrap; }
.act--ship { background: var(--color-warn-bg); color: var(--color-warn); }
.act--reorder { background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.act--raise_price { background: var(--color-ok-bg); color: var(--color-ok); }
.act--lower_price { background: var(--color-error-bg); color: var(--color-error); }

.chip__count { font-variant-numeric: tabular-nums; opacity: 0.7; margin-left: 0.15rem; }

/* «Как считаются колонки» — всплывающая подсказка вместо абзаца над таблицей. */
.hint-pop { position: relative; margin-left: auto; font-size: 0.85rem; color: var(--color-muted); }
.hint-pop > summary { cursor: pointer; padding: 0.3rem 0; }
.hint-pop__body {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: min(460px, 90vw);
  padding: 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  line-height: 1.5;
}
.hint-pop__body p { margin: 0 0 0.6rem; }
.hint-pop__body p:last-child { margin-bottom: 0; }

/* ---------- Шапка страницы, плашки, панели импорта (редизайн 2026-10) ---------- */

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.page-header h1 { margin: 0; }
.page-header__text { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.page-header__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.page-sub { margin: 0; color: var(--color-muted); font-size: 0.95rem; max-width: 72ch; }

.notice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.8rem 1.1rem; border-radius: var(--radius); }
.notice--warn { background: var(--color-warn-bg); color: var(--color-warn-ink); }
.notice--warn .btn--secondary { background: transparent; border-color: var(--color-warn); color: var(--color-warn-ink); }

.panel-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 0.75rem; }
.import-panel { display: flex; flex-direction: column; gap: 0.75rem; max-width: 760px; margin-bottom: 0.75rem; }
.import-panel h2 { margin: 0; }
.import-panel .hint { font-size: 0.85rem; margin: 0; }

.toolbar-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-muted); margin-left: auto; }

.tab__count { color: var(--color-muted); font-weight: 500; margin-left: 0.2rem; }
.chip__count--bad { color: var(--color-error); opacity: 1; font-weight: 700; }
.chip--active .chip__count--bad { color: var(--color-on-ink-bad); }
.qty-strong { font-weight: 600; }

.history-toggle { font-size: 0.78rem; color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; margin-left: 0.4rem; padding: 0; }
.history-toggle:hover { color: var(--color-text); }
.cost-cell .cost-edit-form { justify-content: flex-end; }
.cost-value { background: var(--color-surface-alt); min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.cost-value:hover { border-color: var(--color-ink); background: var(--color-surface); }
.cost-value--empty { background: var(--color-warn-bg); color: var(--color-warn); border-color: var(--color-warn-border); }
.row--no-cost { box-shadow: none; }

.tag { display: inline-block; margin-left: 0.4rem; font-size: 0.72rem; font-weight: 600; padding: 0 0.4rem; border-radius: 4px; border: 1px solid var(--color-border); color: var(--color-muted); }
.order-link { color: var(--color-text); font-weight: 600; }

/* Статус заказа поставщику — четыре шага: Создан → На согласовании → В пути → Оприходован. */
.steps { display: inline-flex; gap: 3px; }
.steps__bar { width: 44px; height: 5px; border-radius: 3px; background: var(--color-border-soft); }
.steps__bar--done { background: var(--color-ink); }
.steps__bar--now { background: var(--color-accent); }
.steps__bar--final { background: var(--color-ok); }
.steps__label { font-size: 0.82rem; font-weight: 600; }

/* ---------- Финансы: строка-формула итогов (редизайн 2026-10) ---------- */

.equation {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 1.1rem 1.4rem;
  margin-bottom: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.equation__term { display: flex; flex-direction: column; gap: 0.4rem; }
.equation__label { font-size: 0.85rem; color: var(--color-muted); }
.equation__value { font: 700 1.45rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.equation__op { font: 700 1.45rem/1 var(--font-display); color: var(--color-muted); }
.equation__note { margin-left: auto; font-size: 0.85rem; color: var(--color-muted); }

.form-grid--wide { max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.25rem; }
.form-grid--wide .btn-row { grid-column: 1 / -1; }
.num-plain { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stub-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.card--stub h2 { font-size: 1rem; }

@media (max-width: 640px) {
  .form-grid--wide { grid-template-columns: 1fr; }
  .equation__note { margin-left: 0; width: 100%; }
}

/* ---------- Задачи (редизайн 2026-10) ---------- */

.task-column { background: var(--color-column); border: 0; padding: 0.8rem; }
.task-column--over { background: var(--color-accent-tint); box-shadow: inset 0 0 0 2px var(--color-accent); }
.task-column__title { font: 700 0.85rem/1.2 var(--font-display); }
.task-column__count { font-variant-numeric: tabular-nums; }
/* Управление колонкой не отвлекает: видно при наведении или фокусе с клавиатуры. */
.task-column__controls { opacity: 0; transition: opacity 0.12s ease; }
.task-column:hover .task-column__controls,
.task-column__controls:focus-within { opacity: 1; }
@media (hover: none) { .task-column__controls { opacity: 1; } }

.task-card { box-shadow: none; padding: 0.7rem 0.75rem; }
.task-card:hover { border-color: var(--color-ink); }
.task-card__title { font-size: 0.9rem; font-weight: 500; line-height: 1.35; margin-bottom: 0.55rem; }
.task-card__meta { align-items: center; justify-content: space-between; }
.task-card__due { background: none; padding: 0; font-variant-numeric: tabular-nums; }
.task-card__due--overdue { background: none; color: var(--color-error); font-weight: 700; }
.task-card__assignee {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-border-soft); color: var(--color-text);
  font-size: 0.68rem; font-weight: 700; flex-shrink: 0;
}
.task-column__add-btn { border-color: var(--color-border-strong); }
.task-column__add-btn:hover { border-color: var(--color-ink); }
.task-column--new { border-color: var(--color-border-strong); }

.task-table { border-color: var(--color-border); }
.task-table th { background: var(--color-surface); color: var(--color-muted); font-size: 0.8rem; box-shadow: inset 0 -2px 0 var(--color-ink); border-bottom: 0; }
.task-table td { border-bottom-color: var(--color-border-soft); }
.task-check:hover { border-color: var(--color-ink); }
.task-overview-board h2 a { color: var(--color-text); }

/* ---------- Главная: площадки-ярлыки и Авито-бот (редизайн 2026-10) ---------- */

.page--home { max-width: 1100px; gap: 2rem; }
.home-section { display: flex; flex-direction: column; gap: 0.9rem; }
.home-section h1, .home-section h2 { margin: 0; }
.mp-rows { display: flex; flex-direction: column; gap: 0.75rem; }
.mp-row {
  --mp: var(--color-ink);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  align-items: center;
  gap: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--color-text);
}
.mp-row:hover { border-color: var(--color-ink); text-decoration: none; }
.mp-row--ozon { --mp: #0050e0; }
.mp-row--wb { --mp: #8b1b7c; }
.mp-row--uzum { --mp: #6420d0; }
.mp-row__label {
  position: relative;
  align-self: stretch;
  background: var(--mp);
  color: #fff;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.mp-row__label::after { content: ""; position: absolute; top: 1.1rem; right: 1.1rem; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.mp-row__name { font: 700 1.7rem/1 var(--font-display); letter-spacing: -0.02em; }
.mp-row__status { font-size: 0.85rem; }
.mp-row__stats { display: flex; gap: 2.5rem; padding: 1rem 0; }
.mp-row__stat { display: flex; flex-direction: column; gap: 0.35rem; }
.mp-row__num { font: 700 1.6rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.mp-row__caption, .mp-row__meta { font-size: 0.85rem; color: var(--color-muted); }
.mp-row__meta { padding-right: 1.2rem; text-align: right; }

.bot-panel { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.bot-panel__main { display: flex; flex-direction: column; gap: 0.8rem; }
.bot-panel__state { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; font-weight: 600; }
.bot-panel__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-size: 0.9rem; }
.bot-panel__checks li { display: flex; align-items: center; gap: 0.5rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot--ok { background: var(--color-ok); }
.dot--bad { background: var(--color-error); }
.dot--warn { background: #c98a1b; }
.dot--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-muted); }

@media (max-width: 760px) {
  .mp-row { grid-template-columns: 1fr; gap: 0; }
  .mp-row__stats, .mp-row__meta { padding: 0.9rem 1.2rem; text-align: left; }
}

/* ---------- Настройки: меню разделов слева (редизайн 2026-10) ---------- */

.page--settings { max-width: 1180px; }
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2rem; align-items: start; }
.settings-layout--single { grid-template-columns: minmax(0, 1fr); }
.settings-content { display: flex; flex-direction: column; gap: 1rem; min-width: 0; max-width: 860px; }
.settings-nav { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); color: var(--color-text-soft); font-size: 0.92rem; }
.settings-nav a:hover { background: var(--color-column); color: var(--color-text); text-decoration: none; }
.settings-nav a.is-active { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-border); }
.settings-nav__sep { height: 1px; background: var(--color-border); margin: 0.5rem 0.75rem; }

.mp-heading { display: flex; align-items: center; gap: 0.6rem; }
.mp-chip { display: inline-flex; align-items: center; height: 1.7rem; padding: 0 0.6rem; border-radius: 6px; color: #fff; font: 700 0.85rem/1 var(--font-display); }
.mp-chip--ozon { background: #0050e0; }
.mp-chip--wb { background: #8b1b7c; }
.mp-chip--uzum { background: #6420d0; }

@media (max-width: 860px) {
  .settings-layout { grid-template-columns: 1fr; gap: 1rem; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .settings-nav__sep { display: none; }
}

/* ---------- Аналитика: строка-сводка над таблицей, вход, мелочи (редизайн 2026-10) ---------- */

.panel-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0.25rem 0 0.5rem; }
.panel-bar__summary { font-size: 0.95rem; }
.panel-bar__summary b { font: 700 1.1rem/1 var(--font-display); font-variant-numeric: tabular-nums; margin-right: 0.2rem; }
.inline-search { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.inline-search label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--color-muted); }
.inline-search input[type="text"] { font: inherit; width: 320px; max-width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
p.notice { margin: 0 0 0.5rem; display: block; }

.badge { border-radius: 5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.card { box-shadow: none; }
.card--stub { background: transparent; border-style: dashed; }

.auth-card { box-shadow: none; padding: 2.25rem 2rem; }
.auth-card__brand { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.auth-card__logo { width: 44px; height: 44px; border-radius: 10px; background: var(--color-ink); color: var(--color-on-ink); display: flex; align-items: center; justify-content: center; font: 700 1.2rem/1 var(--font-display); }
.auth-card__title { margin: 0; text-align: center; }

/* ---------- Мобильная адаптация ---------- */

@media (max-width: 640px) {
  .main { padding: 1rem 0.85rem 2rem; }
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }

  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
  .data-table td {
    border-bottom: none;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .data-table--grouped thead { display: none; }
  .data-table td::before {
    content: attr(data-label);
    color: var(--color-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
  }
}

/* ---------- Конструктор заказа поставщику ---------- */

.builder-group { padding: 0; margin-bottom: 0.6rem; overflow: hidden; }
.builder-group__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
}
.builder-group__name { font-weight: 600; flex: 1; }
.builder-group__head input[type="checkbox"] { width: 20px; height: 20px; }
.builder-group__body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.builder-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-left: 1.6rem;
}
.builder-line__qty { width: 70px; }
.builder-line__price { width: 90px; }
.builder-line input[type="text"]:disabled { background: var(--color-surface-alt); color: var(--color-muted); }

/* ---------- Общие «Финансы» (/finance): ДДС, ОПиУ, Баланс ---------- */
.fin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.fin-toolbar__field { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-muted); }
.fin-toolbar__totals { margin-left: auto; font-size: 0.85rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.fin-toolbar .search-input { min-width: 220px; }
.fin-report { width: auto; min-width: 100%; }
.fin-report th, .fin-report td { white-space: nowrap; }
.fin-report .fin-report__label { position: sticky; left: 0; z-index: 2; background: var(--color-surface); min-width: 260px; max-width: 340px; white-space: normal; }
.fin-report thead th.fin-report__label { z-index: 12; }
.fin-report__total { font-weight: 600; background: var(--color-surface-alt); }
.fin-row--total td { font-weight: 700; background: var(--color-surface-alt); border-top: 1px solid var(--color-border); }
.fin-row--total .fin-report__label { background: var(--color-surface-alt); }
.fin-row--group td { font-weight: 600; }
.fin-row--pct td { color: var(--color-muted); font-style: italic; }
.fin-row--check td { color: var(--color-muted); }
.fin-row--bad td { color: var(--color-error); background: var(--color-error-bg); }
.fin-row--bad .fin-report__label { background: var(--color-error-bg); }
.fin-row--l1 .fin-report__label { padding-left: 1.4rem; }
.fin-row--l2 .fin-report__label { padding-left: 2.4rem; }
.fin-row--l3 .fin-report__label { padding-left: 3.4rem; }
.fin-row--l2 td, .fin-row--l3 td { font-size: 0.82rem; }
.fin-cell--neg { color: var(--color-error); }
.fin-cell--manual { background: var(--color-warn-bg); }
.fin-legend { padding: 0 0.3rem; border-radius: 4px; color: var(--color-text); }
.fin-hint { display: inline-block; width: 1.05em; height: 1.05em; line-height: 1.05em; text-align: center; border-radius: 50%; font-size: 0.7rem; background: var(--color-surface-alt); color: var(--color-muted); cursor: help; }
.fin-subtitle { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.fin-details { margin-top: 1.25rem; }
.fin-details summary { cursor: pointer; }
.fin-accrual-diff { color: var(--color-warn); font-weight: 600; }
.fin-settings input[type="text"], .fin-settings select { width: 100%; min-width: 0; padding: 0.3rem 0.45rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font: inherit; }
.fin-settings .fin-input--short { width: 4.5rem; }
.fin-settings__new td { background: var(--color-surface-alt); }

/* График «Активы по площадкам» (баланс /finance). Категориальные цвета — в
   фиксированном порядке площадок из справочника, «Без площадки» — нейтральный. */
.fin-series-0 { background: #a3a29b; }
.fin-series-1 { background: #2a78d6; }
.fin-series-2 { background: #eb6834; }
.fin-series-3 { background: #1baf7a; }
.fin-series-4 { background: #eda100; }
.fin-series-5 { background: #e87ba4; }
.fin-series-6 { background: #008300; }
.fin-series-7 { background: #6250d6; }
.fin-series-8 { background: #e34948; }
/* Фирменные цвета площадок (точки в балансе и график «Активы по площадкам»). */
.fin-series-ozon { background: #0050e0; }
.fin-series-ke   { background: #e3242b; }
.fin-series-ym   { background: #ff7a00; }
.fin-series-uzum { background: #6420d0; }
.fin-series-teez { background: #18a957; }
.fin-series-wb   { background: #cb11ab; }
.fin-chart { margin-bottom: 0.75rem; }
.fin-chart__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.82rem; color: var(--color-muted); margin-bottom: 0.75rem; }
.fin-chart__key { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-text); }
.fin-chart__swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.fin-chart__plot { position: relative; height: 220px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; border-bottom: 1px solid var(--color-border-soft); }
.fin-chart__zero { position: absolute; left: 0; right: 0; border-top: 1px solid var(--color-muted); z-index: 1; pointer-events: none; }
.fin-chart__col { position: relative; max-width: 48px; width: 100%; justify-self: center; }
.fin-chart__seg { position: absolute; left: 0; right: 0; box-shadow: inset 0 0 0 1px var(--color-surface); min-height: 1px; cursor: default; }
.fin-chart__seg:hover { filter: brightness(0.9); }
.fin-chart__seg--neg { opacity: 0.55; }
.fin-chart__labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 0.35rem; }
.fin-chart__label { text-align: center; font-size: 0.75rem; color: var(--color-muted); display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.fin-edit__label.fin-row--l1, .fin-edit__group.fin-row--l1 { padding-left: 1.4rem; }
.fin-edit__label.fin-row--l2, .fin-edit__group.fin-row--l2 { padding-left: 2.4rem; }
.fin-report th a { color: inherit; }
.fin-col-delete { margin: 0.15rem 0 0; }
.fin-col-delete__btn { background: none; border: 0; padding: 0; font: inherit; font-size: 0.72rem; font-weight: 400; color: var(--color-muted); cursor: pointer; text-decoration: underline; }
.fin-col-delete__btn:hover { color: var(--color-error); }

/* ---------- Баланс, вариант A ---------- */
.fin-bal th, .fin-bal td { padding-top: 0.42rem; padding-bottom: 0.42rem; }
.fin-bal th.fin-bal__now, .fin-bal td.fin-bal__now { background: var(--fin-now); }
.fin-bal tr.fin-bal__total td { background: var(--color-ink); color: var(--color-surface); font: 700 0.98rem var(--font-display); padding-top: 0.65rem; padding-bottom: 0.65rem; }
.fin-bal tr.fin-bal__total td.fin-bal__now { background: var(--color-ink); box-shadow: inset 0 -3px 0 var(--fin-now-mark); }
.fin-bal tr.fin-bal__total .fin-hint { background: transparent; color: inherit; }
.fin-bal tr.fin-bal__block td { font-weight: 700; padding-top: 0.6rem; padding-bottom: 0.6rem; border-top: 6px solid var(--color-bg); }
.fin-bal tr.fin-bal__block--fixed td { background: var(--fin-b-fixed); }
.fin-bal tr.fin-bal__block--fixed td:first-child { color: var(--fin-b-fixed-ink); }
.fin-bal tr.fin-bal__block--stock td { background: var(--fin-b-stock); }
.fin-bal tr.fin-bal__block--stock td:first-child { color: var(--fin-b-stock-ink); }
.fin-bal tr.fin-bal__block--cash td { background: var(--fin-b-cash); }
.fin-bal tr.fin-bal__block--cash td:first-child { color: var(--fin-b-cash-ink); }
.fin-bal tr.fin-bal__block--debt td { background: var(--fin-b-debt); }
.fin-bal tr.fin-bal__block--debt td:first-child { color: var(--fin-b-debt-ink); }
.fin-bal tr.fin-bal__sub td { font-weight: 600; background: var(--color-surface-alt); }
.fin-bal tr.fin-bal__sub td:first-child { padding-left: 1.6rem; }
.fin-bal tr.fin-bal__leaf td { border-bottom: 1px solid var(--color-border-soft); }
.fin-bal tr.fin-bal__leaf td:first-child { color: var(--color-muted); padding-left: 2.1rem; }
.fin-bal tr.fin-bal__leaf--l2 td:first-child, .fin-bal tr.fin-bal__leaf--l3 td:first-child { padding-left: 2.9rem; }
.fin-bal__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; vertical-align: 1px; }
.fin-bal__tag { display: block; font-size: 0.68rem; color: var(--color-muted); font-weight: 400; }
.fin-bal__zero { color: var(--fin-faint); }
.fin-bal td.fin-bal__carried, .fin-bal__carried { color: var(--fin-faint); font-style: italic; }
.fin-bal td.fin-bal__manual, .fin-bal__manual { box-shadow: inset 0 0 0 2px var(--fin-now-mark); }
.fin-bal__legend { padding: 0 0.3rem; border-radius: 4px; }


/* ================= Тёмная тема =================
   Только переопределение переменных: компоненты берут цвета из :root, поэтому
   отдельных «тёмных» правил почти нет. Включается html[data-theme="dark"]
   (кнопка «Тёмная тема» внизу бокового меню, выбор хранится в браузере). */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0f1411;
  --color-surface: #181f1b;
  --color-surface-alt: #202823;
  --color-border: #343e38;
  --color-border-soft: #28302b;
  --color-text: #e3e9e5;
  --color-muted: #98a59d;
  --color-accent: #3b4b42;
  --color-accent-hover: #4b5d53;
  --color-accent-tint: #222b26;
  --color-ink: #e3e9e5;
  --color-ink-hover: #ffffff;
  --color-error: #f0817a;
  --color-error-bg: #3a1d1b;
  --color-ok: #6cc795;
  --color-ok-bg: #173022;
  --color-warn: #e9b35a;
  --color-warn-bg: #3a2c12;
  --color-warn-ink: #f0d39a;
  --color-warn-border: #6b5222;
  --color-on-ink: #0f1411;
  --color-on-ink-bad: #a3231b;
  --color-column: #1c231f;
  --color-border-strong: #4a554e;
  --color-text-soft: #c3ccc6;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);

  --fin-now: #2e2a1c;
  --fin-faint: #5d6862;
  --fin-b-fixed: #222a25;  --fin-b-fixed-ink: #98a59d;
  --fin-b-stock: #1c2c22;  --fin-b-stock-ink: #6cc795;
  --fin-b-cash: #1c2735;   --fin-b-cash-ink: #7fb2e8;
  --fin-b-debt: #282135;   --fin-b-debt-ink: #b79ae0;

  --wisell-cat0-bg: #2a2240; --wisell-cat1-bg: #15303d; --wisell-cat2-bg: #3a2c12; --wisell-cat3-bg: #13322a;
  --wisell-cat4-bg: #3a1a2c; --wisell-cat5-bg: #1f2245; --wisell-cat6-bg: #3a1d1b; --wisell-cat7-bg: #232a30;
}
html[data-theme="dark"] body[data-mp="ozon"] { --color-accent: #2a6cf0; --color-accent-tint: #172440; }
html[data-theme="dark"] body[data-mp="wb"]   { --color-accent: #a8329a; --color-accent-tint: #2e1a2c; }
html[data-theme="dark"] body[data-mp="uzum"] { --color-accent: #7a3ae6; --color-accent-tint: #261c3d; }
/* Итоговая полоса баланса: в тёмной теме графит светлый — текст на ней тёмный. */
html[data-theme="dark"] .fin-bal tr.fin-bal__total td { color: var(--color-on-ink); }

/* Переключатель темы внизу бокового меню */
.theme-toggle { width: 100%; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.theme-toggle .theme-toggle__dark, html[data-theme="dark"] .theme-toggle .theme-toggle__light { display: none; }
html[data-theme="dark"] .theme-toggle .theme-toggle__dark { display: inline; }

.alert--hiding { opacity: 0; transition: opacity 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .alert--hiding { transition: none; } }

/* Баланс: сворачивание снимков по годам */
.fin-report [hidden] { display: none !important; }
.fin-year__btn { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.1rem 0.45rem; font: 600 0.8rem var(--font-sans); color: var(--color-text); cursor: pointer; white-space: nowrap; }
.fin-year__btn:hover { border-color: var(--color-ink); }
.fin-year__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fin-year__btn--open { display: block; margin: 0 0 0.25rem auto; font-weight: 500; color: var(--color-muted); }
.fin-report th.fin-year__sum, .fin-report td.fin-year__sum { box-shadow: inset 2px 0 0 var(--color-border); }

/* ---------- ABC-анализ (Аналитика Uzum) ---------- */
.abc-summary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 0.75rem; font-variant-numeric: tabular-nums; }
.abc-summary__item { display: flex; align-items: center; gap: 0.3rem; }
.abc-summary__label { color: var(--color-muted); margin-right: 0.25rem; }
.abc-letter { display: inline-block; min-width: 1.5em; padding: 0.05rem 0.3rem; border-radius: 4px; text-align: center; font-weight: 700; font-size: 0.85rem; }
.abc-letter--a { background: var(--color-ok-bg); color: var(--color-ok); }
.abc-letter--b { background: var(--color-warn-bg); color: var(--color-warn); }
.abc-letter--c { background: var(--color-error-bg); color: var(--color-error); }
.abc-table .abc-col { text-align: center; }
.abc-result { font: 700 0.95rem var(--font-mono, monospace); letter-spacing: 0.08em; }
.abc-total th { font-weight: 700; background: var(--color-surface-alt); }
.abc-filter { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--color-muted); }