/* packages/ui/payroll.css — функция «Расчёт ЗП» сервиса «Отдел финансов»
 * (ADR-0204, packages/ui/payroll.js).
 *
 * Раскладка/прокрутка больше не свои: экран функции монтируется внутри
 * `.services-card .cfg-host` (`services.css`), который уже прокручиваемый
 * позиционированный контейнер — тем же приёмом, что у «Оценки клиента» и
 * «Калькуляторов». Своих `.payroll-screen`/`.payroll-body`/`.pr-tab-pane`
 * этот файл больше не заводит: до ADR-0204 они держали раскладку ОТДЕЛЬНОГО
 * раздела навигации, которого больше нет.
 *
 * Поля вкладки «Запуск» своих стилей почти не заводят: подпись/ввод/
 * подсказка/ошибка берутся у `form.css` (`.cfg-field`, `.cfg-label`,
 * `.cfg-input`, `.cfg-select`, `.cfg-hint`, `.cfg-error`) — тот же предмет,
 * что на форме настроек сервиса. Полоса вкладок и кнопки — общие `.tabs-row`/
 * `.tabs`/`.btn` из `shell.css`. Таблица/число/состояние — `.tbl`/`.num`
 * (`table.css`/`format.css`) и `.state` (`states.css`); ни один из них здесь
 * не переобъявлен. Классы `pr-*` ниже принадлежат разметке, которую рисует
 * `payroll_views.js` (табличный журнал и карточка статуса), — этот файл их
 * только раскрашивает токенами темы.
 *
 * Только `var(--…)` из `packages/theme/tokens.css`, литеральный hex — только
 * `#fff`, механизма тёмной темы нет и не будет.
 */

/* Причина отказа из тела ответа эджа (payroll.js::renderOutcome) — внутри
   плаката состояния, при его заголовке: два владельческих предусловия запуска
   приезжают одним статусом и различаются только этой строкой. */
.pr-state-note {
  margin: .4rem 0 0;
  font: 400 13px/1.5 var(--sans);
  color: var(--ink-2);
}

/* --- вкладка «Запуск» ------------------------------------------------------ */

.pr-period-row {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.pr-period-row .cfg-field {
  border-bottom: none;
  padding: 0 0 .8rem;
}

.pr-run-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  margin-top: .8rem;
}

.pr-run-result p {
  margin: 0;
  font: 400 13px/1.5 var(--sans);
  color: var(--ink);
}

/* Подтверждение запуска (payroll.js) — тот же приём, что у подтверждения
   отката ниже: расчёт всегда пишет в боевые книги (ADR-0205), и молчаливая
   кнопка «Запустить» переписывала бы их без предупреждения. */
.pr-start-confirm {
  margin-top: .6rem;
}

.pr-start-confirm-message {
  margin: 0 0 .6rem;
  font: 400 13px/1.5 var(--sans);
  color: var(--ink-2);
}

.pr-start-confirm-buttons {
  display: flex;
  gap: .6rem;
}

/* --- вкладка «Статус расчёта» ---------------------------------------------- */

.pr-status-row {
  display: flex;
  align-items: flex-end;
  gap: .8rem;
}

.pr-status-row .cfg-field {
  border-bottom: none;
  padding: 0;
  max-width: 220px;
}

.pr-status-host {
  position: relative;
  min-height: 120px;
  margin-top: 1rem;
}

.pr-rollback {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--divider);
}

.pr-rollback-confirm {
  display: flex;
  gap: .6rem;
  margin-top: .6rem;
}

.pr-rollback-message {
  margin-top: .6rem;
  font: 400 13px/1.5 var(--sans);
  color: var(--ink-2);
}

/* --- вкладка «История выгрузок» -------------------------------------------- */

.pr-history-host {
  position: relative;
  min-height: 160px;
}

.pr-more {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

/* --- журнал (payroll_views.js::renderRunTable) ----------------------------- */

.pr-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.pr-table th {
  text-align: left;
  color: var(--ink-3);
  border-bottom: 1px solid var(--border);
  padding: .5rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.pr-table td {
  border-bottom: 1px solid var(--divider);
  padding: .5rem .7rem;
  vertical-align: top;
}

.pr-table tbody tr:nth-child(even) {
  background: var(--surface-3);
}

/* Строка журнала кликабельна целиком (payroll_views.js::renderRunTable) —
   курсор и подсветка об этом и говорят: без них попадание мимо кнопки номера
   остаётся невидимым, и человек ищет глазами единственную маленькую цель. */
.pr-run-row {
  cursor: pointer;
}

/* Селектор длиннее полосатости строк намеренно: `.pr-table tbody
   tr:nth-child(even)` весит больше одного класса и съел бы подсветку на
   каждой второй строке. */
.pr-table tbody tr.pr-run-row:hover {
  background: var(--blue-wash);
}

/* Причина отказа и счётчик шагов — две колонки, ради которых журнал отвечает
   на «что пошло не так» без перехода в карточку расчёта. */
.pr-run-reason {
  max-width: 22rem;
  color: var(--ink-2);
}

.pr-run-steps {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.pr-run-id .btn {
  padding: .2rem .55rem;
  font-size: .82rem;
}

.pr-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--ink-3);
  font-size: .9rem;
}

/* --- бейдж исхода (журнал и карточка статуса) ------------------------------ */

.pr-outcome {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font: 500 .78rem/1.2 var(--sans);
  background: var(--surface-2);
  color: var(--ink-2);
}

.pr-outcome-succeeded {
  background: var(--blue-wash);
  color: var(--ok);
}

.pr-outcome-failed {
  background: var(--blue-wash);
  color: var(--err);
}

.pr-outcome-running {
  background: var(--blue-wash);
  color: var(--blue-deep);
}

.pr-outcome-stuck {
  background: var(--blue-wash);
  color: var(--warn);
}

.pr-outcome-unknown {
  background: var(--surface-2);
  color: var(--ink-3);
}

/* --- карточка статуса (payroll_views.js::renderStatusCard) ----------------- */

.pr-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.pr-card-head {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.pr-card-head h2 {
  margin: 0;
  font: 600 15px/1.3 var(--sans);
  color: var(--ink);
}

.pr-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.pr-fact {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.pr-fact-label {
  font: 400 11px/1.3 var(--sans);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.pr-fact-value {
  font: 500 13px/1.4 var(--sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pr-stuck-hint {
  margin: 0;
  padding: .6rem .8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--warn);
  font: 400 12.5px/1.5 var(--sans);
}

/* --- счётчики шагов --------------------------------------------------------- */

.pr-counters {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.pr-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .5rem .9rem;
  background: var(--surface-2);
  border-radius: 6px;
  min-width: 84px;
}

.pr-counter-value {
  font: 600 16px/1.2 var(--sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pr-counter-label {
  font: 400 11px/1.3 var(--sans);
  color: var(--ink-3);
  text-align: center;
}

/* --- отказы ------------------------------------------------------------------ */

.pr-failures h3,
.pr-skipped h3,
.pr-steps h3,
.pr-sheets h3,
.pr-unmatched h3,
.pr-roster h3 {
  margin: 0 0 .5rem;
  font: 600 13px/1.3 var(--sans);
  color: var(--ink-2);
}

/* Пропущенные шаги — своя секция, не «Отказы»: пропуск приезжает от модуля в
   том же `errors[]`, но говорит противоположное. Оформление то же, что у
   отказов: разводит их заголовок, а не цвет — цветом здесь различалась бы
   серьёзность, которой у пропуска нет. */
.pr-skipped {
  margin-top: .75rem;
}

.pr-failure {
  padding: .55rem .7rem;
  margin-bottom: .5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.pr-failure:last-child {
  margin-bottom: 0;
}

.pr-failure-step {
  font: 500 12px/1.4 var(--sans);
  color: var(--ink-2);
  margin-bottom: .2rem;
}

.pr-failure-text {
  font: 400 13px/1.5 var(--sans);
  color: var(--err);
}

.pr-failure-code {
  font: 400 11px/1.4 var(--mono);
  color: var(--ink-3);
  margin-top: .2rem;
}

/* --- шаги ---------------------------------------------------------------------- */

.pr-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.pr-step-list li {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font: 400 13px/1.5 var(--sans);
  color: var(--ink);
}

.pr-step-name {
  font-weight: 500;
}

.pr-step-outcome {
  color: var(--ink-2);
}

/* --- книги выгрузки -------------------------------------------------------------- */

.pr-sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.pr-sheet-key {
  font: 500 13px/1.5 var(--sans);
  color: var(--ink-2);
}

.pr-sheet-link {
  color: var(--blue-deep);
}

.pr-sheet-plain {
  font: 400 12px/1.5 var(--mono);
  color: var(--ink-3);
}

/* --- несопоставленные и штат ------------------------------------------------------ */

.pr-unmatched-group {
  margin-bottom: .6rem;
}

.pr-unmatched-step {
  font: 500 12px/1.4 var(--sans);
  color: var(--ink-2);
  margin-bottom: .2rem;
}

.pr-roster-block {
  margin-bottom: .8rem;
}

.pr-roster-list {
  list-style: none;
  margin: .3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font: 400 13px/1.5 var(--sans);
  color: var(--ink);
}