/* order-card.css — область карточки наряда (openOrderCard: шапка, факты, маршрут,
   вкладки, производство, переписка, финансы, история) и окна наряда (переделка,
   зарплата по переделке, версии файла, остановка часов). Значения — из theme.css,
   своих цветовых литералов нет.

   Контракты, которые держит этот файл:
   - вкладки «Обзор / Производство / Переписка / Фото и файлы / Финансы / Сценарий /
     История» и их DOM
     ([data-workspace], [role=tab][data-tab], [role=tabpanel][data-panel]);
   - семь колонок .prod-row и .ledger-row прокручиваются внутри .production, а не
     прячутся;
   - рабочая панель карточки при 1440 px начинается выше 420 px;
   - цвет состояния всегда рядом с подписью, текст — только парами с контрастом
     ≥ 4,5 (--stage-working/-pending/-ready и --held на своих -soft). */

/* ------------------------------------------------------------- раскладка --- */

.order-card { min-width: 0; }
.order-card > .back {
  margin: 0 0 var(--sp-2); padding-inline: 0; border-color: transparent;
  background: none; box-shadow: none; color: var(--muted);
}
.order-card > .back:hover:not(:disabled) { background: none; color: var(--ink); }

/* Колонка «кто и что» — карточка с рамкой 1 px: шапка, плашка срока, кнопки и
   факты. На узком экране она стоит над рабочей областью в том же порядке DOM. */
.order-side {
  min-width: 0; margin: 0 0 var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--card-border); border-radius: var(--radius-panel); background: var(--surface);
}

/* Раскладка макета: «← Все наряды», согласование врачом во всю ширину, ниже
   рабочая колонка (маршрут, вкладки) и колонка «Кто и что» 300 px, которая
   прилипает к верху окна. До 1100 px колонка «Кто и что» встаёт над рабочей. */
.order-card { display: flex; flex-direction: column; gap: 14px; }
.order-card > .back { align-self: flex-start; margin: 0; }
.order-layout { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.order-column { flex: 1 1 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; width: 100%; }
.order-layout > .order-aside { order: -1; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.order-aside > .order-side { margin: 0; }
.order-return-slot:empty { display: none; }
@media (min-width: 68.8125rem) {
  .order-layout { flex-direction: row; align-items: flex-start; }
  .order-layout > .order-aside { order: 0; flex: none; width: 300px; position: sticky; top: var(--sp-4); }
}

/* «QR наряда» (макет «Карточка наряда»): рамка 1 px, радиус 12, QR 120 × 120 в
   рамке поля, номер моноширинным, «Сейчас: …», подсказка поста и две кнопки.
   Сам QR — только чёрным на белом (SVG сервера), без скруглений модулей. */
.order-qr { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--surface); }
.order-qr-head { display: flex; gap: 14px; align-items: center; }
.order-qr-code { width: 120px; height: 120px; flex: none; box-sizing: border-box; border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; background: var(--gray-0); }
.order-qr-code > svg { width: 118px; height: 118px; }
.order-qr-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.order-qr-title { font-size: var(--fs-14); font-weight: var(--fw-600); }
.order-qr-no { font: var(--fw-600) var(--fs-13) var(--mono); }
.order-qr-now { font-size: var(--fs-12); line-height: 1.4; color: var(--ink-2); }
.order-qr-now > b { font-weight: var(--fw-600); }
.order-qr-text { font-size: var(--fs-12); line-height: 1.45; color: var(--ink-2); }
.order-qr-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.order-qr-actions > .order-qr-label {
  height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--gray-900); color: var(--gray-0); font-weight: var(--fw-500);
}
.order-qr-actions > .order-qr-post {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--gray-250); border-radius: 8px; background: var(--gray-0); color: var(--ink); text-decoration: none; font-weight: var(--fw-500);
}

/* Согласование врачом: тон состояния, пояснение, кнопки правки и вида клиники,
   «было — стало» таблицей. */
.order-approval {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--approval-warn-line); border-radius: var(--radius-panel); background: var(--warn-soft);
}
.order-approval.tone-ok { border-color: var(--approval-ok-line); background: var(--ok-soft); }
.order-approval.tone-held { border-color: var(--held-line); background: var(--held-soft); }
.order-approval-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.order-approval-head > strong { font-size: var(--fs-14); font-weight: var(--fw-600); }
.order-approval.tone-ok .order-approval-head { color: var(--ok); }
.order-approval.tone-warn .order-approval-head { color: var(--warn); }
.order-approval.tone-held .order-approval-head { color: var(--held); }
.order-approval-detail { flex: 1 1 280px; min-width: 0; color: var(--ink-2); }
.order-approval-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.order-approval-actions > button { height: 32px; padding: 0 12px; background: var(--surface); white-space: nowrap; }
.order-approval-actions > .order-approval-edit { font-weight: var(--fw-500); color: var(--ink); }
.order-approval-actions > .order-approval-clinic { border-style: dashed; border-color: var(--decor); color: var(--ink-2); font-weight: var(--fw-400); }
.approval-changes-wrap { overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); }
.approval-changes { display: grid; grid-template-columns: 120px minmax(160px, 1fr) minmax(160px, 1fr); min-width: 460px; }
.approval-th { padding: 7px 12px; background: var(--fill-soft); font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--muted); }
.approval-td { padding: 7px 12px; border-top: 1px solid var(--row-rule); white-space: pre-line; color: var(--ink); }
.approval-td.approval-field { font-weight: var(--fw-500); }
.approval-td.approval-before { color: var(--muted); text-decoration: line-through; }
.approval-td.approval-after { background: var(--warn-soft); }

.order-card [data-panel="overview"]:not([hidden]) { display: flex; flex-direction: column; gap: 14px; }
.order-card [data-panel="overview"] > * { margin: 0; }

/* Маршрут — подпись и лента шагов. */
.order-route-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.order-route-label { font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--muted); }
.order-route-box .order-route { margin: 0; padding-bottom: 4px; }

/* ---------------------------------------------------- шапка: кто и что --- */

.order-side .order-head { display: grid; gap: var(--sp-3); margin: 0; }
.order-side .order-title {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-1-5) var(--sp-2); min-width: 0;
}
.order-meta {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 var(--sp-1-5); min-width: 0; font-size: var(--fs-12); line-height: 1.4; color: var(--muted);
}
/* Номер — моноширинный, без капса: его диктуют по телефону и ищут глазами. */
.order-head .order-meta .eyebrow {
  display: inline; flex-basis: auto; margin: 0; letter-spacing: 0; text-transform: none;
  font: var(--fw-600) var(--fs-12) / 1.4 var(--mono); color: var(--muted);
}
.order-side .order-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
.order-side .order-head h1 {
  flex: 1 1 100%; min-width: 0; margin: 0 0 var(--sp-1); overflow-wrap: anywhere;
  font-size: var(--fs-22); line-height: 1.2; font-weight: var(--fw-600); letter-spacing: -.02em;
}
.order-side .order-title > .status { flex: none; }
.order-summary {
  flex-basis: 100%; margin: var(--sp-1) 0 0; overflow-wrap: anywhere;
  font-size: var(--fs-13); line-height: 1.45; color: var(--ink);
}

/* Плашка срока: одна строка сути моноширинным и подстрока. Тон — по состоянию
   срока с сервера (due_state), подпись всегда словами. */
.order-due-plate {
  flex-basis: 100%; display: grid; gap: 2px; justify-items: start; min-width: 0;
  margin-top: var(--sp-1); padding: var(--sp-2-5) var(--sp-3);
  border: 1px solid var(--card-border); border-radius: var(--radius-card);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.order-due-plate:hover { border-color: var(--rule-strong); }
.order-due-plate:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.order-due-title { font: var(--fw-600) var(--fs-13) / 1.4 var(--mono); overflow-wrap: anywhere; }
.order-due-sub { font-size: var(--fs-12); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.order-due-plate.due-none { border-color: transparent; background: var(--fill-soft); }
.order-due-plate.due-none .order-due-title { color: var(--ink-2); }
.order-due-plate.due-soon { border-color: transparent; background: var(--warn-soft); }
.order-due-plate.due-soon .order-due-title { color: var(--warn); }
.order-due-plate.due-overdue { border-color: transparent; background: var(--danger-soft); }
.order-due-plate.due-overdue .order-due-title { color: var(--danger); }
.order-due-plate.due-held { border-color: transparent; background: var(--held-soft); }
.order-due-plate.due-held .order-due-title { color: var(--held); }
.order-due-plate.due-done, .order-due-plate.due-closed { border-color: transparent; background: var(--teal-soft); }
.order-due-plate.due-done .order-due-title, .order-due-plate.due-closed .order-due-title { color: var(--teal); }

/* Кнопки шапки тянутся по ширине колонки; «⋯» — квадратная кнопка меню. */
.order-side .head-actions {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;
  gap: var(--sp-2); margin: 0; padding: 0; border: 0;
}
.order-side .order-head .head-actions:has(.order-actions[open]) { flex-basis: auto; }
.order-side .head-actions > button { flex: 1 1 auto; min-width: 0; height: var(--control-h-lg); padding-inline: var(--sp-2-5); }
.order-side .head-actions > .order-actions { flex: 0 0 auto; }
.order-side .order-actions > summary.order-actions-toggle {
  display: grid; place-items: center; width: var(--control-h-lg); min-height: var(--control-h-lg);
  height: var(--control-h-lg); padding: 0; list-style: none; font-size: var(--fs-17); line-height: 1; color: var(--ink);
}
.order-side .order-actions > summary::-webkit-details-marker { display: none; }
.order-side .order-actions[open] > summary { border-color: var(--ink); }
.order-actions-dots { display: block; transform: translateY(-2px); }
/* Меню раскрывается поверх, под кнопками, по правому краю колонки. */
.order-side .order-action-items {
  position: absolute; z-index: 20; right: 0; top: calc(100% + 6px);
  display: grid; gap: 2px; width: min(17rem, 100%); padding: var(--sp-1-5);
  border: 1px solid var(--button-border); border-radius: var(--radius-panel);
  background: var(--surface); box-shadow: var(--shadow-dialog);
}
.order-side .order-action-items > button {
  justify-content: flex-start; width: 100%; height: auto; min-height: var(--control-h);
  border-color: transparent; box-shadow: none; text-align: left; white-space: normal;
}
.order-side .order-action-items > button:hover:not(:disabled) { background: var(--fill-soft); }
.order-side .order-action-items > select.print-pick { width: 100%; min-width: 0; margin-block: 2px; }
.order-side .order-action-items > .hint { padding: var(--sp-1-5) var(--sp-2-5); font-size: var(--fs-12); line-height: 1.4; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Факты — строки «подпись · значение» под чертой; на узком экране несколько
   столбцов, в колонке сведений — один. */
.order-card .order-side .facts {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--sp-5); margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0; overflow: visible;
  border: 0; border-top: 1px solid var(--row-rule); border-radius: 0; background: none; box-shadow: none;
}
.order-card .order-side .fact {
  display: grid; grid-template-columns: 8.25rem minmax(0, 1fr); align-items: baseline;
  gap: var(--sp-3); min-height: 30px; padding: 5px 0; border: 0; background: none;
}
.order-card .order-side .fact span { margin: 0; font-size: var(--fs-12-5); line-height: 1.4; color: var(--muted); }
.order-card .order-side .fact b { font-size: var(--fs-13); font-weight: var(--fw-500); line-height: 1.4; }
.order-card .order-side .fact.mono > span { font-family: var(--font); }
.order-card .fact.money b, .order-card .fact-date b { font-family: var(--mono); font-weight: var(--fw-500); }
.order-card .order-side .fact.fact-date b {
  display: inline-flex; align-items: center; width: fit-content; height: 22px; padding: 0 7px;
  border-radius: var(--radius-sm); background: var(--chip-bg); color: var(--ink-2);
  font-size: var(--fs-12); line-height: 1; white-space: nowrap;
}
.order-card .order-side .fact-date.danger b { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------ маршрут по операциям --- */

/* Шаг маршрута — кнопка к строке операции. Полоса слева — состояние; текущий шаг
   обведён; подрядчик — фиолетовый тон, не назначенный этап — тон предупреждения. */
.order-route {
  list-style: none; margin: 0 0 var(--sp-3); padding: 0 0 2px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 1fr);
  gap: var(--sp-1-5); overflow-x: auto; scrollbar-width: thin;
}
.route-step {
  --route-bar: var(--stage-pending); --route-bg: var(--surface); --route-border: var(--card-border);
  --route-ink: var(--stage-pending); --route-who: var(--ink-2);
  display: flex; min-width: 0;
}
.route-completed { --route-bar: var(--stage-ready); --route-ink: var(--stage-ready); }
.route-in_work { --route-bar: var(--stage-working); --route-ink: var(--stage-working); }
.route-step.route-external { --route-bar: var(--violet); --route-bg: var(--violet-soft); --route-border: transparent; --route-who: var(--violet); }
.route-step.route-unassigned { --route-bar: var(--warn); --route-bg: var(--warn-soft); --route-border: transparent; --route-who: var(--warn); }
.route-button {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  width: 100%; min-width: 0; margin: 0; padding: var(--sp-2) var(--sp-2-5) var(--sp-2) calc(var(--sp-2-5) + 3px);
  overflow: hidden; border: 1px solid var(--route-border); border-radius: var(--radius-card);
  background: var(--route-bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.route-button::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--route-bar); }
.route-button:hover { border-color: var(--rule-strong); }
.route-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.route-step.is-current .route-button { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.route-name {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-13); font-weight: var(--fw-600); line-height: 1.35; color: var(--ink);
}
.route-seq { margin-right: var(--sp-1-5); font: var(--fw-600) var(--fs-11) var(--mono); color: var(--muted); }
.route-who, .route-state {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-12); line-height: 1.35;
}
.route-who { color: var(--route-who); }
.route-who.is-unassigned { font-weight: var(--fw-600); }
.route-state { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-500); color: var(--route-ink); }
.route-state::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.route-state.is-ready { color: var(--ok); }
.route-state.is-waiting { color: var(--muted); }
/* Статус операции и под ним положение в маршруте (ADR-0047): «ждёт: …», «готов к работе · с …». */
.order-card .prod-status { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.order-card .prod-when { font-size: var(--fs-11); line-height: 1.35; color: var(--muted); }
.order-card .prod-row .production-lock { font-size: var(--fs-11); color: var(--muted); }

/* ----------------------------------------------------------------- вкладки --- */

.order-card [data-workspace^="order:"] > .workspace-tabs { margin: 0 0 var(--sp-4); }
.order-card .workspace-panel > .note { margin: 0 0 var(--sp-3); }
.order-card .note .eyebrow { margin-bottom: var(--sp-1); }

/* Заголовки разделов панели — 14/600 без капса, как «Производство 4» на макете. */
.order-card .card-lines { margin-top: var(--sp-5); }
.order-card .workspace-panel > .card-lines:first-child { margin-top: 0; }
.order-card .card-lines > h2 {
  margin: 0 0 var(--sp-2-5); padding: 0 2px; letter-spacing: 0; text-transform: none;
  font-size: var(--fs-14); font-weight: var(--fw-600); color: var(--ink);
}

/* ------------------------------------------------- обзор: срок, работы --- */

/* Срок — блок «сейчас» по макету: надзаголовок тоном состояния, крупная строка,
   пояснение, кнопка справа; полоса прошедшего времени и «Простои» под чертой. */
.order-deadline-stack { display: flex; flex-direction: column; gap: 14px; }
.order-card .deadline {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; padding: 14px 16px;
  border: 1px solid var(--rule); border-radius: var(--radius-panel); background: var(--surface);
  --deadline-tone: var(--ok);
}
.order-card .deadline.is-soon { --deadline-tone: var(--warn); border-color: var(--approval-warn-line); background: var(--warn-soft); }
.order-card .deadline.idle { --deadline-tone: var(--ink-2); background: var(--fill-soft); }
.order-card .deadline.late { --deadline-tone: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
.order-card .deadline.held { --deadline-tone: var(--held); border-color: var(--held-line); background: var(--held-soft); }
.order-card .deadline.closed { --deadline-tone: var(--teal); border-color: var(--teal-line); background: var(--teal-soft); }
.order-card .deadline-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.order-card .deadline-main { flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.order-card .deadline-kicker {
  font-size: var(--fs-12); font-weight: var(--fw-600); letter-spacing: .05em; text-transform: uppercase; color: var(--deadline-tone);
}
.order-card .deadline-main strong { font-size: var(--fs-17); font-weight: var(--fw-600); color: var(--ink); }
.order-card .deadline-text { color: var(--ink-2); }
.order-card .deadline-head > button { height: 36px; padding: 0 14px; white-space: nowrap; }
.order-card .deadline-head > button.ghost { background: var(--surface); }
.order-card .deadline-bar { align-self: stretch; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface); }
.order-card .deadline-bar > span { display: block; height: 100%; background: var(--deadline-tone); }
.order-card .deadline-holds { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--rule-soft-ink); }
.order-card .deadline-holds-title { font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--muted); }
.order-card .deadline-hold { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-12-5); color: var(--ink-2); }
.order-card .deadline-hold > b { font-weight: var(--fw-600); color: var(--held); }

/* Перевозка: заголовок с двумя вызовами, поездки — строки на мягкой заливке. */
.order-card .trips {
  display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 16px;
  border: 1px solid var(--rule); border-radius: var(--radius-panel); background: var(--surface);
}
.order-card .trips-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.order-card .trips-head > h2 { flex: 1; margin: 0; font-size: var(--fs-14); font-weight: var(--fw-600); }
.order-card .trips-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.order-card .trips-acts > button { height: 32px; padding: 0 12px; }
.order-card .trip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px;
  border: 0; border-radius: var(--radius); background: var(--fill-soft);
}
.order-card .trip-way { font-weight: var(--fw-500); }
.order-card .trip-who { color: var(--ink-2); }
.order-card .trip-when { font-size: var(--fs-12-5); color: var(--ink-2); }
.order-card .trip-state {
  margin-left: auto; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--info-soft); color: var(--info); font-size: var(--fs-12); font-weight: var(--fw-500);
}
.order-card .trip-state.delivered { background: var(--ok-soft); color: var(--ok); }
.order-card .trip-state.cancelled { background: var(--chip-bg); color: var(--muted); }
.order-card .trip .trip-acts { flex-basis: 100%; justify-content: flex-end; gap: var(--sp-1-5); }

.order-card .work-card {
  margin-bottom: var(--sp-2); padding: var(--sp-4);
  border-color: var(--card-border); border-radius: var(--radius-card);
}
.order-card .work-card h3 { font-size: var(--fs-14); font-weight: var(--fw-600); line-height: 1.35; }
.order-card .work-card .subline { font-size: var(--fs-12-5); }
.order-card .line-amount { font: var(--fw-600) var(--fs-13) var(--mono); }
.order-card .price-note { margin-top: var(--sp-1); font-size: var(--fs-12); }
.order-card .card-formula {
  margin-top: var(--sp-3); padding: var(--sp-2-5) var(--sp-3);
  border-radius: var(--radius); background: var(--fill-soft);
}
.order-card .card-formula > .operations-title { margin: 0 0 var(--sp-1-5); }
/* Зуб — моноширинный номер на мягкой заливке своей роли; роль остаётся подписью. */
.order-card .tooth-chip {
  min-width: 0; height: 24px; gap: var(--sp-1-5); padding: 0 7px; border-radius: var(--radius-sm);
  font: var(--fw-600) var(--fs-12) var(--mono);
}
.order-card .tooth-chip small { font-family: var(--font); font-size: var(--fs-11); font-weight: var(--fw-500); opacity: 1; }
.order-card .tooth-chip.tooth-unit { background: var(--indigo-50); color: var(--tooth-unit); }
.order-card .tooth-chip.tooth-abutment { background: var(--violet-50); color: var(--tooth-abutment); }
.order-card .tooth-chip.tooth-pontic { background: var(--amber-50); color: var(--tooth-pontic); }

/* Работы на «Обзоре» по макету: строки работ, формула только для чтения,
   легенда ролей и комментарий к работе под чертой. */
.order-card .order-works {
  display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 14px 16px;
  border: 1px solid var(--rule); border-radius: var(--radius-panel); background: var(--surface);
}
.order-card .order-works > h2 { margin: 0; padding: 0; }
.order-work-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.order-work-name { font-weight: var(--fw-600); }
.order-work-qty { font-size: var(--fs-12); color: var(--muted); }
.order-work-where { font-size: var(--fs-12-5); color: var(--ink-2); }
.order-work-shade { margin-left: auto; font-size: var(--fs-12); color: var(--muted); }
.order-work-shade > b { color: var(--ink); }
.order-work-materials { margin: -6px 0 0; font-size: var(--fs-12); color: var(--muted); }
.card-formula-scroll { overflow-x: auto; padding: 4px 0; }
.order-card .card-formula-scroll > .card-formula {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content;
  margin: 0 auto; padding: 0; border-radius: 0; background: none;
}
.card-jaw-caption { font-size: var(--fs-11); letter-spacing: .04em; color: var(--muted); }
.card-jaw { display: flex; gap: 8px; padding: 6px; border-radius: var(--radius-card); }
.card-jaw.is-jaw { background: var(--indigo-50); }
.card-half { display: flex; gap: 3px; }
.card-midline { width: 1px; background: var(--decor); }
.card-tooth {
  display: grid; place-items: center; width: 30px; height: 36px; border: 1px solid var(--field-border);
  background: var(--surface); color: var(--ink-2); font: var(--fw-600) var(--fs-11) var(--mono);
}
.card-tooth.up { border-radius: 8px 8px 12px 12px; }
.card-tooth.down { border-radius: 12px 12px 8px 8px; }
.card-tooth.is-jaw { border-color: var(--jaw-line); background: var(--indigo-50); color: var(--indigo-700); }
.card-tooth.tooth-unit { border-color: var(--indigo-700); background: var(--indigo-700); color: var(--surface); }
.card-tooth.tooth-abutment { border-color: var(--violet); background: var(--violet); color: var(--surface); }
.card-tooth.tooth-pontic { border-color: var(--warn); background: var(--warn); color: var(--surface); }
.card-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-12); color: var(--ink-2); }
.card-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.card-legend-swatch { width: 10px; height: 10px; border-radius: 3px; }
.card-legend-swatch.tooth-unit { background: var(--indigo-700); }
.card-legend-swatch.tooth-abutment { background: var(--violet); }
.card-legend-swatch.tooth-pontic { background: var(--warn); }
.card-legend-swatch.is-jaw { border: 1px solid var(--jaw-line); background: var(--indigo-50); }
.order-work-comment { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--row-rule); }
.order-work-comment > span { font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--muted); }
.order-work-comment > p { margin: 0; line-height: 1.5; }

/* Финансы: плитки итогов, «Движение по наряду», «Состав и цена». */
.order-finance { display: flex; flex-direction: column; gap: 14px; }
.finance-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.finance-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-card); }
.finance-tile-label { font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--muted); }
.finance-tile-value { font-size: var(--fs-17); font-weight: var(--fw-600); }
.finance-tile-note { font-size: 11.5px; color: var(--muted); }
.finance-tile.tone-ok .finance-tile-value { color: var(--ok); }
.finance-tile.tone-indigo .finance-tile-value { color: var(--indigo-700); }
.finance-tile.tone-warn .finance-tile-value { color: var(--warn); }
.finance-moves, .finance-prices { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-panel); }
.finance-moves-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 12px 16px; }
.finance-moves-head > h2 { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-600); }
.finance-moves-head > span { font-size: var(--fs-12); color: var(--muted); }
.finance-move {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px 120px; align-items: baseline; gap: 4px 12px;
  padding: 10px 16px; border-top: 1px solid var(--row-rule);
}
.finance-move.is-reversal { background: var(--overdue-row); }
.finance-move-at { font-size: var(--fs-12); color: var(--muted); }
.finance-move-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.finance-move-what > b { font-weight: var(--fw-500); }
.finance-move-what > span { font-size: var(--fs-12); color: var(--muted); }
.finance-kind { justify-self: start; padding: 1px 8px; border-radius: 6px; font-size: var(--fs-12); font-weight: var(--fw-500); white-space: nowrap; }
.finance-kind.kind-wage { background: var(--indigo-50); color: var(--indigo-700); }
.finance-kind.kind-material { background: var(--warn-soft); color: var(--warn); }
.finance-kind.kind-reversal { background: var(--danger-soft); color: var(--danger); }
.finance-kind.kind-payment { background: var(--ok-soft); color: var(--ok); }
.finance-move-sum { text-align: right; font-size: var(--fs-12-5); font-weight: var(--fw-500); white-space: nowrap; }
.finance-move-sum.is-negative { color: var(--danger); }
.finance-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--row-rule); }
.finance-price-name { flex: 1 1 200px; font-weight: var(--fw-500); }
.finance-price-calc { font-size: var(--fs-12-5); color: var(--muted); }
.finance-price-sum { min-width: 110px; text-align: right; font-size: var(--fs-12-5); font-weight: var(--fw-600); }
@media (max-width: 37.5rem) {
  .finance-move { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ------------------------------------------------ производство: семь колонок --- */

/* Ширина строк рассчитана на рабочую колонку 1440 px рядом с колонкой сведений:
   все семь колонок видны без прокрутки; уже — .production прокручивается внутри.
   Каждая строка — своя сетка, поэтому гибкая только колонка операции: иначе
   колонки соседних строк расходятся по ширине содержимого. */
.order-card .production { border-color: var(--card-border); border-radius: var(--radius-card); }
.order-card .production .prod-row {
  grid-template-columns: 1.75rem minmax(10rem, 1fr) 9.5rem 6.75rem 5.5rem 5.75rem 5.5rem;
  gap: var(--sp-2); min-width: 48rem; min-height: 56px;
  padding: var(--sp-2) var(--sp-3); border-bottom-color: var(--row-rule);
}
.order-card .production .prod-row.head { min-height: 36px; padding-block: var(--sp-1-5); border-bottom-color: var(--rule); }
.order-card .production .prod-row:last-child { border-bottom: 0; }
.order-card .prod-row:not(.head) > :nth-child(2) > span:first-child {
  display: block; font-size: var(--fs-13); font-weight: var(--fw-600); line-height: 1.35; color: var(--ink);
}
.order-card .prod-row .subline { font-size: var(--fs-12); line-height: 1.4; }
.order-card .prod-row select { height: var(--control-h); font-size: var(--fs-12-5); }
.order-card .prod-row:not(.head) .rate { font: var(--fw-500) var(--fs-12-5) var(--mono); }
.order-card .prod-row .rate .subline { font-family: var(--font); white-space: normal; overflow-wrap: anywhere; }
.order-card .prod-row .pay-rate-source { margin-top: var(--sp-1); overflow-wrap: anywhere; }
.order-card .seq {
  width: 24px; height: 24px; border-radius: 7px;
  font: var(--fw-500) var(--fs-11) var(--mono); background: var(--chip-bg); color: var(--muted);
}
.order-card .seq.status-in_work { background: var(--stage-working-soft); color: var(--stage-working); }
.order-card .seq.status-completed { background: var(--stage-ready-soft); color: var(--stage-ready); }
/* Не назначенная операция — тон предупреждения всей строки, подрядчик — фиолетовый,
   как их шаги в маршруте. Пустые строки уведомления и ошибки не рисуют точку. */
.order-card .prod-row.unassigned { background: var(--warn-soft); }
.order-card .prod-row.unassigned select { border-color: var(--warn); }
.order-card .prod-row.external { background: var(--violet-soft); }
.order-card .prod-row.external > :nth-child(3) > span:first-child { color: var(--violet); font-weight: var(--fw-500); }
.order-card .prod-row.is-target { box-shadow: inset 0 0 0 2px var(--ink); }
.order-card .prod-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.order-card .moves { flex-wrap: wrap; align-items: center; gap: var(--sp-1-5); }
.order-card .moves > .subline { display: inline-flex; align-items: center; gap: var(--sp-1-5); color: var(--danger); line-height: 1.3; }
.order-card .moves > .subline:empty { display: none; }
.order-card .moves > .subline::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Участники этапа и лента сканов (макет 06 «Карточка наряда», Q2): чипы
   «Иванов 7 · 1 ч 30 мин», плашки «на паузе / передан / начато вне порядка»,
   «Лента сканов · N» и строки «время · кто что сделал · канал». */
/* Лента — в видимой ширине .production (строки шире на 1280/1024 и прокручиваются):
   каналы отметок справа видны без прокрутки строки. */
.order-card .production { container-type: inline-size; }
.order-card .prod-track { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 6px;
  position: sticky; left: calc(1.75rem + var(--sp-3) + var(--sp-2)); max-width: calc(100cqw - 1.75rem - 2 * var(--sp-3) - var(--sp-2)); }
.order-card .prod-track-line { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.order-card .prod-track-who { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--gray-100); font-size: 12px; }
.order-card .prod-track-who b { font-weight: 600; }
.order-card .prod-track-who span { font-family: var(--mono); color: var(--gray-700); }
.order-card .prod-track-flag { height: 24px; padding: 0 8px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; }
.order-card .prod-track-flag.is-pause { background: var(--orange-50); color: var(--orange-700); }
.order-card .prod-track-flag.is-hand { background: var(--blue-50); color: var(--blue-700); }
.order-card .prod-track-flag.is-par { background: var(--blue-50); color: var(--blue-700); }
.order-card .prod-track-flag.is-auto { background: var(--gray-100); color: var(--gray-700); }
.order-card .prod-track-flag.is-ooo { background: var(--amber-50); color: var(--amber-700); }
.order-card .prod-tape-toggle { height: 24px; padding: 0 6px; border: 0; background: none; color: var(--gray-700); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.order-card .prod-tape { border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.order-card .prod-tape[hidden] { display: none; }
.order-card .prod-tape-row { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-height: 34px; padding: 5px 10px; border-top: 1px solid var(--gray-150); font-size: 12.5px; }
.order-card .prod-tape-at { width: 84px; font: 500 12px var(--mono); color: var(--gray-600); }
.order-card .prod-tape-text { flex: 1 1 200px; }
.order-card .prod-tape-row.is-muted { color: var(--gray-600); }
.order-card .prod-tape-ch { padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--gray-100); color: var(--gray-700); }
.order-card .prod-tape-ch.is-post { background: var(--scan-channel-post); }
.order-card .prod-tape-ch.is-app { background: var(--violet-50); color: var(--violet-700); }
.order-card .prod-joint { font-weight: 500; padding-top: 6px; }

/* ------------------------------------------ журналы: финансы, история, простои --- */

.order-card .production > .ledger-row {
  grid-template-columns: 10rem minmax(8rem, 1fr) minmax(9rem, 12rem) 7rem 6rem;
  gap: var(--sp-2-5); min-width: 47rem; padding: var(--sp-2-5) var(--sp-3);
  font-size: var(--fs-13); border-bottom-color: var(--row-rule);
}
.order-card .production > .ledger-row.head { padding-block: var(--sp-2); font-size: var(--fs-12); border-bottom-color: var(--rule); }
.order-card .production > .ledger-row.event { grid-template-columns: 8rem 10rem 11rem minmax(0, 1fr); min-width: 40rem; }
.order-card .production > .ledger-row.hold { grid-template-columns: 5rem minmax(9rem, 1fr) 6rem 1.6fr; min-width: 36rem; }
.order-card .production > .ledger-row:last-child { border-bottom: 0; }
.order-card .ledger-row > .rate { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-card .ledger-row:not(.head) > .rate { font-family: var(--mono); font-size: var(--fs-12-5); }
.order-card .ledger-row.total { background: var(--fill-soft); font-weight: var(--fw-600); }
.order-card .ledger-row.total > :first-child { white-space: nowrap; }

.order-card .remake-payroll > .hint { margin: 0 0 var(--sp-3); }
.order-card .remake-payroll-entry {
  display: grid; gap: var(--sp-1); margin: var(--sp-2) 0 0; padding: var(--sp-3);
  border: 1px solid var(--card-border); border-radius: var(--radius-card); background: var(--surface);
}
.order-card .remake-payroll-entry > b { font: var(--fw-600) var(--fs-14) var(--mono); color: var(--ink); }
.order-card .remake-payroll-entry > button { justify-self: start; margin-top: var(--sp-1); }

/* ------------------------------------------------------------- переписка --- */

.order-card .thread { gap: var(--sp-2); margin-top: var(--sp-2); padding: 2px; }
.order-card .msg {
  max-width: 44rem; padding: var(--sp-2-5) var(--sp-3);
  border: 1px solid var(--card-border); border-radius: var(--radius-card); background: var(--surface);
}
.order-card .msg.mine { border-color: transparent; background: var(--fill-soft); }
.order-card .msg.from-clinic { border-color: transparent; background: var(--violet-soft); }
.order-card .msg.gone { background: var(--fill-soft); }
.order-card .msg > header { align-items: center; gap: var(--sp-2); }
.order-card .msg > header b { font-size: var(--fs-13); font-weight: var(--fw-600); }
.order-card .msg > header .subline { margin-left: auto; font: var(--fw-500) var(--fs-11) var(--mono); color: var(--muted); }
.order-card .msg > header button { margin-left: 0; }
.order-card .msg-side { font-size: var(--fs-10-5); letter-spacing: .04em; border-radius: var(--radius-sm); }
.order-card .msg-body { margin-top: var(--sp-1); font-size: var(--fs-13); line-height: 1.5; color: var(--ink-2); }
.order-card .msg-files { gap: var(--sp-2); margin-top: var(--sp-2); }
.order-card .file-with-versions { flex-direction: row; align-items: center; gap: var(--sp-1-5); }
.order-card .thread-chip { border-color: var(--button-border); border-radius: var(--radius-sm); font-size: var(--fs-12-5); }
.order-card .thread-chip i { font-family: var(--mono); font-size: var(--fs-11); color: var(--muted); }
.order-card .thread-blank {
  max-width: none; padding: var(--sp-4); border: 0; border-radius: var(--radius-card);
  background: var(--fill-soft); font-size: var(--fs-13);
}
/* Поле сообщения — одна рамка на весь блок, как строка комментария макета. */
.order-card .thread-box {
  gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-2);
  border: 1px solid var(--button-border); border-radius: var(--radius-card); background: var(--surface);
}
.order-card .thread-box:focus-within { border-color: var(--focus-ring); box-shadow: var(--shadow-focus); }
.order-card .thread-box textarea { min-height: 2.75rem; padding: var(--sp-1-5) var(--sp-1); border: 0; box-shadow: none; }
.order-card .thread-box textarea:focus-visible { outline: 0; box-shadow: none; }
.order-card .thread-acts { gap: var(--sp-2); }
.order-card .thread-hint { font-size: var(--fs-12); }

/* ------------------------------------------------------------ окна наряда --- */

.order-dialog-head { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.order-dialog-head > div { display: grid; gap: var(--sp-1); min-width: 0; }
.order-dialog-head h2 { overflow-wrap: anywhere; }
.order-dialog-sub { margin: 0; overflow-wrap: anywhere; font-size: var(--fs-12-5); line-height: 1.45; color: var(--muted); }
.order-dialog-tile { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-card); }
.order-dialog-tile.tile-held { background: var(--held-soft); color: var(--held); }
.order-dialog-tile.tile-held::before { content: ""; width: 3px; height: 12px; border-inline: 3px solid currentColor; }
/* Итог решения — информационная плашка над кнопками, как на макете переделки. */
.order-dialog-note {
  margin: 0; padding: 11px 12px; border-radius: var(--radius-card);
  background: var(--info-soft); color: var(--info); font-size: var(--fs-12-5); line-height: 1.5;
}
dialog .hint.order-dialog-note { color: var(--info); }
/* Пустая строка ошибки в окнах наряда не рисует пустую красную плашку. */
dialog.remake-payroll-dialog .error:empty, dialog.file-version-history .error:empty { display: none; }

dialog.hold-dialog .hold-hint { margin: calc(-1 * var(--sp-1)) 0 0; font-size: var(--fs-12); line-height: 1.45; }
dialog.hold-dialog button.hold-submit::before {
  content: ""; flex: none; width: 2px; height: 10px;
  border-inline: 2.5px solid var(--button-primary-icon);
}

/* Версии файла: окно без формы, поэтому отступ для липкого футера задаётся здесь.
   Последняя версия — в тёмной рамке, кнопка скачивания справа от названия. */
dialog.file-version-history { --dialog-pad: var(--sp-5); width: min(40rem, calc(100vw - 2rem)); padding: var(--dialog-pad); }
dialog.file-version-history > .order-dialog-head { margin-bottom: var(--sp-4); }
dialog.file-version-history .file-version-list { display: grid; gap: var(--sp-2); }
dialog.file-version-history .file-version-entry {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border: 1px solid var(--card-border); border-radius: var(--radius-card);
}
dialog.file-version-history .file-version-entry.is-latest { border-color: var(--ink); }
dialog.file-version-history .file-version-entry > * { grid-column: 1; margin: 0; }
dialog.file-version-history .file-version-entry > button { grid-column: 2; grid-row: 1 / span 2; }
dialog.file-version-history .file-version-entry > b { font-size: var(--fs-13); font-weight: var(--fw-600); line-height: 1.6; }
dialog.file-version-history .file-version-entry > b + p { font: var(--fw-500) var(--fs-12-5) var(--mono); color: var(--ink); }
dialog.file-version-history .file-version-entry > p { font-size: var(--fs-12-5); line-height: 1.45; color: var(--ink-2); }
dialog.file-version-history .file-version-entry > .subline,
dialog.file-version-history .file-version-entry > .hint { color: var(--muted); }
dialog.file-version-history .file-version-list + .hint { margin: var(--sp-3) 0 0; }
dialog.file-version-history .file-version-add { margin-top: var(--sp-3); }

/* ------------------------------------------ производство: краткий план --- */

/* Сводка плана над таблицей: применён ли план и успевает ли наряд. Полный план —
   на вкладке «Сценарий». */
.order-card .plan-brief {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-3); padding: var(--sp-2-5) var(--sp-4);
  border: 1px solid var(--card-border); border-radius: var(--radius-panel); background: var(--surface);
}
.order-card .order-production > .card-lines { margin-top: 0; }
.order-card .plan-brief > strong { font-size: var(--fs-13); font-weight: var(--fw-600); }
.order-card .plan-brief-pills { display: flex; flex-wrap: wrap; gap: var(--sp-1-5); }
.order-card .plan-brief > button { margin-left: auto; }

/* ------------------------------------------------------- фото и файлы --- */

/* Загрузка живёт внутри раздела категории (макет этапа 3): пунктирная зона во всю
   ширину, по нажатию — обычный выбор файлов, после выбора — лоток с превью,
   комментарием и отправкой. Сам input скрыт визуально, но остаётся в label:
   клавиатура, мышь и перетаскивание ведут в одно место. */
.order-card .order-head .head-actions > button[hidden] { display: none; }
.order-card .photo-uploader { display: grid; gap: var(--sp-2-5); margin-top: var(--sp-3); }
.order-card .photo-uploader[hidden], .order-card .photo-tray[hidden], .order-card .photo-uploader .error[hidden] { display: none; }
.order-card .photo-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); min-height: 7rem; padding: var(--sp-4); text-align: center; cursor: pointer;
  border: 1.5px dashed var(--file-drop-line); border-radius: var(--radius-card); background: var(--fill-soft);
  transition: border-color .15s ease, background-color .15s ease;
}
.order-card .photo-drop:hover { border-color: var(--rule-strong); background: var(--hover-bg); }
.order-card .photo-drop.is-over { border-color: var(--ink); border-style: solid; background: var(--brand-soft); }
.order-card .photo-drop:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.order-card .photo-drop.has-files { min-height: 0; flex-direction: row; gap: var(--sp-2); padding: var(--sp-2-5) var(--sp-3); }
.order-card .photo-drop.has-files .photo-drop-hint { display: none; }
.order-card .photo-drop.has-files .photo-drop-icon { width: 1.75rem; height: 1.75rem; }
.order-card .photo-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.order-card .photo-drop-icon {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--sp-1);
  border-radius: 50%; background: var(--surface); border: 1px solid var(--rule); color: var(--ink-2);
}
.order-card .photo-drop.has-files .photo-drop-icon { margin: 0; }
.order-card .photo-drop-title { font-size: var(--fs-13); font-weight: var(--fw-500); color: var(--ink); }
.order-card .photo-drop-hint { font-size: var(--fs-12); color: var(--muted); }
.order-card .photo-tray {
  display: grid; gap: var(--sp-2-5); padding: var(--sp-3);
  border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface);
}
.order-card .photo-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--sp-2); }
.order-card .photo-thumb { position: relative; display: grid; gap: var(--sp-1); margin: 0; min-width: 0; }
.order-card .photo-thumb img { font-size: 0; color: transparent;
  display: block; width: 100%; height: 5.75rem; object-fit: cover;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--fill-soft);
}
.order-card .photo-thumb figcaption { display: grid; min-width: 0; font-size: var(--fs-12); line-height: 1.3; }
.order-card .photo-thumb figcaption span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.order-card .photo-thumb figcaption i { font: var(--fw-400) var(--fs-11) / 1.3 var(--mono); font-style: normal; color: var(--muted); }
.order-card .photo-thumb-remove {
  position: absolute; top: var(--sp-1); right: var(--sp-1); display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: rgba(23, 24, 26, .72); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer;
}
.order-card .photo-thumb-remove:hover:not(:disabled) { background: var(--ink); }
.order-card .photo-tray textarea { width: 100%; min-height: var(--control-h-lg); resize: vertical; }
.order-card .photo-tray-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.order-card .photo-uploader.is-busy .photo-drop { opacity: .6; pointer-events: none; }
.order-card .photo-uploader .error { margin: 0; }
.order-card .photo-gallery { display: grid; gap: var(--sp-3); margin: 0; grid-template-columns: minmax(0, 1fr); }
.order-card .photo-gallery > section {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--card-border); border-radius: var(--radius-panel); background: var(--surface);
}
.order-card .photo-group-head { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-2-5); }
.order-card .photo-group-head h3 { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-600); }
.order-card .photo-count { font-size: var(--fs-12); color: var(--muted); }
.order-card .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--sp-3); }
.order-card .photo-grid article {
  display: grid; align-content: start; gap: var(--sp-1); min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere;
}
.order-card .photo-grid .msg-shot { width: 100%; height: 7.5rem; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
/* Файл без превью — плитка того же размера, что снимок: сетка не скачет. */
.order-card .photo-grid .thread-chip {
  display: grid; place-content: center; justify-items: center; gap: var(--sp-1); width: 100%; max-width: none; height: 7.5rem;
  padding: var(--sp-2); border-radius: var(--radius); background: var(--fill-soft); text-align: center; overflow-wrap: anywhere;
}
.order-card .photo-grid article > p { margin: 0; font-size: var(--fs-12-5); line-height: 1.35; }
.order-card .photo-grid .photo-meta { font: var(--fw-400) var(--fs-11) / 1.35 var(--mono); color: var(--muted); }
.order-card .photo-acts { display: flex; flex-wrap: wrap; gap: var(--sp-1-5); }
.order-card .photo-gallery > section > .hint { margin: 0; }

/* ----------------------------------------------------------------- история --- */

.order-card .order-history { padding: 6px 16px; border: 1px solid var(--rule); border-radius: var(--radius-panel); }
.order-card .order-history-list { list-style: none; margin: 0; padding: 0; }
.order-card .order-history-item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px;
  padding: 10px 0; border-top: 1px solid var(--row-rule);
}
.order-card .order-history-item:first-child { border-top-color: transparent; }
.order-card .order-history-item time { padding-top: 1px; font-size: var(--fs-12); color: var(--muted); }
.order-card .order-history-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.order-card .history-title { font-weight: var(--fw-600); color: var(--ink); }
.order-card .history-who, .order-card .order-history-note { color: var(--ink-2); }
.order-card .history-ok .history-title { color: var(--ok); }
.order-card .history-held .history-title { color: var(--held); }
.order-card .history-closed .history-title { color: var(--teal); }
.order-card .history-warn .history-title { color: var(--warn); }
.order-card .history-danger .history-title { color: var(--danger); }
.order-card .order-history-diff { display: flex; flex-direction: column; gap: 4px; }
.order-card .order-history-diff > span { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-12-5); }
.order-card .order-history-diff .diff-label { font-weight: var(--fw-500); }
.order-card .order-history-diff s { color: var(--muted); }
.order-card .order-history-diff mark { padding: 0 4px; border-radius: 4px; background: var(--warn-soft); color: var(--ink); }

/* ------------------------------------------------------ выдвижная панель --- */

/* Версии паспорта и драгметалл: панель справа поверх карточки. Карточка под ней
   inert; окна решений открываются над панелью обычными диалогами. */
.order-drawer-scrim { position: fixed; inset: 0; z-index: 40; background: var(--overlay); }
.order-drawer {
  position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(36rem, 100%);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface); box-shadow: var(--shadow-dialog);
}
.order-drawer:focus { outline: 0; }
.order-drawer-head {
  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--header-h);
  padding: 0 var(--sp-4) 0 var(--sp-5); border-bottom: 1px solid var(--rule);
}
.order-drawer-head h2 { flex: 1; margin: 0; font-size: var(--fs-17); font-weight: var(--fw-600); }
.order-drawer-body { overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-6); }
.order-drawer-body .trace-drawer-page { display: grid; gap: var(--sp-3); }
.order-drawer-body .trace-drawer-page > * { margin: 0; }
.order-drawer-body .trace-drawer-page > button { justify-self: start; }
.order-drawer-body .trace-drawer-page > h2 { font-size: var(--fs-14); font-weight: var(--fw-600); }
.order-drawer-body .card-lines { margin: 0; padding: var(--sp-3); border: 1px solid var(--card-border); border-radius: var(--radius-card); }
.order-drawer-body .card-lines > h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-14); }

/* ------------------------------------------------- окна карточки (макет) --- */

/* cardDialog: 520 px, полоса тона сверху, заголовок 17 и подпись, тело с
   прокруткой, футер на мягкой заливке с «Отмена» и действием цветом тона. */
dialog.card-dialog {
  --card-tone: var(--ink);
  width: min(520px, calc(100vw - 2rem)); max-height: min(86vh, 720px); padding: 0; overflow: hidden;
  border: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-dialog);
}
dialog.card-dialog.tone-held { --card-tone: var(--held); }
dialog.card-dialog.tone-teal { --card-tone: var(--teal); }
dialog.card-dialog.tone-danger { --card-tone: var(--danger); }
dialog.card-dialog.tone-warn { --card-tone: var(--warn); }
dialog.card-dialog > form { display: flex; flex-direction: column; max-height: inherit; margin: 0; padding: 0; gap: 0; }
.card-dialog-head { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 12px; border-top: 4px solid var(--card-tone); }
.card-dialog-head > h2 { margin: 0; font-size: var(--fs-17); font-weight: var(--fw-600); }
.card-dialog-head > span { font-size: var(--fs-12-5); color: var(--muted); }
.card-dialog-body { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 20px 16px; }
.card-dialog-body > .field { margin: 0; }
.card-dialog-body textarea { width: 100%; resize: vertical; }
.card-dialog-error { color: var(--danger); font-size: var(--fs-12-5); }
.card-dialog-error:empty { display: none; }
.card-dialog-foot {
  flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px;
  border-top: 1px solid var(--rule); background: var(--gray-25);
}
.card-dialog-foot > button { height: 32px; padding: 0 14px; }
.card-dialog-foot > .card-dialog-confirm { padding: 0 16px; }
.card-dialog-foot > .card-dialog-confirm.tone-held { background: var(--held); }
.card-dialog-foot > .card-dialog-confirm.tone-danger { background: var(--danger); }
.card-dialog-text { margin: 0; line-height: 1.45; color: var(--ink-2); }
.card-dialog-muted { font-size: var(--fs-12); color: var(--muted); }
.card-dialog-note { font-size: var(--fs-12); color: var(--muted); }
.card-dialog-label { font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--muted); }
.card-dialog-info { padding: 10px 12px; border-radius: var(--radius); line-height: 1.45; color: var(--ink-2); background: var(--fill-soft); }
.card-dialog-info.is-held { background: var(--held-soft); }
.card-dialog-radios, .card-dialog-checks { display: flex; flex-direction: column; gap: 4px; }
.card-dialog-radio {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
.card-dialog-radio:has(input:checked) { border-color: var(--ink); }
.card-dialog-radios.is-held .card-dialog-radio:has(input:checked) { border-color: var(--held); background: var(--held-soft); }
.card-dialog-radios.is-held input { accent-color: var(--held); }
.card-dialog-check { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
.card-dialog-radio input, .card-dialog-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.card-dialog-seq { color: var(--muted); }
.card-dialog-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; max-width: 380px; }
.card-dialog-pair > .field { margin: 0; }
.card-dialog-summary { display: flex; flex-direction: column; gap: 6px; }
.card-dialog-pill {
  display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: var(--radius);
  font-weight: var(--fw-500);
}
.card-dialog-pill > .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; }
.card-dialog-pill.is-ok { background: var(--ok-soft); color: var(--ok); }
.card-dialog-pill.is-warn { background: var(--warn-soft); color: var(--warn); }
.card-dialog-file {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; overflow-wrap: anywhere;
  border: 1px solid var(--danger-line); border-radius: var(--radius); background: var(--danger-soft);
}
.card-dialog-file > .mono { padding: 2px 6px; border-radius: 6px; background: var(--surface); font-size: 10px; font-weight: var(--fw-600); }
@media (max-width: 37.5rem) {
  dialog.card-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
}

/* Меню «⋯»: пункты 34 px, подменю «Печать» с отступом, разделитель перед «Версии паспорта». */
.order-side .order-action-items { width: 260px; }
.order-side .order-action-items > .order-menu-item {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--radius);
  background: transparent; font-weight: var(--fw-400); color: var(--ink);
}
.order-side .order-action-items > .order-menu-item > span:first-child { flex: 1; display: flex; }
.order-side .order-action-items > .order-menu-item.is-sub { padding-left: 24px; }
.order-side .order-action-items > .order-menu-item.has-separator { border-top: 1px solid var(--row-rule); border-radius: 0 0 var(--radius) var(--radius); }
.order-menu-sub { display: flex; flex-direction: column; }
.order-menu-sub[hidden] { display: none; }
.order-menu-sub > .order-menu-item {
  display: flex; align-items: center; min-height: 34px; padding: 0 10px 0 24px; border: 0; border-radius: var(--radius);
  background: transparent; font-weight: var(--fw-400); color: var(--ink); text-align: left; justify-content: flex-start;
}
.order-menu-sub > .order-menu-item:hover, .order-side .order-action-items > .order-menu-item:hover { background: var(--fill-soft); }
.order-menu-tail { margin-left: auto; color: var(--muted); }

/* ----------------------------------------------------------------- телефон --- */

@media (max-width: 42rem) {
  .order-side .order-head { display: grid; gap: var(--sp-3); }
  .order-side .order-head h1 { font-size: var(--fs-22); }
  .order-side { padding: var(--sp-3) var(--sp-4); }
  .order-route { grid-auto-columns: minmax(9rem, 11rem); }
  .order-card .order-history-item { grid-template-columns: minmax(0, 1fr); }
  .order-card .plan-brief > button { margin-left: 0; }
  dialog.file-version-history .file-version-entry { grid-template-columns: minmax(0, 1fr); }
  dialog.file-version-history .file-version-entry > button { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Плашка срока карточки пишет состояние сама: старая приставка «Просрочен · »
   общего слоя (.due-overdue::before) сюда не относится. */
.order-due-plate::before { content: none; }

/* Доработка ↺ (R1, макет 06): вложенная строка под исходным этапом и «↺ N» на
   шаге маршрута. */
.production .prod-row.prod-rework { background: var(--gray-25); border-top: 1px dashed var(--gray-300); padding-left: 42px; }
.production .prod-row.prod-rework .seq.is-rework { color: var(--danger); background: transparent; }
.prod-rework-who { font-weight: 500; }
.prod-row.prod-rework .subline.is-taken { color: var(--warn); }
.prod-rework-pay { color: var(--ink-2); }
.prod-track-flag.is-taken { background: var(--warn-soft); color: var(--warn); }
.route-step { position: relative; }
.route-rework { position: absolute; right: 8px; top: 8px; padding: 1px 7px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); font: 600 11px var(--mono); }

/* «Переделка…» по модели возврата (R1, макет 06). */
.remake-dialog .remake-ret { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px; background: var(--danger-soft); }
.remake-dialog .remake-ret > span { flex: 1 1 220px; line-height: 1.45; }
.remake-dialog .remake-ret b { color: var(--danger); font-weight: 600; }
.remake-dialog .remake-ret-open { height: 30px; padding: 0 12px; border: 1px solid var(--danger-line); border-radius: 8px; background: var(--surface); color: var(--danger); font-weight: 500; cursor: pointer; }
.remake-dialog .remake-field { display: flex; flex-direction: column; gap: 6px; }
.remake-dialog .remake-label, .remake-dialog .remake-label-field { font-size: 12px; color: var(--muted); font-weight: 500; }
.remake-dialog .remake-label-field { gap: 4px; }
.remake-dialog .remake-label-field select, .remake-dialog .remake-label-field textarea { font-size: 13px; color: var(--ink); font-weight: 400; }
.remake-dialog .remake-label-field select { height: 32px; padding: 0 8px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--surface); }
.remake-dialog .remake-label-field textarea { padding: 8px 10px; border: 1px solid var(--gray-300); border-radius: 8px; resize: vertical; width: 100%; }
.remake-dialog .remake-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--gray-100); border-radius: 8px; align-self: flex-start; }
.remake-dialog .remake-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font-weight: 400; cursor: pointer; color: var(--ink); }
.remake-dialog .remake-seg button[aria-checked="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); font-weight: 600; }
.remake-dialog .remake-lines { display: flex; flex-direction: column; gap: 6px; }
.remake-dialog .remake-line { padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.remake-dialog .remake-line label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.remake-dialog .remake-line input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-ink); }
.remake-dialog .remake-teeth { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 26px; }
.remake-dialog .remake-teeth button { min-width: 42px; height: 30px; padding: 0 8px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--surface); color: var(--muted); font: 600 12.5px var(--mono); cursor: pointer; }
.remake-dialog .remake-teeth button[aria-pressed="true"] { border-color: var(--ink); background: var(--brand-soft); color: var(--ink); }
.remake-dialog .remake-clinic { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px; background: var(--gray-50); }
.remake-dialog .remake-clinic span { color: var(--ink-2); }
.remake-dialog .remake-clinic-sum { font-weight: 600; font-family: var(--mono); }

/* Окно «Наклейка на коробку» (макет): 440 px без полосы тона; превью наклейки
   58 × 40 мм в масштабе 5 px = 1 мм — 290 × 200, пунктир по краю наклейки,
   QR 150 (30 мм) с содержимым 6 px под ним, справа zxlab, №, работы и срок. */
dialog.card-dialog.order-label-dialog { width: min(440px, calc(100vw - 32px)); }
.order-label-dialog .card-dialog-head { padding: 18px 20px 0; border-top: 0; }
.order-label-dialog .card-dialog-head > h2 { line-height: 1.25; }
.order-label-dialog .card-dialog-body { gap: 14px; padding: 14px 20px 16px; }
.order-label-preview {
  align-self: center; display: flex; gap: 12px; width: 290px; height: 200px; padding: 12px; box-sizing: border-box;
  border: 1px dashed var(--decor); border-radius: 8px; background: var(--gray-0);
}
.order-label-code { align-self: center; flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.order-label-qr { display: block; width: 150px; height: 150px; background: var(--gray-0); }
.order-label-cap { display: block; max-width: 150px; font: var(--fw-500) 6px/1.2 var(--mono); color: var(--ink-2); word-break: break-all; text-align: center; }
.order-label-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.order-label-brand { font: var(--fw-700) 10px var(--mono); }
.order-label-no { font: var(--fw-700) var(--fs-13) var(--mono); }
.order-label-work { font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.order-label-due { margin-top: auto; font: var(--fw-600) 11px var(--mono); }
.order-label-note { font-size: var(--fs-12); line-height: 1.45; color: var(--muted); }