/* money.css — область учёта: деньги (openMoney, платежи, сверка) и зарплата (openPayroll, openMyPayroll, выплаты); токены — в theme.css.
   Этап 2 редизайна: плитки .ledger-tile, сегмент .seg-choice, панель разнесения
   .money-alloc, плитки периодов .period-tile и выплата в строке .payroll-pay.

   Язык макетов Money/ClinicMoney/Payroll/MyPayroll и окон PaymentDialog, ReconDialog,
   PayoutDialog, AdjustDialog, PeriodDialog: плитки итогов с мягкой смысловой
   заливкой (долг — красный, аванс и «к выдаче» — зелёный, свободные деньги —
   синий, прочее — белая с линией 1 px), суммы, номера и даты — JetBrains Mono,
   таблицы и журналы — строки 1 px без теней. Цвет дополняет подпись, текст не
   меняется. Новых показателей нет: плитки считают только уже загруженные строки.
   Правила ограничены экранами (main[data-view=…]) и окнами (dialog.money-dialog). */

/* ------------------------------------------------------- плитки итогов --- */

.money-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-2-5); margin: 0 0 var(--sp-5);
}
.money-tiles:empty { display: none; }
.money-tile {
  display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0;
  padding: 14px var(--sp-4); border: 1px solid var(--card-border);
  border-radius: var(--radius-panel); background: var(--surface);
}
.money-tile-label {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
  font-size: var(--fs-12-5); font-weight: var(--fw-500); color: var(--ink-2);
}
.money-tile-icon {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: 7px; background: var(--chip-bg); color: var(--ink-2);
}
.money-tile-icon .ui-icon { width: 14px; height: 14px; stroke-width: 2; }
.money-tile-value {
  font-family: var(--mono); font-size: var(--fs-22); font-weight: var(--fw-600);
  line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--ink); overflow-wrap: anywhere;
}
.money-tile-hint { font-size: var(--fs-12); line-height: 1.4; color: var(--muted); }
.money-tile[class*="tone-"] { border-color: transparent; }
.money-tile[class*="tone-"] .money-tile-icon { background: var(--surface); color: currentColor; }
.money-tile.tone-danger { background: var(--danger-soft); }
.money-tile.tone-danger :is(.money-tile-label, .money-tile-value, .money-tile-hint) { color: var(--danger); }
.money-tile.tone-ok { background: var(--ok-soft); }
.money-tile.tone-ok :is(.money-tile-label, .money-tile-value, .money-tile-hint) { color: var(--ok); }
.money-tile.tone-info { background: var(--info-soft); }
.money-tile.tone-info :is(.money-tile-label, .money-tile-value, .money-tile-hint) { color: var(--info); }
.money-tile.tone-warn { background: var(--warn-soft); }
.money-tile.tone-warn :is(.money-tile-label, .money-tile-value, .money-tile-hint) { color: var(--warn); }

/* ------------------------------------------- плитки и знаки (этап 2) --- */

/* Плитка итога «Денег» и «Зарплаты»: нейтральная — мягкая серая с линией, смысловая —
   своей заливкой и рамкой. В «Деньгах» плитка — кнопка-переключатель вкладки. */
.ledger-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: var(--sp-2); }
.ledger-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); min-width: 0;
  padding: var(--sp-3) 14px; border: 1px solid var(--card-border); border-radius: var(--radius-card);
  background: var(--fill-soft); color: var(--ink); font: inherit; text-align: left;
}
button.ledger-tile { cursor: pointer; }
button.ledger-tile:hover { border-color: var(--rule-strong); }
.ledger-tile-label { font-size: var(--fs-12-5); color: var(--ink-2); }
.ledger-tile-value {
  font: var(--fw-600) var(--fs-20)/1.2 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink); overflow-wrap: anywhere;
}
.ledger-tile-sub { font-size: var(--fs-12); color: var(--muted); }
.ledger-tile.tone-danger { background: var(--danger-soft); border-color: var(--danger-line); }
.ledger-tile.tone-danger .ledger-tile-value { color: var(--danger); }
.ledger-tile.tone-ok { background: var(--ok-soft); border-color: var(--ok-line); }
.ledger-tile.tone-ok .ledger-tile-value { color: var(--ok); }
.ledger-tile.tone-info { background: var(--info-soft); border-color: var(--info-line); }
.ledger-tile.tone-info .ledger-tile-value { color: var(--info); }
.ledger-tile.tone-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.ledger-tile.tone-warn .ledger-tile-value { color: var(--warn); }

/* Лаймовые знаки основных кнопок рисует CSS: подпись кнопки (textContent) остаётся
   ровно словами — «Внести платёж», «Закрыть период», «Выгрузить в Excel». */
button.add-mark::before, button.check-mark::before, button.down-mark::before {
  color: var(--button-primary-icon); font-weight: var(--fw-600); line-height: 1;
}
button.add-mark::before { content: "+" / ""; font-size: var(--fs-17); }
button.check-mark::before { content: "✓" / ""; }
button.down-mark::before { content: "↓" / ""; }
button.action.danger { background: var(--danger); }
button.action.danger:hover:not(:disabled) { background: var(--danger); filter: brightness(.92); }

/* Сегментный выбор (общий приём 1): подложка chip, выбранный — белый с тенью. */
.seg-choice {
  display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: var(--radius);
  background: var(--chip-bg);
}
.seg-choice > [role="radio"] {
  min-height: var(--control-h); padding: 0 var(--sp-2-5); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-13); cursor: pointer; white-space: nowrap;
}
.seg-choice > [aria-checked="true"] { background: var(--surface); box-shadow: var(--shadow-tab); font-weight: var(--fw-600); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.money-cap { font-size: var(--fs-11); font-weight: var(--fw-600); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.money-sub { display: block; font-size: var(--fs-12); color: var(--muted); }
.error.field-error { padding: 0; background: none; font-size: var(--fs-12); }
.error.load-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.dialog-text { color: var(--ink-2); line-height: 1.5; }
input[aria-invalid="true"] { border-color: var(--danger); }
/* Шапка таблицы без видимых подписей: колонки названы для чтения с экрана. */
.money-quiet-head th { height: 0 !important; padding: 0 !important; border: 0; background: none; }

/* ------------------------------------------------------------- деньги --- */

main[data-view="money"] > .ledger-tiles { margin: 0 0 var(--sp-4); }
[data-workspace="money"] > .money-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3);
}
.money-toolbar > .workspace-tabs { margin: 0; padding: 3px; border-radius: var(--radius-card); }
.money-toolbar > .workspace-tabs [role="tab"] {
  min-height: var(--control-h); padding: 0 14px; border-radius: var(--radius); font-size: var(--fs-13); color: var(--ink);
}
.money-toolbar > .workspace-search { flex: 1 1 13.75rem; min-width: 0; }
.money-toolbar > .workspace-search input { height: 36px; width: 100%; max-width: none; }
[data-workspace="money"] > .workspace-panel { display: block; }
/* Узко (контент < 700 px, макет: wide = cw ≥ 700): без шапки, «заказчик · долг · акт». */
@media (max-width: 43.74rem) {
  .money-table .money-wide { display: none; }
  .money-debts thead { display: none; }
  .money-debts tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; border-top: 1px solid var(--row-rule); }
  .money-debts tbody tr:first-child { border-top: 0; }
  .money-debts tbody td { height: auto; min-height: 52px; display: flex; flex-direction: column; justify-content: center; border: 0; padding: var(--sp-2) 0; }
  .money-debts tbody td:first-child { padding-left: 14px; }
  .money-debts tbody td:last-child { padding-right: 14px; }
  .money-debts tbody td.num { align-items: flex-start; text-align: left; }
  .money-debts tbody td.row-acts { flex-direction: row; align-items: center; justify-content: flex-end; width: auto; }
  .money-debts tbody td.row-acts > button { white-space: nowrap; }
}
.money-foot { margin: var(--sp-2) 0 0; font-size: var(--fs-12); }

/* Таблица денег — карточка с линией 1 px; строка 52 px, суммы моноширинные справа. */
.money-list:has(> table) { border: 1px solid var(--card-border); border-radius: var(--radius-panel); overflow: hidden; background: var(--surface); }
.money-table tbody tr { cursor: default; }
.money-table tbody tr:hover { background: none; }
.money-table td { height: 52px; padding: var(--sp-2) 14px; vertical-align: middle; }
.money-table th { height: 38px; padding: 0 14px; }
.money-table th.num, .money-table td.num { text-align: right; }
.money-table td.num { font-family: var(--mono); font-size: var(--fs-12-5); }
.money-table td.row-acts { width: 1%; text-align: right; }
.money-table td.money-party { font-weight: var(--fw-600); color: var(--ink); }
.money-table .money-debt { color: var(--danger); font-weight: var(--fw-600); }
.money-table .money-advance { color: var(--ok); font-weight: var(--fw-600); }
.money-table .money-zero, .money-table .money-dash { color: var(--muted); }
.money-free { color: var(--info); }
.money-table small.money-sub { font-family: var(--font); font-size: 11.5px; white-space: normal; }
.money-table td.money-sum { font-weight: var(--fw-600); color: var(--ink); width: 9rem; }

/* Платежи: строка — кнопка выбора платежа; выбранная отмечена полосой слева. */
.money-pays tr.is-selected { background: var(--gray-25); }
.money-pays tr.is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.money-pays tbody tr { cursor: pointer; }
.money-pays tbody tr:hover { background: var(--gray-25); }
.money-pay-open {
  display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; padding: 0;
  border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.money-pay-open > b { font-weight: var(--fw-600); }
td.money-pay-state { width: 1%; text-align: right; }
.money-pill {
  display: inline-flex; align-items: center; padding: 2px var(--sp-2); border-radius: var(--radius-pill);
  background: var(--chip-bg); color: var(--ink-2); font: var(--fw-500) var(--fs-12) var(--mono); white-space: nowrap;
}
.money-pill.is-free { background: var(--info-soft); color: var(--info); }
.money-pay-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (min-width: 74.5rem) {
  .money-pay-layout:has(> aside:not([hidden])) { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* Разнесение — боковая панель с чёрной рамкой: видно, какой платёж разносят. */
.money-alloc {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
  padding: 14px var(--sp-4); border: 1px solid var(--ink); border-radius: var(--radius-panel); background: var(--surface);
}
.money-alloc:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.money-alloc-head { display: flex; align-items: flex-start; gap: var(--sp-2-5); }
.money-alloc-head > div { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.money-alloc-head .eyebrow { font-size: var(--fs-10-5); font-weight: var(--fw-600); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.money-alloc-head h2 { margin: 0; font-size: var(--fs-17); font-weight: var(--fw-600); overflow-wrap: anywhere; }
.money-alloc-head p { margin: 0; color: var(--ink-2); }
.money-alloc-head b { font-family: var(--mono); }
button.icon-only { width: var(--control-h); padding: 0; flex: none; font-size: var(--fs-17); }
.money-alloc-block { display: flex; flex-direction: column; gap: var(--sp-1-5); }
.money-alloc-block > .hint { margin: 0; }
.money-alloc-order {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2-5); border: 1px solid var(--card-border); border-radius: var(--radius);
}
.money-alloc-what { flex: 1 1 8.75rem; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.money-alloc-what b { font-size: var(--fs-12); }
.money-alloc-order > input { width: 110px; height: var(--control-h); padding: 0 var(--sp-2); text-align: right; font-size: var(--fs-12-5); }
.money-alloc-done { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-12-5); }
.money-alloc-done > .money-sub { flex: 1; min-width: 6rem; display: inline; }
.money-alloc-done.is-returned { opacity: .55; }
.money-return {
  display: flex; flex-direction: column; gap: var(--sp-1-5); padding: var(--sp-2-5);
  border-radius: var(--radius); background: var(--warn-soft);
}
.money-return-q { font-weight: var(--fw-500); }
.money-return input { height: 32px; padding: 0 var(--sp-2); background: var(--surface); }
.money-return input[aria-invalid="true"] { border-color: var(--danger); }
.money-return-acts > button { height: 28px; padding: 0 var(--sp-2-5); border-radius: var(--radius-chip); }
.money-return-acts > button.ghost { border-color: var(--warn-button-line); background: var(--surface); }
.money-return-acts { display: flex; justify-content: flex-end; gap: var(--sp-1-5); }

/* ----------------------------------------------------------- зарплата --- */

.payroll-links { gap: var(--sp-2); }
.payroll-links > button { height: 32px; padding: 0 var(--sp-3); }
/* Шапки «Зарплаты» и «Денег»: действие прижато к низу текста (макет: align-items:flex-end). */
main:is([data-view="payroll"], [data-view="money"]) > header.ledger-heading { align-items: flex-end; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.period-tiles { display: flex; gap: var(--sp-1-5); overflow-x: auto; padding-bottom: 2px; margin: 0 0 var(--sp-4); }
.period-tile {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: var(--sp-2) 14px; border: 1px solid var(--button-border); border-radius: var(--radius-card);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.period-tile > b { font-weight: var(--fw-600); }
.period-tile > span { font-size: 11.5px; opacity: .8; }
.period-tile[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); }
.period-add {
  flex: none; min-height: 44px; padding: 0 14px; border: 1px dashed var(--decor); border-radius: var(--radius-card);
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}

main[data-view="payroll"] .period {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--card-border); border-radius: var(--radius-panel); background: var(--surface);
}
main[data-view="payroll"] .period.closed { background: var(--gray-25); }
main[data-view="payroll"] .period-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) 14px; flex: none; }
main[data-view="payroll"] .period-main > b { display: inline; margin: 0; font-size: var(--fs-17); font-weight: var(--fw-600); }
main[data-view="payroll"] .period-state {
  padding: 2px var(--sp-2-5); border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok);
  font-size: var(--fs-12); font-weight: var(--fw-600);
}
main[data-view="payroll"] .period.closed .period-state { background: var(--chip-bg); color: var(--ink-2); }
main[data-view="payroll"] .period-range { font: var(--fs-12-5) var(--mono); color: var(--ink-2); }
main[data-view="payroll"] .period-act { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; flex: none; }
main[data-view="payroll"] .period-sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.625rem, 1fr)); flex: none; }
main[data-view="payroll"] .period-note { margin: 0; font-size: var(--fs-12-5); color: var(--ink-2); }
main[data-view="payroll"] .period-warn { margin: 0; font-size: var(--fs-12-5); color: var(--warn); }

/* Свод слева, премии справа колонкой 320 px, пока на это хватает ширины. */
main[data-view="payroll"] .payroll-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (min-width: 74.5rem) {
  main[data-view="payroll"] .payroll-body:has(> .payroll-adjustments) { grid-template-columns: minmax(0, 1fr) 320px; }
}
.payroll-summary { min-width: 0; border: 1px solid var(--card-border); border-radius: var(--radius-panel); overflow: hidden; background: var(--surface); }
.payroll-summary-head {
  display: flex; align-items: center; gap: var(--sp-2-5); padding: var(--sp-2-5) 14px;
  background: var(--table-head-bg); border-bottom: 1px solid var(--card-border);
}
.payroll-summary-head > h2 { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-600); }
.payroll-summary-head > span { margin-left: auto; font-size: var(--fs-12); color: var(--muted); }
.payroll-summary > .empty, .payroll-summary > .error { margin: var(--sp-3); }
.payroll-summary .table-wrap { border: 0; border-radius: 0; }
.payroll-table tbody tr { cursor: default; }
.payroll-table tbody tr:hover { background: none; }
.payroll-table tr.payroll-row > td { height: 56px; padding: var(--sp-2-5) 14px; border-bottom: 0; border-top: 1px solid var(--row-rule); }
.payroll-table tbody tr:first-child > td { border-top: 0; }
.payroll-table tr.payroll-row > td.payroll-person { position: relative; padding-left: calc(14px + 32px + 10px); }
.payroll-table td.payroll-person::before {
  content: attr(data-initials) / "";
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--indigo-50); color: var(--indigo-700); font-size: var(--fs-11); font-weight: var(--fw-600);
}
.payroll-table td.payroll-person > b { display: block; font-weight: var(--fw-600); }
.payroll-out { display: block; font-size: var(--fs-12); color: var(--muted); }
.payroll-table td.payroll-earned { width: 150px; font-family: var(--mono); font-size: var(--fs-12-5); }
.payroll-table td.payroll-earned > small { display: block; font-size: 11.5px; color: var(--muted); }
.payroll-table td.payroll-left { width: 120px; font: var(--fw-600) var(--fs-13) var(--mono); color: var(--muted); }
.payroll-table td.payroll-left.is-owed { color: var(--ok); }
.payroll-table td.payroll-left.is-debt { color: var(--danger); }
.payroll-table td.row-acts { width: 1%; white-space: nowrap; text-align: right; }
.payroll-table td.row-acts > button + button { margin-left: var(--sp-1-5); }
/* «Выдать» — главное действие строки свода и в макете чёрное, в отличие от общих
   тихих кнопок строк (.row-acts button.action). */
.payroll-table td.row-acts > button.action { background: var(--button-primary-bg); color: var(--button-primary-ink); border: 0; font-weight: var(--fw-500); }
.payroll-table td.row-acts > button.action:hover:not(:disabled) { background: var(--primary-light); color: var(--button-primary-ink); }

/* Выплата раскрывается под строкой техника: сумма, способ, заметка и история. */
.payroll-table tr.payroll-pay-row > td { height: auto; padding: 0 14px var(--sp-3); border: 0; }
.payroll-pay { display: flex; flex-direction: column; gap: var(--sp-2-5); padding: var(--sp-3); border-radius: var(--radius-card); background: var(--fill-soft); }
.payroll-pay-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; }
.payroll-pay-form > label.field { font-size: var(--fs-12); }
.payroll-pay-form > label.field > input { width: 150px; height: 36px; text-align: right; }
.payroll-pay-form > .seg-choice { background: var(--rule); }
.payroll-pay-form > input { flex: 1 1 8.75rem; min-width: 0; height: 36px; }
.payroll-pay-form > button { height: 36px; }
.payroll-pay > .error { margin: 0; }
.payroll-pay-done { display: flex; flex-direction: column; gap: var(--sp-1); }
.payroll-pay-history { display: flex; flex-direction: column; gap: var(--sp-1); }
.payroll-pay-history > .hint { margin: 0; }
.payroll-pay .ledger-row.payroll-payout {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2-5);
  min-width: 0; padding: 0; border: 0; font-size: var(--fs-12-5);
}
.payroll-payout > .payout-kind { min-width: 90px; }
.payroll-payout > .rate { font-weight: var(--fw-600); }
.payroll-payout > .reason { flex: 1; min-width: 6rem; color: var(--muted); overflow-wrap: anywhere; }
.payroll-payout.is-off { opacity: .55; }

/* Премии и удержания — карточки; сторнированная — зачёркнута и приглушена. */
main[data-view="payroll"] .payroll-adjustments {
  display: flex; flex-direction: column; gap: var(--sp-2-5); min-width: 0; margin: 0; padding: 14px;
  border: 1px solid var(--card-border); border-radius: var(--radius-panel); background: var(--surface);
}
.payroll-adjustments-head { display: flex; align-items: center; gap: var(--sp-2); }
.payroll-adjustments-head > h2 { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-600); letter-spacing: 0; text-transform: none; color: var(--ink); }
.payroll-adjustments-head > button { margin-left: auto; }
main[data-view="payroll"] .payroll-adjustments > .hint, main[data-view="payroll"] .payroll-adjustments > .error { margin: 0; }
main[data-view="payroll"] .payroll-adjustment-entry {
  display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: var(--sp-2-5) var(--sp-3);
  border: 1px solid var(--card-border); border-radius: var(--radius-card);
}
.payroll-adjustment-entry > .adj-top { display: flex; align-items: baseline; gap: var(--sp-2); }
.payroll-adjustment-entry > .adj-top > b { font-weight: var(--fw-600); }
.payroll-adjustment-entry .adj-amount { margin-left: auto; font: var(--fw-600) var(--fs-12-5) var(--mono); white-space: nowrap; }
.payroll-adjustment-entry .adj-amount.is-plus { color: var(--ok); }
.payroll-adjustment-entry .adj-amount.is-minus { color: var(--danger); }
.payroll-adjustment-entry > .adj-reason { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.payroll-adjustment-entry > .adj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); color: var(--muted); }
.payroll-adjustment-entry .adj-state {
  margin-left: auto; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--chip-bg); color: var(--ink-2); font-weight: var(--fw-500);
}
.payroll-adjustment-entry .adj-meta > button { height: 26px; padding: 0 var(--sp-2); }
main[data-view="payroll"] .payroll-adjustment-entry.is-reversed { opacity: .6; }
.payroll-adjustment-entry.is-reversed > .adj-reason { text-decoration: line-through; }


/* Мой расчётный лист (макет «Мой расчётный лист.dc.html»): лист прямо на странице —
   плитки периодов, итог «К выдаче» на чёрном, три плитки выработки, фильтр и строки
   по дням с суммой дня. Деньги — JetBrains Mono, отрицательные — знаком «−». */
main[data-view="my-payroll"] > header.my-payroll-head,
main[data-view="my-payroll"] > .my-payroll { max-width: 1040px; }
header.my-payroll-head { align-items: flex-end; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
header.my-payroll-head > div:first-child { display: grid; gap: var(--sp-1); flex: 1 1 260px; min-width: 0; }
header.my-payroll-head h1 { margin: 0; font-size: var(--fs-26); font-weight: var(--fw-600); letter-spacing: -.01em; }
header.my-payroll-head .section-sub { margin: 0; color: var(--muted); }
header.my-payroll-head .head-actions > button { height: 36px; padding: 0 14px; color: var(--ink); }
.my-payroll, .my-payroll-sheet { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

.my-payroll-periods { display: flex; gap: var(--sp-1-5); overflow-x: auto; padding-bottom: 2px; }
.my-payroll-periods > button {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: var(--sp-2) 14px;
  border: 1px solid var(--button-border); border-radius: var(--radius-card); background: var(--surface); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.my-payroll-periods > button > b { font-weight: var(--fw-600); }
.my-payroll-periods > button > small { font-size: 11.5px; opacity: .8; }
.my-payroll-periods > button[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: var(--ink-inverse); }

.my-payroll-summary {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius-panel); background: var(--rule);
}
.my-payroll-summary > div { display: flex; flex-direction: column; gap: var(--sp-1-5); padding: var(--sp-4) 18px; background: var(--surface); min-width: 0; }
.my-payroll-summary > div > span { font-size: var(--fs-12-5); color: var(--muted); }
.my-payroll-summary > div > b { font: var(--fw-600) var(--fs-17)/1.2 var(--mono); overflow-wrap: anywhere; }
.my-payroll-summary > div > small { font-size: var(--fs-12); color: var(--muted); }
.my-payroll-summary > .is-main { background: var(--ink); color: var(--ink-inverse); }
.my-payroll-summary > .is-main > span { color: var(--brand-lime); }
.my-payroll-summary > .is-main > b { font-size: var(--fs-26); line-height: 1.1; }
.my-payroll-summary > .is-main > small { color: var(--rule-strong); }

.my-payroll-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-2); }
.my-payroll-stats > div { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-2-5) var(--sp-3); border-radius: var(--radius-card); background: var(--fill-soft); }
.my-payroll-stats > div > b { font: var(--fw-600) 15px/1.3 var(--mono); }
.my-payroll-stats > div > span { font-size: var(--fs-12); color: var(--ink-2); line-height: 1.35; }

.my-payroll-filter { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--radius-card); background: var(--chip-bg); }
.my-payroll-filter > button {
  display: inline-flex; align-items: center; gap: var(--sp-1-5); height: var(--control-h); padding: 0 var(--sp-3);
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; white-space: nowrap; cursor: pointer;
}
.my-payroll-filter > button[aria-checked="true"] { background: var(--surface); box-shadow: var(--shadow-tab); font-weight: var(--fw-600); }
.my-payroll-count { font: 11.5px var(--mono); color: var(--muted); }

.my-payroll-ledger { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-panel); }
.my-payroll-day {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2-5); padding: var(--sp-2) 14px;
  border-top: 1px solid var(--rule); background: var(--fill-soft); font-size: var(--fs-12); font-weight: var(--fw-600); color: var(--ink-2);
}
.my-payroll-list > :first-child { border-top: 0; }
.my-payroll-day > .mono { font: var(--fw-400) var(--fs-12) var(--mono); color: var(--muted); }
.my-payroll-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); padding: var(--sp-2-5) 14px;
  border-top: 1px solid var(--row-rule); background: var(--surface);
}
.my-payroll-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.my-payroll-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.my-payroll-title > b { font-weight: var(--fw-600); }
.my-payroll-title > .mono { font: var(--fs-12) var(--mono); color: var(--ink-2); }
.my-payroll-tag { padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--fs-11); font-weight: var(--fw-600); background: var(--chip-bg); color: var(--ink-2); }
.my-payroll-tag[data-tone="ok"] { background: var(--ok-soft); color: var(--ok); }
.my-payroll-tag[data-tone="warn"] { background: var(--warn-soft); color: var(--warn); }
.my-payroll-sub { font-size: var(--fs-12); color: var(--ink-2); overflow-wrap: anywhere; }
.my-payroll-rate { font-size: var(--fs-12); color: var(--muted); overflow-wrap: anywhere; }
.my-payroll-row > .rate { font: var(--fw-600) var(--fs-13) var(--mono); white-space: nowrap; text-align: right; }
.my-payroll-row > .rate.is-negative { color: var(--danger); }
.my-payroll-row.is-reversal { background: var(--dialog-footer-bg); }
.my-payroll-row.is-reversal .my-payroll-title > b { color: var(--muted); text-decoration: line-through; }
.my-payroll-none { margin: 0; padding: var(--sp-6) 14px; text-align: center; color: var(--muted); }
.my-payroll-total {
  display: flex; justify-content: space-between; gap: var(--sp-2-5); padding: var(--sp-3) 14px;
  border-top: 1px solid var(--rule); background: var(--dialog-footer-bg);
}
.my-payroll-total > b { font-weight: var(--fw-600); }
.my-payroll-total > .rate { font: var(--fw-600) var(--fs-14) var(--mono); }
.my-payroll-note { max-width: 720px; margin: 0; font-size: var(--fs-12); color: var(--muted); line-height: 1.5; }

.my-payroll-blank {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1-5); padding: 40px var(--sp-5);
  border: 1px solid var(--rule); border-radius: var(--radius-panel); background: var(--dialog-footer-bg); text-align: center; color: var(--ink-2);
}
.my-payroll-blank > strong { font-size: var(--fs-17); font-weight: var(--fw-600); color: var(--ink); }
.my-payroll-blank > span { max-width: 440px; }
.my-payroll-blank > strong + span { color: var(--muted); }
.my-payroll-loading { height: 300px; border-radius: var(--radius-panel); background: var(--fill-soft); }
.my-payroll-error {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--danger-soft)); border-radius: var(--radius-panel); background: var(--danger-soft);
}
.my-payroll-error > span { flex: 1 1 260px; }
.my-payroll-error > span > b { color: var(--danger); font-weight: var(--fw-600); }
.my-payroll-error > button { height: 36px; padding: 0 var(--sp-4); }
@media (max-width: 600px) {
  .my-payroll-summary { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ окна --- */

dialog.money-dialog form > p { margin: 0; }
dialog.money-dialog form > h2 + .hint:not(.money-summary) { margin-top: calc(-1 * var(--sp-2)); }
.money-input { font-family: var(--mono); font-variant-numeric: tabular-nums; }
dialog.money-dialog input[type="date"] { font-family: var(--mono); font-size: var(--fs-12-5); }
.money-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); min-width: 0; }
.money-pair > label:not(.field) {
  display: grid; gap: var(--sp-1-5); min-width: 0;
  font-size: var(--fs-12-5); font-weight: var(--fw-500); color: var(--ink-2);
}
.money-note {
  padding: 11px var(--sp-3); border-radius: var(--radius-card);
  background: var(--info-soft); color: var(--info); font-size: var(--fs-12-5); line-height: 1.5;
}
.money-note.is-pending { background: var(--warn-soft); color: var(--warn); }
dialog.money-dialog .error:empty { display: none; }
/* Группы полей в окнах области — без рамки: подпись группы малым капсом над
   полями, как в макетах PaymentDialog и PayoutDialog. Отступ под подписью 8 px
   и шаг полей 12 px одинаковы во всех окнах области; рамка, внутренний отступ
   и подпись на линии остаются только у окон вне этой области. */
dialog.money-dialog .form-group {
  padding: 0; border: 0; border-radius: 0; gap: var(--sp-3);
}
dialog.money-dialog .form-group > legend { padding: 0 0 var(--sp-2); }

/* Поступление денег: от кого, сумма с сегментом способа строкой, пометка. */
dialog.payment-dialog, dialog.period-state-dialog, dialog.payout-return-dialog { width: min(28.75rem, calc(100vw - 2rem)); }
.money-amount-row { display: flex; flex-wrap: wrap; gap: var(--sp-2-5); align-items: flex-end; }
.money-amount-row > label.field { flex: 0 1 10rem; }
.money-amount-row > label.field > input { text-align: right; }

/* Акт сверки и период: даты парой. */
dialog.recon-dialog, dialog.period-dialog { width: min(28.75rem, calc(100vw - 2rem)); }

/* Лист техника (макет): окно 620 px, строки «дата · что сделано · сумма»,
   разделённые линией; отрицательная сумма — красным на светлой подложке. */
dialog.sheet-dialog { width: min(620px, calc(100vw - 2rem)); }
dialog.sheet-dialog .sheet-rows { display: grid; }
dialog.sheet-dialog .sheet-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sp-2-5);
  padding: var(--sp-2) 0; border-top: 1px solid var(--row-rule);
}
dialog.sheet-dialog .sheet-row.is-minus { background: var(--gray-25); }
dialog.sheet-dialog .sheet-day { font: var(--fs-12) var(--mono); color: var(--muted); }
dialog.sheet-dialog .sheet-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
dialog.sheet-dialog .sheet-what > b { font-weight: var(--fw-500); }
dialog.sheet-dialog .sheet-what > span { font-size: var(--fs-12); color: var(--muted); }
dialog.sheet-dialog .sheet-sum { font: var(--fw-600) var(--fs-12-5) var(--mono); color: var(--ink); white-space: nowrap; }
dialog.sheet-dialog .sheet-row.is-minus .sheet-sum { color: var(--danger); }

/* Премия / удержание: техник и сумма парой, пояснение — синей заметкой. */
dialog.adjust-dialog { width: min(28.75rem, calc(100vw - 2rem)); }

@media (max-width: 42rem) {
  /* Плитки на телефоне — строкой «подпись … сумма», чтобы итоги не занимали экран. */
  .money-tile { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); padding: var(--sp-2-5) var(--sp-3); }
  .money-tile-value { font-size: var(--fs-17); }
  .money-tile-hint { flex-basis: 100%; }
  .money-toolbar > .workspace-search { flex: 1 1 100%; }
  /* Узкий список платежей: сумма рядом с заказчиком, отметка разнесения — под ними. */
  .money-pays tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .money-pays tbody td { height: auto; border: 0; }
  .money-pays tbody tr + tr { border-top: 1px solid var(--row-rule); }
  .money-pays td.money-pay-state { grid-column: 1 / -1; width: auto; padding-top: 0; text-align: left; }
  /* Свод по цеху: имя и итог строкой, кнопки — под ними. */
  .payroll-table tr.payroll-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--row-rule); }
  .payroll-table tbody tr.payroll-row:first-child { border-top: 0; }
  .payroll-table tr.payroll-row > td { height: auto; border: 0; }
  .payroll-table-wrap > table.payroll-table { min-width: 0; }
  .payroll-table td.payroll-earned, .payroll-table td.payroll-left { width: auto; }
  .payroll-table td.payroll-left { padding-top: 0; text-align: right; }
  .payroll-table td.row-acts { width: auto; padding-top: 0; }
  .payroll-table tr.payroll-pay-row { display: block; }
  .payroll-table tr.payroll-pay-row > td { display: block; }
  main[data-view="payroll"] .period-act { margin-left: 0; }
  .money-pair { grid-template-columns: minmax(0, 1fr); }
}

/* «+ Внести платёж» — крупная кнопка 38 px (макет). */
main[data-view="money"] > header.ledger-heading .head-actions > button.action { height: 38px; padding: 0 var(--sp-4); }