/* [payroll] Раздел «Выплаты» (#/payroll) и вкладка «Выплаты» в карточке сделки.
   Цвета и шрифты — переменные кабинета (app.css). Строки выплат на широком экране — таблица
   с правкой в ячейках, уже 1180 px — карточки; на сенсорном экране всё нажимаемое — от 40 px. */

.pr { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pr [hidden] { display: none !important; }
.pr .pr-headline { margin-bottom: 0; align-items: center; }
.pr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- вкладки раздела ---------- */
.pr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pr-tabs::-webkit-scrollbar { display: none; }
.pr-tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  font-size: 14px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -1px; }
.pr-tabs a:hover { color: var(--ink); }
.pr-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.pr-tabs a:last-child:not(:first-child) { margin-left: auto; }

/* ---------- кнопки ---------- */
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px;
  border-radius: 9px; border: 1px solid var(--line-bright); background: var(--bg-card); color: var(--ink);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pr-btn:hover { border-color: var(--accent); color: var(--accent); }
.pr-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pr-btn.primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.pr-btn.sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; }
.pr-btn.ghost { border-color: transparent; background: none; color: var(--ink-dim); }
.pr-btn.danger:hover { color: var(--red); border-color: var(--red); }
.pr-btn:disabled { opacity: .55; cursor: default; }
.pr > .pr-btn { align-self: flex-start; }
.pr-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink-faint); cursor: pointer; }
.pr-ib:hover { color: var(--accent); border-color: var(--line-bright); background: var(--bg-card); }
.pr-ib.danger:hover { color: var(--red); border-color: rgba(217,45,32,.35); }
.pr-ib.add { color: var(--accent); border-color: var(--line-bright); background: var(--bg-card); }
.pr-link { color: var(--accent); font-weight: 600; font-size: 13px; }

/* ---------- состояние сохранения ---------- */
.pr-save { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-faint);
  max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-save::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.pr-save:empty { display: none; }
.pr-save.busy { color: var(--amber-deep); }
.pr-save.busy::before { background: var(--amber); animation: pr-pulse .9s ease-in-out infinite; }
.pr-save.err { color: var(--red); }
.pr-save.err::before { background: var(--red); }
@keyframes pr-pulse { 50% { opacity: .3; } }

/* ---------- отборы ---------- */
.pr-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pr-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); min-width: 0; flex: 0 1 auto; }
.pr-filters label.grow { flex: 1 1 200px; }
.pr-filters select, .pr-filters input { min-height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-bright);
  background: var(--bg-card); color: var(--ink); font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: 0;
  text-transform: none; max-width: 100%; outline: none; }
.pr-filters select { max-width: 220px; }
.pr-filters select:focus, .pr-filters input:focus { border-color: var(--accent); }
.pr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-bright); background: var(--bg-card); color: var(--ink-dim); font-size: 13px; font-weight: 600; }
.pr-chips a.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- показатели ---------- */
.pr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pr-kpi { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-kpi .l { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-dim); }
.pr-kpi .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 19px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-kpi .s { font-size: 12px; color: var(--ink-faint); }
.pr-kpi.tone-acc .v { color: var(--accent); }
.pr-kpi.tone-due .v { color: var(--amber-deep); }
.pr-kpi.tone-paid .v { color: var(--margin); }

.pr-panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.06); min-width: 0; }
/* таблица строк меряет себя, а не окно: рядом боковое меню, и при ширине окна 1200–1400 px колонки
   уезжали за край */
#pr-lines { container: prlines / inline-size; }
.pr-panel > header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.pr-panel > header h3 { font-size: 15px; font-weight: 700; margin: 0; }
.pr-panel > header .sub { font-size: 12.5px; color: var(--ink-faint); }
.pr-empty { padding: 26px 18px; text-align: center; color: var(--ink-faint); font-size: 13.5px; line-height: 1.5; }
.pr-note { font-size: 13px; line-height: 1.5; color: var(--ink-dim); }
.pr-note.warn { background: rgba(224,138,0,.09); border: 1px solid rgba(224,138,0,.35); border-radius: 10px; padding: 10px 13px; color: var(--ink); }
.pr-foot, .pr-intro { font-size: 12.5px; color: var(--ink-faint); line-height: 1.55; max-width: 900px; }
.pr-intro { color: var(--ink-dim); font-size: 13.5px; }
.pr-more { display: block; width: 100%; min-height: 40px; border: none; border-top: 1px solid var(--line); background: var(--bg-raise);
  color: var(--accent); font-weight: 600; font-size: 13.5px; cursor: pointer; }

/* ---------- массовые действия ---------- */
.pr-bulk { position: sticky; top: 8px; z-index: 6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--navy); color: #fff; border-radius: 12px; padding: 8px 10px 8px 16px; box-shadow: 0 8px 24px rgba(0,30,80,.22); }
.pr-bulk .spacer { flex: 1; }
.pr-bulk span { font-size: 13px; opacity: .85; }
.pr-bulk .pr-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.pr-bulk .pr-btn:hover { background: rgba(255,255,255,.18); color: #fff; border-color: #fff; }
.pr-bulk .pr-btn.primary { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- строки выплат: таблица ---------- */
.pr-grid { --pr-cols: minmax(140px, 1.3fr) minmax(120px, 1.1fr) 112px 132px 120px 120px 104px minmax(100px, .9fr) 64px; }
.pr-grid.sel { --pr-cols: 28px minmax(140px, 1.3fr) minmax(120px, 1.1fr) 112px 132px 120px 120px 104px minmax(100px, .9fr) 64px; }
/* ячейки — по верхнему краю: под именем и суммой бывает вторая строка (роль, «по схеме»), и при
   выравнивании по центру остальные поля съезжали ниже имени */
.pr-row { display: grid; grid-template-columns: var(--pr-cols); gap: 4px; align-items: start; padding: 6px 10px;
  border-top: 1px solid var(--line); min-width: 0; }
.pr-row > .pr-sel, .pr-row > .pr-acts { min-height: 32px; align-items: center; }
.pr-row.pr-head { border-top: none; background: var(--surface-sunken); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: 9px; padding-bottom: 9px; border-radius: 12px 12px 0 0; }
.pr-row.pr-head { align-items: center; }
.pr-row.pr-head > .pr-c:not(.pr-sel) { padding: 0 8px; }   /* над текстом полей: у них рамка 1 + отступ 7 */
.pr-row.pr-head .pr-amt { text-align: right; }
.pr-row.helper { background: var(--bg-raise); }
.pr-row.helper .pr-who { padding-left: 16px; position: relative; }
.pr-row.helper .pr-who::after { content: "↳"; position: absolute; left: 2px; top: 7px; color: var(--ink-faint); font-size: 13px; }
.pr-row.st-paid { background: linear-gradient(90deg, rgba(31,157,87,.05), transparent 60%); }
.pr-c { min-width: 0; display: flex; flex-direction: column; gap: 1px; border-radius: 7px; transition: background .2s, box-shadow .2s; }
.pr-c > small { font-size: 11px; color: var(--ink-faint); padding: 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-c input:not([type=checkbox]), .pr-c select { width: 100%; min-width: 0; height: 32px; border: 1px solid transparent; border-radius: 7px;
  background-color: transparent; padding: 0 7px; color: var(--ink); font-family: var(--body); font-size: 13.5px; outline: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s; }
/* только цвет фона: «background» целиком сбрасывал размер и место точки статуса, и при наведении
   она растягивалась на всё поле синим пятном */
.pr-c input:not([type=checkbox]):hover, .pr-c select:hover { border-color: var(--line-bright); background-color: var(--bg-card); }
.pr-c input:not([type=checkbox]):focus, .pr-c select:focus { border-color: var(--accent); background-color: var(--bg-card); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.pr-c input[type=date] { font-family: var(--mono); font-size: 12.5px; padding-right: 2px; }
/* пустая дата — бледной подсказкой, а не чёрным «дд.мм.гггг» */
.pr-c input[type=date]:invalid::-webkit-datetime-edit { color: var(--ink-faint); opacity: .7; }
.pr-c input[type=date]:invalid:focus::-webkit-datetime-edit { opacity: 1; }
.pr-c .pr-num, .pr-amt input { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.pr-amt > small { text-align: right; }
.pr-ro { display: block; padding: 0 7px; font-size: 13.5px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-ro.pr-num { text-align: right; }
.pr-ro.neg, .pr-amt input.neg { color: var(--red); }
.pr-dash { color: var(--ink-faint); }
.pr-sel { display: flex; align-items: center; justify-content: center; }
.pr-sel input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.pr-acts { flex-direction: row; justify-content: flex-end; gap: 2px; }
.pr-c.pr-memo { gap: 3px; }
.pr-badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 7px; }
.pr-badges:empty { display: none; }
.pr-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; line-height: 17px; padding: 0 7px;
  border-radius: 999px; border: 1px solid var(--line-bright); color: var(--ink-dim); background: var(--bg-card); white-space: nowrap; }
.pr-badge.warn { color: var(--amber-deep); border-color: rgba(224,138,0,.45); background: rgba(224,138,0,.08); }
.pr-badge.ok { color: var(--margin); border-color: rgba(31,157,87,.4); background: rgba(31,157,87,.07); }
.pr-badge.dim { color: var(--ink-faint); border-style: dashed; }
.pr-badge.act { color: var(--accent); border-color: rgba(10,77,166,.4); cursor: pointer; font-family: var(--body); }
.pr-share { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-faint); padding: 0 7px; }
.pr-share input:not([type=checkbox]) { width: 64px; height: 26px; text-align: right; font-family: var(--mono); }

/* статус строки: цвет текста и точка */
.pr-st { font-weight: 700; }
select.pr-st { padding-left: 22px !important; background-repeat: no-repeat; background-position: 8px 50%; background-size: 8px 8px; }
select.pr-st.tone-acc { color: var(--accent); background-image: radial-gradient(circle, var(--accent) 60%, transparent 62%); }
select.pr-st.tone-due { color: var(--amber-deep); background-image: radial-gradient(circle, var(--amber) 60%, transparent 62%); }
select.pr-st.tone-paid { color: var(--margin); background-image: radial-gradient(circle, var(--green) 60%, transparent 62%); }
span.pr-st { display: inline-flex; align-items: center; gap: 6px; padding: 0 7px; font-size: 13px; line-height: 32px; white-space: nowrap; }
span.pr-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
span.pr-st.tone-acc { color: var(--accent); }
span.pr-st.tone-acc::before { background: var(--accent); }
span.pr-st.tone-due { color: var(--amber-deep); }
span.pr-st.tone-due::before { background: var(--amber); }
span.pr-st.tone-paid { color: var(--margin); }
span.pr-st.tone-paid::before { background: var(--green); }

/* ячейка сохраняется / сохранилась / не сохранилась */
.pr-c.pr-busy, label.pr-busy { background: rgba(224,138,0,.10); }
.pr-c.pr-ok, label.pr-ok { background: rgba(31,157,87,.12); }
.pr-c.pr-err, label.pr-err, input.pr-err { box-shadow: inset 0 0 0 1.5px var(--red); }

/* ---------- шапка сделки над её строками ---------- */
.pr-deal { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 10px 12px 9px;
  border-top: 1.5px solid var(--line-bright); background: var(--surface-sunken); }
.pr-grid > .pr-deal:first-of-type { border-top-width: 1px; }
.pr-deal .pr-sel { width: 28px; }
.pr-deal-t { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pr-deal-t > a, .pr-deal-t > b { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-deal-t > a:hover { color: var(--accent); }
.pr-deal-m { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-dim); }
.pr-deal-f, .pr-card-info { display: flex; align-items: flex-end; gap: 8px 12px; flex-wrap: wrap; }
.pr-deal-f label, .pr-card-info label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); border-radius: 8px; min-width: 0; }
.pr-deal-f label > span, .pr-card-info label > span:not(.pr-chat) { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 32px; }
.pr-deal-f select, .pr-deal-f input, .pr-card-info select, .pr-card-info input { height: 32px; border: 1px solid var(--line-bright); border-radius: 8px;
  background: var(--bg-card); padding: 0 8px; color: var(--ink); font-family: var(--body); font-size: 13px; outline: none; min-width: 0;
  letter-spacing: 0; text-transform: none; font-weight: 500; }
.pr-deal-f input[type=date], .pr-card-info input[type=date] { font-family: var(--mono); font-size: 12.5px; }
.pr-deal-f select:focus, .pr-deal-f input:focus, .pr-card-info select:focus, .pr-card-info input:focus { border-color: var(--accent); }
.pr-deal-f label.chat input, .pr-card-info label.chat input { width: 200px; }
.pr-deal-f a, .pr-card-info a { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; line-height: 32px; }
.pr-chat { display: inline-flex; align-items: center; gap: 4px; }
.pr-chat .pr-ib { line-height: 1; }

/* ---------- оклад ---------- */
.pr-sal { display: flex; flex-direction: column; }
.pr-sal-r { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); }
.pr-sal-r:first-child { border-top: none; }
.pr-sal-r .nm { flex: 1 1 200px; font-weight: 600; min-width: 0; }
.pr-sal-r .nm small { color: var(--ink-faint); font-weight: 500; }
.pr-sal-r .am { display: flex; flex-direction: column; font-family: var(--mono); font-weight: 700; font-size: 14px; text-align: right; }
.pr-sal-r .am small { font-family: var(--body); font-weight: 500; font-size: 11.5px; color: var(--ink-faint); }
.pr-sal-add { padding: 10px 16px; border-top: 1px solid var(--line); }
.pr-hist { font-size: 13px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.pr-hist b { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }

/* ---------- итого по людям ---------- */
.pr-sum { display: flex; flex-direction: column; }
.pr-sum-r { display: grid; grid-template-columns: minmax(170px, 1.6fr) repeat(8, minmax(0, 1fr)); gap: 8px; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink); font-size: 13.5px; }
.pr-sum-r > span:not(.nm) { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pr-sum-r .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pr-sum-r .nm small { font-weight: 500; color: var(--amber-deep); }
.pr-sum-r .b { font-weight: 700; }
.pr-sum-r .tone-due { color: var(--amber-deep); }
.pr-sum-r .tone-paid { color: var(--margin); }
a.pr-sum-r:hover { background: var(--bg-raise); }
.pr-sum-r.head { border-top: none; background: var(--surface-sunken); font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); border-radius: 12px 12px 0 0; }
.pr-sum-r.head > span { font-family: var(--body); white-space: normal; line-height: 1.3; }
.pr-sum-r.foot { font-weight: 700; background: var(--surface-sunken); border-top: 1.5px solid var(--line-bright); border-radius: 0 0 12px 12px; }

/* ---------- мои выплаты ---------- */
.pr-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 14px 16px; }
.pr-month { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px;
  color: var(--ink); font-size: 12.5px; background: var(--bg-card); }
.pr-month:hover, .pr-month.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.10); }
.pr-month b { font-size: 14px; text-transform: capitalize; }
.pr-month span { font-family: var(--mono); color: var(--ink-dim); }
.pr-month .tone-acc { color: var(--accent); }
.pr-month .tone-due { color: var(--amber-deep); }
.pr-month .tone-paid { color: var(--margin); }
.pr-mine { display: flex; flex-direction: column; }
.pr-mine-r { display: grid; grid-template-columns: minmax(0, 1fr) 130px 140px 150px; gap: 10px; align-items: center; padding: 9px 16px;
  border-top: 1px solid var(--line); font-size: 13.5px; }
.pr-mine-r:first-child { border-top: none; }
.pr-mine-r .t { min-width: 0; font-weight: 600; }
.pr-mine-r .t small { display: block; font-weight: 500; color: var(--ink-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-mine-r .a { font-family: var(--mono); font-weight: 700; text-align: right; }
.pr-mine-r .d { font-size: 12.5px; color: var(--ink-dim); }

/* ---------- схемы выплат ---------- */
.pr-scheme { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.pr-scheme-h, .pr-item { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pr-scheme label, .pr-item label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); min-width: 0; }
.pr-scheme label.grow { flex: 1 1 240px; }
.pr-scheme label.on, .pr-item label.on { flex-direction: row; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0;
  font-size: 13px; color: var(--ink); min-height: 38px; }
.pr-scheme input:not([type=checkbox]), .pr-scheme select { min-height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-bright);
  background: var(--bg-card); color: var(--ink); font-family: var(--body); font-size: 14px; text-transform: none; letter-spacing: 0;
  outline: none; max-width: 100%; min-width: 0; }
.pr-scheme input:focus, .pr-scheme select:focus { border-color: var(--accent); }
.pr-scheme input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); }
.pr-items { display: flex; flex-direction: column; gap: 8px; }
.pr-item { padding: 10px 12px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px; }
.pr-item label.nm { flex: 1 1 160px; }
.pr-item label.val { width: 120px; }
.pr-item label.fld { flex: 1 1 220px; }
.pr-item select[data-i="trigger"] { max-width: 280px; }
.pr-item .pr-ib { align-self: center; }
.pr-scheme-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-scheme-f .spacer { flex: 1; }

/* ---------- форма в окне ---------- */
.pr-form .field { margin-bottom: 14px; }
.pr-form .field input, .pr-form .field select { width: 100%; min-height: 44px; font-size: 16px; border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 0 12px; background: var(--bg); color: var(--ink); font-family: var(--body); }
.pr-form .check { margin: 4px 0 12px; }
.pr-form .pr-note { margin-bottom: 12px; }

/* ---------- вкладка «Выплаты» в карточке сделки ---------- */
.pr-in-card { gap: 12px; }
.pr-card-sch { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink-dim); background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.pr-card-sch i { color: var(--amber-deep); font-style: normal; }
.pr-card-lines { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pr-card-lines > .crm-faint { padding: 10px 12px !important; }
.pr-card-f { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.pr-card-t { font-size: 12.5px; color: var(--ink-dim); font-family: var(--mono); }
/* в узкой колонке карточки строка — две строки ячеек */
.pr-grid.compact { --pr-cols: minmax(130px, 1.3fr) minmax(100px, 1fr) 110px 122px 64px; }
.pr-grid.compact .pr-head { display: none; }
.pr-grid.compact .pr-row { grid-template-areas: "who what amt st acts" "due paid mon note note"; row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
.pr-grid.compact .pr-row:first-of-type { border-top: none; }
.pr-grid.compact .pr-who { grid-area: who; }
.pr-grid.compact .pr-what { grid-area: what; }
.pr-grid.compact .pr-amt { grid-area: amt; }
.pr-grid.compact .pr-stc { grid-area: st; }
.pr-grid.compact .pr-due { grid-area: due; }
.pr-grid.compact .pr-paid { grid-area: paid; }
.pr-grid.compact .pr-mon { grid-area: mon; }
.pr-grid.compact .pr-memo { grid-area: note; }
.pr-grid.compact .pr-acts { grid-area: acts; }
.pr-grid.compact :is(.pr-due, .pr-paid, .pr-mon)::before { content: attr(data-l); font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 0 7px; }

/* ---------- таблица вмещается: поля шапки сделки — под колонками строк ---------- */
@container prlines (min-width: 1100px) {
  .pr-grid:not(.compact) > .pr-deal { display: grid; grid-template-columns: var(--pr-cols); column-gap: 4px; row-gap: 6px;
    align-items: end; padding: 10px 10px 9px; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f { display: contents; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f label { letter-spacing: .03em; white-space: nowrap; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f input, .pr-grid:not(.compact) > .pr-deal .pr-deal-f select { width: 100%; }
  .pr-grid:not(.compact) > .pr-deal .pr-chat { display: flex; align-items: center; gap: 4px; }
  .pr-grid:not(.compact) > .pr-deal .pr-chat input { flex: 1 1 auto; }
  .pr-grid:not(.compact) > .pr-deal > .pr-sel { align-self: center; justify-self: center; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-t { grid-column: 1 / span 3; align-self: center; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(1) { grid-column: 4; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(2) { grid-column: 5; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(3) { grid-column: 6; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f > label.chat { grid-column: 7 / span 2; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f > .add { grid-column: 9; justify-self: end; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-t { grid-column: 2 / span 3; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(1) { grid-column: 5; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(2) { grid-column: 6; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(3) { grid-column: 7; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-f > label.chat { grid-column: 8 / span 2; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-f > .add { grid-column: 10; }
}

/* ---------- таблица не вмещается в строку (700–1099 px): строка — в две линии ---------- */
@container prlines (max-width: 1099px) {
  .pr-grid .pr-head { display: none; }
  .pr-grid:not(.compact) { --pr-cols: minmax(130px, 1.3fr) minmax(100px, 1fr) 112px 132px 64px; }
  .pr-grid.sel:not(.compact) { --pr-cols: 28px minmax(130px, 1.3fr) minmax(100px, 1fr) 112px 132px 64px; }
  .pr-grid:not(.compact) .pr-row { grid-template-areas: "who what amt st acts" "due paid mon note note"; row-gap: 4px;
    padding-top: 8px; padding-bottom: 8px; }
  .pr-grid.sel:not(.compact) .pr-row { grid-template-areas: "sel who what amt st acts" ". due paid mon note note"; }
  .pr-grid:not(.compact) .pr-row > .pr-sel { grid-area: sel; }
  .pr-grid:not(.compact) .pr-who { grid-area: who; }
  .pr-grid:not(.compact) .pr-what { grid-area: what; }
  .pr-grid:not(.compact) .pr-amt { grid-area: amt; }
  .pr-grid:not(.compact) .pr-stc { grid-area: st; }
  .pr-grid:not(.compact) .pr-due { grid-area: due; }
  .pr-grid:not(.compact) .pr-paid { grid-area: paid; }
  .pr-grid:not(.compact) .pr-mon { grid-area: mon; }
  .pr-grid:not(.compact) .pr-memo { grid-area: note; }
  .pr-grid:not(.compact) .pr-acts { grid-area: acts; }
  .pr-grid:not(.compact) :is(.pr-due, .pr-paid, .pr-mon, .pr-memo)::before { content: attr(data-l); font-size: 10px;
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 0 8px; }
  .pr-row.helper { border-left: 3px solid var(--line-bright); }
}

/* ---------- узкая таблица (уже 700 px): строки — карточки ---------- */
@container prlines (max-width: 699px) {
  .pr-grid:not(.compact) .pr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 12px; position: relative;
    grid-template-areas: "who amt" "what st" "due paid" "mon mon" "note note" "acts acts"; }
  .pr-grid:not(.compact) .pr-what { grid-area: what; }
  .pr-grid:not(.compact) .pr-stc { grid-area: st; }
  .pr-grid:not(.compact) .pr-due { grid-area: due; }
  .pr-grid:not(.compact) .pr-paid { grid-area: paid; }
  .pr-grid:not(.compact) .pr-mon { grid-area: mon; }
  .pr-grid:not(.compact).sel .pr-row { padding-left: 40px;
    grid-template-areas: "who amt" "what st" "due paid" "mon mon" "note note" "acts acts"; }
  .pr-grid:not(.compact) .pr-row > .pr-sel { position: absolute; left: 8px; top: 12px; width: 28px; height: 28px; grid-area: auto; }
  .pr-grid:not(.compact) .pr-who { grid-area: who; }
  .pr-grid:not(.compact) .pr-amt { grid-area: amt; }
  .pr-grid:not(.compact) .pr-memo { grid-area: note; }
  .pr-grid:not(.compact) .pr-acts { grid-area: acts; }
  .pr-grid:not(.compact) .pr-acts:empty { display: none; }
  .pr-grid:not(.compact) .pr-c:not(.pr-sel):not(.pr-acts)::before { content: attr(data-l); font-size: 10px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-faint); padding: 0 7px; }
  .pr-grid .pr-c input:not([type=checkbox]), .pr-grid .pr-c select { border-color: var(--line); background-color: var(--bg-card); }
  .pr-row.helper { border-left: 3px solid var(--line-bright); }
  .pr-deal .pr-sel { width: 28px; height: 28px; }
}

/* ---------- уже 1180 px: итоги по людям — карточками, поля — с рамкой ---------- */
@media (max-width: 1179px) {
  .pr-grid .pr-c input:not([type=checkbox]), .pr-grid .pr-c select { border-color: var(--line); background-color: var(--bg-card); }
  .pr-sum-r { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .pr-sum-r .nm { grid-column: 1 / -1; font-size: 14.5px; }
  .pr-sum-r.head { display: none; }
  .pr-sum-r > span:not(.nm) { display: flex; justify-content: space-between; gap: 8px; }
  .pr-sum-r > span:not(.nm)::before { content: attr(data-l); font-family: var(--body); color: var(--ink-faint); font-size: 12px; font-weight: 500; }
}

/* ---------- сенсорный экран: зоны нажатия ---------- */
@media (max-width: 1100px), (pointer: coarse) {
  .pr-ib { width: 40px; height: 40px; }
  .pr-btn, .pr-btn.sm { min-height: 40px; }
  .pr-chips a { min-height: 40px; }
  .pr-badge.act { min-height: 34px; padding: 0 12px; }
  .pr-c input:not([type=checkbox]), .pr-c select, .pr-deal-f select, .pr-deal-f input, .pr-card-info select, .pr-card-info input { height: 44px; }
  .pr-share input:not([type=checkbox]) { height: 40px; width: 80px; }
  .pr-sel input { width: 22px; height: 22px; }
}

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  .pr .pr-headline { align-items: flex-start; }
  .pr-actions { width: 100%; justify-content: flex-start; }
  .pr-save { max-width: 100%; }
  .pr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-filters label, .pr-filters label.grow { flex: 1 1 calc(50% - 5px); }
  .pr-filters select { max-width: none; width: 100%; }
  .pr-deal-f, .pr-card-info { width: 100%; }
  .pr-deal-f label, .pr-card-info label { flex: 1 1 calc(50% - 6px); }
  .pr-deal-f label.chat, .pr-card-info label.chat { flex-basis: 100%; }
  .pr-deal-f label.chat input, .pr-card-info label.chat input { width: 100%; flex: 1; }
  .pr-chat { width: 100%; }
  .pr-grid.compact .pr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "who amt" "what st" "due paid" "mon mon" "note note" "acts acts"; gap: 6px 10px; padding: 10px 12px; }
  .pr-grid.compact .pr-row.helper { border-left: 3px solid var(--line-bright); }
  .pr-grid.compact .pr-c:not(.pr-acts)::before { content: attr(data-l); font-size: 10px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-faint); padding: 0 7px; }
  .pr-grid.compact .pr-c input:not([type=checkbox]), .pr-grid.compact .pr-c select { border-color: var(--line); background-color: var(--bg-card); }
  .pr-grid.compact .pr-acts:empty { display: none; }
  .pr-sum-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pr-mine-r { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-mine-r .d { grid-column: 1 / -1; }
  .pr-item label, .pr-item label.nm, .pr-item label.fld, .pr-item label.val { flex: 1 1 100%; width: auto; }
  .pr-item select[data-i="trigger"] { max-width: none; }
  .pr-bulk { top: auto; bottom: calc(70px + var(--safe-b, 0px)); position: sticky; }
  .pr-tabs a:last-child:not(:first-child) { margin-left: 0; }
}