/* Страница «Зарплата персонала» (/payroll/). Общие детали — landing.css (ld-browser, ld-ui, ld-pill, ld-table,
   ld-phone, ld-faq), features.css (f-row, f-card, f-toast, f-cta, f-lk__*), promotions.css (p-list) и delivery.css
   (d-tg — чат Telegram, d-stack, d-chans); здесь только макеты, которых там нет: окно правила оплаты, операции
   кассы, ведомость, табель Т-13, состав заработка в кабинете и сводка. Цвета — как в панели */

/* Окно правила оплаты: поля, переключатель, живой пример */
.z-rule { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.z-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: #eef2f7; }
.z-seg span { text-align: center; padding: 6px 4px; border-radius: 8px; color: #5e6e82; font-weight: 500; }
.z-seg span.on { background: #fff; color: #1d62c4; box-shadow: 0 1px 3px rgba(11,21,36,.08); }
.z-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.z-field { padding: 6px 10px 7px; border: 1px solid #dde4ee; border-radius: 9px; background: #fff; }
.z-field small { display: block; color: #8a97a8; font-size: 10.5px; }
.z-field b { font-weight: 600; color: #0e1b2c; }
.z-field--wide { grid-column: 1 / -1; }
.z-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.z-chips span { padding: 4px 10px; border-radius: 999px; background: #eef2f7; color: #5e6e82; font-size: 12px; }
.z-chips span.on { background: #d5e5fa; color: #1d62c4; font-weight: 600; }
.z-preview { padding: 8px 10px; border-radius: 9px; background: #f5f8fc; font-size: 12px; color: #4d5969; line-height: 1.55; }
.z-preview b { color: #0e1b2c; }
.z-label { font-size: 11px; font-weight: 600; color: #8a97a8; text-transform: uppercase; letter-spacing: .04em; }

/* Кнопки в макетах: синяя — одна, остальные — светлые с рамкой */
.z-btn { display: inline-block; padding: 5px 10px; border-radius: 8px; border: 1px solid #dde4ee; background: #fff; color: #344050;
  font-size: 12px; font-weight: 500; white-space: nowrap; }
.z-btn--primary { background: #2c7be5; border-color: #2c7be5; color: #fff; }
.z-btn--soft { background: #fff; border-color: #c9dbf5; color: #1d62c4; }
.z-acts { display: flex; gap: 6px; align-items: center; flex: none; }

/* Касса: «Наличные в кассе» — четыре операции и форма выдачи */
.z-kassa { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.z-handover { padding: 10px 12px; border-radius: 12px; background: #f5f8fc; }
.z-handover small { display: block; color: #8a97a8; font-size: 11px; }
.z-handover b { font-size: 22px; font-weight: 600; color: #0e1b2c; }
.z-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.z-kinds span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 10px;
  border: 1px solid #dde4ee; background: #fff; color: #344050; font-size: 12px; font-weight: 500; }
.z-kinds span svg { width: 16px; height: 16px; opacity: .7; }
.z-kinds span.on { background: #2c7be5; border-color: #2c7be5; color: #fff; }
.z-kinds span.on svg { opacity: 1; }
.z-form { padding: 10px; border: 1px solid #e3e8ef; border-radius: 12px; display: flex; flex-direction: column; gap: 7px; }
.z-input { padding: 7px 10px; border: 1px solid #dde4ee; border-radius: 8px; background: #fff; color: #0e1b2c; }
.z-input--sel { position: relative; padding-right: 26px; }
.z-input--sel::after { content: ""; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid #5e6e82; border-bottom: 1.5px solid #5e6e82; transform: rotate(45deg); }
.z-input--focus { border-color: #9ec1f0; box-shadow: 0 0 0 3px rgba(44,123,229,.15); }
.z-form__row { display: grid; grid-template-columns: minmax(0, 1fr) 82px auto; gap: 6px; align-items: center; }
.z-hint { font-size: 11.5px; color: #8a97a8; line-height: 1.45; }
.z-due { display: flex; gap: 7px; align-items: flex-start; padding: 7px 9px; border-radius: 8px; background: #fff5e6; color: #4a3a1c;
  font-size: 11.5px; line-height: 1.45; }
.z-due__ico { flex: none; width: 0; height: 0; margin-top: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 11px solid #f5803e; font-size: 0; }
.z-due b { color: #0e1b2c; font-weight: 600; }

/* Ведомость: строки с галочками и суммой к выдаче */
.z-batch__row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 86px; gap: 10px; align-items: center; padding: 9px 16px;
  border-bottom: 1px solid #edf1f6; }
.z-batch__row small { display: block; color: #8a97a8; font-size: 11px; }
.z-batch__row b { font-weight: 600; color: #0e1b2c; }
.z-batch__row--foot { border-bottom: 0; background: #fbfcfe; font-weight: 600; color: #0e1b2c; }
.z-check { width: 16px; height: 16px; border-radius: 4px; background: #2c7be5; position: relative; }
.z-check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border-right: 2px solid #fff;
  border-bottom: 2px solid #fff; transform: rotate(45deg); }
.z-check--off { background: #fff; box-shadow: inset 0 0 0 1.5px #c3cdda; }
.z-check--off::after { display: none; }
.z-batch__sum { text-align: right; padding: 5px 8px; border: 1px solid #dde4ee; border-radius: 7px; background: #fff; color: #0e1b2c; }
.z-batch__btns { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 16px 14px; flex-wrap: wrap; }

/* Строки разбора и кабинета: расшифровка денег */
.z-slip { display: flex; flex-direction: column; }
.z-slip__row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid #edf1f6; font-size: 12px; color: #344050; }
.z-slip__row:first-child { border-top: 0; }
.z-slip__row small { display: block; color: #8a97a8; font-size: 10.5px; }
.z-slip__row b { white-space: nowrap; font-weight: 600; color: #0e1b2c; }
.z-slip__row--sum { font-weight: 600; color: #0e1b2c; }
.z-slip__row--minus b { color: #5e6e82; }
.z-star { color: #e8930c; }

/* Табель Т-13 — сетка кодов */
.z-t13 { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.z-t13 th, .z-t13 td { border: 1px solid #e3e8ef; text-align: center; padding: 4px 2px; }
.z-t13 th { background: #f7f9fc; color: #8a97a8; font-weight: 500; }
.z-t13 td.n { text-align: left; padding: 4px 8px; white-space: nowrap; color: #0e1b2c; font-weight: 500; }
.z-t13 td i { display: block; font-style: normal; font-size: 10px; color: #8a97a8; }
.z-t13 .we { background: #f3f5f8; }
.z-t13 .rv { color: #b06e00; font-weight: 700; }
.z-t13 .nn { color: #c23434; font-weight: 700; }
.z-t13-wrap { padding: 12px 14px 14px; overflow-x: auto; }
.z-t13-cap { font-size: 11px; color: #8a97a8; margin-top: 8px; }

/* Сводка владельцу: строки с уровнем */
.z-digest { padding: 6px 16px 12px; }
.z-digest__row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #edf1f6; font-size: 12.5px; color: #344050; }
.z-digest__row:last-child { border-bottom: 0; }
.z-digest__ico { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; background: #8a97a8; }
.z-digest__ico--alert { background: #e14b4b; }
.z-digest__ico--ok { background: #12a36d; }

/* Окно-вопрос поверх макета */
.z-ask { width: min(360px, 100%); padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(11,21,36,.18);
  border: 1px solid #e3e8ef; font-size: 12.5px; color: #344050; }
.z-ask b { display: block; font-size: 14px; color: #0e1b2c; margin-bottom: 6px; }
.z-ask .z-acts { justify-content: flex-end; margin-top: 10px; }

@media (max-width: 575.98px) {
  .z-fields { grid-template-columns: minmax(0, 1fr); }
  .z-kinds span { font-size: 11px; }
  .z-batch__row { grid-template-columns: 16px minmax(0, 1fr) 74px; }
  .z-batch__row > .z-hide-sm { display: none; }
  .z-form__row { grid-template-columns: minmax(0, 1fr) 70px; }
  .z-form__row .z-btn { grid-column: 1 / -1; text-align: center; }
}