/* Заявки на материалы (22.10.2026). Полоса управления и вкладки — из общего
   шаблона раздела (page.css); здесь своё. Телефон — главный экран мастера:
   одна колонка, кнопки не меньше 40px, поля 16px (иначе iOS увеличивает
   страницу при вводе), действия — внизу экрана. На компьютере
   спецификация и «что в заявке» стоят рядом. */
.mr-pg [hidden], .mr-wrap [hidden] { display: none !important; }
.mr-pg svg, .mr-wrap svg, .mr-toast svg, .mr-site svg, .mr-snab svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── полоса ─────────────────────────────────────────────── */
.mr-head { gap: 10px; }
.mr-h-l { flex: 0 1 auto; display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mr-h-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mr-h-t { font-size: 13.5px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-h-s { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-back { width: 32px; height: 32px; flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 8px;
  color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mr-back:hover { color: var(--ink); border-color: var(--ink4); }
.mr-head .btn-brand.sm, .mr-head .btn-ghost.sm { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 30px; }
.mr-ib { width: 30px; height: 30px; flex: none; border: 1px solid var(--line2); background: var(--card); border-radius: 8px;
  color: var(--ink3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mr-ib:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); }
.mr-ib:disabled { opacity: .35; cursor: default; }
.mr-urg { display: inline-flex; align-items: center; gap: 3px; color: var(--brand); font-style: normal; font-size: 11px; font-weight: 600; }
.mr-urg svg { width: 14px; height: 14px; }

/* Статус: заявка до согласования — по статусу, после — по ходу поставки. */
.mr-chip { display: inline-flex; align-items: center; white-space: nowrap; font-style: normal; font-size: 10.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px; background: var(--raise); color: var(--ink2); }
.mr-chip.draft { background: var(--raise); color: var(--ink2); }
.mr-chip.review { background: var(--warn-soft); color: var(--warn); }
.mr-chip.rejected, .mr-chip.canceled { background: var(--bad-soft); color: var(--bad); }
.mr-chip.approved, .mr-chip.s-wait, .mr-chip.s-part { background: var(--brand-tint); color: var(--brand-deep); }
.mr-chip.s-ordered, .mr-chip.s-transit, .mr-chip.o-ordered, .mr-chip.o-transit { background: var(--viol-soft); color: var(--viol); }
.mr-chip.s-stock, .mr-chip.o-partial { background: var(--info-soft); color: var(--info); }
.mr-chip.s-issued, .mr-chip.s-installed, .mr-chip.o-received { background: var(--ok-soft); color: var(--ok); }
.mr-chip.s-closed, .mr-chip.o-canceled { background: var(--raise); color: var(--ink3); }

/* ── тело ───────────────────────────────────────────────── */
.mr-body { flex: 1; min-height: 0; overflow: auto; background: var(--bg); position: relative; }
.mr-empty { margin: 40px auto; max-width: 520px; text-align: center; color: var(--ink2); font-size: 12.5px; line-height: 1.6;
  padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mr-empty b { color: var(--ink); font-size: 14px; }
.mr-empty .btn-brand { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.mr-empty.sm { margin: 18px auto; padding: 10px; }
.mr-note { margin: 8px 0; font-size: 11.5px; color: var(--ink3); line-height: 1.5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mr-link { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-deep); cursor: pointer; display: inline-flex;
  align-items: center; gap: 4px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
  text-underline-offset: 2px; }
.mr-link:hover { color: var(--brand); }

/* Отбор */
.mr-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px var(--gut); background: var(--card);
  border-bottom: 1px solid var(--line2); position: sticky; top: 0; z-index: 3; }
.mr-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--raise); border-radius: 10px; flex-wrap: nowrap; }
.mr-seg.wrap { flex-wrap: wrap; }
.mr-seg button { border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--ink2); padding: 6px 11px; border-radius: 8px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mr-seg button i { font-style: normal; font-size: 10.5px; color: var(--ink4); }
.mr-seg button.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.mr-seg button.on i { color: var(--ink3); }
.mr-seg button:disabled { opacity: .45; cursor: default; }
.mr-seg.sm button { padding: 4px 9px; font-size: 11px; }
.mr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink2); cursor: pointer; user-select: none; }
.mr-check input { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; }
.mr-search { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 10px; background: var(--raise);
  border: 1px solid transparent; color: var(--ink3); margin-left: auto; min-width: 200px; }
.mr-search:focus-within { border-color: var(--brand); background: var(--card); }
.mr-search input { border: 0; background: none; outline: none; font: inherit; font-size: 12px; color: var(--ink); width: 100%; min-width: 0; }
.mr-search.big { height: 40px; margin: 0; width: 100%; box-sizing: border-box; }
.mr-search.big input { font-size: 13px; }

/* Список заявок: строка — сетка на компьютере, карточка на телефоне. */
.mr-list { padding: 12px var(--gut) 40px; display: flex; flex-direction: column; gap: 6px; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
.mr-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(170px, auto) 66px; align-items: center; gap: 14px; width: 100%;
  text-align: left; border: 1px solid var(--line2); background: var(--card); border-radius: 12px; padding: 11px 14px; font: inherit;
  color: var(--ink); cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.mr-row:hover { border-color: var(--line); box-shadow: var(--shadow); }
.mr-row.me { border-left: 3px solid var(--brand); }
.mr-row-no { font-size: 12px; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.mr-row-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mr-row-m b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-row-m small { font-size: 11px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-row-st { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.mr-row-st small { font-size: 10.5px; color: var(--ink3); display: inline-flex; align-items: center; gap: 3px; }
.mr-who { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-row-d { font-size: 11.5px; color: var(--ink2); text-align: right; white-space: nowrap; }
.mr-row-d.late, .mr-pg-d.late, dd.late { color: var(--bad); font-weight: 600; }

/* Полоса хода: доли по шагам поставки. */
.mr-bar-p { display: inline-flex; width: 90px; height: 6px; border-radius: 999px; background: var(--raise); overflow: hidden; }
.mr-bar-p.wide { width: 100%; max-width: 260px; }
.mr-bar-p i { display: block; height: 100%; }
.p-installed { background: var(--ok); }
.p-issued { background: color-mix(in srgb, var(--ok) 55%, var(--card)); }
.p-stock { background: var(--info); }
.p-transit { background: var(--viol); }
.p-ordered, .p-part { background: color-mix(in srgb, var(--viol) 45%, var(--card)); }
.p-wait { background: var(--line); }

/* ── выбор объекта ──────────────────────────────────────── */
.mr-pick { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 8px; }
.mr-hint-t { margin: 0 0 6px; font-size: 13px; color: var(--ink2); }
.mr-pick-b { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line2); background: var(--card);
  border-radius: 12px; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.mr-pick-b:hover { border-color: var(--brand); }
.mr-pick-b svg { width: 20px; height: 20px; color: var(--brand); }
.mr-pick-b span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mr-pick-b b { font-size: 14px; font-weight: 600; }
.mr-pick-b small { font-size: 11.5px; color: var(--ink3); }

/* ── новая заявка ───────────────────────────────────────── */
.mr-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 400px); gap: 0; min-height: 100%; }
.mr-cat { min-width: 0; padding: 0 0 40px; }
.mr-cat-h { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 12px var(--gut) 8px; display: flex; flex-direction: column; gap: 8px; }
.mr-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.mr-chips::-webkit-scrollbar { display: none; }
.mr-chips button { flex: none; border: 1px solid var(--line2); background: var(--card); color: var(--ink2); font: inherit; font-size: 11.5px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mr-chips button svg { width: 13px; height: 13px; }
.mr-chips button i { font-style: normal; font-size: 10.5px; color: var(--ink4); }
.mr-chips button.on { border-color: var(--ink); background: var(--ink); color: var(--card); }
.mr-chips button.on i { color: var(--ink4); }
.mr-items { padding: 0 var(--gut); display: flex; flex-direction: column; gap: 6px; }
.mr-gh { margin: 12px 0 2px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.mr-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; background: var(--card);
  border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; }
.mr-it.in { border-color: color-mix(in srgb, var(--brand) 45%, var(--line2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent); }
.mr-it.over { border-color: var(--bad); box-shadow: none; }
.mr-it-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Длинное описание (ВРУ с полной комплектацией) — в две строки; целиком — в подсказке. */
.mr-it-t > b { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.mr-it-t > small { font-size: 11px; color: var(--ink3); }
.mr-lim { font-size: 11px; color: var(--ink2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mr-lim b { font-weight: 600; color: var(--ink); }
.mr-left { border: 0; background: var(--ok-soft); color: var(--ok); font: inherit; font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: 6px; cursor: pointer; }
.mr-left:hover { background: color-mix(in srgb, var(--ok) 20%, var(--card)); }
.mr-left.none { background: var(--bad-soft); color: var(--bad); cursor: default; }
.mr-hist { border: 0; background: none; color: var(--ink3); padding: 2px; cursor: pointer; display: inline-flex; border-radius: 6px; }
.mr-hist:hover { color: var(--ink); background: var(--raise); }
.mr-hist svg { width: 14px; height: 14px; }
.mr-over { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--bad); font-weight: 600; }
.mr-over svg { width: 13px; height: 13px; }
.mr-qty { display: inline-flex; align-items: center; gap: 4px; }
.mr-qty button { width: 34px; height: 34px; border: 1px solid var(--line); background: var(--card); border-radius: 9px; color: var(--ink2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mr-qty button:hover { border-color: var(--brand); color: var(--brand); }
.mr-qty input, .mr-cl-q input, .mr-in { width: 78px; height: 34px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; text-align: center; padding: 0 6px; }
.mr-qty input:focus, .mr-cl-q input:focus, .mr-in:focus { outline: none; border-color: var(--brand); }
.mr-it.in .mr-qty input { border-color: var(--brand); background: var(--brand-tint); }
.mr-u { font-size: 11.5px; color: var(--ink3); min-width: 30px; }

/* Подсказки сопутствующего */
.mr-hint { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.mr-hint-h { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--brand-deep); }
.mr-hint-h svg { width: 13px; height: 13px; }
.mr-sug { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--brand-tint); }
.mr-sug.norm { background: var(--info-soft); }
.mr-sug.tog { background: var(--raise); }
.mr-sug.ok { opacity: .7; }
.mr-sug > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mr-sug b { font-size: 12px; font-weight: 600; }
.mr-sug small { font-size: 10.5px; color: var(--ink2); line-height: 1.4; }
.mr-add { flex: none; border: 0; background: var(--brand); color: var(--on-brand); font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mr-sug.norm .mr-add { background: var(--info); }
.mr-sug.tog .mr-add { background: var(--ink2); }
.mr-add svg { width: 13px; height: 13px; stroke-width: 2.4; }
.mr-ok { font-style: normal; font-size: 11px; color: var(--ok); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mr-ok svg { width: 13px; height: 13px; }
.mr-free-p { padding: 10px var(--gut); font-size: 12px; color: var(--ink2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Что в заявке */
.mr-cart { position: sticky; top: 0; align-self: start; max-height: calc(100vh - var(--stick, 50.5px) - 110px); overflow: auto;
  background: var(--card); border-left: 1px solid var(--line2); padding: 14px 16px 18px; box-sizing: border-box; display: flex;
  flex-direction: column; gap: 10px; min-height: 100%; }
.mr-cart-h h3 { margin: 0; font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 7px; }
.mr-cart-h h3 i { font-style: normal; font-size: 11px; color: var(--ink3); font-weight: 600; }
.mr-cart-l { display: flex; flex-direction: column; gap: 6px; }
.mr-cart-e { margin: 0; font-size: 12px; color: var(--ink3); line-height: 1.5; }
.mr-cl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; padding: 8px 9px; border-radius: 10px;
  background: var(--raise); }
.mr-cl.over { background: var(--bad-soft); }
.mr-cl-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mr-cl-t b { font-size: 12px; font-weight: 600; line-height: 1.35; }
.mr-cl-q { display: inline-flex; align-items: center; gap: 4px; }
.mr-cl-q input { width: 70px; height: 30px; font-size: 12px; }
.mr-x { border: 0; background: none; color: var(--ink3); padding: 4px; border-radius: 6px; cursor: pointer; display: inline-flex; }
.mr-x:hover { color: var(--bad); background: var(--card); }
.mr-tag { display: inline-flex; align-self: flex-start; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 5px;
  background: var(--card); color: var(--ink2); margin-right: 4px; }
.mr-tag.bad { background: var(--bad); color: #fff; }
.mr-reason { grid-column: 1 / -1; height: 32px; border: 1px solid var(--bad); border-radius: 8px; padding: 0 9px; font: inherit; font-size: 12px;
  background: var(--card); color: var(--ink); }
.mr-cl.extra .mr-reason { border-color: var(--line); }
.mr-reason:focus { outline: none; border-color: var(--brand); }
.mr-free-b { align-self: flex-start; font-size: 12px; }
.mr-free { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; }
.mr-free input { height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; font: inherit; font-size: 12.5px;
  background: var(--card); color: var(--ink); }
.mr-free input:focus { outline: none; border-color: var(--brand); }
.mr-free-r { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mr-free-r input { width: 100px; }
.mr-free-a { display: flex; gap: 6px; justify-content: flex-end; }
.mr-free-a .btn-brand.sm, .mr-free-a .btn-ghost.sm { height: 30px; display: inline-flex; align-items: center; gap: 5px; }
.mr-form { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: end; padding-top: 10px; border-top: 1px solid var(--line2); }
.mr-fl { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--ink2); min-width: 0; }
.mr-fl.wide { grid-column: 1 / -1; }
.mr-fl input:not([type="checkbox"]), .mr-fl textarea { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 12.5px;
  background: var(--card); color: var(--ink); min-width: 0; box-sizing: border-box; width: 100%; }
.mr-fl textarea { resize: vertical; min-height: 40px; }
.mr-fl input:not([type="checkbox"]):focus, .mr-fl textarea:focus { outline: none; border-color: var(--brand); }
/* Переключатель */
.mr-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink2); cursor: pointer; user-select: none; height: 36px; }
.mr-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mr-sw-k { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s var(--ease); flex: none; }
.mr-sw-k::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s var(--ease); }
.mr-sw input:checked + .mr-sw-k { background: var(--brand); }
.mr-sw input:checked + .mr-sw-k::after { transform: translateX(14px); }
.mr-sw input:focus-visible + .mr-sw-k { outline: 2px solid var(--brand); outline-offset: 2px; }
.mr-sw > span:last-child { display: inline-flex; align-items: center; gap: 4px; }
.mr-cart-a { display: flex; gap: 8px; margin-top: 4px; }
.mr-cart-a .btn-brand, .mr-cart-a .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; }
.mr-cart-a .btn-brand { flex: 1; }
.mr-cart-a .btn-brand:disabled { opacity: .45; cursor: default; box-shadow: none; }
.mr-mbar { display: none; }

/* ── карточка заявки ────────────────────────────────────── */
.mr-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; padding: 16px var(--gut) 40px;
  max-width: 1500px; margin: 0 auto; box-sizing: border-box; }
.mr-card-main, .mr-card-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mr-card-side { background: var(--card); border: 1px solid var(--line2); border-radius: 14px; padding: 14px; align-self: start; }
.mr-sh { margin: 8px 0 0; font-size: 13px; font-weight: 650; display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.mr-sh i, .mr-sh small { font-style: normal; font-weight: 500; font-size: 11px; color: var(--ink3); }
.mr-card-side .mr-sh:first-child { margin-top: 0; }
.mr-facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; background: var(--card);
  border: 1px solid var(--line2); border-radius: 14px; padding: 12px 14px; }
.mr-facts div { min-width: 0; }
.mr-facts .wide { grid-column: 1 / -1; }
.mr-facts dt { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); margin-bottom: 3px; }
.mr-facts dd { margin: 0; font-size: 12.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.mr-callout { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; background: var(--info-soft);
  color: var(--ink); font-size: 12px; line-height: 1.5; }
.mr-callout svg { width: 17px; height: 17px; color: var(--info); margin-top: 1px; }
.mr-callout span { display: flex; flex-direction: column; gap: 2px; }
.mr-callout b { font-size: 12.5px; }
.mr-callout.warn { background: var(--warn-soft); }
.mr-callout.warn svg { color: var(--warn); }
.mr-callout.bad { background: var(--bad-soft); }
.mr-callout.bad svg { color: var(--bad); }
.mr-act-p { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--card);
  border: 2px solid var(--brand); }
.mr-act-p.go { flex-direction: row; align-items: center; justify-content: space-between; border-width: 1px; background: var(--brand-tint); }
.mr-act-p p { margin: 0; font-size: 12px; color: var(--ink2); line-height: 1.5; }
.mr-act-p textarea, .mr-act-p > input { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 12.5px;
  background: var(--card); color: var(--ink); resize: vertical; }
.mr-act-b { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.mr-act-p .btn-brand, .mr-act-p .btn-ghost { display: inline-flex; align-items: center; gap: 6px; height: 38px; }
.mr-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.mr-tools .btn-ghost.sm { height: 32px; display: inline-flex; align-items: center; gap: 6px; background: var(--card); }
.mr-lines { display: flex; flex-direction: column; gap: 6px; }
.mr-l { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; background: var(--card);
  border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; }
.mr-l.closed { opacity: .6; }
.mr-l-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mr-l-t > b { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.mr-l-t > small { font-size: 11px; color: var(--ink3); line-height: 1.5; }
.mr-l-q { text-align: right; font-size: 12px; color: var(--ink2); white-space: nowrap; display: flex; flex-direction: column; }
.mr-l-q b { font-size: 14px; color: var(--ink); }
.mr-l-q small { font-size: 10.5px; color: var(--warn); }
.mr-l-in { display: flex; align-items: center; }
.mr-ls { display: flex; flex-direction: column; gap: 4px; }
.mr-ls small { font-size: 10.5px; color: var(--ink2); }
.mr-ords { display: flex; flex-direction: column; gap: 6px; }
.mr-ord { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--card); font: inherit; font-size: 12px; color: var(--ink); text-align: left; cursor: pointer; }
.mr-ord:disabled { cursor: default; }
.mr-ord small { color: var(--ink3); font-size: 11px; }

/* Ход согласования */
.mr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.mr-steps li { display: flex; gap: 10px; position: relative; padding-bottom: 12px; }
.mr-steps li:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--line2); }
.mr-steps li > i { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--raise); color: var(--ink3); font-style: normal; }
.mr-steps li > i svg { width: 13px; height: 13px; stroke-width: 2.2; }
.mr-steps li.ok > i { background: var(--ok); color: #fff; }
.mr-steps li.cur > i { background: var(--warn); color: #fff; }
.mr-steps li.no > i { background: var(--bad); color: #fff; }
.mr-steps li.ret > i { background: var(--warn-soft); color: var(--warn); }
.mr-steps li.skip { opacity: .6; }
.mr-steps li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.mr-steps b { font-size: 12px; font-weight: 600; }
.mr-steps small { font-size: 11px; color: var(--ink2); }
.mr-steps small span.ok { color: var(--ok); font-weight: 600; }
.mr-st-w { color: var(--ink3) !important; }

/* Документы */
.mr-docs { display: flex; flex-direction: column; gap: 6px; }
.mr-doc { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: var(--raise); color: var(--ink);
  text-decoration: none; }
.mr-doc:hover { background: var(--brand-tint); }
.mr-doc svg { width: 18px; height: 18px; color: var(--brand); }
.mr-doc span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mr-doc b { font-size: 12px; font-weight: 600; }
.mr-doc small { font-size: 10.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-file { display: inline-flex; align-self: flex-start; cursor: pointer; }
.mr-file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mr-file span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px;
  font-size: 12px; color: var(--ink2); }
.mr-file:hover span, .mr-file input:focus-visible + span { border-color: var(--brand); color: var(--brand-deep); }
.mr-files-n { font-size: 11px; color: var(--ink3); }
.mr-ups { display: flex; flex-direction: column; gap: 4px; }
.mr-up { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink2); }
.mr-up span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-up.bad small { color: var(--bad); }
.mr-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.mr-log li { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--ink2); line-height: 1.45; }
.mr-log time { font-size: 10.5px; color: var(--ink3); }
.mr-log b { color: var(--ink); font-weight: 600; }
.mr-hl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mr-hl li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; padding: 7px 10px; border-radius: 9px; background: var(--raise); }
.mr-hl li span { color: var(--ink2); }
.mr-hl li b { margin-left: auto; }

/* ── свод ───────────────────────────────────────────────── */
.mr-pool { padding: 12px var(--gut) 90px; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
.mr-pg-head, .mr-pg-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) 130px 120px 90px; gap: 10px; align-items: center; }
.mr-pg-head { padding: 6px 12px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.mr-pg-head span:nth-child(n+3) { text-align: right; }
.mr-pg-r { background: var(--card); border: 1px solid var(--line2); border-radius: 12px; padding: 9px 12px; margin-bottom: 6px; }
.mr-pg-r.sel { border-color: var(--brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent); }
.mr-pg-r.urg { border-left: 3px solid var(--brand); }
.mr-pg-t { border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column;
  gap: 2px; min-width: 0; color: var(--ink); }
.mr-pg-t b { font-size: 12.5px; font-weight: 600; }
.mr-pg-t small { font-size: 11px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-pg-n, .mr-pg-s, .mr-pg-d { text-align: right; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.mr-pg-n b { font-size: 14px; color: var(--ink); }
.mr-pg-s { color: var(--info); }
.mr-pg-d { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.mr-pg-x { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--line2); }
.mr-pg-x div { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink2); }
.mr-pg-x div span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-pg-x div b { color: var(--ink); }
.mr-sbar { position: sticky; bottom: 12px; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-float);
  font-size: 12.5px; color: var(--ink2); }
.mr-sbar .btn-brand { display: inline-flex; align-items: center; gap: 6px; height: 38px; }
.mr-sbar .btn-brand:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* ── склад ──────────────────────────────────────────────── */
.mr-stk { background: var(--card); border: 1px solid var(--line2); border-radius: 12px; padding: 11px 14px; display: flex; flex-direction: column; gap: 6px; }
.mr-stk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mr-stk-h > b { font-size: 13px; font-weight: 600; }
.mr-stk-h span { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.mr-stk-h span b { font-size: 15px; color: var(--info); }
.mr-stk-w { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink2); padding: 6px 8px;
  border-radius: 9px; background: var(--raise); }
.mr-stk-w span:nth-of-type(1) { flex: 1; min-width: 160px; }
.mr-stk-w .btn-ghost.sm { height: 28px; display: inline-flex; align-items: center; gap: 5px; background: var(--card); }

/* ── маршруты ───────────────────────────────────────────── */
.mr-routes { padding: 14px var(--gut) 40px; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }
.mr-routes > .btn-brand { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.mr-rt { background: var(--card); border: 1px solid var(--line2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.mr-rt.off { opacity: .6; }
.mr-rt-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mr-rt-h > b { font-size: 13.5px; font-weight: 650; }
.mr-rt-h > small { font-size: 11.5px; color: var(--ink3); }
.mr-rt-h .btn-ghost.sm { height: 30px; display: inline-flex; align-items: center; gap: 5px; }
.mr-chain { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.mr-chain li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--raise); max-width: 340px; }
.mr-chain li > i { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--card); font-style: normal; font-size: 10.5px;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mr-chain li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mr-chain b { font-size: 12px; font-weight: 600; }
.mr-chain small { font-size: 11px; color: var(--ink2); line-height: 1.4; }
.mr-miss { color: var(--warn) !important; display: inline-flex; align-items: center; gap: 4px; }
.mr-miss svg { width: 12px; height: 12px; }
.mr-stp { border: 1px solid var(--line2); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.mr-stp-h { display: flex; align-items: center; gap: 6px; }
.mr-stp-h > i { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--card); font-style: normal; font-size: 11px;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mr-stp-h input { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; font: inherit;
  font-size: 12.5px; background: var(--card); color: var(--ink); }
.mr-stp details summary { cursor: pointer; font-size: 11.5px; color: var(--ink2); }
.mr-stp-r { display: flex; gap: 8px; flex-wrap: wrap; }
.mr-picklist { max-height: 160px; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border: 1px solid var(--line2);
  border-radius: 9px; margin-top: 6px; }
.mr-picklist .mr-check { font-size: 12px; color: var(--ink); }
.mr-picklist small { font-size: 10.5px; }
.mr-db > input[data-rsq] { margin: 0; }

/* ── окна ───────────────────────────────────────────────── */
.mr-wrap { position: fixed; inset: 0; z-index: 1900; background: rgba(20, 16, 12, .42); display: flex; align-items: center;
  justify-content: center; padding: 16px; }
.mr-wrap svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mr-dlg { width: min(720px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--card);
  color: var(--ink); border-radius: 16px; box-shadow: var(--shadow-float); overflow: hidden; }
.mr-dlg.mr-small { width: min(560px, 100%); }
.mr-dlg.mr-wide-d { width: min(860px, 100%); }
.mr-dh { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line2); }
.mr-dh > div { flex: 1; min-width: 0; }
.mr-dh h3 { margin: 0; font-size: 15px; font-weight: 650; }
.mr-dh p { margin: 3px 0 0; font-size: 11.5px; color: var(--ink2); }
.mr-db { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.mr-db h4 { margin: 4px 0 0; font-size: 12.5px; font-weight: 650; }
.mr-db > .btn-ghost.sm { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 30px; }
.mr-df { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line2); }
.mr-df .btn-brand, .mr-df .btn-ghost { display: inline-flex; align-items: center; gap: 6px; height: 38px; }
.mr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mr-otbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.mr-otbl th { text-align: left; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); font-weight: 600; padding: 6px 4px; }
.mr-otbl td { padding: 7px 4px; border-top: 1px solid var(--line2); vertical-align: middle; }
.mr-otbl td b { display: block; font-weight: 600; }
.mr-otbl td small { font-size: 10.5px; color: var(--ink3); }
.mr-otbl td:nth-child(n+2), .mr-otbl th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.mr-otbl .mr-in { width: 90px; height: 32px; }

.mr-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 2000; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 12px; background: var(--ink);
  color: var(--card); font-size: 12.5px; box-shadow: var(--shadow-float); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.mr-toast.on { opacity: 1; transform: translate(-50%, 0); }
.mr-toast svg { color: var(--ok); }

/* ── снаружи: вкладка объекта и «Снабжение» ─────────────── */
.mr-site { padding: 12px 0; }
.mr-site-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 var(--gut, 25px) 6px; font-size: 12px; color: var(--ink2); }
.mr-site-h .btn-brand.sm { height: 30px; display: inline-flex; align-items: center; gap: 5px; }
.mr-site .mr-list { padding-top: 6px; }
.mr-snab { padding: 18px var(--gut, 25px); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mr-snab .btn-brand { display: inline-flex; align-items: center; gap: 6px; }
.mr-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.mr-tile { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 12px 16px; border: 1px solid var(--line2); border-radius: 14px;
  background: var(--card); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.mr-tile:hover { border-color: var(--brand); }
.mr-tile b { font-size: 24px; font-weight: 700; }
.mr-tile span { font-size: 12.5px; font-weight: 600; }
.mr-tile small { font-size: 11px; color: var(--ink3); }

/* ── узко ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .mr-card { grid-template-columns: minmax(0, 1fr); }
  .mr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mr-wide span { display: none; }
}
@media (max-width: 980px) {
  /* Заявка — в одну колонку: спецификация, а «что в заявке» — следующим
     экраном по кнопке внизу. */
  .mr-ed { grid-template-columns: minmax(0, 1fr); }
  .mr-cart { display: none; position: static; max-height: none; border-left: 0; min-height: 0; padding: 14px var(--gut) 90px; background: var(--bg); }
  .mr-ed.on-cart .mr-cat { display: none; }
  .mr-ed.on-cart .mr-cart { display: flex; }
  .mr-mbar { display: flex; position: sticky; bottom: 0; z-index: 4; padding: 10px var(--gut) 12px;
    background: linear-gradient(to top, var(--bg) 70%, transparent); grid-column: 1 / -1; }
  .mr-mbar-b { width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; }
  .mr-mbar-b:disabled { opacity: .5; box-shadow: none; }
  .mr-ed.on-cart .mr-mbar { order: -1; position: sticky; top: 0; background: var(--bg); }
  .mr-cat { padding-bottom: 10px; }
}
@media (max-width: 760px) {
  .mr-pg { --gut: 14px; }
  .mr-head .btn-brand.sm span, .mr-head .btn-ghost.sm span { display: none; }
  .mr-head .btn-brand.sm, .mr-head .btn-ghost.sm { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .mr-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no d" "m m" "st st"; gap: 6px 10px; padding: 12px; }
  .mr-row-no { grid-area: no; }
  .mr-row-m { grid-area: m; }
  .mr-row-st { grid-area: st; justify-content: flex-start; }
  .mr-row-d { grid-area: d; }
  .mr-search { margin-left: 0; width: 100%; }
  .mr-bar { gap: 8px; }
  .mr-seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .mr-seg::-webkit-scrollbar { display: none; }
  /* Сообщение — сверху: внизу оно ложилось на «Отправить». */
  .mr-toast { top: calc(var(--stick, 50px) + 10px); bottom: auto; transform: translate(-50%, -20px); }
  .mr-toast.on { transform: translate(-50%, 0); }
  /* Поля не мельче 16px: иначе iOS при вводе увеличивает страницу. */
  .mr-search input, .mr-search.big input, .mr-qty input, .mr-cl-q input, .mr-in, .mr-fl input, .mr-fl textarea, .mr-reason,
  .mr-free input, .mr-act-p textarea, .mr-act-p > input, .mr-stp-h input { font-size: 16px; }
  .mr-it { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .mr-it-t > b { font-size: 14px; }
  .mr-qty { justify-content: flex-end; }
  .mr-qty button { width: 44px; height: 44px; }
  .mr-qty input { width: 96px; height: 44px; }
  .mr-sug { flex-wrap: wrap; }
  .mr-add { height: 38px; }
  .mr-form { grid-template-columns: minmax(0, 1fr); }
  .mr-cart-a { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; }
  .mr-cart-a .btn-brand, .mr-cart-a .btn-ghost { height: 46px; font-size: 14px; }
  .mr-l { grid-template-columns: minmax(0, 1fr) auto; }
  .mr-l-in { grid-column: 1 / -1; justify-content: flex-end; }
  .mr-act-p.go { flex-direction: column; align-items: stretch; }
  .mr-act-p .btn-brand, .mr-act-p .btn-ghost { height: 44px; flex: 1; justify-content: center; }
  .mr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .mr-facts div:first-child { grid-column: 1 / -1; }
  .mr-pg-head { display: none; }
  .mr-pg-r { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .mr-pg-s, .mr-pg-d { grid-column: 2 / -1; text-align: left; justify-content: flex-start; }
  .mr-row2 { grid-template-columns: minmax(0, 1fr); }
  .mr-dlg { max-height: calc(100dvh - 16px); border-radius: 14px; }
  .mr-wrap { padding: 8px; align-items: flex-end; }
}