/* ═══ Экран «Клиенты» ═══════════════════════════════════════════
   Числа из design/mockups/clients.html: плитки, чипы 40 px, строка полок,
   карточки 22 px и подложка свайпа. Меняя их, сверяйся с макетом, он утверждён.
   Мелкие ссылки и чипы добирают зону касания до 44 px невидимой рамкой. */
.clients { display: flex; flex-direction: column; gap: 16px; }
/* на макете «Клиенты» круглой кнопки нет: справа на карточке сумма и свайп */
body[data-route="clients"] .fab { display: none; }
.icon-round {
  flex: none; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--line-3);
  background: var(--surface); color: var(--ink); display: grid; place-items: center; transition: border-color .15s;
}
.icon-round.on { border-color: rgba(234, 131, 105, .55); color: var(--coral); }
.cl-search .input { min-height: 46px; }

/* плитки */
.cl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cl-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 18px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); transition: background-color .15s;
}
.cl-tile:hover { color: var(--ink); background: var(--surface-hover); }
.cl-tile-v { font-family: var(--disp); font-size: 22px; font-weight: 700; white-space: nowrap; }
.cl-tile-v.amber { color: #F2C14E; }
.cl-tile-v.coral { color: #EA8369; }
.cl-tile-k { font-size: 12px; color: var(--ink-3); }

/* пачка «разобрать»: клиенты с папкой, но без строки в воронке */
.cl-sortbar {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 18px;
  background: rgba(234, 131, 105, .09); border: 1px solid rgba(234, 131, 105, .28); color: var(--ink);
}
.cl-sortbar:hover { color: var(--ink); background: rgba(234, 131, 105, .13); }
.cl-sortbar-n { font-family: var(--disp); font-size: 18px; font-weight: 700; color: var(--coral); }
.cl-sortbar-t { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.cl-sortbar-go { flex: none; font-size: 13px; font-weight: 600; color: var(--coral); }
.cl-sorthead { display: flex; flex-direction: column; gap: 6px; }

/* чипы стадий и строка полок */
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chip {
  position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, .1); background: var(--surface);
  color: #C9C5BE; font-size: 14px; white-space: nowrap; transition: background-color .15s, color .15s;
}
.cl-chip::after { content: ''; position: absolute; inset: -2px 0; }
.cl-chip span { color: var(--ink-3); }
.cl-chip:hover { color: var(--ink); background: var(--surface-2); }
.cl-chip.on { background: #F4F1EC; border-color: #F4F1EC; color: #111; font-weight: 600; }
.cl-chip.on span { color: inherit; }
.cl-shelves { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 6px; margin-top: -4px; font-size: 13px; }
.cl-shelves a { color: var(--ink-3); padding: 13px 0; margin: -13px 0; }
.cl-shelves a:hover { color: var(--ink-2); }
.cl-shelves a.on { color: var(--ink); font-weight: 600; }

.cl-view { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-3); }
.cl-view-x { font-size: 13px; color: var(--coral); padding: 13px 0 13px 12px; margin: -13px 0; }

/* ── карточка и свайп ─────────────────────────────────────────── */
.cl-list { display: flex; flex-direction: column; gap: 10px; }
.cc-wrap { position: relative; border-radius: 22px; overflow: hidden; transition: height .2s ease, opacity .2s ease, margin .2s ease; }
.cc-wrap.gone { opacity: 0; margin-bottom: -10px; }
.cc-act { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; }
.cc-act-r { justify-content: flex-start; }
.cc-act-l { justify-content: flex-end; }
.cc-wrap[data-dir="r"] .cc-act-r, .cc-wrap[data-dir="l"] .cc-act-l { opacity: 1; }
.cc-act-in {
  width: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; font-weight: 600; transition: transform .15s var(--ease);
}
.cc-wrap.armed .cc-act-in { transform: scale(1.1); }
.act-blue { background: #1E2633; color: #6EA8FF; }
.act-green { background: #1A2821; color: #5CC49A; }
.act-neutral { background: #232326; color: #C9C5BE; }
.act-red { background: #2C1C20; color: #EE7A8A; }
.act-amber { background: #2A2519; color: #F2C14E; }

.cc {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; transition: transform .25s var(--ease), background-color .15s;
}
.cc:hover { background: var(--surface-hover); }
.cc-wrap.dragging .cc { transition: none; cursor: grabbing; }
.cc-wrap.leaving .cc { transition: transform .2s ease-in; }
.cc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cc-name { font-size: 16px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-sum { flex: none; font-family: var(--disp); font-size: 15px; font-weight: 600; white-space: nowrap; }
.cc-line { font-size: 14px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-tags:empty { display: none; }

/* быстрые кнопки: «проверь: сдан?» и пачка «разобрать» */
.cc-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.cq {
  position: relative; flex-shrink: 0; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12);
  background: transparent; color: var(--ink-2); font-size: 14px; white-space: nowrap; transition: background-color .15s, color .15s;
}
.cq::after { content: ''; position: absolute; inset: -2px 0; }
.cq:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.cq-main { background: rgba(92, 196, 154, .12); border-color: rgba(92, 196, 154, .35); color: #5CC49A; font-weight: 600; }
.cq-main:hover { color: #7DD6B1; background: rgba(92, 196, 154, .18); }
.cc-sort { flex-wrap: nowrap; overflow-x: auto; margin: 2px -16px 0; padding: 2px 16px; scrollbar-width: none; touch-action: pan-x pan-y; }
.cc-sort::-webkit-scrollbar { display: none; }

/* статистика причин срыва */
.lost-stats { display: flex; flex-direction: column; gap: 10px; }
.ls-sum { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ls-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.ls-v { font-family: var(--disp); font-size: 22px; font-weight: 700; color: #EE7A8A; }
.ls-k { font-size: 12px; line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }
.ls-all { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.sk-tiles { height: 88px; border-radius: 18px; }

/* ── шторка стадий и причины срыва ───────────────────────────── */
.sheet-lead { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin: 10px 0 18px; }
.st-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-place { font-family: var(--mono); font-size: 12px; padding: 6px 10px; border-radius: 12px; background: rgba(242, 193, 78, .12); color: #F2C14E; }
.st-sum { font-family: var(--disp); font-size: 15px; font-weight: 600; }
.st-now + .field-lbl { margin-top: 18px; }
.st-lbl { margin-bottom: 8px; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.st-btn {
  min-height: 48px; padding: 0 10px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12);
  background: var(--surface); color: var(--ink-2); font-size: 14px; transition: background-color .15s, color .15s;
}
.st-btn:hover { color: var(--ink); background: var(--surface-2); }
.st-btn.on { background: #F4F1EC; border-color: #F4F1EC; color: #111; font-weight: 600; }
.st-btn-lost { color: #EE7A8A; }
.st-next { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.st-next .field-row { align-items: end; }
.st-save { min-height: 48px; }
.reason-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reason {
  min-height: 52px; padding: 0 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12);
  background: var(--surface); color: var(--ink); font-size: 15px; transition: background-color .15s;
}
.reason:hover { background: var(--surface-2); }

/* ── компьютер: карточки сеткой ───────────────────────────────── */
@media (min-width: 900px) {
  .clients { max-width: 1120px; }
  .cl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
  .cc-wrap.gone { margin-bottom: 0; }
}

/* ═══ Карточка клиента (задача 3) ════════════════════════════════
   Числа из design/mockups/client-card.html: отступы 16, плитки 18 px, блоки 22 px,
   «На чём остановились» с тёплым градиентом и коралловой рамкой, кнопки 48 px.
   Панели вкладок на макете нет: карточка открывается поверх раздела, назад стрелкой. */
body:has(.ccard) .tabbar { display: none; }
body:has(.ccard) .main { padding-bottom: calc(32px + var(--sab)); }
.ccard { display: flex; flex-direction: column; gap: 16px; }
.cd-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 8px; }
.cd-back {                                           /* 44 и рамка, как ссылка на макете */
  flex: none; width: 46px; height: 46px; border-radius: 23px; border: 1px solid rgba(255, 255, 255, .12);
  background: #161618; color: #F4F1EC; display: flex; align-items: center; justify-content: center; transition: background-color .15s;
}
.cd-back:hover { color: #F4F1EC; background: var(--surface-2); }
.cd-stage {
  position: relative; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid;
  font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: background-color .15s;
}
.cd-stage::after { content: ''; position: absolute; inset: -2px 0; }
.cd-stage.t-amber { border-color: rgba(242, 193, 78, .4); background: rgba(242, 193, 78, .1); color: #F2C14E; }
.cd-stage.t-blue { border-color: rgba(110, 168, 255, .4); background: rgba(110, 168, 255, .1); color: #6EA8FF; }
.cd-stage.t-green { border-color: rgba(92, 196, 154, .4); background: rgba(92, 196, 154, .1); color: #5CC49A; }
.cd-stage.t-red { border-color: rgba(238, 122, 138, .4); background: rgba(238, 122, 138, .1); color: #EE7A8A; }
.cd-stage.t-coral { border-color: rgba(234, 131, 105, .4); background: rgba(234, 131, 105, .1); color: #EA8369; }
.cd-stage.t-neutral { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #C9C5BE; }
.cd-stage:hover { filter: brightness(1.12); }
.cd-head { display: flex; flex-direction: column; gap: 6px; }
.cd-name { font-family: var(--disp); font-size: 26px; font-weight: 600; }
.cd-sub { font-size: 14px; color: #9A968F; }
.cd-grid, .cd-main, .cd-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.cd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cd-tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border-radius: 18px;
  background: #161618; border: 1px solid rgba(255, 255, 255, .06);
}
.cd-tile-v { font-family: var(--disp); font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-tile-v.amber { color: #F2C14E; }
.cd-tile-v.coral { color: #EA8369; }
.cd-tile-k { font-size: 12px; color: #9A968F; }

.cd-box { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 22px; background: #161618; border: 1px solid rgba(255, 255, 255, .06); }
.cd-lbl { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: #9A968F; }
.cd-text { font-size: 15px; line-height: 1.5; color: #E4E0D9; }
.cd-stop { gap: 12px; background: linear-gradient(180deg, #221D18 0%, #161618 100%); border-color: rgba(234, 131, 105, .25); }
.cd-stop .cd-text { color: #F4F1EC; }
.cd-next {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border-radius: 16px; text-align: left;
  background: rgba(234, 131, 105, .1); color: #F4F1EC; transition: background-color .15s;
}
.cd-next:hover { background: rgba(234, 131, 105, .15); }
.cd-next svg { flex: none; color: #EA8369; }
.cd-next-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-next-t { font-size: 15px; font-weight: 600; }
.cd-next-s { font-size: 13px; color: #C9C5BE; }
.cd-btns { display: flex; gap: 8px; }
.cd-chat {
  flex-grow: 1; height: 48px; border-radius: 24px; background: #EA8369; color: #1A0F0B;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; transition: background-color .15s;
}
.cd-chat:hover { color: #1A0F0B; background: var(--coral-hi); }
.cd-move {
  flex: none; height: 48px; padding: 0 18px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .14);
  background: transparent; color: #F4F1EC; font-size: 15px; transition: background-color .15s;
}
.cd-move.wide { flex-grow: 1; }
.cd-move:hover { background: rgba(255, 255, 255, .05); }

.cd-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cd-act {
  height: 48px; padding: 0 6px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: #161618;
  color: #C9C5BE; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .15s, color .15s;
}
.cd-act:hover:not(:disabled) { color: #F4F1EC; background: var(--surface-2); }
.cd-act.fwd { border-color: rgba(110, 168, 255, .35); background: rgba(110, 168, 255, .08); color: #6EA8FF; font-weight: 600; }
.cd-act.fwd:hover { color: #8DBBFF; background: rgba(110, 168, 255, .13); }
.cd-act:disabled { cursor: default; color: #6A6660; border-style: dashed; }

.cd-hist { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 0; }
.cd-h { display: flex; gap: 12px; }
.cd-h i { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 4px; background: #4A4844; }
.cd-h i.hot { background: #EA8369; }
.cd-h i.app { background: none; box-shadow: inset 0 0 0 1.5px #6A6660; }
.cd-h-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-h-t { font-size: 14px; }
.cd-h-d { font-family: var(--mono); font-size: 11px; color: #9A968F; }
/* Оплаты клиента (02.10.2026): сумма по привязанным приходам, а не из текста стадии */
.cd-pay { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 0; }
.cd-pay-sum { font-family: var(--mono); font-size: 20px; letter-spacing: -0.02em; }

.cd-dossier {
  align-self: flex-start; min-height: 44px; margin: -4px 0 0; padding: 0 4px; font-size: 14px; color: var(--coral);
}
.cd-dossier:hover { color: var(--coral-hi); }
.cd-sk-head { height: 64px; border-radius: 18px; }
.cd-sk-box { height: 130px; border-radius: 22px; }

/* досье в шторке */
.md { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: #E4E0D9; }
.md h3 { font-family: var(--disp); font-size: 15px; font-weight: 600; color: #F4F1EC; margin-top: 8px; }
.md .md-h1 { font-size: 18px; margin-top: 0; }
.md ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.md b { font-weight: 600; color: #F4F1EC; }
.cd-files { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cd-file { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cd-file-t { flex: none; width: 42px; padding: 4px 0; border-radius: 8px; text-align: center; background: rgba(255, 255, 255, .06); font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.cd-file-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-file-d { flex: none; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ── компьютер: карточка слева, история справа ────────────────── */
@media (min-width: 900px) {
  .ccard { max-width: 640px; }
}
@media (min-width: 1180px) {
  .ccard { max-width: 1120px; }
  .cd-top, .cd-head { max-width: 560px; }            /* шапка над своей колонкой, стадия рядом с именем */
  .cd-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .cd-side { padding-top: 2px; }
}

/* ── заморозка и архив (27.09.2026): две кнопки под стадиями, строка полки, шторка заморозки ── */
.cl-park { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cl-park-b {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, .16); color: var(--ink-2); font-size: 14px; transition: background-color .15s, border-color .15s;
}
.cl-park-b svg { flex: none; color: var(--ink-3); }
.cl-park-b span { flex: 1; min-width: 0; }
.cl-park-b b { font-family: var(--mono); font-weight: 500; color: var(--ink-3); }
.cl-park-b:hover { background: var(--surface); }
.cl-park-b.on { border-style: solid; border-color: rgba(244, 241, 236, .5); background: var(--surface-2); color: var(--ink); }
.cl-park-b.on svg, .cl-park-b.on b { color: var(--ink); }
.cl-park-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.cc-park { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.cc-park.is-nowhy { color: var(--amber); }
.fz-reasons .reason { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 58px; padding: 8px 12px; text-align: left; }
.fz-reasons .reason small { font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.reason.on { background: #F4F1EC; border-color: #F4F1EC; color: #111; font-weight: 600; }
.reason.on small { color: #4A4742; font-weight: 400; }
.fz-warn { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(242, 193, 78, .1); border: 1px solid rgba(242, 193, 78, .3);
  color: #F2D48A; font-size: 14px; line-height: 1.45; }
.fz-silent { display: flex; flex-direction: column; gap: 8px; }
.fz-silent[hidden] { display: none; }
.cd-park .cd-text { color: var(--ink-2); }

/* квалификация в карточке (28.09.2026, курс продаж) */
.cd-qual { display: flex; flex-direction: column; gap: 10px; }
.cd-qual-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cd-qual-cls { font-size: 13px; color: var(--ink-3); }
.cd-qual-cls.is-A { color: #5CC49A; font-weight: 600; }
.cd-qual-cls.is-B { color: var(--amber); }
.cd-qual-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.q-btn, .lad-btn {
  min-height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: var(--surface);
  color: var(--ink-2); font-size: 14px; transition: background-color .15s, color .15s;
}
.q-btn.on { background: rgba(92, 196, 154, .16); border-color: rgba(92, 196, 154, .5); color: #7ED8B0; font-weight: 600; }
.cd-lad-lbl { margin-top: 2px; }
.cd-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lad-btn { font-family: var(--mono); }
.lad-btn.on { background: #F4F1EC; border-color: #F4F1EC; color: #111; font-weight: 600; }
.q-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15; }
.q-btn small { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.q-btn.on small { color: #7ED8B0; }
.q-btn.no { background: rgba(230, 103, 103, .1); border-color: rgba(230, 103, 103, .4); color: #EE8A8A; }
.q-btn.no small { color: #EE8A8A; }
.cd-qual-cls.is-q { color: var(--amber); }