/* ============================================================
   Земледел — компоненты
   Каждый блок соответствует будущему React-компоненту.
   ============================================================ */

/* ------------------------------------------------------------
   Rail — боковая навигация
   React: <Rail active favourites />
   ------------------------------------------------------------ */
.rail {
  width: var(--rail-width);
  flex: 0 0 var(--rail-width);
  background: var(--rail);
  border-radius: var(--rail-radius);
  padding: 18px 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: sticky;
  top: var(--rail-inset);
  height: calc(100vh - var(--rail-inset) * 2);
  z-index: 40;
}

.rail-logo {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--surface);
  display: grid; place-items: center;
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform var(--transition);
}
.rail-logo:hover { transform: scale(1.05); }
.rail-logo svg { width: 34px; height: 34px; }

.rail-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  margin: -6px 0 10px;
  border: 2px solid var(--accent);
  background: var(--rail-deep) url("../img/avatar.svg") center / cover no-repeat;
  cursor: pointer;
}

.rail-sep { width: 34px; height: 1px; background: var(--border-dark); margin: 8px 0; flex: 0 0 auto; }

/* Аватарка организации: инициалы на фирменном цвете */
.org-ava {
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--on-dark); font-weight: 700;
  letter-spacing: .02em; flex: 0 0 auto;
}

/* ------------------------------------------------------------
   Переключатель организации — единственное место, в рейле
   React: <OrgSwitcher> внутри <Rail>
   ------------------------------------------------------------ */
.rail-org { position: relative; width: 100%; padding: 0 8px; margin-bottom: 6px; flex: 0 0 auto; }
.rail-org-btn {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 6px;
  border-radius: var(--radius-block);
  color: var(--on-dark-muted);
  transition: background var(--transition), color var(--transition);
}
.rail-org-btn:hover, .rail-org.is-open .rail-org-btn { background: rgba(255,255,255,.08); color: var(--on-dark); }
.rail-org-btn .nm {
  font-size: var(--fs-micro); line-height: 1.2; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-org-btn > svg { width: 14px; height: 14px; opacity: .7; transition: transform var(--transition); }
.rail-org.is-open .rail-org-btn > svg { transform: rotate(180deg); }

.org-pop {
  display: none;
  position: absolute; left: calc(100% + 8px); top: 0;
  width: 330px; z-index: 70;
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-block);
  padding: 10px; box-shadow: var(--shadow-float);
}
.rail-org.is-open .org-pop { display: block; }
.org-pop-row {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 8px; border-radius: var(--radius-chip);
  transition: background var(--transition);
}
.org-pop-row:hover { background: var(--surface-muted); }
.org-pop-row.is-current { background: var(--surface-selected); }
.org-pop-row .txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.org-pop-row .name { font-weight: 600; font-size: var(--fs-small); line-height: 1.3; }
.org-pop-row svg { width: 18px; height: 18px; }
.org-pop-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--radius-chip);
  color: var(--primary); font-size: var(--fs-small);
  transition: background var(--transition);
}
.org-pop-link:hover { background: var(--primary-tint); }
.org-pop-link svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .org-pop { left: 0; top: calc(100% + 8px); }
}

.rail-items { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; overflow-y: auto; overflow-x: hidden; }
.rail-items::-webkit-scrollbar { width: 0; }

.rail-btn {
  position: relative;
  width: 100%; height: 62px;
  display: grid; place-items: center;
  color: var(--on-dark-muted);
  transition: color var(--transition);
}
.rail-btn svg { width: 26px; height: 26px; stroke-width: 1.6; }
.rail-btn:hover { color: var(--on-dark); }
.rail-btn.is-active { color: var(--accent); }
.rail-btn.is-active::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 30px;
  border-radius: 4px 0 0 4px;
  background: var(--accent);
}
.rail-btn .dot {
  position: absolute; top: 14px; right: 30px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--rail);
}

/* Подпись при наведении */
.rail-btn .tip {
  position: absolute; left: calc(100% + 10px);
  background: var(--rail-deep); color: var(--on-dark);
  padding: 6px 12px; border-radius: var(--radius-chip);
  font-size: var(--fs-small); white-space: nowrap;
  opacity: 0; pointer-events: none; transform: translateX(-6px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: 50;
}
.rail-btn:hover .tip { opacity: 1; transform: translateX(0); }

.rail-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }

/* ------------------------------------------------------------
   Полноэкранное меню разделов (по образцу 1С)
   React: <MegaMenu sections favourites onPin />
   ------------------------------------------------------------ */
.menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--rail);
  display: none;
  flex-direction: column;
  padding: 28px 40px 40px;
  overflow-y: auto;
}
.menu.is-open { display: flex; }

.menu-head { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.menu-head .h-page { color: var(--on-dark); }

.menu-search {
  flex: 1; max-width: 520px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  color: var(--on-dark);
}
.menu-search input { flex: 1; background: none; border: 0; outline: 0; color: var(--on-dark); }
.menu-search input::placeholder { color: var(--on-dark-faint); }
.menu-search svg { width: 18px; height: 18px; color: var(--on-dark-muted); }

.menu-close {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--on-dark);
  display: grid; place-items: center;
  transition: background var(--transition);
}
.menu-close:hover { background: rgba(255,255,255,.16); }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px 32px;
  align-items: start;
}

.menu-section { break-inside: avoid; padding-bottom: 18px; }
.menu-section h3 {
  font-size: var(--fs-small); font-weight: 600;
  color: var(--accent);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 12px;
}
.menu-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-chip);
  color: var(--on-dark-muted);
  transition: background var(--transition), color var(--transition);
}
.menu-link:hover { background: rgba(255,255,255,.08); color: var(--on-dark); }
.menu-link.is-current { background: rgba(233,168,37,.16); color: var(--accent); }
.menu-link .pin {
  margin-left: auto; opacity: 0;
  color: var(--on-dark-faint);
  transition: opacity var(--transition), color var(--transition);
}
.menu-link:hover .pin { opacity: 1; }
.menu-link .pin.is-pinned { opacity: 1; color: var(--accent); }
.menu-link .pin svg { width: 16px; height: 16px; }
.menu-link .soon { margin-left: auto; font-size: var(--fs-micro); color: var(--on-dark-faint); }

/* ------------------------------------------------------------
   Шапка страницы
   React: <PageHeader title meta actions />
   ------------------------------------------------------------ */
.page-header {
  display: flex; align-items: center; gap: 16px;
  min-height: var(--header-height);
  margin-bottom: var(--gap);
}
.page-header .titles { min-width: 0; }
.page-header .meta { color: var(--text-secondary); font-size: var(--fs-small); margin-top: 2px; }
.page-header .tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-secondary); margin-bottom: 6px; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--text-tertiary); }

/* ------------------------------------------------------------
   Кнопки
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body); font-weight: 500;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--primary); color: var(--on-dark); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-soft { background: var(--primary-soft); color: var(--primary); }
.btn-soft:hover { background: var(--primary-soft-hover); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--border-strong); }
.btn-danger { background: var(--danger); color: var(--on-dark); }
.btn-danger-soft { background: var(--danger-soft); color: var(--danger); }
.btn-dark { background: var(--text); color: var(--on-dark); }
.btn-plain { padding: 0 6px; height: auto; color: var(--primary); }
.btn-plain:hover { color: var(--primary-hover); text-decoration: underline; }
.btn-sm { height: 36px; padding: 0 16px; font-size: var(--fs-small); }
.btn:disabled, .btn.is-disabled { opacity: .45; pointer-events: none; }

.icon-btn {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--text-secondary);
  position: relative;
  transition: color var(--transition), background var(--transition);
}
.icon-btn:hover { color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn-sm { width: 34px; height: 34px; flex-basis: 34px; }
.icon-btn-sm svg { width: 17px; height: 17px; }
.icon-btn-plain { background: none; }
.icon-btn .count {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--success); color: var(--on-dark);
  font-size: var(--fs-micro); font-weight: 600;
  display: grid; place-items: center;
  border: 2px solid var(--bg);
}

/* ------------------------------------------------------------
   Поиск и фильтры
   ------------------------------------------------------------ */
.search {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  min-width: 260px; flex: 1; max-width: 520px;
}
.search svg { width: 18px; height: 18px; color: var(--text-tertiary); flex: 0 0 18px; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; }
.search input::placeholder { color: var(--text-tertiary); }

/* ------------------------------------------------------------
   Карточки
   ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 22px 24px;
}
.card-flush { padding: 0; overflow: hidden; }
.card-pad   { padding: 22px 24px; }
.card-head  { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card-head .h-block { margin-right: auto; }
.card-sep   { height: 1px; background: var(--border); margin: 18px 0; }

/* KPI-карточка с левой цветной полосой — макет 01 */
.kpi { position: relative; padding-left: 26px; }
.kpi::before {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px;
  width: 4px; border-radius: 0 4px 4px 0;
  background: var(--primary);
}
.kpi.is-danger::before  { background: var(--danger); }
.kpi.is-warning::before { background: var(--warning); }
.kpi.is-info::before    { background: var(--info); }
.kpi-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-muted);
  display: grid; place-items: center;
  color: var(--text-secondary);
  flex: 0 0 44px;
}
.kpi-icon svg { width: 22px; height: 22px; }
.kpi-line {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
}

.delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.delta svg { width: 14px; height: 14px; }
.delta.up   { color: var(--success); }
.delta.down { color: var(--danger); }

/* ------------------------------------------------------------
   Список-строки (не таблица, а блоки) — макеты 01, 06
   React: <ListRow />
   ------------------------------------------------------------ */
.list { display: flex; flex-direction: column; gap: var(--gap-row); }

.list-head {
  display: grid; align-items: center; gap: 16px;
  padding: 0 18px 10px;
  font-size: var(--fs-small); color: var(--text-secondary);
}
.list-head .sortable { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.list-head .sortable svg { width: 13px; height: 13px; opacity: .55; }
.list-head .sortable:hover { color: var(--text); }

.list-row {
  display: grid; align-items: center; gap: 16px;
  background: var(--surface-muted);
  border-radius: var(--radius-block);
  padding: 16px 18px;
  transition: background var(--transition);
}
.list-row:hover { background: var(--surface-hover); }
.list-row.is-selected { background: var(--surface-selected); }
.list-row.on-white { background: var(--surface); }
.list-row.on-white:hover { background: var(--surface-muted); }
.list-row .row-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity var(--transition); }
.list-row:hover .row-actions { opacity: 1; }
.list-row .name { font-weight: 600; }

/* Чекбокс */
.check {
  width: 22px; height: 22px; flex: 0 0 22px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.check svg { width: 14px; height: 14px; color: var(--primary); opacity: 0; }
.check.is-checked { border-color: var(--primary); }
.check.is-checked svg { opacity: 1; }

/* Плавающая панель массовых действий — макет 01 */
.bulkbar {
  position: sticky; bottom: 20px;
  margin-top: 16px;
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 14px 20px;
  box-shadow: var(--shadow-float);
  z-index: 20;
}

/* ------------------------------------------------------------
   Плотная таблица (учётные регистры)
   React: <DataTable dense />
   ------------------------------------------------------------ */
/* Тень у края появляется только когда часть колонок ушла за скролл: два слоя
   с background-attachment: local «уезжают» вместе с содержимым и открывают
   градиент-подсказку. Без неё обрезанная таблица выглядит просто оборванной. */
.table-wrap {
  overflow-x: auto; border-radius: var(--radius-card); background: var(--surface);
  background-image:
    linear-gradient(to right, var(--surface), rgba(255, 255, 255, 0)),
    linear-gradient(to left,  var(--surface), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(22, 44, 35, .13), rgba(22, 44, 35, 0)),
    linear-gradient(to left,  rgba(22, 44, 35, .13), rgba(22, 44, 35, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
table.data th {
  text-align: left; font-weight: 500; color: var(--text-secondary);
  padding: 14px 16px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
/* Ячейка не рвётся посреди значения («Динской р-н», «1 240 га»): короткие
   значения атомарны, а колонки, которым перенос нужен, помечаются .wrap. */
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle;
  white-space: nowrap; }
table.data td.wrap, table.data td .wrap { white-space: normal; }
/* Плотный режим учётных регистров: колонок много, отступы ужимаем. */
.is-dense table.data th, .is-dense table.data td { padding-left: 12px; padding-right: 12px; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-muted); }
table.data tr.is-selected { background: var(--surface-selected); }
table.data .num-cell { text-align: right; font-variant-numeric: tabular-nums; }
table.data .total-row td { font-weight: 600; background: var(--surface-muted); }

/* ------------------------------------------------------------
   Чипы и статусы
   ------------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; }
.chip-outline { background: none; border: 1px solid var(--border); }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 500;
  white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-draft   { background: var(--surface-muted); color: var(--text-secondary); }
.status-queued  { background: var(--info-soft);     color: var(--info); }
.status-sent    { background: var(--accent-soft);   color: var(--on-accent-soft); }
.status-ok      { background: var(--success-soft);  color: var(--success); }
.status-error   { background: var(--danger-soft);   color: var(--danger); }
.status-overdue { background: var(--danger);        color: var(--on-dark); }
.status-warning { background: var(--warning-soft);  color: var(--warning); }
.status-plain::before { display: none; }

/* Цветная метка культуры слева от названия — макеты 01, 07.
   Верхняя половина — текущая культура, нижняя — предшественник.
   Цвет берётся из справочника культур, поэтому задаётся инлайново. */
.crop-mark { width: 5px; align-self: stretch; min-height: 34px; border-radius: 4px; background: var(--crop-fallow); flex: 0 0 5px; }

/* Точка культуры рядом с подписью: цвет никогда не идёт без названия */
.crop-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; display: inline-block; }

/* ------------------------------------------------------------
   Дашборд организации
   React: <StatTile> · <StackedShare> · <Sparkline> · <AttentionRow>
   ------------------------------------------------------------ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: var(--gap-row); }

.stat {
  background: var(--surface); border-radius: var(--radius-block);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
/* К какому функциональному блоку относится показатель */
.stat .cap {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.stat .cap svg { width: 13px; height: 13px; flex: 0 0 13px; }
.stat .lbl { font-size: var(--fs-small); color: var(--text-secondary); }
.stat .val { display: flex; align-items: baseline; gap: 6px; }
.stat .val b { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat .val .unit { font-size: var(--fs-small); color: var(--text-secondary); }
/* Процент бессмысленен без базы, от которой он посчитан — она всегда рядом */
.stat .cmp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-small); }
.stat .cmp .base { color: var(--text-tertiary); }
.stat .sub { font-size: var(--fs-micro); color: var(--text-tertiary); margin-top: auto; padding-top: 4px; }
.stat.is-muted { background: var(--surface-muted); }

.delta.flat { color: var(--text-secondary); }

/* Доля в общей структуре: тонкая стопка с зазором 2px между сегментами */
.bar-stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface-sunken); }
.bar-stack > span { height: 100%; }
.bar-stack > span:first-child { border-radius: 6px 0 0 6px; }
.bar-stack > span:last-child  { border-radius: 0 6px 6px 0; }

.share-legend { display: flex; flex-direction: column; gap: 9px; }
.share-legend .item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); }
.share-legend .item .nm { flex: 1; min-width: 0; }
.share-legend .item .qty { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.share-legend .item .pct { width: 46px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.spark { display: block; width: 100%; height: auto; overflow: visible; }

.attn { display: flex; flex-direction: column; gap: 2px; }
.attn-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-chip);
  transition: background var(--transition);
}
.attn-row:hover { background: var(--surface-muted); }
.attn-row .ic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center; }
.attn-row .ic svg { width: 16px; height: 16px; }
.attn-row .ic.is-danger  { background: var(--danger-soft);  color: var(--danger); }
.attn-row .ic.is-warning { background: var(--warning-soft); color: var(--warning); }
.attn-row .ic.is-info    { background: var(--info-soft);    color: var(--info); }
.attn-row .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.attn-row .of { color: var(--text-tertiary); font-size: var(--fs-small); }
.attn-row .tx { flex: 1; min-width: 0; font-size: var(--fs-small); color: var(--text-secondary); }
.attn-row .go { color: var(--text-tertiary); }
.attn-row .go svg { width: 16px; height: 16px; }

/* Панель фильтров и поиска над списком — отдельно от заголовка страницы */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.toolbar .search { background: var(--surface-muted); flex: 1 1 300px; min-width: 300px; }
.toolbar .search:focus-within { background: var(--surface-sunken); }

/* ------------------------------------------------------------
   Табы — макет 10
   ------------------------------------------------------------ */
.tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--border); padding: 0 4px; }
.tab {
  padding: 14px 2px 14px;
  color: var(--text-secondary);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--primary); border-color: var(--primary); }

/* Сегментированный переключатель */
.segmented { display: inline-flex; background: var(--surface-muted); border-radius: var(--radius-pill); padding: 4px; gap: 2px; }
.segmented button {
  padding: 8px 18px; border-radius: var(--radius-pill);
  font-size: var(--fs-small); color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}
.segmented button.is-active { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--shadow-panel); }

/* ------------------------------------------------------------
   Формы
   React: <Field label hint error>
   ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label { font-size: var(--fs-small); color: var(--text-secondary); }
.field > label .req { color: var(--danger); }
.field .hint { font-size: var(--fs-small); color: var(--text-tertiary); }
.field .err  { font-size: var(--fs-small); color: var(--danger); }

.control {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 16px;
  background: var(--surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-block);
  transition: border-color var(--transition), background var(--transition);
}
.control:focus-within { border-color: var(--primary); background: var(--surface); }
.control input, .control select, .control textarea {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
}
.control select { appearance: none; cursor: pointer; }
.control .unit { color: var(--text-secondary); font-size: var(--fs-small); white-space: nowrap; }
.control .caret { color: var(--text-tertiary); width: 18px; height: 18px; flex: 0 0 18px; }
.control.is-invalid { border-color: var(--danger); background: var(--danger-soft); }
.control.on-white { background: var(--surface); border-color: var(--border); }
textarea.control { height: auto; min-height: 92px; padding: 14px 16px; resize: vertical; align-items: flex-start; }

/* Подставленное значение: не поле ввода, а результат вывода из справочника/техкарты */
.derived {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 10px 16px;
  background: var(--primary-tint);
  border: 1px dashed var(--primary-soft);
  border-radius: var(--radius-block);
}
.derived .src { margin-left: auto; font-size: var(--fs-micro); color: var(--primary); white-space: nowrap; }

.switch {
  width: 46px; height: 26px; flex: 0 0 46px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  position: relative; cursor: pointer;
  transition: background var(--transition);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface);
  transition: transform var(--transition);
}
.switch.is-on { background: var(--success); }
.switch.is-on::after { transform: translateX(20px); }

.radio-cards { display: grid; gap: 12px; }
.radio-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--surface-muted);
  border: 1.5px solid transparent;
  border-radius: var(--radius-block);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.radio-card:hover { background: var(--surface-hover); }
.radio-card.is-selected { border-color: var(--primary); background: var(--surface-selected); }
.radio-card .mark {
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px;
  border: 1.5px solid var(--border-strong); border-radius: 50%;
  display: grid; place-items: center;
}
.radio-card.is-selected .mark { border-color: var(--primary); }
.radio-card.is-selected .mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }

/* ------------------------------------------------------------
   Плитки выбора: шаблон организации, функциональные блоки
   React: <PickTile selected disabled /> · <BlockCard />
   ------------------------------------------------------------ */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.pick-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  padding: 16px; border-radius: var(--radius-block);
  background: var(--surface-muted); border: 1.5px solid transparent;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.pick-tile:hover { background: var(--surface-hover); transform: translateY(-1px); }
.pick-tile.is-selected { background: var(--surface-selected); border-color: var(--primary); }
.pick-tile .ic {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--surface); color: var(--primary);
  display: grid; place-items: center;
}
.pick-tile.is-selected .ic { background: var(--primary); color: var(--on-dark); }
.pick-tile .ic svg { width: 19px; height: 19px; }
.pick-tile .nm { font-weight: 600; font-size: var(--fs-small); line-height: 1.3; }
.pick-tile .ds { font-size: var(--fs-micro); color: var(--text-secondary); line-height: 1.4; }

.block-card {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%;
  padding: 15px 18px; border-radius: var(--radius-block);
  background: var(--surface-muted); border: 1.5px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.block-card:hover { background: var(--surface-hover); }
.block-card.is-selected { background: var(--surface-selected); border-color: var(--primary); }
/* Обязательный блок: галка стоит, но выбор не предлагается —
   поэтому и подсветки выбора у него нет */
.block-card.is-locked { pointer-events: none; background: var(--surface-muted); border-color: transparent; }
.block-card.is-locked .box { border-color: var(--border-strong); }
.block-card.is-locked .box svg { color: var(--text-secondary); }
.block-card .box {
  width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px;
  border: 1.5px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); display: grid; place-items: center;
}
.block-card .box svg { width: 14px; height: 14px; color: var(--primary); opacity: 0; }
.block-card.is-selected .box { border-color: var(--primary); }
.block-card.is-selected .box svg { opacity: 1; }
.block-card .body { flex: 1; min-width: 0; }
.block-card .nm { display: flex; align-items: center; gap: 8px; font-weight: 600; line-height: 1.3; flex-wrap: wrap; }
.block-card .nm > svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--primary); }
.block-card .ds { display: block; font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.45; margin-top: 5px; }

/* Загрузка аватарки организации */
.ava-pick { display: flex; align-items: center; gap: 16px; }
.ava-pick .preview {
  width: 72px; height: 72px; flex: 0 0 72px; border-radius: 18px;
  display: grid; place-items: center; color: var(--on-dark);
  font-weight: 700; font-size: 26px; letter-spacing: .02em;
}
.ava-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.ava-colors button {
  width: 24px; height: 24px; border-radius: 8px;
  border: 2px solid transparent; transition: transform var(--transition);
}
.ava-colors button:hover { transform: scale(1.12); }
.ava-colors button.is-active { border-color: var(--text); }

/* Разделы-якоря вместо шагов мастера: к любому можно вернуться */
.anchors { display: flex; gap: 8px; flex-wrap: wrap; }
.anchor {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 10px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-small); color: var(--text-secondary);
  transition: border-color var(--transition), color var(--transition);
}
.anchor:hover { border-color: var(--border-strong); color: var(--text); }
.anchor .n {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
  background: var(--surface-muted); color: var(--text-secondary);
  display: grid; place-items: center; font-weight: 600; font-size: var(--fs-micro);
}
.anchor.is-done { color: var(--text); }
.anchor.is-done .n { background: var(--primary-soft); color: var(--primary); }
.anchor svg { width: 14px; height: 14px; }

.section-card { scroll-margin-top: 24px; }
.section-num {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--primary); color: var(--on-dark);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-small);
}

/* Шаги мастера */
.steps { display: flex; align-items: center; gap: 8px; }
.step { display: flex; align-items: center; gap: 10px; color: var(--text-tertiary); font-size: var(--fs-small); }
.step .n {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-muted); color: var(--text-secondary);
  display: grid; place-items: center; font-weight: 600; font-size: var(--fs-small);
}
.step.is-active { color: var(--text); font-weight: 500; }
.step.is-active .n { background: var(--primary); color: var(--on-dark); }
.step.is-done .n { background: var(--primary-soft); color: var(--primary); }
.step.is-done { color: var(--text-secondary); }
.steps .bar { width: 34px; height: 1.5px; background: var(--border-strong); }

/* ------------------------------------------------------------
   Донат структуры затрат — макеты 07, 08
   ------------------------------------------------------------ */
.donut { width: 128px; height: 128px; flex: 0 0 128px; position: relative; }
.donut svg { transform: rotate(-90deg); }
.donut .center { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-tertiary); }
.donut .center svg { transform: none; width: 30px; height: 30px; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legend .item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-small); color: var(--text-secondary); }
.legend .swatch { width: 10px; height: 10px; border-radius: 50%; }
.legend-pill { background: var(--surface); border-radius: var(--radius-pill); padding: 10px 20px; }

/* ------------------------------------------------------------
   Этап техкарты — макет 08
   ------------------------------------------------------------ */
.stage { background: var(--surface); border-radius: var(--radius-card); padding: 22px 24px; }
.stage-head { display: grid; grid-template-columns: minmax(0,1.6fr) 130px 200px minmax(0,1fr); gap: 20px; align-items: start; }
.stage-head .title { display: flex; align-items: center; gap: 10px; }
.stage-head .title .n { color: var(--text-secondary); font-weight: 600; }
.stage-head .title h3 { font-size: var(--fs-block-title); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.stage-tools { display: flex; gap: 2px; align-items: center; margin-top: 10px; color: var(--text-tertiary); }
.stage-tools .sep { width: 1px; height: 18px; background: var(--border); margin: 0 6px; }

.stage-group { display: grid; grid-template-columns: 150px minmax(0,1fr) 220px; gap: 20px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border); }
.stage-group .gname { font-size: var(--fs-small); color: var(--text-secondary); }
.stage-items { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 28px; }
.stage-item .iname { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.stage-item .calc { font-size: var(--fs-small); color: var(--text-secondary); }
.stage-item .sum { font-weight: 700; }

.totals { display: flex; flex-direction: column; gap: 7px; text-align: right; font-size: var(--fs-small); }
.totals .line { display: flex; justify-content: space-between; gap: 14px; }
.totals .line .lbl { color: var(--text-secondary); }
.totals .line.big { font-size: var(--fs-body); font-weight: 700; }

/* ------------------------------------------------------------
   Лента событий (обход / карточка дня) — макет 04
   React: <EventFeed />
   ------------------------------------------------------------ */
.feed { position: relative; padding-left: 26px; }
.feed::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1.5px; background: var(--border); }
.feed-item { position: relative; padding-bottom: 22px; }
.feed-item::before {
  content: ""; position: absolute; left: -26px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 4px var(--success-soft);
}
.feed-item.is-danger::before  { background: var(--danger);  box-shadow: 0 0 0 4px var(--danger-soft); }
.feed-item.is-warning::before { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.feed-item.is-info::before    { background: var(--info);    box-shadow: 0 0 0 4px var(--info-soft); }
.feed-item.is-plan::before    { background: var(--surface); box-shadow: 0 0 0 2px var(--border-strong); }
.feed-meta { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--text-secondary); margin-bottom: 8px; }
.feed-card { background: var(--surface); border-radius: var(--radius-block); padding: 16px 18px; border-left: 3px solid var(--success); }
.feed-card.is-danger  { border-left-color: var(--danger); }
.feed-card.is-warning { border-left-color: var(--warning); }
.feed-card.is-info    { border-left-color: var(--info); }
.feed-card.is-plan    { border-left-color: var(--border-strong); background: var(--surface-muted); }

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb { width: 64px; height: 64px; border-radius: var(--radius-chip); background: var(--surface-muted) center / cover no-repeat; }

/* ------------------------------------------------------------
   Календарь поля (месячная сетка)
   React: <FieldCalendar />
   ------------------------------------------------------------ */
.cal { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow { padding: 14px 12px; font-size: var(--fs-small); color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.cal-dow.is-weekend { color: var(--danger); }
.cal-day {
  min-height: 132px; padding: 8px 9px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  transition: background var(--transition);
}
.cal-day:hover { background: var(--surface-muted); }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.is-out { background: var(--surface-muted); color: var(--text-tertiary); }
.cal-day.is-today { background: var(--primary-tint); }
.cal-day .dnum { font-weight: 600; font-size: var(--fs-small); }
.cal-day.is-today .dnum {
  background: var(--primary); color: var(--on-dark);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
}
.cal-day .wx { display: flex; align-items: center; gap: 4px; font-size: var(--fs-micro); color: var(--text-secondary); }
.cal-day .wx svg { width: 14px; height: 14px; }

.ev {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-micro); line-height: 1.3;
  padding: 3px 7px; border-radius: 6px;
  background: var(--surface-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.ev-fact    { background: var(--success-soft); color: var(--on-success-soft); }
.ev-plan    { background: var(--surface-muted); color: var(--text-secondary); border: 1px dashed var(--border-strong); }
.ev-threat  { background: var(--danger-soft);  color: var(--danger); }
.ev-problem { background: var(--warning-soft); color: var(--on-warning-soft); }
.ev-phase   { background: var(--info-soft);    color: var(--info); }
.ev-ndvi    { background: var(--ndvi-soft); color: var(--on-ndvi-soft); }
.ev-spray   { background: var(--accent-soft);  color: var(--on-accent-soft); }
.ev-more    { background: none; color: var(--text-secondary); padding-left: 2px; }
.ev-more::before { display: none; }

/* Накопительные показатели над календарём */
.cal-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.cal-strip .metric {
  background: var(--surface); border-radius: var(--radius-block);
  padding: 12px 18px; min-width: 168px;
}
.cal-strip .metric .lbl { font-size: var(--fs-small); color: var(--text-secondary); }
.cal-strip .metric .val { font-size: 20px; font-weight: 700; }

/* ------------------------------------------------------------
   Карта — тёмные панели поверх спутника, макет 03
   ------------------------------------------------------------ */
.map-shell {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--map-panel) url("../img/satellite.svg") center / cover no-repeat;
  min-height: 640px;
}
.map-panel {
  background: rgba(22, 44, 35, .80);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-block);
  color: var(--on-dark);
  padding: 14px 16px;
}
.map-panel .t-secondary { color: var(--on-dark-muted); }
.map-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .05em; color: var(--on-dark-faint); }
.map-panel-head svg { width: 14px; height: 14px; }

.map-tl { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 10px; width: 320px; z-index: 3; }
.map-tr { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 10px; width: 272px; z-index: 3; }
.map-bc { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.map-br { position: absolute; bottom: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }

/* Один размер для всех управляющих элементов поверх карты: 34px */
.map-ctl {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  background: rgba(22, 44, 35, .80); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .10);
  color: var(--on-dark); display: grid; place-items: center;
  transition: background var(--transition);
}
.map-ctl:hover { background: rgba(22, 44, 35, .95); }
.map-ctl svg { width: 17px; height: 17px; }

.map-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 13px;
  border-radius: var(--radius-pill);
  background: rgba(22, 44, 35, .80); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .10);
  color: var(--on-dark); font-size: var(--fs-small); white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.map-btn:hover { background: rgba(22, 44, 35, .95); border-color: rgba(255,255,255,.22); }
.map-btn svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .8; }
.map-btn .val { color: var(--on-dark); font-weight: 500; }
.map-btn .lbl { color: var(--on-dark-muted); }
/* Вариант с тумблером: слева отступ меньше, чтобы тумблер не «висел» */
.map-btn.has-switch { padding-left: 6px; }
.map-btn .switch { width: 34px; height: 20px; flex: 0 0 34px; background: rgba(255,255,255,.22); }
.map-btn .switch::after { width: 16px; height: 16px; top: 2px; left: 2px; }
.map-btn .switch.is-on::after { transform: translateX(14px); }
/* Акцентная кнопка перехода — одна на экран */
.map-btn.is-accent { background: var(--accent); border-color: transparent; color: var(--text); }
.map-btn.is-accent svg { opacity: 1; }
.map-btn.is-accent:hover { background: var(--accent-hover); }

.map-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.ndvi-scale { display: flex; align-items: center; gap: 3px; }
.ndvi-scale .sw { flex: 1; height: 12px; }
.ndvi-scale .sw:first-child { border-radius: 6px 0 0 6px; }
.ndvi-scale .sw:last-child  { border-radius: 0 6px 6px 0; }
.ndvi-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 10px; }

.ndvi-date {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: var(--radius-chip);
  color: var(--on-dark); font-size: var(--fs-small);
  transition: background var(--transition);
}
.ndvi-date > svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .7; }
.ndvi-date:hover { background: rgba(255, 255, 255, .07); }
.ndvi-date.is-active { background: rgba(255, 255, 255, .12); box-shadow: inset 2px 0 0 var(--accent); }

/* ------------------------------------------------------------
   Товары — макеты 09, 10
   ------------------------------------------------------------ */
.product { background: var(--surface); border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.product .pic { height: 150px; background: center / contain no-repeat; }
.product .pname { font-weight: 600; line-height: 1.3; }
.product .price { font-size: 22px; font-weight: 700; }
.product .flags { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
.tag { padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 500; }
.tag-hit { background: var(--warning-soft); color: var(--on-warning-soft); }
.tag-new { background: var(--success-soft); color: var(--success); }

.cat-tile {
  background: var(--surface); border-radius: var(--radius-card);
  padding: 24px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: transform var(--transition);
}
.cat-tile:hover { transform: translateY(-2px); }
.cat-tile svg { width: 52px; height: 52px; }

/* ------------------------------------------------------------
   Пустые состояния, заглушки
   ------------------------------------------------------------ */
.empty { text-align: center; padding: 64px 24px; color: var(--text-secondary); }
.empty svg { width: 56px; height: 56px; margin: 0 auto 18px; color: var(--text-tertiary); }
.empty h3 { font-size: var(--fs-block-title); color: var(--text); margin-bottom: 8px; font-weight: 600; }

.note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; border-radius: var(--radius-block);
  background: var(--info-soft); color: var(--on-info-soft);
  font-size: var(--fs-small);
}
.note svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }

/* Нумерованный список: в base.css у ol снят маркер, возвращаем его счётчиком */
.num-list { counter-reset: n; display: flex; flex-direction: column; gap: 9px; }
.num-list li { counter-increment: n; display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.num-list li::before {
  content: counter(n);
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; font-size: var(--fs-micro); font-weight: 700;
}
.note-warning { background: var(--warning-soft); color: var(--on-warning-soft); }
.note-danger  { background: var(--danger-soft);  color: var(--on-danger-soft); }
.note-success { background: var(--success-soft); color: var(--on-success-soft); }

/* ------------------------------------------------------------
   Модальное окно
   ------------------------------------------------------------ */
.modal-scrim { position: fixed; inset: 0; background: var(--overlay-scrim); display: none; place-items: center; z-index: 120; padding: 24px; }
.modal-scrim.is-open { display: grid; }
.modal {
  background: var(--surface); border-radius: var(--radius-card);
  width: min(720px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 28px 30px;
  box-shadow: var(--shadow-float);
}
.modal-wide { width: min(1040px, 100%); }
.modal-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.modal-foot { display: flex; gap: 12px; justify-content: flex-end; margin-top: 26px; }

/* ------------------------------------------------------------
   Прогресс / мера выполнения
   ------------------------------------------------------------ */
.meter { height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--primary); }
.meter.is-warning > span { background: var(--warning); }
.meter.is-danger  > span { background: var(--danger); }

/* Индикатор синхронизации — макет 04 */
.sync { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-secondary); }
.sync svg { width: 16px; height: 16px; }

/* Баннер прототипа */
.proto-note {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); color: var(--text-secondary);
  padding: 10px 16px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-block); background: var(--surface);
}
.proto-note svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* ------------------------------------------------------------
   Партионный учёт
   Подбор партий в расходный документ: группа — номенклатурная
   позиция, внутри — партии. Двигаем всегда партию, поэтому
   группа сама по себе не выбирается: она только сворачивает
   свои партии и показывает итог по позиции.
   React: <LotPicker groupBy="nomenclature" />
   ------------------------------------------------------------ */
.lotpick { display: flex; flex-direction: column; gap: var(--gap-row); }

.lotpick-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-block);
  overflow: hidden;
}
.lotpick-group.is-open { border-color: var(--border-strong); }
.lotpick-group.is-short { border-color: var(--danger); }

.lotpick-head {
  display: grid; align-items: center; gap: 14px;
  padding: 12px 16px; width: 100%; text-align: left;
  transition: background var(--transition);
}
.lotpick-head:hover { background: var(--surface-hover); }
.lotpick-head .tw { display: grid; place-items: center; color: var(--text-tertiary); }
.lotpick-head .tw svg { width: 16px; height: 16px; transition: transform var(--transition); }
.lotpick-group.is-open .lotpick-head .tw svg { transform: rotate(90deg); }
.lotpick-head .nm { font-weight: 600; }
.lotpick-head .ds { font-size: var(--fs-small); color: var(--text-secondary); }

.lotpick-lots {
  display: none; flex-direction: column; gap: 4px;
  padding: 8px; border-top: 1px solid var(--border);
  background: var(--surface-muted);
}
.lotpick-group.is-open .lotpick-lots { display: flex; }

.lotpick-lot {
  display: grid; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--radius-chip);
  background: var(--surface); border: 1px solid transparent;
}
.lotpick-lot:hover { border-color: var(--border); }
.lotpick-lot.is-picked { background: var(--surface-selected); border-color: var(--primary-soft); }
.lotpick-lot.is-locked { opacity: .5; }
.lotpick-lot .lid { font-weight: 500; font-variant-numeric: tabular-nums; }
.lotpick-lot .ds { font-size: var(--fs-small); color: var(--text-secondary); }

/* Поле количества внутри строки партии */
.qty-field {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--radius-chip); padding: 5px 10px;
}
.qty-field:focus-within { border-color: var(--primary); background: var(--surface); }
.qty-field input {
  width: 64px; border: 0; background: none; text-align: right;
  font: inherit; font-variant-numeric: tabular-nums; font-weight: 600;
}
.qty-field input:focus { outline: none; }
.qty-field .u { font-size: var(--fs-small); color: var(--text-secondary); }

/* Состав количества партии: свободно / резерв / блокировка / потери */
.qty-bar { display: flex; height: 6px; border-radius: var(--radius-pill);
  overflow: hidden; background: var(--surface-sunken); }
.qty-bar > span { display: block; height: 100%; }
.qty-bar .free { background: var(--primary); }
.qty-bar .res  { background: var(--accent); }
.qty-bar .blc  { background: var(--info); }
.qty-bar .loss { background: var(--danger); }

.qty-legend { display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: var(--fs-micro); color: var(--text-secondary); }
.qty-legend span { display: inline-flex; align-items: center; gap: 6px; }
.qty-legend .sw { width: 8px; height: 8px; border-radius: 2px; }
.qty-legend .sw-free { background: var(--primary); }
.qty-legend .sw-res  { background: var(--accent); }
.qty-legend .sw-blc  { background: var(--info); }
.qty-legend .sw-loss { background: var(--danger); }

/* ------------------------------------------------------------
   Чек-лист проверок перед проведением
   Отказ всегда называет конкретные позиции, а не «ошибка».
   ------------------------------------------------------------ */
.checklist { display: flex; flex-direction: column; }
.checklist-row { display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--border); }
.checklist-row:last-child { border-bottom: 0; }
.checklist-row .ic { width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%; display: grid; place-items: center; }
.checklist-row .ic svg { width: 13px; height: 13px; }
.checklist-row .tx { flex: 1; min-width: 0; }
.checklist-row .tx > span { display: block; }
.checklist-row .dt { font-size: var(--fs-small); color: var(--text-secondary); margin-top: 3px; }
.checklist-row.is-ok   .ic { background: var(--success-soft); color: var(--success); }
.checklist-row.is-fail .ic { background: var(--danger-soft);  color: var(--danger); }
.checklist-row.is-warn .ic { background: var(--warning-soft); color: var(--on-warning-soft); }

/* Учётная ось статуса документа — отдельно от статуса обмена с ФГИС */
.status-proc   { background: var(--primary-soft);   color: var(--primary); }
.status-save   { background: var(--surface-sunken); color: var(--text-secondary); }
.status-cancel { background: var(--surface-muted);  color: var(--text-tertiary); }

/* ------------------------------------------------------------
   Цепочка прослеживаемости партии
   Была локальной в lots.html — нужна ещё и в карточке партии.
   ------------------------------------------------------------ */
.chain { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.chain .node { background: var(--surface-muted); border-radius: var(--radius-chip);
  padding: 10px 14px; font-size: var(--fs-small); }
.chain .node.is-current { background: var(--surface-selected); font-weight: 600; }
.chain .node.is-future { opacity: .55; }
.chain .arr { color: var(--text-tertiary); padding: 0 8px; display: grid; place-items: center; }
.chain .arr svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   Дровер — выезжающая справа панель на половину экрана
   Паттерн: простые сущности редактируются здесь, не теряя
   контекст списка; сложные (с подчинёнными таблицами) — только
   на отдельной странице. Поэтому у дровера ВСЕГДА есть кнопка
   «Открыть страницей»: из него можно уйти в полное редактирование.
   Уровень дровера ровно один. Подбор значения внутри дровера —
   это модалка поверх него, а не второй дровер.
   React: <Drawer title context onExpand> + <DrawerFoot>
   ------------------------------------------------------------ */
.drawer-scrim {
  position: fixed; inset: 0; background: var(--overlay-scrim);
  opacity: 0; visibility: hidden; z-index: 130;
  transition: opacity var(--transition), visibility var(--transition);
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 131;
  width: clamp(520px, 50vw, 720px); max-width: 100%;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition);
}
.drawer.is-open { transform: none; }
.drawer-wide { width: clamp(640px, 62vw, 960px); }

.drawer-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--border);
}
.drawer-head .titles { flex: 1; min-width: 0; }
.drawer-head .titles .ctx {
  font-size: var(--fs-small); color: var(--text-secondary);
  margin-bottom: 4px;
}
.drawer-head .titles .sub {
  font-size: var(--fs-small); color: var(--text-secondary); margin-top: 6px;
}

/* Переход к редактированию на отдельной странице — обязателен для дровера
   сущности. Подписанная ссылка, а не голая иконка: иконку рядом с крестиком
   не замечают. Строка компактная — дровер не должен раздуваться из-за неё. */
.drawer-head .titles .open {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-small); color: var(--primary);
}
.drawer-head .titles .open svg { width: 14px; height: 14px; flex: 0 0 14px; }
.drawer-head .titles .open:hover { text-decoration: underline; }
/* Страница сущности ещё не собрана: переход показан, но честно погашен */
.drawer-head .titles .open.is-off { color: var(--text-tertiary); pointer-events: none; }

.drawer-body { flex: 1; overflow-y: auto; padding: 22px 28px; }
.drawer-body > * + * { margin-top: var(--gap); }

.drawer-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 28px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.drawer-foot .spacer { flex: 1; }

/* Секция внутри дровера: заголовок и группа полей */
.drawer-sec > h4 {
  font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 12px;
}
.drawer-sec + .drawer-sec { margin-top: 26px; }

/* Список «реквизит — значение». Read-only форма сущности: в дровере — чтобы
   показать сложную сущность, не давая её править; на странице сущности —
   для реквизитов, которые считаются, а не вводятся.
   React: <Props items={[{label, value}]} /> */
.props { display: grid; grid-template-columns: 200px 1fr; gap: 12px 20px; align-items: baseline; }
.props dt { color: var(--text-secondary); font-size: var(--fs-small); }
.props dd { margin: 0; min-width: 0; }
.props-tight { grid-template-columns: 150px 1fr; gap: 9px 16px; }
.drawer-ro { display: grid; grid-template-columns: 180px 1fr; gap: 12px 20px; align-items: baseline; }
.drawer-ro dt { color: var(--text-secondary); font-size: var(--fs-small); }
.drawer-ro dd { margin: 0; min-width: 0; }

/* ------------------------------------------------------------
   Форма документа — по образцу 1С
   Шапка с реквизитами, командная панель, табличная часть,
   подвал с итогами. Все документы учёта выглядят одинаково:
   кладовщик, знающий 1С, открывает наш документ и узнаёт его.
   React: <DocForm> <DocBar> <DocTable> <DocTotals>
   ------------------------------------------------------------ */
.docbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; margin-bottom: 16px;
  background: var(--surface); border-radius: var(--radius-block);
  box-shadow: var(--shadow-panel);
  position: sticky; top: 0; z-index: 20;
}
.docbar .spacer { flex: 1; }
.docbar .sep { width: 1px; height: 24px; background: var(--border); }

/* Шапка реквизитов: две-три колонки коротких полей */
.dochead { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 22px; }

/* Табличная часть */
.docrows { width: 100%; border-collapse: collapse; }
.docrows th {
  text-align: left; font-size: var(--fs-small); font-weight: 500;
  color: var(--text-secondary); padding: 10px 12px;
  background: var(--surface-muted); white-space: nowrap;
}
.docrows th:first-child { border-top-left-radius: var(--radius-chip); }
.docrows th:last-child  { border-top-right-radius: var(--radius-chip); }
.docrows td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.docrows tr:hover td { background: var(--surface-hover); }
.docrows .n { color: var(--text-tertiary); width: 34px; }
.docrows .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.docrows .act { width: 40px; text-align: right; }
.docrows tr.is-short td { background: var(--danger-soft); }
.docrows input {
  width: 100%; background: none; border: 0; outline: 0;
  border-bottom: 1px dashed var(--border-strong); padding: 2px 0;
}
.docrows input:focus { border-bottom-color: var(--primary); }
.docrows input.num { text-align: right; }

/* Подвал итогов документа */
.doctotals {
  display: flex; justify-content: flex-end; gap: 34px;
  padding: 16px 12px 4px;
}
.doctotals > div { text-align: right; }
.doctotals .lbl { font-size: var(--fs-small); color: var(--text-secondary); }
.doctotals .val { font-size: var(--fs-block-title); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Панель фильтров — живёт в дровере, одна на все реестры
   React: <FilterDrawer schema={...} />
   ------------------------------------------------------------ */
.filt-group + .filt-group { margin-top: 22px; }
.filt-group > h4 {
  font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary);
  margin-bottom: 10px;
}
.filt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filt-chips button {
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface-muted); color: var(--text);
  font-size: var(--fs-small);
  border: 1.5px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.filt-chips button:hover { background: var(--surface-hover); }
.filt-chips button.is-active { border-color: var(--primary); background: var(--surface-selected); color: var(--primary); }
.filt-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.filt-range .dash { color: var(--text-tertiary); }