/* Общие элементы экранов HR и сотрудника. */
.hr-ui {
  max-width: 1480px;
  margin: 0 auto;
  color: var(--ink);
  line-height: 1.5;
}

.hr-ui *,
.hr-ui *::before,
.hr-ui *::after {
  box-sizing: border-box;
}

.hr-ui .panel,
.hr-ui .card {
  max-width: none;
  margin-bottom: var(--space-5);
  padding: var(--space-6);
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.hr-ui h1 {
  margin-bottom: var(--space-4);
  font-size: 1.55rem;
  letter-spacing: -0.025em;
}

.hr-ui .panel-title {
  margin-bottom: 18px;
  font-size: 1.05rem;
}

.hr-ui a {
  color: var(--accent);
  text-underline-offset: 3px;
}

.hr-ui .btn {
  min-height: 38px;
  line-height: 1.4;
}

.hr-ui :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.hr-ui .field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border-color: var(--line-strong);
}

.hr-ui textarea {
  resize: vertical;
}

.hr-ui .grid-scroll {
  min-width: 0;
  max-width: 100%;
  box-shadow: none;
}

.hr-ui .kpi-grid th {
  background: var(--surface-head);
  color: var(--ink-muted);
}

.hr-ui .kpi-grid td {
  padding-top: 14px;
  padding-bottom: 14px;
  vertical-align: middle;
}

.hr-ui .kpi-grid tbody tr:hover {
  background: var(--row-hover);
}

.hr-ui .cell-target {
  margin-top: var(--space-1);
  color: var(--ink-muted);
}

.hr-ui .hr-empty {
  margin: 0;
  padding: 18px var(--space-5);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

/* Период: сначала работа с листами, затем завершение и удаление. */
.hr-ui .hr-period-header {
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.hr-period-header .grid-meta {
  max-width: 60%;
}

.hr-routine {
  gap: 10px;
  padding: 0 0 var(--space-2);
}

.hr-department-table th:nth-child(n+3) {
  text-align: right;
}

.hr-department-table td:first-child {
  font-weight: 600;
}

.hr-needs-review td:first-child {
  box-shadow: inset 3px 0 var(--warn);
}

.hr-count {
  display: inline-block;
  min-width: 36px;
  padding: var(--space-1) 9px;
  border-radius: var(--radius);
  font-weight: 600;
  text-align: center;
  background: var(--surface-sunken);
}

.hr-count-warning {
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
}

.hr-count-pending {
  color: var(--warn);
  background: var(--warn-soft);
}

.hr-count-clear {
  color: var(--ok);
  background: var(--ok-soft);
}

.hr-ui .hr-extra-form {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 2fr;
  align-items: end;
  gap: 14px;
}

.hr-extra-form .field {
  min-width: 0;
  margin: 0;
}

.hr-extra-form .btn {
  justify-self: start;
  grid-column: 2 / -1;
}

.hr-ui .hr-lifecycle {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.hr-ui .hr-confirm {
  background: var(--warn-soft);
  border-color: var(--warn-line);
}

.hr-confirm form {
  display: grid;
  gap: var(--space-3);
  max-width: 760px;
}

.hr-confirm .check {
  align-items: flex-start;
  padding: 14px var(--space-4);
  margin: 0;
  border: 1px solid var(--warn-line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.hr-confirm input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  accent-color: var(--warn);
}

.hr-confirm .check:has(input:checked) {
  border-color: var(--warn);
  background: var(--warn-soft);
}

.hr-ui .hr-close-button {
  justify-self: start;
  margin-top: var(--space-1);
  color: var(--ink-on-accent);
  background: var(--warn);
  border-color: var(--warn);
}

.hr-reopen form {
  max-width: 760px;
}

.hr-ui .hr-delete {
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--danger-line);
}

.hr-ui .hr-period-blocks .dept-block {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.hr-ui .hr-period-blocks .dept-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1rem;
}

.hr-period-blocks .dept-block[open] > .dept-title {
  margin-bottom: var(--space-4);
}

/* Карточка: реквизиты, показатели, расчёт, решения и отдельный журнал. */
.hr-ui .hr-identity {
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}

.hr-ui .hr-money {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.hr-ui .hr-totals {
  gap: 0 var(--space-6);
  margin: 0;
  align-content: start;
  font-variant-numeric: tabular-nums;
}

.hr-totals > :is(dt, dd) {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.hr-totals dd {
  text-align: right;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hr-totals dt:last-of-type,
.hr-totals dd:last-of-type {
  margin-top: var(--space-2);
  border-bottom: 0;
  color: var(--accent-ink);
  font-weight: 700;
}

.hr-totals dd:last-of-type {
  font-size: 1.55rem;
  line-height: 1.2;
}

.hr-editor details {
  margin-bottom: var(--space-5);
}

.hr-ui summary {
  cursor: pointer;
}

.hr-ui .hr-decisions {
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.hr-decisions form:first-child {
  flex: 1 1 420px;
  max-width: 700px;
}

.hr-decisions .field {
  margin-bottom: var(--space-3);
}

.hr-ui .hr-audit {
  background: var(--surface-alt);
  box-shadow: none;
}

.hr-audit > summary {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.hr-audit[open] > summary {
  margin-bottom: var(--space-5);
}

.hr-audit td {
  max-width: 320px;
  overflow-wrap: anywhere;
}

/* Сотрудник: спокойный лист с выделенным итогом и компактной историей. */
.hr-employee {
  max-width: 1320px;
}

.hr-employee .grid-meta {
  padding: var(--space-3) 0 var(--space-5);
}

.hr-employee .grid-meta strong {
  font-size: 1.15rem;
}

.hr-employee-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--space-6);
  align-items: start;
}

.hr-employee-sheet .hr-totals {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--space-4);
  padding: 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
}

.hr-metrics th:first-child {
  width: 40%;
}

.hr-metrics td:first-child {
  min-width: 180px;
  font-weight: 500;
}

.hr-ui .hr-history td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.hr-history th:not(:first-child) {
  text-align: right;
}

@media (max-width: 1100px) {
  .hr-employee-sheet {
    grid-template-columns: minmax(0, 1fr);
  }

  .hr-employee-sheet .hr-totals {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hr-period-header .grid-meta {
    max-width: none;
  }

  .hr-ui .hr-extra-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hr-ui .panel,
  .hr-ui .card,
  .hr-ui .hr-period-header,
  .hr-ui .hr-decisions {
    padding: var(--space-4);
  }

  .hr-ui .hr-extra-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .hr-extra-form .btn {
    grid-column: auto;
  }

  .hr-ui .totals {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
  }

  .hr-ui .grid-filters {
    min-width: 0;
  }

  .hr-ui .hr-period-blocks .dept-block {
    padding: 10px;
  }
}

.hr-department .kpi-grid th:nth-child(n+4):nth-child(-n+7) {
  text-align: right;
}

.hr-department .kpi-grid td:first-child {
  min-width: 190px;
  font-weight: 600;
}

.hr-department .kpi-grid .total-final {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.hr-department .hr-card-header > p:first-child,
.hr-scorecard .hr-card-header > p:first-child {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 0.85rem;
}