/* ============================================================
   NOMAD CRM — дополнения к дизайн-системе /site/css/ui.css
   ============================================================ */
:root {
  --side-w: 232px;
  /* графики: 1 — бирюза Nomad (чуть насыщеннее фирменной #008080, чтобы не читалась серой),
     2 — оранжевый. Пара проверена валидатором палитры на белом фоне: яркость, насыщенность,
     различимость при нарушениях цветового зрения (ΔE 10,6), контраст ≥ 3:1. */
  --series-1: #008e86; --series-2: #eb6834;
  --grid: #e6ecec; --axis: #c9d5d5; --chart-ink: #64757c;
}
body { background: var(--bg); }
.mob-only { display: none !important; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.gap8 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mt8 { margin-top: 8px; } .mb8 { margin-bottom: 8px; } .mt14 { margin-top: 14px; } .mt20 { margin-top: 20px; } .mb14 { margin-bottom: 14px; }
.w100 { width: 100%; }
.link { color: var(--teal); cursor: pointer; font-weight: 600; }
.link:hover { text-decoration: underline; }
.muted-b { color: var(--muted); font-weight: 600; }
.warn-txt { color: var(--orange); } .err-txt { color: var(--red); } .ok-txt { color: var(--green); }
.ico-inline { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------- вход ---------------- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(160deg, #072e2e 0%, #0b4a44 55%, #0e5c52 100%); }
.auth-card { background: #fff; border-radius: var(--r-xl); padding: 30px 28px; width: 400px; max-width: 100%;
  box-shadow: var(--sh-3); }
.auth-card h1 { font-size: 21px; font-weight: 900; margin: 18px 0 16px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-family: var(--fh); font-weight: 900; font-size: 17px; }
.auth-brand b { display: block; font-size: 10px; letter-spacing: .12em; color: var(--teal); font-weight: 700; }
.auth-brand span { line-height: 1.15; }
.auth-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; }
.auth-demo-t { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.auth-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-demo .btn { flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; min-height: 0;
  text-align: left; white-space: normal; line-height: 1.2; }
.auth-demo .btn b { font-size: 13px; }
.auth-demo .btn small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.auth-demo-or { text-align: center; font-size: 12px; color: var(--muted); margin: 14px 0 10px; }
.form-msg { border-radius: var(--r-m); padding: 11px 14px; font-size: 13.5px; margin-bottom: 12px; }
.form-msg.err { background: var(--red-bg); color: var(--red); }
.form-msg.ok { background: var(--green-bg); color: var(--green); }
.form-msg.warn { background: var(--orange-bg); color: var(--orange); }
/* предупреждения сервера (409 warnings): список и жёлтая подсветка полей */
.field.warn input, .field.warn select, .field.warn textarea, .inp.warn { border-color: var(--orange); background: var(--orange-bg); }
.warn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.warn-list li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-m); background: var(--orange-bg); font-size: 13.5px; }
.warn-list li > b { color: var(--orange); }
.warn-list li span { font-size: 13px; }

/* ---------------- каркас ---------------- */
.topbar { gap: 14px; }
.brand img { flex-shrink: 0; }
.side { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); padding: 10px 8px 20px; }
.side-item { padding: 9px 12px; min-height: 40px; font-size: 14px; }
.side-item .cnt.red { background: var(--red); }
.side-back { position: fixed; inset: 0; background: rgba(9,35,35,.45); z-index: 70; }
.main { padding: 20px 24px 40px; }
.page-head h1 { font-size: 21px; }
.page-head .sub { font-size: 13px; color: var(--muted); width: 100%; margin-top: -6px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: var(--muted); cursor: pointer; margin-bottom: 8px; }
.back-link:hover { color: var(--teal); }

/* быстрый поиск */
.gsearch { position: relative; flex: 1; max-width: 520px; margin-left: 12px; }
.gsearch input { width: 100%; min-height: 40px; padding: 9px 14px 9px 38px; border: 1.5px solid var(--line);
  border-radius: var(--r-m); background: var(--bg); outline: none; font-size: 14px; }
.gsearch input:focus { border-color: var(--teal); background: #fff; }
.gsearch-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted);
  display: inline-flex; pointer-events: none; }
.gsearch-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-3); max-height: 60vh;
  overflow-y: auto; z-index: 90; padding: 6px; }
.gs-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: var(--r-s); cursor: pointer; }
.gs-item:hover, .gs-item.on { background: var(--teal-soft); }
.gs-item .t { font-weight: 700; font-size: 14px; }
.gs-item .s { font-size: 12px; color: var(--muted); }
.gs-type { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--teal-d); background: var(--teal-soft); border-radius: 6px; padding: 3px 7px; flex-shrink: 0; min-width: 72px; text-align: center; }
.gs-empty { padding: 14px; color: var(--muted); font-size: 13.5px; text-align: center; }

/* ---------------- панели и вкладки ---------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tab { border: none; background: none; padding: 10px 14px; font-weight: 700; font-size: 14px; color: var(--muted);
  cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--teal-d); border-bottom-color: var(--teal); }
.tab .n { font-size: 11px; background: var(--line); color: var(--muted); border-radius: 9px; padding: 1px 7px; margin-left: 5px; }
.seg-sm { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: #fff; }
.seg-sm button { border: none; background: none; padding: 8px 13px; font-weight: 700; font-size: 13px;
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; }
.seg-sm button + button { border-left: 1.5px solid var(--line); }
.seg-sm button.on { background: var(--teal-soft); color: var(--teal-d); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats-5 .stat { min-width: 0; }
.stats-5 .stat .v { font-size: 20px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.stats-5 .stat .v.sh-dates { font-size: 14px; font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) { .stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-nofin { color: var(--muted); cursor: help; border-bottom: 1px dotted var(--muted); }
.stat .v small { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 3px; }
.stat .v.multi { font-size: 19px; line-height: 1.3; }
.stat .hint-i { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.stat.warn { border-color: #f0d9a8; background: #fffaf0; }
.stat.bad { border-color: #f3c7c7; background: #fff7f7; }

.card + .card { margin-top: 14px; }
.card-h .actions { display: flex; gap: 8px; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 7px 14px; font-size: 14px; }
.kv > span { color: var(--muted); }
.kv > b { font-weight: 600; word-break: break-word; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.split-l { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }

/* таблицы: плотнее, чем в кабинете */
.tbl td { padding: 10px 12px; font-size: 13.5px; }
.tbl th { padding: 10px 12px; }
.tbl .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tbl-scroll { overflow-x: auto; }
.tbl tfoot td { font-weight: 800; background: #fafcfc; border-top: 1.5px solid var(--line); }
.row-attn td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.row-bad td:first-child { box-shadow: inset 3px 0 0 var(--red); }

/* статусы: всегда текст + цвет */
.pill { font-size: 11.5px; padding: 3px 10px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* ---------------- канбан ---------------- */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kcol { flex: 0 0 272px; background: #eef3f3; border-radius: var(--r-l); padding: 10px; max-height: calc(100vh - 220px);
  display: flex; flex-direction: column; }
.kcol-h { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.kcol-h b { font-size: 13.5px; flex: 1; }
.kcol-h .n { font-size: 12px; font-weight: 800; color: var(--muted); background: #fff; border-radius: 10px; padding: 1px 8px; }
.kcol-body { overflow-y: auto; flex: 1; min-height: 60px; border-radius: var(--r-m); transition: background .15s; }
.kcol-body.drop { background: rgba(0,128,128,.08); outline: 2px dashed var(--teal-l); }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); padding: 11px 12px;
  margin-bottom: 8px; cursor: pointer; box-shadow: var(--sh-1); transition: .15s; }
.kcard:hover { border-color: var(--teal-l); }
.kcard.dragging { opacity: .5; }
.kcard .t { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.kcard .c { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.kcard .m { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.kcard .ns { font-size: 12px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft); color: var(--muted); }
.kcard .ns.late { color: var(--red); font-weight: 600; }
.kcard.attn { border-left: 3px solid var(--orange); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 6px; background: #eef1f2; color: var(--ink-2); }
.tag.teal { background: var(--teal-soft); color: var(--teal-d); }
.tag.new { background: var(--teal); color: #fff; }
.kcard.new { border-left: 3px solid var(--teal); }
.kcard .la { font-size: 12px; color: var(--ink-2); margin-top: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kcard .la span { color: var(--muted); }
.kcard .t { overflow-wrap: anywhere; }
.kcol.won { background: #e8f4ee; }
.kdrops { display: none; gap: 12px; margin-top: 4px; }
.kdrops.show { display: flex; }
.kdrop { flex: 1; border: 2px dashed var(--line); border-radius: var(--r-l); padding: 16px; text-align: center; font-weight: 700;
  color: var(--muted); transition: .15s; }
.kdrop.drop { border-color: var(--orange); color: var(--ink); background: #fff7ec; }
.kdrop.lost.drop { border-color: var(--red); background: #fdf0f0; }
.date-f { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.date-f .inp { width: auto; }
.form-view { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 6px 12px; font-size: 13.5px; }
.form-view span { color: var(--muted); }
.form-view b { font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.next-card b { display: block; }
.last-msg { background: var(--bg); border-radius: var(--r-m); padding: 9px 11px; font-size: 13px; margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------------- лента событий ---------------- */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.feed-item:last-child { border-bottom: none; }
.feed-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--teal-soft); color: var(--teal-d);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feed-ic.sys { background: #eef1f2; color: var(--muted); }
.feed-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.feed-text { white-space: pre-wrap; word-break: break-word; }
.composer { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; }
.composer textarea { flex: 1; min-height: 44px; max-height: 160px; resize: vertical; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-m); outline: none; font-size: 14px; min-width: 200px; }
.composer textarea:focus { border-color: var(--teal); }

/* этапы сделки */
.stagebar { display: flex; gap: 3px; margin: 4px 0 16px; overflow-x: auto; padding-bottom: 3px; }
.stagebar button { flex: 1; min-width: 92px; border: none; background: #e7eeee; color: var(--muted); font-size: 11.5px;
  font-weight: 700; padding: 9px 6px; cursor: pointer; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); }
.stagebar button:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.stagebar button.done { background: #bfe3df; color: var(--teal-d); }
.stagebar button.cur { background: var(--teal); color: #fff; }
.stagebar button:disabled { cursor: default; }

/* ---------------- графики ---------------- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .axis-t { fill: var(--chart-ink); font-size: 11px; font-family: var(--fb); }
.chart .val-t { fill: var(--ink); font-size: 11px; font-weight: 700; font-family: var(--fb); }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover + .bar-hl, .chart .col:hover .bar { filter: brightness(1.08); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tip { position: absolute; pointer-events: none; background: #102a2a; color: #fff; border-radius: 9px; padding: 8px 11px;
  font-size: 12.5px; line-height: 1.45; box-shadow: var(--sh-2); z-index: 5; white-space: nowrap; transform: translate(-50%, -100%); }
.tip b { font-weight: 800; }
.tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.hbar { display: grid; grid-template-columns: 170px 1fr 70px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; }
.hbar .track { height: 14px; background: #eef3f3; border-radius: 4px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--series-1); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbar .num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.fx-note b { color: var(--ink-2); }

/* ---------------- чаты ---------------- */
.chat-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; height: calc(100vh - 190px); min-height: 480px; }
.chat-list { border-right: 1px solid var(--line); overflow-y: auto; }
.chat-li { display: flex; gap: 10px; padding: 11px 13px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.chat-li:hover { background: #f7fbfb; }
.chat-li.on { background: var(--teal-soft); }
.chat-li .av { width: 36px; height: 36px; border-radius: 11px; background: #e3eeee; color: var(--teal-d);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; font-size: 13px; }
.chat-li .t { font-weight: 700; font-size: 13.5px; display: flex; gap: 6px; }
.chat-li .t span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-li .l { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-li .u { background: var(--teal); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 9px; padding: 1px 7px; }
.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.chat-head b { flex: 1; font-size: 15px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #fafcfc; }
.msg { max-width: 74%; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line);
  font-size: 14px; align-self: flex-start; word-break: break-word; white-space: pre-wrap; }
.msg.me { align-self: flex-end; background: var(--teal-soft); border-color: #cfe7e4; }
.msg .a { font-size: 11.5px; font-weight: 800; color: var(--teal-d); margin-bottom: 2px; }
.msg .ts { font-size: 10.5px; color: var(--muted); margin-top: 3px; text-align: right; }
.msg .mention { color: var(--teal-d); font-weight: 700; }
.msg.out-not-sent { border-color: #f0d9a8; background: #fffaf0; }
.msg .dlv { font-size: 11px; color: var(--orange); margin-top: 3px; }
.chat-input { border-top: 1px solid var(--line); padding: 10px; display: flex; gap: 8px; align-items: flex-end; }
.chat-input textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-m); outline: none; font-size: 14px; }
.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); padding: 30px; text-align: center; }
.mention-drop { position: absolute; bottom: 64px; left: 12px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-m); box-shadow: var(--sh-3); max-height: 220px; overflow-y: auto; z-index: 10; min-width: 240px; }
.mention-drop div { padding: 8px 12px; cursor: pointer; font-size: 13.5px; }
.mention-drop div:hover { background: var(--teal-soft); }
.channel-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--orange-bg); color: var(--orange);
  border-radius: var(--r-m); padding: 10px 13px; font-size: 13px; margin-bottom: 12px; }

/* ---------------- задачи ---------------- */
.task-row { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; background: #fff; }
.task-row:hover { background: #f7fbfb; }
.task-row:last-child { border-bottom: none; }
.task-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--axis); flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; background: #fff; }
.task-check.done { background: var(--teal); border-color: var(--teal); }
.task-row .t { font-weight: 700; font-size: 14px; }
.task-row.done .t { text-decoration: line-through; color: var(--muted); }
.task-row .m { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--muted); align-items: center; }
.prio-urgent { color: var(--red); font-weight: 800; } .prio-high { color: var(--orange); font-weight: 700; }
.checklist-item { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; }
.checklist-item input { width: 18px; height: 18px; accent-color: var(--teal); }
.checklist-item.done span { text-decoration: line-through; color: var(--muted); }

/* ---------------- график смен ---------------- */
.sched { overflow-x: auto; }
.sched table { border-collapse: collapse; min-width: 100%; }
.sched th, .sched td { border: 1px solid var(--line-soft); padding: 6px; font-size: 12px; text-align: center; min-width: 46px; }
.sched th { background: #fafcfc; font-weight: 700; color: var(--muted); }
.sched td.nm { text-align: left; min-width: 180px; font-weight: 600; font-size: 13px; position: sticky; left: 0; background: #fff; }
.sched th.we, .sched td.we { background: #f7f9f9; }
.sched th.today { color: var(--teal-d); background: var(--teal-soft); }
.shift { border-radius: 6px; padding: 4px 2px; font-weight: 700; font-size: 11px; cursor: pointer; }
.shift.planned { background: var(--teal-soft); color: var(--teal-d); }
.shift.worked { background: var(--green-bg); color: var(--green); }
.shift.absent { background: var(--red-bg); color: var(--red); }
.shift.cancelled { background: #eef1f2; color: var(--muted); text-decoration: line-through; }
.shift.night { background: #e6e3f7; color: #4a3aa7; }
.sched td.add { cursor: pointer; color: transparent; }
.sched td.add:hover { color: var(--teal); background: #f5fbfb; }

/* прогресс KPI */
.progress { height: 8px; background: #eef3f3; border-radius: 4px; overflow: hidden; }
.progress > div { height: 100%; background: var(--teal); border-radius: 4px; }
.progress > div.over { background: var(--green); }

/* права: матрица */
.matrix { overflow-x: auto; }
.matrix table { border-collapse: collapse; font-size: 12.5px; }
.matrix th, .matrix td { border: 1px solid var(--line-soft); padding: 6px 8px; }
.matrix th { background: #fafcfc; font-size: 11px; white-space: nowrap; }
.matrix td.p { white-space: nowrap; font-weight: 600; position: sticky; left: 0; background: #fff; }
.matrix td.g { background: #f4f8f8; font-weight: 800; font-size: 11px; text-transform: uppercase; color: var(--muted); }
.matrix select { border: 1px solid var(--line); border-radius: 6px; font-size: 12px; padding: 3px; background: #fff; }
.matrix .s-all { color: var(--teal-d); font-weight: 800; } .matrix .s-warehouse { color: #4a3aa7; font-weight: 700; }
.matrix .s-own { color: var(--orange); font-weight: 700; } .matrix .s-none { color: #c2cccc; }

/* документ: предпросмотр */
.doc-preview { border: 1px solid var(--line); border-radius: var(--r-m); background: #fff; width: 100%; height: 640px; }

/* уведомления */
.ntf { display: flex; gap: 11px; padding: 11px 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.ntf.unread b { color: var(--teal-d); }
.ntf p { font-size: 13.5px; }

/* баннеры */
.banner { display: flex; gap: 11px; align-items: flex-start; border-radius: var(--r-m); padding: 12px 15px; font-size: 13.5px;
  margin-bottom: 14px; line-height: 1.5; }
.banner.info { background: var(--blue-bg); color: var(--blue); }
.banner.warn { background: var(--orange-bg); color: var(--orange); }
.banner.ok { background: var(--green-bg); color: var(--green); }
.banner .ico { flex-shrink: 0; margin-top: 2px; }

/* ---------------- телефон ---------------- */
@media (max-width: 1180px) {
  .split, .split-l { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .mob-only { display: inline-flex !important; }
  .gsearch { display: none; margin: 0; }
  .gsearch.mobile-open { display: block; position: fixed; top: 8px; left: 8px; right: 8px; max-width: none; z-index: 95; }
  .gsearch.mobile-open input { background: #fff; box-shadow: var(--sh-3); min-height: 46px; }
  .brand span { display: none; }
  .side { display: block; position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; z-index: 80; width: 270px;
    transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--sh-3); padding-top: 16px; }
  .side.open { transform: none; }
  .main { padding: 14px 12px 88px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv > span { margin-top: 8px; font-size: 12px; }
  .kcol { flex-basis: 84vw; max-height: none; }
  .chat-layout { grid-template-columns: 1fr; height: calc(100vh - 170px); }
  .chat-layout.in-room .chat-list { display: none; }
  .chat-layout:not(.in-room) .chat-main { display: none; }
  .msg { max-width: 88%; }
  .hbar { grid-template-columns: 110px 1fr 56px; }
  .stats, .stats-5 { grid-template-columns: 1fr 1fr; }
  .tbl-wrap.responsive + .cards-list { display: block; }
  .doc-preview { height: 460px; }
}
@media (max-width: 420px) {
  .stats { gap: 8px; }
  .stat { padding: 12px 13px; }
  .stat .v { font-size: 20px; }
  .stat .v.multi { font-size: 15px; }
  .stat .hint-i { font-size: 11px; }
}
@media (max-width: 330px) { .stats { grid-template-columns: 1fr; } }

/* ============================================================
   Версия 2: спокойный стиль, крупнее текст, меньше шума.
   Одна система для CRM и кабинета клиента.
   ============================================================ */
:root { --bg: #f4f6f5; --line: #e2e8e7; --line-soft: #edf2f1; --muted: #5d6d72; --r-l: 14px; }
body { font-size: 15px; color: var(--ink); -webkit-font-smoothing: antialiased; }
.field > label { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.tbl th { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); background: #fafbfb; padding: 11px 14px; }
.tbl td { font-size: 14px; padding: 12px 14px; }
.card { box-shadow: 0 1px 2px rgba(16,40,40,.04); padding: 20px 22px; }
.card-h h3 { font-size: 16px; font-weight: 700; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.page-head .sub { font-size: 14px; margin-top: -2px; }
.side-item { font-size: 14.5px; font-weight: 600; }
.side-item.on { background: var(--teal-soft); }
.pill { font-size: 12px; font-weight: 700; padding: 4px 10px; }
.btn { font-weight: 700; }
.muted-note { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* приветствие и ключевые цифры */
.hello h1 { font-size: 26px; font-weight: 800; }
.hello p { color: var(--muted); margin-top: 2px; }
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.num-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 15px 17px; cursor: pointer; transition: .15s; }
.num-card:hover { border-color: var(--teal-l); }
.num-card .l { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.num-card .v { font-family: var(--fh); font-size: 27px; font-weight: 800; margin-top: 4px; line-height: 1.15; }
.num-card .v.multi { font-size: 19px; }
.num-card .h { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* список дел на сегодня */
.act-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.act { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px; border-left-width: 4px; }
.act.bad { border-left-color: #d24b4b; } .act.warn { border-left-color: #e0a13a; } .act.info { border-left-color: var(--teal); }
.act-h { display: flex; align-items: center; gap: 10px; }
.act-h b { font-size: 15.5px; flex: 1; }
.act-h a { font-size: 13px; font-weight: 700; white-space: nowrap; }
.act-item { display: block; padding: 10px 0 9px; border-top: 1px solid var(--line-soft); color: var(--ink); cursor: pointer; }
.act-item:first-of-type { margin-top: 10px; }
.act-item .t { font-weight: 600; font-size: 14px; display: block; }
.act-item .s { font-size: 13px; color: var(--muted); display: block; margin-top: 1px; }
.act-item:hover .t { color: var(--teal-d); }
.act-more { font-size: 13px; color: var(--muted); margin-top: 6px; }
.all-clear { background: #fff; border: 1px dashed var(--line); border-radius: var(--r-l); padding: 26px; text-align: center; color: var(--muted); }
.all-clear b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
/* «Сегодня»: карточки-действия */
.tc-h { font-size: 17px; font-weight: 800; margin: 4px 0 10px; }
.tc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tc { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--r-l); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tc-red { border-left-color: #d64545; }
.tc-yellow { border-left-color: #e5a800; }
.tc-t { font-size: 13px; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
.tc-n { font-family: var(--fh); font-size: 36px; font-weight: 800; line-height: 1.1; }
.tc-a { align-self: flex-start; margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--teal-d); padding: 5px 12px; border-radius: 99px; background: var(--teal-soft); }
.tc-a:hover { filter: brightness(.96); }
.tc-wide { margin-bottom: 14px; }
.tc-wide .tc-t { font-size: 14px; color: var(--ink); }
.tc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 20px; margin-top: 4px; }
.tc-u { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tc-u:hover span { color: var(--teal-d); }
.tc-calm { padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--r-l); color: var(--muted); margin-bottom: 14px; }
.tc-month { font-size: 13px; color: var(--muted); margin: 6px 0 20px; }
@media (max-width: 1100px) { .tc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tc-grid { grid-template-columns: 1fr; gap: 10px; } .tc-a { align-self: stretch; text-align: center; padding: 10px 12px; } .tc-list { grid-template-columns: 1fr; } }

/* сегменты-фильтры */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.segs { display: inline-flex; background: #eaf0ef; border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segs button { border: none; background: none; padding: 7px 13px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--ink-2);
  cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.segs button.on { background: #fff; color: var(--teal-d); box-shadow: 0 1px 3px rgba(9,40,40,.1); }
.segs button .n { font-size: 11.5px; font-weight: 800; color: var(--muted); background: rgba(0,0,0,.06); border-radius: 8px; padding: 0 6px; }
.segs button.on .n { background: var(--teal-soft); color: var(--teal-d); }
.segs button .n.red { background: var(--red); color: #fff; }

/* вторичные действия — в меню «Ещё» */
.menu-pop { position: fixed; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-3);
  padding: 6px; z-index: 250; min-width: 230px; max-width: 92vw; }
.menu-pop button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px 12px; border: none; background: none;
  border-radius: 8px; font-size: 14px; cursor: pointer; text-align: left; color: var(--ink); min-height: 40px; }
.menu-pop button:hover { background: var(--bg); }
.menu-pop button.danger { color: var(--red); }
.menu-pop .sep { height: 1px; background: var(--line-soft); margin: 4px 6px; }

/* прогресс статуса поставки */
.flow { display: flex; gap: 4px; margin: 6px 0 16px; overflow-x: auto; padding-bottom: 2px; }
.flow span { flex: 1 1 0; min-width: 76px; text-align: center; font-size: 12px; font-weight: 700; padding: 7px 6px; border-radius: 8px;
  background: #edf2f1; color: var(--muted); line-height: 1.25; display: flex; align-items: center; justify-content: center; }
.flow span.done { background: #d5ece9; color: var(--teal-d); }
.flow span.cur { background: var(--teal); color: #fff; }
.flow span.bad { background: var(--red); color: #fff; }

/* шаблоны ответов */
.tpl { padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 8px; cursor: pointer; }
.tpl:hover { border-color: var(--teal-l); background: #fbfefe; }
.tpl b { font-size: 14px; }
.tpl p { font-size: 13px; color: var(--muted); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.var { display: inline-block; background: var(--teal-soft); color: var(--teal-d); border-radius: 6px; padding: 0 6px; font-size: 12.5px; font-weight: 700; }

/* финансовые таблицы (ДДС, P&L) */
.fin-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; }
.fin { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13.5px; }
.fin th, .fin td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin th:first-child, .fin td:first-child { text-align: left; position: sticky; left: 0; background: #fff; min-width: 200px; white-space: normal; }
.fin thead th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: #fafbfb; }
.fin thead th:first-child { background: #fafbfb; }
.fin tr.sec td { background: #f6f9f9; font-weight: 800; color: var(--ink-2); font-size: 12.5px; }
.fin tr.sec td:first-child { background: #f6f9f9; }
.fin tr.tot td { font-weight: 800; border-top: 1.5px solid var(--line); }
.fin tr.res td { font-weight: 800; background: var(--teal-soft); }
.fin tr.res td:first-child { background: var(--teal-soft); }
.fin .neg { color: var(--red); }
.fin td.total, .fin th.total { background: #fafbfb; font-weight: 800; }

/* кабинет клиента: шаги создания поставки */
.lines-tbl input { min-height: 40px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 9px; width: 100%; font-size: 14px; }
.lines-tbl td { padding: 6px 6px; border-bottom: none; }
.lines-tbl .x { color: var(--muted); cursor: pointer; border: none; background: none; padding: 6px; }
.info-line { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }

@media (max-width: 900px) {
  .page-head h1, .hello h1 { font-size: 21px; }
  .act-grid { grid-template-columns: 1fr; }
  .nums { grid-template-columns: 1fr 1fr; gap: 10px; }
  .num-card .v { font-size: 22px; }
  .segs { width: 100%; }
  .segs button { flex: 1 1 auto; justify-content: center; }
}

.grid > *, .split > *, .split-l > * { min-width: 0; }
.card { min-width: 0; }
.tbl th.num { text-align: right; }
.rec .sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.rec-top b { font-weight: 700; }
@media (max-width: 900px) {
  .flow { flex-wrap: wrap; overflow: visible; }
  .flow span { flex: 1 1 30%; min-width: 0; font-size: 11.5px; padding: 6px 4px; }
  .page-head .btn { min-height: 42px; }
}
.msg { white-space: normal; }
.msg .tx { white-space: pre-wrap; }
.chat-head b { min-width: 0; }
.demo-ribbon { background: #fdf3e0; color: #8a5a12; text-align: center; font-size: 12.5px; font-weight: 700; padding: 5px 10px; }

/* ===== версия 5: расчёт, передача работы, направления, документы заказа ===== */
.quote-box { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; background: var(--bg-soft, #fafcfc); }
.quote-total { font-size: 22px; font-weight: 800; margin: 10px 0 12px; }
.ho-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ho-step { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; background: #fff; }
.ho-step.pending { border-color: #f0c27b; background: #fffaf2; }
.ho-step.accepted { border-color: #9cc7e6; background: #f5faff; }
.ho-step.done { border-color: #bfe3cf; background: #f6fcf8; }
.ho-step.waiting, .ho-step.skipped { opacity: .7; }
.ho-step.late { border-color: #e7a19a; background: #fff6f5; }
.ho-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.ho-miss { margin-top: 8px; padding: 8px; border-radius: 8px; background: #fff4f2; color: #9b2c22; }
.ho-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.doc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.doc-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.doc-row > span:first-child { display: flex; align-items: center; gap: 6px; }
.doc-row .xs { grid-column: 1 / -1; }
.ok-txt { color: #1e7b4f; }
@media (max-width: 900px) { .ho-chain { grid-template-columns: 1fr 1fr; } .doc-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ho-chain { grid-template-columns: 1fr; } }

/* ---------------- версия 6: боковая панель, фильтры по кнопке, вкладки «Ещё» ---------------- */
.drawer-back { position: fixed; inset: 0; background: rgba(9,35,35,.32); z-index: 190; opacity: 0; transition: opacity .18s; }
.drawer-back.on { opacity: 1; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100%; background: #fff; box-shadow: var(--sh-3);
  display: flex; flex-direction: column; transform: translateX(24px); transition: transform .2s ease; }
.drawer.wide { width: 720px; }
.drawer-back.on .drawer { transform: none; }
.drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 10px; }
.drawer-t { flex: 1; min-width: 0; }
.drawer-t h3 { font-size: 18px; font-weight: 800; line-height: 1.3; }
.drawer-sub { font-size: 13px; color: var(--muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; border-bottom: 1px solid var(--line); }
.drawer-actions:empty { display: none; }
.drawer-body { padding: 16px 20px 24px; overflow-y: auto; flex: 1; }
.drawer-body .kv { margin-bottom: 4px; }
.drawer-sec { margin-top: 18px; }
.drawer-sec h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; font-family: var(--fb); font-weight: 700; }
@media (max-width: 700px) { .drawer { width: 100%; } .drawer-head { padding: 14px 16px 8px; } .drawer-actions, .drawer-body { padding-left: 16px; padding-right: 16px; } }

.filter-pop { position: absolute; z-index: 240; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3);
  padding: 14px; width: 340px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 10px; }
.fp-row { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; }
.fp-row .segs { flex-wrap: wrap; }
.fp-row .inp { width: 100%; }
.fp-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line-soft); margin-top: 2px; padding-top: 10px; }
.btn.has-filters { border-color: var(--teal); color: var(--teal-d); }
.btn .n { font-size: 11.5px; font-weight: 800; background: var(--teal-soft); color: var(--teal-d); border-radius: 8px; padding: 0 6px; }
.tab-more { display: inline-flex; align-items: center; gap: 4px; }

/* единая верхняя панель раздела: поиск, переключатели, фильтры, «Ещё», основное действие */
.vbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.vbar .inp.search { flex: 1 1 200px; max-width: 320px; min-width: 160px; }
.vbar .spacer { flex: 1; }
@media (max-width: 700px) { .vbar .inp.search { max-width: none; flex-basis: 100%; } .vbar .segs { overflow-x: auto; max-width: 100%; } }

/* ДДС: таблица по структуре рабочей таблицы */
.dds-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.dds-src { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--muted); background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.dds-src b { color: var(--ink); }
table.fin tr.lvl-g td:first-child { font-weight: 700; }
table.fin tr.lvl-a td:first-child { padding-left: 22px; }
table.fin tr.lvl-s td:first-child { padding-left: 40px; color: var(--muted); font-size: 12.5px; }
table.fin tr.lvl-s td { font-size: 12.5px; }
table.fin tr.wal td:first-child { padding-left: 22px; color: var(--muted); }
table.fin tr.wal td { color: var(--ink-2); font-size: 12.5px; }
table.fin tr.tech td { color: var(--muted); font-style: italic; }
table.fin td.cell-link { cursor: pointer; }
table.fin td.cell-link:hover { background: var(--teal-soft); }
.rec-tbl td.bad { color: var(--red); font-weight: 700; }
.rec-tbl td.why { color: var(--orange); font-weight: 600; }
.rec-month { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: #fff; }
.rec-month > summary { cursor: pointer; padding: 10px 14px; display: flex; gap: 10px; align-items: center; font-weight: 700; }
.rec-month > div { padding: 0 14px 12px; }

.sys-line { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; margin: 0 0 14px; }
.sys-line > span { display: inline-flex; gap: 6px; align-items: center; }
.tboard .kcol { flex: 1 1 250px; }

/* ---------------- версия 7: раздел «Заявки» ---------------- */
:root { --st-slate: #8a9aa1; --st-blue: #5b8fd6; --st-teal: #2f9c94; --st-amber: #c99a3a; --st-violet: #8b7bc8; --st-green: #4f9d5d; --st-rose: #c97b8e; }
.st-slate { --stc: var(--st-slate); } .st-blue { --stc: var(--st-blue); } .st-teal { --stc: var(--st-teal); } .st-amber { --stc: var(--st-amber); }
.st-violet { --stc: var(--st-violet); } .st-green { --stc: var(--st-green); } .st-rose { --stc: var(--st-rose); }
.kcol { border-top: 3px solid var(--stc, var(--st-slate)); }
.kcol-h { display: flex; align-items: center; gap: 6px; }
.kcol-h b { flex: 1; min-width: 0; }
.kadd { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; padding: 0; }
.kadd:hover { color: var(--teal-d); border-color: var(--teal); }
.kcol-sum { font-size: 12px; color: var(--ink-2); font-weight: 700; padding: 0 4px 8px; font-variant-numeric: tabular-nums; min-height: 18px; }
.kempty { font-size: 12px; color: var(--muted); padding: 10px 4px; text-align: center; }
.kcard .m { flex-wrap: wrap; row-gap: 4px; }
.kc-src { font-size: 11.5px; color: var(--muted); }
.kc-amt { font-size: 12.5px; margin-top: 6px; }
.kc-who { font-size: 11.5px; color: var(--muted); margin-top: 6px; display: flex; gap: 4px; align-items: center; }
.kcard.saving { opacity: .55; pointer-events: none; }
.kcard.saving::after { content: "сохраняем…"; display: block; font-size: 11px; color: var(--teal-d); margin-top: 4px; }
.seg-sm button { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 700px) { .seg-sm .lbl { display: none; } }
.st-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--stc, var(--st-slate)); margin-right: 6px; vertical-align: middle; }
.st-bg-slate { background: var(--st-slate); } .st-bg-blue { background: var(--st-blue); } .st-bg-teal { background: var(--st-teal); } .st-bg-amber { background: var(--st-amber); }
.st-bg-violet { background: var(--st-violet); } .st-bg-green { background: var(--st-green); } .st-bg-rose { background: var(--st-rose); }
.danger-txt { color: var(--red); }
.stg-list { display: flex; flex-direction: column; gap: 8px; }
.stg-row { display: grid; grid-template-columns: 10px minmax(160px,1fr) 130px auto auto; gap: 8px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--line); border-left: 4px solid var(--stc, var(--st-slate)); border-radius: 10px; background: #fff; }
.stg-sw { width: 10px; height: 10px; border-radius: 50%; background: var(--stc); }
.stg-row .inp { min-height: 36px; }
.stg-hint { grid-column: 2 / -1; }
@media (max-width: 760px) { .stg-row { grid-template-columns: 10px 1fr; } .stg-row > *:nth-child(n+3) { grid-column: 2; } }
.src-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.src-row .src-name { flex: 1 1 160px; min-height: 36px; }
.src-row .src-dds { flex: 1 1 180px; min-height: 36px; font-size: 13px; }
.src-row.off .src-name { color: var(--muted); }
.an-insights { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.an-ins { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
.an-ins.warn { border-color: #f0dcb4; background: var(--orange-bg); }
.an-ins > span:nth-child(2) { flex: 1; }
.fn-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 90px minmax(120px, 220px); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.fn-name { font-weight: 600; font-size: 14px; }
.fn-bar { background: var(--bg); border-radius: 6px; height: 14px; overflow: hidden; }
.fn-bar span { display: block; height: 100%; border-radius: 6px; opacity: .8; }
.fn-num { text-align: right; font-variant-numeric: tabular-nums; }
.fn-meta { color: var(--muted); }
@media (max-width: 760px) { .fn-row { grid-template-columns: 1fr 70px; } .fn-bar { grid-column: 1 / -1; order: 3; } .fn-meta { grid-column: 1 / -1; order: 4; } }

/* версия 8: воронки, завершение и архив заявок */
.pipe-btn { font-weight: 700; }
.pipe-btn .lbl { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmenu { border: none; background: transparent; border-radius: 8px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; padding: 0; }
.kmenu:hover, .kmenu:focus-visible { background: #fff; color: var(--ink); }
.kcol-add { flex: 0 0 120px; align-self: stretch; min-height: 120px; border: 2px dashed var(--line); border-radius: var(--r-l); background: transparent;
  color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.kcol-add:hover { color: var(--teal-d); border-color: var(--teal); }
/* зоны завершения появляются внизу экрана, пока карточку тянут: их видно без прокрутки */
#kdrops.show { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(900px, calc(100vw - 32px)); z-index: 60;
  padding: 10px; background: rgba(255,255,255,.92); border-radius: 16px; box-shadow: 0 10px 30px rgba(15,40,40,.18); backdrop-filter: blur(4px); }
.kdrop { background: #fff; padding: 18px 12px; }
.kdrop.won { color: var(--green, #1f8a5a); }
.kdrop.won.drop { border-color: var(--green, #1f8a5a); background: #e8f4ee; color: var(--ink); }
.kdrop.lost { color: var(--red); }
.stagebar button.cur.lost { background: var(--red); color: #fff; }
.stg-sec { font-size: 14px; margin: 18px 0 4px; }
.stg-sec:first-of-type { margin-top: 4px; }
.pl-row { grid-template-columns: minmax(160px,1fr) auto auto; border-left-width: 1px; }
@media (max-width: 760px) { .pl-row { grid-template-columns: 1fr; } .pl-row > *:nth-child(n+2) { grid-column: 1; } .pipe-btn .lbl { max-width: 110px; } }
.tabs { overflow-y: hidden; }   /* вкладки в одну строку: без лишней вертикальной полосы прокрутки */

/* версия 9: каталог товаров клиентов и быстрый расчёт услуг */
.pthumb { width: 40px; height: 40px; border-radius: 10px; background: #eef3f3 center/cover no-repeat; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); flex: 0 0 auto; border: 1px solid var(--line); }
.pthumb.big { width: 96px; height: 96px; border-radius: 14px; }
.prow { display: flex; gap: 10px; align-items: flex-start; }
.prow > div { min-width: 0; }
.pcard-top { display: flex; gap: 16px; align-items: flex-start; }
.pdim { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.pdim > b { display: block; font-size: 13px; margin-bottom: 6px; }
.inp-static { padding: 9px 0; font-weight: 600; }
.pp-list { max-height: 52vh; overflow: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; }
.pp-row { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line-soft, #eef1f1); cursor: pointer; }
.pp-row:last-child { border-bottom: none; }
.pp-row:hover { background: #f4f8f8; }
.modal.modal-calc { max-width: 1180px; width: calc(100vw - 32px); }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.calc-out { position: sticky; top: 0; }
.calc-row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.calc-row3 .fp-row, .calc .fp-row { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.calc-sec { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.calc-sec h4 { font-size: 14px; margin: 0 0 8px; }
.calc-sec > summary { cursor: pointer; font-size: 14px; }
.calc-item, .calc-svc, .calc-route, .calc-adj { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.calc-adj { flex-wrap: wrap; }
.calc-adj .inp { flex: 1 1 140px; }
.ci-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ci-name b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.ci-f { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); width: 104px; }
.ci-f .inp { min-height: 34px; }
.calc-route select { flex: 1; min-width: 0; }
.inp-sm { min-height: 32px; font-size: 13px; padding: 4px 8px; }
#calc-res.loading { opacity: .55; transition: opacity .15s; }
.calc-total { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #eef7f6; margin-bottom: 10px; }
.calc-total b { font-size: 22px; font-weight: 800; }
.calc-miss { margin: 6px 0 0 16px; padding: 0; font-size: 13px; }
.calc-warn { margin-bottom: 8px; color: var(--orange); display: flex; flex-direction: column; gap: 3px; }
.calc-lines { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.cl { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 110px; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft, #eef1f1); align-items: start; }
.cl:last-child { border-bottom: none; }
.cl-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-n b { font-size: 13.5px; }
.cl-t { font-size: 13px; display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.cl-s { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cl.missing, .cl.no_price { background: var(--orange-bg); }
.cl.included, .cl.skip, .cl.zero { color: var(--muted); }
.cl.included .cl-s, .cl.skip .cl-s, .cl.zero .cl-s { font-weight: 400; }
.cl.adj { background: #f6f8fb; }
button.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; margin: 2px 2px 0 0; }
button.chip:hover { border-color: var(--teal); color: var(--teal-d); }
@media (max-width: 900px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-out { position: static; }
  .cl { grid-template-columns: 1fr auto; }
  .cl-t { grid-column: 1 / -1; order: 3; }
  .ci-f { width: 84px; }
  .pcard-top { flex-direction: column; }
}
.mt4 { margin-top: 4px; }
.calc-foot { display: flex; flex-direction: column; line-height: 1.2; }
.calc-foot b { font-size: 17px; }

/* версия 10: услуги и расчёт в заявке, сумма заявки, итоги столбцов канбана */
.deal-amt b { font-size: 15px; }
.deal-amt-v { font-size: 20px; font-weight: 800; }
.tag.warn { background: var(--orange-bg); color: var(--orange); border-color: transparent; }
#deal-items .card-h { gap: 8px; flex-wrap: wrap; }
#deal-items .card-h .spacer { flex: 1; }
.di-tbl td { vertical-align: top; }
.di-tbl .di-qty { width: 96px; }
.di-params { display: flex; gap: 6px; flex-wrap: wrap; }
.di-params label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.di-params .inp { width: 74px; }
.di-noprice td { background: var(--orange-bg); }
.di-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; padding: 12px 4px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.di-total > span { color: var(--muted); font-size: 14px; }
.cp-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cp-cats .chip { padding: 5px 12px; font-size: 13px; cursor: pointer; }
.cp-list { max-height: 56vh; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; }
.cp-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 120px auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line-soft, #eef1f1); }
.cp-row:last-child { border-bottom: none; }
.cp-row.on { background: #eef7f6; }
.cp-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-p { text-align: right; display: flex; flex-direction: column; }
.cp-q { display: flex; gap: 6px; }
.cp-f { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); }
.cp-f .inp { width: 86px; }
.teal-txt { color: var(--teal-d); }
.kcol-sum { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.ks-v { font-weight: 800; }
.ks-f { font-size: 11px; font-weight: 600; }
@media (max-width: 760px) {
  .cp-row { grid-template-columns: 28px 1fr; }
  .cp-p, .cp-q { grid-column: 2; text-align: left; }
}
#deal-items .card-h h3 { white-space: nowrap; }
@media (max-width: 760px) {
  .di-tbl thead { display: none; }
  .di-tbl, .di-tbl tbody { display: block; width: 100%; }
  .di-tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  .di-tbl td { display: block; border: none; padding: 0; }
  .di-tbl td:nth-child(1) { grid-column: 1 / -1; }
  .di-tbl td:nth-child(2) { display: none; }
  .di-tbl td:nth-child(3) { grid-column: 1; }
  .di-tbl td:nth-child(5) { grid-column: 2; grid-row: 2; align-self: center; font-size: 15px; }
  .di-tbl td:nth-child(4) { grid-column: 1; text-align: left; }
  .di-tbl td:nth-child(6) { grid-column: 2; grid-row: 3; justify-self: end; }
  #deal-items .tbl-scroll { overflow: visible; }
}

/* упрощённый блок «Услуги» (по образцу товарных позиций Bitrix24) */
.deal-amt b { font-size: 18px; }
#deal-items { padding-bottom: 14px; }
.svc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.svc-head h3 { margin: 0; font-size: 17px; }
.svc-head .spacer { flex: 1; }
.svc-save { margin-left: 4px; }
.svc-empty { padding: 18px 4px; color: var(--muted); font-size: 14px; }
.svc-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.svc-row:last-child { border-bottom: none; }
.svc-th { background: #f4f8f8; font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 8px; padding-bottom: 8px; }
.svc-th > div:nth-child(2), .svc-th > div:nth-child(4) { text-align: right; }
.svc-name b { font-size: 14.5px; font-weight: 600; }
.svc-price { text-align: right; font-variant-numeric: tabular-nums; }
.svc-price .sub { display: block; font-size: 11px; color: var(--muted); }
.svc-pricebtn { border: none; background: none; padding: 2px 4px; border-radius: 6px; cursor: pointer; font: inherit; color: inherit; text-align: right; }
.svc-pricebtn:hover { background: #eef7f6; }
.svc-qty { display: inline-flex; align-items: center; gap: 6px; }
.svc-qty .inp { width: 92px; text-align: right; font-size: 15px; }
.svc-unit { font-size: 13px; color: var(--muted); }
.svc-qtytxt { font-size: 13px; color: var(--ink-2); }
.svc-sum { text-align: right; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.svc-del { text-align: right; }
.svc-need { color: var(--orange); font-weight: 700; font-size: 13px; }
.svc-row.need { background: #fffaf0; }
.svc-params { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.svc-params .inp { width: 72px; }
.svc-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; padding: 14px 14px 2px; }
.svc-total > span { color: var(--muted); font-size: 15px; }
.svc-total b { font-size: 24px; font-weight: 800; }
.svc-hint { text-align: right; padding: 4px 14px 0; }
#cp-list.cp-list { max-height: 60vh; overflow: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; }
.cp-cat { position: sticky; top: 0; background: #f4f8f8; font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 14px; z-index: 1; }
label.cp-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 120px; gap: 10px; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft, #eef1f1); cursor: pointer; }
label.cp-row:hover { background: #f6faf9; }
label.cp-row.on { background: #eef7f6; }
label.cp-row input { width: 18px; height: 18px; accent-color: var(--teal); }
.cp-n { font-size: 14px; }
.cp-u { white-space: nowrap; }
label.cp-row .cp-p { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-tbl .cat-row td { background: #f4f8f8; font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 760px) {
  .svc-th { display: none; }
  label.cp-row { grid-template-columns: 22px 1fr auto; }
  label.cp-row .cp-u { display: none; }
  .svc-total b { font-size: 21px; }
}

/* «Услуги и сумма» прямо в карточке заявки: строка добавления с поиском, итог под таблицей */
.svc-sec { padding-top: 14px; }
.svc-sec .svc-head h3 { font-size: 16px; }
.svc-empty-row { display: block; padding: 14px; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px 0; }
.svc-foot .svc-total { padding: 0 12px; }
.svc-addbtn { font-weight: 700; color: var(--teal-d); }
.svc-new { background: #f7fbfa; }
.svc-combo { position: relative; }
.svc-combo .inp { width: 100%; }
.svc-drop { position: absolute; left: 0; top: calc(100% + 4px); width: min(520px, 86vw); max-height: 300px; overflow: auto; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 40, 40, .16); z-index: 30; }
.svc-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; gap: 10px; align-items: center; padding: 9px 12px; cursor: pointer; font-size: 13.5px; }
.svc-opt.on, .svc-opt[data-i]:hover { background: #eef7f6; }
.svc-opt-p { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.svc-table { overflow: visible; }
.svc-table .svc-row:first-child { border-radius: 12px 12px 0 0; }
@media (max-width: 760px) {
  .svc-foot { flex-wrap: wrap; }
}

/* умный выбор услуги: плитки «Упаковка / Отправка / Забор» → списки параметров в той же строке → цена и «Добавить» */
.svc-none { color: var(--red); font-weight: 700; font-size: 13px; }
.svc-tile { min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink); cursor: pointer; white-space: nowrap; }
.svc-tile:hover { border-color: var(--teal-l); background: var(--teal-soft); }
.svc-tile.on { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-d); }
.svc-cfg-head .svc-tile { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.svc-res-p { font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-res-sum { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.svc-opt-i { display: block; }

/* раздел «Заявки» и карточка заявки по образцу Bitrix24 — в цветах Nomad */
.dl-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.dl-title { font-size: 26px; font-weight: 800; margin: 0 6px 0 0; letter-spacing: -.01em; }
.dl-create { font-weight: 700; }
.dl-search { display: flex; gap: 6px; flex: 1 1 320px; max-width: 560px; }
.dl-search .search { flex: 1; min-width: 0; }
.dl-views { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dl-count { font-size: 13px; color: var(--muted); }
.drawer.xl { width: clamp(820px, 72vw, 1180px); }
.drawer.xl .drawer-body { background: #f3f6f6; }
.dc-stages { display: flex; gap: 3px; margin: 0 0 14px; overflow-x: auto; padding-bottom: 2px; }
.dc-st { flex: 1 1 0; min-width: 96px; border: none; padding: 9px 14px 9px 18px; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  background: #e3eaea; cursor: pointer; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 3px solid var(--stc, var(--st-slate)); }
.dc-st:first-child { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-left: 12px; }
.dc-st:hover:not(:disabled) { filter: brightness(.96); }
.dc-st.done { background: #cfe8e4; color: var(--teal-d); }
.dc-st.cur { background: var(--teal); color: #fff; }
.dc-fin { flex: 0 0 auto; min-width: 120px; border-radius: 0 8px 8px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%); border-bottom-color: var(--line); }
.dc-fin.won { background: var(--green); color: #fff; }
.dc-fin.lost { background: var(--red); color: #fff; }
.dc-stages.ro .dc-st { cursor: default; }
.dc-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.dc-sec { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.dc-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dc-sec-h h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dc-sec-h h5 { margin: 0; font-size: 13px; }
.dc-fields { display: flex; flex-direction: column; }
.dc-f { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft, #eef1f1); align-items: center; }
.dc-f:last-child { border-bottom: none; }
.dc-l { font-size: 12.5px; color: var(--muted); }
.dc-v { font-size: 14px; font-weight: 600; min-height: 22px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
.dc-v.ed { cursor: pointer; }
.dc-v.ed:hover, .dc-v.ed:focus-visible { background: #eef7f6; outline: none; }
.dc-pen { opacity: 0; color: var(--muted); margin-left: auto; transition: opacity .12s; }
.dc-v.ed:hover .dc-pen, .dc-v.ed:focus-visible .dc-pen { opacity: 1; }
.dc-v.editing { background: transparent; }
.dc-v .inp { width: 100%; max-width: 360px; }
.dc-more { margin-top: 8px; }
.dc-more > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--teal-d); padding: 6px 0; }
/* «Следующий шаг» заявки: дорожка из 7 шагов и одна главная кнопка (v-deal-flow.js) */
.dflow { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 14px; margin: 0 0 14px; }
.dflow-track { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.dflow-step { position: relative; text-align: center; padding: 0 4px; color: var(--muted); font-size: 12px; line-height: 1.25; min-width: 0; }
.dflow-step::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 2px; background: var(--line); }
.dflow-step:first-child::before { left: 50%; } .dflow-step:last-child::before { right: 50%; }
.dflow-step.done::before { background: var(--teal); }
.dflow-step.current::before { background: linear-gradient(90deg, var(--teal) 50%, var(--line) 50%); }
.dflow-step:first-child.current::before { background: var(--line); }
.dflow-dot { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin: 0 auto 6px; border-radius: 50%;
  border: 2px solid var(--line); background: #fff; font-size: 11px; font-weight: 700; color: var(--muted); }
.dflow-step.done .dflow-dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.dflow-step.current .dflow-dot { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.dflow-step.current { color: var(--ink); font-weight: 700; font-size: 13.5px; }
.dflow-step.next { color: var(--ink-2); }
.dflow-step.locked { color: #a9b5b9; }
.dflow-step.locked .dflow-dot { color: #a9b5b9; }
.dflow-cur-m { display: none; }
.dflow-act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-soft); }
.dflow-act .btn-lg { padding: 12px 22px; min-height: 46px; font-size: 15px; }
.dflow-hint { font-size: 13px; color: var(--muted); flex: 1 1 240px; }
.dflow > .dflow-hint { margin-top: 12px; }
.dflow-block { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-m); background: var(--orange-bg); color: var(--ink); font-size: 13.5px; }
.dflow-block ul { margin: 6px 0 0; padding-left: 18px; } .dflow-block li { margin: 3px 0; }
.dflow-old { margin: -4px 0 14px; } .dflow-old > summary { font-weight: 600; color: var(--muted); }
.dflow-old[open] > summary { margin-bottom: 8px; }
@media (max-width: 900px) {
  .dflow { padding: 14px 14px 12px; }
  .dflow-track { display: flex; justify-content: center; gap: 8px; }
  .dflow-step { padding: 0; flex: 0 0 auto; } .dflow-step::before { display: none; }
  .dflow-t { display: none; }
  .dflow-dot { width: 14px; height: 14px; margin: 0; font-size: 0; border-width: 2px; }
  .dflow-dot svg { display: none; }
  .dflow-step.current .dflow-dot { width: 18px; height: 18px; background: var(--teal); box-shadow: none; }
  .dflow-cur-m { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--muted); } .dflow-cur-m b { color: var(--ink); }
  .dflow-act { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; text-align: center; }
  .dflow-act .btn-lg { width: 100%; }
  .dflow-hint { flex: 0 0 auto; }
}

.dc-next.warn { border-color: #f0dcb4; background: #fffaf0; }
.dc-task { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft, #eef1f1); }
.dc-task .task-row { padding: 8px 0; }
.dc-comp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.dc-comp-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.dc-comp-tabs button.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.dc-comp textarea { width: 100%; resize: vertical; min-height: 64px; }
.dc-comp-f { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.drawer.xl .svc-sec { padding-top: 14px; }
@media (max-width: 980px) {
  .dc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dl-title { font-size: 22px; }
  .dl-search { flex-basis: 100%; max-width: none; }
  .dc-f { grid-template-columns: 1fr; gap: 2px; }
  .dc-st { min-width: 86px; }
}
.dc-grid { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
@media (max-width: 980px) { .dc-grid { grid-template-columns: 1fr; } }

/* ===== v11: загрузка прайса из PDF ===== */
.pi-opts { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.pi-opts .fld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; min-width: 190px; }
.pi-cur { flex: 1; min-width: 220px; padding-bottom: 9px; }
.pi-notes { margin: 12px 0 0; padding-left: 18px; color: var(--muted); }
.pi-notes li + li { margin-top: 4px; }
.pi-clar ol { margin: 0; padding-left: 20px; }
.pi-clar li { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.pi-clar details { margin-top: 3px; }
.pi-clar summary { cursor: pointer; color: var(--teal-d); }
.tag.bad { background: var(--red-bg, #fdecec); color: var(--red); border-color: transparent; }
.pi-tbl td:nth-child(2), .pi-tbl td:nth-child(3) { min-width: 150px; }
.pi-new { color: var(--teal-d); font-weight: 700; }
.pi-foot { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0;
  padding: 12px 16px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 -2px 12px rgba(16,40,40,.06); }
@media (max-width: 700px) { .pi-opts .fld { min-width: 0; flex: 1 1 100%; } .pi-foot .btn { width: 100%; justify-content: center; } }
.svc-price { white-space: nowrap; }
.svc-price .sub { white-space: normal; max-width: 150px; margin-left: auto; }
.svc-opt-p { white-space: nowrap; }

/* карточка заявки: полоса этапов сверху, под ней компактная дорожка «Следующий шаг»; карточка канбана — дата */
.kcard .kc-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.drawer.xl .dc-stages { margin-bottom: 10px; }
.dflow.dflow-c { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; }
.dflow-c .dflow-track { flex: 1 1 360px; }
.dflow-c .dflow-step { font-size: 11px; }
.dflow-c .dflow-step.current { font-size: 12px; }
.dflow-c .dflow-dot { width: 20px; height: 20px; margin-bottom: 4px; font-size: 10px; }
.dflow-c .dflow-step::before { top: 9px; }
.dflow-c .dflow-act { flex: 0 0 auto; margin: 0; padding: 0; border: 0; }
.dflow-c .dflow-act .btn-lg { padding: 9px 16px; min-height: 38px; font-size: 14px; }
.dflow-c .dflow-act .dflow-hint, .dflow-c > .dflow-hint { flex: 1 1 100%; font-size: 12px; margin: 0; }
.dflow-c .dflow-block { flex: 1 1 100%; margin: 0; }
@media (max-width: 900px) {
  .dflow.dflow-c { flex-direction: column; align-items: stretch; gap: 8px; }
  .dflow-c .dflow-track { flex: 0 0 auto; }
  .dflow-c .dflow-act .btn-lg { width: 100%; }
}

/* ===== «Услуги и сумма»: единая сетка строк. Название — не уже 45%, параметры под ним серым; Цена | Кол-во | Сумма | × — фиксированные справа.
   Блок живёт в панелях разной ширины (520 / 820–1180px, в две колонки) — поэтому раскладка от ширины самой таблицы, а не экрана ===== */
.svc-table { container-type: inline-size; }
.svc-row { display: grid; grid-template-columns: minmax(45%, 1fr) 92px 124px 104px 28px; gap: 8px 10px; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft, #eef1f1); background: #fff; }
.drawer .svc-row, .drawer.xl .svc-row { padding: 9px 12px; }
.svc-th > div { white-space: nowrap; }
.svc-name { min-width: 0; }
.svc-name b { display: block; font-size: 14px; line-height: 1.3; }
.svc-name .svc-params { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.svc-params label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.svc-params .inp { width: 64px; }
.svc-qty .inp { width: 72px; }
/* строка добавления — на всю ширину таблицы: плитки → селекты в ряд (не уже 160px) → название, цена, сумма и «Добавить» одной строкой */
.svc-table .svc-row.svc-new, .drawer .svc-table .svc-row.svc-new, .drawer.xl .svc-table .svc-row.svc-new { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.svc-new .svc-del { grid-column: 2; grid-row: 1; }
.svc-pick { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.svc-tiles-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svc-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-cfg-head { display: flex; align-items: center; gap: 10px; }
.svc-cfg { display: flex; align-items: flex-end; gap: 8px 12px; flex-wrap: wrap; }
.svc-sel { display: flex; flex-direction: column; gap: 3px; flex: 1 1 160px; min-width: 160px; max-width: 260px; }
.svc-sel select { width: 100%; }
.svc-sel-q { flex: 0 0 auto; min-width: 0; }
.svc-sel-q .inp { width: 84px; }
.svc-res { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-height: 22px; font-size: 13.5px; }
.svc-res-n { font-weight: 600; flex: 1 1 200px; min-width: 0; }
.svc-res .btn { margin-left: auto; }
.svc-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-search .svc-combo { flex: 1 1 240px; min-width: 0; }
.svc-table .svc-drop { max-width: calc(100cqw - 40px); }
/* «Другая услуга…»: список каталога по категориям — статичный прокручиваемый блок, не выпадашка */
.svc-search .svc-list { flex: 1 1 100%; width: 100%; height: 320px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.svc-cat { position: sticky; top: 0; padding: 8px 12px 4px; background: #fafbfb; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* таблица уже 600px (панель в две колонки): название на всю строку, под ним цена · количество · сумма · × */
@container (max-width: 600px) {
  .svc-th { display: none; }
  .svc-row { grid-template-columns: auto minmax(0, 1fr) auto 28px; gap: 6px 10px; }
  .svc-name { grid-column: 1 / -1; }
  .svc-price { grid-column: 1; grid-row: 2; text-align: left; }
  .svc-q { grid-column: 2; grid-row: 2; }
  .svc-sum { grid-column: 3; grid-row: 2; }
  .svc-del { grid-column: 4; grid-row: 2; }
  .svc-pricebtn { text-align: left; }
  .svc-price .sub { margin-left: 0; }
}
/* телефон: всё друг под другом */
@media (max-width: 760px) {
  .svc-th { display: none; }
  .svc-row { grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px; }
  .svc-name { grid-column: 1 / -1; }
  .svc-price { grid-column: 1; grid-row: 2; text-align: left; }
  .svc-sum { grid-column: 2; grid-row: 2; }
  .svc-q { grid-column: 1; grid-row: 3; }
  .svc-del { grid-column: 2; grid-row: 3; }
  .svc-pricebtn { text-align: left; }
  .svc-params { flex-wrap: wrap; }
  .svc-table .svc-row.svc-new, .drawer .svc-table .svc-row.svc-new { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-new .svc-del { grid-column: 2; grid-row: 1; }
  .svc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .svc-tile { padding: 6px 8px; font-size: 13px; }
  .svc-cfg { flex-direction: column; align-items: stretch; }
  .svc-sel, .svc-sel-q { flex: 0 0 auto; min-width: 0; max-width: none; }
  .svc-sel-q .inp { width: 110px; }
  .svc-res { flex-direction: column; align-items: stretch; }
  .svc-res .btn { margin-left: 0; width: 100%; justify-content: center; }
  .svc-search { flex-direction: column; align-items: stretch; }
}

/* панель «Добавить услугу»: поиск по каталогу, слева группы (число позиций; пустые — серые), справа позиции группы.
   У Упаковки/Отправки/Забора сверху — умный выбор по параметрам, ниже полный список. Выбранная позиция — строка с количеством и «Добавить». */
.svc-panel { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }
.svc-panel-q { width: 100%; }
.svc-panel-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; align-items: start; }
.svc-groups { display: flex; flex-direction: column; gap: 2px; }
.svc-group { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border: none; border-radius: 8px; background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left; cursor: pointer; }
.svc-group:hover { background: #eef7f6; }
.svc-group.on { background: var(--teal-soft); color: var(--teal-d); }
.svc-group:disabled { color: var(--muted); font-weight: 500; cursor: default; background: none; }
.svc-group-n { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-items { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.svc-items-head { display: flex; flex-direction: column; gap: 2px; }
.svc-items-head b { font-size: 14.5px; }
.svc-smart { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.svc-list-flat { border: 1px solid var(--line); border-radius: 10px; background: #fff; max-height: 320px; overflow: auto; }
.svc-list-flat .svc-cat { border-bottom: 1px solid var(--line-soft); }
.svc-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: 100%; padding: 8px 12px; border: none;
  border-bottom: 1px solid var(--line-soft); background: none; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; color: inherit; }
.svc-item:last-child { border-bottom: none; }
.svc-item:hover, .svc-item.sel { background: #eef7f6; }
.svc-item.taken .svc-item-n { color: var(--muted); }
.svc-item-ic { color: var(--teal-d); display: grid; place-items: center; }
.svc-item-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-pickrow { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--teal-l); border-radius: 10px; background: var(--teal-soft); font-size: 13.5px; }
.svc-pickrow[hidden] { display: none; }
.svc-pickrow .btn { margin-left: auto; }
.svc-pickrow .svc-params { margin-top: 0; }
/* телефон и узкая панель (таблица уже 640px): группы — горизонтальные чипы, список под ними */
@container (max-width: 640px) {
  .svc-panel-body { grid-template-columns: 1fr; }
  .svc-groups { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .svc-group { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; font-size: 13px; white-space: nowrap; }
  .svc-group.on { border-color: var(--teal); }
  .svc-item { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .svc-item > .xs { display: none; }
  .svc-item-n { white-space: normal; }
  .svc-pickrow .svc-res-n { flex: 1 1 100%; }
  .svc-pickrow .btn { flex: 1 1 100%; margin-left: 0; justify-content: center; }
}

/* ===== v13–14: упрощённый процесс — готовность отделов, документы, отправки, инструкция клиента, архив по рейсам ===== */
.dflow-ready { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-soft); flex: 1 1 100%; }
.rd-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rd-head b { font-size: 14px; }
.rd-pct { font-size: 20px; font-weight: 800; color: var(--teal-d); font-variant-numeric: tabular-nums; }
.rd-list { list-style: none; margin: 8px 0 0; padding: 0; }
.rd-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13.5px; }
.rd-row:last-child { border-bottom: none; }
.rd-ic { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); }
.rd-row.done .rd-ic { background: var(--teal); border-color: var(--teal); color: #fff; }
.rd-row.done .rd-t { color: var(--muted); }
.rd-m { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.rd-row.late .rd-m { color: var(--red); font-weight: 600; }
.rd-done { margin-top: 6px; } .rd-done > summary { font-size: 12.5px; }
.dflow-c .dflow-ready { margin-top: 0; padding-top: 0; border-top: none; }
.dd-list, .sl-list { display: flex; flex-direction: column; }
.dd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13.5px; }
.dd-row:last-child, .sl-row:last-child { border-bottom: none; }
.dd-st { border: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.dd-st:hover:not(:disabled) { filter: brightness(.94); }
.sl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; }
.sl-d b { font-size: 13.5px; } .sl-t { font-weight: 600; min-width: 0; grid-column: 1 / -1; }
.sl-m { color: var(--muted); grid-column: 1 / -1; }
.ci-v { font-size: 14px; white-space: pre-wrap; border-radius: 8px; padding: 6px 8px; margin: -4px -8px; display: flex; gap: 6px; align-items: flex-start; min-height: 30px; }
.ci-v.ed { cursor: pointer; } .ci-v.ed:hover, .ci-v.ed:focus-visible { background: #eef7f6; outline: none; }
.ci-v.ed:hover .dc-pen { opacity: 1; } .ci-v .dc-pen { margin-left: auto; flex: 0 0 auto; }
.ci-v.editing { flex-direction: column; background: transparent; cursor: default; }
.ci-v textarea { width: 100%; resize: vertical; }
.ci-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.arch-g { margin-bottom: 18px; }
.arch-h { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 800; margin: 0 0 8px; }
.arch-h .muted { font-size: 12.5px; font-weight: 600; }
.arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.kcard.arch-c { cursor: pointer; } .kcard.arch-c .kc-who { display: flex; align-items: center; gap: 4px; }
/* таблица отправок */
.shi { display: flex; flex-direction: column; gap: 4px; margin: -6px 0 14px; font-size: 13px; color: var(--muted); }
.shi-row { display: flex; align-items: flex-start; gap: 8px; }
.shi-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shi-dot { margin-top: 6px; }
.shi-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9d5d5; flex: 0 0 auto; } .shi-dot.on { background: var(--teal); }
.sht-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; }
.sht { min-width: 1360px; }
.sht-hd, .sht-r { display: grid; grid-template-columns: 136px 96px minmax(150px, 1.2fr) 120px minmax(130px, 1fr) 128px 74px 76px 96px minmax(130px, 1fr) 132px 200px; gap: 0 10px; align-items: center; padding: 8px 12px; }
.sht-hd { background: #fafbfb; font-size: 12.5px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.sht-g { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px 6px; background: #f4f8f8; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.sht-g .muted { font-size: 12.5px; }
.sht-r { border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.sht-r:last-child { border-bottom: none; }
.sht-r.st-sent { color: var(--muted); } .sht-r.st-sent .link { color: var(--muted); }
.sht-c { min-width: 0; } .sht-c.num { text-align: right; font-variant-numeric: tabular-nums; }
.sht-c .inp-sm { width: 100%; min-height: 34px; }
.sht-c .tag.warn { margin-top: 3px; }
.sht-co .sub { display: block; }
.sht-pct { font-weight: 700; font-size: 12.5px; display: block; margin-bottom: 3px; }
.sht-c .progress { height: 5px; }
.sht-int { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sht-int .pill { font-size: 11px; padding: 3px 8px; }
.sht-int .btn-sm { padding: 4px 10px; min-height: 28px; font-size: 12px; }
.sel-confirmed { color: var(--teal-d); font-weight: 700; } .sel-sent { color: var(--green); font-weight: 700; }
@media (max-width: 760px) {
  .rd-row { grid-template-columns: 20px minmax(0, 1fr); } .rd-m { grid-column: 2; white-space: normal; }
  .arch-grid { grid-template-columns: 1fr; }
  /* телефон: одна строка таблицы отправок = карточка */
  .sht-wrap { overflow: visible; border: none; background: transparent; }
  .sht { min-width: 0; }
  .sht-hd { display: none; }
  .sht-g { background: transparent; border: none; padding: 12px 2px 6px; font-size: 15px; }
  .sht-r { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px; margin-bottom: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); }
  .sht-c { text-align: left; }
  .sht-c::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
  .sht-co, .sht-c[data-l="Примечание"], .sht-c[data-l="Интеграции"], .sht-c[data-l="Склад назначения"] { grid-column: 1 / -1; }
  .sht-c.num { text-align: left; }
}

/* класс клиента A/B/C */
.class-chip { border: none; background: none; padding: 0; cursor: pointer; font: inherit; display: inline-flex; }
.class-chip:hover .pill { filter: brightness(.95); }
.class-log-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line); }
.class-log-row .class-log-r { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }

/* Моя работа */
.mw-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mw-stats .stat { min-width: 0; }
.mw-main { border-left: 3px solid var(--teal); }
.mw-main .v { font-size: 34px; }
.stat .v.mw-dim { color: var(--muted); font-size: 17px; font-weight: 700; }
.mw-month { width: auto; min-width: 160px; }
.mw-prog { margin-top: 8px; height: 6px; }
.mw-none { padding: 12px 0; color: var(--muted); font-size: 13.5px; }
.mw-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; height: 190px; padding-top: 4px; }
.mw-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; font-size: 12px; color: var(--muted); }
.mw-col b { font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.mw-bar { flex: 1; width: 100%; max-width: 48px; display: flex; align-items: flex-end; }
.mw-bar > div { width: 100%; background: var(--teal); border-radius: 6px 6px 0 0; min-height: 2px; }
.mw-col:last-child .mw-bar > div { background: var(--teal-d); }
.mw-col span { margin-top: 6px; white-space: nowrap; }
@media (max-width: 760px) { .mw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mw-main .v { font-size: 28px; } .mw-chart { height: 150px; gap: 6px; } }
.svc-item-n .sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; white-space: normal; }