/* Маршрут — оформление. Ориентир: доска, к которой привыкли в Platrum:
   колонки, белые карточки, ничего лишнего.
   Цвета — из брендбука Gem Tech: золото #b79b77 (фон колонок, задаётся
   в этапы.py), графит #3b3b48 (рамки блоков). */

* { box-sizing: border-box; }

/* Шрифт — системный, как был. Узкий гротеск (Roboto Condensed вместо платного
   TT Prosto Sans Condensed) пробовали 10.08.2026 — владельцу не понравился,
   вернули системный. Если когда-нибудь купится лицензия Prosto Sans, шрифт
   подключается тремя блоками @font-face здесь же. */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  color: #3b3b48;           /* GT Graphite — основной текст */
  background: #f4f5f9;
}

/* Ссылки и кнопки — зелёный ислама #217346 (владелец, 28.08.2026),
   раньше были синие «как у всех». */
a { color: #217346; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Шапка ------------------------------------------------------------ */

.шапка {
  display: flex;
  align-items: center;
  /* 16, а не 24: горизонтальное меню начинается у красной линии владельца —
     чуть правее подписи «МАРШРУТ» (скриншот 03.09.2026, вечер) */
  gap: 16px;
  /* Слева 10px, а не 20: круглая ава-логотип встаёт ровно над столбиком
     левой панели (у неё left: 10px) */
  padding: 12px 20px 12px 10px;
  /* Шапка без отделения: тот же фон, что у страницы, без линии
     (владелец, 03.09.2026) */
  background: #f4f5f9;
  /* fixed, не sticky: лого и горизонтальное меню прибиты к окну намертво,
     как вертикальная панель, — при прокрутке не двигаются (владелец,
     03.09.2026, вечер: sticky у него уезжала). Место под шапку контенту
     даёт padding-top у body ниже. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

/* Контент начинается под фиксированной шапкой. Высоту не угадываем:
   место.js замеряет её в --высота-шапки (шрифт владелец может менять);
   124px — запасное значение до отработки скрипта. Полосатая лента теста
   остаётся в потоке: видна сразу под шапкой, при прокрутке уезжает. */
body { padding-top: var(--высота-шапки, 124px); }


/* Логотип — ава телеграм-бота (монета со львом) вместо слова «Маршрут»
   (владелец, 03.09.2026). Круглая, в левом углу над столбиком панели досок
   (шапка слева ужата до 10px, чтобы края совпали); под монетой — аккуратная
   подпись «Маршрут». Кнопки Штамп/Литьё из-за крупного лого уезжают правее —
   так и задумано (пометка владельца на скриншоте 03.09.2026). */
.логотип { flex: 0 0 auto; text-align: center; }
.логотип img {
  width: 80px;                 /* 53 → 80: +50%, зазоры справа и снизу те же */
  height: 80px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}
.подпись-лого {
  display: block;
  margin-top: 2px;
  font-size: 10px;             /* 13 → 10: минус 20% (владелец, 03.09.2026) */
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3b3b48;
}
.логотип:hover { text-decoration: none; }

/* Пункты меню — кнопками в фирменных цветах: графитовая рамка, при наведении
   заливка золотом. Синих ссылок в шапке больше нет, к бренду они не шли. */
.меню { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  /* +13px: всё горизонтальное меню сдвинуто вправо на пятую часть кнопки
     (63px / 5; владелец, 03.09.2026) */
  margin-left: 13px; }

/* Пустое место шириной в кнопку: отделяет календарь от остальных разделов */
.отступ-меню { display: inline-block; width: 63px; flex: 0 0 auto; }

/* Календарь — зелёный, как таблица в экселе, откуда он и пришёл */
.пункт.значок.календарь svg { stroke: #217346; }
.пункт.значок.календарь:hover svg { stroke: #0f5132; }

/* Пункты меню — только значок, без подписи: название всплывает при наведении.
   Рисунок задаётся маской, а не картинкой: так значок красится в цвет кнопки
   и на золотом фоне становится чёрным, как остальной текст. */
.пункт.значок {
  display: inline-flex;
  align-items: center;      /* рисунок ровно по центру кнопки */
  justify-content: center;
  padding: 6px 10px;
  /* Размер жёсткий и одинаковый у всех: flex иначе растягивает кнопку по
     содержимому, и календарь (у него рисунок не картинкой, а чертежом svg)
     раздувался на всю строку. */
  flex: 0 0 63px;
  width: 63px;
  min-width: 63px;
  max-width: 63px;
  height: 48px;
  box-sizing: border-box;
}
/* Рисунок занимает 80% высоты кнопки и стоит ровно по центру. Ширина у всех
   своя — она зависит от самого рисунка, а равнять надо высоту: тогда значки
   выглядят одинаковыми. Файлы обрезаны по содержимому, без полей, иначе
   «80%» считались бы от пустого квадрата и значки казались разными. */
.пункт.значок .рисунок {
  display: block;
  width: 100%;
  height: 100%;            /* целиком внутри кнопки, по центру */
  background-color: #000;
  -webkit-mask: var(--значок) center / contain no-repeat;
  mask: var(--значок) center / contain no-repeat;
}
.пункт.значок svg {
  width: auto;
  max-width: 100%;         /* не даём чертежу растянуть кнопку */
  height: 100%;            /* значок выхода — того же размера, что остальные */
  fill: none;
  stroke: #000;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Название кнопки всплывает под ней сразу при наведении */
.пункт.значок { position: relative; }
.пункт.значок::after {
  content: attr(data-подпись);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 6px;
  background: #3b3b48;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s ease;
  z-index: 30;
}
.пункт.значок:hover::after,
.пункт.значок:focus-visible::after { opacity: 1; }

/* Кто в системе: имя с ролью — ссылка на смену своего пароля */
.я-в-системе {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  color: #3b3b48;
  text-decoration: none;
}
.я-в-системе:hover { background: #edece9; text-decoration: none; }

.меню .пункт,
.кто .пункт {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #cfcdc8;
  border-radius: 8px;
  background: #fff;
  color: #3b3b48;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.меню .пункт:hover,
.кто .пункт:hover {
  background: #b79b77;          /* GT Gold */
  border-color: #3b3b48;
  color: #000;
  text-decoration: none;
}
/* Кнопка раздела, где человек сейчас, горит золотом на любой странице
   (владелец, 10.09.2026). Зелёный календарь на золоте чёрный, как остальные. */
.меню .пункт.активен { background: #b79b77; border-color: #3b3b48; color: #000; }
.меню .пункт.значок.календарь.активен svg { stroke: #000; }
/* Служебные пункты (пароль, выход) — тише основных */
.кто .пункт.тихий {
  font-weight: 500;
  color: #6c6c75;
  border-color: #e2e0dc;
}

.кто { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.имя { font-weight: 600; white-space: nowrap; }

/* Роль — спокойная плашка графитом: цветные ярлыки в шапке спорили с брендом,
   а ролей стало шесть, и радуга из них выглядела вывеской, а не системой. */
/* Должность — подпись под именем, а не ярлык: рамка и заливка спорили с
   кнопками меню и притягивали взгляд к тому, что и так известно. */
.роль {
  font-size: 12px;
  color: #6c6c75;
  letter-spacing: .02em;
  font-weight: 600;
  white-space: nowrap;
}

/* На узком экране шапка складывается в две строки, а не режет пункты.
   Фиксировать её там нечем — высота плавает, поэтому шапка обычная,
   отступ контенту не нужен. */
@media (max-width: 900px) {
  .шапка { flex-wrap: wrap; gap: 10px 14px; position: static; }
  body { padding-top: 0; }
  .кто { margin-left: 0; width: 100%; }
}

/* --- Доска ------------------------------------------------------------ */

.доска { padding: 12px 18px 18px; min-height: calc(100vh - 60px); }

/* Сами колонки лежат в обёртке: у неё и прокрутка, и масштаб.
   Высота обёртки равна видимой части окна (её ставит место.js в --высота-доски),
   поэтому горизонтальный бегунок всегда виден внизу экрана: чтобы уехать
   вправо, не нужно сперва листать страницу до конца самой длинной колонки. */
.доска-обёртка {
  display: flex;
  gap: 14px;
  overflow: auto;
  align-items: flex-start;
  max-height: var(--высота-доски, none);
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}

/* Полосы прокрутки держим видимыми: в macOS они прячутся, и на доске
   непонятно, что вправо есть ещё колонки. Цвета — графит из брендбука. */
.доска-обёртка::-webkit-scrollbar { height: 12px; width: 12px; }
.доска-обёртка::-webkit-scrollbar-track {
  background: rgba(59, 59, 72, .12);
  border-radius: 6px;
}
.доска-обёртка::-webkit-scrollbar-thumb {
  background: #3b3b48;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.доска-обёртка::-webkit-scrollbar-thumb:hover { background: #2b2b36; background-clip: padding-box; }
.доска-обёртка::-webkit-scrollbar-corner { background: transparent; }
.доска-обёртка { scrollbar-color: #3b3b48 rgba(59, 59, 72, .12); }

/* Кнопки масштаба над доской */
.масштаб { display: flex; gap: 6px; margin-bottom: 10px; }
.кнопка-масштаба {
  width: 34px;
  height: 30px;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: #3b3b48;
  background: #fff;
  border: 1px solid #d8d3cb;
  border-radius: 6px;
  cursor: pointer;
}
.кнопка-масштаба:hover { background: #ede6dd; border-color: #3b3b48; }
.кнопка-масштаба.выбрана { background: #b79b77; border-color: #3b3b48; color: #000; }

/* Общий вид: все девять колонок сразу, без прокрутки. Обложки остаются —
   по картинке заказ узнают быстрее, чем по названию. */
.доска-обёртка.мелко { gap: 6px; }
.доска-обёртка.мелко .колонка {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px;
  border-radius: 8px;
}
.доска-обёртка.мелко .шапка-колонки { font-size: 11px; padding: 0 2px 6px; }
.доска-обёртка.мелко .карточка { padding: 6px; margin-bottom: 5px; }
.доска-обёртка.мелко .карточка img.превью {
  /* Обложка остаётся, но уменьшается ЦЕЛИКОМ, а не обрезается: на мелком
     масштабе изделие узнают по силуэту, а обрезанный кадр этого лишает. */
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 74px;
  width: 100%;
  object-fit: contain;
  background: #fff;
  margin-bottom: 4px;
  border-radius: 4px;
}
.доска-обёртка.мелко .клиент { font-size: 12px; line-height: 1.2; }
.доска-обёртка.мелко .мелко { font-size: 11px; }
.доска-обёртка.мелко .строка-карточки { margin-top: 2px; }

.колонка {
  flex: 0 0 260px;
  border-radius: 10px;
  padding: 10px;
  min-height: 90px;
}

.колонка.цель { outline: 3px dashed #3b3b48; outline-offset: -6px; }

.шапка-колонки {
  font-weight: 700;
  font-size: 16px;
  color: #000;
  padding: 2px 4px 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.счётчик { opacity: .55; font-weight: 600; }

.карточка {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 9px;
  box-shadow: 0 1px 3px rgba(20,25,50,.16);
  cursor: grab;
  display: block;
  color: #3b3b48;
}
.карточка:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(20,25,50,.24); }
.карточка.тащим { opacity: .45; }

.карточка img.превью {
  width: 100%;
  aspect-ratio: 1 / 1;          /* обложка на доске — квадрат */
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
  display: block;
}

.клиент { font-weight: 600; margin-bottom: 3px; line-height: 1.3; }
.мелко { font-size: 14px; color: #6c6c75; }
.строка-карточки { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; }

.пусто { color: rgba(0,0,0,.55); font-size: 14px; padding: 6px 4px; }

/* --- Обычные страницы -------------------------------------------------- */

.страница { max-width: 980px; margin: 0 auto; padding: 22px 20px 60px; }
.узкая { max-width: 460px; margin: 60px auto; padding: 0 20px; }

h1 { font-size: 26px; margin: 0 0 4px; }

/* Название карточки: заголовок и карандаш рядом. Поле правки показывается
   только по нажатию карандаша — в остальное время шапка чистая. */
.заголовок-заказа {
  display: flex;
  align-items: center;
  gap: 8px;
}
.карандаш {
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 4px 7px;
  color: #6c6c75;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.карандаш:hover { color: #3b3b48; border-color: #d8d3cb; background: #fff; }

.правка-имени { display: none; align-items: center; gap: 8px; }
.правка-имени.видно { display: flex; }
input.имя-клиента {
  font-size: 22px;
  font-weight: 700;
  color: #3b3b48;
  padding: 4px 8px;
  width: auto;
  min-width: 240px;
}
ont-size: 19px; margin: 26px 0 10px; }

.блок {
  background: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.поле { margin-bottom: 12px; }
.поле label { display: block; font-size: 14px; color: #6c6c75; margin-bottom: 4px; }

input[type=text], input[type=password], input[type=number], input[type=date],
select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d3d7e4;
  border-radius: 6px;
  font-size: 17px;
  font-family: inherit;
  /* Введённое значение — чёрным, а не фирменным графитом: требование
     владельца 25.08.2026, чтобы заполненное поле било в глаза рядом с
     пустым. Графит остаётся цветом остального текста системы. */
  color: #000;
  background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #c9e4d5; border-color: #5aa77f; }

/* ── Где заполнено, а где нет ──────────────────────────────────────────
   На длинной форме одинаковым цветом не видно, какое поле человек заполнил,
   а какое пропустил: «— выбрать —» в списке выглядело как выбранное значение.
   Поэтому пустое поле бледное, заполненное — обычным тёмным текстом.
   Класс «не-заполнено» вешает место.js: чистым CSS пустой список и пустую
   дату так не поймать.
   Бледный #757581 даёт 4,5:1 на белом — читается и на мониторе у станка. */
input::placeholder, textarea::placeholder { color: #757581; opacity: 1; }
input.не-заполнено, select.не-заполнено, textarea.не-заполнено { color: #757581; }
/* Сам список раскрывается обычным цветом: бледной остаётся только строка
   «— выбрать —», а не все варианты в нём. */
select.не-заполнено option { color: #000; }
textarea { min-height: 74px; resize: vertical; }

.кнопка {
  display: inline-block;
  padding: 9px 16px;
  background: #217346;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.кнопка:hover { background: #0f5132; text-decoration: none; }
.кнопка.серая { background: #eceef5; color: #3b3b48; }
.кнопка.мелкая { padding: 5px 11px; font-size: 16px; }

.ошибка {
  background: #fdecec;
  border: 1px solid #f3c2c2;
  color: #a32f2f;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.предупреждение {
  background: #fff6e0;
  border: 1px solid #f0d9a0;
  color: #7a5a12;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #eceef5; }
th { font-size: 14px; color: #6c6c75; font-weight: 600; }
td.число, th.число { text-align: right; font-variant-numeric: tabular-nums; }

.пара { display: flex; gap: 14px; }
.пара > * { flex: 1; }

.метка-этапа {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

/* --- Карточка-ТЗ: слева поля, справа рендеры и техкарта ----------------- */
/* Повторяет бумажное ТЗ на производство, к которому привыкли в цеху. */

.широкая { max-width: 1240px; }

/* Календарь занимает всю ширину окна: чем больше дней видно сразу, тем он
   полезнее. Поля оставляем небольшие, чтобы сетка не липла к краям. */
.во-всю-ширину { max-width: none; padding: 18px 16px 40px; }

.шапка-заказа {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.тз-макет {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 18px;
}

.тз-поля {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
}

.тз-строка { margin-bottom: 9px; }

/* Серая плашка-заголовок — как в таблице ТЗ */
.тз-подпись {
  background: #a8a9ad;   /* GT Silver */
  color: #3b3b48;
  font-size: 14px;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 3px;
}

/* Все ячейки, куда вписывают данные, одного размера — независимо от того,
   поле это, список, календарь или значение только для чтения. Иначе строки
   в карточке гуляют по высоте: у календаря был свой шрифт, у списка — своя
   высота от браузера, у нередактируемого значения — вообще другая. */
.тз-значение,
input.тз-значение,
select.тз-значение,
div.тз-значение {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  color: #3b3b48;
  background: transparent;
}
/* Календарь и список — тем же размером; стрелку и иконку рисует браузер */
input.тз-значение[type=date] { font: inherit; font-size: 16px; }
select.тз-значение { appearance: auto; }
input.тз-значение[type=date]::-webkit-calendar-picker-indicator { opacity: .45; }
input.тз-значение[type=date]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.тз-значение:hover { border-color: #d3d7e4; background: #fbfbfd; }
.тз-значение:focus { border-color: #5aa77f; background: #fff; outline: 2px solid #c9e4d5; }
.тз-значение.только-чтение { color: #3b3b48; }

.тз-картинки { display: flex; flex-direction: column; gap: 18px; }

.картинки-блок {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
}
.картинки-блок h3 {
  margin: 0 0 10px;
  font-size: 18px;
  text-align: center;
}

/* Картинки крупные: в цеху смотрят с телефона и с монитора у станка,
   мелкие превью бесполезны. min() нужен, чтобы на узком экране картинка
   не вылезала за край страницы.

   Рендеры — квадратные: изделие круглое или почти круглое, квадрат его
   вмещает без лишних полей. Техкарты — лист А4 лёжа (297×210), это документ,
   и в своих пропорциях он читается, а не плавает в пустом квадрате. */
/* Три квадратные картинки в ряд, дальше — следующий ряд */
.сетка-картинок {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.сетка-техкарт {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 12px;
}

.картинка { margin: 0; }
.картинка img {
  width: 100%;
  aspect-ratio: 1 / 1;          /* рендер — квадрат */
  height: auto;
  object-fit: contain;
  background: #f1f2f6;
  border: 1px solid #e3e5ee;
  border-radius: 6px;
  display: block;
}
.сетка-техкарт .картинка img {
  aspect-ratio: 297 / 210;      /* А4 по горизонтали */
}
.картинка.обложка img { border-color: #4e9c66; border-width: 2px; }
.картинка figcaption {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 5px;
  font-size: 14px;
}

.значок-обложки { color: #2e7549; font-weight: 600; }

.ссылка-кнопка {
  background: none;
  border: 0;
  padding: 0;
  color: #217346;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.ссылка-кнопка:hover { text-decoration: underline; }
.ссылка-кнопка.удалить { color: #a32f2f; }

/* Пустое место под картинку — как перечёркнутый прямоугольник в макете */
.место-под-картинку {
  aspect-ratio: 1 / 1;
  max-height: 380px;
  border: 1px dashed #c8ccda;
  border-radius: 6px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #dcdfe9 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), #dcdfe9 50%, transparent calc(50% + 1px)),
    #f1f2f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c6c75;
  font-size: 16px;
}

.загрузка {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.загрузка input[type=file] { flex: 1; min-width: 180px; font-size: 16px; }
/* Выбор файлов внутри плюсика: поле живое, но невидимое — кружок и есть кнопка */
.загрузка .плюсик { position: relative; overflow: hidden; flex: 0 0 auto; }
.кружок-загрузки svg { display: block; }
.загрузка .плюсик input[type=file].выбор-в-кружке { position: absolute; inset: 0;
    opacity: 0; width: 100%; height: 100%; min-width: 0; cursor: pointer; }
.есть-js .загрузка .только-без-js { display: none; }

.план-этапа {
  background: #f2f8f4;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.план-этапа table { margin: 0; }
.план-этапа td { border-bottom-color: #e0ece4; }

/* --- Карточка «столбцом»: описание → фото → техкарты → смета и факт ----- */
/* Читается как разговор о заказе: что заказали, как выглядит, как делать,
   сколько заложено и сколько вышло. Цвета фирменные: золото и графит. */

/* Панель этапов прилипает под шапкой и едет вместе со страницей: карточка
   длинная, а переводить заказ нужно с любого места. Шапка сидит на z-index 20,
   поэтому панель ниже — 15, чтобы уезжала под неё, а не поверх. */
.панель-этапов {
  position: sticky;
  top: var(--высота-шапки, 52px);   /* высоту шапки замеряет место.js */
  z-index: 15;
  background: #f4f5f9;       /* фон страницы, иначе текст просвечивает под панелью */
  margin: 0 -20px 12px;
  padding: 10px 20px 2px;
  box-shadow: 0 6px 10px -8px rgba(20,25,50,.35);
}
.панель-этапов .пульт-этапа { margin-bottom: 8px; }
.панель-этапов .ответ-перевода { margin-bottom: 8px; }

/* Дорожка этапов — где карточка сейчас и сколько ещё правее */
.дорожка {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.шаг {
  flex: 1 1 0;
  min-width: 78px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #d8d3cb;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.25;
  color: #6c6c75;
}
.шаг.пройден { background: #ede6dd; border-color: #c9bda9; color: #3b3b48; }
.шаг.тут {
  background: #b79b77;
  border-color: #3b3b48;
  border-width: 1.5px;
  color: #000;
  font-weight: 600;
}
.номер-шага { display: block; font-weight: 700; font-size: 14px; }

/* Шаг, по которому можно кликнуть, чтобы перевести карточку туда */
.шаг.кликабельный {
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.шаг.кликабельный:hover { border-color: #3b3b48; background: #ede6dd; }

/* Дорожка со стрелками по бокам: шаг назад и шаг вперёд по этапам */
.ряд-этапов {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.ряд-этапов .дорожка { flex: 1 1 auto; margin-bottom: 0; }

.стрелка {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: #3b3b48;
  background: #fff;
  border: 1px solid #d8d3cb;
  border-radius: 6px;
  cursor: pointer;
}
.стрелка:hover { background: #ede6dd; border-color: #3b3b48; }
.стрелка.пустая { visibility: hidden; cursor: default; }

.ответ-перевода {
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-weight: 600;
}
.ответ-перевода.хороший { background: #eef6f0; border: 1px solid #cfe4d6; color: #2e7549; }
.ответ-перевода.плохой  { background: #fdecec; border: 1px solid #f3c2c2; color: #a32f2f; }

/* Поле, которое только что сохранили — подсветим, чтобы глаз нашёл место */
.только-сохранено {
  background: #eef6f0;
  outline: 2px solid #cfe4d6;
  border-radius: 6px;
}
.имя-шага {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Описание заказа — текстом, как его присылает бот перед сметой.
   Не таблица: у каждого изделия свой набор параметров. */
.описание-заказа {
  padding: 12px 14px;
  background: #f7f5f1;
  border-left: 3px solid #b79b77;   /* GT Gold — «это пришло из бота» */
  /* Скругление блоков карточки — 8px, как у этапов (владелец, 08.10.2026) */
  border-radius: 8px;
  margin-bottom: 12px;
}
.строка-описания { line-height: 1.5; }
.строка-описания.главная { font-weight: 700; font-size: 19px; margin-bottom: 4px; }

/* Корректировки — жирным под описанием. Описание бота не правится никогда,
   уточнения дописываются сюда: видно, кто и когда что поправил. */
.корректировки {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #b79b77;
}
.подпись-корректировок {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c6c75;
  margin-bottom: 6px;
}
.корректировка {
  font-weight: 700;
  line-height: 1.45;
}
.корректировка + .кто-когда { margin-bottom: 8px; }
.кто-когда { font-size: 14px; color: #6c6c75; }
.правлено { color: #7a5a12; }
.правка-строки { display: inline-block; margin-left: 6px; }
.правка-строки > summary { font-size: 13px; }
.правка-строки textarea { margin-top: 6px; }
.корректировки > *:last-child { margin-bottom: 0; }

/* Текст описания в карандаше «что заказано» и свёрнутая история правок (02.10.2026) */
.правка-текста-заказа textarea { width: 100%; font: inherit; line-height: 1.5; }
.история-правок-заказа { margin-top: 10px; font-size: 14px; }
.история-правок-заказа > summary { cursor: pointer; color: #6c6c75; }
.запись-истории-правок { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid #b79b77; }

/* Фон и обратная сторона — строкой в описании, правится на месте */
.строка-фона {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  position: relative;
}
.подпись-фона { white-space: nowrap; }
.строка-фона input[type=text] { flex: 1 1 auto; width: auto; padding: 4px 8px; }

/* Кем и когда посчитана смета — служебная строка, мельче обычного текста */
.кем-посчитана {
  font-size: 13px;
  color: #6c6c75;
  margin: 8px 0 0;
}

.цены-бота {
  padding: 8px 0;
  border-top: 1px solid #e6e2da;
  line-height: 1.6;
}

/* Итог по заказу: слева план по расчёту бота, справа факт со сравнением */
.итог-заказа {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.сторона-итога { min-width: 0; }
.сторона-итога.факт-сторона {
  padding-left: 18px;
  border-left: 1px solid #e6e2da;
}
.итог-таблица td { padding: 8px 8px; }
.итог-таблица .число { white-space: nowrap; }
col.к-показатель { width: 28%; }
col.к-план       { width: 22%; }
col.к-факт       { width: 22%; }
col.к-разница    { width: 28%; }
/* в этой таблице поля не вводят — подсветку стороны факта убираем */
.итог-таблица td:nth-child(n+3) { background: none; }
.доля {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: #ede6dd;
  font-size: 14px;
  font-weight: 600;
}
.сравнение-итога {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
}
.сравнение-итога.хорошо { background: #eef6f0; color: #2e7549; }
.сравнение-итога.плохо  { background: #fdecec; color: #a32f2f; }

/* Цены заказа таблицей: расчёт, фактическая продажа, нестандартная упаковка */
.цены {
  width: 100%;
  margin-top: 12px;
  table-layout: fixed;
}
/* Шапка — как у таблицы расчёта на доске смет: обычными буквами, без
   разрядки (владелец, 07.10.2026) */
.цены th {
  font-size: 13px;
  font-weight: 700;
  color: #6c6c75;
  border-bottom: 1px solid #d8d3cb;
}
/* Полосы разделов — той же высоты, что строки таблицы цен не диктуют */
.цены tr.раздел-расчёта td { height: auto; }
.цены td { vertical-align: middle; }
.цены td:first-child { width: 26%; }
.цены td:nth-child(2), .цены td:nth-child(3) { width: 18%; }
.цены .поля-карточки { margin: 0; position: relative; }
/* Ровные строки: одна высота у всех, поля и текст по одной оси. Поля одной
   высоты с текстовыми клетками, чтобы строка с полем не была выше строки
   без него (владелец, 28.08.2026). */
.цены td { vertical-align: middle; height: 46px; padding-top: 4px; padding-bottom: 4px; }
.цены input[type=text], .цены select { width: 100%; padding: 5px 8px; font-size: 16px; height: 34px; }
.цены select.нужна-причина { border-color: #a32f2f; box-shadow: 0 0 0 2px rgba(163,47,47,.15); }
.цены .отклонение { display: inline-block; vertical-align: middle; }
/* Причина другой цены в форме заказа из корзины — тот же вид, что в
   карточке (строкой выше): рамка, белый фон, высота строки цен, красная
   рамка, пока причина нужна и не выбрана (владелец, 07.10.2026) */
select.причина-корзины { width: 100%; height: 34px; padding: 5px 8px; font-size: 16px; }
.поле-списка.причина-корзины { height: 34px; padding: 5px 28px 5px 8px; font-size: 16px;
  border-color: #d3d7e4; border-radius: 6px; }
select.причина-корзины.нужна-причина,
.поле-списка.причина-корзины.нужна-причина { border-color: #a32f2f; box-shadow: 0 0 0 2px rgba(163,47,47,.15); }
.цены input.в-колонке { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.цены .отметка { position: absolute; right: 4px; top: -14px; }
.есть-js .цены .только-без-js { display: none; }

/* Насколько фактическая продажа ушла от расчёта бота */
.отклонение {
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 16px;
}
.отклонение.хорошо { background: #eef6f0; color: #2e7549; }
.отклонение.плохо  { background: #fdecec; color: #a32f2f; }

.правка { margin-top: 12px; }
.правка > summary {
  cursor: pointer;
  color: #217346;
  font-size: 16px;
  width: max-content;
}
.правка > summary:hover { text-decoration: underline; }

/* Пустое место под техкарту — в пропорциях листа А4 лёжа */
.место-под-картинку.а4 { aspect-ratio: 297 / 210; }

/* Поля «Договор и сроки» — три колонки, значения правятся на месте */
.сетка-описания {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 14px;
}
.клетка-описания { min-width: 0; }
.широкая-клетка { grid-column: 1 / -1; }

.строка-денег {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e3e5ee;
}

/* Итоги план/факт по всему заказу. Когда до них долистали, они прилипают
   под панелью этапов: цифры «сколько заложено / потрачено / осталось» нужны
   перед глазами, пока заполняешь этапы ниже. Высоты шапки и панели замеряет
   место.js — угадывать числами нельзя, они зависят от шрифта. */
.итоги {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
  position: sticky;
  top: calc(var(--высота-шапки, 52px) + var(--высота-панели, 90px));
  z-index: 10;
  background: #fff;
  padding: 8px 0;
}
.итог {
  flex: 1 1 180px;
  padding: 10px 14px;
  background: #ede6dd;
  border-radius: 8px;
}
.цифра { font-size: 23px; font-weight: 700; color: #3b3b48; margin-top: 2px; }
.цифра.хорошо { color: #2e7549; }
.цифра.плохо  { color: #a32f2f; }
.мелко.хорошо { color: #2e7549; }
.мелко.плохо  { color: #a32f2f; }

/* Один этап: слева смета, справа факт */
.этап-строка {
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20,25,50,.10);
}
.этап-строка.впереди { opacity: .72; }

.этап-имя {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f7f5f1;
  border-bottom: 1px solid #e6e2da;
  font-weight: 600;
}
.этап-строка.тут .этап-имя { background: #b79b77; color: #000; }
.этап-строка.пройден .этап-имя { background: #ede6dd; }

.номер-этапа {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #3b3b48;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  flex: none;
}

.бирка {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 10px;
  background: #3b3b48;
  color: #fff;
}
.бирка.тихая { background: none; border: 1px solid #b0aaa0; color: #6c6c75; }
.тихая { color: #6c6c75; }

.план-факт {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.сторона { padding: 10px 12px; min-width: 0; }
.план-сторона { background: #fbfaf8; border-right: 1px solid #e6e2da; }

.подпись-стороны {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c6c75;
  margin-bottom: 6px;
}

.итого-строка td { border-top: 1px solid #d8d3cb; border-bottom: 0; }

.итого-факта {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e6e2da;
}

/* Поле факта: подпись, поле, кнопка-галочка в одну строку */
.поле-этапа { margin-bottom: 8px; }
.поле-этапа label { display: block; font-size: 14px; color: #6c6c75; margin-bottom: 3px; }
.ввод-этапа { display: flex; gap: 6px; align-items: center; }
.ввод-этапа .кнопка { flex: none; padding: 5px 10px; }

/* Поля этапов сохраняются сами. Кнопка «ОК» нужна только если JS не работает:
   скрипт ставит на страницу класс «есть-js» и кнопка уходит. Если запрос не
   прошёл (связь пропала), скрипт вешает форме «без-связи» и кнопка
   возвращается — сохранить руками. */
.есть-js .поле-этапа .только-без-js { display: none; }
.есть-js .поле-этапа.без-связи .только-без-js { display: inline-block; }

.строка-сохранения {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  min-height: 18px;
}
.есть-js .поля-карточки .только-без-js { display: none; }
.есть-js .поля-карточки.без-связи .только-без-js { display: inline-block; }

.отметка {
  flex: none;
  font-size: 14px;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
}
.отметка.видно { opacity: 1; }
.отметка.хорошо { color: #2e7549; }
.отметка.плохо  { color: #a32f2f; opacity: 1; }
.звёздочка { color: #a32f2f; }

.что-спросят { margin: 0 0 6px; padding-left: 18px; }
.что-спросят li { margin-bottom: 2px; }

/* --- Операции этапа: кол-во × тариф = сумма ---------------------------- */
/* Ширины колонок жёсткие: без этого одна широкая ячейка растягивает колонку,
   и поля в соседних строках разъезжаются. */

.операции { padding: 14px 16px 6px; }

.таблица-операций {
  width: 100%;
  table-layout: fixed;
}
col.к-операция { width: 38%; }
col.к-смета    { width: 14%; }
col.к-кол      { width: 16%; }
col.к-тариф    { width: 16%; }
col.к-сумма    { width: 16%; }
col.к-где      { width: 32%; }   /* «где делали» — на этапе матрицы */
.таблица-операций select {
  width: 100%;
  padding: 6px 8px;
}

/* Шапка в два уровня: слева план из сметы, справа факт */
.шапка-групп td {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c6c75;
}
.группа-план { text-align: right; }
.группа-факт {
  /* «Факт» стоит над колонкой сумм — там, где итог этой части */
  text-align: right;
  background: #f7f5f1;
  border-radius: 6px 6px 0 0;
}

.таблица-операций th {
  font-size: 13px;
  font-weight: 700;
  color: #6c6c75;
  border-bottom: 1px solid #d8d3cb;
  white-space: nowrap;
}
.таблица-операций td { vertical-align: middle; }
.таблица-операций td:nth-child(n+3) { background: #fbfaf8; }   /* сторона факта */
/* Аккуратная вертикальная черта между планом и фактом (владелец, 28.08.2026):
   по левому краю первой колонки факта, тем же цветом, что линии заголовка.
   Таблица цен — не план/факт, её не трогаем. */
.таблица-операций:not(.цены) td:nth-child(3),
.таблица-операций:not(.цены) th:nth-child(3),
.таблица-операций .группа-факт { border-left: 1px solid #d8d3cb; }

/* Поля внутри таблицы: одинаковые по всей колонке, цифры справа */
.таблица-операций .поле-этапа { margin: 0; position: relative; }
.таблица-операций .поле-этапа input[type=text] {
  width: 100%;
  padding: 6px 8px;
  text-align: right;
}
.строка-расходов input[type=text]:not(.сумма-расхода) { text-align: left; }
.таблица-операций .отметка { position: absolute; right: 4px; top: -14px; }
.есть-js .таблица-операций .только-без-js { display: none; }

.сумма-операции { font-weight: 600; white-space: nowrap; }
.строка-расходов td { border-top: 1px solid #e6e2da; }
.строка-расходов .ссылка-кнопка { display: block; font-size: 12px; }

/* Добавление расхода — строкой в стиле таблицы: «плюс», описание, сумма
   справа под колонкой сумм. Ширины подогнаны под колонки таблицы. */
.добавить-расход {
  display: flex;
  gap: 8px;
  align-items: center;
}
.плюс {
  flex: 0 0 32px;
  height: 32px;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: #3b3b48;
  background: #fff;
  border: 1px solid #d8d3cb;
  border-radius: 6px;
  cursor: pointer;
}
.плюс:hover { background: #ede6dd; border-color: #3b3b48; }

.добавить-расход .за-что {
  flex: 1 1 auto;
  width: auto;
  text-align: left;
}
/* Сумма расхода лежит в колонке сумм и ведёт себя как поля операций:
   во всю ячейку, цифры по правому краю. */
.таблица-операций .сумма-расхода {
  width: 100%;
  padding: 6px 8px;
  text-align: right;
  /* как цифры в этом столбце выше */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Страница выбора шрифта -------------------------------------------- */

.образец { padding: 18px 20px; }
.образец.выбранный { box-shadow: 0 0 0 2px #b79b77; }

.шапка-образца {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.выбор-образца { flex: none; }

/* --- Форма ручного заказа: параметры как в боте --------------------------- */

.сетка-параметров {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 16px;
}
.сетка-параметров .поле { margin-bottom: 8px; }

@media (max-width: 900px) {
  .сетка-параметров { grid-template-columns: 1fr; }
}

/* --- Список смет ------------------------------------------------------- */

tr.смета:hover { background: #f6f8fd; }
.поиск { display: flex; gap: 10px; margin-bottom: 16px; }
.поиск input { flex: 1; }

@media (max-width: 900px) {
  .тз-макет { grid-template-columns: 1fr; }
  .сетка-картинок { grid-template-columns: 1fr; }
  /* Смета и факт друг под другом, описание в одну колонку */
  .план-факт { grid-template-columns: 1fr; }
  .план-сторона { border-right: 0; border-bottom: 1px solid #e6e2da; }
  .сетка-описания { grid-template-columns: 1fr; }
}

/* Кнопка «Печать СЛП» в шапке карточки: бумага в цех, не действие над заказом,
   поэтому спокойная — рамка графитом, без золотой заливки. */
.шапка-заказа { align-items: flex-start; }
.печать-слп {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #3b3b48;
  color: #3b3b48;
  text-decoration: none;
}
.печать-слп:hover { background: #b79b77; color: #000; }

/* ─── Архив закрытых заказов ─────────────────────────────────────────── */
.отбор-архива {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.отбор-архива select,
.отбор-архива input[type="search"] {
  font: inherit;
  padding: 5px 8px;
  border: 1px solid #b7b5b0;
  border-radius: 6px;
  background: #fff;
}
.таблица-архива { width: 100%; border-collapse: collapse; }
.таблица-архива th,
.таблица-архива td {
  padding: 6px 8px;
  border-bottom: 1px solid #e2e0dc;
  text-align: left;
  vertical-align: top;
}
.таблица-архива th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #6c6c75;
  border-bottom: 2px solid #3b3b48;
}
.таблица-архива .число { text-align: right; }
.таблица-архива .итого-строка td { border-top: 2px solid #3b3b48; border-bottom: none; }
.а-номер { width: 44px; }
.а-тираж { width: 72px; }
.а-отгрузка { width: 110px; }
.а-продажа, .а-себест, .а-выручка { width: 120px; }
.а-менеджер { width: 130px; }

/* Пометка на карточке доски: производство своё сделало, ждём деньги */
.карточка .ждём-деньги {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #3b3b48;
  color: #fff;
  font-size: 11px;
}

/* ─── Оплата и отгрузка в карточке ───────────────────────────────────── */
.ряд-оплаты {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 14px;               /* как в сетке описания — строки в один ряд */
}
.клетка-денег { min-width: 0; }
.ряд-отметок {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e0dc;
}
.встроенная { display: inline; margin: 0; }
.отметка-события { font-size: 13px; }
.отметка-события.пусто { color: #6c6c75; }
.кнопка.тихая {
  background: #fff;
  border: 1px solid #b7b5b0;
  color: #6c6c75;
}
.кнопка.главная { background: #b79b77; color: #000; border: 1px solid #3b3b48; }

/* Пометка вида картинки в карточке: техкарта на печати идёт во всю ширину */
.значок-вида {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #3b3b48;
  border-radius: 4px;
  font-size: 11px;
}

/* ─── Сотрудники и права ─────────────────────────────────────────────── */
.плашка-сообщения {
  margin: 12px 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #3b3b48;
}
.таблица-людей, .таблица-прав { width: 100%; border-collapse: collapse; }
.таблица-людей th, .таблица-людей td,
.таблица-прав th, .таблица-прав td {
  padding: 6px 8px;
  border-bottom: 1px solid #e2e0dc;
  text-align: left;
  vertical-align: middle;
}
.таблица-людей th, .таблица-прав th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #6c6c75;
  border-bottom: 2px solid #3b3b48;
}
.таблица-людей input[type="text"],
.таблица-людей select {
  font: inherit;
  font-size: 15px;
  padding: 4px 6px;
  width: 100%;
  border: 1px solid #d5d3ce;
  border-radius: 4px;
  background: #fff;
}
.таблица-людей tr.отключён { background: #f3f2f0; color: #6c6c75; }
.строка-действий { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.сброс-пароля summary { cursor: pointer; font-size: 13px; }
.сброс-пароля input[type="text"] { width: 170px; margin: 6px 6px 0 0; }
.л-имя { width: 26%; }
.л-логин { width: 15%; }
.л-роль { width: 18%; }
.л-вход { width: 9%; }
.таблица-прав .число { text-align: center; }

/* ─── База знаний ────────────────────────────────────────────────────── */
.список-статей { margin: 0; padding-left: 22px; }
.список-статей li { margin-bottom: 8px; line-height: 1.4; }
.список-статей li.скрытая { color: #6c6c75; }
.новая-статья { margin-top: 14px; }
.новая-статья summary,
.список-статей + details summary { cursor: pointer; }
.поле.узкое input { max-width: 140px; }

/* Текст учебника: читают у станка, поэтому крупнее и с воздухом */
.текст-статьи { font-size: 17px; line-height: 1.55; max-width: 44em; }
.текст-статьи p { margin: 0 0 14px; }

/* ─── Плитки учебников в базе знаний ─────────────────────────────────── */
.плитки-учебников {
  display: grid;
  /* Ширину плитки держим в узде: у технолога раздел один, и растянутая на всю
     страницу кнопка выглядела нелепо. Теперь она одного размера у всех. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: start;
  gap: 16px;
  margin: 16px 0 8px;
}
.плитка {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(59, 59, 72, .12);
}
.лицо-плитки {
  display: block;
  color: #3b3b48;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.лицо-плитки:hover { text-decoration: none; }
.плитка:not(.готовится):hover {
  box-shadow: 0 4px 14px rgba(59, 59, 72, .2);
  transform: translateY(-2px);
}
/* Кнопка учебника — квадрат. Сама картинка тоже квадратная и уже собрана с
   белыми полями: станок в ней занимает 80% высоты, по центру. Поэтому здесь
   она просто вписывается целиком, без второго уменьшения. */
.картинка-плитки {
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.картинка-плитки img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.рисунок-плитки { display: block; width: 100%; height: 100%; object-fit: cover; }
.подпись-плитки {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #e2e0dc;
}
.название-плитки { font-size: 18px; font-weight: 700; }

/* Плитка без адреса — приглушена и не ведёт никуда */
.плитка.готовится { opacity: .72; }
.плитка.готовится .лицо-плитки { pointer-events: none; }

.настройка-плитки { padding: 0 14px 12px; }
.настройка-плитки summary { cursor: pointer; font-size: 13px; color: #6c6c75; }
.настройка-плитки form { margin-top: 10px; }

/* ─── Сотрудники карточками ──────────────────────────────────────────── */
.сводка-людей { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 18px; }
.плашка-числа {
  background: #fff;
  border-radius: 10px;
  padding: 12px 18px;
  min-width: 128px;
  box-shadow: 0 1px 3px rgba(59, 59, 72, .1);
}
.плашка-числа.тихая { background: #f3f2f0; }
.число-крупно { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }

.люди-карточками {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.карточка-человека {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 1px 3px rgba(59, 59, 72, .12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.карточка-человека.вход-закрыт { background: #f3f2f0; }

.верх-карточки { display: flex; align-items: center; gap: 12px; }
/* Кружок с инициалами: фотографий сотрудников нет и заводить их незачем,
   а человека надо узнавать взглядом, а не читать строку. */
.кружок {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  background: #edece9;
  color: #3b3b48;
}
/* Цвет кружка по роли: производство — золото, руководство — графит */
.роль-владелец .кружок,
.роль-партнёр .кружок { background: #3b3b48; color: #fff; }
.роль-начальник .кружок,
.роль-технолог-штамп .кружок,
.роль-технолог-литьё .кружок { background: #b79b77; color: #000; }
.карточка-человека.вход-закрыт .кружок { background: #d8d6d2; color: #6c6c75; }

.кто-это { min-width: 0; }
.имя-человека { font-size: 17px; font-weight: 700; line-height: 1.2; }
.метка-закрыт {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c6c75;
}

.строки-человека { display: flex; flex-direction: column; gap: 6px; }
.строка-поля { display: flex; align-items: center; gap: 8px; }
.подпись-поля {
  flex: 0 0 46px;
  font-size: 12px;
  color: #6c6c75;
  text-transform: lowercase;
}
.строка-поля input,
.строка-поля select {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 5px 8px;
  border: 1px solid #d5d3ce;
  border-radius: 6px;
  background: #fff;
}
.строки-человека .кнопка { align-self: flex-start; margin-top: 2px; }

.низ-карточки {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #eceae6;
}
.низ-карточки .сброс-пароля { margin-left: auto; }

/* ─── Календарь сдач ─────────────────────────────────────────────────── */
.шапка-календаря {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
}
.ход-календаря { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ход-календаря .разделитель {
  width: 1px;
  height: 20px;
  background: #d5d3ce;
  margin: 0 4px;
}

/* Сетка прокручивается вбок, а левые колонки остаются на месте: иначе на
   длинном отрезке не понять, чья это строка. */
.обёртка-календаря {
  overflow: auto;
  max-height: calc(100vh - 210px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(59, 59, 72, .12);
}
.календарь {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  table-layout: fixed;          /* ширины из colgroup, а не «как получится» */
  width: 100%;
  min-width: 900px;             /* на узком экране появится прокрутка вбок */
}
/* Три левые колонки — строго заданной ширины: от этих же чисел считается,
   где им «прилипнуть». Дни ширины НЕ имеют — они делят между собой остаток,
   поэтому календарь занимает всю страницу, а левые колонки не разъезжаются.
   Раньше ширину имели и дни: таблица растягивалась целиком, все колонки
   росли пропорционально, а «прилипшие» оставались на старых местах — и
   наезжали на сетку. */
.календарь col.к-клиент { width: 218px; }
/* Изделие сузили на треть (было 104): длинных названий там не бывает,
   а лишняя ширина отбирала место у дней. */
.календарь col.к-изделие { width: 73px; }
.календарь col.к-тираж { width: 73px; }
.календарь th,
.календарь td {
  border-right: 1px solid #eceae6;
  border-bottom: 1px solid #eceae6;
  padding: 0;
  height: 44px;                 /* две строки записи помещаются целиком */
  text-align: center;
  vertical-align: middle;
  background: #fff;
}
.календарь thead th {
  position: sticky;
  z-index: 3;
  padding: 5px 2px;
  font-weight: 600;
  color: #6c6c75;
}
/* Две строки шапки: месяцы сверху, дни под ними. Каждая липнет на своей высоте,
   чтобы при прокрутке вниз обе оставались видны. */
.календарь thead .строка-месяцев th {
  top: 0;
  height: 24px;
  border-bottom: 1px solid #eceae6;
}
.календарь thead .строка-дней th {
  top: 24px;
  border-bottom: 2px solid #3b3b48;
}
.календарь .месяц-шапка {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  color: #b79b77;
  background: #fdfbf8;
  border-right: 1px solid #e2ddd4;
}
/* Левые колонки БЕЗ прилипания. Прилипание держит их позицию отдельно от
   таблицы: стоит ширинам разойтись — колонки наезжают на сетку дней. Ловили
   это дважды 18.08.2026; проще отказаться, чем чинить по кусочку. */
/* Название заказа — единственное, что стоит слева: его читают, а не
   сравнивают. Всё остальное по центру и по высоте, чтобы строка выглядела
   ровной. */
.календарь .к-клиент {
  text-align: left;
  padding: 7px 10px;
  white-space: nowrap;
  background: #fff;
  vertical-align: middle;
  font-weight: 600;
}
.календарь .к-изделие,
.календарь .к-тираж,
.календарь .к-срок {
  text-align: center;
  vertical-align: middle;
  padding: 7px 4px;        /* одинаковые поля: колонки выглядят парой */
  white-space: nowrap;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
}
.календарь .к-тираж {
  font-variant-numeric: tabular-nums;
  /* черта отделяет описание заказа от сетки дней */
  border-right: 2px solid #3b3b48;
}
/* Крайний столбец: срок, не попавший в показанный отрезок */
.календарь col.к-срок { width: 104px; }
.календарь .к-срок {
  border-left: 2px solid #3b3b48;
  font-size: 13px;
}
.календарь .к-срок.просрочен-срок { color: #c0392b; font-weight: 600; }
/* Длинное название не ломает сетку, а обрезается многоточием.
   ⚠️ display:block ставим ТОЛЬКО ссылке внутри ячейки. Самой ячейке нельзя:
   от этого она выпадает из таблицы и повисает плавающим блоком поверх сетки —
   наступили 18.08.2026, колонка «изделие» уехала поверх дней. */
.календарь .к-клиент a { display: block; }
.календарь .к-клиент a,
.календарь .к-изделие {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.календарь thead .к-тираж { border-right: 2px solid #3b3b48; }
.календарь thead .к-срок { border-left: 2px solid #3b3b48; }
.этап-строки { display: block; font-weight: 400; }

/* День в шапке: буква недели над числом. Ширину не задаём — дни делят остаток
   страницы между собой. */
.календарь .день { line-height: 1.15; }
.календарь .день .буква { display: block; font-size: 10px; text-transform: uppercase; }
.календарь .день .число { display: block; font-size: 13px; color: #3b3b48; }


/* Выходные — светлее, без цвета: сетка должна оставаться спокойной */
.календарь .выходной { background: #f5f4f2; }
/* Сегодня — единственная вертикаль, которую видно сразу */
.календарь .сегодня {
  background: #fbf6ef;
  box-shadow: inset 1px 0 0 #b79b77, inset -1px 0 0 #b79b77;
}
.календарь thead .сегодня { color: #000; background: #b79b77; }
.календарь thead .сегодня .число { color: #000; font-weight: 700; }

/* Сдача — плашка золотом, просроченная — красным */
/* Сдача помечается флажком: слово «сдача» не влезает в узкую клетку, когда
   показываешь два месяца сразу. Дата остаётся в подсказке при наведении. */
/* День сдачи — красная рамка, внутри пишется как в обычной клетке
   (владелец, 03.09.2026; флажков больше нет). Просрочка — рамка + лёгкая
   красная заливка, чтобы била в глаза. */
/* Рамка сдачи: обычная — фирменный зелёный, просроченная — красная,
   со скруглением (владелец, 03.09.2026). Рисуем псевдоэлементом: у ячеек
   слитой таблицы border-radius на самой клетке не работает. */
.календарь td.сдача::after { content: ""; position: absolute; inset: 1px;
  border: 2px solid #217346; border-radius: 6px; pointer-events: none; }
.календарь td.сдача-просрочена::after { border-color: #c0392b; }

/* Текст только для голосовых программ — на экране его нет */
.только-читалке {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Драгметалл — цветом названия (владелец, 07.10.2026): серебро синим,
   золото и платина жёлтым. Оттенки — самые светлые, что держат контраст
   4.5:1 на белом: чистый голубой и жёлтый у станка не читаются. Просрочка
   ниже и перекрывает их красным — тревога важнее металла. */
.календарь .к-клиент a.металл-серебро { color: #1976b8; }
.календарь .к-клиент a.металл-золото { color: #8f6c00; }
.календарь tr.просрочен .к-клиент a { color: #c0392b; }

.календарь tbody tr:hover td,
.календарь tbody tr:hover th { background: #fbfbfa; }
.календарь tbody tr:hover .сегодня { background: #f7efe3; }

.список-вне { margin: 0; padding-left: 20px; }
.список-вне li { margin-bottom: 6px; }

/* Записи на клетках календаря */
.календарь td.можно-писать { cursor: text; }
.календарь td.можно-писать:hover { background: #fbf7f1; }
.календарь .запись {
  display: block;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1.2;
  color: #3b3b48;
  text-align: center;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.календарь td.с-записью { background: #fdfbf8; }
/* Поле правки разворачивается шире клетки — иначе в неё ничего не написать */
.календарь .поле-записи {
  position: absolute;
  z-index: 5;
  width: 220px;
  margin-left: -2px;
  font: inherit;
  font-size: 13px;
  padding: 5px 7px;
  border: 1px solid #3b3b48;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(59, 59, 72, .18);
}
.календарь td { position: relative; }

/* Запись прямо в клетке: поле без рамки, чтобы сетка оставалась спокойной.
   Рамка появляется, когда в поле пишут. Сделано формой, а не скриптом —
   работает всегда, даже если javascript не загрузился. */
.запись-в-клетке { margin: 0; height: 100%; }
/* Многострочное поле во всю клетку: длинная пометка переносится внутри, а не
   уезжает за край. Полосы прокрутки не показываем — текст короткий. */
.запись-в-клетке textarea {
  width: 100%;
  height: 100%;
  min-height: 40px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  line-height: 1.15;
  padding: 2px 3px;
  color: #3b3b48;
  /* Пометка стоит по центру клетки — и по ширине, и по высоте, как всё
     остальное в сетке. Выравнивание по высоте у многострочного поля делается
     не vertical-align, а полями сверху и снизу: они считаются от строки. */
  text-align: center;
  align-content: center;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
}
/* Запасной путь для браузеров, которые не понимают align-content у поля:
   пустое поле показывает текст по центру за счёт одинаковых полей. */
@supports not (align-content: center) {
  .запись-в-клетке textarea { padding-top: 6px; }
}
.запись-в-клетке textarea:hover { background: #fbf7f1; }
.запись-в-клетке textarea:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 0 0 2px #3b3b48;
  overflow: auto;
  position: relative;
  z-index: 4;
}
/* Клетка с записью — только чуть светлее фоном, без полоски слева:
   полоска резала строку и мешала читать сам текст. */
.календарь td.с-записью { background: #fbfaf8; }
.календарь td.с-записью .запись-в-клетке textarea { background: transparent; }

/* Строка упаковки под заказом (владелец, 07.10.2026): подпись тише и с
   отступом — видно, что строка принадлежит заказу над ней. Черта под ней
   темнее: пара «заказ + упаковка» читается одним блоком. */
.календарь .строка-упаковки .к-клиент { font-weight: 400; padding-left: 22px; }
.календарь .строка-упаковки .подпись-упаковки { display: block; color: #3b3b48; font-size: 13px; }
.календарь .строка-упаковки th,
.календарь .строка-упаковки td { border-bottom-color: #c9c5bd; }

/* Кнопки масштаба и «упаковка» — одной ширины (владелец, 07.10.2026).
   Рамка в 1 px у всех, у зелёной прозрачная: иначе белая «тихая» кнопка
   выходила на 2 px выше и шире выбранной. */
.ход-календаря .кнопка {
  width: 108px;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  border-width: 1px;
  border-style: solid;
}
.ход-календаря .кнопка:not(.тихая) { border-color: transparent; }
/* Упаковка скрыта кнопкой — прячем строку целиком (tr, не ячейки: ячейке
   display менять нельзя, см. выше про 18.08.2026) */
.календарь.без-упаковки .строка-упаковки,
.обёртка-календаря.без-упаковки .строка-упаковки { display: none; }

/* Лента недели и двух недель (владелец, 07.10.2026): 7 или 14 дней на экран, дальше квартал
   уходит вправо и прокручивается вбок. Ширину дня, ширину таблицы и отступы
   прилипших колонок выставляет скрипт в календарь.html — от реальных ширин,
   поэтому прилипание здесь не наезжает на сетку, как 18.08.2026. Числа ниже —
   запас на случай, если скрипт не загрузился. */
.календарь.лента-недели {
  width: calc(468px + 91 * var(--ширина-дня, 130px));
  min-width: 0;
}
.календарь.лента-недели col:not([class]) { width: var(--ширина-дня, 130px); }
.календарь.лента-недели .к-клиент,
.календарь.лента-недели .к-изделие,
.календарь.лента-недели .к-тираж,
.календарь.лента-недели .к-срок,
.календарь.лента-недели .строка-месяцев th:first-child,
.календарь.лента-недели .строка-месяцев th:last-child {
  position: sticky;
  z-index: 2;
}
.календарь.лента-недели .к-клиент,
.календарь.лента-недели .строка-месяцев th:first-child { left: var(--слева-1, 0px); }
.календарь.лента-недели .к-изделие { left: var(--слева-2, 218px); }
.календарь.лента-недели .к-тираж { left: var(--слева-3, 291px); }
.календарь.лента-недели .к-срок,
.календарь.лента-недели .строка-месяцев th:last-child { right: 0; }
/* Название месяца в ленте держится у левого края сетки: месяц длинный, и
   по центру его подпись уезжала под левые колонки — над днями было пусто. */
.календарь.лента-недели .месяц-шапка { text-align: left; }
.календарь.лента-недели .имя-месяца {
  position: sticky;
  left: calc(var(--ширина-левых, 364px) + 10px);
  padding: 0 10px;
}
/* В шапке — поверх и дней (они липнут сверху), и строк (они липнут слева) */
.календарь.лента-недели thead .к-клиент,
.календарь.лента-недели thead .к-изделие,
.календарь.лента-недели thead .к-тираж,
.календарь.лента-недели thead .к-срок,
.календарь.лента-недели .строка-месяцев th:first-child,
.календарь.лента-недели .строка-месяцев th:last-child { z-index: 4; }

/* Короткая вспышка после сохранения записи: видно, что не потерялось */
.календарь td.сохранено { box-shadow: inset 0 0 0 2px #b79b77; }

/* Направление сметы в списке: штамп или литьё */
.метка-направления {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: #edece9;
  color: #3b3b48;
}
.метка-направления.литьё { background: #3b3b48; color: #fff; }

/* Удаление сделки: тихая кнопка внизу карточки — действие необратимое,
   привлекать к нему внимание не нужно, но и прятать нельзя. */
.блок.опасное { background: transparent; box-shadow: none; padding: 8px 0 0; }
.блок.опасное form { display: flex; align-items: center; gap: 10px; }
.кнопка.опасная {
  background: #fff;
  border: 1px solid #c0392b;
  color: #c0392b;
}
.кнопка.опасная:hover { background: #c0392b; color: #fff; }

/* ── Полоса тестовой копии ─────────────────────────────────────────────
   Показывается только на тестовом контуре (ТЕСТОВЫЙ_КОНТУР=да в .env).
   Нарочно кричащая и не по бренду: полоса-предупреждение, а не украшение —
   боевая и тестовая вкладки должны различаться боковым зрением. */
.тест-полоса {
  background: repeating-linear-gradient(45deg, #f6c744, #f6c744 18px, #3b3b48 18px, #3b3b48 36px);
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 8px 12px;
  letter-spacing: .4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9);
  /* Лента прибита к НИЗУ окна (владелец, 03.09.2026): сверху она мешала
     видеть отступы шапки. Предупреждение при этом видно всегда. */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
}
/* Чтобы низ страницы не прятался под лентой — запас снизу на её высоту.
   :has() понимают все свежие браузеры; без ленты (боевой) запаса нет. */
body:has(.тест-полоса) { padding-bottom: 48px; }

/* Тумблер-ползунок «рассчитано» в блоке расчёта со сторонним отделом.
   Сам чекбокс спрятан (но живой — форма шлёт его как обычно), рисуется
   дорожка с кружком: выключен — серый, включён — зелёный, кружок справа. */
.тумблер { display: inline-flex; align-items: center; gap: 8px;
           cursor: pointer; user-select: none; }
.тумблер input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.тумблер .ползунок { width: 44px; height: 24px; border-radius: 12px;
                     background: #c9cdd8; position: relative;
                     flex: 0 0 auto; transition: background .15s; }
.тумблер .ползунок::after { content: ""; position: absolute; top: 3px; left: 3px;
                            width: 18px; height: 18px; border-radius: 50%;
                            background: #fff; transition: left .15s;
                            box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.тумблер input:checked + .ползунок { background: #2e7549; }
.тумблер input:checked + .ползунок::after { left: 23px; }
.тумблер input:focus-visible + .ползунок { outline: 2px solid #c9e4d5; }

/* ── Расчёт со сторонним отделом: выписка ─────────────────────────────
   Чек сверху (цифры к правому краю, правимые поля пунктиром — как вписанные
   от руки), внизу делёж двумя плитками: золотая Gem Tech и графитовая
   стороннего. Рамка блока золотая — это делёж денег, не работа по заказу. */
/* Как блок описания изделия: золотая черта слева и бежевый фон, без рамки
   (владелец, 28.08.2026). Кнопки и раскладка внутри — как были. */
.блок-стороннего { border: 0; }
.полотно-стороннего { margin-bottom: 0; }
.шапка-стороннего { display: flex; align-items: center;
                    justify-content: space-between; gap: 12px;
                    flex-wrap: wrap; margin-bottom: 10px; }
.шапка-стороннего h2 { margin: 0; }

.чек-эхм { max-width: 560px; }
.чек-строка { display: grid; grid-template-columns: 1fr auto;
              align-items: baseline; gap: 12px; padding: 3px 0; }
.чек-строка > span:first-child { white-space: nowrap; }
.чек-цифра { white-space: nowrap; font-variant-numeric: tabular-nums; }
.чек-цифра.тихая { color: #6c6c75; }
.чек-пометка { text-align: right; font-size: 13px; color: #8a6d3b;
               margin-top: -2px; }
.чек-пометка.плохо { color: #a33; }
.чек-итог { border-top: 1px solid #3b3b48; margin-top: 6px; padding-top: 6px;
            font-size: 18px; }
input.цифра-чека { width: 110px; flex: 0 0 auto; border: 0; background: none;
                   border-bottom: 1px dashed #b79b77; border-radius: 0;
                   text-align: right; font-size: 17px; padding: 1px 4px;
                   font-variant-numeric: tabular-nums; }
input.цифра-чека.процент { width: 44px; text-align: center; }
input.цифра-чека:focus { outline: none; border-bottom: 2px solid #5aa77f; }

.делёж-эхм { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
             max-width: 560px; margin-top: 14px; }
.плитка-делёж { border-radius: 8px; padding: 12px 14px; }
.плитка-делёж .кому { font-size: 13px; text-transform: uppercase;
                      letter-spacing: .6px; }
.плитка-делёж .сколько { font-size: 24px; font-weight: 700; margin: 2px 0;
                         font-variant-numeric: tabular-nums; }
.плитка-делёж .за-что { font-size: 13px; opacity: .75; }
.плитка-делёж.гт { background: #b79b77; color: #000; }
.плитка-делёж.сторона { background: #3b3b48; color: #fff; }
@media (max-width: 520px) { .делёж-эхм { grid-template-columns: 1fr; } }

.низ-стороннего { display: flex; align-items: center; gap: 10px;
                  flex-wrap: wrap; margin-top: 12px; max-width: 560px; }
input.примечание-расчёта { width: auto; flex: 1 1 220px; font-size: 15px;
                           padding: 5px 8px; }

/* Плюсик «добавить комментарий» под описанием заказа */
.добавить-комментарий { display: flex; align-items: center; gap: 8px;
                        flex-wrap: wrap; margin-top: 6px; }
.корректировки .добавить-комментарий { margin-bottom: 0; }
.плюсик, .правка > summary.карандашик {
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #b79b77;
  background: #fff; color: #3b3b48; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; box-sizing: border-box; }
.плюсик:hover, .правка > summary.карандашик:hover { background: #b79b77; color: #000; }
/* Карандашик у записи: тот же кружок, что плюс, но это summary свёртки —
   гасим треугольник-маркер и синий цвет ссылки, шрифт чуть мельче плюса */
.правка > summary.карандашик { font-size: 15px; list-style: none; text-decoration: none;
                               vertical-align: middle; }
.правка > summary.карандашик::-webkit-details-marker { display: none; }
.правка > summary.карандашик:hover { text-decoration: none; }
.подпись-плюсика { color: #6c6c75; font-size: 15px; cursor: pointer; }
.форма-комментария { flex: 1 1 100%; }
.форма-комментария textarea { min-height: 56px; }
.кнопки-комментария { display: flex; gap: 8px; margin-top: 6px; }

/* ── Касса производства: оформление по образцу владельца (31.08.2026) —
   мягкий зелёный фон на всю страницу, крупные белые карточки без рамок,
   большая цифра остатка, зелёные кнопки во всю ширину. ── */
/* Цвета — фирменные Gem Tech (владелец, 31.08.2026): бежевый с золотом,
   не сберовская зелень; зелёными остаются только кнопки — как во всей системе. */
.касса-страница { background: linear-gradient(165deg, #f7f5f1, #ece3d6);
                  border-radius: 18px; padding: 26px 30px 34px;
                  max-width: 1060px; }
.касса-заголовок { font-size: 32px; margin: 6px 0 20px; }
/* stretch: карточки траты и остатка одной высоты, низ вровень
   (владелец, 31.08.2026) */
.касса-сетка { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px;
               align-items: stretch; }
@media (max-width: 760px) { .касса-сетка { grid-template-columns: 1fr; } }
.касса-карта { background: #fff; border-radius: 22px; padding: 22px 24px;
               box-shadow: 0 6px 24px rgba(183, 155, 119, .16); }
.касса-карта h2 { margin: 0 0 14px; font-size: 20px; }
/* Левая карточка: содержимое распределяется по всей высоте — когда правая
   выше (у владельца там форма пополнения), форма траты не жмётся кверху,
   а кнопка не висит над пустотой (владелец, 31.08.2026) */
.касса-сетка > .касса-карта:first-child { display: flex; flex-direction: column; }
.касса-сетка > .касса-карта:first-child .форма-подотчёта {
  flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.касса-тетрадь { margin-top: 18px; }
input.касса-поле, select.касса-поле { border-radius: 12px; padding: 11px 14px;
                                      border: 1px solid #dfe6e1; font-size: 17px; }
.касса-кнопка { display: block; width: 100%; margin-top: 14px; padding: 13px 16px;
                background: #217346; color: #fff; border: 0; border-radius: 12px;
                font-size: 17px; font-weight: 600; cursor: pointer; }
.касса-кнопка:hover { background: #0f5132; }
.касса-остаток { text-align: center; display: flex; flex-direction: column;
                 justify-content: center; }
.касса-подпись { font-size: 15px; color: #6c6c75; margin-top: 4px; }
.касса-цифра { font-size: 44px; font-weight: 700; margin-top: 6px;
               font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.касса-цифра.плохо { color: #a32f2f; }
/* Пополнение — узким столбиком по центру, поля и текст отцентрованы
   (владелец, 31.08.2026) */
.касса-пополнение { margin-top: 18px; display: grid; gap: 10px;
                    border-top: 1px solid #eef1ef; padding-top: 16px;
                    max-width: 280px; width: 100%;
                    margin-left: auto; margin-right: auto; }
.касса-пополнение input.касса-поле { text-align: center; }
.касса-пополнение input.касса-поле::placeholder { text-align: center; }
.форма-подотчёта .пара { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* сумма уже, «на что» шире — суммы короткие, описания длинные.
   Селектор с «.форма-подотчёта» — иначе правило .пара выше перевешивает. */
.форма-подотчёта .пара.касса-сумма-что { grid-template-columns: 150px 1fr; }
/* Список заказов шире категории: «Общий расход — не к заказу» должен
   помещаться целиком (владелец, 31.08.2026) */
.форма-подотчёта .пара.касса-заказ-категория { grid-template-columns: 1.7fr 1fr; }
@media (max-width: 560px) { .форма-подотчёта .пара { grid-template-columns: 1fr; } }


/* Отказ сервера под кнопкой отгрузки/архива — на месте, без страницы-тупика */
.встроенная .отказ-кнопки { margin-top: 4px; max-width: 260px; }

/* Кнопки Штамп/Литьё в шапке — размером с кнопку календаря, активная золотая */
.пункт.направление { display: inline-flex; align-items: center; justify-content: center;
  width: 63px; min-width: 63px; max-width: 63px; height: 48px; flex: 0 0 63px;
  padding: 6px 4px; font-size: 14px; font-weight: 600; color: #3b3b48;
  border: 1px solid #d3d0ca; border-radius: 8px; }
.пункт.направление.выбрано { background: #b79b77; border-color: #3b3b48; color: #000; }
.пункт.направление:hover { border-color: #3b3b48; }

/* Черта-разделитель литья: чёрная линия (владелец, 03.09.2026), в строке
   повторены числа дней — как в шапке, но без строки месяцев */
.разделитель-литья th { border-top: 2px solid #3b3b48; }
.разделитель-литья th.к-клиент { font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; font-size: 13px; }

/* Плоская доска литья до утверждения этапов */
.сетка-литья { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; max-width: 1100px; }
.карточка-литья { background: #fff; }

/* Сжатая доска: короткие имена колонок вместо полных */
.доска-обёртка .имя-краткое { display: none; }
.доска-обёртка.мелко .имя-полное { display: none; }
.доска-обёртка.мелко .имя-краткое { display: inline; }

/* Флажок сдачи — углом поверх клетки, полю ввода не мешает */
td.сдача { position: relative; }
.флажок-сдачи { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; pointer-events: none; }
.флажок-сдачи svg { width: 16px; height: 16px; }

/* В сжатом виде номер уже в заголовке карточки — в нижней строке его прячем */
.доска-обёртка.мелко .строка-карточки span:first-child { display: none; }

/* В сжатом виде счётчик карточек в шапке колонки не показываем */
.доска-обёртка.мелко .счётчик { display: none; }

/* Поле пометки в клетке сдачи — прозрачное: золотая заливка клетки видна */
td.сдача .запись-в-клетке textarea { background: transparent; }

/* Просроченная сдача — красная рамка + заметная розовая заливка */
.календарь tbody td.сдача-просрочена { background: #f3cdc7; }

/* ── Левая панель будущих досок: узкий столбик квадратных кнопок под
   логотипом; основное содержимое сдвигается правее. На узких экранах
   панель убираем — телефону она пока не нужна. ── */
/* fixed: панель прибита к окну и не ездит при прокрутке (владелец,
   03.09.2026, вечер — отменяет утреннее «absolute»). top 127: низ подписи
   «МАРШРУТ» (~79px) + 24px зазора (как между лого и горизонтальным меню)
   + ещё полкнопки (24px) вниз — просьбы владельца, вечер 03.09.2026. */
/* top 136: вертикальное меню начинается по красной линии владельца —
   вровень с верхом колонок доски (124 отступа под шапку + 12 паддинга
   доски; скриншот 03.09.2026, вечер) */
/* left 18: кнопки панели (63px) отцентрованы под монетой-лого (центр 50px)
   — просьба владельца 03.09.2026 */
.панель-досок { position: fixed; left: 18px; top: 136px; width: 66px;
  display: flex; flex-direction: column; gap: 8px; z-index: 40; }
/* Кнопка панели наследует размер и стиль шапочного значка (.пункт.значок);
   тут только фон и подсветка активной */
.панель-досок .доска-кнопка { background: #fff; border: 1px solid #d3d0ca;
  border-radius: 8px;
  /* ровно тот же габарит, что у кнопок шапки, рамка внутрь размера */
  width: 63px; min-width: 63px; max-width: 63px; height: 48px;
  box-sizing: border-box; padding: 6px 10px;
  /* в вертикальной панели flex-basis шапочного значка стал бы высотой */
  flex: 0 0 48px; }
.панель-досок .доска-кнопка svg { width: auto; height: 100%; max-width: 100%; }
.панель-досок .доска-кнопка:hover { border-color: #3b3b48; }
.панель-досок .доска-кнопка.активна { background: #b79b77; border-color: #3b3b48; }
.панель-досок .доска-кнопка.активна svg { stroke: #000; }
main.страница { margin-left: 92px; }
/* Доска на 9px правее страниц: левый край колонок — по одной линии с левым
   краем кнопки «Штамп» (101 + 18 паддинга = 119; владелец, 03.09.2026) */
main.доска { margin-left: 101px; }
/* База знаний — плитки по линиям владельца (10.09.2026): левый край по
   левому краю кнопки «Штамп» (101 + 18 = 119px, как колонки доски), верх по
   верху левой панели (136px = 118px шапки + 18px, замерено headless-JS). */
main.страница.знания { margin-left: 101px; padding: 18px 18px 60px; }
/* Карточка расчёта — по тем же линиям (владелец, 10.09.2026): название
   сделки левым краем по кнопке «Штамп», верхом вровень с левыми иконками */
main.страница.карточка-расчёта { margin-left: 101px; padding: 14px 18px 60px; }
/* Прокрутка (владелец, 10.09.2026): содержимое обрезается не по нижнему краю
   шапки, а по линии левых иконок — полоса фона добирает эти 16px. Зазор
   один и тот же всегда: есть в карточке вопросы и переписка или нет.
   Только на карточке расчёта — другие страницы не трогаем. */
.карточка-расчёта::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: var(--высота-шапки, 124px);
  /* Не «16px», а ровно до линии левых иконок (они прибиты к 136px): высота
     шапки зависит от шрифта, и фиксированные 16px оставляли щель, в которой
     виднелся обрезанный текст (владелец, 10.09.2026) */
  height: calc(136px - var(--высота-шапки, 124px));
  background: #f4f5f9;
  z-index: 21;              /* выше содержимого (шапка — 20), ниже панели (40) */
  pointer-events: none;
}
/* Ниже линии — мягкое растворение (владелец, 10.09.2026): при листании
   строка резалась пополам о край шапки и оставляла обрывки букв. Полоса
   растворения включается ТОЛЬКО при прокрутке (класс ставит место.js),
   иначе она бледнила бы первую строку неподвижной страницы. */
.прокручено .карточка-расчёта::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 136px;
  height: 26px;
  background: linear-gradient(#f4f5f9 0%, rgba(244, 245, 249, 0.92) 45%,
                              rgba(244, 245, 249, 0) 100%);
  z-index: 21;
  pointer-events: none;
}
/* Прилипание заголовка убрано (владелец, 10.09.2026): с ним рез переезжал
   под название и обрывки оставались. Теперь всё уезжает под одну линию и
   растворяется на ней — см. «.прокручено .карточка-расчёта::after». */
.карточка-расчёта .шапка-заказа { margin-top: 0; }
.карточка-расчёта .заголовок-заказа h1 { margin-top: 0; }
/* Кнопка правки стоит рядом с названием, не растягиваясь на строку */
.карточка-расчёта .заголовок-заказа { flex-wrap: wrap; gap: 12px; }
.карточка-расчёта .заголовок-заказа .кнопка { flex: 0 0 auto; }
.знания .плитки-учебников { margin-top: 0; }
@media (max-width: 900px) {
  .панель-досок { display: none; }
  main.страница, main.доска, main.страница.знания { margin-left: 0; }
}

/* Подсказка у кнопок левой панели — левым краем по краю кнопки,
   а не по центру: центрированная упиралась в край окна */
.панель-досок .пункт[data-подпись]::after { left: 0; transform: none; }

/* Цветной значок (лампочка дизайна): картинкой, в размер кнопки */
.панель-досок img.цветной-значок { width: auto; height: 100%; max-width: 100%; }

/* ── Доска смет: заявки на ручной расчёт (03.09.2026) ── */

/* Широкая кнопка «+ Новый расчёт» под шапкой колонки — как «Добавить
   задачу» в Platrum: во всю ширину, скругление, полупрозрачная белая на
   золоте, темнеет при наведении. */
.добавить-расчёт {
  display: block;
  text-align: center;
  padding: 9px 10px;
  margin-bottom: 9px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 8px;
  background: rgba(255,255,255,.45);
  color: #000;
  font-weight: 600;
}
.добавить-расчёт:hover {
  background: rgba(255,255,255,.7);
  text-decoration: none;
}

/* Колонки доски смет НЕ тянутся друг за другом (владелец, 09.09.2026,
   отменяет «одной высоты» от 03.09): базовая высота у всех — шапка +
   кнопка «+ Новый расчёт», растёт только колонка, где много карточек. */
.сметы-обёртка { align-items: flex-start; }
.сметы-обёртка .колонка { min-height: 96px; }
/* Кнопка последняя в колонке (карточек нет) — свой отступ ей не нужен,
   его даёт нижний паддинг колонки, ровно как по бокам */
.добавить-расчёт:last-child { margin-bottom: 0; }

/* Вопрос считающего прямо на карточке доски — менеджер видит, чего ждут */
.вопрос-на-доске { background: #fff; border-radius: 6px; padding: 6px 8px;
  margin-top: 6px; font-size: 13px; color: #3b3b48; }

/* Форма заявки на расчёт — не во всю ширину экрана */
.заявка-расчёт { max-width: 640px; }

/* Дорожка этапов расчёта короткая — не растягиваем шаги на весь экран */
.дорожка-расчёта { max-width: 640px; }
.дорожка-расчёта .шаг { min-width: 120px; }

/* Поля таблицы строк расчёта — числа справа, как в таблицах этапов */
.строки-расчёта input[name="qty"],
.строки-расчёта input[name="price"] { text-align: right; }

/* Картинки заявки на расчёт: квадратные плитки, техкарта — лёжа как А4 */
.картинки-заявки { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.картинки-заявки img { width: 150px; height: 150px; object-fit: cover;
  border-radius: 8px; border: 1px solid #d8d3cb; display: block; background: #fff; }
.картинки-заявки img.техкарта-заявки { width: 212px; object-fit: contain; }

/* Разделы таблицы расчёта — как два блока в сметчике */
.раздел-расчёта td { background: #ede6dd; font-weight: 700; font-size: 14px;
  color: #3b3b48; padding: 6px 10px; }

/* Коэффициент и цена клиенту — рядом: цена = себестоимость × коэффициент */
.цена-с-коэффициентом { display: flex; gap: 16px; flex-wrap: wrap; }
.цена-с-коэффициентом .поле { max-width: 220px; }

/* Разовое на партию, поделённое на каждый тираж (владелец, 10.09.2026):
   переменная часть себестоимости — своя у каждого тиража */
.строка-деления td { background: #f6f2ec; color: #6c6c75; font-size: 14px;
  padding: 4px 10px; }
.строка-деления td:first-child { padding-left: 22px; }

/* Итог по тиражам: партия ÷ тираж + за штуку, и цена клиенту у каждого.
   Шрифт — как у описания изделия слева (владелец, 22.09.2026): наследуемый
   размер body, межстрочный 1.5, без мелкого «технического» кегля */
.итоги-тиражей { margin-top: 12px; }
.итоги-тиражей th { font-size: 13px; line-height: 1.5; }
.итоги-тиражей input.поле-цены-шт,
.итоги-тиражей input.поле-цены { width: 110px; text-align: right;
  font-size: inherit; }
.строка-тиража td { font-size: inherit; line-height: 1.5; }

/* Выбор варианта при заведении заказа: тиражи — альтернативы */
.выбор-тиражей { margin-bottom: 14px; }
.выбор-тиражей th:first-child { width: 34%; }
.клетка-выбора { width: 110px; }
.выбор-тиража { display: flex; align-items: center; gap: 6px;
  font-size: 14px; cursor: pointer; }
/* Отметка — фирменным зелёным, как всё выбранное в системе */
.выбор-тиража input { width: auto; margin: 0; accent-color: #217346; }
.итог-выбора { font-size: 16px; margin: 4px 0 0; }
.итог-выбора .мелко { margin-left: 10px; }

/* Цены вариантов в карточке расчёта — таблицей, без общего итога */
.цены-вариантов { margin-bottom: 6px; }

/* Блок себестоимости вдвое уже (владелец, 10.09.2026): строки короткие,
   на всю ширину экрана таблица разъезжалась пустотой */
/* Позиция и её себестоимость — рядом (владелец, 11.09.2026): слева ТЗ из
   заявки, справа расчёт этой же позиции; следующая позиция строкой ниже.
   Так видно, что считаешь, не листая страницу вверх-вниз. */
.пара-позиции {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 28px;
  align-items: start;
  padding-bottom: 18px;
  margin-bottom: 18px;
  /* Черта между позициями заметная (владелец, 22.09.2026): тонкая линия
     терялась, и было непонятно, где кончается одна позиция */
  border-bottom: 3px solid #d8d3cb;
}
.пара-позиции:last-of-type { border-bottom: 0; margin-bottom: 0; }
.колонка-заявки, .колонка-себеса { min-width: 0; }
/* Заголовок позиции у расчёта не нужен — он уже стоит над её заявкой */
.колонка-себеса .заголовок-позиции:first-child { margin-top: 0; }
@media (max-width: 1200px) {
  .пара-позиции { grid-template-columns: minmax(0, 1fr); }
}
/* В узком блоке подписи строк не должны рваться на три строки */
.блок-себестоимости .итог-этапа td:first-child,
.блок-себестоимости .строка-деления td:first-child { white-space: nowrap; }
.блок-себестоимости .итоги-тиражей th { white-space: nowrap; }
.блок-себестоимости .итоги-тиражей input.поле-цены-шт,
.блок-себестоимости .итоги-тиражей input.поле-цены { width: 96px; }
/* «₽/ед» — приписка вне числового столбика: рубли стоят ровно под рублями
   строки «Итого на партию» (владелец, 10.09.2026) */
.с-единицей { position: relative; white-space: nowrap; }
.с-единицей i { position: absolute; left: 100%; top: 3px;
  font-style: normal; font-size: 12px; color: #6c6c75; padding-left: 2px; }
/* Метод изготовления — под заголовком своей позиции */
/* Метод и доска — одной строкой: подпись, следом список (11.09.2026) */
.метод-позиции { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px; }
.метод-позиции label { margin: 0; white-space: nowrap; }
.метод-позиции select { max-width: 200px; }
.метод-позиции input.метод-своё { max-width: 200px; }

/* Доска — правее коэффициента (владелец, 22.09.2026): узкий столбик,
   чтобы пара «коэффициент · на доску» стояла одной строкой */
.цена-с-коэффициентом .поле-доски { flex: 0 1 200px; max-width: 220px; }
.цена-с-коэффициентом .поле-доски select,
.цена-с-коэффициентом .поле-доски .свой-список,
.цена-с-коэффициентом .поле-доски .поле-списка { width: 100%; }

/* Вопросы по заявке — на фоне (владелец, 10.09.2026): переписка отделена
   от заявки и расчёта. Под кнопкой «Отправить» — пропуск строки. */
/* Оформление — как у блока с описанием заказа (владелец, 10.09.2026):
   бежевая заливка и золотая вертикаль слева */
.блок-вопросов {
  background: #f7f5f1;
  border: 0;
  border-left: 3px solid #b79b77;   /* GT Gold, как у описания заказа */
  border-radius: 4px;
}
.блок-вопросов textarea { background: #fff; }
/* Кнопка «Отправить» стоит вплотную к полю вопроса, а фон блока кончается
   сразу под ней (владелец, 10.09.2026): пропуск строки — уже снаружи */
.форма-вопроса .поле { margin-bottom: 6px; }
/* Отправка сообщения — стрелкой (владелец, 22.09.2026): кнопка узкая,
   у правого края поля, как в переписке */
.форма-вопроса { margin-bottom: 0; }
/* Кнопка сидит в самом поле, правым нижним углом (владелец, 22.09.2026) */
.поле-сообщения { position: relative; margin-bottom: 0; }
.поле-сообщения textarea { padding-right: 52px; }
/* Квадрат со скруглёнными углами, не кружок (владелец, 22.09.2026) */
.кнопка-отправки { position: absolute; right: 8px; bottom: 10px;
  width: 34px; height: 34px; padding: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; }
/* Треугольник рамками: знак шрифта в Safari превращается в эмодзи */
.кнопка-отправки i { display: block; width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

/* Журнал изменений — на строку ниже блока над ним (владелец, 22.09.2026) */
.блок-журнала { margin-top: 26px; }
.блок-вопросов { padding-bottom: 10px; margin-bottom: 20px; }
.блок-вопросов .форма-вопроса { margin-bottom: 0; }

/* Выпадающий список «+ добавить статью…» и калькулятор материала */
.добавить-статью { max-width: 260px; font-size: 14px; padding: 6px 8px; }
.калькулятор-материала td { background: #f6f2ec; }
.поля-калькулятора { display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; padding: 4px 2px; }
.поля-калькулятора input, .поля-калькулятора select {
  width: 110px; font-size: 14px; padding: 6px 8px; }

/* Корзина у добавленных строк расчёта — справа в конце строки */
.колонка-корзины { width: 36px; text-align: center; }
.удалить-строку { background: none; border: none; cursor: pointer;
  font-size: 15px; opacity: .45; padding: 4px; line-height: 1; }
.удалить-строку:hover { opacity: 1; }

/* Подсказка коэффициентов — для памяти, сама ничего не подставляет */
.подсказка-коэффициента { margin-top: 2px; }

/* Заявка менеджера в карточке расчёта — таблицей, как блок расчёта */
.поле-заявки { width: 280px; color: #6c6c75; }

/* Атрибут hidden сильнее любых display у классов: .тз-значение задавал
   display:block и «спрятанное» поле торчало (наступили 09.09.2026 на поле
   «какое направление») */
[hidden] { display: none !important; }

/* Значения заявки — белыми боксами, как поля таблицы расчёта */
.значение-заявки { background: #fff; border: 1px solid #d8d3cb;
  border-radius: 8px; padding: 8px 10px; min-height: 20px; }

/* Подписи заявки в карточке расчёта — персиковые, как заголовки разделов
   в блоке себестоимости (владелец, 09.09.2026); серый остаётся в карточке
   заказа, тут перекрываем локально */
.заявка-сетка .тз-подпись,
.строка-тиража-формы .тз-подпись { background: #ede6dd; color: #3b3b48; }   /* + доп. тираж, 06.10.2026 */

/* Поля заявки-ввода: как белые боксы просмотра, зелёная вспышка при
   сохранении; журнал заявки — мелкой таблицей */
input.значение-заявки, textarea.значение-заявки {
  display: block; width: 100%; font: inherit; color: #000;
  resize: none; overflow: hidden; }
.поле-сохранено { border-color: #5aa77f !important; background: #eef7f1 !important; }
/* Таблица не шире блока: длинный текст правки (примечание целиком)
   переносится на следующие строки, а не растягивает журнал вправо */
.журнал-заявки { width: 100%; table-layout: fixed; }
.журнал-заявки td { padding: 4px 14px 4px 0; vertical-align: top; }
.журнал-заявки td:first-child { white-space: nowrap; color: #6c6c75; width: 130px; }
.журнал-заявки td:nth-child(2) { width: 150px; }
.журнал-заявки td:last-child { overflow-wrap: break-word; }

/* В карточке расчёта таблица — не «план против факта»: вертикальная черта
   и фон правой стороны не нужны (владелец, 09.09.2026) */
.таблица-операций.без-план-факт td:nth-child(n+3) { background: transparent; }
.таблица-операций.без-план-факт td:nth-child(3),
.таблица-операций.без-план-факт th:nth-child(3) { border-left: 0; }

/* Поля-боксы в формах заявки: зелёный фокус, как у остальных полей */
input.значение-заявки:focus, textarea.значение-заявки:focus,
select.значение-заявки:focus {
  border-color: #5aa77f; outline: 2px solid #c9e4d5; }
select.значение-заявки { appearance: auto; min-height: 38px; }
#направление-своё { margin-top: 4px; }

/* Позиции заявки и диалог по заявке (09.09.2026) */
.шапка-позиции { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.шапка-позиции h3 { margin: 0; font-size: 16px; }
.заголовок-позиции { margin: 22px 0 8px; font-size: 16px; }
.диалог-заявки { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.сообщение-заявки { background: #fff; border: 1px solid #d8d3cb;
  border-radius: 10px; padding: 8px 12px; max-width: 640px; }
/* Сообщения производства — на персиковом, менеджера — на белом */
.сообщение-заявки.от-производства { background: #f7f5f1; }
.копия-расчёта { display: flex; gap: 8px; align-items: center; }

/* Кнопка «+ фото» в картинках заявки — квадратик в ряд с картинками */
.добавить-фото-заявки label { display: flex; align-items: center;
  justify-content: center; width: 150px; height: 150px; cursor: pointer; }

/* Позиции заявки — по две в строке: главная слева, вторая справа,
   следующие ниже парами; фото каждой — под её табличкой */
.сетка-позиций { display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 14px; align-items: start; }
.сетка-позиций .описание-заказа { margin-bottom: 8px; }
@media (max-width: 900px) { .сетка-позиций { grid-template-columns: 1fr; } }

/* Блок позиции в форме заведения — отделён чертой сверху */
.позиция-формы { border-top: 1px solid #e6e2da; padding-top: 10px; margin-top: 14px; }

/* Длинное слово в примечании не должно раздвигать колонку позиции:
   ячейки грида ужимаются, слова переносятся (09.09.2026) */
/* Ровно три блока в ряд, не больше (владелец, 09.09.2026): позиция и её
   тиражи читаются рядом, дальше переносятся на следующую строку */
.сетка-позиций { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .сетка-позиций { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ячейка-позиции { min-width: 0; }
.ячейка-позиции .строка-описания { overflow-wrap: anywhere; }

/* Кнопки «+ тираж / + позиция / + нестандарт упаковка» — одной ширины,
   по самой длинной надписи (владелец, 09.09.2026) */
.кнопки-позиций .кнопка { min-width: 220px; text-align: center; }

/* Плюс в шапке колонки доски смет — на месте бывшего счётчика */
.доска-смет-плюс { margin-left: auto; }
.плюс-колонки { color: #000; font-size: 22px; font-weight: 600; line-height: 1;
  padding: 0 4px; border-radius: 6px; margin-left: auto; }
.плюс-колонки:hover { background: rgba(255,255,255,.55); text-decoration: none; }

/* Карточки доски смет — все одной высоты: каждая строка ровно одна,
   длинное обрезается многоточием (владелец, 09.09.2026) */
.карточка-сметы .строка-одна { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.карточка-сметы .вопрос-строкой { min-height: 18px; color: #6c6c75; }

/* Мелкая кнопка «+ тираж» в шапке позиции */
.мелкая-кнопка { padding: 4px 10px; font-size: 13px; }
.шапка-позиции form { display: inline; }

/* Группа: позиция и её тиражи, под ними фото и кнопка «+ тираж» */
.группа-позиции { margin-bottom: 18px; }
.кнопка-тиража { margin-top: 6px; }

/* Выбранный пункт в выпадающих списках — фирменным зелёным, а не синим
   системным (владелец, 09.09.2026) */
select option:checked, select option:hover {
  box-shadow: 0 0 10px 100px #217346 inset;
  color: #fff;
}
select:focus { accent-color: #217346; }

/* Свой выпадающий список: выбранное — фирменным зелёным, а не системным
   синим (владелец, 09.09.2026; в Safari системный popup не стилизуется) */
.свой-список { position: relative; }
.спрятанный-выбор { position: absolute; opacity: 0; pointer-events: none;
  width: 100%; height: 100%; }
/* Стрелка справа — как у обычного списка: рисуем сами, поле-то своё */
.поле-списка { text-align: left; cursor: pointer; background: #fff;
  border: 1px solid #d8d3cb; border-radius: 8px; padding: 8px 28px 8px 10px;
  width: 100%; font: inherit; color: #000; position: relative; }
.поле-списка::after {
  content: "";
  position: absolute; right: 10px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid #6c6c75;
  border-bottom: 2px solid #6c6c75;
  transform: rotate(45deg);
}
.поле-списка:hover { border-color: #5aa77f; }
.варианты-списка { position: absolute; left: 0; right: 0; top: 100%;
  z-index: 60; background: #fff; border: 1px solid #d8d3cb;
  border-radius: 8px; box-shadow: 0 6px 18px rgba(20,25,50,.18);
  overflow: hidden; margin-top: 2px; }
.вариант-списка { padding: 8px 10px; cursor: pointer; }
.вариант-списка:hover { background: #eef7f1; }
.вариант-списка.выбран { background: #217346; color: #fff; }

/* Блок картинок позиции в форме заведения */
.картинки-позиции-формы { margin: 10px 0 4px; }
.картинки-позиции-формы h2 { margin: 0 0 8px; }

/* Дополнительные тиражи — строками внутри таблички позиции: параметры у
   них те же, отличаются только количество и срок (владелец, 09.09.2026) */
.доп-тиражи { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #d8d3cb; }
.подпись-тиражей { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #6c6c75; margin-bottom: 4px; }
/* Шрифт и межстрочный — как у строк ТЗ выше (владелец, 11.09.2026) */
.доп-тиражи .строка-тиража { font-size: inherit; line-height: 1.5; }

/* Строка доп. тиража — теми же колонками, что вся форма: количество в
   первой, кнопка «+ примечание» / само примечание во второй-третьей
   (владелец, 09.09.2026) */
.строка-тиража-формы { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px 14px; align-items: end; }
.строка-тиража-формы .поле-примечания { grid-column: 2 / -1; }
/* Кнопка короткая — не на всю колонку (владелец, 09.09.2026) */
.плюс-примечания { width: auto; justify-self: start; padding: 8px 14px; }

/* Заголовок «Новый расчёт» с карандашом: по нему вписывают название
   сделки (владелец, 09.09.2026) */
.заголовок-названия { display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; min-height: 44px; }
.заголовок-названия h1 { margin: 0; cursor: text; }
.карандаш-названия { background: none; border: none; cursor: pointer;
  color: #6c6c75; font-size: 18px; padding: 4px; line-height: 1; }
.карандаш-названия:hover { color: #217346; }
.поле-названия {
  flex: 1 1 auto; max-width: 640px;
  font-size: 26px; font-weight: 700; color: #3b3b48;
  background: #fff; border: 1px solid #d8d3cb; border-radius: 8px;
  padding: 4px 10px; font-family: inherit;
}
.поле-названия::placeholder { color: #b3b0aa; font-weight: 400; font-size: 18px; }
.поле-названия:focus { outline: 2px solid #c9e4d5; border-color: #5aa77f; }

/* Заголовок «Новый расчёт» стоит вровень с иконкой доски смет в левой
   панели: она на 136px, контент без отступа начинался на 124px, поэтому
   ровно 12px сверху (замерено 09.09.2026) */
.без-верхнего-отступа { padding-top: 12px; }

/* Звёздочка у названия сделки: горит, пока название не вписано */
.звёздочка-названия { font-size: 22px; line-height: 1; }

/* Новый блок на секунду подсвечивается — видно, что он появился */
.блок-появился { animation: вспышка-блока 1.2s ease-out; }
@keyframes вспышка-блока {
  from { background: #eef7f1; box-shadow: 0 0 0 3px #c9e4d5; }
  to { background: transparent; box-shadow: none; }
}

/* Расчёт — в один столбец, как было: таблицы широкие (владелец,
   10.09.2026, отменяет двухколоночный расчёт) */
.сетка-расчётов { display: block; }
.расчёт-позиции { min-width: 0; }

/* А вот позиции ЗАЯВКИ стоят рядом: вторая справа от первой, третья
   переносится ниже (владелец, 10.09.2026) */
.сетка-групп { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px; align-items: start; }
.сетка-групп .группа-позиции { min-width: 0; }
@media (max-width: 1100px) { .сетка-групп { grid-template-columns: 1fr; } }

/* Внутри группы табличка занимает всю ширину своей половины: сами группы
   уже стоят по две в ряд (владелец, 10.09.2026) */
.сетка-групп .сетка-позиций { grid-template-columns: 1fr; }

/* Таблицы этапов у роли без права правки (менеджер с себестоимостью, 16.09.2026):
   цифры те же, что у производства, но серым и без полей ввода. Внесённый факт —
   прямой, подсказка «по смете» — курсивом, как placeholder в поле. Серый #6c6c75:
   4.5:1 на белом, читается у станка. */
.цифра-чтения { color: #6c6c75; }
.цифра-по-смете { color: #6c6c75; font-style: italic; }

/* ── Контакты подрядчиков (владелец, 22.09.2026) ───────────────────────
   Список общий, раскладывается метками. Строка кликабельна — открывает
   окно правки; заводят там же. Ширины: имя и метки, связь, прочее. */
/* Сортировка спрятана под кнопку: список по умолчанию показывает всё */
.строка-сортировки {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.сортировка { position: relative; }
.сортировка summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}
.сортировка summary::-webkit-details-marker { display: none; }
.список-сортировки {
  position: absolute;
  z-index: 30;
  margin-top: 4px;
  min-width: 230px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #ded8cf;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(59, 59, 72, .14);
}
.пункт-сортировки {
  display: block;
  padding: 6px 10px;
  font-size: 15px;
  color: #3b3b48;
  text-decoration: none;
  border-radius: 6px;
}
.пункт-сортировки:hover { background: #f7f5f1; }
.пункт-сортировки.выбран {
  background: #217346;            /* фирменный зелёный, как выбранное в списках */
  color: #fff;
}

/* Список — по строке на контакт: номер, название, имя, телефон, компания
   (владелец, 22.09.2026). Остальное открывается карточкой по щелчку. */
.список-контактов td { cursor: pointer; }
.строка-контакта-список:hover td { background: #f7f5f1; }
.строка-контакта-список.убранный td { opacity: .5; }
.номер-контакта { width: 46px; text-align: right; color: #6c6c75; }
/* Строка одноцветная: название не выделяем (владелец, 22.09.2026) */
.имя-контакта { font-weight: 400; }

/* Карточка: сначала информация, правка — по карандашу */
.шапка-карточки { display: flex; align-items: center; gap: 12px; }
.шапка-карточки h2 { margin: 0 0 14px; }
.карандаш-контакта {
  margin-bottom: 14px;
  padding: 2px 10px;
  font-size: 17px;
  line-height: 1.4;
  color: #3b3b48;
  background: #fff;
  border: 1px solid #ded8cf;
  border-radius: 6px;
  cursor: pointer;
}
.карандаш-контакта:hover { border-color: #b79b77; }
.строка-чтения { display: flex; gap: 12px; padding: 3px 0; }
.подпись-чтения { flex: 0 0 150px; font-size: 14px; color: #6c6c75; }
.значение-чтения { flex: 1 1 auto; min-width: 0; }
.метки-чтения { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.метка {
  padding: 2px 8px;
  font-size: 12px;
  color: #6c6c75;
  background: #f7f5f1;
  border-radius: 10px;
}

/* Окно заведения и правки */
.окно-контакта {
  width: min(760px, 92vw);
  padding: 20px 22px;
  border: 0;
  border-radius: 10px;
  color: #3b3b48;
}
.окно-контакта::backdrop { background: rgba(59, 59, 72, .45); }
.окно-контакта h2 { margin: 0 0 14px; }
.категории-окна { margin-top: 14px; }
.метки-выбор { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.метка-галочка {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 14px;
  background: #f7f5f1;
  border: 1px solid #ded8cf;
  border-radius: 12px;
  cursor: pointer;
}
.метка-галочка.направление { font-weight: 700; }
.метка-галочка input { width: auto; margin: 0; accent-color: #217346; }
.разделитель-меток {
  width: 100%;
  height: 0;
  border-top: 1px dashed #ded8cf;
  margin: 4px 0;
}
.низ-окна { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.убрать-в-окне { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ded8cf; }
.убрать-в-окне .кнопка { font-size: 13px; }

/* Незаполненное обязательное поле — красной рамкой (владелец, 22.09.2026):
   строки сверху мало, на длинной форме глазами не найти. Снимается, как
   только человек начал вписывать. */
.поле-не-заполнено,
input.поле-не-заполнено,
textarea.поле-не-заполнено,
select.поле-не-заполнено {
  border-color: #c0392b !important;
  background: #fdf3f2;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, .14);
}

/* Наименование статьи в себестоимости — во всю оставшуюся ширину
   (владелец, 22.09.2026): при половинной колонке «Изготовление матриц»
   обрезалось до «Изготовлени». Числовые колонки узкие и фиксированные,
   первая забирает остаток — таблица с table-layout: fixed так и делает. */
/* Кол-во и цена одной ширины, на 15% шире прежней цены — числа с
   разрядами должны помещаться целиком (владелец, 22.09.2026) */
.блок-себестоимости .строки-расчёта th:nth-child(2),
.блок-себестоимости .строки-расчёта td:nth-child(2),
.блок-себестоимости .строки-расчёта th:nth-child(3),
.блок-себестоимости .строки-расчёта td:nth-child(3) { width: 110px; }
.блок-себестоимости .строки-расчёта th:nth-child(4),
.блок-себестоимости .строки-расчёта td:nth-child(4) { width: 104px; }
.блок-себестоимости .строки-расчёта th.колонка-корзины,
.блок-себестоимости .строки-расчёта td.колонка-корзины { width: 32px; }
.блок-себестоимости .строки-расчёта input[name="name"] { width: 100%; }
/* То же в режиме чтения — там четыре колонки, без корзины */
.блок-себестоимости .таблица-операций:not(.строки-расчёта):not(.итоги-тиражей) th:nth-child(2),
.блок-себестоимости .таблица-операций:not(.строки-расчёта):not(.итоги-тиражей) td:nth-child(2),
.блок-себестоимости .таблица-операций:not(.строки-расчёта):not(.итоги-тиражей) th:nth-child(3),
.блок-себестоимости .таблица-операций:not(.строки-расчёта):not(.итоги-тиражей) td:nth-child(3) { width: 110px; }
.блок-себестоимости .таблица-операций:not(.строки-расчёта):not(.итоги-тиражей) th:nth-child(4),
.блок-себестоимости .таблица-операций:not(.строки-расчёта):not(.итоги-тиражей) td:nth-child(4) { width: 104px; }
/* Длинную статью не режем многоточием — переносим на вторую строку */
.блок-себестоимости .строки-расчёта td:first-child,
.блок-себестоимости .итог-этапа td:first-child { white-space: normal; }

/* Коэффициент: список наших наценок и поле для своего значения рядом
   (владелец, 22.09.2026) */
/* Поле коэффициента шире прочих: в списке длинные подписи наценок */
.цена-с-коэффициентом .поле-коэффициента { max-width: none; flex: 1 1 360px; }
.выбор-коэффициента { display: flex; gap: 8px; align-items: center; }
.выбор-коэффициента .свой-список { flex: 1 1 auto; min-width: 250px; }
.выбор-коэффициента select { min-width: 250px; }
.выбор-коэффициента select { flex: 1 1 auto; min-width: 0; }
/* Поля с числом рядом больше нет — коэффициент задаёт сам список */

/* «Смета готова» — конец работы считающего (владелец, 22.09.2026):
   кнопка внизу расчёта, рядом подпись, что будет дальше */
.строка-готовности { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 10px; }

/* Цена упаковки — готовой цифрой, а не полем ввода (владелец, 22.09.2026) */
.цена-упаковки { padding: 7px 0; font-size: 17px; font-weight: 700; }
/* Пустая строка расчёта: корзины нет, список статей во всю ячейку */
.пустая-строка .колонка-корзины { padding: 0; }
.пустая-строка select.добавить-статью { width: 100%; max-width: none; }

/* Правка заявки на месте (владелец, 22.09.2026): строка сменяется полем
   внутри той же таблички — как при заведении сметы */
.строка-правки-заявки { display: flex; align-items: center; gap: 8px;
  padding: 2px 0; }
.подпись-правки { flex: 0 0 168px; font-size: 13px; color: #6c6c75; }
.строка-правки-заявки .значение-заявки { flex: 1 1 auto; min-width: 0;
  padding: 4px 8px; font-size: 15px; }

/* Отметка автосохранения расчёта (владелец, 22.09.2026) */
.метка-сохранения { min-height: 18px; margin: 4px 0 0; color: #6c6c75; }

/* ─── Архив смет с корзиной (владелец, 23.09.2026) ──────────────────── */
/* Варианты под сметой — строки тише основной, отступом слева */
.таблица-архива-смет .строка-варианта td { padding-top: 4px; padding-bottom: 4px;
  border-bottom: 1px dashed #e2e0dc; background: #f5f2ec; }   /* доп. тираж — тоном */
.таблица-архива-смет .строка-варианта td:first-child { border-left: 3px solid #b79b77; }
/* Плюс «в заказ»: круглая кнопка, взятое — зелёная галочка */
.плюс-в-заказ { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #3b3b48;
  background: #fff; color: #3b3b48; font-size: 20px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.плюс-в-заказ:hover { background: #b79b77; color: #000; }
.плюс-в-заказ.в-корзине { background: #217346; border-color: #217346; color: #fff; }
.в-заказе-метка { color: #217346; font-weight: 600; white-space: nowrap; }
/* Полоса корзины — прилипает к низу окна, пока не пуста */
.полоса-корзины { position: sticky; bottom: 0; z-index: 30; padding-top: 10px; }
/* На тесте внизу лента «тестовая копия» (48px) — корзина встаёт над ней */
body:has(.тест-полоса) .полоса-корзины { bottom: 48px; }
.корзина-смет { background: #fff; border: 1px solid #3b3b48; border-radius: 10px;
  padding: 12px 16px; box-shadow: 0 -4px 18px rgba(59, 59, 72, .12); }
.шапка-корзины { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.таблица-корзины { width: 100%; margin: 8px 0; }
.таблица-корзины td { padding: 4px 6px; border-bottom: 1px solid #eee; }
.низ-корзины { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.итог-корзины { font-size: 16px; }
.состав-корзины td, .состав-корзины th { padding: 6px 8px; }

/* Заказ вручную: переключатель «Штамповка | Литьё» вверху формы
   (владелец, 28.09.2026). Выбранное — золотом, как кнопки направления в шапке. */
.выбор-вида-заказа { display: inline-flex; margin: 4px 0 14px; border: 1px solid #3b3b48;
  border-radius: 8px; overflow: hidden; }
.выбор-вида-заказа a { padding: 8px 18px; color: #3b3b48; text-decoration: none;
  background: #fff; font-weight: 600; }
.выбор-вида-заказа a + a { border-left: 1px solid #3b3b48; }
.выбор-вида-заказа a:hover { background: #ede6dd; }
.выбор-вида-заказа a.выбран { background: #b79b77; color: #000; }

/* Сжатая доска литья (владелец, 28.09.2026): пустые колонки обрезаны вдвое —
   шапка и небольшой запас под перетаскивание, дальше пустого золота нет. */
.доска-обёртка.мелко .колонка { min-height: 44px; }
/* На карточке сжатой доски литья — только изделие, материал и тираж
   (владелец, 28.09.2026): номер и менеджер убраны. Обложка остаётся. */
.доска-обёртка.мелко .карточка .клиент,
.доска-обёртка.мелко .карточка .строка-карточки { display: none; }

/* Правка параметров заказа карандашом (28.09.2026): форма раскрывается под
   заголовком «что заказано» во всю ширину блока, а не рядом с кружком. */
.правка-параметров { display: inline; margin-left: 8px; font-size: 16px;
                     font-weight: 400; text-transform: none; letter-spacing: 0; }
.правка-параметров[open] { display: block; margin: 10px 0 0; }
.форма-параметров { margin-top: 10px; }
/* Правка параметров пишет по графе на строку — переносы показываем */
.корректировка { white-space: pre-line; }
/* Металл на карточке: в сжатом виде доски литья — без пробы и веса */
.доска-обёртка .металл-кратко { display: none; }
.доска-обёртка.мелко .металл-полный { display: none; }
.доска-обёртка.мелко .металл-кратко { display: inline; }

/* Итог перенесённого заказа (28.09.2026): вместо таблиц — одна крупная надпись */
.блок-переноса { margin: 32px 0; }
.итог-переноса { font-size: 24px; font-weight: 700; color: #3b3b48; margin: 4px 0 0; }

/* Ползунок «операции не было» в поле этапа (28.09.2026): общий стиль делает
   метки полей этапа блоком — у тумблера возвращаем inline-flex, иначе рисунок
   ползунка сплющивается в ноль и щёлкнуть не по чему. */
.поле-этапа label.тумблер { display: inline-flex; margin: 0; font-weight: 400; }
.тумблер .ползунок { display: inline-block; }

/* Этап литья с ползунком «операции не было» — свёрнут до названия
   (владелец, 28.09.2026); щелчок по названию разворачивает */
.этап-строка.свёрнут > :not(.этап-имя) { display: none; }
.бирка-нет-операции { display: none; }
.этап-строка.свёрнут .бирка-нет-операции { display: inline-block; }
.этап-строка.свёрнут .этап-имя.раскрываемое { cursor: pointer; }

/* Сжатая доска литья (владелец, 28.09.2026): колонки не уже, чем на полном
   экране (80px — замерено при окне 1677px). Окно уже — шапки остаются как
   есть, часть колонок уходит вправо под прокрутку; шире — растягиваются. */
.доска-обёртка.мелко .колонка { flex: 1 0 80px; min-width: 80px; }

/* Горизонтальное меню шапки (владелец, 28.09.2026): как сжатая доска —
   кнопки не переносятся на вторую строку и не сжимаются; окно уже —
   часть кнопок уходит вправо, меню прокручивается вбок. Подсказки кнопок
   меню рисует место.js поверх страницы: прокрутка обрезала бы их. */
.шапка .меню { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
               min-width: 0; flex: 0 1 auto; scrollbar-width: thin; }
.шапка .меню > * { flex-shrink: 0; }
.шапка .кто { flex-shrink: 0; }
.шапка .меню .пункт.значок::after { display: none; }
.подсказка-меню { position: fixed; z-index: 40; padding: 4px 9px; border-radius: 6px;
  background: #3b3b48; color: #fff; font-size: 13px; font-weight: 600;
  white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
@media (max-width: 900px) {
  /* И на узком экране шапка одной строкой, закреплённая сверху */
  .шапка { flex-wrap: nowrap; position: fixed; }
  body { padding-top: var(--высота-шапки, 124px); }
  .кто { margin-left: auto; width: auto; }
}

/* Сжатый вид штамповки — как у литья (владелец, 28.09.2026): правила выше
   теперь для обеих досок; надпись «пусто» в сжатом виде не показываем */
.доска-обёртка.мелко .пусто { display: none; }

/* Цена по ТЗ у перенесённого заказа — только тем, кому видна продажа */
.цена-по-тз { white-space: pre-line; margin: 6px 0 10px; line-height: 1.45; }

/* Тиражи сметы бота (/estimate/…): колонки вплотную под описанием,
   не на всю ширину страницы (владелец, 06.10.2026) */
.тиражи-сметы-бота { width: auto; border-collapse: collapse; margin-top: 4px; }
.тиражи-сметы-бота th {
  font-size: 13px; font-weight: 700; color: #6c6c75;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid #d8d3cb; white-space: nowrap;
}
.тиражи-сметы-бота th, .тиражи-сметы-бота td { padding: 8px 14px; text-align: left; }
.тиражи-сметы-бота th:first-child, .тиражи-сметы-бота td:first-child { padding-left: 0; }
.тиражи-сметы-бота td { border-bottom: 1px solid #ece8e1; white-space: nowrap;
                        font-variant-numeric: tabular-nums; }
.тиражи-сметы-бота .число { text-align: right; }

/* Архив смет: цифры не переносятся, «₽» не отрывается от суммы (06.10.2026) */
.таблица-архива-смет .число { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Архив смет — каждая ячейка в одну строку (владелец, 06.10.2026). Клиент
   обычным размером, жирным; длинный — троеточием, полное — в карточке
   сметы и всплывашкой. max-width: 0 + width: 100% отдают клиенту остаток
   ширины и разрешают обрезку. */
.таблица-архива-смет td, .таблица-архива-смет th { white-space: nowrap; }
/* Клиент — до 260 px, длиннее троеточием; свободная ширина делится между
   всеми колонками, цены не прижаты к правому краю (06.10.2026) */
.таблица-архива-смет { width: 100%; }
.таблица-архива-смет td.клиент-архива strong { display: block; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; }
.таблица-архива-смет td.клиент-архива strong { font-size: inherit; font-weight: 700; }

/* Заказ из корзины смет: позиции блоками по три в ряд внутри описания
   (владелец, 06.10.2026). На узком экране — по одному. */
.сетка-позиций-заказа { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin: 8px 0; }
.блок-позиции-заказа { background: #fff; border: 1px solid #e2ddd4; border-radius: 8px;
  padding: 10px 12px; }
.заголовок-позиции-заказа { font-weight: 700; margin-bottom: 4px; }
@media (max-width: 800px) { .сетка-позиций-заказа { grid-template-columns: 1fr; } }

/* Фон у каждой позиции заказа из корзины (06.10.2026) */
.фон-позиции-заказа { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #e2ddd4;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; position: relative; }
.фон-позиции-заказа .подпись-фона { font-size: 13px; color: #6c6c75; }
.фон-позиции-заказа input[type=text] { flex: 1 1 100%; min-width: 0; padding: 5px 8px; }

/* Заказ из нескольких позиций: название позиции в одну строку — первая
   колонка шире за счёт полупустых «кол-во» и «за единицу» (06.10.2026) */
.цены-по-позициям th:first-child, .цены-по-позициям td:first-child { width: 34%; white-space: nowrap; }
.цены-по-позициям th:nth-child(2), .цены-по-позициям td:nth-child(2) { width: 10%; }
.цены-по-позициям th:nth-child(3), .цены-по-позициям td:nth-child(3) { width: 13%; }
.цены-по-позициям .отклонение { white-space: nowrap; }

/* Рендеры позиции в её блоке (06.10.2026): миниатюры и кружок «добавить» */
.рендеры-позиции-заказа { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2ddd4; }
.рендеры-позиции-заказа img { width: 64px; height: 64px; object-fit: cover;
  border-radius: 4px; border: 1px solid #e2ddd4; display: block; }
.рендеры-позиции-заказа form, .рендеры-позиции-заказа .загрузка { margin: 0; }

/* Форма заказа из корзины — блоки позиций как в карточке (06.10.2026) */
.превью-выбранных { display: contents; }
/* Общие картинки — без черты сверху: блок отдельный, черта не к чему */
.рендеры-позиции-заказа.общие-картинки-корзины { margin-top: -4px; padding-top: 0; border-top: 0; }
.строка-сохранения.сохранение-корзины { margin-top: 28px; }
.выбор-рендера-позиции { position: relative; overflow: hidden; flex: 0 0 auto; cursor: pointer; }
.выбор-рендера-позиции input[type=file] { position: absolute; inset: 0; opacity: 0;
  width: 100%; height: 100%; cursor: pointer; }

/* Подпись позиции под картинкой в общем разделе (06.10.2026) */
.картинка figcaption:has(.позиция-картинки) { flex-wrap: wrap; }
.позиция-картинки { flex: 0 0 100%; text-align: center; font-weight: 700; font-size: 13px;
  color: #3b3b48; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Поле с подсказками — «Материал» заявки (06.10.2026): ввод + стрелка списка */
.поле-с-подсказками input[type=text] { width: 100%; padding-right: 34px; }
.стрелка-подсказок { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; background: transparent; color: #3b3b48;
  font-size: 16px; line-height: 1; cursor: pointer; border-radius: 4px; }
.стрелка-подсказок:hover { background: #f2f8f4; color: #217346; }

/* Пустое обязательное поле в форме новой сметы — видно сразу, до отправки
   (владелец, 06.10.2026): тёплый жёлтый, заполнили — обычное. Красная рамка
   «.поле-не-заполнено» при отправке сильнее и перекрывает этот цвет. */
.ждёт-заполнения:not(.поле-не-заполнено) {
  background: #fff6dc !important;
  border-color: #d9a441 !important;
}
.картинки-позиции-формы.ждёт-заполнения:not(.поле-не-заполнено) {
  border: 1px dashed #d9a441; border-radius: 6px; padding: 6px;
}
input[type=file].ждёт-заполнения:not(.поле-не-заполнено) {
  border: 1px dashed #d9a441; border-radius: 6px; padding: 8px;
}

/* Выбранные картинки в форме новой сметы — миниатюры с крестиком (06.10.2026) */
.превью-файлов-формы { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.превью-файлов-формы:empty { display: none; }
.файл-превью { position: relative; }
.файл-превью img { width: 84px; height: 84px; object-fit: cover; display: block;
  border-radius: 6px; border: 1px solid #e2ddd4; }
.убрать-файл { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid #c0392b; background: #fff; color: #c0392b;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.убрать-файл:hover { background: #c0392b; color: #fff; }

/* Своя кнопка «+ добавить картинки» в форме новой сметы (06.10.2026):
   системное поле выбора внутри, невидимое; картинки копятся миниатюрами */
.кнопка-картинок { position: relative; display: inline-flex; align-items: center;
  padding: 8px 14px; border: 1px solid #3b3b48; border-radius: 6px; background: #fff;
  color: #3b3b48; font-weight: 600; cursor: pointer; overflow: hidden; }
.кнопка-картинок:hover { border-color: #217346; color: #217346; }
.кнопка-картинок input[type=file] { position: absolute; inset: 0; opacity: 0;
  width: 100%; height: 100%; cursor: pointer; }
.кнопка-картинок.ждёт-заполнения:not(.поле-не-заполнено) { border-style: dashed; }

/* Удалить смету (06.10.2026) — тихая кнопка, краснеет при наведении */
.форма-удаления-сметы { display: inline; margin-left: 8px; }
.кнопка-удалить-смету { border: 1px solid #d8d3cb; background: #fff; color: #6c6c75;
  border-radius: 6px; padding: 6px 10px; font-size: 14px; cursor: pointer; }
.кнопка-удалить-смету:hover { border-color: #c0392b; color: #c0392b; background: #fdf3f2; }

/* Журнал изменений сметы — свёрнут, раскрывается треугольником (06.10.2026) */
.журнал-свёрнутый > summary { list-style: none; cursor: pointer; display: flex;
  align-items: baseline; gap: 10px; }
.журнал-свёрнутый > summary::-webkit-details-marker { display: none; }
.журнал-свёрнутый > summary h2 { margin: 0; display: inline-flex; align-items: baseline; gap: 8px; }
.журнал-свёрнутый > summary h2::before { content: "▶"; color: #3b3b48; font-size: .6em;
  display: inline-block; transition: transform .15s; position: relative; top: -2px; }
.журнал-свёрнутый[open] > summary h2::before { transform: rotate(90deg); }
.журнал-свёрнутый > summary:hover h2 { color: #217346; }
.журнал-свёрнутый[open] > summary { margin-bottom: 10px; }

/* Архив смет: начало следующей позиции сметы — белой строкой, как сама
   смета; тоном — только доп. тиражи (владелец, 06.10.2026) */
.таблица-архива-смет .строка-варианта.начало-позиции td { background: #fff; }   /* начало позиции — белым (06.10.2026) */
.таблица-архива-смет td, .таблица-архива-смет th { padding-left: 7px; padding-right: 7px; }

/* Архив смет: обе таблицы на одной сетке колонок (владелец, 06.10.2026).
   Ширины заданы, длинное обрезается троеточием — колонки не пляшут */
.таблица-архива-смет { table-layout: fixed; }
.таблица-архива-смет td, .таблица-архива-смет th { overflow: hidden; text-overflow: ellipsis; }
.таблица-архива-смет col.к-номер { width: 52px; }
.таблица-архива-смет col.к-когда { width: 144px; }
.таблица-архива-смет col.к-направление { width: 114px; }
.таблица-архива-смет col.к-клиент { width: auto; }
.таблица-архива-смет col.к-менеджер { width: 132px; }
.таблица-архива-смет col.к-считал { width: 132px; }
.таблица-архива-смет col.к-изделие { width: 190px; }
.таблица-архива-смет col.к-тираж { width: 92px; }
.таблица-архива-смет col.к-цена { width: 116px; }
.таблица-архива-смет col.к-сумма { width: 110px; }
.таблица-архива-смет col.к-плюс { width: 54px; }
.таблица-архива-смет td.клиент-архива strong { max-width: none; }
/* Архив смет шире обычной страницы — таблице нужно место (06.10.2026) */
.архив-смет-страница { max-width: 1560px; }

/* Форма заказа из корзины: рендеры изделия не выбраны — блок картинок жёлтым */
.рендеры-позиции-заказа.ждёт-заполнения:not(.поле-не-заполнено) {
  border: 1px dashed #d9a441; border-radius: 6px; padding: 6px; }

/* ─── Причина другой цены у заказа из нескольких позиций (07.10.2026) ── */
/* Причина — одна на заказ, фирменным списком под таблицей */
.строка-причины-цен { display: flex; align-items: center; gap: 12px; padding: 8px 0 2px; }
.строка-причины-цен .поля-карточки { margin: 0; position: relative; width: 300px; }
.строка-причины-цен .поле-списка { height: 34px; padding: 5px 28px 5px 10px; font-size: 15px;
  border-color: #d3d7e4; border-radius: 6px; }
.строка-причины-цен .нужна-причина { border-color: #a32f2f !important;
  box-shadow: 0 0 0 2px rgba(163,47,47,.15); }
.есть-js .строка-причины-цен .только-без-js { display: none; }

/* ─── Цены формулой (вариант 7, владелец, 07.10.2026) ─────────────────
   Строка позиции — фраза: «кол-во × цена = сумма» по расчёту и продано.
   Части формулы постоянной ширины: подписи «По расчёту» / «Продано»
   стоят над количеством, суммы — ровной колонкой. */
.цены-формулой { margin-top: 12px; background: #fff; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(59,59,72,.12); font-variant-numeric: tabular-nums; }
/* Колонка расчёта шире формулы на ~2 см, «Разница» — на ~1 см
   (владелец, 07.10.2026): оба блока сдвинуты влево, расстояние между
   ними прежнее, цифры разницы прижаты к правому краю */
.строка-формулы { display: grid; grid-template-columns: minmax(0, 1fr) 348px 298px 134px;
  align-items: center; column-gap: 18px; padding: 6px 14px; min-height: 44px;
  border-bottom: 1px solid #e6e2da; font-size: 15px; }
.строка-формулы .ч { text-align: right; }
.шапка-формулы { min-height: 0; padding-top: 8px; padding-bottom: 6px; font-size: 11px;
  font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: .05em;
  /* фон — как у активного шага дорожки (владелец, 08.10.2026) */
  background: #b79b77; border-bottom-color: #b79b77; border-radius: 8px 8px 0 0; }
.имя-формулы { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.формула { display: flex; align-items: center; color: #6c6c75; }
.формула .ф-кол { width: 60px; }
.продано-формулой .ф-кол { width: 76px; }
.формула .ф-знак { width: 18px; text-align: center; }
.формула .ф-цена { width: 80px; text-align: right; color: #3b3b48; }
.продано-формулой .ф-цена { width: 90px; }
.формула .ф-сумма { width: 96px; text-align: right; color: #000; font-weight: 700; }
.формула .ф-кол { color: #3b3b48; }
.цены-формулой input { width: 100%; height: 30px; padding: 0 8px; font-size: 15px;
  text-align: right; font-weight: 600; box-sizing: border-box; }
.цены-формулой input.сохранено-цена { box-shadow: 0 0 0 2px #b79b77; }
.итог-формулой { background: #f3ece2; font-weight: 700; border-bottom: 0;
  border-radius: 0 0 8px 8px; }
/* Форма заказа из корзины: та же таблица, продано вносится здесь
   (владелец, 08.10.2026); доп. позиции — название и сумма */
/* Вид — как у соседних блоков страницы (владелец, 08.10.2026): строки —
   белые карточки позиций, шапка — золотые плашки подписей полей. Подложки и
   черты нет: таблица по ширине вровень с полями «аванс», «причина» */
.цены-формулой.цены-корзины { margin-top: 14px; padding: 0; background: none;
  border-radius: 0; box-shadow: none; }
.цены-корзины .строка-формулы { background: #fff; border: 1px solid #e2ddd4;
  border-radius: 8px; margin-bottom: 6px; }
.цены-корзины .шапка-формулы { background: #b79b77; border-color: #b79b77;
  border-radius: 3px; color: #3b3b48; font-size: 14px; font-weight: 400;
  text-transform: none; letter-spacing: 0; padding-top: 3px; padding-bottom: 3px; }
.цены-корзины .строка-плюса-допа { background: transparent; border-color: transparent; }
/* Подписи полей на форме заказа из корзины — фирменным золотом, надпись
   чёрная (владелец, 08.10.2026); на остальных страницах серые, как были */
.форма-корзины-золото .тз-подпись,
.форма-корзины-золото .цены-корзины .шапка-формулы { background: #b79b77; color: #000; }
/* Ячейки под золотыми подписями — белые, рамка как у «Особенностей»,
   все одной высоты (владелец, 08.10.2026). Пустое обязательное остаётся жёлтым
   (.ждёт-заполнения), «причина обязательна» — красной рамкой. */
.форма-корзины-золото .клетка-описания .тз-значение,
.форма-корзины-золото .клетка-описания .поле-списка {
  box-sizing: border-box; height: 36px; min-height: 36px; margin: 0;
  padding: 0 28px 0 8px; font-size: 16px; line-height: 34px;
  background: #fff; border: 1px solid #d3d7e4; border-radius: 6px; }
/* Заполненное — чёрным, как везде с 25.08.2026 (у .тз-значение графит, и
   заполненные поля выглядели серее списков рядом); свой фон Safari — нет */
.форма-корзины-золото .клетка-описания .тз-значение { padding-right: 8px; color: #000;
  -webkit-appearance: none; appearance: none; }
.форма-корзины-золото .клетка-описания .тз-значение:hover { background: #fff; }
.форма-корзины-золото .клетка-описания .тз-значение:focus {
  border-color: #5aa77f; outline: 2px solid #c9e4d5; }
.форма-корзины-золото .клетка-описания .поле-списка.нужна-причина {
  border-color: #a32f2f; box-shadow: 0 0 0 2px rgba(163,47,47,.15); }
.форма-корзины-золото .сетка-описания { row-gap: 10px; }
/* Ряд «название сделки · дата · папка» — на 2 мм ниже (владелец, 08.10.2026) */
.сетка-описания.сетка-сделки-корзины { margin-top: 8px; }
.согласование-аванса { padding: 0 8px 4px; }
.форма-корзины-золото .клетка-описания .тз-значение.своё-согласование { margin-top: 6px; }
.своё-согласование[hidden] { display: none !important; }
.строка-плюса-допа > div { grid-column: 1 / -1; }
/* По 6px до строки выше и до «Итого» (владелец, 08.10.2026):
   отступы соседних строк не складываются — берётся больший */
.цены-корзины .строка-формулы.строка-плюса-допа { min-height: 0; padding: 0 14px;
  margin: 6px 0; line-height: 20px; }
.цены-корзины .итог-формулой { margin-bottom: 0; border-color: #b79b77; }
/* «Кто считал себес» у доп. позиции — на месте «кол-во × цена» расчёта:
   ширина = кол-во + знак + цена + знак (08.10.2026) */
.формула .ф-кто { width: 176px; padding-right: 8px; box-sizing: border-box;
  overflow-wrap: anywhere; }
/* Название и «кто считал» — по ширине ячейки, длинное переносится вниз */
.цены-формулой textarea.растёт { display: block; width: 100%; min-height: 30px;
  height: 30px; padding: 4px 8px; font-size: 15px; line-height: 20px;
  resize: none; overflow: hidden; box-sizing: border-box; }
/* Доп. позиция в карточке — длинное название переносится, а не режется */
.имя-формулы.имя-допа-карточки { white-space: normal; overflow-wrap: anywhere; }
.строка-плюса-допа { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
.убрать-доп { border: 0; background: none; color: #6c6c75; font-size: 20px;
  line-height: 1; cursor: pointer; padding: 0 4px; }
.убрать-доп:hover { color: #a32f2f; }
.цены-формулой .плохо { color: #a32f2f; }
.цены-формулой .хорошо { color: #217346; }

/* Срок · менеджер · папка и сумма · аванс · доплата — в стиле таблицы цен
   «формулой» (владелец, 07.10.2026): белая карточка, ячейки через тонкую
   черту, подписи мелким капслоком вместо серых плашек */
.сводка-формулой { background: #fff; border-radius: 8px; gap: 0;
  box-shadow: 0 1px 3px rgba(59,59,72,.12); }
.сводка-формулой > .клетка-описания,
.сводка-формулой > .клетка-денег { padding: 8px 14px; border-left: 1px solid #e6e2da;
  position: relative; }
.сводка-формулой > :first-child { border-left: 0; }
.сводка-формулой .тз-подпись { background: transparent; border-radius: 0; padding: 0;
  margin: 0 0 2px; font-size: 11px; font-weight: 700; color: #6c6c75;
  text-transform: uppercase; letter-spacing: .05em; }
/* Подписи — золотой шапкой во всю ширину клетки, как у таблицы цен
   (владелец, 08.10.2026). Углы скругляем у крайних клеток, а не обрезкой
   блока: обрезка спрятала бы раскрытый список менеджеров. */
.сводка-формулой > .клетка-описания > .тз-подпись,
.сводка-формулой > .клетка-денег > .тз-подпись { background: #b79b77; color: #000;
  margin: -8px -14px 6px; padding: 5px 14px; }
.сводка-формулой > :first-child > .тз-подпись { border-top-left-radius: 8px; }
.сводка-формулой > :last-child > .тз-подпись { border-top-right-radius: 8px; }
/* Значение — вровень с подписью: поле сдвинуто на свой внутренний отступ */
.сводка-формулой .тз-значение { margin-left: -8px; width: calc(100% + 8px);
  font-size: 15px; color: #000; }
.сводка-формулой .тз-значение.только-чтение { color: #3b3b48; }
/* Под шапкой — сразу значение, без рамки поля (владелец, 08.10.2026):
   ни своей рамки Safari у даты и списка, ни рамки при наведении. Править
   по-прежнему можно; в фокусе — зелёное кольцо, чтобы видеть, где курсор. */
.сводка-формулой input.тз-значение,
.сводка-формулой select.тз-значение {
  -webkit-appearance: none; appearance: none; border-color: transparent;
  background-color: transparent; box-shadow: none; }
.сводка-формулой .тз-значение:hover { border-color: transparent; background-color: transparent; }
.сводка-формулой .тз-значение:focus { border-color: transparent; background-color: #fff;
  outline: 2px solid #c9e4d5; }
/* У списка без своей отрисовки пропадает стрелка — рисуем свою */
.сводка-формулой select.тз-значение { padding-right: 24px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236c6c75' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; }

/* Карточка «глазами менеджера» (?as=manager, владелец, 08.10.2026): полоса,
   чтобы собственник не забыл, что видит урезанный вид */
.глазами-менеджера { background: #b79b77; color: #000; border-radius: 8px;
  padding: 8px 14px; margin: 0 0 12px; font-weight: 600; }
.глазами-менеджера a { color: #000; text-decoration: underline; margin-left: 8px; }

/* ─── Смета и факт по этапам — в стиле таблицы цен (владелец, 08.10.2026) ──
   Только в карточке (класс секции «этапы-формулой»): золотая шапка с
   чёрными подписями, белые строки с тонкой чертой, итог бежевой полосой,
   поля — как «Продано». Углы скругляем у крайних ячеек, а не обрезкой:
   обрезка спрятала бы раскрытые списки. */
.этапы-формулой .итог { background: #fff; padding: 0 14px 10px;
  box-shadow: 0 1px 3px rgba(59,59,72,.12); }
/* Полоса с плитками липнет к верху экрана — фон страницы, а не белый
   (владелец, 08.10.2026): плитки стоят на сером, без белой рамки */
.этапы-формулой .итоги { background: #f4f5f9; }
/* Цифры — как значения в «сумма · аванс · доплата» */
.этапы-формулой .итог .цифра { font-size: 15px; font-weight: 400; color: #000; margin-top: 0; }
.этапы-формулой .итог .цифра.хорошо { color: #2e7549; }
.этапы-формулой .итог .цифра.плохо { color: #a32f2f; }
.этапы-формулой .итог > .мелко:first-child { background: #b79b77; color: #000;
  margin: 0 -14px 6px; padding: 5px 14px; border-radius: 8px 8px 0 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.этапы-формулой .операции { padding: 10px 14px 6px; }
.этапы-формулой .таблица-операций { border-collapse: separate; border-spacing: 0;
  font-variant-numeric: tabular-nums; }
.этапы-формулой .таблица-операций th,
.этапы-формулой .таблица-операций .шапка-групп td {
  background: #b79b77; color: #000; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; border-bottom: 0;
  padding: 5px 10px; border-radius: 0; }
.этапы-формулой .таблица-операций .шапка-групп td { padding-bottom: 0; }
.этапы-формулой .таблица-операций tr:first-child > :first-child { border-top-left-radius: 8px; }
.этапы-формулой .таблица-операций tr:first-child > :last-child { border-top-right-radius: 8px; }
/* Черта между планом и фактом в шапке — темнее золота, а не серая */
.этапы-формулой .таблица-операций th:nth-child(3),
.этапы-формулой .таблица-операций .группа-факт { border-left-color: rgba(0,0,0,.15); }
.этапы-формулой .таблица-операций td { background: #fff; padding: 6px 10px;
  border-bottom: 1px solid #e6e2da; font-size: 15px; }
.этапы-формулой .таблица-операций td:nth-child(n+3) { background: #fff; }
.этапы-формулой .таблица-операций tr.шапка-групп td { border-bottom: 0; background: #b79b77; }
.этапы-формулой .таблица-операций .итого-строка td { background: #f3ece2;
  border-top: 0; border-bottom: 0; font-weight: 700; }
.этапы-формулой .таблица-операций tr:last-child > :first-child { border-bottom-left-radius: 8px; }
.этапы-формулой .таблица-операций tr:last-child > :last-child { border-bottom-right-radius: 8px; }
.этапы-формулой .таблица-операций input[type=text] { height: 30px; padding: 0 8px;
  font-size: 15px; font-weight: 600; border-radius: 6px; box-sizing: border-box; }
.этапы-формулой .таблица-операций select { height: 30px; padding: 0 8px; font-size: 15px;
  border-radius: 6px; }

/* ─── Шрифт — как в описании позиций (владелец, 08.10.2026) ─────────────
   Был разнобой: шапки 11px заглавными, строки 15–16px, поля этапов чужим
   Arial 13px. Теперь строки, значения и поля — 17px обычным, как описание;
   шапки — обычными буквами, чуть мельче строк, полужирные. */
.цены-формулой .шапка-формулы,
.сводка-формулой .тз-подпись,
.этапы-формулой .итог > .мелко:first-child,
.этапы-формулой .таблица-операций th,
.этапы-формулой .таблица-операций tr.шапка-групп td {
  font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.строка-формулы,
.сводка-формулой .тз-значение,
.этапы-формулой .итог .цифра,
.этапы-формулой .таблица-операций td { font-size: 17px; }
.цены-формулой input,
.цены-формулой textarea.растёт,
.этапы-формулой .таблица-операций input[type=text],
.этапы-формулой .таблица-операций select { font-size: 17px; font-family: inherit; }

/* ─── Этапы на сером фоне (владелец, 08.10.2026) ─────────────────────────
   Без белой подложки и тени вокруг этапа: таблица, подсказка и отметки
   лежат прямо на фоне страницы. Шапка и «Итого» — полным фирменным
   золотом: этап «впереди» больше не бледнеет целиком (золото выходило
   блёклым), приглушается только его название. */
.этапы-формулой .этап-строка { background: transparent; box-shadow: none;
  overflow: visible; border-radius: 0; }
.этапы-формулой .этап-строка.впереди { opacity: 1; }
.этапы-формулой .этап-строка.впереди .этап-имя { color: #6c6c75; }
.этапы-формулой .этап-имя { border-radius: 8px; border-bottom: 0; }
.этапы-формулой .операции { padding: 10px 0 6px; }
.этапы-формулой .таблица-операций .итого-строка td { background: #b79b77; color: #000; }
.этапы-формулой .таблица-операций .итого-строка td * { color: #000; }
/* «Итого» этапа — жирным 700, как итог таблицы цен. Ячейка уже жирная, а
   <strong> внутри давал «ещё жирнее» — вес 900, Avenir Next Heavy, и
   цифры выглядели чужим шрифтом (владелец, 08.10.2026) */
.этапы-формулой .таблица-операций .итого-строка strong { font-weight: 700; }

/* Строка названия этапа — золотая, с «План» и «Факт» над своими частями
   таблицы (владелец, 08.10.2026). Колонка плана кончается на 52% ширины
   (операция 38% + по смете 14%) — у обеих таблиц этапа, поэтому метка
   стоит по процентам. Строка пристыкована к шапке таблицы: один заголовок. */
.этапы-формулой .этап-имя { position: relative; background: #b79b77; color: #000; padding-left: 10px;
  font-size: 17px; }
.этапы-формулой .этап-строка.впереди .этап-имя,
.этапы-формулой .этап-строка.пройден .этап-имя { background: #b79b77; color: #000; }
.этапы-формулой .метка-план,
.этапы-формулой .метка-факт { position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 15px; font-weight: 600; }
.этапы-формулой .метка-план { right: calc(48% + 10px); }
.этапы-формулой .метка-факт { right: 10px; }
.этапы-формулой .этап-имя:has(.метка-план) { border-radius: 8px 8px 0 0; }
.этапы-формулой .этап-имя:has(.метка-план) + .операции { padding-top: 0; }
.этапы-формулой .этап-имя:has(.метка-план) ~ .операции .таблица-операций tr:first-child > * {
  border-top-left-radius: 0; border-top-right-radius: 0; }
/* Черта между планом и фактом — и в строке названия */
.этапы-формулой .этап-имя:has(.метка-план)::after { content: ""; position: absolute;
  top: 0; bottom: 0; left: 52%; border-left: 1px solid rgba(0,0,0,.15); }
/* Строка «Операция · По смете · Кол-во · Тариф · Сумма» — светлым, фоном
   описания заказа (владелец, 08.10.2026); золотая над ней — строка этапа */
.этапы-формулой .таблица-операций th { background: #f7f5f1; }
/* Название этапа («согласование 3D», «штамповка»…) — жирным (владелец, 08.10.2026) */
.этапы-формулой .этап-имя > span:first-child { font-weight: 700; }

/* «Проверено» — синяя, того же размера, что «Доплата пришла», в одном ряду
   (владелец, 08.10.2026) */
.кнопка.кнопка-проверено { background: #1f5fae; color: #fff; border: 1px solid #1f5fae; }
.кнопка.кнопка-проверено:hover { background: #174a8a; border-color: #174a8a; }
.ряд-отметок .встроенная { display: inline-flex; align-items: center; }

/* Отметки этапа («Согласовано с менеджером», «3D-модель проверена»…) —
   в одну строку, подписи чёрные (владелец, 08.10.2026) */
.этапы-формулой .прочие-поля { display: flex; flex-wrap: wrap; gap: 0 16px; }
.этапы-формулой .прочие-поля > .подпись-стороны { flex: 0 0 100%; }
.этапы-формулой .прочие-поля > .поле-этапа { flex: 1 1 0; min-width: 220px; }
.этапы-формулой .прочие-поля label { color: #000; }

/* Ряд «Доплата пришла · Проверено» под суммой заказа — без черты сверху;
   до суммы ~3 мм, до «рендеры / техкарты» ~5 мм (владелец, 08.10.2026) */
.оплата-отгрузка .ряд-отметок { border-top: 0; padding-top: 0; margin-top: 11px; }
.оплата-отгрузка { padding-bottom: 0; margin-bottom: 0; }
.блок.блок-картинок-заказа { padding-top: 0; }
.блок-картинок-заказа > h2 { margin-top: 19px; }

/* «Доплата пришла» и «Проверено» — одной ширины (владелец, 08.10.2026);
   доплата прячется при авансе 100% — атрибут hidden сильнее inline-flex */
.кнопка.кнопка-доплаты, .кнопка.кнопка-проверено { width: 160px; text-align: center; box-sizing: border-box; }
.ряд-отметок [data-кнопка-доплаты][hidden] { display: none !important; }

/* Комментарии позиции — списком: номер, дата и автор, текст переносится;
   ниже поле «добавить» (владелец, 08.10.2026) */
.комментарии-позиции { display: block; }
.список-комментариев { margin: 4px 0 6px; padding-left: 22px; }
.список-комментариев li { margin: 0 0 4px; line-height: 1.4; overflow-wrap: anywhere;
  white-space: normal; }
.когда-комментария { display: block; font-size: 13px; color: #6c6c75; }
.новый-комментарий { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.новый-комментарий textarea { flex: 1 1 auto; min-height: 34px; padding: 5px 8px;
  font-size: 15px; resize: vertical; }
/* «Итого» этапа — светлым, как строка «Операция · По смете…» и фон
   описания (владелец, 08.10.2026) */
.этапы-формулой .таблица-операций .итого-строка td { background: #f7f5f1; }
/* Кружок добавления картинки — ячейкой сетки справа от последней картинки,
   по центру её высоты (владелец, 08.10.2026) */
.сетка-картинок > .загрузка-в-сетке { margin: 0; align-self: center; justify-self: start; }

/* Отметка этапа клеткой: «Согласовано с менеджером [✓]» — подпись тем же
   шрифтом, что строки таблицы, рядом клетка; отмечено — зелёная галочка
   (владелец, 08.10.2026) */
.поле-этапа.поле-галочкой { display: flex; align-items: center; gap: 12px; }
.поле-этапа.поле-галочкой > label:first-of-type { font-size: 17px; color: #000; margin: 0; }
.поле-галочкой .ввод-этапа { display: flex; align-items: center; }
.галочка-этапа { position: relative; display: inline-flex; cursor: pointer; }
.галочка-этапа input[type=checkbox] { position: absolute; opacity: 0; width: 100%;
  height: 100%; margin: 0; cursor: pointer; }
.клетка-галочки { width: 26px; height: 26px; box-sizing: border-box; border-radius: 6px;
  border: 2px solid #b79b77; background: #fff; display: inline-flex;
  align-items: center; justify-content: center; }
.галочка-этапа input:checked + .клетка-галочки { border-color: #217346; }
.галочка-этапа input:checked + .клетка-галочки::after { content: ""; width: 7px; height: 13px;
  border: solid #217346; border-width: 0 3px 3px 0; transform: rotate(45deg); margin-top: -3px; }
.галочка-этапа input:focus-visible + .клетка-галочки { outline: 2px solid #c9e4d5; }
.этапы-формулой .прочие-поля > .поле-галочкой { flex: 0 0 auto; min-width: 0; margin-right: 24px; }
/* Подписи отметок этапа — крупнее (владелец, 08.10.2026), клетка под них */
.поле-этапа.поле-галочкой > label:first-of-type { font-size: 19px; }
.поле-галочкой .клетка-галочки { width: 30px; height: 30px; }
.поле-галочкой .галочка-этапа input:checked + .клетка-галочки::after { width: 8px; height: 15px; }

/* Таблица этапа — только горизонтальные линии между строками; из
   вертикальных осталась одна черта между планом и фактом (владелец,
   08.10.2026) */
.этапы-формулой .таблица-операций th,
.этапы-формулой .таблица-операций td { border-bottom: 1px solid #e6e2da; }
.этапы-формулой .таблица-операций tr:last-child > td { border-bottom: 0; }
.этапы-формулой .таблица-операций .строка-расходов td { border-top: 0; }
.этапы-формулой .добавить-расход .за-что { width: 100%; }
/* В строке доп. расхода клетки объединены — черта «план / факт» должна
   стоять перед «за что», а не перед суммой */
.этапы-формулой .таблица-операций .строка-расходов td:nth-child(2) { border-left: 1px solid #d8d3cb; }
.этапы-формулой .таблица-операций .строка-расходов td:nth-child(3) { border-left: 0; }
/* Черта «план / факт» — одним цветом сверху донизу, как разделители в
   «сумма · аванс · доплата»: на золоте светлая, на белом тёмная
   (владелец, 08.10.2026) */
.этапы-формулой .этап-имя:has(.метка-план)::after { border-left-color: #e6e2da; }
.этапы-формулой .таблица-операций th:nth-child(3),
.этапы-формулой .таблица-операций td:nth-child(3),
.этапы-формулой .таблица-операций .группа-факт,
.этапы-формулой .таблица-операций .строка-расходов td:nth-child(2) { border-left: 1px solid #e6e2da; }
.этапы-формулой .таблица-операций .строка-расходов td:nth-child(3) { border-left: 0; }

/* Числа — справа, текст — слева: во всех правимых клетках (владелец,
   08.10.2026). Число узнаём по inputmode — его ставят всем числовым полям */
input[inputmode="decimal"], input[inputmode="numeric"] { text-align: right !important; }
.прочие-поля input[type=text]:not([inputmode]) { text-align: left; }
/* Плитки «Заложено / Потрачено / Осталось»: цифра — справа, подпись — слева
   (владелец, 08.10.2026) */
.этапы-формулой .итог .цифра { text-align: right; }

/* Знак рубля: у показанных денег — в самой цифре, у правимых полей —
   справа, снаружи клетки (владелец, 08.10.2026). Колонка «Продано» шире
   на место знака. */
.знак-рубля { flex: 0 0 auto; margin-left: 4px; color: #3b3b48; }
.с-рублём { display: inline-flex; align-items: center; }
.с-рублём input { flex: 1 1 auto; min-width: 0; }
.поле-с-рублём { display: flex; align-items: center; }
.поле-с-рублём > input { flex: 1 1 auto; min-width: 0; }
.строка-формулы { grid-template-columns: minmax(0, 1fr) 348px 340px 134px; }
.формула .ф-сумма { width: 112px; }
.продано-формулой .ф-цена { width: 104px; }
.формула .ф-цена { width: 92px; }
.этапы-формулой .таблица-операций .поле-этапа { display: flex; align-items: center; }
.этапы-формулой .таблица-операций .поле-этапа input[type=text] { flex: 1 1 auto; min-width: 0; }
.этапы-формулой .строка-расходов td:last-child { white-space: nowrap; }
.этапы-формулой .строка-расходов td:last-child .сумма-расхода { width: calc(100% - 18px); }

/* Журнал изменений — треугольник золотой (владелец, 08.10.2026) */
.журнал-свёрнутый > summary h2::before { color: #b79b77; }

/* «Отгружено» под этапами — вместо блока «отгружен / проверить доплату»
   (владелец, 08.10.2026); неактивна, пока не вписано «Сдано готовых» */
.ряд-отгрузки { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.кнопка.кнопка-отгружено { width: 160px; text-align: center; box-sizing: border-box; }
.кнопка.кнопка-отгружено:disabled { background: #c9c7c2; border-color: #c9c7c2; color: #fff;
  cursor: not-allowed; }

/* «Сдано готовых, шт» и другие числовые отметки этапа — строкой, как
   галочки: подпись 19px, справа небольшое поле ~1,5 см (владелец, 08.10.2026) */
.поле-этапа.поле-числом { display: flex; align-items: center; gap: 12px; }
.поле-этапа.поле-числом > label:first-of-type { font-size: 19px; color: #000; margin: 0; }
.поле-числом .ввод-этапа { display: flex; align-items: center; }
.поле-числом .ввод-этапа input[type=text] { width: 57px; height: 32px; padding: 0 6px;
  font-size: 17px; box-sizing: border-box; }
.этапы-формулой .прочие-поля > .поле-числом { flex: 0 0 auto; min-width: 0; margin-right: 24px; }
/* «Сдано готовых, шт» — жирным; поле на одну цифру шире (владелец, 08.10.2026) */
.поле-этапа.поле-числом > label:first-of-type { font-weight: 700; }
.поле-числом .ввод-этапа input[type=text] { width: 67px; }
/* «Удалить сделку» — в ряду с «Проверено», той же ширины */
.кнопка.кнопка-удалить-сделку { width: 160px; text-align: center; box-sizing: border-box; }

/* ─── Итог по заказу — в стиле блока описания позиций (владелец, 08.10.2026):
   подложка с золотой чертой, таблица с золотой шапкой и белыми строками,
   маржинальность светлой полосой, ниже выводы словами */
.итог-описанием { padding: 12px 14px; }
.итог-формулой { width: 100%; border-collapse: separate; border-spacing: 0;
  table-layout: fixed; font-variant-numeric: tabular-nums; }
.итог-формулой th { background: #b79b77; color: #000; font-size: 15px; font-weight: 600;
  padding: 6px 12px; text-align: left; border: 0; }
.итог-формулой th.число, .итог-формулой td.число { text-align: right; }
.итог-формулой th:first-child { border-top-left-radius: 8px; width: 34%; }
.итог-формулой th:last-child { border-top-right-radius: 8px; }
.итог-формулой td { background: #fff; font-size: 17px; padding: 8px 12px;
  border-bottom: 1px solid #e6e2da; }
.итог-формулой .итого-строка td { background: #f7f5f1; font-weight: 700; border-bottom: 0; }
.итог-формулой tr:last-child > td:first-child { border-bottom-left-radius: 8px; }
.итог-формулой tr:last-child > td:last-child { border-bottom-right-radius: 8px; }
.итог-формулой .хорошо { color: #2e7549; }
.итог-формулой .плохо { color: #a32f2f; }
.выводы-итога { margin-top: 10px; font-size: 17px; line-height: 1.5; }
.выводы-итога .хорошо { color: #2e7549; }
.выводы-итога .плохо { color: #a32f2f; }
.выводы-итога .сравнение-итога { margin: 0; }
.выводы-итога [hidden] { display: none; }
.итог-формулой td { font-weight: 400; }
.итог-формулой .итого-строка td { font-weight: 700; }

/* Карандаш у названия этапа и комментарий под блоком (владелец, 08.10.2026) */
.карандаш-этапа { border: 0; background: none; cursor: pointer; font-size: 17px;
  color: #000; padding: 0 4px; line-height: 1; }
.карандаш-этапа:hover { color: #217346; }
.комментарий-этапа { margin: 8px 0 4px; position: relative; }
.комментарий-этапа[hidden] { display: none !important; }
.комментарий-этапа textarea { width: 100%; min-height: 54px; box-sizing: border-box;
  background: #fff; font-size: 17px; padding: 8px 10px; resize: vertical; text-align: left; }
/* Поле комментария этапа — сразу под «Итого», по ширине таблицы, белое в
   золотой рамке (владелец, 08.10.2026) */
.комментарий-этапа { margin: 6px 0 4px; }
.комментарий-этапа textarea { border: 1px solid #b79b77; border-radius: 8px; }
.комментарий-этапа textarea:focus { border-color: #b79b77; outline: 2px solid #ede6dd; }

/* Режим «глаз» (владелец, 08.10.2026): спрятать помеченное */
.режим-глаз [data-глаз-прячет] { display: none !important; }
.глаз-прячет-группа { display: contents; }
.кнопка-глаза { cursor: pointer; font: inherit; }
.кнопка-глаза svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.кнопка-глаза .перечёркнут { display: none; }
.режим-глаз .кнопка-глаза .перечёркнут { display: inline; }
.режим-глаз .кнопка-глаза { color: #b79b77; }

/* ─── Касса производства в стиле карточки заказа (владелец, 08.10.2026) ──
   Без зелёного фона и круглых карточек: фон страницы, золотые шапки
   клеток, белые ячейки, шрифт описания. Перекрывает прежние правила выше. */
.касса-страница { background: none; }
.касса-заголовок { font-size: 28px; margin: 6px 0 16px; }
.касса-сетка { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .касса-сетка { grid-template-columns: 1fr; } }
.касса-раздел { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.касса-трата { margin-bottom: 12px; }
.сетка-описания.касса-трата { grid-template-columns: 1fr 2fr; }
.сетка-описания.касса-трата .касса-на-что { grid-column: auto; }
.сетка-описания.касса-трата + .сетка-описания.касса-трата { grid-template-columns: 2fr 1fr; }
.касса-трата [hidden] { display: none !important; }
.касса-трата .тз-значение, .касса-трата .поле-списка,
.касса-пополнение-клетки .тз-значение { font-size: 17px; }
.касса-ошибка { margin: 0 0 10px; font-weight: 600; }
.касса-низ-траты { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.кнопка.касса-записать { width: 160px; text-align: center; box-sizing: border-box; }
.сетка-описания.касса-остаток { grid-template-columns: 1fr; }
.касса-остаток .касса-цифра { font-size: 28px; font-weight: 700; color: #000; text-align: right;
  line-height: 1.3; }
.касса-остаток .касса-цифра.плохо { color: #a32f2f; }
.касса-пополнение { margin-top: 16px; display: block; }
.сетка-описания.касса-пополнение-клетки { grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
.касса-тетрадь { table-layout: auto; }
.касса-тетрадь td { vertical-align: top; }
/* Заголовок группы в фирменном списке (доски штампа и литья) */
.группа-списка { padding: 6px 10px 4px; font-size: 13px; font-weight: 700; color: #000;
  background: #f7f5f1; text-transform: none; cursor: default; }
.сетка-описания.касса-остаток { display: grid; text-align: left; padding: 0; }
.касса-страница .касса-пополнение { margin-top: 16px; display: block; padding: 0; border: 0;
  width: 100%; max-width: none; }

/* Расход: переключатель «к заказу / общие», панель заказов в две колонки
   (слева штамповка, справа литьё), клетки по режиму (владелец, 08.10.2026) */
.касса-шапка-расхода { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.касса-шапка-расхода .касса-раздел { margin: 0; }
.переключатель-расхода { display: inline-flex; gap: 6px; }
.переключатель-расхода .кнопка { background: #fff; color: #000; border: 1px solid #d3d7e4; }
.переключатель-расхода .кнопка.выбран { background: #b79b77; border-color: #b79b77; color: #000; }
.сетка-описания.касса-трата[data-клетки-расхода] { grid-template-columns: 140px 1.3fr 1.6fr 1fr; }
.сетка-описания.касса-трата[data-клетки-расхода].режим-общий { grid-template-columns: 140px 1.6fr 1fr; }
.касса-трата .только-общий { display: none; }
.касса-трата.режим-общий .только-общий { display: block; }
.касса-трата.режим-общий .только-к-заказу { display: none; }
.выбор-заказа-кассы { position: relative; }
.поле-заказа-кассы { width: 100%; height: 36px; box-sizing: border-box; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.панель-заказов { position: absolute; left: 0; top: 100%; z-index: 30; margin-top: 4px;
  display: grid; grid-template-columns: 1fr 1fr; width: max(560px, 100%);
  background: #fff; border: 1px solid #d8d3cb; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20,25,50,.14); max-height: 420px; overflow: auto; }
.панель-заказов[hidden] { display: none; }
.колонка-заказов + .колонка-заказов { border-left: 1px solid #e6e2da; }
.панель-заказов .вариант-списка { font-size: 15px; }
.панель-заказов .вариант-списка.выбран .мелко { color: #fff; }
.касса-сетка { grid-template-columns: minmax(0, 1fr) 300px; }
.сетка-описания.касса-трата[data-клетки-расхода] { grid-template-columns: 120px 1.2fr 1.6fr 1fr; }
.сетка-описания.касса-трата[data-клетки-расхода].режим-общий { grid-template-columns: 120px 1.6fr 1fr; }
.касса-трата .тз-подпись { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.касса-трата .поле-списка { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.сетка-описания.касса-пополнение-клетки { grid-template-columns: 1fr; }

/* Баланс первым блоком, справа пополнение со стрелкой; расход ниже на всю
   ширину (владелец, 08.10.2026) */
.касса-баланс-ряд { margin-bottom: 22px; max-width: 640px; }
.сетка-описания.касса-баланс { grid-template-columns: 1fr 1fr; }
.касса-баланс .касса-цифра { font-size: 28px; font-weight: 700; color: #000; text-align: right;
  line-height: 1.3; }
.касса-баланс .касса-цифра.плохо { color: #a32f2f; }
.касса-пополнить { margin: 0; }
.касса-пополнить .поле-с-рублём { gap: 0; }
.кнопка-стрелка { flex: 0 0 auto; width: 36px; height: 36px; margin-left: 8px; border: 0;
  border-radius: 8px; background: #217346; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.кнопка-стрелка:hover { background: #0f5132; }
.кнопка-стрелка svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.касса-порог { margin-top: 6px; }
.касса-сетка.касса-сетка-одна { grid-template-columns: 1fr; }
.касса-страница .касса-баланс-ряд { margin-top: 10px; }
/* Касса: одно скругление у всех блоков и кнопок — 8px (владелец, 08.10.2026) */
.касса-страница .кнопка { border-radius: 8px; }
/* «сумма ₽ →» — по середине клетки «пополнить» */
.касса-баланс > .клетка-описания { display: flex; flex-direction: column; }
.касса-пополнить .поле-с-рублём { flex: 1 1 auto; justify-content: center; align-items: center; }
.касса-пополнить .поле-с-рублём > input { flex: 0 0 150px; }
/* Этапы не той доски / без таблицы — серые, не нажимаются */
.панель-этапов .вариант-списка.недоступен { color: #b0aeb5; cursor: default; background: none; }
.панель-этапов .вариант-списка.недоступен:hover { background: none; }
/* Панель этапов — к правому краю клетки, чтобы не вылезала за страницу */
.панель-этапов { left: auto; right: 0; }
/* Баланс и пополнение — узкие: число максимум шестизначное (08.10.2026) */
.касса-баланс-ряд { max-width: none; }
.сетка-описания.касса-баланс { display: inline-grid; grid-template-columns: 200px 270px; }
.касса-пополнить .поле-с-рублём > input { flex: 0 0 130px; }
/* Угол первой клетки — скруглён и у самой клетки (Safari) */
.сводка-формулой > .клетка-описания:first-child { border-top-left-radius: 8px; }
.сводка-формулой > .клетка-описания:last-child { border-top-right-radius: 8px; }

/* Расход: два блока друг под другом — к заказу и общий (владелец, 08.10.2026) */
.сетка-описания.касса-трата.касса-к-заказу { grid-template-columns: 120px 1.2fr 1.6fr 1fr; }
.сетка-описания.касса-трата.касса-общий-клетки { grid-template-columns: 120px 1.6fr 1fr; }
.форма-подотчёта.касса-общий { margin-top: 22px; }
/* Баланс и «пополнить» — одной ширины; стрелка у правого края клетки с
   одинаковым отступом сверху, снизу и справа */
.сетка-описания.касса-баланс { grid-template-columns: 240px 240px; }
.касса-баланс > .клетка-описания { position: relative; min-height: 0; }
.касса-баланс .касса-цифра { height: 36px; line-height: 36px; }
.касса-пополнить .поле-с-рублём { justify-content: flex-start; height: 36px;
  padding-right: 44px; box-sizing: border-box; }
.касса-пополнить .поле-с-рублём > input { flex: 1 1 auto; min-width: 0; }
.касса-пополнить .кнопка-стрелка { position: absolute; right: 7px; bottom: 7px; margin: 0; }
.сводка-формулой.касса-баланс > .клетка-описания { padding-bottom: 2px; }
/* Вся касса выше на 26px: верх буквы «Б» в «Баланс» — вровень с верхом
   кнопки «Доска смет» слева (владелец, 08.10.2026); расстояния между
   блоками не меняются */
.касса-страница .касса-баланс-ряд { margin-top: -16px; }
/* «Общий расход» с заголовком — ближе: отступ как между балансом и
   «Расходом к заказу» (владелец, 08.10.2026) */
.форма-подотчёта.касса-общий { margin-top: -2px; }
/* «на что потрачено», «заказ», «этап» — одной ширины (владелец, 08.10.2026) */
.сетка-описания.касса-трата.касса-к-заказу { grid-template-columns: 120px 1fr 1fr 1fr; }
/* Сумма баланса — по середине клетки (владелец, 08.10.2026) */
.касса-баланс .касса-цифра { text-align: center; }
.касса-баланс .касса-цифра { font-size: 26px; }
/* по высоте — тоже середина белой части клетки (замер: было 25 сверху / 6 снизу) */
.касса-баланс .касса-цифра { position: relative; top: -9px; }

/* Заказ не из корзины — блок позиции и цены «формулой» (владелец, 10.10.2026) */
.сетка-позиций-заказа.одна-позиция .блок-позиции-заказа { grid-column: span 2; }
@media (max-width: 800px) { .сетка-позиций-заказа.одна-позиция .блок-позиции-заказа { grid-column: auto; } }
.цены-одной form.клетка-цены { display: flex; align-items: center; margin: 0; position: relative; width: 100%; }
.цены-одной form.клетка-цены input { flex: 1 1 auto; min-width: 0; }
.цены-одной form.клетка-что { display: block; margin: 4px 0 0; position: relative; }
.цены-одной form.клетка-что input { width: 100%; height: 30px; padding: 0 8px; font-size: 15px;
  text-align: left; font-weight: 400; box-sizing: border-box; }
.цены-одной .отметка { position: absolute; right: 2px; top: -14px; }
.есть-js .цены-одной .только-без-js { display: none; }
.цены-одной .имя-формулы.имя-допа-карточки { white-space: normal; }
/* Многострочное «Примечание / описание» — с переносами строк (10.10.2026) */
.строка-описания.строка-с-переносом { white-space: pre-line; }

/* Комментарии: ✎ и × у пункта, правка на месте (владелец, 10.10.2026) */
.кнопка-комментария { border: 0; background: none; cursor: pointer; padding: 0 3px;
  font-size: 15px; color: #6c6c75; line-height: 1; }
.кнопка-комментария:hover { color: #217346; }
.кнопка-комментария.удалить:hover { color: #a32f2f; }
.форма-удаления-комм { display: inline; margin: 0; }
.список-комментариев .текст-комментария { display: block; }
.список-комментариев .текст-комментария[hidden] { display: none; }
.форма-правки-комм { margin: 4px 0 6px; }
.форма-правки-комм[hidden] { display: none; }
.форма-правки-комм textarea { width: 100%; min-height: 54px; font-size: 15px; box-sizing: border-box; }
.форма-правки-комм .кнопка { margin-top: 4px; }

/* Блок позиции заказа не из корзины — в половину ширины: правый край по
   линии, что показал владелец (10.10.2026) */
.сетка-позиций-заказа.одна-позиция { grid-template-columns: 1fr 1fr; }
.сетка-позиций-заказа.одна-позиция .блок-позиции-заказа { grid-column: auto; }

/* Полоса этапов — без тени: ячейки лежат прямо на сером фоне (владелец,
   10.10.2026). Фон страницы остаётся — при прокрутке под ней не просвечивает */
.панель-этапов { box-shadow: none; }
.когда-комментария .удалить-строку { font-size: 13px; padding: 0 3px; vertical-align: baseline; }

/* Коллаж картинок справа от блока позиции (одна позиция, 10.10.2026):
   сетка 2×2 без линий, рендеры квадратами, техкарта — на две клетки */
.коллаж-картинок { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  align-content: start; }
.коллаж-картинок a { display: block; border-radius: 8px; overflow: hidden; background: #fff; }
.коллаж-картинок img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.коллаж-картинок a.техкарта-коллажа { grid-column: span 2; }
.коллаж-картинок a.техкарта-коллажа img { aspect-ratio: auto; object-fit: contain; }
.коллаж-пусто { grid-column: span 2; padding: 8px 2px; }
.одна-позиция .рендеры-позиции-заказа:not(:has(img)) { padding-top: 8px; }
.сетка-позиций-заказа.одна-позиция { align-items: start; }

/* Заголовок «смета и факт по этапам»: сверху воздуха больше, чем снизу
   (владелец, 10.10.2026: было 14 / 29 px — стало 29 / 14) */
.этапы-формулой > h2.заголовок-этапов { margin-top: 29px; margin-bottom: 0; }
.этапы-формулой > h2.заголовок-этапов + .итоги { margin-top: 6px; }

/* Коллаж — высотой с блок описания (владелец, 10.10.2026): сам высоту не
   задаёт, картинки делят её поровну и обрезаются по клетке, не растягиваясь.
   Вырос блок (добавили комментарий) — вырос и коллаж. */
.сетка-позиций-заказа.одна-позиция { align-items: stretch; }
.коллаж-картинок { position: relative; min-height: 220px; }
.коллаж-сетка { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr; gap: 10px; }
.коллаж-сетка > a { height: 100%; min-height: 0; }
.коллаж-картинок .коллаж-сетка img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.коллаж-картинок .коллаж-сетка a.техкарта-коллажа img { object-fit: contain; }
/* Одна картинка — на всю высоту и ширину коллажа */
.коллаж-сетка[data-картинок="1"] > a { grid-column: span 2; }
@media (max-width: 800px) {
  .коллаж-сетка { position: static; }
  .коллаж-картинок .коллаж-сетка img { aspect-ratio: 1 / 1; height: auto; }
}

/* Этапы и «итог по заказу» — светлым золотом с золотой чертой снизу;
   шапки плиток «Заложено / Потрачено / Осталось» — полным золотом
   (владелец, 10.10.2026, вариант 7б по макетам) */
.этапы-формулой .этап-имя,
.этапы-формулой .этап-строка.впереди .этап-имя,
.этапы-формулой .этап-строка.пройден .этап-имя,
.этапы-формулой .этап-строка.тут .этап-имя,
.итог-описанием .итог-формулой th {
  background: #dccdb7; color: #000; box-shadow: inset 0 -2px 0 #b79b77; }

/* В карточке полным золотом — только закреплённый блок (плитки «Заложено /
   Потрачено / Осталось»); шапка таблицы цен и подписи полос «срок · менеджер ·
   папка», «сумма · аванс · доплата» — светлым золотом с чертой, как этапы
   (владелец, 10.10.2026) */
.страница-карточки .цены-формулой .шапка-формулы,
.страница-карточки .сводка-формулой > .клетка-описания > .тз-подпись,
.страница-карточки .сводка-формулой > .клетка-денег > .тз-подпись {
  background: #dccdb7; color: #000; box-shadow: inset 0 -2px 0 #b79b77; }

/* ─── Коллаж: клетки, «+N ещё», раскрытие, обложка и удаление ──────────────
   (владелец, 10.10.2026) */
.коллаж-сетка > .клетка-коллажа { position: relative; min-height: 0; border-radius: 8px;
  overflow: hidden; background: #fff; }
.клетка-коллажа > a { display: block; height: 100%; }
.клетка-коллажа img { display: block; width: 100%; height: 100%; object-fit: cover; }
.клетка-коллажа.техкарта-коллажа { grid-column: span 2; }
.клетка-коллажа.техкарта-коллажа img { object-fit: contain; }
.коллаж-картинок:not(.раскрыт) .скрыта-свёрнуто { display: none; }
.коллаж-картинок:not(.раскрыт) .шире-свёрнуто { grid-column: span 2; }
.коллаж-картинок.раскрыт .шире-раскрыто { grid-column: span 2; }
.ещё-картинки { position: absolute; inset: 0; border: 0; cursor: pointer;
  background: rgba(20, 20, 30, .5); color: #fff; font: inherit; font-size: 22px; font-weight: 700; }
.коллаж-картинок.раскрыт .ещё-картинки { display: none; }
/* Раскрыт — растёт вниз, клетки квадратные */
.коллаж-картинок.раскрыт { min-height: 0; }
.коллаж-картинок.раскрыт .коллаж-сетка { position: static; grid-auto-rows: auto; }
.коллаж-картинок.раскрыт .клетка-коллажа img { aspect-ratio: 1 / 1; height: auto; }
.коллаж-картинок.раскрыт .клетка-коллажа.техкарта-коллажа img { aspect-ratio: auto; }
.свернуть-коллаж { display: none; }
.коллаж-картинок.раскрыт .свернуть-коллаж { display: inline-block; margin-top: 6px; }
/* Кружок обложки: у обложки — зелёная галочка всегда; у остальных — пустой
   кружок при наведении. 🗑 — при наведении, справа сверху */
.форма-обложки, .форма-удаления-картинки { position: absolute; top: 8px; margin: 0; }
.форма-обложки { left: 8px; }
.форма-удаления-картинки { right: 6px; }
.галочка-обложки { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid #fff; background: rgba(255,255,255,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  display: inline-flex; align-items: center; justify-content: center; }
.галочка-обложки.выбрана { background: #217346; border-color: #fff; }
.галочка-обложки.выбрана::after { content: ""; width: 6px; height: 11px; margin-top: -3px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.клетка-коллажа .форма-обложки:not(:has(.выбрана)),
.клетка-коллажа .форма-удаления-картинки { opacity: 0; transition: opacity .15s; }
.клетка-коллажа:hover .форма-обложки,
.клетка-коллажа:hover .форма-удаления-картинки { opacity: 1; }
.форма-удаления-картинки .удалить-строку { opacity: 1; background: rgba(255,255,255,.85);
  border-radius: 6px; padding: 3px 5px; font-size: 15px; }
/* Строки позиций друг под другом */
.ряд-позиции + .ряд-позиции { margin-top: 12px; }
.ряд-общих-картинок { margin-top: 14px; }
.ряд-общих-картинок .подпись-фона { margin-bottom: 6px; }
/* Внешняя рамка коллажа — не сетка (сетка внутри), иначе в раскрытом виде
   картинки сжимались в половину, а «свернуть» вставало сбоку */
.коллаж-картинок { display: block; }
/* Коллаж раскрыт — блок описания остаётся своей высоты */
.сетка-позиций-заказа.одна-позиция:has(.коллаж-картинок.раскрыт) { align-items: start; }

/* Под названием карточки — сколько позиций и тиражей (владелец, 10.10.2026) */
.состав-под-названием { font-size: 15px; font-weight: 600; color: #3b3b48; margin: -4px 0 4px; }

/* Картинки коллажа — целиком, не обрезаются (владелец, 10.10.2026: две
   картинки в узких клетках резались по бокам); по краю — та же лёгкая
   рамка, что у блока описания изделия */
.коллаж-картинок .клетка-коллажа img,
.коллаж-картинок.раскрыт .клетка-коллажа img { object-fit: contain; }
.коллаж-сетка > .клетка-коллажа { border: 1px solid #e2ddd4; }

/* Журнал заказа: многострочные записи («правка «что заказано»» — по строке
   на графу) переносятся как написаны (владелец, 10.10.2026) */
.журнал-заказа .что-в-журнале { white-space: pre-line; overflow-wrap: anywhere; }

/* Внесённый доп. расход этапа — справа, на стороне факта, как строка
   добавления: значок кассы, название, корзина в конце ячейки; сумма — в
   колонке сумм (владелец, 10.10.2026) */
.внесённый-расход { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.значок-кассы-расхода { flex: 0 0 auto; width: 18px; height: 18px; fill: none;
  stroke: #3b3b48; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.имя-внесённого-расхода { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Корзина — правее суммы, в поле справа у таблицы; поле есть у всех строк,
   поэтому суммы и прочерки стоят в одну линию */
.таблица-операций.с-корзиной tr > td:last-child,
.таблица-операций.с-корзиной tr > th:last-child { padding-right: 40px; }
.таблица-операций.с-корзиной td.сумма-операции { position: relative; }
.сумма-операции .форма-удаления-расхода { position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); margin: 0; }