:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #1f2933;
  --muted: #7b8794;
  --accent: #0b6bcb;
  --line: #e4e7eb;
}
* { box-sizing: border-box; }
/* Атрибут hidden должен скрывать — всегда. В браузере он приходит из UA-стилей
   ([hidden]{display:none}), поэтому ЛЮБОЕ авторское правило с display его молча
   отменяет. Так на «Листе оценок» пустое окно комментариев (.rs-modal{display:flex})
   висело поверх страницы: экран серый, клики не проходят, в консоли ни одной ошибки.
   Правило общее, а не точечное: тот же капкан расставлен ещё в семи местах. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 56px; background: var(--card);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  color: var(--ink); text-decoration: none; font-size: 15px; letter-spacing: -.2px; }
.brand b { font-weight: 650; }
.brand-ic { color: var(--accent); display: flex; }

.usernav { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px;
  border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 13.5px;
  font-weight: 500; white-space: nowrap; transition: background .12s, color .12s; }
.nav-link:hover { background: var(--bg); color: var(--accent); }
.nav-link.active { background: #eef4fd; color: var(--accent); font-weight: 600; }

/* Dropdown menus */
.nav-dd { position: relative; }
.nav-dd-btn { cursor: pointer; border: none; background: none; font-family: inherit; }
.nav-dd .caret { font-size: 8px; color: var(--muted); transition: transform .15s; }
.nav-dd.open .caret { transform: rotate(180deg); }
.nav-dd.open > .nav-dd-btn { background: var(--bg); color: var(--accent); }
.nav-dd-menu { position: absolute; top: calc(100% + 7px); left: 0; min-width: 198px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.14); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .14s, transform .14s, visibility .14s; z-index: 60; }
.nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.nav-dd-menu a:hover { background: var(--bg); color: var(--accent); }
.nav-dd-menu a.active { background: #eef4fd; color: var(--accent); font-weight: 600; }
.nav-dd-menu .dd-ic { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.nav-dd-menu a:hover .dd-ic, .nav-dd-menu a.active .dd-ic { color: var(--accent); }
.nav-dd-menu .danger { color: #c0392b; }
.nav-dd-menu .danger:hover { background: #fdecea; color: #c0392b; }
.nav-dd-menu .danger .dd-ic { color: #c0392b; }

/* User menu (right) */
.user-dd { margin-left: auto; flex-shrink: 0; }
.user-btn { display: flex; align-items: center; gap: 9px; cursor: pointer; border: none;
  background: none; padding: 4px 8px 4px 5px; border-radius: 999px; font-family: inherit;
  transition: background .12s; }
.user-btn:hover { background: var(--bg); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #e7eef9; color: var(--accent);
  font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: .3px; }
.user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.user-meta .un { font-size: 13px; color: var(--ink); font-weight: 600;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta .ur { font-size: 11px; color: var(--muted); }
.user-dd .nav-dd-menu { left: auto; right: 0; min-width: 214px; }
.user-dd-head { padding: 7px 11px 10px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.user-dd-head .n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.user-dd-head .r { display: inline-block; margin-top: 5px; font-size: 11px; color: var(--muted);
  background: var(--bg); padding: 2px 8px; border-radius: 10px; }

@media (max-width: 1180px) { .user-meta { display: none; } }
@media (max-width: 920px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 56px; padding: 9px 16px; gap: 8px; }
  .usernav { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  .user-dd { position: static; }
  .user-dd .nav-dd-menu { right: 16px; }
}
.content { max-width: 960px; margin: 24px auto; padding: 0 20px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.muted { color: var(--muted); }
hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.flash {
  max-width: 960px; margin: 16px auto 0; padding: 0 20px;
}
.flash div {
  background: #fde8e8; color: #9b1c1c; border: 1px solid #f8b4b4;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 8px;
}
.login-wrap { display: flex; justify-content: center; margin-top: 8vh; }
.login-form { width: 320px; }
.login-form h1 { margin: 0 0 18px; font-size: 20px; }
.login-form label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.login-form input {
  width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 15px; color: var(--ink);
}
.login-form button {
  width: 100%; padding: 11px; border: none; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 15px; cursor: pointer;
}
.login-form button:hover { background: #095399; }
.login-hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
/* Форма входа узкая (320px) — постоянной подсказке нужен воздух, иначе она
   слипается с кнопкой и её не читают. */
.login-help { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; color: var(--muted); }
.login-help b { display: block; color: var(--fg, #0f172a); margin-bottom: 3px; }
/* Набрано, но ещё не отправлено на сервер: раньше это было неотличимо от
   сохранённого значения — и терялось при обновлении страницы без предупреждения. */
#panel .unsaved { border-color: #f59e0b !important; background: #fffbeb; }
/* Фото сотрудника вместо инициалов везде, где есть круглый аватар. */
.avatar-sm { overflow: hidden; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.emp-ava { overflow: hidden; }
.emp-ava img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ===== Дерево оргструктуры ===== */
.content:has(.chart) { max-width: none; }
.toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px;
}
/* Группы внутри тулбара */
.tb-filters { display: flex; gap: 8px; align-items: center; }
.tb-views   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tb-sep { width: 1px; height: 28px; background: var(--line); align-self: center; flex-shrink: 0; margin: 0 2px; }
/* Поиск-пилюля с иконкой */
.tb-search { position: relative; flex: 0 0 280px; display: flex; align-items: center; }
.tb-search-ic { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.tb-search input { width: 100%; padding: 8px 12px 8px 33px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 13.5px; background: var(--card); }
.tb-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
/* Автокомплит поиска: выпадающий список ФИО / должностей / подразделений */
.tb-ac { position: absolute; top: calc(100% + 5px); left: 0; width: 380px; max-width: 92vw;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 10px 28px rgba(15,23,42,.16); z-index: 60; overflow-y: auto; max-height: 360px; }
.tb-ac-item { display: flex; align-items: center; gap: 10px; padding: 7px 11px; cursor: pointer; }
.tb-ac-item + .tb-ac-item { border-top: 1px solid #f1f5f9; }
.tb-ac-item.active, .tb-ac-item:hover { background: #f4f6fb; }
.tb-ac-ic { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 7px; font-size: 13px; }
.tb-ac-ic.person { background: #eef2ff; }
.tb-ac-ic.unit { background: #ecfeff; }
.tb-ac-tx { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tb-ac-tx b { font-weight: 600; font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ac-sub { font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ac mark.ac-hl { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }
/* Селект-фильтр ТОО */
.tb-select { padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px;
  background: var(--card); cursor: pointer; }
.tb-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.tb-select.active { border-color: var(--accent); background: #eff5ff; color: var(--accent); font-weight: 600; }
/* Сегментированная группа «вид» */
.tb-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.tb-seg button { padding: 8px 12px; border: none; background: transparent; cursor: pointer; font-size: 13px;
  color: var(--ink); border-left: 1px solid var(--line); line-height: 1; }
.tb-seg button:first-child { border-left: none; }
.tb-seg button:hover { background: #eff5ff; color: var(--accent); }
.tb-seg button:active { background: #dceafe; }
/* Тумблер в тулбаре */
.tb-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); cursor: pointer; user-select: none; }
.tb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tb-switch .sw { position: relative; width: 36px; height: 20px; background: #cbd2d9; border-radius: 20px; transition: .15s; flex: 0 0 auto; }
.tb-switch .sw::before { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px;
  background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tb-switch input:checked + .sw { background: var(--accent); }
.tb-switch input:checked + .sw::before { transform: translateX(16px); }
.tb-switch input:focus-visible + .sw { box-shadow: 0 0 0 3px rgba(11,107,203,.25); }
.tb-switch-warn input:checked + .sw { background: #ea580c; }

/* Строка метрик — чипы */
.statbar { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin-bottom: 12px; }
.stat { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 14px 7px 17px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; line-height: 1.2;
  position: relative; overflow: hidden; }
.stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #d0d8e4; }
.stat b { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.stat .stat-l { font-size: 11px; color: var(--muted); white-space: nowrap; }
.stat.s-head::before { background: var(--accent); }
.stat.s-head b { color: var(--accent); }
.stat.s-vac { border-color: #fed7aa; background: #fff7ed; }
.stat.s-vac::before { background: #ea580c; }
.stat.s-vac b { color: #c2410c; }
.stat.s-fot { border-color: #bbf7d0; background: #f0fdf4; }
.stat.s-fot::before { background: #16a34a; }
.stat.s-fot b { color: #166534; }
.stat.s-fot-tax { border-color: #c7d2fe; background: #eef2ff; }
.stat.s-fot-tax::before { background: #4f46e5; }
.stat.s-fot-tax b { color: #4338ca; }
.stat.s-cost::before { background: #16a34a; }
.stat.s-cost b { color: #166534; }
.stat.s-filter { border-color: #ddd6fe; background: #f5f3ff; }
.stat.s-filter::before { background: #7c3aed; }
.stat.s-filter b { color: #6d28d9; }
.stat.s-flex { border-color: #99f6e4; background: #f0fdfa; }
.stat.s-flex::before { background: #14b8a6; }
.stat.s-flex b { color: #0f766e; }
.stat.s-plan { border-color: var(--accent); background: #eff6ff; }
.stat.s-plan::before { background: var(--accent); }
.stat.s-plan b { color: var(--accent); font-weight: 800; }
/* Составной денежный чип statbar: главная цифра + детали подстрокой */
.stat .stat-sub { font-size: 11px; color: var(--muted); white-space: nowrap; margin-top: 1px; }
.stat .stat-tax { color: #4f46e5; }
/* Сворачиваемые блоки карточки (доступ, «чем занимается») */
.p-fold { margin: 14px 0 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.p-fold > summary { cursor: pointer; user-select: none; padding: 9px 12px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 6px; }
.p-fold > summary::-webkit-details-marker { display: none; }
.p-fold > summary::before { content: '▸'; color: var(--accent); font-size: 11px; transition: transform .15s; }
.p-fold[open] > summary::before { transform: rotate(90deg); }
.p-fold > summary .fold-ok { color: #166534; text-transform: none; letter-spacing: 0; }
.p-fold > *:not(summary) { margin: 0 10px 10px; }
/* Клавиатурный фокус — видимый по всему приложению */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Раскрываемые строки отчётов: кликабельна вся строка */
tr:has(> td > .rexp), tr:has(> td > .rdept-exp), tr:has(> td > .rcity-exp),
tr.bdyn-row:has(.bexp:not([style*="hidden"])) { cursor: pointer; }
/* Мобильный режим оргструктуры: панель поверх схемы во весь экран */
@media (max-width: 800px){
  .layout { flex-direction: column; }
  #panel { position: fixed; inset: 0; z-index: 50; flex: none; width: auto;
    max-height: none; overflow-y: auto; border-radius: 0; box-shadow: 0 -4px 24px rgba(0,0,0,.18); }
  .toolbar { overflow-x: auto; }
}
/* Общий тумблер «скрыть зарплаты» (страницы без live-перерисовки) */
.ghs-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; margin-left: 10px; }
.ghs-toggle input { accent-color: var(--accent); }
/* Файлы должностных инструкций: чипы-ссылки на карточках и строки в модалке */
.jd-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jd-file { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  color: var(--ink); text-decoration: none; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.jd-file:hover { border-color: var(--accent); color: var(--accent); }
.dm-files { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.dm-file-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg); font-size: 13px; }
.dm-file-row a { color: var(--ink); text-decoration: none; flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dm-file-row a:hover { color: var(--accent); text-decoration: underline; }
.dm-file-del { border: none; background: none; color: #b91c1c; cursor: pointer;
  font-size: 13px; padding: 0 2px; flex-shrink: 0; }
.dm-upl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--accent); cursor: pointer; padding: 6px 12px; border: 1px dashed var(--accent);
  border-radius: 7px; background: #f6faff; }
.dm-upl:hover { background: #eaf3ff; }
/* ИИ-структурирование обязанностей */
.dm-ai-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.dm-ai { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: #6d28d9; cursor: pointer; padding: 6px 12px; border: 1px solid #ddd6fe;
  border-radius: 7px; background: #f5f3ff; }
.dm-ai:hover { background: #ede9fe; }
.dm-ai:disabled { opacity: .6; cursor: default; }
/* Кнопка «Собрать по ветке» — синтез должностной руководителя из ветки (только админ) */
.dm-enrich { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: #0f766e; cursor: pointer; padding: 6px 12px; border: 1px solid #99f6e4;
  border-radius: 7px; background: #f0fdfa; }
.dm-enrich:hover { background: #ccfbf1; }
.dm-enrich:disabled { opacity: .6; cursor: default; }
/* «Глубокий анализ» — премиальная кнопка (структура + веб-ресёрч), только для топов */
.dm-deep { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: #fff; cursor: pointer; padding: 6px 12px; border: 1px solid transparent; border-radius: 7px;
  background: linear-gradient(90deg, #6d28d9, #4338ca); }
.dm-deep:hover { background: linear-gradient(90deg, #5b21b6, #3730a3); }
.dm-deep:disabled { opacity: .55; cursor: default; }
.dm-ai-box { margin-top: 10px; border: 1px solid #ddd6fe; border-radius: 9px;
  background: #faf9ff; padding: 10px 12px; }
.dm-ai-h { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600;
  color: #5b21b6; margin-bottom: 8px; }
.dm-ai-title { flex: 1; }
.dm-ai-timer { font-variant-numeric: tabular-nums; font-weight: 500; color: #7c3aed; font-size: 11.5px; }
.dm-ai-stop { padding: 3px 9px; border: 1px solid #ddd6fe; border-radius: 6px; background: #fff;
  color: #6d28d9; cursor: pointer; font-size: 11.5px; }
/* Неопределённая полоска: показывает, что поток идёт, пока текст печатается. */
.dm-ai-bar { height: 3px; border-radius: 3px; background: #ede9fe; overflow: hidden; margin-bottom: 10px; }
.dm-ai-bar > i { display: block; height: 100%; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, #a78bfa, #6d28d9); transform: translateX(-100%); }
.dm-ai-bar.run > i { animation: dmAiSlide 1.1s ease-in-out infinite; }
@keyframes dmAiSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.dm-ai-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.dm-ai-col { min-width: 0; }
.dm-ai-cols .jd-list { margin: 0; font-size: 12.5px; background: #fff; border: 1px solid #ece9fb;
  border-radius: 8px; padding: 8px 10px; max-height: 320px; overflow: auto; }
.dm-ai-cols .jd-ul { padding-left: 17px; }
.dm-ai-cap { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.dm-ai-act { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.dm-ai-apply { padding: 6px 14px; border: 0; border-radius: 7px; background: #6d28d9;
  color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
.dm-ai-cancel { padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; cursor: pointer; font-size: 13px; }
@media (max-width: 640px) { .dm-ai-cols { grid-template-columns: 1fr; } }
/* Плашка «вышло обновление» (авторефреш устаревших вкладок) */
.upd-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 300; background: #0f172a; color: #f8fafc; font-size: 13px;
  padding: 10px 18px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.28);
  display: flex; align-items: center; gap: 8px; max-width: 92vw; }
.upd-banner a { color: #7dd3fc; font-weight: 600; }
.upd-banner .upd-sub { color: #94a3b8; font-size: 11.5px; }
/* Сообщение о провале начальной загрузки страницы */
.load-err { padding: 22px; text-align: center; color: #b91c1c; background: #fef2f2;
  border: 1px solid #fecaca; border-radius: 10px; font-size: 14px; }
.load-err a { color: var(--accent); }
/* Бейдж режима демонстрации */
body.demo-mode .chart::before { content: '🙈 Режим показа экрана — зарплаты скрыты';
  position: absolute; z-index: 5; top: 8px; left: 50%; transform: translateX(-50%);
  background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; border-radius: 20px;
  padding: 5px 14px; font-size: 12px; font-weight: 600; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.layout { display: flex; gap: 12px; align-items: stretch; }
.chart { position: relative; flex: 1; min-width: 0; height: calc(100vh - 230px); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }

/* ===== Панель редактирования ===== */
.panel {
  /* Шире на больших экранах (до 580px), но не уже 460 и не больше трети окна. */
  flex: 0 0 clamp(460px, 34vw, 580px); height: calc(100vh - 230px); overflow: hidden auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px;
  position: relative; z-index: 5;   /* над SVG оргструктуры — чтобы карточка ловила клики */
}
.panel * { max-width: 100%; }
.panel-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.panel-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.p-name {
  width: 100%; font-size: 16px; font-weight: 600; padding: 9px 11px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
}
.p-close { border: none; background: var(--bg); border-radius: 6px; width: 30px; height: 30px;
  cursor: pointer; color: var(--muted); font-size: 14px; }
.p-row { display: flex; gap: 10px; margin-bottom: 12px; }
.p-row label { flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted); }
.p-row input, .p-row select {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 14px; color: var(--ink);
}
.p-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 16px 0 8px; font-weight: 600; }

/* Блок должности — отдельная карточка */
.pos { background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px; margin-bottom: 10px; }
.pos-top { display: flex; gap: 8px; align-items: center; }
.pos .pp-title { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 14px; font-weight: 500; background: #fff; }
.pp-lead { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.pos-fields { display: flex; gap: 10px; margin-top: 8px; }
.pf { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.pf input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: #fff; width: 90px; }
.pf .pp-hc { width: 64px; text-align: center; }
.pf-wide { flex: 1; }
.pos-fields .pf-wide input { width: 100%; }
.pos-people { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: #ecfdf5; color: #166534;
  border: 1px solid #a7f3d0; border-radius: 14px; padding: 3px 6px 3px 11px; font-size: 13px; }
.chip-name { cursor: pointer; font-weight: 500; }
.chip-name:hover { text-decoration: underline; }
.chip-x { border: none; background: none; color: #166534; cursor: pointer; font-size: 12px; padding: 0 2px; }
.vac-tag { font-size: 12px; color: #b45309; }
.vac-tag.ok { color: #16a34a; }
.over-tag { font-size: 12px; color: #b91c1c; font-weight: 600; }
.pp-assign { display: flex; gap: 6px; margin-top: 10px; }
.pp-assign input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; background: #fff; }
.pp-assign .pp-assignbtn, .pp-assign .zp-assign { padding: 8px 14px; border: none; background: var(--accent); color: #fff;
  border-radius: 7px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.pp-assign .pp-assignbtn:hover, .pp-assign .zp-assign:hover { background: #095399; }
.pp-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px;
  margin-top: 8px; text-decoration: underline; padding: 0; }
.pp-del:hover { color: #b91c1c; }

/* Должность: заголовок с иконкой удаления */
.pos-head { display: flex; gap: 8px; align-items: center; }
.pp-del-ic { border: none; background: none; cursor: pointer; font-size: 14px; padding: 4px 6px;
  border-radius: 6px; opacity: .6; flex: 0 0 auto; line-height: 1; }
.pp-del-ic:hover { opacity: 1; background: #fef2f2; }

/* Сотрудник: имя + факт-оклад + доступ — единый блок */
.emp-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.emp { border: 1px solid #d4ede0; background: #f6fdf9; border-radius: 9px; padding: 9px 11px; }
.emp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.emp-name { font-weight: 600; color: #15803d; font-size: 14px; cursor: pointer; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-name:hover { text-decoration: underline; }
.emp-x { border: 1px solid transparent; background: none; color: #b45309; cursor: pointer; font-size: 12px;
  padding: 3px 8px; border-radius: 6px; flex: 0 0 auto; white-space: nowrap; }
.emp-x:hover { color: #b91c1c; background: #fef2f2; border-color: #f3c6c6; }
.emp-sal { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.emp-sal-l { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.emp-sal .pp-fact { width: 140px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13px; text-align: right; background: #fff; }
.emp-sal .pp-fact:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.emp-sal .emp-city { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13px; background: #fff; }
.emp-sal .emp-city:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.emp-city-ro { font-size: 13px; color: var(--ink); }
.pm-ro { padding: 8px 10px; border: 1px dashed var(--line); border-radius: 7px; background: var(--bg);
  font-size: 14px; color: var(--ink); }
/* API-ключи: разовый показ ключа */
.keybox { border: 1px solid #16a34a; background: #f0fdf4; border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
.keybox-h { font-weight: 600; color: #166534; margin-bottom: 8px; }
.keybox-row { display: flex; gap: 10px; align-items: center; }
.keybox-row code { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 7px;
  padding: 9px 12px; font-size: 14px; word-break: break-all; }
.spark rect { fill: var(--accent); opacity: .75; }
.spark .base { fill: #e8ecf1; opacity: 1; }
.emp-access-row:empty { display: none; }
.emp-access-row { margin-top: 8px; }
.emp-access { font-size: 12px; color: #166534; }
.emp-access code { background: #fff; border: 1px solid #bbf7d0; border-radius: 5px; padding: 1px 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.emp-grant { width: 100%; padding: 8px 12px; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3;
  border-radius: 8px; cursor: pointer; font-size: 13px; text-align: left; }
.emp-grant:hover { border-color: var(--accent); }
.emp-status { margin-top: 2px; }
/* Подблоки внутри карточки сотрудника: «Доступ», «Проекты» */
.emp-section { margin-top: 9px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.emp-section-l { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
  font-weight: 600; margin-bottom: 6px; }
.emp-section .emp-access-row, .emp-section .emp-access-row:empty { display: block; margin: 0; }
.proj-chip { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; border-radius: 10px;
  padding: 1px 8px; font-size: 12px; }
.proj-chip b { font-weight: 700; }
.emp-proj-edit { border: none; background: none; color: var(--accent); cursor: pointer; font-size: 12px;
  text-decoration: underline; padding: 0; }

/* Отдельные блоки панели: «Доступ в систему», «Проекты и загрузка» */
.p-block { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 11px; margin-bottom: 10px; }
.p-block-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  font-weight: 600; margin-bottom: 8px; }
/* Блок «Чем занимается» (должностная инструкция) */
.jd-lbl { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 8px; }
.jd-block input.jd-purpose, .jd-block textarea { width: 100%; box-sizing: border-box; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font: inherit; font-weight: 400; color: var(--text); }
.jd-block textarea { resize: vertical; line-height: 1.45; }
.jd-purpose-ro { font-weight: 600; margin-bottom: 6px; }
.jd-ul { margin: 4px 0 10px; padding-left: 18px; }
.jd-ul li { margin: 3px 0; line-height: 1.45; }
.jd-ul:last-child { margin-bottom: 0; }
.jd-list { font-weight: 400; }
/* Заголовок смыслового раздела обязанностей (строка «# Раздел») */
.jd-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #6d28d9; margin: 12px 0 2px; padding-bottom: 3px; border-bottom: 1px solid #ece9fb; }
.jd-sec:first-child { margin-top: 0; }

/* ===== Обязанности: панель форматирования + живой предпросмотр ===== */
.dm-tb { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; flex-wrap: wrap; }
.dm-tb-b { border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--text);
  font-size: 12px; padding: 4px 10px; border-radius: 7px; }
.dm-tb-b:hover { border-color: var(--accent); color: var(--accent); background: #eef5fd; }
.dm-tb-hint { font-size: 11px; }
.dm-tb-hint code { background: #f1f5f9; border: 1px solid var(--line); border-radius: 4px;
  padding: 0 4px; font-size: 10.5px; }
.modal-body textarea.dm-duties { font-size: 13px; line-height: 1.55; }
.dm-prev-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; margin: 10px 0 4px; }
.dm-prev { border: 1px solid #ece9fb; border-radius: 9px; background: #fdfdff;
  padding: 10px 12px; font-size: 13px; max-height: 260px; overflow: auto; }

/* WYSIWYG-редактор обязанностей: один блок, форматирование прямо в поле */
.dm-editor { min-height: 200px; max-height: 44vh; overflow: auto; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px 12px; font-size: 14px; line-height: 1.5; color: var(--text); background: #fff; }
.dm-editor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.dm-editor .db-blk { padding: 1px 0; }
.dm-editor .db-task { position: relative; padding-left: 18px; }
.dm-editor .db-task::before { content: '•'; position: absolute; left: 4px; top: 0; color: #94a3b8; }
.dm-editor .db-task[data-routine="1"]::after { content: '⚙ рутина'; font-size: 11px; color: #b45309;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 0 6px; margin-left: 6px; white-space: nowrap; }
.dm-editor .db-sec { margin: 10px 0 3px; padding-bottom: 3px; border-bottom: 1px solid #ece9fb;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6d28d9; }
.dm-editor .db-sec:first-child { margin-top: 0; }
.dm-editor b, .dm-editor strong { font-weight: 700; }
.dm-tb-b[data-act="bold"] { font-weight: 700; min-width: 30px; }
.dm-tb-b.on { border-color: var(--accent); color: var(--accent); background: #eef5fd; }
/* Строка «Цель» в предпросмотре ИИ (структурируется вместе с обязанностями) */
.dm-ai-goal { font-size: 12.5px; color: #334155; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #ece9fb; }
.dm-ai-goal b { color: #6d28d9; }

/* Превью инструкции на карточке (2 строки) + кнопка открытия модалки */
.jd-preview { font-size: 13px; color: var(--text); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jd-preview.muted { color: var(--muted); }
.dm-open { margin-top: 8px; padding: 6px 12px; border: 1px solid var(--line); background: #fff;
  border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); }
.dm-open:hover { border-color: var(--accent); }

/* Всплывающее окно «Чем занимается» */
.modal-ov { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex;
  align-items: center; justify-content: center; z-index: 200; padding: 20px; }
body.modal-open { overflow: hidden; }   /* фон не прокручивается, пока открыто модальное окно */
/* Шире 640px: внутри — предпросмотр ИИ в две колонки «Было / Станет». */
.modal-card { background: #fff; border-radius: 12px; width: min(940px, 100%); max-height: 90vh;
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.28); }
/* Высокое окно (напр. «Чем занимается»): почти на весь экран, редактор занимает
   всё свободное место по вертикали — один скролл внутри него, без вложенных. */
.modal-card.modal-tall { height: min(90vh, 920px); }
.modal-card.modal-tall .modal-body { display: flex; flex-direction: column; min-height: 0; }
.modal-card.modal-tall .dm-editor { flex: 1 1 auto; min-height: 180px; max-height: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--line); }
.modal-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.modal-x { border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; line-height: 1; }
.modal-x:hover { color: var(--ink); }
.modal-body { padding: 14px 18px; overflow: auto; }
.modal-body .jd-lbl { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 12px; }
.modal-body input, .modal-body textarea { width: 100%; box-sizing: border-box; margin-top: 5px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; color: var(--ink); }
.modal-body textarea { resize: vertical; line-height: 1.5; }
/* «Цель должности»: авто-высота (1→2+ строк), без ручного ресайза, лёгкий скролл после ~4 строк */
.modal-body textarea.dm-purpose { resize: none; overflow-y: auto; line-height: 1.4; max-height: 5.6em; }
.modal-body input:focus, .modal-body textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.modal-foot { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--line); }
.dm-save { background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 16px; font-weight: 600; cursor: pointer; }
.dm-save:hover { filter: brightness(1.06); }
.dm-full { margin-left: auto; color: var(--accent); cursor: pointer; font-size: 13px; }
.dm-full:hover { text-decoration: underline; }

/* Тосты автосохранения */
#toast-host { position: fixed; bottom: 22px; right: 22px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { background: #0f172a; color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px;
  border-radius: 9px; box-shadow: 0 6px 22px rgba(0,0,0,.28); opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
/* Блок «Чем занимается» — отдельным прямоугольником под карточкой должности */
.posduties-box .pm-editpos { margin-top: 2px; }
.jd-block .pm-editpos { margin-top: 2px; }
.jd-editrole { color: var(--accent); cursor: pointer; text-decoration: underline; }
.jd-editrole:hover { filter: brightness(1.1); }
/* Верхний блок карточки узла: ТОО + Тип + Город в одном прямоугольнике */
.p-topmeta { border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: var(--bg);
  margin: 10px 0 14px; }
.p-topmeta .p-row { margin: 0; }
.p-topmeta .p-row + .p-row { margin-top: 9px; }
.p-topmeta select { width: 100%; box-sizing: border-box; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 7px; font: inherit; background: #fff; color: var(--ink); }
.p-topmeta select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.p-topmeta .pm-ro { background: #fff; }
/* Просмотр фото крупно (лайтбокс) */
.plb { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.82); display: flex;
  align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
  opacity: 0; transition: opacity .15s; }
.plb.show { opacity: 1; }
.plb img { max-width: min(92vw, 720px); max-height: 88vh; border-radius: 12px; background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.plb-x { position: absolute; top: 14px; right: 18px; width: 36px; height: 36px; border: none;
  border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 15px; cursor: pointer; }
.plb-x:hover { background: rgba(255,255,255,.32); }
/* Аватар с фото — кликабелен (увеличить) */
img.pm-avatar { cursor: zoom-in; }
img.pm-avatar:hover { filter: brightness(.92); }
/* ФИО тремя полями (Фамилия/Имя/Отчество) */
.pm-name3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 6px 0 14px; }
.pm-name3 label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.pm-name3 input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; }
.pm-name3 input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
@media (max-width: 520px){ .pm-name3 { grid-template-columns: 1fr; } }
/* Личные данные и контакты в карточке (шаг B) */
.pm-idcard { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; background: var(--bg); margin: 4px 0 14px; }
.pm-idcard-photo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; }
.pm-avatar { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); background: #fff; }
.pm-avatar--empty { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  font-size: 28px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#6b8cce,#3f5aa6); }
.pm-photo-ctl { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pm-photo-btn { font-size: 11px; color: var(--accent); cursor: pointer; text-align: center; }
.pm-photo-btn:hover { text-decoration: underline; }
.pm-photo-del { border: none; background: none; color: #b91c1c; font-size: 11px; cursor: pointer; padding: 0; }
.pm-photo-del:hover { text-decoration: underline; }
.pm-photo-err { color: #b91c1c; font-size: 11px; text-align: center; max-width: 92px; }
.pm-grid { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; min-width: 0; }
.pm-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.pm-grid input, .pm-grid select { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; font-size: 13px; background: #fff; color: var(--ink); }
.pm-grid input:focus, .pm-grid select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.pm-grid .pm-ro { background: #fff; font-size: 13px; padding: 6px 8px; }
.pm-hint { font-size: 10px; color: var(--muted); line-height: 1.3; }
@media (max-width: 560px){ .pm-idcard { flex-direction: column; } .pm-grid { grid-template-columns: 1fr; } }
/* История движений (шаг C) */
.tl { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.tl-item { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.tl-item:last-child { border-bottom: none; }
.tl-dot { flex: 0 0 auto; width: 20px; text-align: center; font-size: 13px; line-height: 1.5; }
.tl-body { flex: 1 1 auto; min-width: 0; }
.tl-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tl-top b { font-size: 13px; color: var(--ink); }
.tl-date { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-sub { font-size: 12px; color: var(--text); margin-top: 1px; }
.tl-money { font-size: 12px; color: var(--muted); margin-top: 1px; }
select.pm-city { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; background: #fff; color: var(--text); }
select.emp-city { max-width: 180px; padding: 5px 7px; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; background: #fff; color: var(--text); }
.pos-actions { margin-top: 7px; }
.pp-open { font-size: 12px; color: var(--accent, #2563eb); background: none; border: 0;
  padding: 2px 0; cursor: pointer; font-weight: 600; }
.pp-open:hover { text-decoration: underline; }

/* ===== Карточка должности (редизайн, вариант B) ===== */
.posB { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.posB .pos-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.posB .pp-title { flex: 1; font-size: 15px; font-weight: 600; color: var(--ink);
  border: 1px solid transparent; border-radius: 7px; padding: 6px 8px; background: transparent; }
.posB .pp-title:hover, .posB .pp-title:focus { border-color: var(--line); background: #fff; outline: none; }
.posB .pp-del-ic { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; padding: 4px; }
.posB .pp-del-ic:hover { color: #b91c1c; }
/* Сотрудник */
.emp-b { display: flex; align-items: flex-start; gap: 4px; }
.emp-row + .emp-row { margin-top: 8px; }
/* Кликабельная плашка «открыть карточку»: аватар+имя+город, ховер-подсветка + шеврон. */
.emp-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid transparent; border-radius: 9px; padding: 6px 8px;
  transition: background .12s, border-color .12s; }
.emp-open:hover { background: var(--bg); border-color: var(--line); }
.emp-open:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.emp-open:hover .emp-name { color: var(--accent); }
.emp-open-chev { flex: 0 0 auto; align-self: center; margin-left: auto; color: var(--muted); font-size: 20px;
  line-height: 1; opacity: .4; transition: opacity .12s, transform .12s, color .12s; }
.emp-open:hover .emp-open-chev { opacity: 1; color: var(--accent); transform: translateX(2px); }
.emp-ava { width: 36px; height: 36px; border-radius: 50%; background: #e6f1fb; color: #0b6bcb;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.emp-b-main { flex: 1; min-width: 0; }
.emp-b-main .emp-name { display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.emp-meta-l { color: var(--muted); }
.emp-meta select.emp-city { max-width: 160px; padding: 3px 6px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; background: #fff; color: var(--text); }
.emp-b .emp-x { border: 0; background: none; color: #b45309; font-size: 12px; cursor: pointer; flex-shrink: 0; align-self: flex-start; }
.emp-vacant { font-size: 13px; color: var(--muted); padding: 6px 0; }
/* Плитки окладов */
.sal-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; margin-top: 10px; }
.sal-grid.one { grid-template-columns: minmax(0,1fr); }
.sal-tile { background: var(--bg); border-radius: 8px; padding: 7px 10px; }
.sal-tile-l { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.sal-tile-v { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--ink); }
.sal-tile-v input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px;
  font: inherit; font-weight: 600; text-align: right; background: #fff; color: var(--ink); }
.sal-cur { color: var(--muted); font-weight: 400; flex-shrink: 0; }
/* Подвал: статус + открыть */
.pos-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.st-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.st-pill.green { background: #ecfdf5; color: #047857; }
.st-pill.amber { background: #fffbeb; color: #b45309; }
.st-pill.red { background: #fef2f2; color: #b91c1c; }
.posB .pp-assign { display: flex; gap: 6px; margin-top: 10px; }
.jd-save, .pm-dnote-save { margin-top: 8px; padding: 6px 12px; border: 0; border-radius: 7px;
  background: var(--accent, #2563eb); color: #fff; font-weight: 600; cursor: pointer; }
.jd-save:hover, .pm-dnote-save:hover { filter: brightness(1.06); }
.acc-row, .proj-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.acc-row + .acc-row, .proj-row + .proj-row { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 8px; }
.acc-name { font-size: 13px; font-weight: 600; color: #15803d; flex: 0 0 100%; }
.proj-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.card-node { cursor: pointer; }
/* Выделение и «своё» перетаскивание браузера гасим ЗАРАНЕЕ, а не в момент жеста:
   к первому движению мыши выделение уже началось, и жест мог достаться браузеру. */
.card-node, .pos-leaf { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
body.dragging-node, body.dragging-node * { cursor: grabbing !important; user-select: none; }
.card-node.drop-target { outline: 3px dashed var(--accent); outline-offset: 2px; background: #eef5ff; }

/* Карточка-лист: рядовая должность под подразделением */
.pos-leaf { box-sizing: border-box; width: 100%; height: 100%; padding: 8px 12px;
  background: #fbfcfe; border: 1px solid var(--line); border-left: 3px solid #b8c4d4;
  border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; font: 13px/1.3 -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.pos-leaf:hover { border-color: var(--accent); }
.pos-leaf.draggable { cursor: grab; }
.pos-leaf .leaf-title { font-weight: 600; color: var(--ink); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Название на карточке — отдельная цель клика (открывает должность). Подчёркивание
   пунктиром только по наведению: постоянное превратило бы схему в частокол ссылок. */
.pos-leaf .leaf-title.act { cursor: pointer; }
.pos-leaf .leaf-title.act:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.pos-leaf .leaf-sub { font-size: 12px; color: #475569; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-leaf .leaf-sal { align-self: flex-start; font-size: 11px; color: #15803d; background: #f0fdf4;
  border: 1px solid #dcfce7; padding: 0 6px; border-radius: 6px; font-weight: 600; line-height: 16px; margin-top: 3px; }
/* Вакантная ставка — пунктирная рамка как сигнал «слот пустой, заполнить» */
.pos-leaf.vac { border: 1px dashed #e6c49c; border-left: 3px dashed #f0b27a; background: #fffdf9; }
.pos-leaf.vac .leaf-sub { color: #b45309; font-style: italic; }
.card-lead .lead-sal { align-self: flex-start; color: #15803d; background: #f0fdf4; border: 1px solid #dcfce7;
  padding: 0 6px; border-radius: 6px; font-weight: 600; font-size: 11px; line-height: 16px; margin-top: 2px; }
.card-lead .lead-city { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-toggle { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* ===== Модалка карточки человека ===== */
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex;
  align-items: center; justify-content: center; z-index: 50; }
.modal[hidden] { display: none; }
.modal-box { background: var(--card); border-radius: 12px; padding: 20px; width: 420px;
  max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.pm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pm-head h2 { margin: 0; font-size: 17px; }
.pm-close { border: none; background: var(--bg); width: 30px; height: 30px; border-radius: 7px;
  cursor: pointer; color: var(--muted); font-size: 14px; }
.pm-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.pm-field input, .pm-field select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; color: var(--ink); }
.pm-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 8px; }
.pm-asgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pm-asg { border: 1px solid var(--line); background: var(--bg); border-radius: 9px; padding: 10px 12px; }
.pm-asg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pm-asg-top b { font-size: 14px; color: var(--ink); }
.pm-asg-unit { font-size: 12px; color: var(--accent); cursor: pointer; margin-top: 2px; }
.pm-asg-unit:hover { text-decoration: underline; }
.pm-asg-sal { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pm-asg-sal .pm-fact { width: 140px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13px; text-align: right; background: #fff; }
.pm-asg-sal .pm-fact:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.pm-unassign { border: none; background: none; color: #b91c1c; cursor: pointer; font-size: 12px;
  text-decoration: underline; padding: 0; flex: 0 0 auto; }
.pm-transfer { border: none; background: none; color: #4338ca; cursor: pointer; font-size: 12px;
  text-decoration: underline; padding: 0 10px 0 0; flex: 0 0 auto; }
.pm-transfer:disabled { opacity: .5; cursor: default; }
/* Выбор новой должности при переводе */
.tr-box { margin-top: 9px; padding: 9px 10px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; }
.tr-lbl { font-size: 11px; color: #3730a3; font-weight: 600; margin-bottom: 5px; }
.tr-box .tr-to { width: 100%; padding: 7px 9px; border: 1px solid #c7d2fe; border-radius: 7px;
  font: inherit; font-size: 12.5px; background: #fff; }
.tr-act { display: flex; gap: 8px; margin-top: 8px; }
.tr-act button { padding: 6px 12px; border-radius: 7px; font-size: 12px; cursor: pointer; border: none;
  background: #4338ca; color: #fff; }
.tr-act .ghost { background: #fff; color: var(--muted); border: 1px solid var(--line); }
.pm-editpos { margin-top: 9px; padding: 6px 10px; border: 1px solid var(--line); background: #fff;
  border-radius: 7px; cursor: pointer; font-size: 12px; color: var(--accent); }
.pm-editpos:hover { border-color: var(--accent); }
.pm-grant { width: 100%; padding: 9px 12px; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3;
  border-radius: 8px; cursor: pointer; font-size: 13px; text-align: left; }
.pm-grant:hover { border-color: var(--accent); }
.pm-loadwrap { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pm-alloc { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.pm-prj { flex: 1; font-size: 14px; }
.pm-prj-sel, .va-prj { flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: #fff; cursor: pointer; }
.pm-prj-sel:hover, .va-prj:hover { border-color: var(--accent); }
.vac-sub { margin: 4px 16px 12px; border-left: 3px solid #f0b27a; padding-left: 12px; }
.vac-sub-h { font-size: 12px; font-weight: 600; color: #b45309; margin: 8px 0 4px; }
.ca-proj { color: #6d28d9; font-weight: 600; }
.rp-ca td { background: #faf8ff; }
.rp-ca:hover td { background: #f3eeff; }
.pm-pct { width: 60px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; text-align: center; }
.pm-del { border: none; background: none; color: #b91c1c; cursor: pointer; font-size: 13px; }
.pm-add { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.pm-add select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 14px; }
.pm-add .pm-newpct { width: 60px; padding: 8px 7px; border: 1px solid var(--line); border-radius: 7px; font-size: 14px; text-align: center; }
.pm-add .pm-addbtn { padding: 8px 12px; border: none; border-radius: 7px; background: var(--accent); color: #fff; cursor: pointer; font-size: 14px; }
.pm-add .pm-addbtn:hover { background: #095399; }
.p-hint { font-size: 12px; color: var(--muted); background: var(--bg); border: 1px dashed var(--line);
  border-radius: 7px; padding: 8px 10px; margin-top: 6px; }
.pm-flex-why { padding: 7px 0 2px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.pm-flex-why input[type=text], .pm-flex-why input:not([type]) { width: 100%; box-sizing: border-box;
  padding: 6px 8px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 7px; }
.pm-flexuntil { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.pm-flexuntil input { padding: 5px 7px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 7px; }
.fx-exp { color: #b91c1c; }
.pm-asg-title { cursor: pointer; }
.pm-asg-title:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.p-poshint { font-size: 11.5px; color: var(--muted); margin: -4px 0 12px; line-height: 1.4; }
.pm-context { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.pm-move { display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--muted); margin: -6px 0 12px; }
.pm-move select { flex: 1; min-width: 0; font-size: 13px; padding: 4px 6px; }
.zp-row { display: flex; gap: 10px; }
.zp-row .pm-field { flex: 1; }
.zp-lead { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); margin-bottom: 4px; cursor: pointer; }
.pm-actions { margin-top: 16px; }
.pm-actions .danger { padding: 8px 12px; border: 1px solid #f8b4b4; color: #b91c1c;
  background: var(--card); border-radius: 7px; cursor: pointer; font-size: 13px; }
.pm-actions .danger:hover { background: #fde8e8; }

/* Кнопка «Добавить члена команды» — как «+ Подразделение» */
.p-addpos-wrap > summary.p-addbtn { display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 9px 12px; border: 1px solid var(--line);
  background: var(--card); border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--ink); margin: 4px 0; }
.p-addpos-wrap > summary.p-addbtn:hover { border-color: var(--accent); color: var(--accent); }
.p-addpos-wrap[open] > summary.p-addbtn { border-color: var(--accent); color: var(--accent); }

/* Фактический оклад «в руки» по людям */
.pp-facts { margin-top: 10px; }
.pp-facts-h { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.pp-factrow { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.pp-factname { flex: 1; min-width: 0; font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-fact { width: 110px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13px; text-align: right; background: #fff; }
.pp-fact:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.1); }
.pp-cur { color: var(--muted); font-size: 12px; }
.masked { display: inline-block; color: var(--muted); font-weight: 700; letter-spacing: 2px; padding: 6px 2px; }

/* Блок «Дать доступ» */
.grant-box { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.zp-grant { padding: 9px 12px; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3;
  border-radius: 8px; cursor: pointer; font-size: 13px; text-align: left; }
.zp-grant:hover { border-color: var(--accent); }
.grant-hint { font-size: 11px; color: var(--muted); }
.granted { font-size: 13px; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 8px; padding: 8px 11px; }
.granted code { background: #fff; border: 1px solid #bbf7d0; border-radius: 5px; padding: 1px 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.granted-id { color: var(--muted); font-size: 12px; }
.granted-hint { color: var(--muted); font-size: 11px; }
.creds { margin-top: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9px; padding: 12px; }
.creds-h { font-size: 12px; color: #166534; margin-bottom: 8px; }
.creds-row { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 13px; }
.creds-row span { color: var(--muted); width: 56px; }
.creds-row code { font-family: ui-monospace, Consolas, monospace; background: #fff; border: 1px solid var(--line);
  padding: 2px 8px; border-radius: 6px; font-size: 13px; }
.creds-copy { margin-top: 8px; padding: 7px 12px; border: none; background: var(--accent); color: #fff;
  border-radius: 7px; cursor: pointer; font-size: 13px; }
.creds-copy:hover { background: #095399; }
.creds-copied { margin-left: 8px; font-size: 12px; color: #166534; }
.p-addpos-wrap { margin-top: 4px; }
.p-addpos-wrap > summary { cursor: pointer; font-size: 13px; color: var(--accent); padding: 6px 0; list-style: none; }
.p-addpos-wrap > summary::-webkit-details-marker { display: none; }
.p-addpos { display: flex; flex-direction: column; gap: 8px; padding: 10px; margin-top: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.p-addpos .np-title { width: 100%; }
.p-addpos-row { display: flex; gap: 8px; align-items: flex-end; }
.p-addpos input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: #fff; }
.p-addpos .np-hc { width: 64px; }
.p-addpos .np-add { padding: 8px 14px; border: none; background: var(--accent); color: #fff;
  border-radius: 7px; cursor: pointer; font-size: 13px; margin-left: auto; }
.p-addpos .np-add:hover { background: #095399; }
.p-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.p-actions button { width: 100%; padding: 9px 12px; border: 1px solid var(--line); background: var(--card);
  border-radius: 7px; cursor: pointer; font-size: 13px; }
.p-actions .danger { color: #b91c1c; border-color: #f8b4b4; }
.p-actions button:hover { border-color: var(--accent); }

/* ===== Аккаунт и пользователи ===== */
.card.narrow { max-width: 420px; }
.card h2 { font-size: 16px; margin: 0 0 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.stack input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; color: var(--ink); }
.stack button, .urow-form button {
  padding: 10px 14px; border: none; border-radius: 8px; background: var(--accent);
  color: #fff; font-size: 14px; cursor: pointer; align-self: flex-start;
}
.stack button:hover, .urow-form button:hover { background: #095399; }
.formmsg { font-size: 13px; min-height: 18px; }
.formmsg.ok { color: #166534; }
.formmsg.err { color: #b91c1c; }

.users-card { max-width: 100%; }
.users-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.users-head h1 { margin: 0; }
.users-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.users-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.users-search { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
  min-width: 240px; background: #fff; }
.users-search:focus, .users-filter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.users-filter { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: #fff; }

.utable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; table-layout: fixed; }
.utable th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .03em;
  text-transform: uppercase; padding: 6px 12px; border-bottom: 2px solid var(--line); background: var(--card); }
.utable th.ta-c, .utable td.ta-c { text-align: center; }
.utable td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
.utable tbody tr:not(.group-row):hover td { background: #f8fafc; }
.utable tr.inactive { opacity: .55; }

/* Группы по ролям */
.group-row td { padding: 14px 12px 6px; border-bottom: none; }
.group-row td { color: var(--ink); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.group-row .group-n { display: inline-block; min-width: 18px; text-align: center; margin-left: 6px;
  background: var(--bg); color: var(--muted); border-radius: 9px; padding: 0 7px; font-size: 11px; font-weight: 600; }

/* Подсветка админов */
.utable tr.is-admin td { background: #fff7ed; }
.utable tr.is-admin:hover td { background: #ffedd5; }
.utable tr.is-admin td:first-child { box-shadow: inset 3px 0 0 #ea580c; }

/* Ячейка пользователя: аватар + имя/логин */
.u-cell { display: flex; align-items: center; gap: 11px; }
.u-ava { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
/* flex:1 обязателен: без него блок сжимается до внутренней ширины <input> (~20 символов),
   и имя обрезается, какой бы широкой ни была колонка. */
.u-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.u-name { display: block; padding: 5px 0; font-size: 14px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Отступ был подогнан под padding поля ввода; имя стало текстом — выравниваем по левому краю. */
.u-login { font-size: 12px; color: var(--muted); }
.metag { color: var(--accent); font-weight: 600; }

/* Роль: pill для админа, select для остальных */
.pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.pill-admin { background: #ffedd5; color: #c2410c; }
.utable .u-role { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; background: #fff; }

/* Тумблеры */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; background: #cbd2d9; border-radius: 22px; transition: .15s; }
.switch .slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(16px); }
.switch input:disabled + .slider { opacity: .55; cursor: not-allowed; }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(11,107,203,.25); }

.utable .u-scope { font-size: 13px; }
.scope-name { color: var(--ink); }
.u-scope-clear { border: none; background: none; color: var(--accent); cursor: pointer; font-size: 11px; text-decoration: underline; padding: 0 0 0 4px; }
.utable .uacts { white-space: nowrap; text-align: right; }
.utable .uacts button { padding: 6px 11px; border: 1px solid var(--line); background: var(--card);
  border-radius: 7px; cursor: pointer; font-size: 13px; margin-left: 6px; }
.utable .uacts button:hover { border-color: var(--accent); color: var(--accent); }
.utable .uacts .danger { color: #b91c1c; border-color: #f3c6c6; }
.utable .uacts .danger:hover { border-color: #b91c1c; color: #b91c1c; background: #fef2f2; }
.utable .u-idcell { color: var(--muted); font-size: 12px; }
.utable .u-activity { font-size: 13px; color: var(--text); white-space: nowrap; }
.utable .u-activity.stale { color: #b45309; font-weight: 600; }
.stale-badge { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; color: #b45309;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.utable tr.stale-row td { background: #fffdf5; }
.utable tr.stale-row:hover td { background: #fef9e7; }
.utable tr.stale-row td:first-child { box-shadow: inset 3px 0 0 #d97706; }
.uempty { text-align: center; color: var(--muted); padding: 28px; }

.adduser-card { max-width: 100%; margin-top: 16px; }
.urow-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.urow-form input, .urow-form select { padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 14px; }
.urow-form input:focus, .urow-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.1); }
.urow-form .chk { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }

/* ===== Журнал изменений (аудит) ===== */
.audit-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.audit-filters input, .audit-filters select { padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 13px; background: #fff; }
.audit-filters #f_q { min-width: 220px; }
.audit-filters button { padding: 8px 14px; border: none; background: var(--accent); color: #fff;
  border-radius: 7px; cursor: pointer; font-size: 13px; }
.audit-filters button:hover { background: #095399; }
.audit-filters button.ghost { background: var(--card); color: var(--muted); border: 1px solid var(--line); }
.audit-filters button.ghost:hover { border-color: var(--accent); color: var(--ink); }
.audit-table td { vertical-align: top; }
.audit-table .a-ts { white-space: nowrap; color: var(--muted); font-size: 13px; }
.audit-table .a-detail { color: var(--ink); }
.a-badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.a-create { background: #ecfdf5; color: #166534; }
.a-update { background: #eff6ff; color: #1d4ed8; }
.a-delete { background: #fef2f2; color: #b91c1c; }
/* Просмотр — намеренно приглушённый: этих записей много, и они не должны
   перетягивать внимание с настоящих изменений. */
.a-view   { background: #f1f5f9; color: #64748b; }
.audit-more { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.audit-more #more { padding: 8px 14px; border: 1px solid var(--line); background: var(--card);
  border-radius: 7px; cursor: pointer; font-size: 13px; }
.audit-more #more:hover { border-color: var(--accent); }
.a-act { text-align: right; white-space: nowrap; }
.a-undo { padding: 5px 11px; border: 1px solid var(--line); background: var(--card);
  border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--accent); }
.a-undo:hover { border-color: var(--accent); background: #eff6ff; }
.a-undone { font-size: 12px; color: var(--muted); }
.audit-table tr.is-undone td { opacity: .5; }

/* ===== Люди ===== */
.people-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.people-top h1 { margin: 0; }
.filters { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.filters input[type=search] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; min-width: 200px; }
.filters select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; cursor: pointer; }
.filters .ghost { padding: 8px 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 8px; cursor: pointer; font-size: 13px; }
.filters .ghost:hover { border-color: var(--accent); color: var(--ink); }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 8px 10px; border-bottom: 2px solid var(--line); }
.ptable th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ptable th.sortable:hover { color: var(--accent); }
.ptable th.sortable::after { content: '↕'; opacity: .35; margin-left: 4px; font-size: 10px; }
.ptable th.sortable.asc::after { content: '▲'; opacity: 1; }
.ptable th.sortable.desc::after { content: '▼'; opacity: 1; }
.ptable td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ptable tbody tr:hover td { background: #f8fafc; }
.ptable .p-name { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.ptable .p-ent { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.ptable .p-city { width: 120px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
/* Подсветка незаполненных обязательных полей (ТОО/город) */
.ptable .missing { border-color: #f0b27a !important; background: #fff8ef; }
.ptable tr.row-inc td:first-child { box-shadow: inset 3px 0 0 #f0b27a; }
.miss-tag { font-size: 12px; color: #b45309; background: #fff8ef; border: 1px dashed #f0b27a;
  border-radius: 6px; padding: 1px 7px; }
.inc-badge { color: #b45309; font-weight: 600; }
.filters .chk { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ptable .p-proj { max-width: 280px; }
.ptable .proj-chip { display: inline-block; margin: 0 2px 3px 0; }
.ptable .asg { font-size: 13px; margin-bottom: 2px; }
.ptable .pacts { text-align: right; white-space: nowrap; }
.ptable .pacts .danger { padding: 5px 10px; border: 1px solid #f8b4b4; color: #b91c1c; background: var(--card); border-radius: 6px; cursor: pointer; font-size: 13px; }
.ptable .pr-name { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }

/* ===== Проекты / загрузка ===== */
.wl-pick { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.wl-pick input { padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; min-width: 280px; }
.loadbar { display: inline-block; width: 160px; height: 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px; overflow: hidden; vertical-align: middle; }
.loadbar-fill { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.loadbar-fill.full { background: #16a34a; }
.loadbar-fill.over { background: #dc2626; }
.alloc-list { margin-bottom: 12px; }
.alloc-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.alloc-name { flex: 1; }
.alloc-pct { width: 64px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; text-align: center; }
.alloc-del { border: none; background: none; color: #b91c1c; cursor: pointer; font-size: 13px; }
.alloc-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.alloc-add select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 14px; }
.alloc-add button { padding: 8px 12px; border: none; border-radius: 7px; background: var(--accent); color: #fff; cursor: pointer; font-size: 14px; }
.alloc-add button:hover { background: #095399; }

.card-node {
  box-sizing: border-box; width: 100%; height: 100%; padding: 10px 12px;
  background: #fff; border: 1px solid var(--line); border-top-width: 3px;
  border-radius: 8px; display: flex; flex-direction: column; gap: 5px;
  font: 13px/1.35 -apple-system, Segoe UI, Roboto, Arial, sans-serif; overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.card-node:hover { box-shadow: 0 4px 16px rgba(0,0,0,.11); border-color: #c5cfd8; }
.card-node.card-sel { background: #eef2ff; }
.card-head { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }
.card-name { font-weight: 700; color: var(--ink); font-size: 13px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ent { color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; }
.card-lead { display: flex; flex-direction: column; min-width: 0; }
.card-lead b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-lead span { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-lead.vacant b { color: #b45309; font-weight: 500; }
.card-bottom { margin-top: auto; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; }
.card-foot { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.card-foot .kind { overflow: hidden; text-overflow: ellipsis; }
.card-foot .hc { font-weight: 600; color: var(--accent); font-size: 12px; }
.card-foot .kind { color: var(--muted); font-size: 11px; }
.card-foot .vacb {
  font-size: 11px; font-weight: 700; color: #c2410c;
  background: #fff7ed; border: 1px solid #fed7aa;
  padding: 0px 5px; border-radius: 5px; flex-shrink: 0;
}
.card-fot { color: #166534; font-size: 11px; }
.card-fot-tax { display: block; color: #64748b; font-size: 10.5px; margin-top: 1px; }
.card-plan { color: #0f766e; font-size: 11px; margin-top: 1px; }
.card-plan b { color: var(--accent); }
.sal-tile-tax { font-size: 11px; color: #4f46e5; margin-top: 3px; }
/* Блок оплаты труда в карточке человека */
.pm-pay { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--bg); margin-bottom: 14px; }
.pm-pay-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 11px; font-size: 13px; }
.pm-pay-row + .pm-pay-row { border-top: 1px solid var(--line); }
.pm-pay-l { color: var(--muted); }
.pm-pay-v { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pm-pay-total { background: #eff6ff; }
.pm-pay-total .pm-pay-l { color: var(--accent); font-weight: 600; }
.pm-pay-total .pm-pay-v { color: var(--accent); font-size: 15px; font-weight: 800; }
.pm-pay-tax .pm-pay-l, .pm-pay-tax .pm-pay-v { color: #4f46e5; font-size: 12px; font-weight: 500; }
.pm-flex-in { display: inline-flex; align-items: center; gap: 6px; }
.pm-flex-in .pm-flex { width: 130px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-weight: 600; text-align: right; background: #fff; color: var(--ink); }
.pm-flex-in .pm-flex:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
.ent-badge { font-size: 11px; color: #fff; background: #7c3aed; padding: 1px 7px; border-radius: 8px; font-weight: 600; }
.card-node.dim { opacity: .35; }
/* Мини-шкала укомплектованности (факт / план штата) */
.hc-bar { height: 4px; background: #eef1f4; border-radius: 3px; overflow: hidden; }
.hc-fill { height: 100%; background: #f59e0b; border-radius: 3px; transition: width .3s, background .3s; }
.hc-fill.full { background: #16a34a; }
/* Бейдж «оклад не указан» — мягкое предупреждение, без блокировки */
.sal-warn { display: inline-block; font-size: 10px; color: #b45309; background: #fff7ed;
  border: 1px solid #fed7aa; padding: 0 6px; border-radius: 6px; font-weight: 600; white-space: nowrap; margin-left: 4px; }
.tb-ent { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.tb-ent select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }

/* ---- Отчёты по проектам ---- */
.rep-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 4px; }
.rep-head h1 { margin: 0; }
.rep-note { margin: 0 0 18px; font-size: 13px; }
.rep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.rep-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.rep-card.warn { background: #fff8ef; border-color: #f0b27a; }
.rep-card .rc-v { font-size: 22px; font-weight: 700; color: var(--ink); }
.rep-card.warn .rc-v { color: #b45309; }
.rep-card .rc-k { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rep-block { padding: 18px 20px; margin-bottom: 18px; }
.rep-block h2 { margin: 0 0 10px; }
.rep-block-head { display: flex; justify-content: space-between; align-items: baseline; }
.rep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px){ .rep-row { grid-template-columns: 1fr; } }
.rtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.rtable th, .rtable td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.rtable th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.rtable th.num, .rtable td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rtable tbody tr:hover { background: #f9fafb; }
.rtable tr.rp-sub:hover { background: transparent; }
.rtable tr.rp-sub > td { padding: 0; background: #f7f9fb; }
.rexp { border: none; background: none; cursor: pointer; color: var(--accent); font-size: 12px; padding: 0 4px 0 0; }
.rproj-link { color: var(--accent); cursor: pointer; border-bottom: 1px dashed rgba(11,107,203,.4); }
.rproj-link:hover { border-bottom-style: solid; }
.rxls { margin-left: 8px; font-size: 11px; padding: 2px 8px; border: 1px solid #16794233; border-radius: 6px;
  background: #f0fdf4; color: #15803d; cursor: pointer; vertical-align: middle; opacity: .7; transition: opacity .12s; }
.rp-main:hover .rxls { opacity: 1; }
.rxls:hover { background: #dcfce7; border-color: #15803d; }
.rsub { width: 100%; border-collapse: collapse; font-size: 13px; }
.rsub th, .rsub td { padding: 5px 10px; border-bottom: 1px solid #eef1f4; text-align: left; }
.rsub th { color: var(--muted); font-size: 11px; font-weight: 600; }
.rsub th:first-child, .rsub td:first-child { padding-left: 30px; }
.rsub th.num, .rsub td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit-link { color: var(--accent); text-decoration: none; border-bottom: 1px dashed rgba(11,107,203,.4); }
.unit-link:hover { border-bottom-style: solid; }

/* ── Разделы должностной инструкции в окне «Чем занимается» ── */
.jd-sec { border: 1px solid var(--line); border-radius: 9px; margin: 8px 0; background: #fff; }
.jd-sec > summary { cursor: pointer; padding: 8px 12px; font-size: 13px; font-weight: 600;
  list-style: none; user-select: none; }
.jd-sec > summary::-webkit-details-marker { display: none; }
.jd-sec > summary::before { content: '▸'; color: var(--muted); margin-right: 7px; font-weight: 400; }
.jd-sec[open] > summary::before { content: '▾'; }
.jd-sec > summary:hover { color: var(--accent); }
.jd-sec-b { padding: 0 12px 11px; }
.jd-sec-b textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.jd-gen { font-size: 13px; line-height: 1.7; }
.jd-gen b { font-weight: 600; }
.dm-tplrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 2px; }
.dm-tpl { border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer;
  padding: 5px 11px; font-size: 12px; font-family: inherit; color: var(--muted); }
.dm-tpl:hover { border-color: var(--accent); background: #f0f6ff; color: var(--accent); }
.dm-print { font-size: 12.5px; text-decoration: none; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; }
.dm-print:hover { border-color: var(--accent); color: var(--accent); background: #f0f6ff; }
.dm-vers { padding: 2px 0; }
.dm-ver { display: flex; gap: 9px; align-items: baseline; padding: 3px 0; font-size: 12.5px; }
.dm-ver a { font-weight: 600; color: var(--accent); text-decoration: none; }
.dm-ver a:hover { text-decoration: underline; }
.dm-ver-ok { font-size: 11.5px; color: #15803d; margin-top: 4px; }
.dm-ver-new { font-size: 11.5px; color: #b45309; margin-top: 4px; }
.dm-export { border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer;
  padding: 7px 12px; font-size: 12.5px; font-family: inherit; color: var(--muted); }
.dm-export:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: #f0f6ff; }
.dm-export:disabled { opacity: .55; cursor: default; }
/* Шаблоны ДИ в настройках */
.jd-tpl-row { margin-bottom: 14px; }
.jd-tpl-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.jd-tpl-row label .muted { display: block; font-weight: 400; font-size: 11.5px; margin-top: 1px; }
.jd-tpl-row textarea, .jd-tpl-row input { width: 100%; box-sizing: border-box; font: inherit;
  font-size: 12.5px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; resize: vertical; }
.jd-badge { font-size: 10.5px; font-weight: 600; border-radius: 9px; padding: 1px 7px;
  color: var(--muted); background: #f1f5f9; }
.jd-badge.on { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; }
.jd-req label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.jd-req label .muted { font-weight: 400; }
.jd-req input { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; margin-top: 3px; }
.dm-ver a + a { margin-left: 4px; }
.rp-total td { border-top: 2px solid var(--line); border-bottom: none; padding-top: 12px;
  font-weight: 700; font-size: 13.5px; }
.rp-total-note td { border-bottom: none; padding-top: 2px; font-size: 12.5px;
  color: var(--muted); font-weight: 400; }
.ud-sub2 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); margin: 10px 0 4px; }
/* ── Единая лента активности пользователя ── */
.tl-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; }
.tl-f { padding: 3px 11px; border: 1px solid var(--line); background: #fff; border-radius: 20px;
  font-size: 11.5px; cursor: pointer; color: var(--muted); font-family: inherit; }
.tl-f:hover { border-color: var(--accent); color: var(--accent); }
.tl-f.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tl-list { max-height: 420px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; background: #fff; }
.tl-sum { font-size: 11px; margin-bottom: 6px; }
.tl-day { font-size: 11px; font-weight: 700; color: var(--muted); margin: 8px 0 3px;
  position: sticky; top: -8px; background: #fff; padding: 2px 0; }
.tl-day:first-of-type { margin-top: 0; }
.tl-i { display: grid; grid-template-columns: 18px 92px 128px 1fr; gap: 8px; align-items: baseline;
  padding: 3px 0; font-size: 12px; border-top: 1px dashed var(--line); }
.tl-i:first-of-type { border-top: none; }
.tl-ic { font-size: 11px; }
.tl-t { color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-a { font-weight: 600; }
.tl-d { color: var(--ink); overflow-wrap: anywhere; }
.tl-x { color: var(--muted); font-size: 11px; }
.tl-view .tl-a { color: #475569; font-weight: 500; }
.tl-change .tl-a { color: #1d4ed8; }
.tl-login .tl-a { color: #15803d; }
.tl-denied .tl-a { color: #b91c1c; }
.f-views { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  color: var(--muted); white-space: nowrap; cursor: pointer; }
.f-views input { cursor: pointer; }
/* Пояснение при открытии панели с вакантной ставки */
.vac-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px;
  padding: 10px 12px; margin: 10px 0 12px; font-size: 12.5px; line-height: 1.55; color: #78350f; }
.vac-note b { color: #92400e; }
.vac-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.vac-cut { border: 1px solid #fca5a5; background: #fff; color: #b91c1c; border-radius: 8px;
  padding: 6px 12px; font-size: 12.5px; font-family: inherit; cursor: pointer; }
.vac-cut:hover { background: #fef2f2; border-color: #b91c1c; }