/* Раздел «Участки» в карточке запроса и перевозки.

   Слева — роли, привязанные к записи, справа — участок выбранной. Раньше на
   каждую роль заводилась отдельная вкладка верхнего уровня: шапка карточки
   забивалась словами «Менеджер», «Логист» рядом с «Участниками», и было
   непонятно, это раздел или человек. */

.rz-wrap { display: grid; grid-template-columns: minmax(168px, 210px) 1fr; gap: 14px; align-items: start; }

.rz-rail { display: grid; gap: 5px; }
.rz-tab {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 11px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--surface-2); color: var(--text-2);
  font: 600 12.5px/1.2 var(--font); text-align: left; cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.rz-tab:hover { background: var(--surface-hover); color: var(--text); }
.rz-tab.is-active {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong);
}
.rz-tab-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-tab-badge {
  flex: 0 0 auto; font: 600 10.5px/1 var(--font-mono); font-variant-numeric: tabular-nums;
  padding: 3px 6px; border-radius: 999px; color: var(--text-3); background: var(--surface);
  border: 1px solid var(--border-soft);
}
.rz-tab.is-done .rz-tab-badge { color: var(--success); background: var(--success-soft); border-color: transparent; }

.rz-body { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elev); overflow: hidden; }

.rz-empty { padding: 34px 20px; text-align: center; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.rz-empty b { display: block; margin-bottom: 5px; color: var(--text-2); font-size: 13.5px; }

@media (max-width: 820px) {
  .rz-wrap { grid-template-columns: 1fr; }
  .rz-rail { grid-auto-flow: column; grid-auto-columns: minmax(128px, 1fr); overflow-x: auto; }
}