/* Портал управления исполнителями — компоненты интерфейса. */

/* ---------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn svg {
  width: 15px;
  height: 15px;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Этап 5, редизайн: btn-primary — второй акцент (лайм, --brand2), не бренд-красный. Красный
   остаётся за навигацией/иконками/рамками (см. base.css:root — комментарий у --brand2). */
.btn-primary {
  background: var(--brand2);
  color: var(--brand2-text-on);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand2-hover);
}
.btn-primary:active:not(:disabled) {
  background: var(--brand2-active);
}

.btn-secondary {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-3);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text-primary);
}

.btn-danger {
  background: transparent;
  border-color: rgba(208, 59, 59, 0.4);
  color: var(--status-critical);
}
.btn-danger:hover:not(:disabled) {
  background: var(--status-critical-bg);
}

.btn-sm {
  padding: 5px 11px;
  font-size: 12.5px;
  border-radius: 7px;
}

.btn-icon {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
}
.link-btn:hover {
  color: var(--brand-hover);
}

/* ---------------------------------------------------------- form controls */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.input, .select {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder {
  color: var(--text-muted);
}
.input:focus, .select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}
.input.error {
  border-color: var(--status-critical);
}

.error-text {
  font-size: 12.5px;
  color: var(--status-serious);
}

.search-input-wrap {
  position: relative;
  flex: 1;
}
.search-input-wrap svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}
.search-input-wrap .input {
  width: 100%;
  padding-left: 34px;
}

/* ---------------------------------------------------------- cards & panels */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.card-hover {
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card-hover:hover {
  border-color: var(--border-strong);
}

.panel-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ---------------------------------------------------------- KPI tiles */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.kpi-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.kpi-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.08), transparent 55%);
  pointer-events: none;
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kpi-value {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.kpi-value .unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
}

.kpi-foot {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Этап 5, §B — плашки-счётчики карточки "Задачи" на дашборде (Сегодня/Неделя/Просрочено/Архив),
   кликабельные (кроме "Архив" — это <a>, ведёт на отдельную страницу, см. dashboard.js). */
.task-bucket-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.task-bucket-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.task-bucket-tile:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  text-decoration: none;
}

.task-bucket-tile .kpi-value {
  margin-top: 0;
  font-size: 24px;
}

.task-bucket-tile .kpi-label {
  margin-top: 4px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 12.5px;
}

.task-bucket-today.is-active { border-color: var(--brand2); background: var(--brand2-bg); }
.task-bucket-today.is-active .kpi-value { color: var(--brand2); }
.task-bucket-week.is-active { border-color: var(--status-info); background: var(--status-info-bg); }
.task-bucket-week.is-active .kpi-value { color: var(--status-info); }
.task-bucket-overdue.is-active { border-color: var(--status-critical); background: var(--status-critical-bg); }
.task-bucket-overdue.is-active .kpi-value { color: var(--status-critical); }
.task-bucket-archive .kpi-value svg { width: 22px; height: 22px; color: var(--text-muted); }

/* Этап 5, §B — выбор исполнителей/наблюдателей на ручной задаче: простой список чекбоксов
   (в портале до сих пор нигде не было настоящего мультиселекта — не изобретаем компонент ради
   двух форм, checkbox-список читаемее скролящегося <select multiple>). */
.checkbox-list {
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  background: var(--surface-2);
}

.checkbox-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
}

.checkbox-list-item:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

.checkbox-list-item input {
  accent-color: var(--brand2);
}

/* ---------------------------------------------------------- badges / status pills */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.badge svg { width: 11px; height: 11px; }

.badge-good { background: var(--status-good-bg); color: var(--status-good); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning); }
.badge-serious { background: var(--status-serious-bg); color: var(--status-serious); }
.badge-critical { background: var(--status-critical-bg); color: var(--status-critical); }
.badge-info { background: var(--status-info-bg); color: var(--status-info); }
.badge-neutral { background: var(--surface-3); color: var(--text-secondary); }

.report-worker-smz,
.report-worker-smz:hover {
  color: var(--status-info);
}

/* ---------------------------------------------------------- tables */

.data-table {
  width: 100%;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}
.data-table tbody tr {
  transition: background 0.12s ease;
}
.data-table tbody tr:hover {
  background: var(--surface-2);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table .cell-primary {
  color: var(--text-primary);
  font-weight: 600;
}
.data-table-wrap {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
}
.data-table-wrap .data-table {
  min-width: max-content;
}

/* Широкая таблица связок: отдельная полоса остаётся у нижнего края окна, пока таблица видна.
   Она синхронизирована с обычной прокруткой контейнера через referrals.js. */
.referral-table-shell {
  position: relative;
}
.referral-table-scrollbar {
  position: sticky;
  top: calc(100vh - 18px);
  z-index: 20;
  height: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}
.referral-table-scrollbar > div {
  height: 1px;
}
.referrals-list-toolbar {
  justify-content: space-between;
}

/* Задача «Приведи друга»: операционные данные собраны в компактные карточки. В отличие от
   общей таблицы задач здесь много длинных полей (ФИО, связка, даты и две кнопки), поэтому
   карточки сохраняют действия на экране и не требуют горизонтальной прокрутки. */
.task-referral-list {
  display: grid;
  gap: 10px;
}
.task-referral-item {
  padding: 16px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.task-referral-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}
.task-referral-person {
  min-width: 0;
}
.task-referral-name {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.task-referral-sub {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
}
.task-referral-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 13px 22px;
  padding-top: 13px;
}
.task-referral-field {
  min-width: 0;
}
.task-referral-field > span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.task-referral-field > strong {
  display: block;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.task-referral-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Все реестровые задачи: компактные карточки вместо широкой таблицы. Длинные ФИО, причины и
   кнопки переносятся внутри строки, поэтому рабочий список целиком помещается по ширине окна. */
.task-item-list {
  display: grid;
  gap: 10px;
}
.task-item-card {
  padding: 15px 17px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.task-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.task-item-person { min-width: 0; }
.task-item-name {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.task-item-sub {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.task-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.task-item-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 11px 20px;
  padding-top: 12px;
}
.task-item-field { min-width: 0; }
.task-item-field > span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.task-item-field > strong {
  display: block;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.task-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}
.task-item-editor {
  margin-top: 13px;
  padding: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.mvd-address-check {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.mvd-address-check-accepted,
.mvd-address-check-allowed { border-left-color: var(--status-good); }
.mvd-address-check-trial,
.mvd-address-check-review { border-left-color: var(--status-warning); }
.mvd-address-check-blocked { border-left-color: var(--status-critical); }
.mvd-address-check-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.mvd-address-check .btn { margin-top: 9px; }
.mvd-nearest-result:empty { display: none; }
.mvd-nearest-card {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.mvd-nearest-card strong { color: var(--text-primary); font-size: 13px; }
.mvd-nearest-card span { color: var(--text-secondary); font-size: 12px; }
.mvd-nearest-card small { color: var(--text-muted); font-size: 10.5px; }
.task-picker-list {
  display: grid;
  gap: 7px;
  max-height: 360px;
  overflow-y: auto;
}
.task-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.task-picker-person { min-width: 0; }
.task-picker-person strong,
.task-picker-person span { display: block; overflow-wrap: anywhere; }
.task-picker-person strong { color: var(--text-primary); font-size: 13px; }
.task-picker-person span { margin-top: 3px; color: var(--text-muted); font-size: 11.5px; }

@media (max-width: 1080px) {
  .task-referral-grid,
  .task-item-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 620px) {
  .task-referral-grid,
  .task-item-grid {
    grid-template-columns: 1fr;
  }
  .task-referral-actions .btn,
  .task-item-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .task-picker-item { align-items: stretch; flex-direction: column; }
  .task-picker-item .btn { justify-content: center; }
}

.row-link {
  cursor: pointer;
}

/* ---------------------------------------------------------- toolbars / filters */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------- tabs */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab {
  padding: 10px 4px;
  margin-right: 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease;
}
.tab:hover {
  color: var(--text-secondary);
}
.tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ---------------------------------------------------------- empty / loading states */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  color: var(--text-muted);
}
.empty-state svg {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  opacity: 0.5;
}
.empty-state-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.empty-state-text {
  font-size: 13px;
  max-width: 340px;
}

.loading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-muted);
  gap: 10px;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
}

/* ---------------------------------------------------------- toasts */

.toast-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.toast {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--status-info);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  min-width: 260px;
  max-width: 380px;
  box-shadow: var(--shadow-soft);
  font-size: 13px;
  color: var(--text-primary);
}
.toast.toast-success { border-left-color: var(--status-good); }
.toast.toast-error { border-left-color: var(--status-critical); }
.toast.toast-warning { border-left-color: var(--status-warning); }

/* ---------------------------------------------------------- modal / confirm dialog */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 20px;
}

.modal {
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 24px;
  max-width: 440px;
  width: 100%;
}

/* Этап 4, §H — шире базового .modal, чтобы .field-grid с 6 полями реквизитов (быстрое
   редактирование из списка, common.js::openRequisitesQuickEditModal()) раскладывался в 2 колонки,
   а не сжимался в одну узкую. confirmDialog()/promptDialog() продолжают использовать базовый .modal. */
.modal-wide {
  max-width: 640px;
}
.patent-receipt-modal {
  max-width: 760px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 18px;
  scrollbar-gutter: stable;
}
.patent-receipt-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.patent-receipt-form-grid > .field,
.patent-receipt-form-grid > .card {
  margin-top: 0 !important;
  min-width: 0;
}
.patent-receipt-form-grid .receipt-rate-info {
  grid-column: 1 / -1;
}
.receipt-scan-details {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  margin-bottom: 12px;
}
.receipt-scan-details summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
}
.receipt-scan-details-body {
  border-top: 1px solid var(--border);
  padding: 9px 12px 11px;
}
.patent-receipt-modal > .modal-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  margin: 14px -2px -18px;
  padding: 12px 2px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.referral-link-modal {
  max-width: 820px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.referral-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .patent-receipt-form-grid {
    grid-template-columns: 1fr;
  }
  .patent-receipt-modal {
    max-height: calc(100dvh - 16px);
    padding: 14px;
  }
  .patent-receipt-modal > .modal-actions {
    bottom: -14px;
    margin-bottom: -14px;
    padding-bottom: 14px;
  }
  .referral-detail-grid {
    grid-template-columns: 1fr;
  }
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.modal-text {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.55;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---------------------------------------------------------- карточка исполнителя поверх задачи/отчёта */

body.worker-card-panel-open {
  overflow: hidden;
}

.worker-card-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 920;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.62);
}

.worker-card-panel {
  width: min(1180px, calc(100vw - 56px));
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
  border-left: 1px solid var(--border-strong);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.42);
  animation: worker-card-panel-in 0.18s ease-out;
}

@keyframes worker-card-panel-in {
  from { transform: translateX(28px); opacity: 0.7; }
  to { transform: translateX(0); opacity: 1; }
}

.worker-card-panel-header {
  min-height: 64px;
  padding: 10px 14px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.worker-card-panel-title {
  max-width: min(760px, 70vw);
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worker-card-panel-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.worker-card-panel-close:hover,
.worker-card-panel-close:focus-visible {
  border-color: var(--brand);
  background: var(--surface-3);
  outline: none;
}

.worker-card-panel-body {
  position: relative;
  flex: 1;
  min-height: 0;
}

.worker-card-panel-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
}

.worker-card-panel-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--page-bg);
  opacity: 0;
}

.worker-card-panel-overlay.is-loaded .worker-card-panel-frame {
  opacity: 1;
}

.worker-card-panel-overlay.is-loaded .worker-card-panel-loading {
  display: none;
}

body.embedded-page .app-shell {
  min-height: 100vh;
}

body.embedded-page .main {
  width: 100%;
  padding: 22px 24px 40px;
}

body.embedded-page .worker-card-back-link {
  display: none;
}

@media (max-width: 720px) {
  .worker-card-panel {
    width: 100vw;
  }
  .worker-card-panel-title {
    max-width: 70vw;
  }
  body.embedded-page .main {
    padding: 16px 14px 28px;
  }
}

/* ---------------------------------------------------------- upload dropzone */

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  background: var(--surface-1);
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--brand);
  background: var(--brand-bg);
}
.dropzone svg {
  width: 38px;
  height: 38px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.dropzone-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.dropzone-hint {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Уменьшенная версия .dropzone — 10 полноразмерных dropzone подряд заняли бы всю страницу
   (Этап 3, §F, редизайн документов на карточке исполнителя). .dropzone выше не трогается. */
.dropzone-mini {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  background: var(--surface-1);
}
.dropzone-mini:hover, .dropzone-mini.dragover {
  border-color: var(--brand);
  background: var(--brand-bg);
}
.dropzone-mini svg {
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.dropzone-mini-text {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Слот документа на карточке исполнителя — один на каждый тип из DOCUMENT_TYPES, всегда виден. */
.doc-slot {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface-1);
}
.doc-slot:last-child {
  margin-bottom: 0;
}
.doc-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.file-chip svg { width: 18px; height: 18px; color: var(--brand); }

.error-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--status-critical-bg);
  border: 1px solid rgba(208, 59, 59, 0.4);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-top: 18px;
}
.error-banner svg { width: 18px; height: 18px; color: var(--status-critical); flex-shrink: 0; margin-top: 1px; }
.error-banner-text { font-size: 13px; color: var(--text-primary); line-height: 1.5; white-space: pre-wrap; }

/* ---------------------------------------------------------- review screen: diff rows */

.review-summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.review-stat {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.review-stat.is-danger { border-color: rgba(208, 59, 59, 0.35); background: var(--status-critical-bg); }
.review-stat-value {
  font-size: 22px;
  font-weight: 700;
}
.review-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.anomaly-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--status-warning-bg);
  border: 1px solid rgba(250, 178, 25, 0.35);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 20px;
  cursor: pointer;
}
.anomaly-banner svg { width: 18px; height: 18px; color: var(--status-warning); flex-shrink: 0; }
.anomaly-banner-text { flex: 1; font-size: 13px; color: var(--text-primary); }
.anomaly-banner-text b { color: var(--status-warning); }

.review-section {
  margin-bottom: 28px;
}
.review-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.review-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
}
.review-section-title svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }
.review-section-title .count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 999px;
}

.person-group {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.person-group.is-danger {
  border-color: rgba(208, 59, 59, 0.35);
}
.person-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--surface-2);
  gap: 12px;
}
.person-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13.5px;
}
.person-code {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.diff-row {
  display: grid;
  grid-template-columns: 150px 1fr 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.diff-field-name {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12.5px;
}
.diff-old {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(208, 59, 59, 0.5);
  overflow-wrap: anywhere;
}
.diff-arrow {
  color: var(--text-muted);
}
.diff-new {
  color: var(--status-good);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.diff-new.is-editing {
  color: var(--text-primary);
}
.diff-actions {
  display: flex;
  gap: 6px;
  justify-self: end;
}

.decision-toggle {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  overflow: hidden;
}
.decision-toggle button {
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  border-right: 1px solid var(--border-strong);
}
.decision-toggle button:last-child { border-right: none; }
.decision-toggle button:hover { background: var(--surface-3); color: var(--text-secondary); }
.decision-toggle button.active.accept { background: var(--status-good-bg); color: var(--status-good); }
.decision-toggle button.active.reject { background: var(--status-critical-bg); color: var(--status-critical); }
.decision-toggle button.active.keep { background: var(--surface-3); color: var(--text-secondary); }

.new-worker-card {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.new-worker-card:first-child { border-top: none; }
.checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.checkbox svg {
  width: 12px;
  height: 12px;
  color: var(--brand-text-on);
  opacity: 0;
}
.checkbox.checked {
  background: var(--brand);
  border-color: var(--brand);
}
.checkbox.checked svg {
  opacity: 1;
}
.new-worker-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.new-worker-meta span:not(:last-child) {
  position: relative;
}
.new-worker-meta span:not(:last-child)::after {
  content: "\00b7";
  position: absolute;
  right: -10px;
  color: var(--border-strong);
}
.new-worker-hours {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.hour-chip {
  background: var(--surface-3);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.hour-chip.is-closed-week {
  background: var(--status-critical-bg);
  color: var(--status-serious);
}

.sticky-action-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 16px 20px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pending-note {
  font-size: 12.5px;
  color: var(--text-muted);
}
.pending-note b { color: var(--status-warning); }

/* ---------------------------------------------------------- switch (on/off-тумблер, Этап 3, §B) */
/* Отдельно от .checkbox выше: тот — про множественный выбор/подтверждение (квадрат, галочка),
   этот — про состояние вкл/выкл (например, "Реквизиты актуальны" на карточке исполнителя). */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: relative;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1.5px solid var(--border-strong);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.switch-slider::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.15s ease, background 0.15s ease;
}
.switch input:checked + .switch-slider {
  background: var(--status-good-bg);
  border-color: var(--status-good);
}
.switch input:checked + .switch-slider::before {
  transform: translateX(14px);
  background: var(--status-good);
}
.switch-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------- chart */

.chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.chart-legend-note {
  font-size: 12px;
  color: var(--text-muted);
}
.chart-tooltip {
  position: absolute;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  pointer-events: none;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  z-index: 20;
}

/* ---------------------------------------------------------- dashboard: баннер незавершённой загрузки */

.pending-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--brand-bg), var(--surface-1) 70%);
  border: 1px solid rgba(255, 45, 85, 0.35);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 22px;
}
.pending-banner-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--brand-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pending-banner-icon svg { width: 19px; height: 19px; color: var(--brand); }
.pending-banner-body { flex: 1; min-width: 0; }
.pending-banner-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.pending-banner-text { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ---------------------------------------------------------- chart header / SVG-график */

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.chart-svg-wrap {
  position: relative;
}
.chart-svg text {
  fill: var(--text-muted);
  font-size: 10.5px;
  font-family: var(--font-sans);
}
.chart-bar {
  fill: var(--chart-series-1);
  transition: fill 0.12s ease;
}
.chart-bar.is-hovered {
  fill: var(--chart-series-1-hover);
}
.chart-bar-hit {
  fill: transparent;
  cursor: pointer;
}
.chart-gridline {
  stroke: var(--gridline);
  stroke-width: 1;
}
.chart-baseline {
  stroke: var(--border-strong);
  stroke-width: 1;
}
.chart-value-label {
  fill: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.chart-empty-note {
  fill: var(--text-muted);
  font-size: 12px;
}

/* ---------------------------------------------------------- недели: диапазон дат в строке таблицы */

.week-range {
  color: var(--text-muted);
  font-size: 12px;
}

/* ---------------------------------------------------------- карточка исполнителя: сетка полей */

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px 24px;
}
.field-grid-item { min-width: 0; }
.field-grid-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.field-grid-value {
  font-size: 13.5px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.section-toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.section-toggle-header svg.chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.section-toggle-header.is-open svg.chevron {
  transform: rotate(90deg);
}

.week-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.week-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: var(--surface-2);
  gap: 12px;
}

/* ---------------------------------------------------------- календарь (Этап 4, §E) */
/* Только фронтенд — своих данных не хранит, из существующих токенов поверхностей/геометрии,
   без нового визуального языка (см. план Этапа 4, §E). */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-cell-head {
  padding: 6px 4px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.calendar-cell {
  min-height: 92px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calendar-cell.is-empty {
  background: transparent;
  border-color: transparent;
}
.calendar-cell.is-today {
  border-color: var(--brand);
}

.calendar-cell-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.calendar-cell-day {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.calendar-cell.is-today .calendar-cell-day {
  color: var(--brand);
}

.calendar-cell-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 880px) {
  .sidebar { display: none; }
  .main { padding: 20px; }
  .diff-row { grid-template-columns: 1fr; }
}

/* Оплата патента в карточке физлица: две ключевые строки над таблицей чеков. */
.patent-payment { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.patent-payment-line { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; padding: 4px 0; font-size: 14px; }