:root {
  --bg: #f4f5f7;
  --panel: #fff;
  --ink: #1f2733;
  --muted: #6b7785;
  --line: #d8dde3;
  --brand: #1d3c5a;
  --accent: #2f6db0;
  --empty: #eef0f3;
  --progress: #fff4d6;
  --progress-line: #e6c64d;
  --done: #d9f0df;
  --done-line: #5ab576;
  --ghost: #fbf7ee;
  --ghost-line: #d8b96b;
  --ghost-ink: #7a5c17;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

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

/* --- topbar --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  height: 48px;
  background: var(--brand);
  color: #fff;
}
.topbar a { color: #dce6f1; }
.topbar .brand { font-weight: 700; color: #fff; font-size: 16px; }
.topbar .spacer { flex: 1; }
.topbar .user { color: #b8c6d6; font-size: 13px; }
.topbar .logout { margin: 0; }
.topbar .logout button,
.login-card button {
  cursor: pointer;
}
.topbar .logout button {
  background: transparent;
  border: 1px solid #3f5d79;
  color: #dce6f1;
  border-radius: 4px;
  padding: 4px 10px;
}
/* верхний бар: слева крошка + вкладки заказа, справа Склад + аккаунт */
.tb-left, .tb-right { display: flex; align-items: center; gap: 14px; }
.tb-crumb { display: inline-flex; align-items: center; gap: 7px; }
.tb-sep { color: #6d8199; }
.tb-cur { color: #fff; font-weight: 700; }
.tb-div { width: 1px; height: 22px; background: #3a597a; }
/* вкладки заказа в баре: короткие ярлыки, активная — пилюлей на тёмном фоне */
.tb-tabs { display: flex; align-items: center; gap: 3px; }
.topbar .tb-tab { padding: 5px 11px; border-radius: 6px; color: #b9cade; white-space: nowrap; }
.topbar .tb-tab:hover { text-decoration: none; background: rgba(255, 255, 255, .08); }
.topbar .tb-tab.on { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }

.content { padding: 6px 22px 24px; max-width: 100%; }
h1 { font-size: 22px; margin: 0 0 14px; }
h2 { font-size: 17px; margin: 24px 0 10px; }
.sub, .crumbs { color: var(--muted); margin: 0 0 14px; }
.muted { color: var(--muted); }

/* --- generic grid table --- */
.grid {
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  min-width: 640px;
}
.grid th, .grid td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.grid thead th { background: #eef1f4; font-weight: 600; }
.grid tbody tr:last-child td { border-bottom: 0; }

dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; max-width: 560px; }
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; }

/* --- manufacturing table --- */
/* область прокрутки таблицы: ограничена по высоте, чтобы липкая шапка держалась внутри неё
   (иначе overflow-x создаёт контейнер без высоты и sticky top не срабатывает) */
.mtable-wrap { overflow: auto; max-height: calc(100vh - 150px); border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.mtable { border-collapse: collapse; }
.mtable th, .mtable td { border: 1px solid var(--line); }
.mtable thead th { background: #eef1f4; padding: 6px 8px; font-weight: 600; vertical-align: bottom; }
.mtable .class-h { text-align: center; background: #e3e9f0; font-weight: 700; }
.mtable .class-h--free { background: #efe9df; font-style: italic; font-weight: 600; }
/* этаж узла в шапке: между техгруппой и операцией (инв. 9 — в группе живут разные детали) */
.mtable .node-h { text-align: center; background: #e9eef4; font-weight: 600; font-size: 11px;
  cursor: pointer; user-select: none; white-space: nowrap; padding: 3px 6px; }
.mtable .node-h:hover { filter: brightness(0.97); }
.mtable .node-h--col { color: var(--muted); }
.mtable .node-h.prog-h { cursor: default; font-weight: 400; }
.mtable .wc-na { background: repeating-linear-gradient(45deg, #f0f1f3, #f0f1f3 5px, #e8eaee 5px, #e8eaee 10px); color: var(--muted); text-align: center; }
.mtable .op-h { font-weight: 500; }
.mtable .op-h span {
  display: block;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: 130px;
  font-size: 12px;
}
.mtable .corner, .mtable .unit-c {
  position: sticky;
  left: 0;
  background: #eef1f4;
  text-align: left;
  padding: 6px 10px;
  white-space: nowrap;
  z-index: 1;
}
.mtable .unit-c small { color: var(--muted); font-weight: 400; }
/* height:1px на td + height:100% на .wc = цветной прямоугольник ячейки тянется во ВСЮ высоту
   строки. Иначе он лежит по центру своей высоты, а сверху и снизу остаются белые полосы td —
   ячейка читается как три горизонтальные полосы. */
.wc-td { padding: 0; height: 1px; }

/* две закреплённые колонки идентификации строки (Марка/Экземпляр).
   Ширины фиксированы и согласованы со смещениями left, иначе sticky-колонки наедут:
   id-inst.left == ширина id-name. */
.mtable .id-c { position: sticky; z-index: 2; }
.mtable thead .id-c { z-index: 6; }
.mtable .id-name {
  left: 0; width: 104px; min-width: 104px; max-width: 104px;
  overflow: hidden; text-overflow: ellipsis;
}
.mtable .id-inst { left: 104px; min-width: 96px; }
.mtable .unit-c.id-name { font-weight: 600; }

/* граница между позициями: первая строка каждой позиции получает верхнюю линию */
.mtable tbody tr.pos-start > * { border-top: 2px solid #b9c4d0; }

/* липкая шапка: два этажа (группа + операция). Высота первого этажа фиксирована, иначе
   второму неоткуда взять смещение top. Прокрутка — внутри .mtable-wrap (он ограничен по
   высоте), поэтому липкость работает и по вертикали, и по горизонтали. */
/* Три этажа: смещения top НАКОПИТЕЛЬНЫЕ и должны совпадать с высотами этажей выше —
   рассинхрон загонит нижний этаж под верхний. Группа 28px → узел на top:28 (рендерится 22.75
   вместе с рамкой) → операции на top:51. Замеряно в браузере, не выведено: border-collapse
   добавляет к заданной высоте долю пикселя. */
.mtable thead th { position: sticky; z-index: 3; }
.mtable thead tr:first-child th { top: 0; z-index: 5; }
.mtable thead tr:nth-child(2) th { top: 28px; z-index: 4; }
.mtable thead tr:nth-child(3) th { top: 51px; }
.mtable thead .class-h { height: 28px; padding: 3px 8px; }
.mtable thead .node-h { height: 22px; }

/* кликабельный заголовок техгруппы (свернуть/развернуть) */
.mtable .grp-h { cursor: pointer; user-select: none; }
.mtable .grp-h:hover { filter: brightness(0.96); }
.mtable .grp-h--col { white-space: nowrap; }
.mtable .prog-h { writing-mode: horizontal-tb; font-style: italic; color: var(--muted); }

/* свёрнутый столбец группы — прогресс «готово/всего» */
.mtable .wc-prog {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  padding: 5px 8px;
  min-width: 56px;
  white-space: nowrap;
}
.mtable .wc-prog--done { background: var(--done); box-shadow: inset 3px 0 0 var(--done-line); }
.mtable .wc-prog--progress { background: var(--progress); box-shadow: inset 3px 0 0 var(--progress-line); }
.mtable .wc-prog--empty { background: var(--empty); }
.mtable .wc-prog--na {
  background: repeating-linear-gradient(45deg, #f0f1f3, #f0f1f3 5px, #e8eaee 5px, #e8eaee 10px);
  color: var(--muted);
}

/* предупреждения сборки выдачи чертежей (панель выгрузки): что не попадёт в архив */
.dwg-warn { list-style: none; margin: 6px 0 0; padding: 0; font-size: 11px; line-height: 1.7; }
.dwg-warn .chip { margin-right: 5px; }

.mtable-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
[x-cloak] { display: none !important; }

/* --- инлайн-фильтр колонки (colf.html): подпись с пунктиром = кликабельный вызов;
   fixed-меню чек-листа значений (не режется скроллом контейнера). Общий для «Материалов»
   и «Обработки». --- */
.colf { position: relative; display: inline-block; }
.colf-trig { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; padding: 0; border-bottom: 1px dashed var(--muted); }
.colf-trig:hover { border-bottom-color: var(--accent); color: var(--accent); }
.colf-trig--on { border-bottom: 1px solid var(--accent); color: var(--accent); }
.colf-cnt { margin-left: 3px; font-size: 10px; color: var(--accent); font-weight: 700; vertical-align: 1px; }
.colf-menu { position: fixed; z-index: 50; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 6px 10px;
  max-height: 260px; overflow: auto; min-width: 120px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.colf-menu label { display: block; white-space: nowrap; padding: 1px 0; }

/* --- work cell --- */
/* всё содержимое ячейки — в ОДНУ строку: исполнитель, даты и бейдж субподряда стояли друг под
   другом и растили высоту строки втрое. Длинное имя обрезается многоточием, полный текст — в
   тултипе ячейки. */
.wc {
  position: relative;
  min-width: 74px;
  min-height: 22px;
  height: 100%;
  box-sizing: border-box;
  padding: 2px 6px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  font-size: 12px;
}
.wc__exec { overflow: hidden; text-overflow: ellipsis; }
.wc__dates { margin-left: auto; color: var(--muted); font-size: 11px; }
/* субподряд операции: бейдж в ячейке «Обработки» */
.wc__sub { font-size: 10px; font-weight: 600; color: #2e7d32; white-space: nowrap; }

/* плотный режим: ячейка — цветная метка, исполнитель и даты уходят в тултип. 68 столбцов
   операций иначе не помещаются ни в один экран (см. тумблер «Плотно / Подробно»). */
.mtable.dense .wc { min-width: 26px; min-height: 20px; padding: 2px; align-items: center; justify-content: center; }
.mtable.dense .wc__exec, .mtable.dense .wc__dates, .mtable.dense .wc__sub-name { display: none; }
.mtable.dense .wc--done::after { content: "✓"; font-size: 11px; line-height: 1; color: var(--done-line); }
.mtable.dense .wc--progress::after { content: "•"; font-size: 13px; line-height: 1; color: var(--progress-line); }
.mtable.dense .wc__sub { position: absolute; top: 0; right: 1px; font-size: 9px; }
.mtable.dense .wc-na, .mtable.dense .wc-prog { padding: 2px; min-width: 26px; font-size: 11px; }

/* режим выделения: прозрачный оверлей перехватывает клик (через @click.stop) */
.wc-pick { position: absolute; inset: 0; cursor: pointer; background: transparent; }
.mtable.selmode .wc { cursor: copy; }
.wc--sel { box-shadow: inset 0 0 0 2px var(--accent); background: #e8f0f8; }
.btn--active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sel-hint { font-size: 12px; margin: 2px 0 8px; }
/* Рамка-обводка только при навигации с клавиатуры (Tab), не при клике мышью —
   иначе она «залипает» на ячейке после правки, пока не кликнешь в стороне. */
.wc:focus { outline: none; }
.wc:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wc__exec { font-weight: 600; }
.wc__dates { color: var(--muted); white-space: nowrap; }
.wc--empty { background: var(--empty); }
.wc--progress { background: var(--progress); box-shadow: inset 3px 0 0 var(--progress-line); }
.wc--done { background: var(--done); box-shadow: inset 3px 0 0 var(--done-line); }

/* Открытая ячейка подсвечивается, пока рядом висит поповер правки. */
.wc--open { box-shadow: inset 0 0 0 2px var(--accent); }

/* Поповер правки ячейки «Обработки»: fixed-карточка, позиционируется JS-ом рядом с ячейкой. */
.cell-pop {
  position: fixed;
  z-index: 50;
  min-width: 190px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.cell-pop__form label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.cell-pop__form select, .cell-pop__form input {
  width: 100%; font-size: 12px; padding: 3px 5px; box-sizing: border-box;
}
.wc__btns { display: flex; gap: 6px; margin-top: 6px; }
.wc__btns button { cursor: pointer; border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; }
.wc__btns .ok { background: var(--done); border-color: var(--done-line); }
.wc__err { color: #b00020; font-size: 11px; margin-bottom: 4px; }

/* --- Правка остатков: поповер (лист/отрез/партия) + кнопки в строке --- */
.stock-pop { width: 340px; max-width: calc(100vw - 24px); }
.stock-pop .pop-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.stock-pop .pop-title small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 2px; }
.pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
/* min-width:0 — иначе grid-элемент не сжимается уже инпута и правый столбец вылезает за поповер */
.stock-pop__form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); min-width: 0; }
.stock-pop__form input[type=text], .stock-pop__form input[type=number] {
  width: 100%; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; box-sizing: border-box; }
.stock-pop__form input[readonly] { background: #f5f6f8; color: var(--muted); }
.pop-full { margin-top: 8px; }
.pop-dxf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px;
  padding: 6px 8px; border: 1px dashed var(--line); border-radius: 5px; font-size: 11px; }
.pop-dxf .dxf-cur { font-family: monospace; }
.pop-dxf .dxf-rm { flex-direction: row; align-items: center; gap: 3px; }
.pop-dxf input[type=file] { font-size: 11px; max-width: 100%; }
.pop-ok { font-size: 11px; color: var(--done-line); background: var(--done); border-radius: 5px; padding: 6px 8px; margin-bottom: 8px; }
.pop-note { font-size: 11px; color: var(--muted); margin: 8px 0 0; }
.st-act { white-space: nowrap; }
.st-editbtn { cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 4px;
  padding: 1px 6px; font-size: 12px; color: var(--muted); margin-right: 3px; }
.st-editbtn:hover { border-color: var(--accent); color: var(--accent); }
.st-editbtn--txt { font-size: 11px; }

/* --- legend --- */
.legend { margin-top: 12px; color: var(--muted); font-size: 13px; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; margin-right: 4px; }
.chip--na { background: repeating-linear-gradient(45deg, #f0f1f3, #f0f1f3 5px, #e8eaee 5px, #e8eaee 10px); }

.btn {
  display: inline-block;
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 5px;
  font-weight: 500;
}
.btn:hover { text-decoration: none; background: #275d97; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- статусы прослеживаемости --- */
.trace td, .trace th { white-space: nowrap; }
.st-ok { background: var(--done); box-shadow: inset 3px 0 0 var(--done-line); }
.st-warn { background: var(--progress); box-shadow: inset 3px 0 0 var(--progress-line); }
.st-bad { background: #f7dcdc; box-shadow: inset 3px 0 0 #c75050; }
.st-ghost { background: var(--ghost); box-shadow: inset 3px 0 0 var(--ghost-line); color: var(--ghost-ink); }
.chip.st-ok, .chip.st-warn, .chip.st-bad, .chip.st-ghost { box-shadow: none; }

.ready-banner {
  padding: 10px 14px;
  border-radius: 6px;
  margin: 6px 0 18px;
  font-weight: 600;
}

/* --- layout helpers --- */
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.scroll-x { overflow-x: auto; }
.r { text-align: right; }
.strong { font-weight: 600; }
.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--empty); }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font-size: 13px; }
.linkbtn:hover { text-decoration: underline; }

/* --- замечания на чертеже (модуль drawings, этап 2) --- */
.dwg-tools { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.dwg-tools button { cursor: pointer; border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; background: #fff; }
.ann-panel-wrap { width: 320px; flex: 0 0 320px; }
.ann-panel { width: 320px; max-height: 70vh; overflow-y: auto; scrollbar-gutter: stable; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.ann-filters { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0; }
.ann-filters .chip { cursor: pointer; border: 1px solid var(--line); }
.ann-list { list-style: none; padding: 0; margin: 10px 0 0; }

/* «Добавить замечание» — вход в режим пометок */
.ann-add { width: 100%; box-sizing: border-box; cursor: pointer; border: 1px dashed var(--line);
  border-radius: 6px; padding: 7px 10px; background: #fff; font-size: 13px; color: #24303c; }
.ann-add:hover { background: #eef1f4; }
.ann-add.on { border-style: solid; background: #e8f0fe; border-color: #2563eb; color: #1d4ed8; }

/* Карточка замечания (макет документооборота) */
.ann-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.ann-card.active { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset; }
.ann-card textarea { width: 100%; box-sizing: border-box; font: inherit; }
.ann-btn { border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 3px 12px;
  font-size: 12px; background: #fff; }
.ann-btn.ok { border-color: #2563eb; background: #2563eb; color: #fff; }
.ann-btn.del { border-color: #e6b3b3; color: #b33; }

/* Цвет статуса — единый источник (кружок, полоса превью, статус в чате) */
.ann-stat--open { --stcolor: #f59e0b; }
.ann-stat--in_progress { --stcolor: #3b82f6; }
.ann-stat--fixed { --stcolor: #16a34a; }
.ann-stat--rejected { --stcolor: #9ca3af; }

/* (2)(3) Превью: полоса статуса слева + фрагмент чертежа + чип страницы */
.ann-prev { display: block; position: relative; box-sizing: border-box; width: 100%;
  padding: 0 0 0 8px; border: 0; background: none; cursor: pointer; }
.ann-prev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 3px; background: var(--stcolor, #ccc); }
.ann-prev__img { display: block; width: 100%; height: auto;
  background: #fbfcfe; border: 1px solid var(--line); border-radius: 6px; }
.ann-prev__none { display: block; padding: 10px; font-size: 12px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 6px; text-align: center; }
.ann-prev__page { position: absolute; top: 6px; right: 6px; background: #fff3c4; color: #7a5c00;
  border: 1px solid #ecd98a; border-radius: 4px; font-size: 11px; padding: 1px 7px; }
.ann-card.active .ann-prev__img { outline: 2px solid #2563eb; }

/* (4)(5) Текст + разворот + правка */
.ann-body { margin-bottom: 6px; }
.ann-text { font-size: 14px; color: #1f2a37; white-space: pre-wrap; }
.ann-text.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.ann-num { color: var(--muted); }
.ann-body__row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 3px; }
.ann-more { border: 0; background: none; color: #2563eb; cursor: pointer; font-size: 12px; padding: 0; }
.ann-edit-btn { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px;
  padding: 0 2px; margin-left: auto; }
.ann-edit { display: none; margin-top: 4px; }
.ann-card.editing .ann-text,
.ann-card.editing .ann-more,
.ann-card.editing .ann-edit-btn { display: none; }
.ann-card.editing .ann-edit { display: block; }

/* (6) Статус + счётчик */
.ann-statusrow { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 0; margin: 4px 0; }
.ann-status__set { display: flex; align-items: center; gap: 6px; }
.ann-status__sel { font-size: 12px; border: 0; background: none; font-weight: 600; color: #24303c;
  cursor: pointer; }
.ann-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--stcolor, #999);
  flex: 0 0 auto; }
.ann-count { font-size: 12px; }

/* Два состояния: неактивное — превью+суть+статус+счётчик; активное — + чат/ввод/правка/удаление */
.ann-feed, .ann-send, .ann-card__foot { display: none; }
.ann-edit-btn { display: none; }
.ann-card.active .ann-feed { display: flex; }
.ann-card.active .ann-send { display: flex; }
.ann-card.active .ann-card__foot { display: block; }
.ann-card.active:not(.editing) .ann-edit-btn { display: inline; }

/* (7) Единая лента: сообщения + смены статуса */
.ann-feed { margin: 6px 0; flex-direction: column; gap: 6px; }
.ann-day { text-align: center; font-size: 11px; color: var(--muted); margin: 4px 0 2px; }
.ann-sys { text-align: center; font-size: 12px; color: var(--muted); }
.ann-status-name { color: var(--stcolor, inherit); font-weight: 600; }
.ann-msg { max-width: 85%; }
.ann-msg.other { align-self: flex-start; }
.ann-msg.own { align-self: flex-end; text-align: right; }
.ann-msg__meta { font-size: 11px; color: #24303c; margin-bottom: 1px; }
.ann-msg__bubble { display: inline-block; text-align: left; background: #f1f3f5; border-radius: 10px;
  padding: 5px 9px; font-size: 13px; white-space: pre-wrap; }
.ann-msg.own .ann-msg__bubble { background: #dbeafe; }

/* (8) Ввод (виден только в активном — display управляется состоянием карточки) */
.ann-send { gap: 6px; align-items: flex-start; margin-top: 4px; }
.ann-send textarea { flex: 1; }
.ann-card__foot { margin-top: 8px; text-align: right; }

/* --- tabs (экран заказа: 5 плоских вкладок) --- */
.tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 18px; flex-wrap: wrap; }
.tab { padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; }
/* тулбар контента вкладки: действия/фильтры одной строкой над контентом */
.ctool { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.ctool-sp { flex: 1; }
.ctool .btn { padding: 5px 11px; font-size: 13px; }
.btn--ic { padding: 5px 9px; font-size: 15px; line-height: 1; }
/* сегмент-переключатель субвкладок («… / Выгрузки») в тулбаре контента */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.seg > a, .seg > span { padding: 5px 12px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.seg > a { text-decoration: none; }
.seg > a:hover { background: var(--empty); text-decoration: none; }
.seg > .on { background: var(--accent); color: #fff; font-weight: 600; }
.seg > .is-disabled { opacity: .5; }
.seg > * + * { border-left: 1px solid var(--line); }
.tab:hover { text-decoration: none; color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.subtabs { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.subtab { font-size: 13px; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--line); color: var(--muted); }
.subtab:hover { text-decoration: none; }
.subtab.on { background: #e8f0f8; color: var(--accent); border-color: #c4d8ec; }

/* --- cards (Сводка) --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.card .l { color: var(--muted); margin-bottom: 6px; }
.card .v { font-size: 24px; font-weight: 500; }
.card-foot { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* --- info panels --- */
.panels { display: flex; gap: 12px; flex-wrap: wrap; }
.info-panel { flex: 1; min-width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.info-panel__h { font-weight: 600; margin-bottom: 8px; }
table.kv { width: 100%; border-collapse: collapse; }
table.kv td { padding: 4px 0; }
table.kv td.r { text-align: right; }

/* --- compose (Проект: блок «Состав») --- */
.compose { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.compose__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #eef1f4; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.compose__sel { display: flex; align-items: center; gap: 6px; margin: 0; }
.compose__sel select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; max-width: 340px; }
.compose__rev { margin-left: auto; font-size: 12px; }
.grid--flush { border: 0; border-radius: 0; min-width: 100%; }

/* --- messages --- */
.messages { list-style: none; padding: 0; margin: 0 0 14px; }
.msg { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; }
.msg--success { background: var(--done); box-shadow: inset 3px 0 0 var(--done-line); }
.msg--error { background: #f7dcdc; box-shadow: inset 3px 0 0 #c75050; }
.msg--info, .msg--warning { background: var(--progress); box-shadow: inset 3px 0 0 var(--progress-line); }

/* --- импорт спецификации --- */
.upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.preview-block { border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; }
.preview-block ul { margin: 6px 0 0; padding-left: 20px; }
.preview-block--err { background: #f7dcdc; box-shadow: inset 3px 0 0 #c75050; }
.preview-block--warn { background: var(--progress); box-shadow: inset 3px 0 0 var(--progress-line); }

/* --- комплектование / назначение --- */
.mat-layout { display: flex; gap: 16px; align-items: flex-start; }
.mat-main { flex: 1; min-width: 0; }
.side-panel { width: 360px; flex-shrink: 0; }
.side-panel:empty { display: none; }
.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); position: sticky; top: 12px; }
.panel__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
.panel__close { background: none; border: 0; cursor: pointer; font-size: 16px; color: var(--muted); }
.panel__body { padding: 14px; }
.row-empty td { background: #fdf1f1; }
.row-partial td { background: var(--progress); }
.mrow-click { cursor: pointer; }
.assign label { display: block; margin-bottom: 12px; }
.assign label.inline { display: inline-block; }
.assign input, .assign select { display: block; width: 100%; padding: 6px 8px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 5px; }
.assign .flex label { flex: 1; margin-bottom: 0; }
.assign .src-switch { display: flex; gap: 16px; margin-bottom: 14px; }
.assign .src-switch label { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.assign .src-switch input { display: inline; width: auto; margin: 0; }
.grid .grp td { background: #eef1f4; }

/* --- Приход на склад --- */
.intake fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 0 0 16px; background: var(--panel); }
.intake legend { padding: 0 8px; font-weight: 600; color: var(--muted); }
/* Подгруппы полей партии (Материал/Сертификат/Прочее) + пропорциональная ширина полей:
   узкое (число/код) / среднее (номер) / широкое (файл/поставщик). flex-wrap — перенос
   в объявленном порядке, мелкие поля не растягиваются. */
.intake-group { margin: 0 0 14px; }
.intake-group:last-child { margin: 0; }
.intake-group h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.intake-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.intake-row label { display: block; font-size: 13px; flex: 0 0 auto; }
.intake-row label.f-sm { width: 120px; }
.intake-row label.f-md { width: 210px; }
.intake-row label.f-lg { width: 320px; }
.intake input[type=text], .intake input[type=number], .intake input:not([type]), .intake input[type=file] {
  display: block; width: 100%; padding: 6px 8px; margin-top: 4px; border: 1px solid var(--line); border-radius: 5px; }
.intake-sheets .grid input { margin: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; }
.intake-sheets .grid tfoot td { border-top: 2px solid var(--line); }

/* --- Регистр остатков: дерево лист→отрезы --- */
.stock-tree tfoot td { border-top: 2px solid var(--line); }
.st-tog { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 11px;
  width: 16px; padding: 0; margin-right: 2px; }
.st-tog--off { cursor: default; opacity: .5; }
.tpl-acc { margin: 4px 0; }
.tpl-acc > summary { cursor: pointer; padding: 3px 0; font-size: 13px; }
.tpl-acc > summary:hover { color: var(--accent); }
.stock-tree tr.st-row-click { cursor: pointer; }
.stock-tree tr.st-row-click:hover td { background: var(--row-hover, #f5f7fa); }
.st-tog--leaf { display: inline-block; width: 16px; text-align: center; color: var(--muted); }
.stock-tree tr.st-dim td { opacity: .45; }

/* --- вкладка «Проект»: единое дерево позиция→узел --- */
.tree-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
table.tree { border-collapse: collapse; min-width: 720px; width: 100%; }
.tree th, .tree td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tree thead .col-row th { background: #eef1f4; font-weight: 600; font-size: 13px; }
.tree thead .grp-row th { background: #e3e9f0; text-align: center; font-weight: 700; }
.tree thead .col-row th.gstart, .tree td.gstart, .tree thead .grp-row th.gstart { border-left: 2px solid var(--line); }
.grp-toggle { cursor: pointer; user-select: none; white-space: nowrap; }
.grp-toggle:hover { filter: brightness(.96); }
.tree .r { text-align: right; }
/* сворачивание группы колонок: показываем detail ИЛИ сводку */
.tree .g-sum { display: none; }
.tree.doc-collapsed .doc-detail { display: none; }
.tree.doc-collapsed .doc-sum { display: table-cell; }
.tree.mfg-collapsed .mfg-detail { display: none; }
.tree.mfg-collapsed .mfg-sum { display: table-cell; }
.tree .dlink { white-space: nowrap; }
.tree .none { color: var(--muted); }
/* бейдж прогресса операций */
.prog { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.prog.p-done { background: var(--done); }
.prog.p-mid { background: var(--progress); }
.prog.p-none { background: var(--empty); color: var(--muted); }
.prog.p-na { color: var(--muted); }

.fn { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* drag-n-drop загрузка чертежей: оверлей на всю вкладку «Проект» */
#droplayer { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center;
  background: rgba(29, 60, 90, .55); }
#droplayer.on { display: flex; }
.dropcard { border: 3px dashed #cfe0f2; border-radius: 14px; padding: 44px 60px; color: #fff; text-align: center;
  background: rgba(29, 60, 90, .35); font-size: 18px; font-weight: 600; }
.dropcard small { display: block; margin-top: 8px; font-weight: 400; color: #dce6f1; font-size: 13px; }

/* inline-панель сверки привязок */
.reconcile-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 14px 16px; margin: 14px 0; }
.reconcile-card .rc-close { cursor: pointer; color: var(--muted); }
.dwg-bucket { margin: 10px 0; }
.dwg-bucket ul { list-style: none; margin: 6px 0 0; padding: 0; }
.dwg-bucket li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 0; border-top: 1px dashed var(--line); }
.btn.btn-link { background: transparent; color: var(--accent); border: 0; padding: 0 4px; cursor: pointer; }
.btn.btn-link:hover { text-decoration: underline; }

/* издания комплекта: чип в дереве + панель истории/выпуска */
.rev-chip { cursor: pointer; margin-right: 4px; }
.rev-live { margin: 10px 0; }
.rev-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 8px; vertical-align: baseline; }
.rev-issue { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.rev-issue input[type=text] { flex: 1 1 260px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }
/* срез-аккордеон: издание либо живой срез, раскрытие — состав с маркером дельты */
.rev-acc { border-top: 1px dashed var(--line); padding: 6px 0; }
.rev-acc > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rev-acc > summary::-webkit-details-marker { color: var(--muted); }
.rev-acc--live { border-top: 0; }
.rev-acc.rev-revoked > summary { opacity: .55; text-decoration: line-through; }
.rev-acc__acts { padding: 4px 0 2px 18px; }
/* Колонки прижаты к началу строки: обозначение → версия → статус → наименование.
   Наименование последнее и тянется — иначе на широком экране версия и статус уезжали
   к правому краю и терялись из виду. */
.rev-items { border-collapse: collapse; width: 100%; margin: 6px 0 4px 18px; font-size: 13px; }
.rev-items td { padding: 3px 12px 3px 0; vertical-align: middle; white-space: nowrap; }
.rev-items tr.ri-gone td { opacity: .6; text-decoration: line-through; }
.rev-items .ri-delta { width: 18px; padding-right: 4px; text-align: center; }
.rev-items .ri-label { width: 1%; color: var(--muted); }
.rev-items .ri-ver { width: 1%; }
.rev-items .ri-st { width: 1%; }
.rev-items .ri-name { width: auto; white-space: normal; }
.delta { display: inline-block; width: 15px; font-weight: 700; text-align: center; }
.delta.d-add { color: #166534; }
.delta.d-chg { color: #92400e; }
.delta.d-st { color: #3730a3; }
.delta.d-rm { color: #991b1b; }
.delta.d-same { color: #c3c9d0; }
/* экран дифа изданий */
.rev-pick { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; }
.rev-pick select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.rev-pick .rev-all { color: var(--muted); font-size: 13px; }
.rev-sum { margin: 0 0 12px; }
.tree.rev-diff td { font-weight: 400; }
.rev-row.rev-removed td { opacity: .7; }
.chip.rev-kind-added { background: #e8f6ec; color: #166534; }
.chip.rev-kind-changed { background: #fef3c7; color: #92400e; }
.chip.rev-kind-removed { background: #fde8e8; color: #991b1b; }
.chip.rev-kind-status { background: #eef2ff; color: #3730a3; }
.chip.rev-kind-same { background: #f3f4f6; color: var(--muted); }
/* содержание изменения: замечания ДО, закрытые между срезами */
.tree.rev-diff tr.rev-notes-row > td { border-bottom: 1px solid var(--line); padding-top: 0; }
.rev-notes { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.rev-notes li { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
/* пара превью: слева место с пометкой, справа оно же в версии правого среза */
.rev-note-prevs { flex: 0 0 auto; display: flex; gap: 6px; align-items: flex-start; }
/* превью сразу крупные: на фрагменте должны читаться размеры, ради этого он и показан */
.rev-note-prev { flex: 0 0 auto; display: block; width: 340px; border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; background: #fff; }
.rev-note-prev img { display: block; width: 100%; height: auto; }
.rev-note-cap { display: block; padding: 2px 5px; font-size: 11px; line-height: 1.4;
  color: var(--muted); border-top: 1px solid var(--line); background: #fafafa; }
.rev-note-warn { color: #92400e; }
.rev-note-nopair { flex: 0 0 auto; width: 340px; padding: 14px 6px; font-size: 12px; color: var(--muted);
  text-align: center; border: 1px dashed var(--line); border-radius: 6px; }
.rev-note-noprev { display: block; padding: 10px 6px; font-size: 12px; color: var(--muted); text-align: center; }
.rev-note-body { flex: 1 1 auto; min-width: 0; }
/* задел: что по узлу уже сделано в производстве (показ, не блокировка) */
.chip.fp-material { background: #eef2ff; color: #3730a3; }
.chip.fp-partial { background: #fef3c7; color: #92400e; }
.chip.fp-done { background: #e8f6ec; color: #166534; }
.chip.fp-alert { box-shadow: inset 0 0 0 1px #c75050; }

/* расположение экземпляров на объекте: ячейка-сводка в дереве + панель правки */
.tree td.loc-cell { font-weight: 400; }
.loc-edit { cursor: pointer; border-bottom: 1px dashed var(--line); }
.loc-edit:hover { border-bottom-color: var(--accent); }
.loc-table { border-collapse: collapse; margin: 4px 0 12px; }
.loc-table th, .loc-table td { padding: 5px 10px 5px 0; text-align: left; font-weight: 400; }
.loc-table th { font-size: 13px; color: var(--muted); }
.loc-table input { width: 140px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }

/* --- полноэкранный просмотрщик чертежа (этап 5) --- */
body.viewer-page { margin: 0; height: 100vh; display: flex; flex-direction: column; background: #eaedf1; overflow: hidden; }
.viewer-page .vbar { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; background: #1a2330; color: #dce6f1; flex: 0 0 auto; overflow-x: auto; }
.viewer-page .vname { font-weight: 600; color: #fff; white-space: nowrap; }
.viewer-page .vbar .muted { color: #8da2b8; white-space: nowrap; }
.viewer-page .spacer { flex: 1; }
.viewer-page .vselect { background: #11202e; color: #dce6f1; border: 1px solid #3f5d79; border-radius: 5px; padding: 3px 6px; }
.viewer-page .vpill { border: 1px solid #3f5d79; border-radius: 12px; padding: 2px 10px; font-size: 12px; color: #dce6f1; white-space: nowrap; }
.viewer-page .vpill.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.viewer-page .vpill:hover { text-decoration: none; }
.viewer-page .vtool { border: 1px solid #3f5d79; border-radius: 5px; padding: 3px 8px; cursor: pointer; background: transparent; color: #dce6f1; white-space: nowrap; }
.viewer-page .vclose { font-size: 18px; color: #dce6f1; border: 1px solid #3f5d79; border-radius: 5px; padding: 1px 9px; }
.viewer-page .vclose:hover { text-decoration: none; background: #25344a; }
.viewer-page .vbody { flex: 1; display: flex; min-height: 0; }
.viewer-page .vcanvas { flex: 1; min-height: 0; background: #eaedf1; }
.viewer-page .vcanvas--empty { display: flex; gap: 12px; align-items: center; justify-content: center; color: #5b6b7d; }
/* тумблер панели замечаний (гамбургер): активная кнопка. In-tab (.dwg-stage) — мгновенно. */
.dwg-stage.ann-hidden #ann-panel,
.dwg-stage.ann-hidden .ann-panel-wrap { display: none; }
.viewer-page .vtool.on { background: #25344a; color: #fff; }
/* Динамический отчёт — ОВЕРЛЕЙ поверх правого края Холста (не flex-сосед), чтобы тумблер не
   ресайзил Холст и не двигал чертёж. Выезжает transform'ом с той же .15s ease, что и кнопка ☰. */
.viewer-page .vpanel { position: fixed; top: 0; right: 0; height: 100vh; width: 320px; z-index: 20; background: #f4f6f8; border-left: 1px solid var(--line); overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; color: #24303c; box-shadow: -2px 0 10px rgba(0, 0, 0, .08); transform: translateX(0); transition: transform .15s ease; }
.viewer-page.ann-hidden .vpanel { transform: translateX(100%); }
/* ДО: шапка (чертёж + действия + режимы группировки) и аккордеон версий */
.do-head { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.do-title { font-weight: 700; color: #24303c; }
.do-sub { font-size: 12px; color: var(--muted); margin: 2px 0 6px; word-break: break-word; }
.do-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.do-select { font-size: 12px; max-width: 180px; }
.do-addver { cursor: pointer; font-size: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px; background: #fff; }
.do-addver input { display: none; }
/* режимы группировки замечаний + тумблер графических пометок */
.do-modes { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* фильтр по статусам — мульти-выбор чекбоксами (дропдаун) */
.do-filter { position: relative; }
.do-filter__btn { font-size: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; background: #fff; color: #24303c; cursor: pointer; }
.do-filter__btn.act { border-color: #f97316; color: #b45309; font-weight: 600; }
.do-filter__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); padding: 6px; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.do-filter__menu[hidden] { display: none; }
.do-filter__opt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #24303c; padding: 3px 4px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.do-filter__opt:hover { background: #eef1f4; }
.do-filter__opt input { cursor: pointer; }
.do-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.do-mode { border: 0; background: transparent; font-size: 12px; padding: 3px 11px; cursor: pointer; color: var(--muted); }
.do-mode + .do-mode { border-left: 1px solid var(--line); }
.do-mode.on { background: #25344a; color: #fff; }
.do-ovl { margin-left: auto; border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 30px; height: 24px; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; }
.do-ovl.on { background: #25344a; color: #fff; border-color: #25344a; }
/* два среза тела ДО: по версии / по статусу (переключение классом .do--bystatus) */
.do-body--status { display: none; }
.do--bystatus .do-body--version { display: none; }
.do--bystatus .do-body--status { display: block; }
/* строка версии: [+/-] [номер] [кружок статуса] [скачать] [дата] */
.do-ver { border-top: 1px solid var(--line); }
.do-ver.open { background: #fff; }
.do-ver-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; flex-wrap: wrap; }
.do-toggle { flex: none; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; font-size: 14px; line-height: 1; color: #24303c; padding: 0; }
.do-toggle:hover { background: #eef1f4; }
.do-vno { font-weight: 600; color: #24303c; text-decoration: none; }
.do-vno--link:hover { text-decoration: underline; }
.do-dls { margin-left: auto; display: inline-flex; gap: 6px; }
.do-dl { font-size: 11px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.do-dl:hover { color: #24303c; }
.do-date { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.do-ver-body { display: none; }
.do-ver.open > .do-ver-body { display: block; }
.do-note { padding: 8px 10px; }
.do .ann-panel { width: auto; max-height: none; border: 0; border-radius: 0; padding: 8px 10px; }
/* срез «по статусу»: группы статусов, read-only карточки */
.do-stgroup { border-top: 1px solid var(--line); }
.do-sthead { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px 4px; font-size: 12px; font-weight: 700; color: #24303c; }
.do-stcount { font-weight: 400; }
.do-status .ann-list { margin: 4px 0 0; padding: 0 10px 6px; }
/* read-only превью — ссылка «открыть версию на Холсте» (без подчёркивания) */
.ann-prev { text-decoration: none; }
/* тумблер графических пометок: скрыть SVG-оверлей поверх Холста */
body.ann-shapes-hidden .ann-overlay { display: none; }
/* кастомный тултип (position:fixed — не режется overflow панели ДО); цель — [data-tip] */
.sok-tip { position: fixed; z-index: 80; background: #24303c; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 5px; pointer-events: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); white-space: nowrap; }
.sok-tip[hidden] { display: none; }
/* drag-n-drop новой версии: оверлей-подсказка на весь Холст */
.vdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(20, 30, 45, .35); pointer-events: none; }
.vdrop[hidden] { display: none; }
.vdrop__box { background: #fff; border: 2px dashed #2563eb; border-radius: 14px; padding: 22px 30px; text-align: center; color: #24303c; font-size: 15px; box-shadow: 0 8px 30px rgba(0, 0, 0, .2); }
.vdrop__hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.vdrop--err .vdrop__box { border-color: #dc2626; color: #b91c1c; }
/* Инструменты замечаний — плавающий гамбургер в левом нижнем углу */
.vtools-fab { position: fixed; left: 12px; bottom: 12px; z-index: 30; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.vfab-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #3f5d79; background: #1a2330; color: #dce6f1; font-size: 17px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.vfab-btn:hover { text-decoration: none; background: #25344a; }
.vfab-corner { position: fixed; z-index: 31; }
.vfab-corner.tl { top: 12px; left: 12px; }
/* тумблер ДО: при открытом ДО — слева от панели (ширина .vpanel 320 + зазор), при скрытом — к краю */
.vfab-corner.tr { top: 12px; right: 332px; transition: right .15s ease; }
.viewer-page.ann-hidden .vfab-corner.tr { right: 12px; }
.vtools-menu { display: none; flex-direction: column; gap: 6px; }
.vtools-fab.open .vtools-menu { display: flex; }
.vtools-menu .vtool { background: #1a2330; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
/* Кнопки входа в сравнение/наложение — под превью замечания. Видны только в активной карточке
   И только когда островок сравнения доступен (body.cmp-ready: Холст с ≥2 просматриваемыми
   версиями) — иначе (in-tab, одна версия) кнопки были бы инертны. */
.ann-cmp { display: none; gap: 6px; margin: 6px 0 2px; }
.cmp-ready .ann-card.active .ann-cmp { display: flex; }
.ann-cmp-btn { flex: 1; font-size: 11.5px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; background: #fff; color: #24303c; cursor: pointer; }
.ann-cmp-btn:hover { background: #eef1f4; border-color: #94a3b8; }
/* Оверлей сравнения версий — полный захват Холста (поверх ДО/инструментов) */
.cmp { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: #0f1622; }
.cmp-body { flex: 1; display: flex; min-height: 0; position: relative; }
.cmp-pane { flex: 1; position: relative; min-width: 0; background: #eaedf1; overflow: hidden; }
.cmp-divider { flex: none; width: 8px; background: #1a2330; cursor: col-resize; position: relative; z-index: 5; }
.cmp-divider::before { content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 4px; height: 40px; border-radius: 3px; background: #4b5f78; }
/* подписи версий на Холсте (база — статичная, цель — выпадашка) */
.cmp-vlabel { position: absolute; top: 10px; z-index: 6; background: rgba(15, 22, 34, .82); color: #dce6f1; font-size: 12px; padding: 3px 9px; border-radius: 12px; pointer-events: auto; }
.cmp-vlabel--base { left: 10px; }
.cmp-vlabel--target { right: 10px; }
.cmp-labels { position: absolute; top: 10px; left: 10px; z-index: 6; display: flex; gap: 8px; }
.cmp-labels .cmp-vlabel { position: static; }
.cmp-vsel { background: transparent; color: #dce6f1; border: 0; font-size: 12px; cursor: pointer; }
.cmp-vsel option { color: #24303c; }
/* окружность примагничивания (следует за курсором в ручном совмещении) */
.cmp-circle { position: absolute; z-index: 6; border: 2px dashed #f97316; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0 0 9999px rgba(15, 22, 34, .04); }
.cmp-circle[hidden] { display: none; }
.cmp-shapes { z-index: 4; }
/* нижняя панель управления */
.cmp-bar { flex: none; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px 14px; background: #1a2330; color: #dce6f1; border-top: 1px solid #2b3a4f; }
.cmp-bar__title { font-weight: 700; font-size: 13px; }
.cmp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.cmp-op { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.cmp-op input[type=range] { width: 130px; }
.cmp-close { margin-left: auto; background: #25344a; color: #dce6f1; border: 1px solid #3f5d79; border-radius: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.cmp-close:hover { background: #31445f; }
/* строки позиций (аккордеон) */
.tree tbody.pos-block > tr.pos { cursor: pointer; background: #fbfcfd; }
.tree tbody.pos-block > tr.pos:hover { background: #f1f5f9; }
.tree tbody.pos-block > tr.pos > td { font-weight: 600; }
/* строки узлов: скрыты, пока позиция не раскрыта */
.tree tbody.pos-block tr.node { display: none; background: #fff; }
.tree tbody.pos-block.open tr.node { display: table-row; }
.tree tbody.pos-block tr.node > td:first-child { padding-left: 28px; color: var(--muted); }
.tree .tw { display: inline-block; width: 14px; color: var(--muted); }
.tree .kind-ico { margin: 0 6px 0 2px; }
.tree .nm-mark { color: #b25a00; font-weight: 600; }
.tree-legend { margin-top: 12px; font-size: 13px; }

/* --- теневая позиция: чертежи распознаны до Шаблона Заказа (нет настоящей позиции) --- */
.tree tbody.pos-block > tr.pos.ghost { background: var(--ghost); }
.tree tbody.pos-block > tr.pos.ghost:hover { background: #f7efdd; }
.tree tbody.pos-block > tr.pos.ghost > td { box-shadow: inset 3px 0 0 var(--ghost-line); }
.tree tbody.pos-block > tr.pos.ghost .nm-mark { color: var(--ghost-ink); font-weight: 500; font-style: italic; }
.tree tbody.pos-block tr.node.stage-row { background: #faf7f0; }
.tree tbody.pos-block tr.node.stage-row > td { font-weight: 600; color: var(--ghost-ink); }
.tree tbody.pos-block tr.node.dwg-row > td:first-child { padding-left: 46px; }
.ghost-hint { color: #9a8542; font-size: 12px; font-weight: 400; font-style: italic; }
/* Кнопка мягкого удаления строки — видна по наведению на строку. */
.row-del { border: 0; background: transparent; color: #b91c1c; cursor: pointer;
  opacity: 0; font-size: 12px; line-height: 1; padding: 0 4px; margin-left: 6px; }
.tree tr:hover .row-del { opacity: 0.55; }
.row-del:hover { opacity: 1; }
.row-del:disabled { cursor: default; opacity: 0.3; }
/* тултип-поповер версий чертежа (ВО/РД, теневая и полная структуры). Поповер —
   position:fixed, показ/позиция через project_tree.js (иначе обрезается .tree-wrap). */
.has-vtip { position: relative; }
.has-vtip .vtip {
  display: none; position: fixed; z-index: 40; padding: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
/* поповер версий — столбцом, только кружки статусов (без номеров) */
.has-vtip .vtip.on { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.vtip-head { display: inline-block; line-height: 0; text-decoration: none; }
.vtip-dot { display: block; line-height: 0; text-decoration: none; border-radius: 50%; }
.vtip-dot.cur { box-shadow: 0 0 0 2px var(--ghost-line); }
/* кружок статуса версии (документооборот) — цвет фона задаётся инлайн из review_badge */
.vbadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--vc, #999);
  color: #fff; font-weight: 700; font-size: 10px; line-height: 1; vertical-align: middle;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.vbadge--empty { background: #fff; color: var(--muted); border: 1px dashed var(--line); text-shadow: none; }
.vstatus { display: inline-flex; align-items: center; gap: 4px; }
/* кружок статуса версии как кнопка: клик → выпадающий список выбора */
.vbadge-btn { border: 0; padding: 0; background: none; cursor: pointer; line-height: 0; border-radius: 50%; }
.vbadge-btn:hover .vbadge { box-shadow: 0 0 0 2px rgba(0, 0, 0, .18); }
/* выпадающий список выбора статуса (JS портирует в body, position:fixed — панель ДО обрезала бы) */
.vstatus-menu {
  position: fixed; z-index: 60; min-width: 210px; padding: 5px; margin: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; gap: 1px;
}
.vstatus-menu[hidden] { display: none; }
.vstatus-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: 5px 8px; border-radius: 6px; font-size: 13px; color: #24303c;
}
.vstatus-opt:hover { background: #eef2f6; }
.vstatus-opt.on { background: #e6eff7; font-weight: 600; }
.vstatus-opt .vbadge { width: 20px; height: 20px; font-size: 9px; flex: 0 0 auto; }
.vstatus-opt__name { line-height: 1.2; }
.vstatus-opt--del { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.dwg-versions .vno { font-weight: 600; margin-right: 6px; }
.dwg-versions .vfiles { margin-left: 8px; color: var(--muted); }
.dwg-versions .vfiles a { margin: 0 4px; }
/* кнопка «＋ версия» в vbar просмотрщика */
.viewer-page .vadd { cursor: pointer; }
.viewer-page .vadd input { display: none; }
/* бакет «Не распознано» (номер позиции из имени не извлёкся) */
.tree tbody.pos-block > tr.pos.bad { background: #fdf1f1; }
.tree tbody.pos-block > tr.pos.bad:hover { background: #fbe7e7; }
.tree tbody.pos-block > tr.pos.bad > td { box-shadow: inset 3px 0 0 #c75050; }
.tree tbody.pos-block > tr.pos.bad .nm-mark { color: #a33; font-weight: 600; }

/* --- login --- */
.login-card {
  max-width: 320px;
  margin: 8vh auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px;
}
.login-card h1 { font-size: 18px; }
.login-card label { display: block; margin-bottom: 12px; color: var(--muted); }
.login-card input { width: 100%; padding: 7px 9px; margin-top: 4px; border: 1px solid var(--line); border-radius: 5px; }
.login-card button {
  width: 100%;
  padding: 8px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 5px;
  font-size: 14px;
}
.err { color: #b00020; }