/* opentask — личные кабинеты координатора и заказчика.
   Токены цвета/шрифта скопированы из website/assets/css/style.css
   для единого визуального языка компании; --primary заменён на
   --primary-dark в роли текста/кнопок — так пара с белым/светлым фоном
   проходит контраст 4.5:1 (в маркетинговом --primary используется на
   крупных элементах, где действует более мягкий порог 3:1).

   Структура страниц — дизайн «Наряд» (ADR 0016). Четыре типа страниц:
   карточка (заголовок, сводка, вкладки, блоки сеткой), список (фильтры
   и таблица в одном блоке), финансовый документ и форма. */

:root {
  --ink: #16233a;
  --ink-soft: #384258;
  --muted: #5b6577;
  --line: #dbe6f2;
  --line-strong: #c3d3e4;
  --line-soft: #e9f0f8;
  --bg: #f4f8fc;
  --bg-soft: #eaf1f9;
  --surface: #ffffff;
  --navy: #165389;
  --primary-dark: #0f6fae;
  --primary-tint: #dcebee;
  --danger: #d1414a;
  --danger-tint: #fbe9ea;
  --ok: #1a8f5e;
  --ok-dark: #17703f;
  --ok-tint: #e8f7ef;
  --warn: #92600a;
  --warn-tint: #fdf3e0;
  --accent: #6b4fa1;
  --accent-tint: #ede7f6;

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Unbounded', 'Manrope', sans-serif;
  --radius-sm: 10px;
  --radius: 14px;
  --btn-radius: 10px;
  --shadow-sm: 0 1px 2px rgba(13, 37, 68, .05);
  --shadow: 0 8px 24px rgba(13, 37, 68, .12);
  --container: 1240px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

/* Unbounded — только в логотипе: в заголовках длинных русских тем он
   слишком широк и плохо читается. */
h1, h2, h3 {
  font-family: var(--font);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 16px;
}

h1 { font-size: 24px; }
h2 { font-size: 18px; margin-top: 32px; }

a {
  color: var(--primary-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

.muted {
  color: var(--muted);
}

/* Шапка сайта */

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px 22px;
  flex-wrap: wrap;
  min-height: 60px;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-logo {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink-soft);
  margin-right: 12px;
}

.site-logo:hover {
  text-decoration: none;
}

.site-logo-accent {
  color: var(--primary-dark);
}

.site-nav-menu {
  display: flex;
  align-items: center;
  gap: 0 22px;
  flex-wrap: wrap;
  flex: 1;
}

.site-nav-menu > a,
.site-nav-user > .nav-settings {
  padding: 18px 2px;
  color: var(--ink-soft);
  font-weight: 600;
  cursor: pointer;
}

.site-nav-menu > a:hover,
.site-nav-user > .nav-settings:hover {
  color: var(--primary-dark);
  text-decoration: none;
}

.site-nav-menu > a.active,
.site-nav-user > .nav-settings.active {
  color: var(--primary-dark);
  box-shadow: inset 0 -2px 0 var(--primary-dark);
}

.site-nav-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* «Настройки» — справочники и контрагенты (ADR 0024): шестерёнка справа, перед
   уведомлениями; подпись — только для экранного диктора и во всплывающей подсказке */
.site-nav-user > .nav-settings {
  display: inline-flex;
  align-items: center;
  padding-left: 6px;
  padding-right: 6px;
}

.nav-sep {
  width: 1px;
  height: 22px;
  background: var(--line);
}

.site-nav .nav-user {
  color: var(--ink-soft);
  font-weight: 600;
}

.site-nav form {
  margin: 0;
}

/* Всплывающие панели действий — нативный <details>; закрытие по клику
   вне и по Escape — в app.js. */

.menu {
  position: relative;
}

.menu > summary {
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu-panel {
  position: absolute;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.menu-panel {
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
}

/* Несколько действий справа в заголовке блока */
.panel-h-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Широкая панель со списком для выбора (привязка платежей, заметка) */
.menu-panel-wide {
  width: 520px;
  max-height: 60vh;
  overflow-y: auto;
}

.menu-panel-wide form + form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.menu-title {
  margin: 0 0 8px;
  font-weight: 600;
}

.menu-panel-wide textarea {
  width: 100%;
}

/* Вкладки в заголовке блока — без собственной линии и отступов */
.panel-h .tabs-in-panel {
  margin: -12px 0 -13px -8px;
  box-shadow: none;
}

.menu-panel label {
  margin-top: 12px;
}

.menu-panel label:first-of-type {
  margin-top: 0;
}

.menu-panel .btn {
  margin-top: 14px;
}

/* Действие в заголовке блока, оформленное ссылкой: <summary> или <button> */
.menu-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font);
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.menu-link:hover {
  text-decoration: underline;
}

/* Отрицательная сумма (остаток аванса посредника ушёл в минус) */
.text-danger { color: var(--danger); }

/* «Изменить» и «В архив» в одной ячейке строки — не сливаться в одну фразу */
td > a + .inline-form {
  margin-left: 14px;
}

/* Контейнер страницы и её заголовок */

.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 28px 48px;
}

.crumbs {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.page-head h1 {
  margin: 0;
}

.page-sub {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: var(--muted);
}

.page-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Сводка: главные факты карточки одной строкой */

.summary {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.summary > div {
  min-width: 0;
  padding: 14px 20px;
  border-left: 1px solid var(--line);
}

.summary > div:first-child {
  border-left: 0;
}

.summary dt {
  color: var(--muted);
  font-size: 13px;
}

.summary dd {
  margin: 2px 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Вкладки: ссылки (разделы — отдельные страницы) и кнопки .tab
   (панели на одной странице, переключает app.js) */

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  overflow-x: auto;
  box-shadow: inset 0 -1px 0 var(--line);
}

.tabs > a,
.tabs > span,
.tabs > .tab {
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

.tabs > a:hover,
.tabs > .tab:hover {
  color: var(--ink);
  text-decoration: none;
}

.tabs > a.active,
.tabs > .tab.active {
  color: var(--primary-dark);
  border-bottom-color: var(--primary-dark);
}

.tabs > span {
  opacity: .5;
  cursor: default;
}

.tab-count {
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 12px;
}

.panel + [data-tabs] {
  margin-top: 16px;
}

/* Вкладки-фильтры внутри блока (статусы счетов) — без внешнего отступа */
.panel > .tabs-sub {
  margin: 0;
  padding: 0 12px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.tabpanel[hidden] {
  display: none;
}

/* Без JavaScript панели идут подряд — им нужен отступ друг от друга */
.tabpanel + .tabpanel {
  margin-top: 16px;
}

/* Блоки и сетка блоков */

.panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.panel + .panel {
  margin-top: 16px;
}

.panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}

.panel-h h2 {
  margin: 0;
  font-size: 15px;
}

/* Действие-ссылка рядом со значением (под значением), а не в заголовке
   блока; всплывающая панель раскрывается вправо от ссылки */
.menu-inline {
  display: block;
  margin-top: 2px;
}

.menu-inline > .menu-link {
  font-size: 13px;
  font-weight: 500;
}

.menu-inline > .menu-panel {
  left: 0;
  right: auto;
}

.panel-b {
  padding: 18px 20px;
}

.panel-b > p {
  margin: 0 0 8px;
}

.panel-b > p:last-child {
  margin-bottom: 0;
}

.panel-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

.panel-b + .table-wrap {
  border-top: 1px solid var(--line);
}

/* Форма в нижней части блока (новый комментарий, загрузка файла) */
.panel-form {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

.panel-form label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--muted);
}

.panel-form textarea {
  display: block;
  max-width: 720px;
}

.panel-form > .btn {
  margin-top: 10px;
}

/* Форма в начале блока (новый комментарий над лентой) — черта снизу, а не сверху */
.panel-form-top {
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

/* Действие под блоком, не входящее в него */
.panel-after {
  margin-top: 12px;
}

.panel-foot > details[open] {
  flex-basis: 100%;
}

.panel-foot .add-item,
.panel-foot .add-item + .add-item {
  margin-top: 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cards > .panel {
  margin-top: 0;
}

.cards > .span2 {
  grid-column: span 2;
}

/* Несколько блоков друг под другом в одной ячейке сетки */
.cards > .stack {
  display: grid;
  gap: 16px;
  align-content: start;
}

.cards > .stack > .panel {
  margin-top: 0;
}

.cards + .panel,
.panel-after-cards {
  margin-top: 16px;
}

/* Скрытые поля формы в подвале блока не должны занимать место */
.panel-foot p:empty {
  display: none;
}

/* Пара «подпись — значение»: подпись над значением, приглушённая и
   мельче — так они не сливаются. */

.kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0;
}

.kv dt {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 13px;
}

.kv dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.kv .wide {
  grid-column: 1 / -1;
}

.kv-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.panel-h form {
  margin: 0;
}


.kv .empty {
  color: var(--muted);
  font-weight: 400;
}

.prose {
  max-width: 72ch;
  overflow-wrap: anywhere;
}

.prose h3 {
  margin: 16px 0 4px;
  font-size: 15px;
  color: var(--ink);
}

/* Кнопки */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

.btn-primary:hover {
  background: var(--navy);
  border-color: var(--navy);
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink-soft);
  border-color: var(--line-strong);
}

.btn-secondary:hover {
  border-color: var(--primary-dark);
  color: var(--primary-dark);
}

.btn-danger {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--line-strong);
}

.btn-danger:hover {
  border-color: var(--danger);
}

.btn-sm {
  min-height: 32px;
  padding: 0 10px;
  font-size: 14px;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Формы */

form p {
  margin: 0 0 16px;
}

form label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink-soft);
}

.field > label,
.field > .field-label,
.menu-panel label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--muted);
}

input[type="text"],
input[type="search"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  max-width: 480px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
}

textarea {
  min-height: 90px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-dark);
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-tint);
}

.errorlist {
  list-style: none;
  margin: 4px 0 0;
  padding: 8px 12px;
  background: var(--danger-tint);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
}

.helptext {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

p.helptext {
  max-width: 72ch;
  margin: 10px 0 0;
}

.page-actions form {
  margin: 0;
}

.page form p:has(> input:required) > label::after,
.page form p:has(> textarea:required) > label::after,
.page form p:has(> select:required) > label::after {
  content: " *";
  color: var(--danger);
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 560px;
  box-shadow: var(--shadow-sm);
}

.form-card > label {
  margin-top: 16px;
}

.form-card > label:first-of-type {
  margin-top: 0;
}

.form-card > .btn {
  margin-top: 8px;
}

.action-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Форма в блоке: поля сеткой в две колонки, длинные — на всю ширину
   (templates/_form_fields.html) */

.form-panel {
  max-width: 860px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

/* В узком блоке сетки карточек поля формы идут в одну колонку */
.cards > .panel:not(.span2) .form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.form-grid + .form-grid {
  margin-top: 16px;
}

select:disabled {
  color: var(--muted);
  background: var(--bg-soft);
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  max-width: none;
}

.field .req {
  color: var(--danger);
}

.field > label.check,
label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.check-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.check-list legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Страница входа: узкая форма по центру */
.login {
  max-width: 400px;
  margin: 48px auto 0;
}

.login .field + .field {
  margin-top: 16px;
}

.login input {
  max-width: none;
}

/* Флажки, сгруппированные по узлам справочника (CheckboxSelectMultiple
   с optgroup): узел — заголовок группы, элементы — с отступом */
.check-tree > div {
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.check-tree > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.check-tree > div > label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--navy);
}

.check-tree > div > div {
  margin: 4px 0 4px 16px;
}

.check-tree > div > div > label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  color: var(--ink);
}

/* Плоский список флажков (без групп) и простой список ссылок в блоке */
.check-list-plain > div {
  margin: 6px 0;
}

.check-list-plain label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  color: var(--ink);
}

.plain-list {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 32px;
}

.plain-list li {
  margin: 2px 0;
  break-inside: avoid;
}

.plain-list-single {
  columns: 1;
}

/* Флажки регионов — в несколько колонок, список длинный */
.check-columns {
  columns: 3;
  column-gap: 24px;
}

.check-columns > div {
  break-inside: avoid;
}

.sub {
  margin: 14px 0 4px;
  font-size: 15px;
  font-weight: 700;
}

/* Короткая форма в одну строку: поле и кнопка рядом */
.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

.inline-form .field {
  min-width: 0;
}

.inline-form input,
.inline-form select {
  max-width: 320px;
}

/* Выбор нескольких значений: кнопка, похожая на <select>, раскрывает
   список флажков. Подпись на кнопке обновляет app.js. */

.select-like {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.select-like > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Выбор с поиском, пока недоступен (сначала выберите клиента/филиал) */
.select-like-disabled { color: var(--muted); background: var(--bg-soft); cursor: not-allowed; }

.select-like::after {
  content: "▾";
  color: var(--muted);
}

.multiselect .menu-panel {
  left: 0;
  right: auto;
  width: 260px;
  padding: 12px 14px;
}

.multiselect .menu-panel label.check {
  margin: 0;
}

/* Выбор с поиском (контрагенты подрядчика, фильтр по инженеру): поле
   поиска над прокручиваемым списком; под названием варианта — приписка
   (ИНН, подрядчик). Неподходящие поиску варианты прячет app.js */
.multiselect.picker > .menu-panel {
  width: 100%;
  min-width: 320px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 0;
}

.picker-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.picker-options {
  display: grid;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}

.multiselect .picker-options label.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 1px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}

.picker-options label.check:hover {
  background: var(--bg-soft);
}

.picker-options label.check > input {
  grid-row: span 2;
}

.picker-options label.check > small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.multiselect .picker-options label[hidden],
.picker-inline .picker-options label[hidden],
.picker-empty[hidden] {
  display: none;
}

/* Поиск и список прямо в панели действия (привязка платежа к счёту): список повыше, со своей прокруткой */
.picker-inline .picker-search { width: 100%; margin-bottom: 8px; }
.picker-inline .picker-options { max-height: 320px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.picker-inline .picker-options label.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: 6px 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}
.picker-inline .picker-options label.check > input { grid-row: span 2; }
.picker-inline .picker-options label.check > small { grid-column: 2; color: var(--muted); font-size: 12px; font-weight: 500; }
.picker-inline .picker-options label.check:hover { background: var(--bg-soft); }

.picker-empty {
  margin: 6px 8px;
  color: var(--muted);
  font-size: 14px;
}

/* Выбор в выпадающей панели — во всю её ширину (длинные варианты не растягивают панель) */
.menu-panel select { width: 100%; }

/* Фильтры списка: одна строка в шапке блока с таблицей */

.filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.filters .field {
  flex: 1 1 160px;
  min-width: 0;
}

.filters .field-wide {
  flex: 2 1 240px;
}

.filters .field-range {
  flex: 2 1 300px;
  max-width: 340px;
}

.filters input,
.filters select,
.menu-panel input,
.menu-panel select,
.menu-panel textarea {
  max-width: none;
}

.field-range > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.filters input,
.filters select {
  min-width: 0;
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.add-item {
  margin-top: 16px;
}

.add-item + .add-item {
  margin-top: 12px;
}

.add-item summary {
  list-style: none;
  cursor: pointer;
}

.add-item summary::-webkit-details-marker {
  display: none;
}

.add-item[open] summary {
  margin-bottom: 12px;
}

/* Таблицы. Обычно таблица лежит в .panel, и рамку даёт блок; вне блока
   .table-wrap сама выглядит карточкой. */

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.panel .table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.panel > .table-wrap:first-child,
.panel > :first-child > .table-wrap:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.panel > .table-wrap:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 11px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

/* В блоке крайние ячейки выравниваются по его внутреннему отступу */
.panel th:first-child,
.panel td:first-child {
  padding-left: 20px;
}

.panel th:last-child,
.panel td:last-child {
  padding-right: 20px;
}

/* Главный столбец списка (тема, название) не сжимается до столбика слов */
.col-main {
  min-width: 200px;
}

.col-wide {
  min-width: 170px;
}

td.nowrap {
  white-space: nowrap;
}

/* Длинный текст в ячейке списка — не больше двух строк, чтобы строки
   таблицы оставались одной высоты */
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  /* иначе длинное слово (ссылка, артикул) распирает столбец */
  overflow-wrap: anywhere;
}

/* Справочник деревом: строка-узел выделена, элементы под ней с отступом */
.tree-node td {
  font-weight: 700;
  color: var(--navy);
  background: var(--bg);
}

.tree-leaf td:first-child {
  padding-left: 44px;
}

.is-removed td {
  color: var(--muted);
}

.is-removed .badge {
  margin-left: 8px;
}

/* Вторая строка ячейки — уточнение к значению (филиал под клиентом) */
.cell-sub {
  color: var(--muted);
  font-size: 13px;
}

.cell-sub .badge {
  margin-top: 4px;
}

tbody tr {
  border-bottom: 1px solid var(--line-soft);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--bg);
}

tfoot td {
  font-weight: 700;
  border-top: 1px solid var(--line-strong);
}

/* Числа и суммы — по правому краю, цифры одной ширины */
th.num,
td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.list-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.list-foot p {
  margin: 0;
}

.list-foot .pagination {
  padding: 0;
}

/* Статус-бейджи — цвет никогда не единственный носитель смысла,
   текст статуса всегда присутствует рядом с цветом. Базовый вид —
   нейтральный: его получают статусы без собственного цвета. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* В таблицах длинный код решения («Отменено клиентом») переносится,
   иначе он один задаёт ширину столбца «Статус» */
td .cell-sub .badge {
  white-space: normal;
  text-align: left;
}

.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.badge-assigned,
.badge-issued { background: var(--primary-tint); color: var(--primary-dark); }
.badge-in_progress,
.badge-awaiting_payment { background: var(--warn-tint); color: var(--warn); }
.badge-done,
.badge-approved,
.badge-resolved,
.badge-advanced,
.badge-paid { background: var(--ok-tint); color: var(--ok-dark); }
.badge-closed,
.badge-cancelled_by_client { background: var(--line); color: var(--ink-soft); }
.badge-cancelled,
.badge-rejected { background: var(--danger-tint); color: var(--danger); }
.badge-on_approval { background: var(--accent-tint); color: var(--accent); }
.badge-in_payment,
.badge-sent { background: var(--primary-tint); color: var(--primary-dark); }
.badge-prepared { background: var(--warn-tint); color: var(--warn); }

/* Таблица выбора заявок в счёт подрядчика */

.select-table td:first-child,
.select-table th:first-child {
  width: 32px;
}

.select-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* Реквизиты контрагента — список счетов с действиями справа */

.accounts-list,
.plain-list.accounts-list {
  columns: 1;
  padding-left: 0;
  list-style: none;
}

.accounts-list .account-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.accounts-list .account-row > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.accounts-list .account-row > form {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
}

.accounts-list .account-row:last-child {
  border-bottom: 0;
}

.accounts-list .is-removed strong {
  color: var(--ink-soft);
  text-decoration: line-through;
}

/* Пагинация */

.pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  color: var(--muted);
  font-size: 14px;
}

.pagination a {
  font-weight: 700;
}

/* Комментарии */

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

.panel .comment-list {
  gap: 0;
  margin-bottom: 0;
}

.panel .comment {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  overflow-wrap: anywhere;
}

.panel .comment:first-child {
  padding-top: 0;
}

.panel .comment:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.comment-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}

.comment-author {
  margin-right: 6px;
  font-weight: 700;
  color: var(--ink-soft);
}

.comment-empty {
  color: var(--muted);
  font-style: italic;
}

/* Метки комментария: приватный и инженерный выделены полосой слева */
.comment-meta .badge {
  margin-left: 6px;
  font-size: 12px;
  padding: 1px 8px;
}

.badge-private { background: var(--warn-tint); color: var(--warn); }
.badge-engineer { background: var(--accent-tint); color: var(--accent); }

.panel .comment-private,
.panel .comment-engineer {
  padding-left: 12px;
  border-left: 3px solid var(--warn);
}

.panel .comment-engineer {
  border-left-color: var(--accent);
}

.comment-action {
  display: inline;
  margin-left: 8px;
}

.comment-action .menu-link {
  font-size: 13px;
  font-weight: 500;
}

/* Оценка 1–5: текстовые звёзды и форма из пяти кнопок-звёзд */
.stars {
  color: var(--warn);
  letter-spacing: 1px;
}

.rate-form {
  display: inline-flex;
  gap: 2px;
  margin: 0 6px 0 0;
  vertical-align: middle;
}

.rate-star {
  padding: 0 2px;
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--line-strong);
  cursor: pointer;
}

.rate-star.is-on,
.rate-form:hover .rate-star {
  color: var(--warn);
}

.rate-star:hover ~ .rate-star {
  color: var(--line-strong);
}

/* Вложения: миниатюры фото */
.attachments .thumb-cell {
  width: 64px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.attachments .thumb {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.small {
  font-size: 13px;
  margin: 8px 0 0;
}

/* Модальное окно (<dialog>): шапка, вкладки, подвал с действиями */
.dialog {
  width: min(92vw, 820px);
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
}

.dialog::backdrop {
  background: rgba(16, 30, 50, .45);
}

.dialog-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.dialog-h h2 {
  margin: 0;
  font-size: 17px;
}

.dialog-close {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.dialog-tabs > .tabs {
  margin: 0;
  padding: 0 20px;
}

.dialog-tabs > .tabpanel + .tabpanel {
  margin-top: 0;
}

.dialog-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}

.dialog-foot .btn + .btn {
  margin: 0;
}

.field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.field-inline input {
  width: 110px;
  min-height: 36px;
}

/* Каталог прайс-листа в окне */
.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}

.catalog-toolbar input,
.catalog-toolbar select {
  max-width: none;
  min-height: 38px;
}

.catalog-list {
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px 0;
}

.catalog-group-title {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 8px 20px;
  background: var(--bg-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.catalog-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 48px 100px 100px;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}

.catalog-row:hover {
  background: var(--primary-tint);
}

.catalog-row:has(input:checked) {
  background: var(--primary-tint);
  box-shadow: inset 3px 0 0 var(--primary-dark);
}

.catalog-row[hidden],
.catalog-group[hidden] {
  display: none;  /* display: grid/block выше перебил бы атрибут hidden */
}

.catalog-row input {
  margin: 0;
}

.catalog-name {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.catalog-unit {
  font-size: 13px;
  color: var(--muted);
}

.catalog-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.catalog-empty {
  padding: 16px 20px;
}

@media (max-width: 720px) {
  .catalog-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-row {
    grid-template-columns: 20px minmax(0, 1fr) 90px;
  }

  .catalog-unit,
  .catalog-price.muted {
    display: none;
  }
}

/* Архив внутри блока: <details> без перезагрузки страницы */
.archive > summary {
  list-style: none;
  cursor: pointer;
}

.archive > summary::-webkit-details-marker {
  display: none;
}

.archive[open] > .archive-toggle .menu-link::after {
  content: " ▴";
}

.archive:not([open]) > .archive-toggle .menu-link::after {
  content: " ▾";
}

/* График выручки (SVG без скриптов) */
.chart-wrap {
  overflow-x: auto;
}

.chart {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  font-family: var(--font);
}

.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-label {
  fill: var(--muted);
  font-size: 12px;
}

.chart-label-y {
  text-anchor: end;
}

.chart-label-x {
  text-anchor: middle;
}

.chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-line-revenue,
.chart-dot-revenue { stroke: var(--primary-dark); }
.chart-dot-revenue { fill: var(--surface); stroke-width: 2.5; }
.chart-line-contractor,
.chart-dot-contractor { stroke: var(--warn); }
.chart-dot-contractor { fill: var(--surface); stroke-width: 2.5; }

.chart-legend {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
}

.chart-legend span::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 2px;
}

.legend-revenue::before { background: var(--primary-dark); }
.legend-contractor::before { background: var(--warn); }

.total-row td {
  font-weight: 700;
  border-top: 1px solid var(--line-strong);
}

/* Флажки под полем формы в одну строку */
.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 10px 0 0;
}

.check-row label.check {
  font-size: 14px;
}

/* Сообщения */

.messages {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.message {
  padding: 10px 16px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  background: var(--ok-tint);
  color: var(--ok-dark);
  font-weight: 600;
}

.message-error {
  background: var(--danger-tint);
  color: var(--danger);
}

/* Подсветка непрочитанных уведомлений */

.has-unread-notification {
  background: var(--accent-tint);
}

/* Колокольчик уведомлений */

.notification-bell {
  position: relative;
}

.btn-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
}

.btn-bell:hover {
  background: var(--bg-soft);
}

.badge-unread {
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  vertical-align: top;
}

.notification-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 100;
}

.notification-bell.open .notification-dropdown {
  display: block;
}

.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notification-list li.unread {
  background: var(--accent-tint);
}

.notification-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--font);
}

.notification-title {
  display: block;
  font-weight: 700;
  color: var(--ink);
}

.notification-body {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
}

/* Адаптив */

@media (max-width: 1000px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kv-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .site-nav {
    padding: 0 16px;
  }

  .site-nav-menu {
    order: 3;
    flex-basis: 100%;
    border-top: 1px solid var(--line-soft);
  }

  .site-nav-menu > a,
  .site-nav-user > .nav-settings {
    padding: 12px 2px;
  }

  .site-nav-user {
    margin-left: auto;
  }

  .nav-sep {
    display: none;
  }

  .page {
    padding: 16px 16px 40px;
  }

  h1 {
    font-size: 20px;
  }

  .page-head {
    flex-direction: column;
    gap: 12px;
  }

  .page-actions {
    justify-content: flex-start;
  }

  .menu-panel {
    right: auto;
    left: 0;
  }

  .panel-h .menu-panel {
    left: auto;
    right: 0;
  }

  .summary {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary > div {
    padding: 10px 14px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .summary > div:nth-child(-n+2) {
    border-top: 0;
  }

  .summary > div:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .summary > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* В правой колонке сводки панель действия раскрывается влево, в экран */
  .summary > div:nth-child(even) .menu-inline > .menu-panel {
    left: auto;
    right: 0;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cards > .span2 {
    grid-column: auto;
  }

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

  .check-columns {
    columns: 1;
  }

  .panel-h {
    padding: 10px 14px;
  }

  .panel-b,
  .panel-foot,
  .filters {
    padding: 14px;
  }

  .form-card {
    padding: 16px;
  }
}

/* На сенсорных экранах цель нажатия — не меньше 44px, а поля — 16px,
   чтобы iOS не увеличивал страницу при фокусе. */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }

  input[type="text"],
  input[type="search"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
}

/* Трудозатраты и загрузка сотрудников */

.worklog-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.workload-chart {
  width: 100%;
  height: auto;
}

.workload-norm {
  stroke: var(--danger);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.workload-bar.series-0, .workload-legend.series-0::before { fill: var(--primary-dark); background: var(--primary-dark); }
.workload-bar.series-1, .workload-legend.series-1::before { fill: var(--accent); background: var(--accent); }
.workload-bar.series-2, .workload-legend.series-2::before { fill: var(--ok); background: var(--ok); }
.workload-bar.series-3, .workload-legend.series-3::before { fill: var(--warn); background: var(--warn); }
.workload-bar.series-4, .workload-legend.series-4::before { fill: #3f8fb8; background: #3f8fb8; }
.workload-bar.series-5, .workload-legend.series-5::before { fill: #8a8f98; background: #8a8f98; }

.workload-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
}

.workload-legend::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.load-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-weight: 600;
}

.load-pill.is-over { background: var(--danger-tint); color: var(--danger); }
.load-pill.is-low { background: var(--line); color: var(--ink-soft); }

.workload-days td.is-full { color: var(--ok-dark); font-weight: 700; }
.workload-days th, .workload-days td { padding-left: 6px; padding-right: 6px; }

/* Отчёт по оценкам */

.rating-cards {
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.rating-summary h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.rating-big {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
}

.rating-big .muted {
  font-size: 14px;
  font-weight: 400;
}

.rating-bar-row {
  display: grid;
  grid-template-columns: 32px 1fr 96px;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}

.rating-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--bg-soft);
  overflow: hidden;
}

.rating-bar-fill {
  display: block;
  height: 100%;
  background: var(--primary-dark);
}

.rating-bar-fill.kind-internal { background: var(--accent); }
.rating-bar-count { text-align: right; }

.rating-pill {
  display: inline-block;
  min-width: 40px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-weight: 600;
  text-align: center;
}

.rating-pill.is-low { background: var(--danger-tint); color: var(--danger); }
.rating-pill.is-high { background: var(--ok-tint); color: var(--ok-dark); }

.cards.cards-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .cards.cards-2 { grid-template-columns: 1fr; }
}




/* История заявки: ход по этапам + лента событий */

.history {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .history { grid-template-columns: 1fr; }
}

.stage-list,
.event-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-list { padding: 16px 20px 4px; }

.stage {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 16px;
}

.stage::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.stage:last-child::before { display: none; }
.stage.is-done::before,
.stage.is-implied::before { background: var(--primary-dark); }
.stage.is-implied .stage-dot { background: var(--primary-tint); border-color: var(--primary-dark); }

.stage-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--line);
  background: var(--surface);
}

.stage.is-done .stage-dot { background: var(--primary-dark); border-color: var(--primary-dark); }
.stage.is-current .stage-dot { border-color: var(--primary-dark); box-shadow: 0 0 0 4px var(--primary-tint); }
.stage.is-cancelled.is-done .stage-dot,
.stage.is-cancelled.is-current .stage-dot { background: var(--danger); border-color: var(--danger); }
.stage.is-future { color: var(--muted); }
.stage.is-future .stage-name { font-weight: 600; }
.stage.is-branch { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.stage:nth-last-child(2)::before { display: none; }   /* «Закрыта» не ведёт к «Отменена» */
.stage-now { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 6px; background: var(--primary-tint); color: var(--primary-dark); }
.stage-back { font-size: 11px; font-weight: 700; color: var(--warn); }

.stage-name { font-weight: 700; font-size: 14px; }
.stage-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stage-meta b { color: var(--ink); font-weight: 700; }

.stage-subs {
  display: grid;
  gap: 2px;
  margin: 6px 0 0;
  padding: 0 0 0 10px;
  list-style: none;
  border-left: 2px dashed var(--line);
  font-size: 12px;
  color: var(--muted);
}

.stage-subs .is-future { opacity: .7; }
.stage-subs .is-done { color: var(--ink); }
.stage-subs .is-current { color: var(--warn); font-weight: 700; }
.stage-subs span { color: var(--muted); font-weight: 400; }

.history-note {
  margin: 0;
  padding: 0 20px 16px;
  font-size: 12px;
}

.history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}

.chip-filter {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.chip-filter small { color: var(--muted); font-weight: 500; }
.chip-filter[aria-pressed="true"] { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.chip-filter[aria-pressed="true"] small { color: inherit; opacity: .8; }

.event-list { padding: 4px 20px 16px; }

.event-day {
  padding: 12px 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.event {
  display: grid;
  grid-template-columns: 44px 12px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  align-items: start;
}

.event-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }

.event-mark {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--line);
}

.group-status .event-mark { background: var(--primary-dark); }
.group-people .event-mark { background: var(--accent); }
.group-estimate .event-mark { background: #3f8fb8; }
.group-comment .event-mark { background: var(--muted); }
.group-money .event-mark { background: var(--warn); }
.tone-ok .event-mark { background: var(--ok); }
.tone-danger .event-mark { background: var(--danger); }

.event-title { font-weight: 600; font-size: 14px; }
.event-detail { font-size: 13px; color: var(--ink-soft, var(--muted)); overflow-wrap: anywhere; }
.event-actor { font-size: 12px; color: var(--muted); }

.event-source {
  font-size: 11px;
  font-weight: 600;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--line);
  color: var(--muted);
}

.event[hidden], .event-day[hidden] { display: none; }
.event-empty { padding: 16px 0; color: var(--muted); }

.history > .panel { margin: 0; }

/* «Ищем мастера» — заметная подсказка заказчику, что заявка в работе у диспетчера */
.badge-searching { background: var(--warn-tint); color: var(--warn); }

/* Прайс-лист (ADR 0024): позиции по категориям, правка в строке, цены списком */
.price-table td { vertical-align: middle; }
.price-table .group-row td { background: var(--bg-soft); color: var(--ink-soft); font-size: 13px; font-weight: 700; padding-top: 8px; padding-bottom: 8px; }
.price-table .group-row small { margin-left: 6px; color: var(--muted); font-weight: 600; }
.cell-input, .cell-select { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; color: var(--ink); }
td.num .cell-input { max-width: 120px; text-align: right; }
.cell-actions { width: 1%; text-align: right; white-space: nowrap; }
.cell-actions .menu-panel { white-space: normal; text-align: left; }  /* панель действия переносит текст, хотя ячейка — нет */
.cell-actions .btn + .btn, .cell-actions > * + * { margin-left: 6px; }
.cell-actions .inline-form, .cell-actions .menu { display: inline-block; }
.cell-actions .menu-panel .menu { display: block; }  /* вложенный выбор с поиском — на своей строке */
.menu-panel .field-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.row-under { margin-top: 6px; font-size: 13px; }
tr.row-editing td { background: #f3f8fd; }
tr.row-invalid td { background: var(--danger-tint); }
td.changed { background: var(--warn-tint); }
.row-flash td { animation: row-flash 1.6s ease-out; }
@keyframes row-flash { from { background: var(--ok-tint); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .row-flash td { animation: none; } }
.link-btn { padding: 0; border: 0; background: none; color: var(--primary-dark); font: inherit; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn.text-danger { color: var(--danger); }
.panel-note { margin: 0; padding: 12px 20px; font-size: 13px; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg-soft); font-size: 14px; }
.bulk-bar label { display: inline-flex; align-items: center; gap: 6px; }
.bulk-bar .cell-input { width: 72px; }
.bulk-bar .cell-select { width: auto; }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 -6px 16px rgba(13, 37, 68, .06); }

/* Геосправочник (ADR 0024): отборы регионов — ссылки-фишки */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 14px; }
/* отбор под строкой поиска — отступ от её нижней линии */
.filters + .chip-row { padding-top: 14px; }
a.chip-filter { display: inline-block; text-decoration: none; }
.chip-filter[aria-current="page"] { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.chip-filter[aria-current="page"] small { color: inherit; opacity: .8; }

/* Подпись только для скринридера (у выбора с поиском в таблице видимой подписи нет) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Закреплённые инженеры филиала (ADR 0027): выбор с поиском и «Сохранить» в одну строку таблицы */
.pinned-form { display: flex; align-items: center; gap: 10px; margin: 0; }
.pinned-form .picker { flex: 1 1 320px; min-width: 0; }
.pinned-form .picker > .menu-panel { left: 0; right: auto; }
.table-wrap-open { overflow: visible; }

/* Кабинет инженера (ADR 0025): «что дальше», заявки и смета на телефоне, «Выполнена» с актом */
.next-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.next-step strong { display: block; font-size: 16px; }
.next-step p { margin: 2px 0 0; color: var(--muted); }
.next-step.tone-go { border-color: #b9e3cc; background: var(--ok-tint); }
.next-step.tone-todo { border-color: #c7dbef; background: #eef5fc; }
.next-step.tone-wait { background: var(--bg-soft); }
.next-step-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.next-step-actions .inline-form { margin: 0; }
.step-chip { font-size: 13px; font-weight: 700; white-space: nowrap; }
.step-chip.step-go { color: var(--ok-dark); }
.step-chip.step-todo { color: var(--primary-dark); }
.step-chip.step-wait { color: var(--muted); }
.kv-list { display: grid; gap: 12px; margin: 0; }
.kv-list dt { color: var(--muted); font-size: 13px; }
.kv-list dd { margin: 2px 0 0; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.call { font-weight: 700; white-space: nowrap; }
.task-text { margin: 0 0 8px; }
.wo-cards { display: none; list-style: none; margin: 0; padding: 0; }
.wo-cards li + li { border-top: 1px solid var(--line); }
.wo-cards a { display: block; padding: 14px 16px; color: var(--ink); }
.wo-cards a:hover { background: var(--bg-soft); text-decoration: none; }
.wo-cards .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.wo-cards .step-chip { display: inline-block; margin-top: 6px; }
.est-list { display: none; list-style: none; margin: 0; padding: 0; }
.est-list li { padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.est-list .calc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--ink-soft); }
.est-list .calc b { color: var(--ink); }
.est-list .sum-row { display: flex; justify-content: space-between; font-weight: 700; }
.qty-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.qty-input { width: 72px; text-align: right; }
.partner-catalog .catalog-list { max-height: 420px; overflow: auto; }
.review-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 20px 14px; padding: 12px 14px; border: 1px solid #c7dbef; border-radius: var(--radius-sm); background: #eef5fc; }
.review-banner p { margin: 0; }
.dialog-b { display: grid; gap: 14px; padding: 16px 20px; }
.dialog-b .field { margin: 0; }
.file-drop { display: grid; gap: 4px; padding: 14px; border: 2px dashed var(--line-strong); border-radius: 12px; background: var(--bg-soft); }
.file-drop-need { border-color: #e2c27a; background: #fffaf0; }
.action-bar { display: none; }
@media (max-width: 760px) {
  .wo-table { display: none; }
  .wo-cards { display: block; }
  .est-table { display: none; }
  .est-list { display: block; }
  .partner-info { order: -1; }
  .next-step-actions > :first-child { display: none; }  /* главная кнопка — в нижней панели */
  .action-bar { position: sticky; bottom: 0; z-index: 20; display: flex; margin: 16px -16px -40px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -6px 18px rgba(13, 37, 68, .08); }
  .action-bar > *, .action-bar .inline-form, .action-bar .btn { flex: 1; width: 100%; }
  .action-bar .btn { justify-content: center; min-height: 46px; font-size: 16px; }
  .dialog-sheet { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
}
.partner-main > .task-panel { margin: 0 0 16px; }
@media (max-width: 760px) {
  /* на телефоне: задача → объект → смета, файлы, комментарии */
  .partner-main { display: contents; }
  .partner-main > .task-panel { order: -2; margin: 0; }
}

/* Итоги отчёта (ADR 0026): маржа, накладные расходы, прибыль */
.summary dd.summary-note { margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 500; }
.overhead-add .errorlist { flex-basis: 100%; margin: 0; }

/* Статус партнёра и «Архивный» — строкой под ФИО в списках инженеров */
.cell-badges { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }

/* Отчёт «Деньги и долги» (ADR 0028): крупные цифры, составные полосы, столбики давности */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.kpi { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); min-width: 0; }
.kpi-money { border-left-color: var(--navy); }
.kpi-receivable { border-left-color: var(--primary-dark); }
.kpi-debt { border-left-color: var(--warn); }
.kpi-positive { border-left-color: var(--ok); }
.kpi-negative { border-left-color: var(--danger); }
.kpi-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.kpi-value { margin: 4px 0 0; font-family: var(--font-head); font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.kpi-negative .kpi-value { color: var(--danger); }
.kpi-muted { color: var(--muted); }
.kpi-note { margin-top: 4px; color: var(--muted); font-size: 13px; }
.stack-bar { display: flex; height: 28px; overflow: hidden; border-radius: 8px; background: var(--bg-soft); }
.stack-bar-thin { height: 14px; }
.stack-part { min-width: 2px; }
.part-money { background: var(--navy); }
.part-receivable { background: var(--primary-dark); }
.part-debt { background: var(--warn); }
.part-pending { background: var(--warn); }
.part-unbilled { background: #d9a441; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: middle; }
.meter { height: 12px; margin: 10px 0 6px; overflow: hidden; border-radius: 6px; background: var(--bg-soft); }
.meter-fill { height: 100%; background: var(--ok); border-radius: 6px; }
.meter-warn { background: var(--warn); }
.meter-danger { background: var(--danger); }
.aging { width: 100%; height: auto; max-height: 220px; }
.aging-bar { fill: var(--primary-dark); }
.aging-late { fill: var(--warn); }
.aging-old { fill: var(--danger); }
.aging-amount { font-size: 12px; font-weight: 700; fill: var(--ink); }
.aging-legend { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.aging-legend li { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; }
.aging-label { flex: 1; color: var(--muted); }
.bars { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.bar-track { display: flex; }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; overflow: hidden; border-radius: 5px; background: var(--bg-soft); }
.bar-fill { display: block; height: 100%; background: var(--primary-dark); }
.bar-fill:first-child { border-radius: 5px 0 0 5px; }
.bar-fill:last-child { border-radius: 0 5px 5px 0; }
.bar-fill:only-child { border-radius: 5px; }
.bar-fill.part-pending { background: var(--warn); }
.bar-fill.part-unbilled { background: #d9a441; }
.bar-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bars + .muted { margin-top: 14px; }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpi-grid { grid-template-columns: minmax(0, 1fr); } .bars li { grid-template-columns: minmax(0, 1fr) auto; } .bars .bar-track { display: none; } }