/* Стили экранов «accounting». База и токены - в app.css.
 *
 * Всё, что ниже, привязано к .acc-page: файл подключается на каждой странице,
 * поэтому общие классы (.panel, .kpi-grid, .btn) не переопределяются глобально.
 * Экраны платёжные: главное - быстро найти человека и сверить сумму, поэтому
 * первая колонка липкая, числа моноширинные, итоговая колонка выделена.
 */

.acc-page {
  --acc-surface: #fff;
  --acc-line: #e3e8ee;
  --acc-line-soft: #eef1f5;
  --acc-line-strong: #ccd6e0;
  --acc-head-bg: #f4f7fa;
  --acc-group-bg: #eaf1f8;
  --acc-total-bg: #f6f9fc;
  --acc-total-head-bg: #e6eefa;
  --acc-hover: #f1f6fe;
  --acc-hover-total: #e3ecfa;
  --acc-ink: #1f2933;
  --acc-ink-strong: #17324f;
  --acc-muted: #6b7785;
  --acc-faint: #a7b2be;
  --acc-accent: #2f80ed;
  --acc-bad: #c0392b;
  --acc-warn: #b07a12;

  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1500px;
}

/* --- панель периода ------------------------------------------------------ */

.acc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--acc-line);
  border-radius: 10px;
  background: var(--acc-surface);
  box-shadow: 0 1px 2px rgba(31, 41, 51, 0.04);
}

.acc-toolbar-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.acc-field {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
}

.acc-field-label {
  color: var(--acc-muted);
  font-weight: 600;
}

.acc-select {
  min-width: 200px;
  padding: 6px 10px;
  border: 1px solid var(--acc-line-strong);
  border-radius: 7px;
  background: var(--acc-surface);
  color: inherit;
  font-family: inherit;
  font-size: 0.9rem;
}

.acc-select:focus-visible,
.acc-page a:focus-visible,
.acc-page button:focus-visible {
  outline: 2px solid var(--acc-accent);
  outline-offset: 1px;
}

.acc-btn {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 0.85rem;
}

/* --- шапка экрана -------------------------------------------------------- */

.acc-head {
  padding: 14px 18px;
  border: 1px solid var(--acc-line);
  border-radius: 10px;
  background: var(--acc-surface);
  box-shadow: 0 1px 2px rgba(31, 41, 51, 0.04);
}

.acc-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.acc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-top: 8px;
  color: var(--acc-muted);
  font-size: 0.85rem;
}

.acc-note {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.acc-note-warn {
  border-color: #f0e2bd;
  background: #fdf6e3;
  color: #7a5c10;
}

.acc-note-internal {
  border-color: #f2d6cd;
  background: #fdf3f0;
  color: #9a3c2a;
}

/* --- блок с таблицей ------------------------------------------------------ */

.acc-block {
  border: 1px solid var(--acc-line);
  border-radius: 10px;
  background: var(--acc-surface);
  box-shadow: 0 1px 2px rgba(31, 41, 51, 0.04);
}

.acc-block-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 16px 10px;
}

.acc-block-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.acc-scroll {
  overflow: auto;
  max-height: 720px;
  border-top: 1px solid var(--acc-line);
  border-radius: 0 0 10px 10px;
}

.acc-scroll-flat {
  max-height: none;
}

/* --- таблица -------------------------------------------------------------- */

.acc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.acc-table th,
.acc-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--acc-line-soft);
  background: var(--acc-surface);
  text-align: left;
  vertical-align: top;
}

.acc-table tbody tr:last-child td {
  border-bottom: 0;
}

.acc-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid var(--acc-line-strong);
  background: var(--acc-head-bg);
  color: var(--acc-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  vertical-align: bottom;
  white-space: normal;
}

.acc-table thead th.num,
.acc-table td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Липкая первая колонка: при прокрутке вбок видно, чья это строка. */
.acc-table .acc-col-name {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 210px;
  box-shadow: 1px 0 0 var(--acc-line);
}

.acc-table thead .acc-col-name {
  z-index: 4;
}

.acc-table .acc-col-count {
  width: 1%;
  color: var(--acc-muted);
}

.acc-table .acc-col-dept {
  color: var(--acc-muted);
  white-space: nowrap;
}

.acc-table .acc-col-pct {
  width: 1%;
}

/* Итоговая колонка: к ней сводится вся строка, поэтому она отбита и жирная. */
.acc-table .acc-col-total {
  border-left: 1px solid var(--acc-line);
  background: var(--acc-total-bg);
  color: var(--acc-ink);
  font-weight: 700;
}

.acc-table thead .acc-col-total {
  background: var(--acc-total-head-bg);
  color: var(--acc-ink-strong);
}

.acc-table tbody tr.acc-row:hover td {
  background: var(--acc-hover);
}

.acc-table tbody tr.acc-row:hover td.acc-col-total {
  background: var(--acc-hover-total);
}

/* --- шапка группы подразделения ------------------------------------------ */

.acc-table .acc-group td {
  padding: 0;
  border-top: 1px solid var(--acc-line-strong);
  border-bottom: 1px solid var(--acc-line);
  background: var(--acc-group-bg);
}

.acc-table tbody tr.acc-group:first-child td {
  border-top: 0;
}

.acc-group-label {
  position: sticky;
  left: 0;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  color: var(--acc-ink-strong);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.acc-group-label::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.95em;
  border-radius: 2px;
  background: var(--acc-accent);
}

/* --- строка «Итого» ------------------------------------------------------- */

.acc-table .acc-total-row td {
  border-top: 2px solid var(--acc-line-strong);
  border-bottom: 0;
  background: var(--acc-total-bg);
  font-size: 0.85rem;
  font-weight: 700;
}

.acc-table .acc-total-row .acc-col-name {
  color: var(--acc-ink-strong);
}

.acc-table .acc-total-row .acc-col-total {
  background: var(--acc-total-head-bg);
  color: var(--acc-ink-strong);
}

/* --- ячейки --------------------------------------------------------------- */

.acc-table .employee-name {
  font-weight: 650;
}

.acc-link {
  color: var(--acc-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 128, 237, 0.35);
}

.acc-link:hover {
  border-bottom-color: currentColor;
}

.acc-sub {
  margin-top: 3px;
  max-width: 24em;
  color: var(--acc-muted);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: normal;
}

/* Подпись про корректировку длиннее числа: не даём колонке сжаться в столбик. */
.acc-table td.num .acc-sub {
  min-width: 13em;
  margin-left: auto;
}

.acc-dash {
  color: var(--acc-faint);
}

/* --- пустые состояния ----------------------------------------------------- */

.acc-empty {
  padding: 28px 20px;
  border: 1px dashed var(--acc-line-strong);
  border-radius: 10px;
  background: #fbfcfe;
  text-align: center;
}

.acc-empty-text {
  margin: 0;
  color: var(--acc-muted);
  font-size: 0.92rem;
}

/* --- детализация показателей ---------------------------------------------- */

.acc-back {
  margin: 0;
  font-size: 0.85rem;
}

.acc-back a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--acc-line);
  border-radius: 999px;
  background: var(--acc-surface);
  color: var(--acc-accent);
  text-decoration: none;
}

.acc-back a::before {
  content: "\2190";
}

.acc-back a:hover {
  border-color: var(--acc-accent);
  background: var(--acc-hover);
}

.acc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--acc-line-soft);
}

.acc-fact {
  min-width: 140px;
}

.acc-facts dt {
  margin: 0 0 2px;
  color: var(--acc-muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.acc-facts dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.acc-metrics .acc-col-name {
  width: 34%;
  min-width: 260px;
  white-space: normal;
}

.acc-metric-title {
  font-weight: 600;
}

.acc-metrics .cell-target {
  margin-top: 3px;
}

.acc-metrics .acc-col-reason {
  width: 22%;
  min-width: 12em;
  color: var(--acc-muted);
  white-space: normal;
}

.acc-metrics .pct {
  min-width: 5em;
  padding: 3px 9px;
  font-size: 0.8rem;
  font-weight: 650;
}

/* Показатель без факта: пилюля ни о чём не говорит, оставляем только прочерк. */
.acc-metrics .pct:not(.kpi-bad):not(.kpi-warn):not(.kpi-ok) {
  background: transparent;
  color: var(--acc-faint);
}

/* Просевший показатель видно по строке целиком, а не только по проценту:
 * слева цветная метка, вклад в премию окрашен в тот же цвет. */
.acc-metrics tbody tr.kpi-bad,
.acc-metrics tbody tr.kpi-warn,
.acc-metrics tbody tr.kpi-ok {
  background: transparent;
  color: var(--acc-ink);
}

.acc-metrics tbody tr.kpi-bad td {
  background: #fdf3f2;
}

.acc-metrics tbody tr.kpi-bad td.acc-col-name {
  box-shadow: inset 3px 0 0 var(--acc-bad), 1px 0 0 var(--acc-line);
}

.acc-metrics tbody tr.kpi-bad td.acc-col-total {
  background: #fbe9e6;
  color: #9d2f24;
}

.acc-metrics tbody tr.kpi-bad:hover td {
  background: #fbe9e6;
}

.acc-metrics tbody tr.kpi-warn td {
  background: #fffbf2;
}

.acc-metrics tbody tr.kpi-warn td.acc-col-name {
  box-shadow: inset 3px 0 0 #dda63a, 1px 0 0 var(--acc-line);
}

.acc-metrics tbody tr.kpi-warn td.acc-col-total {
  background: #fdf4e4;
  color: var(--acc-warn);
}

.acc-metrics tbody tr.kpi-warn:hover td {
  background: #fdf4e4;
}

.acc-metrics tbody tr.kpi-ok td.acc-col-name {
  box-shadow: inset 3px 0 0 #4ca771, 1px 0 0 var(--acc-line);
}

.acc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 16px;
}

.acc-result {
  flex: 0 0 auto;
  width: 380px;
  max-width: 100%;
  border: 1px solid var(--acc-line);
  border-radius: 10px;
  background: var(--acc-total-bg);
  overflow: hidden;
}

.acc-result-row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--acc-line-soft);
  font-size: 0.88rem;
}

.acc-result-row dt {
  color: var(--acc-muted);
}

.acc-result-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.acc-result-total {
  padding: 11px 14px;
  border-bottom: 0;
  background: var(--acc-total-head-bg);
}

.acc-result-total dt {
  color: var(--acc-ink-strong);
  font-size: 0.92rem;
  font-weight: 650;
}

.acc-result-total dd.total-final {
  color: var(--acc-ink-strong);
  font-size: 1.3rem;
  font-weight: 700;
}

.acc-hint {
  flex: 1 1 16em;
  max-width: 34em;
  margin: 0;
  color: var(--acc-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* --- печать: остаются только таблицы -------------------------------------- */

@media print {
  /* Именованная страница: альбомная ориентация только у экранов бухгалтерии,
   * иначе широкая таблица теряет справа колонку «Итого к выплате». */
  @page acc {
    size: A4 landscape;
    margin: 10mm;
  }

  .acc-page {
    page: acc;
  }

  body:has(.acc-page) {
    background: #fff;
  }

  body:has(.acc-page) .app-header,
  body:has(.acc-page) .messages,
  body:has(.acc-page) .acc-toolbar,
  body:has(.acc-page) .acc-back {
    display: none;
  }

  body:has(.acc-page) main {
    padding: 0;
  }

  .acc-page {
    gap: 10px;
    max-width: none;
  }

  .acc-page .acc-head,
  .acc-page .acc-block,
  .acc-page .acc-result {
    border: 0;
    box-shadow: none;
  }

  .acc-page .acc-head,
  .acc-page .acc-block-head {
    padding: 0 0 6px;
  }

  .acc-page .acc-scroll {
    overflow: visible;
    max-height: none;
    border-top: 0;
  }

  .acc-page .acc-table {
    font-size: 8.5pt;
  }

  .acc-page .acc-table th,
  .acc-page .acc-table td {
    padding: 5px 8px;
  }

  .acc-page .acc-group-label {
    padding: 5px 8px;
  }

  .acc-page .acc-sub {
    max-width: none;
    font-size: 7.5pt;
  }

  .acc-page .acc-table thead {
    display: table-header-group;
  }

  .acc-page .acc-table thead th,
  .acc-page .acc-table .acc-col-name,
  .acc-page .acc-group-label {
    position: static;
  }

  .acc-page .acc-table .acc-col-name {
    box-shadow: none;
  }

  .acc-page .acc-table tr,
  .acc-page .acc-result {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .acc-page .acc-table .acc-group {
    break-after: avoid;
    page-break-after: avoid;
  }

  .acc-page .acc-table thead th,
  .acc-page .acc-table .acc-group td,
  .acc-page .acc-table .acc-total-row td,
  .acc-page .acc-table .acc-col-total,
  .acc-page .acc-result-total {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Раскладка доплаты под суммой вида: сумма и причина каждой строки. */
.acc-extra-line {
  max-width: 16rem;
  margin-left: auto;
  white-space: normal;
  text-align: right;
}

.acc-payments {
  margin: var(--space-3) 0;
}

.acc-payments-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 0.95rem;
  font-weight: 600;
}

.acc-payment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.acc-payment-list li {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line-soft);
}

.acc-payment-kind {
  font-weight: 600;
}