/* Кабинет ЭДО — базовые стили. Всё читается из tokens.css, новых значений здесь нет. */
@import url("tokens.css");

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  min-width: var(--w-page-min);
  font: var(--w-regular) var(--fs-14)/var(--lh-base) var(--font);
  color: var(--n-800);
  background: var(--n-100);
}
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-24); font-weight: var(--w-bold); }
h2 { font-size: var(--fs-20); font-weight: var(--w-semibold); }
h3 { font-size: var(--fs-16); font-weight: var(--w-semibold); }
a { color: var(--brand-text); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }

.shell { display: flex; min-height: 100vh; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--sp-2); }

/* ——— Навигация: три группы вместо 27 плоских пунктов ——— */
.sidebar { width: var(--w-sidebar); flex: 0 0 var(--w-sidebar); background: var(--n-000); border-right: 1px solid var(--n-200); padding: var(--sp-4) var(--sp-3); }
.brand { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-4); font-weight: var(--w-bold); font-size: var(--fs-16); }
.brand .mark { width: 24px; height: 24px; border-radius: var(--r-md); background: var(--brand-500); }
.nav-group + .nav-group { margin-top: var(--sp-4); }
.nav-label { padding: 0 var(--sp-2) var(--sp-1); font-size: var(--fs-12); font-weight: var(--w-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--n-600); }
.nav-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-md); color: var(--n-800); }
.nav-item:hover { background: var(--n-100); }
.nav-item.is-current { background: var(--brand-100); color: var(--brand-text); font-weight: var(--w-medium); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-badge); height: var(--h-badge); padding: 0 var(--sp-1); border-radius: var(--r-full); background: var(--s-warning-bg); color: var(--s-warning-text); font-size: var(--fs-12); font-weight: var(--w-semibold); }
.count.is-neutral { background: var(--brand-100); color: var(--brand-text); }
.nav-item.is-current .count { background: var(--n-000); color: var(--brand-text); }
.account { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-6); padding: var(--sp-2); border-top: 1px solid var(--n-200); }
.avatar { width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-full); background: var(--n-800); color: var(--n-000); display: grid; place-items: center; font-size: var(--fs-12); font-weight: var(--w-semibold); }
.who { font-weight: var(--w-medium); }
.when { font-size: var(--fs-12); color: var(--n-600); }

/* ——— Рабочая область ——— */
.work { flex: 1; padding: var(--sp-6) var(--sp-8); }
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.head p { margin: var(--sp-1) 0 0; color: var(--n-600); }
.doc-title { margin-top: var(--sp-2); }
.spacer { flex: 1; }

/* ——— Кнопки: 4 типа, различимы без чтения подписи ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--h-control); padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--r-md); font-weight: var(--w-medium); white-space: nowrap; }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-primary { background: var(--brand-600); color: var(--n-000); }
.btn-primary:hover { background: var(--brand-700); }
.btn-secondary { background: var(--n-000); border-color: var(--n-400); color: var(--n-800); }
.btn-secondary:hover { background: var(--n-100); }
.btn-ghost { background: transparent; color: var(--brand-text); }
.btn-ghost:hover { background: var(--brand-100); }
.btn-danger { background: transparent; border-color: var(--n-400); color: var(--s-danger-text); }
.btn-danger:hover { background: var(--s-danger-bg); border-color: var(--s-danger-text); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-sm { height: var(--h-control-sm); font-size: var(--fs-12); padding: 0 var(--sp-2); }

/* ——— Чипы статусов: состояние, а не текст ——— */
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-badge); padding: 0 var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-12); font-weight: var(--w-medium); background: var(--s-neutral-bg); color: var(--s-neutral-text); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-success { background: var(--s-success-bg); color: var(--s-success-text); }
.chip-progress { background: var(--s-progress-bg); color: var(--s-progress-text); }
.chip-warning { background: var(--s-warning-bg); color: var(--s-warning-text); }
.chip-danger { background: var(--s-danger-bg); color: var(--s-danger-text); }
.chip-muted { background: var(--s-muted-bg); color: var(--s-muted-text); }

/* ——— Поля: label обязателен, есть состояние ошибки ——— */
.field { display: block; }
.field + .field { margin-top: var(--sp-4); }
.label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-12); font-weight: var(--w-medium); color: var(--n-600); }
.req::after { content: " *"; color: var(--s-danger-text); }
.input { width: 100%; height: var(--h-control); padding: 0 var(--sp-3); border: 1px solid var(--n-400); border-radius: var(--r-md); background: var(--n-000); color: var(--n-800); }
.input::placeholder { color: var(--n-600); }
.input:focus-visible { outline: none; border-color: var(--brand-500); box-shadow: var(--focus); }
.input[readonly], .input[disabled] { background: var(--n-100); border-color: var(--n-300); color: var(--n-600); }
.hint { margin-top: var(--sp-1); font-size: var(--fs-12); color: var(--n-600); }
.error { margin-top: var(--sp-1); font-size: var(--fs-12); color: var(--s-danger-text); }
.input.is-invalid { border-color: var(--s-danger-text); }
.search { position: relative; width: var(--w-search); }
.search .input { padding-left: var(--sp-8); }
.search .icon { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--n-400); }
textarea.input { height: auto; min-height: calc(var(--h-control) * 2); padding: var(--sp-2) var(--sp-3); resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.check { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-1) 0; }
.check > label { display: block; margin: 0; font-size: var(--fs-14); font-weight: var(--w-regular); color: var(--n-800); }
.radio-list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; border: 0; }
.radio-list legend { padding: 0; }
.drop { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--n-400); border-radius: var(--r-md); background: var(--n-000); color: var(--n-600); }
.form-foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--n-200); background: var(--n-000); }
.panel + .panel { margin-top: var(--sp-6); }

/* ——— Таблица ——— */
.panel { background: var(--n-000); border: 1px solid var(--n-200); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
/* под контролами всегда белый: граница n-400 даёт 3.15:1 только на белом */
.toolbar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--n-200); background: var(--n-000); }

.bulk { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--brand-100); border-bottom: 1px solid var(--brand-100); font-size: var(--fs-14); color: var(--brand-text); font-weight: var(--w-medium); }
table { width: 100%; border-collapse: collapse; }
th { padding: var(--sp-2) var(--sp-4); text-align: left; font-size: var(--fs-12); font-weight: var(--w-medium); color: var(--n-600); background: var(--n-100); border-bottom: 1px solid var(--n-200); white-space: nowrap; }
td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--n-200); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--n-100); }
tbody tr.is-selected { background: var(--brand-100); }
.cell-title { font-weight: var(--w-medium); }
.cell-sub { margin-top: var(--sp-1); font-size: var(--fs-12); color: var(--n-600); }
.cell-right { text-align: right; }
.col-check { width: 40px; }
.col-status { width: 190px; }
.col-date { width: 140px; color: var(--n-600); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand-500); }

.pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); color: var(--n-600); font-size: var(--fs-12); }

/* ——— Табы: семантические, с состоянием выбора ——— */
.tabs { display: flex; gap: var(--sp-1); padding: var(--sp-2) var(--sp-4) 0; border-bottom: 1px solid var(--n-200); background: var(--n-000); }
.tab { height: var(--h-control); padding: 0 var(--sp-3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--n-600); font-weight: var(--w-medium); }
.tab:hover { color: var(--n-800); }
.tab[aria-selected=true] { border-bottom-color: var(--brand-500); color: var(--brand-text); }
.tab:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.tabpanel { padding: var(--sp-6); }

/* ——— Пустые и ошибочные состояния ——— */
.state { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-12) var(--sp-6); text-align: center; }
.state h3 { margin: 0; }
.state p { margin: 0; max-width: var(--w-search); color: var(--n-600); }
.state .glyph { width: var(--sp-12); height: var(--sp-12); border-radius: var(--r-md); background: var(--n-100); }
.state.is-error .glyph { background: var(--s-danger-bg); }

/* ——— Маршрут и срок: шаги очереди, баннер, пары ключ-значение ———
   Вынесены из карточки документа, когда появился второй экран с тем же маршрутом. */
.steps { list-style: none; margin: 0; padding: 0 var(--sp-4) 0 0; }
.steps li { position: relative; padding: 0 0 var(--sp-4) var(--sp-6); }
.steps li::before { content: ""; position: absolute; left: var(--sp-1); top: var(--sp-2); width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-full); background: var(--n-300); }
.steps li.done::before { background: var(--brand-500); }
.steps li.current::before { background: var(--s-warning-bg); box-shadow: 0 0 0 3px var(--s-warning-text) inset; }
.steps li + li::after { content: ""; position: absolute; left: calc(var(--sp-1) + (var(--sp-3) - 2px) / 2); top: calc(var(--sp-2) + var(--sp-3)); bottom: var(--sp-2); width: 2px; background: var(--n-200); }
.banner { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--s-warning-bg); color: var(--s-warning-text); font-weight: var(--w-medium); }
.section-title { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.rule-top { border-top: 1px solid var(--n-200); }
.card-side { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.is-flush { padding-top: 0; }
.kv { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; font-size: var(--fs-12); }
.kv + .kv { border-top: 1px solid var(--n-200); }
.kv span:first-child { color: var(--n-600); }
.kv span:last-child { text-align: right; }