/* АИС ПКР — базовая дизайн-система (ТЗ 30).
 *
 * Единственный стилевой файл каркаса. Внешние ресурсы не подключаются:
 * шрифты берутся из системного стека, иконки — локальный SVG-спрайт (ТЗ 8.3).
 * Политика CSP запрещает встроенные стили в шаблонах, поэтому любое
 * оформление описывается здесь классом, а не по месту.
 *
 * Разделы:
 *   1. Токены          6. Поля ввода
 *   2. База и сброс    7. Таблицы
 *   3. Layout          8. Карточки, вкладки
 *   4. Утилиты         9. Бейджи, алерты
 *   5. Кнопки         10. Модальное окно, пустое состояние
 */

/* Golos Text (OFL) — локальные файлы из набора ui-premium; без них — системный стек. */
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/golos-cyrillic.024646dc00da.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/golos-cyrillic-ext.52208e41e353.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/golos-latin.3ba0fde64bcf.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/golos-latin-ext.1cfacdd6d054.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Unbounded 700 (OFL) — только для заголовка экрана входа. */
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/unbounded-cyrillic-700.93487c64196a.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/unbounded-latin-700.e61b9fa462b2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ *
 * 1. Токены
 * ------------------------------------------------------------------ */

:root {
  /* Палитра: контраст основного текста и статусных цветов на светлой
     поверхности — не ниже 4.5:1 (ТЗ 30: читаемость). */
  /* Палитра «ui-premium» (снята с АИС УКР 24.08.2026): холодный светлый фон,
     синий акцент, тёмно-синее боковое меню. Шесть строк ниже перекрашивают
     систему целиком. */
  --color-bg: #f2f5fa;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafd;
  --color-surface-inset: #eef2f8;

  --color-text: #101826;
  --color-text-secondary: #3d4c63;
  --color-text-muted: #6b7b95;
  --color-text-inverse: #ffffff;

  --color-border: #e4e9f2;
  --color-border-soft: #eef2f8;
  --color-border-strong: #d3ddee;

  --color-primary: #2456c9;
  --color-primary-hover: #1c47ab;
  --color-primary-active: #163a8f;
  --color-primary-soft: #eaf1fe;
  --color-primary-bright: #4d86f0;

  --color-focus: #4d86f0;

  /* Акцент и градиент шапки из макета редизайна (docs/design/mockup-redesign.html,
     палитра «Тёплый песок»). */
  --color-accent: #2456c9;
  --color-accent-soft: #eaf1fe;
  --header-bg: linear-gradient(90deg, #0c1929 0%, #10233c 60%, #122a49 100%);
  --sidebar-bg: linear-gradient(180deg, #0c1929 0%, #10233c 46%, #122a49 100%);
  --color-primary-ink: #163a8f;

  /* Семантические статусные цвета. Цвет — вспомогательный признак:
     статус всегда сопровождается текстом и иконкой (ТЗ 30). */
  --color-info: #2456c9;
  --color-info-soft: #eaf1fe;
  --color-info-border: #dbe6fa;

  --color-success: #0f7a52;
  --color-success-soft: #e6f5ee;
  --color-success-border: #c6e6d7;

  --color-warning: #b97400;
  --color-warning-soft: #fdf3e0;
  --color-warning-border: #f0e0be;
  --color-warning-led: #e0a01d;

  --color-danger: #d02631;
  --color-danger-hover: #b01f29;
  --color-danger-soft: #fdecec;
  --color-danger-border: #f3d6d8;

  --color-neutral: #6b7b95;
  --color-neutral-soft: #f8fafd;
  --color-neutral-border: #e4e9f2;

  /* Типографика: Golos Text локально (см. @font-face выше), без сетевых
     запросов (ТЗ 8.3); дальше — системный стек. */
  --font-sans: "Golos Text", "Inter", "Segoe UI", system-ui, -apple-system, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Шкала уменьшена по образцу ui-premium: основной текст 14px, подписи
     12,5–13px, заголовок экрана 25px — элементы стали компактнее. */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-md: 0.9375rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5625rem;

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-loose: 1.65;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  /* Шкала отступов, шаг 4px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.625rem;
  --space-4: 0.875rem;
  --space-5: 1.0625rem;
  --space-6: 1.25rem;
  --space-8: 1.5rem;
  --space-10: 2rem;
  --space-12: 2.5rem;

  --radius-sm: 8px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border: var(--border-width) solid var(--color-border);

  /* Тени в два-три слоя (ui-premium): близкая контактная + дальняя мягкая. */
  --shadow-sm: 0 1px 1px rgba(16, 30, 54, 0.04), 0 4px 10px -2px rgba(16, 30, 54, 0.05),
    0 16px 32px -12px rgba(16, 30, 54, 0.1);
  --shadow-md: var(--shadow-sm);
  --shadow-lg: 0 2px 4px rgba(16, 30, 54, 0.06), 0 10px 20px -4px rgba(16, 30, 54, 0.1),
    0 28px 48px -16px rgba(16, 30, 54, 0.16);

  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 2px;

  --sidebar-width: 236px;
  --header-height: 56px;
  --content-max-width: 1240px;

  --z-header: 20;
  --z-sidebar: 10;
  --z-modal: 100;
}

/* ------------------------------------------------------------------ *
 * 2. База и сброс
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
}

h3 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
}

h4 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

small {
  font-size: var(--font-size-sm);
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

pre {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-inset);
  border: var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

code {
  background: var(--color-surface-inset);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

pre code {
  background: none;
  padding: 0;
}

hr {
  border: 0;
  border-top: var(--border);
  margin: var(--space-6) 0;
}

/* Видимый фокус обязателен: интерфейс управляется с клавиатуры (ТЗ 30). */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ *
 * 3. Layout
 * ------------------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.skip-link:focus {
  top: var(--space-2);
}

.icon-sprite {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  min-height: 100vh;
}

/* Страницы без сессии (вход) не имеют меню: одна колонка. */
.app-shell--plain {
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main";
}

.app-header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* Шапка и содержимое страницы отступают от края экрана одинаково: иначе
     кнопка выхода и меню липнут к краю окна. */
  padding: 0 var(--space-6);
  background: var(--header-bg);
  color: var(--color-text-inverse);
}

.app-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  text-decoration: none;
  white-space: nowrap;
}

.app-header__brand:hover {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

/* Полное название продукта — на просторных экранах, короткое — на узких:
   целиком оно там перекрывает кнопку выхода. */
.app-header__brand-short {
  display: none;
}

.app-header__spacer {
  flex: 1 1 auto;
}

.app-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.app-header__user-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-inverse);
  text-decoration: none;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}

.app-header__user-link:hover {
  color: var(--color-text-inverse);
  background: rgba(255, 255, 255, 0.14);
}

.app-header :focus-visible {
  outline-color: var(--color-text-inverse);
}

.app-header__logout {
  margin: 0;
}

.app-sidebar {
  grid-area: sidebar;
  z-index: var(--z-sidebar);
  background: var(--color-surface);
  border-right: var(--border);
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
}

.app-main {
  grid-area: main;
  padding: var(--space-6) var(--space-6) var(--space-12);
  min-width: 0;
}

/* На широком экране поля крупнее: страница шириной 1240 px, прижатая к краям
   монитора, читается хуже, чем та же страница с воздухом по бокам. */
@media (min-width: 1200px) {
  .app-main {
    padding: var(--space-8) var(--space-8) var(--space-12);
  }

  .app-header {
    padding: 0 var(--space-8);
  }
}

.app-main:focus {
  outline: none;
}

/* Страница входа — одна карточка на пустом экране: она стоит по центру и по
   горизонтали, и по вертикали, а не жмётся к верхнему краю. */
.app-shell--plain .app-main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

/* Центрируется сама карточка, а не полоса страницы вокруг неё: полоса шире
   карточки (её ширину задаёт длинная строка под формой), и карточка внутри
   прижималась к левому краю. */
.app-shell--plain .page {
  align-items: center;
  width: 100%;
}

.page {
  display: flex;
  flex-direction: column;
  /* Промежуток между крупными блоками страницы задаётся здесь один раз: иначе
     карточки, идущие подряд, слипаются, а поля у каждой расходятся между
     разделами. */
  gap: var(--space-6);
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.page__header {
  margin-bottom: 0;
}

.page__title {
  margin-bottom: var(--space-2);
}

.page__subtitle {
  color: var(--color-text-muted);
  max-width: 72ch;
}

.page__section {
  margin-top: 0;
}

.page__section-title {
  margin-bottom: var(--space-4);
}

/* Меню каркаса */

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
}

.nav__group-title {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav__link,
.nav__disabled {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
  text-decoration: none;
}

.nav__link {
  color: var(--color-text);
}

.nav__link:hover {
  background: var(--color-surface-inset);
  color: var(--color-text);
}

.nav__link[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  font-weight: var(--font-weight-medium);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Раздел следующего кодера: виден, но не активен. Недоступность передана
   не только цветом — есть подпись «в разработке» и подсказка. */
.nav__disabled {
  color: var(--color-text-muted);
  cursor: default;
}

.nav__item--placeholder {
  position: relative;
}

.nav__label {
  flex: 1 1 auto;
  min-width: 0;
}

.nav__note {
  display: block;
  padding: 0 var(--space-3) var(--space-2) calc(var(--space-3) + 20px + var(--space-3));
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
}

.nav__tag {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  color: var(--color-neutral);
  background: var(--color-neutral-soft);
  border: var(--border-width) solid var(--color-neutral-border);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
  white-space: nowrap;
}

/* Сетка контента */

.grid {
  display: grid;
  gap: var(--space-4);
}

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

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

.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--sm {
  gap: var(--space-2);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cluster--sm {
  gap: var(--space-1);
}

/* Адаптив: рабочее место оператора — desktop и планшет (ТЗ 30). */
@media (max-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main";
    grid-template-rows: var(--header-height) auto 1fr;
  }

  .app-sidebar {
    border-right: 0;
    border-bottom: var(--border);
  }

  /* Меню скрыто до нажатия кнопки в шапке. */
  .app-sidebar[data-open="false"] {
    display: none;
  }

  .app-main {
    padding: var(--space-4) var(--space-4) var(--space-10);
  }
}

@media (min-width: 901px) {
  .nav-toggle {
    display: none;
  }
}

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

  .app-header__brand-full {
    display: none;
  }

  .app-header__brand-short {
    display: inline;
  }
}

/* ------------------------------------------------------------------ *
 * 4. Утилиты
 * ------------------------------------------------------------------ */

/* Шапка липкая — блок, к которому ведёт якорь, иначе оказывается под ней. */
[id]:target {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.text-sm {
  font-size: var(--font-size-sm);
}

.text-numeric {
  font-variant-numeric: tabular-nums;
}

.icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--lg {
  width: 28px;
  height: 28px;
}

.icon--xl {
  width: 44px;
  height: 44px;
  stroke-width: 1.25;
}

/* ------------------------------------------------------------------ *
 * 5. Кнопки
 * ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

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

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

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

.btn--secondary:hover {
  background: var(--color-surface-inset);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}

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

.btn--ghost {
  background: none;
  border-color: transparent;
  color: var(--color-primary);
}

.btn--ghost:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

/* Кнопка на тёмной шапке. */
.btn--on-dark {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-text-inverse);
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.24);
  color: var(--color-text-inverse);
}

.btn--sm {
  min-height: 28px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn--lg {
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-md);
}

.btn--block {
  width: 100%;
}

.btn--icon {
  padding: var(--space-2);
  min-width: 36px;
}

/* ------------------------------------------------------------------ *
 * 6. Поля ввода
 * ------------------------------------------------------------------ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Подпись обязательна у каждого поля (ТЗ 30). */
.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.form-required {
  color: var(--color-danger);
  margin-left: 0.15em;
}

/* Галочка и её подпись — одна строка и одна цель нажатия. */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.form-field input[type="checkbox"],
.form-field input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-check__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea,
.input,
.select,
.textarea {
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-base);
}

.form-field textarea,
.textarea {
  min-height: 96px;
  resize: vertical;
}

.form-field input:hover:not(:disabled),
.form-field select:hover:not(:disabled),
.form-field textarea:hover:not(:disabled),
.input:hover:not(:disabled),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled) {
  border-color: var(--color-text-muted);
}

.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled,
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--color-surface-inset);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-muted);
}

/* Ошибка поля обозначена рамкой, значком и текстом — не только цветом. */
.form-field--error input:not([type="checkbox"]):not([type="radio"]),
.form-field--error select,
.form-field--error textarea {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.form-help {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.form-help ul {
  padding-left: var(--space-5);
  list-style: disc;
}

.field-errors {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.field-errors li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.field-errors .icon {
  margin-top: 2px;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.form-check input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--color-primary);
}

.form-check label {
  font-size: var(--font-size-base);
}

.form-fieldset {
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
}

.form-fieldset legend {
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------------------------------------------ *
 * 7. Таблицы
 * ------------------------------------------------------------------ */

.table-scroll {
  overflow-x: auto;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.table caption {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  border-bottom: var(--border);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border-width) solid var(--color-border);
}

.table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover td {
  background: var(--color-surface-muted);
}

.table__cell--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table__cell--empty {
  padding: 0;
}

.table__cell--empty:hover {
  background: none;
}

/* ------------------------------------------------------------------ *
 * 8. Карточки и вкладки
 * ------------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card--flat {
  box-shadow: none;
}

.card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border);
}

.card__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.card__subtitle {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.card__body {
  flex: 1 1 auto;
  padding: var(--space-5);
}

.card__body > * + * {
  margin-top: var(--space-3);
}

.card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: var(--border);
  background: var(--color-surface-muted);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card--link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}

.card--link:hover {
  color: inherit;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.card--link .card__title {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Список «свойство — значение» */
.definition-list {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: var(--space-3) var(--space-5);
}

.definition-list dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.definition-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .definition-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1) 0;
  }

  .definition-list dd {
    margin-bottom: var(--space-3);
  }
}

/* Вкладки */

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: var(--border-width) solid var(--color-border);
}

.tabs__tab {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  margin-bottom: -1px;
}

.tabs__tab:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

/* Активная вкладка отмечена подчёркиванием и жирностью, не только цветом. */
.tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.tabs__panel {
  padding-top: var(--space-5);
}

/* ------------------------------------------------------------------ *
 * 9. Бейджи и алерты
 * ------------------------------------------------------------------ */

/* Статус: значок + текст. Цвет только усиливает признак (ТЗ 30). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem var(--space-2);
  border: var(--border-width) solid;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.badge .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.badge--neutral {
  color: var(--color-neutral);
  background: var(--color-neutral-soft);
  border-color: var(--color-neutral-border);
}

.badge--info {
  color: var(--color-info);
  background: var(--color-info-soft);
  border-color: var(--color-info-border);
}

.badge--success {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
}

.badge--warning {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-color: var(--color-warning-border);
}

.badge--danger {
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border-color: var(--color-danger-border);
}

.badge--critical {
  color: var(--color-text-inverse);
  background: var(--color-danger);
  border-color: var(--color-danger);
}

/* Алерты */

.messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid;
  border-left-width: 4px;
  border-radius: var(--radius-md);
}

.alert__icon {
  margin-top: 1px;
}

.alert__content {
  flex: 1 1 auto;
  min-width: 0;
}

.alert__title {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.alert__message {
  overflow-wrap: anywhere;
}

.alert__message > * + * {
  margin-top: var(--space-2);
}

.alert__close {
  flex: 0 0 auto;
  padding: var(--space-1);
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  line-height: 0;
}

.alert__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.alert--info {
  color: var(--color-info);
  background: var(--color-info-soft);
  border-color: var(--color-info-border);
}

.alert--success {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
}

.alert--warning {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-color: var(--color-warning-border);
}

.alert--error {
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border-color: var(--color-danger-border);
}

/* ------------------------------------------------------------------ *
 * 10. Модальное окно и пустое состояние
 * ------------------------------------------------------------------ */

/* Нативный <dialog>: перехват фокуса, Esc и фон обеспечивает браузер. */
.modal {
  width: min(560px, calc(100vw - 2 * var(--space-4)));
  padding: 0;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
}

.modal::backdrop {
  background: rgba(15, 30, 50, 0.45);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border);
}

.modal__title {
  flex: 1 1 auto;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.modal__close {
  flex: 0 0 auto;
  padding: var(--space-1);
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  line-height: 0;
}

.modal__close:hover {
  background: var(--color-surface-inset);
  color: var(--color-text);
}

.modal__body {
  padding: var(--space-5);
}

.modal__body > * + * {
  margin-top: var(--space-3);
}

.modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: var(--border);
  background: var(--color-surface-muted);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Пустое состояние */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-5);
  color: var(--color-text-muted);
}

.empty-state__icon {
  color: var(--color-border-strong);
}

.empty-state__title {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.empty-state__description {
  max-width: 56ch;
}

/* Страница ошибки */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 60vh;
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.error-page__code {
  font-size: 4rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.error-page__message {
  font-size: var(--font-size-lg);
  max-width: 60ch;
}

.error-page__hint {
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* Автономная страница 500: рендерится без контекст-процессоров. */
.error-standalone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-6);
}

.error-standalone .card {
  max-width: 34rem;
}

/* Форма входа */

.auth-card {
  width: min(420px, 100%);
}

.auth-card__logo {
  display: flex;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.auth-card__title {
  text-align: center;
  font-size: var(--font-size-lg);
}

.auth-card__subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

/* Витрина дизайн-системы */

.kit-section + .kit-section {
  margin-top: var(--space-10);
}

.kit-section__title {
  padding-bottom: var(--space-2);
  border-bottom: var(--border);
  margin-bottom: var(--space-5);
}

.kit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.kit-row + .kit-row {
  margin-top: var(--space-3);
}

.kit-usage {
  margin-top: var(--space-4);
}

.kit-usage summary {
  cursor: pointer;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  padding: var(--space-1) 0;
}

.kit-usage pre {
  margin-top: var(--space-2);
  white-space: pre-wrap;
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
}

.swatch__sample {
  height: 44px;
  border: var(--border);
  border-radius: var(--radius-md);
}

.swatch__sample--primary {
  background: var(--color-primary);
}

.swatch__sample--info {
  background: var(--color-info);
}

.swatch__sample--success {
  background: var(--color-success);
}

.swatch__sample--warning {
  background: var(--color-warning);
}

.swatch__sample--danger {
  background: var(--color-danger);
}

.swatch__sample--neutral {
  background: var(--color-neutral);
}

.swatch__sample--surface {
  background: var(--color-surface);
}

.swatch__sample--bg {
  background: var(--color-bg);
}

.swatch__sample--text {
  background: var(--color-text);
}

.swatch__sample--border {
  background: var(--color-border);
}

/* ------------------------------------------------------------------ *
 * 11. Реестр и карточка объектов (ТЗ 5, 7)
 *
 * Совместимое расширение дизайн-системы: новые классы поверх существующих
 * токенов, без переопределения контрактных классов и переменных.
 * ------------------------------------------------------------------ */

/* Шапка страницы с действием справа (реестр). */
.page__header--toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Панель фильтров реестра. */
.filters {
  margin-bottom: var(--space-6);
}

.filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  align-items: end;
}

/* Ссылка сортировки в заголовке таблицы: наследует цвет заголовка, а не
   ссылки, чтобы шапка оставалась спокойной; направление показано стрелкой
   рядом с подписью, а не только цветом (ТЗ 30). */
.table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
  font: inherit;
  white-space: nowrap;
}

.table__sort:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.table thead th[aria-sort="ascending"],
.table thead th[aria-sort="descending"] {
  color: var(--color-primary);
}

/* Пагинация. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.pagination__link:hover {
  background: var(--color-surface-inset);
  color: var(--color-primary-hover);
}

.pagination__link--disabled {
  color: var(--color-text-muted);
  background: var(--color-surface-inset);
  cursor: not-allowed;
}

.pagination__status {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* Карточка объекта: статусы и действия под заголовком. */
.object-badges {
  margin-top: var(--space-3);
}

.detail-actions {
  margin-top: var(--space-4);
}

/* Вложенный блок формы (например, объект культурного наследия). */
.form-fieldset--nested {
  margin-top: var(--space-2);
  background: var(--color-surface-muted);
}

/* Итоговый балл автоматического приоритета. */
.priority-headline {
  align-items: center;
  margin-bottom: var(--space-4);
}

.priority-score {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------- */
/* Планы капитального ремонта (ТЗ №3)                                          */
/*                                                                            */
/* Небольшое дополнение к дизайн-системе для карточки плана: перечни проблем  */
/* готовности, подвал позиции и встроенная форма-кнопка. Существующие         */
/* переменные и контрактные классы не изменяются.                            */
/* ------------------------------------------------------------------------- */

.issue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.issue-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.plan-item--excluded {
  opacity: 0.72;
}

.plan-item__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.plan-item__total {
  font-variant-numeric: tabular-nums;
}

.inline-form {
  display: inline;
  margin: 0;
}

/* ── Дашборд: «Общая сводка» (KPI-плитки + inline-SVG графики, ТЗ «Общая сводка») ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.kpi { padding: 20px 22px; }
.kpi__label {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kpi__value {
  color: var(--color-text);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 8px;
}
.kpi--danger .kpi__value { color: var(--color-danger); }
.kpi__sub {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: 8px;
}
.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-text);
  overflow: visible;
}
/* Токен подключается классом на <rect>: presentation-атрибут fill="var(...)"
   не резолвится браузерами, а style= запрещён политикой CSP (ТЗ «Общая
   сводка» §8.4, §14). Нейтральная строка (без расчёта приоритета) — единственная,
   для которой это обязательно; первые три полосы риска и полоса стоимости
   переведены на классы для единообразия. */
.chart-bar--danger { fill: var(--color-danger); }
.chart-bar--warning { fill: var(--color-warning); }
.chart-bar--success { fill: var(--color-success); }
.chart-bar--neutral { fill: var(--color-text-muted); }
.chart-bar--primary { fill: var(--color-primary); }

/* ------------------------------------------------------------------------- */
/* Страница-инструкция (/instruction)                                         */
/*                                                                            */
/* Пошаговый разбор сценария «декомпозиция объекта → позиция плана → работы»  */
/* со снимками экрана. Номера подписей повторяют красные маркеры на снимках.  */
/* Собственных токенов не вводит: только существующие переменные (ТЗ 30).     */
/* ------------------------------------------------------------------------- */

.instruction {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 62rem;
}

.instruction__lead {
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
}

.instr-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-2) var(--space-6);
}

.instr-toc__list a {
  display: block;
  padding: var(--space-1) 0;
}

.instr-part {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.instr-part__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
}

.instr-part__intro {
  margin: 0;
  color: var(--color-text-muted);
}

.instr-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.instr-step__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0;
}

.instr-step__num {
  flex: 0 0 auto;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-base);
  line-height: 1.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.instr-step__text {
  margin: 0;
}

.instr-shot {
  margin: 0;
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.instr-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.instr-shot figcaption {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Подписи к маркерам: номер повторяет красный кружок на снимке. */
.instr-marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.instr-marks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.instr-marks__num {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.instr-note {
  border-left: 4px solid var(--color-info);
  background: var(--color-info-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.instr-note__title {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.instr-note p {
  margin: 0;
}

.instr-note--warning {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.instr-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Четыре шага встают в одну строку на широком экране и перестраиваются сами. */
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: var(--space-4);
}

.instr-flow li {
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.instr-flow__step {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
}

.instr-flow__title {
  font-weight: var(--font-weight-bold);
}

/* Хлебные крошки (ТЗ «Навигация» §7.4) — иерархия раздела, а не «откуда пришёл». */

.breadcrumbs {
  margin-bottom: var(--space-2);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin-right: var(--space-1);
  color: var(--color-text-muted);
}

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

/* Кнопка «Назад» рядом с заголовком: подпись нейтральная, адрес — контекстный. */

.page__back {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

/* ------------------------------------------------------------------ *
 * 21. Планирование ремонта: карточка объекта и карточка плана
 *
 * Оформление раздела следует макету редизайна
 * (docs/design/mockup-redesign.html, палитра «Тёплый песок»).
 * ------------------------------------------------------------------ */

/* --- Шапка страницы-«герой» ---------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface);
  border: var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 320px;
  height: 320px;
  transform: translate(38%, -46%);
  background: radial-gradient(circle, var(--color-primary-soft) 0%, transparent 68%);
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Организация — первое, что человек ищет глазами: чья это база. */
.hero__eyebrow--strong {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.hero__who {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: calc(var(--space-1) * -1) 0 var(--space-3);
}

.hero__title {
  font-size: var(--font-size-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: var(--space-1) 0 var(--space-2);
}

.hero__lead {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  max-width: 70ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --- Плитки итогов -------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.stat {
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.stat__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.stat__icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex: none;
}

.stat__value {
  margin-top: var(--space-4);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.stat__sub {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.stat--accent .stat__icon {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.stat--warning .stat__icon {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.stat--warning .stat__value {
  color: var(--color-warning);
}

/* --- Переключатель вида ремонта ------------------------------------- */

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  margin: 0;
}

.segmented legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

.segmented__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.segmented__option:hover {
  background: var(--color-surface-inset);
}

.segmented__option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

/* --- Радио-группы форм (вид ремонта, источник стоимости) ------------ */

.form-field > div:has(> div > label > input[type="radio"]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.form-field label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.form-field label:has(> input[type="radio"]:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

/* --- Таблица элементов объекта -------------------------------------- */

.element-table td,
.element-table th {
  vertical-align: middle;
}

.element-table__name {
  font-weight: var(--font-weight-medium);
  /* Именно `break-word`, а не `anywhere`: последнее разрешает колонке стать уже
     самого слова, и короткое «Фундамент» разрывалось пополам. */
  overflow-wrap: break-word;
  min-width: 0;
}

.element-table__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.element-table tr:has(.element-table__planned) {
  background: var(--color-primary-soft);
}

/* Галочка «ремонтируется» — первая колонка; подпись элемента кликабельна. */
.element-table__check {
  width: 2.5rem;
  text-align: center;
}

.element-table__check input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.element-table__name label {
  cursor: pointer;
}

.element-table tr:has(.element-table__check input:checked) td {
  background: var(--color-primary-soft);
}

/* --- Журнал действий -------------------------------------------------- */

.journal__when {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Разбор изменений раскрывается внутри строки журнала. */
.changes {
  margin-top: var(--space-1);
  max-width: 720px;
}

.changes__summary {
  display: inline-block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.changes__summary:hover {
  color: var(--color-text);
}

.changes__table {
  margin-top: var(--space-2);
  background: var(--color-surface-muted);
  font-size: var(--font-size-sm);
}

/* Логин под именем: полные тёзки в системе не редкость. */
.journal__login {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* --- Ремонты в планах на главной ------------------------------------- */

.kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.kind {
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.kind__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.kind__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

.kind__sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.kind__cost {
  margin-top: var(--space-2);
  font-weight: var(--font-weight-medium);
}

/* Расшифровка зоны риска — под её названием, а не в отдельной сноске. */
.legend__hint {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* --- История ремонтов элемента: раскрывается прямо в списке ---------- */

/* Строка истории занимает всю ширину и в липкой колонке не участвует:
   правило выше сделало бы её единственную ячейку прижатой к краю. */
.element-history-row > td {
  position: static;
  box-shadow: none;
  white-space: normal;
  padding-top: 0;
  background: var(--color-surface);
}

/* Вход в историю — год в колонке «Последний ремонт»: пунктир сообщает,
   что это ссылка, счётчик рядом — что внутри есть записи. */
.element-history__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--color-text-muted);
}

.element-history__toggle:hover {
  color: var(--color-primary-ink);
  border-bottom-color: currentColor;
}

.element-history__toggle--empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.element-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.element-history__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.element-history__count {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

/* Перечень элементов шире экрана и прокручивается вбок — история остаётся на
   месте и не уезжает вместе с колонками. */
.element-history {
  position: sticky;
  left: 0;
  max-width: 900px;
}

.element-history__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-3);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface-inset);
}

.element-history__table {
  background: var(--color-surface);
}

/* История — справка внутри строки, а не самостоятельный раздел:
   шрифт и отступы мельче, чем у основной таблицы. */
.element-history__table th,
.element-history__table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

/* Ввод в одну строку: наименование тянется, год и сумма — узкие. */
.element-history__form {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(90px, 0.5fr) minmax(120px, 0.7fr) auto;
  align-items: end;
  gap: var(--space-3);
}

/* Тот же ряд без своей кнопки: блок живёт внутри чужой формы. */
.element-history__form--fields-only {
  grid-template-columns: minmax(200px, 2fr) minmax(90px, 0.5fr) minmax(120px, 0.7fr);
  align-items: start;
}

/* --- Прошлый ремонт в форме заполнения элемента ---------------------- */

.past-repair {
  padding-top: var(--space-3);
  border-top: var(--border);
}

.past-repair__title {
  font-weight: var(--font-weight-medium);
}

.past-repair__hint {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.past-repair__list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

@media (max-width: 860px) {
  .element-history__form {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
}

/* --- Состав плана и ремонты объекта --------------------------------- */

.repair-group + .repair-group {
  margin-top: var(--space-4);
}

.repair-group__total {
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.repair-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(220px, 2.2fr) auto;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: var(--border);
  align-items: start;
}

.repair-row:first-child {
  border-top: 0;
}

.repair-row__element {
  font-weight: var(--font-weight-bold);
}

.repair-row__meta {
  margin-top: var(--space-1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.repair-row__text {
  color: var(--color-text);
}

.repair-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  text-align: right;
}

.repair-row__cost {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .repair-row {
    grid-template-columns: 1fr;
  }

  .repair-row__side {
    align-items: flex-start;
    text-align: left;
  }
}

/* --- Окно ремонта элемента ------------------------------------------ */

.modal--wide {
  width: min(760px, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100vh - 2 * var(--space-6));
  overflow-y: auto;
}

/* Элемент выбран в таблице и в окне не переспрашивается: он показан фактом. */
.modal__subject {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  color: var(--color-primary-ink);
}

.modal__subject-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.modal__subject-value {
  font-weight: var(--font-weight-bold);
}


/* ------------------------------------------------------------------ *
 * 22. Виджет обсуждения: кнопка, меню, окно обращения
 *
 * Оформление здесь, а не в скрипте: политика CSP запрещает встроенные стили,
 * поэтому виджет не может принести свои с собой (static/js/feedback-widget.js).
 * ------------------------------------------------------------------ */

.fw-launcher {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}

.fw-launcher:hover {
  background: var(--color-primary-hover);
}

.fw-menu {
  position: fixed;
  right: var(--space-6);
  bottom: calc(var(--space-6) + 64px);
  z-index: 60;
  width: 250px;
  padding: var(--space-2);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.fw-menu__item {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: var(--font-weight-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.fw-menu__item:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  text-decoration: none;
}

.fw-preview {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface-inset);
}

.fw-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 70;
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-lg);
}

/* Выделение области: затемнение поверх страницы и рамка выбора. */
.fw-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  cursor: crosshair;
  background: rgba(24, 30, 40, 0.18);
  user-select: none;
}

.fw-overlay__hint {
  position: fixed;
  left: 50%;
  top: var(--space-5);
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
  pointer-events: none;
}

.fw-overlay__box {
  position: fixed;
  border: 2px solid var(--color-primary);
  background: rgba(31, 91, 87, 0.14);
  box-shadow: 0 0 0 9999px rgba(24, 30, 40, 0.3);
  pointer-events: none;
}

/* --- Доска обсуждения ---------------------------------------------- */

.discussion-item__shot {
  display: block;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface-inset);
}

.discussion-comment {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.discussion-comment + .discussion-comment {
  margin-top: var(--space-2);
}

.discussion-comment__date {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

@media (max-width: 600px) {
  .fw-launcher {
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .fw-menu {
    right: var(--space-4);
    bottom: calc(var(--space-4) + 64px);
  }
}


/* ------------------------------------------------------------------ *
 * 23. Главная: плитки, кольцевая диаграмма, «требует внимания», доступ
 *
 * Оформление по макету редизайна (docs/design/mockup-redesign.html).
 * ------------------------------------------------------------------ */

.section__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.section__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-5);
}

.grid-main-side {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 1000px) {
  .grid-main-side {
    grid-template-columns: 1fr;
  }
}

/* --- Плитки сводки --------------------------------------------------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: var(--space-4);
}

.kpi {
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.kpi__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.kpi__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.kpi__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.kpi__value {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.kpi__sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.kpi__meter {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: var(--space-3);
}

.kpi__meter-track {
  fill: var(--color-surface-inset);
}

.kpi__meter-fill {
  fill: var(--color-primary);
}

.kpi--accent .kpi__icon {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.kpi--accent .kpi__meter-fill {
  fill: var(--color-accent);
}

.kpi--danger .kpi__icon {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.kpi--danger .kpi__value {
  color: var(--color-danger);
}

/* --- Кольцевая диаграмма зон риска ----------------------------------- */

.donut-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.donut {
  width: 160px;
  height: 160px;
  flex: none;
}

.donut__ring {
  fill: none;
  stroke: var(--color-surface-inset);
  stroke-width: 18;
}

.donut__seg {
  fill: none;
  stroke-width: 18;
}

.seg--danger {
  stroke: var(--color-danger);
}

.seg--warning {
  stroke: var(--color-warning);
}

.seg--success {
  stroke: var(--color-success);
}

.seg--neutral {
  stroke: var(--color-neutral-border);
}

.donut__value {
  font-size: 30px;
  font-weight: var(--font-weight-bold);
  fill: var(--color-text);
}

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

.legend {
  flex: 1 1 220px;
  min-width: 200px;
}

.legend__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border);
  font-size: var(--font-size-sm);
}

.legend__row:last-child {
  border-bottom: 0;
}

.legend__label {
  flex: 1 1 auto;
}

.legend__swatch {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 3px;
}

.legend__swatch.seg--danger {
  background: var(--color-danger);
}

.legend__swatch.seg--warning {
  background: var(--color-warning);
}

.legend__swatch.seg--success {
  background: var(--color-success);
}

.legend__swatch.seg--neutral {
  background: var(--color-neutral-border);
}

.legend__value {
  font-weight: var(--font-weight-bold);
}

.legend__share {
  min-width: 46px;
  color: var(--color-text-muted);
  text-align: right;
}

/* --- Полосы стоимости ------------------------------------------------ */

.chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart text {
  fill: var(--color-text);
  font-family: var(--font-sans);
}

.chart__track {
  fill: var(--color-surface-inset);
}

.chart__bar {
  fill: var(--color-primary);
}

/* --- «Требует внимания» ---------------------------------------------- */

.todo__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

.todo__item:hover {
  background: var(--color-surface-inset);
  color: inherit;
  text-decoration: none;
}

.todo__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--color-neutral-soft);
  color: var(--color-text-muted);
}

.todo__icon--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.todo__icon--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.todo__icon--info {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.todo__text {
  display: block;
}

.todo__title {
  display: block;
  font-weight: var(--font-weight-medium);
}

.todo__meta {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Карточка доступа ------------------------------------------------ */

.access {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.access__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.access__name {
  display: block;
  font-weight: var(--font-weight-bold);
}

.access__role {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}


/* ------------------------------------------------------------------ *
 * 24. Очерёдность работ плана
 *
 * Полоса — доля ремонта в общем сроке плана, смещение — день старта. Проценты
 * считаются на сервере и приходят атрибутами SVG: встроенные стили запрещены
 * политикой CSP.
 * ------------------------------------------------------------------ */

.timeline__row {
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) minmax(180px, 3fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: var(--border);
}

.timeline__row:first-child {
  border-top: 0;
}

.timeline__label {
  min-width: 0;
  font-weight: var(--font-weight-medium);
}

.timeline__object {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.timeline__chart {
  display: block;
  width: 100%;
  height: 12px;
}

.timeline__bg {
  fill: var(--color-surface-inset);
}

.timeline__bar {
  fill: var(--color-primary);
}

.timeline__days {
  white-space: nowrap;
  font-size: var(--font-size-sm);
}

.timeline__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.timeline__form input {
  width: 5.5rem;
}

@media (max-width: 860px) {
  .timeline__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}


/* ------------------------------------------------------------------ *
 * 25. Переносы длинного текста
 *
 * Наименования объектов и элементов бывают длиннее колонки, а суммы —
 * длиннее плитки. Без переноса такой текст вылезает за карточку.
 * ------------------------------------------------------------------ */

.hero__title,
.card__title,
.stat__value,
.kpi__value,
.timeline__label,
.repair-row__element,
.repair-row__text,
.todo__title,
.legend__label,
.access__name {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Ячейки сетки по умолчанию не сжимаются меньше содержимого — из-за этого
   длинное слово растягивает всю строку и ломает раскладку. */
.timeline__row > *,
.repair-row > *,
.stat,
.kpi {
  min-width: 0;
}

.timeline__days {
  white-space: normal;
}

/* Крупные числа в плитках: на узкой колонке уменьшаются, а не вылезают. */
.stat__value,
.kpi__value {
  font-size: clamp(1.25rem, 1rem + 1.2vw, var(--font-size-2xl));
}


/* Перетаскивание этапов ремонта */
.stage-grip {
  margin-right: var(--space-2);
  color: var(--color-text-muted);
  cursor: grab;
}

[data-stage-row][draggable="true"] {
  cursor: grab;
}

[data-stage-row].is-dragging {
  opacity: 0.5;
  background: var(--color-primary-soft);
}


/* ------------------------------------------------------------------ *
 * 26. График работ плана: годовая шкала
 *
 * Шкала строго годовая — та же, что у плана. Тёплый период показан подложкой,
 * чтобы предупреждение о холодном сезоне не выглядело придиркой. Проценты
 * приходят с сервера атрибутами SVG: встроенные стили запрещены политикой CSP.
 * ------------------------------------------------------------------ */

/* Ниже этой ширины подписи месяцев сливаются в сплошную строку: график
   прокручивается вбок, а не сжимается до нечитаемого. */
.gantt-scroll {
  overflow-x: auto;
}

.gantt {
  min-width: 900px;
}

.gantt__head,
.gantt__row {
  display: grid;
  /* Колонка сроков ограничена содержимым: с `auto` дата и подпись «по … дн.»
     вылезали за карточку, когда не помещались в отведённую ширину. */
  grid-template-columns: minmax(140px, 1fr) minmax(200px, 2.6fr) minmax(200px, max-content);
  align-items: center;
  gap: var(--space-4);
  /* Боковые поля: подсветка холодного периода иначе упирается в край карточки. */
  padding: var(--space-2) var(--space-3);
}

.gantt__row {
  border-top: var(--border);
  padding: var(--space-3);
}

.gantt__head {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.gantt__months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
}

.gantt__month {
  display: none;
}

.gantt__month-label {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}

.gantt__label {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--font-weight-medium);
}

.gantt__object {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.gantt__track {
  cursor: grab;
  touch-action: none;
}

.gantt__track.is-dragging {
  cursor: grabbing;
}

.gantt__chart {
  display: block;
  width: 100%;
  height: 22px;
}

.gantt__bg {
  fill: var(--color-surface-inset);
}

.gantt__warm {
  fill: var(--color-success-soft);
}

.gantt__grid {
  fill: var(--color-border);
}

.gantt__bar {
  fill: var(--color-primary);
}

.gantt__bar--warning {
  fill: var(--color-warning);
}

.gantt__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--font-size-sm);
}

.gantt__dates form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.gantt__dates input[type="date"] {
  width: 8.75rem;
  max-width: 100%;
}

.gantt__finish {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.gantt__row--warning {
  background: var(--color-warning-soft);
  border-radius: var(--radius-md);
}

@media (max-width: 860px) {
  /* На телефоне колонок нет вовсе — строка складывается вертикально, и
     прокрутка вбок уже не нужна. */
  .gantt {
    min-width: 0;
  }

  .gantt__head {
    display: none;
  }

  .gantt__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* ------------------------------------------------------------------ *
 * 23. Реестр объектов: таблица в ширину экрана
 *
 * Замечание заказчика от 25.08: таблица не умещалась в масштаб. Адрес ушёл
 * второй строкой под название, аварийность — меткой в колонке состояния,
 * сумма по планам стоит над числом позиций.
 * ------------------------------------------------------------------ */

.registry__address {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.registry__planned {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

/* Метки в реестре могут переноситься: иначе «Ограниченно работоспособное»
   одно растягивает колонку и выталкивает таблицу за экран. */
.registry-table .badge {
  white-space: normal;
  text-align: left;
}

.registry-table td {
  vertical-align: top;
}

.registry-table thead th {
  white-space: normal;
}

.registry-table th,
.registry-table td {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}


/* ------------------------------------------------------------------ *
 * 24. Позиция плана: панель «Запланировать», строки элементов, прогноз
 * ------------------------------------------------------------------ */

.plan-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.plan-toolbar__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Элементы позиции: имя, объём, единица по ОКЕИ — сеткой в три колонки. */
.repair-elements {
  display: grid;
  gap: var(--space-2);
}

.repair-elements__head,
.repair-elements__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-3);
  align-items: center;
}

.repair-elements__head {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border-bottom: var(--border);
  padding-bottom: var(--space-1);
}

.repair-elements__name {
  font-weight: var(--font-weight-medium);
}

.repair-elements__row input,
.repair-elements__row select {
  width: 100%;
}

@media (max-width: 640px) {
  .repair-elements__head {
    display: none;
  }

  .repair-elements__row {
    grid-template-columns: 1fr;
  }
}

/* Элементы позиции в составе плана и в карточке объекта — короткими метками. */
.repair-row__elements {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.chip {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-inset);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

/* Прогноз: срок, надо начать, длительность, окончание. */
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.forecast-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.forecast-fact__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.forecast-fact__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.forecast-fact__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.forecast-form {
  max-width: 360px;
}

.stage-table__row--past td {
  color: var(--color-text-muted);
}

.stage-table__row--current td {
  background: var(--color-primary-soft);
}

/* График: этапы внутри полосы, отметка срока, черта «сегодня». */
.gantt__stage {
  fill: rgba(255, 255, 255, 0.28);
  pointer-events: all;
}

.gantt__stage--odd {
  fill: rgba(0, 0, 0, 0.12);
}

.gantt__bar--late {
  fill: var(--color-danger, #b3261e);
}

.gantt__deadline {
  fill: var(--color-danger, #b3261e);
}

.gantt__today {
  fill: var(--color-text-muted);
  opacity: 0.7;
}

/* Поиск в выпадающем списке: строка ввода над самим списком. */
.select-search {
  display: grid;
  gap: var(--space-1);
}

.select-search__input {
  width: 100%;
  font-size: var(--font-size-sm);
}


/* ------------------------------------------------------------------ *
 * 26. Тема ui-premium: каркас, кнопки, карточки, таблицы
 *
 * Стили сняты из набора ui-premium (ui-premium/ui-premium.css) и переложены
 * на наши классы: тёмно-синее боковое меню, светлая полупрозрачная шапка,
 * карточки с многослойной тенью, компактные кнопки и поля, таблица с
 * заголовком капителью. Правки в токенах выше — цвета, шрифт, шкала.
 * ------------------------------------------------------------------ */

body {
  -webkit-font-smoothing: antialiased;
}

/* Шапка — тёмно-синяя, одним полем с боковым меню; кнопки — полупрозрачные. */
.app-header {
  background: linear-gradient(90deg, #0c1929 0%, #10233c 60%, #122a49 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #fff;
}

.app-header__brand,
.app-header__brand:hover {
  color: #fff;
}

.app-header__brand {
  gap: 10px;
  font-size: 15.5px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.emblem {
  flex: none;
  width: auto;
  height: 30px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
  transform-origin: 50% 60%;
}

/* Орёл в шапке едва покачивается — живой, а не наклейка. */
@media (prefers-reduced-motion: no-preference) {
  .app-header .emblem {
    animation: emblem-sway 6s ease-in-out infinite;
  }
}

@keyframes emblem-sway {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-1px); }
}

.app-header__user-link {
  color: #d5e0ef;
}

.app-header__user-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn--on-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #e6eefa;
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* Кнопки-«бутерброда» больше нет: на узком экране меню становится
   горизонтальной полосой под шапкой и всегда видно. */
@media (max-width: 900px) {
  .app-sidebar[data-open="false"] {
    display: block;
  }

  .nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Боковое меню — тёмно-синее, как в образце; значков не касается. */
.app-sidebar {
  background: var(--sidebar-bg);
  border-right: 0;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
  padding: var(--space-2) 10px;
  color: #b9c9de;
}

.nav__link,
.nav__disabled {
  gap: 9px;
  margin: 1px 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: #adc0d9;
  transition: background 0.14s ease, color 0.14s ease;
}

.nav__link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6eefa;
}

.nav__link[aria-current="page"] {
  background: linear-gradient(90deg, rgba(77, 134, 240, 0.3), rgba(77, 134, 240, 0.13));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(122, 168, 247, 0.28);
  font-weight: var(--font-weight-medium);
}

.nav__disabled {
  color: #63799a;
}

.app-sidebar :focus-visible {
  outline-color: var(--color-primary-bright);
}

/* Содержимое: два слабых пятна света сверху убирают плоскость. */
.app-main {
  background:
    radial-gradient(1200px 420px at 18% -8%, rgba(77, 134, 240, 0.1), transparent 62%),
    radial-gradient(900px 380px at 92% -14%, rgba(15, 122, 82, 0.06), transparent 60%),
    var(--color-bg);
}

/* Кнопки: компактные, 13px, скругление 9px. */
.btn {
  min-height: 32px;
  padding: 6px 13px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.btn--secondary {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.btn--secondary:hover {
  background: #f6f9ff;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--sm {
  min-height: 26px;
  padding: 3px 10px;
  font-size: 12.5px;
}

.btn--lg {
  min-height: 38px;
  padding: 8px 18px;
  font-size: var(--font-size-base);
}

.btn--icon {
  min-width: 32px;
  padding: 6px;
}

/* Поля ввода. */
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea,
.input,
.select,
.textarea {
  min-height: 32px;
  padding: 5px 10px;
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13.5px;
}

.form-field textarea,
.textarea {
  min-height: 80px;
}

.form-label {
  font-size: var(--font-size-sm);
}

/* Карточки. */
.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card__header {
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--color-border-soft);
}

.card__title {
  font-size: var(--font-size-lg);
  letter-spacing: -0.015em;
}

.card__body {
  padding: 14px 18px 16px;
}

.card__footer {
  padding: 10px 18px;
}

/* Шапка экрана — градиент и световая кромка сверху. */
.hero {
  padding: 20px 22px;
  border: 1px solid #dde5f3;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  background:
    radial-gradient(680px 240px at 88% -30%, rgba(77, 134, 240, 0.2), transparent 65%),
    linear-gradient(135deg, #ffffff 0%, #fbfcfe 48%, #f4f8ff 100%);
}

.hero::after {
  display: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 30%, rgba(122, 168, 247, 0.55), transparent);
}

.hero__title {
  font-size: var(--font-size-2xl);
  letter-spacing: -0.03em;
}

.hero__lead {
  font-size: 13.5px;
}

/* Плитки показателей: цветная кромка слева, число 26px. */
.stat {
  position: relative;
  overflow: hidden;
  padding: 13px 15px 14px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary-bright);
  opacity: 0.55;
}

.stat--warning::before {
  background: var(--color-warning-led);
  opacity: 1;
}

.stat--accent::before {
  background: var(--color-primary);
  opacity: 0.8;
}

.stat__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
}

.stat__value {
  margin-top: 9px;
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.625rem);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.stat__sub {
  font-size: 12.5px;
}

/* Таблицы: заголовок капителью, строки без зебры, подсветка при наведении. */
.table {
  font-size: 13.5px;
}

.table th,
.table td {
  padding: 10px 14px;
}

.table thead th {
  font-size: 11.5px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
}

.table th,
.table td {
  border-bottom-color: var(--color-border-soft);
}

.table tbody tr:hover td {
  background: #f7faff;
}

.table a {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.table a:hover {
  color: var(--color-primary);
}

.table__sort:hover {
  color: var(--color-primary);
}

/* Вкладки и метки. */
.tabs__tab {
  padding: 9px 13px;
  font-size: 13.5px;
}

.badge {
  padding: 2px 9px;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(16, 30, 54, 0.05);
}

.chip {
  font-size: 12.5px;
}

.alert {
  border-radius: var(--radius-sm);
}

/* Появление блоков страницы — один раз, лесенкой, не дольше 0,35 с. */
@media (prefers-reduced-motion: no-preference) {
  .page > * {
    animation: ui-in 0.34s cubic-bezier(0.22, 0.8, 0.3, 1) both;
  }

  .page > *:nth-child(2) {
    animation-delay: 0.04s;
  }

  .page > *:nth-child(3) {
    animation-delay: 0.08s;
  }

  .page > *:nth-child(n + 4) {
    animation-delay: 0.12s;
  }
}

@keyframes ui-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .page > * {
    animation: none !important;
  }

  .app-main {
    background: #fff;
  }
}

/* ------------------------------------------------------------------ *
 * 27. Движение и отклик: тосты, полоса загрузки, вкладки, окна, чипы,
 *     подсветка поиска, карточки-сигналы, график в стиле Linear, вход
 * ------------------------------------------------------------------ */

/* Тосты: сообщения уезжают в правый верхний угол и исчезают сами. */
.toasts {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  right: 16px;
  z-index: calc(var(--z-modal) + 1);
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface);
  animation: toast-in 0.32s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.toast--leaving {
  animation: toast-out 0.3s ease-in both;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(24px); }
}

/* Полоса загрузки под шапкой при переходе на другую страницу. */
.nav-progress {
  position: fixed;
  top: var(--header-height);
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--color-primary-bright), var(--color-primary));
  box-shadow: 0 0 8px rgba(77, 134, 240, 0.7);
  z-index: calc(var(--z-header) + 1);
  opacity: 0;
  transition: opacity 0.2s;
}

.nav-progress--active {
  opacity: 1;
  animation: nav-progress 1.6s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}

@keyframes nav-progress {
  0% { width: 0; }
  60% { width: 70%; }
  100% { width: 92%; }
}

body.is-leaving .app-main {
  opacity: 0.75;
  transition: opacity 0.35s ease;
}

/* Вкладки: панель проявляется, активная вкладка подчёркнута с анимацией. */
.tabs__panel:not([hidden]) {
  animation: panel-in 0.22s ease both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.tabs__tab {
  position: relative;
  border-bottom-color: transparent;
  transition: color 0.14s ease;
}

.tabs__tab::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform 0.18s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.tabs__tab[aria-selected="true"] {
  border-bottom-color: transparent;
}

.tabs__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

/* Модальное окно появляется, подложка проявляется. */
.modal[open] {
  animation: modal-in 0.24s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.modal[open]::backdrop {
  animation: backdrop-in 0.24s ease both;
  background: rgba(10, 20, 38, 0.5);
  backdrop-filter: blur(3px);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Карточки и строки отвечают на наведение. */
.card,
.stat,
.kpi {
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.stat:hover,
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

.table tbody tr {
  transition: background 0.12s ease;
}

.btn {
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease,
    transform 0.1s ease, box-shadow 0.14s ease;
}

.btn--primary {
  box-shadow: 0 1px 2px rgba(36, 86, 201, 0.25), 0 6px 14px -6px rgba(36, 86, 201, 0.55);
}

.btn:active {
  transform: translateY(1px);
}

/* Действия в строках состава и этапов — по наведению. */
.repair-row__side .btn,
.repair-row__side form,
.stage-table .cluster {
  opacity: 0.35;
  transition: opacity 0.14s ease;
}

.repair-row:hover .repair-row__side .btn,
.repair-row:hover .repair-row__side form,
.repair-row:focus-within .repair-row__side .btn,
.repair-row:focus-within .repair-row__side form,
.stage-table tr:hover .cluster,
.stage-table tr:focus-within .cluster {
  opacity: 1;
}

.repair-row {
  border-radius: var(--radius-md);
  transition: background 0.12s ease;
}

.repair-row:hover {
  background: var(--color-surface-muted);
}

/* Чипы действующих фильтров под панелью фильтров. */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -8px 0 var(--space-4);
}

.chips__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 11px;
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.chips__item:hover {
  background: #dfe9fd;
  border-color: #bed4f8;
}

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

.chips__value {
  font-weight: var(--font-weight-medium);
}

.chips__x {
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-muted);
}

.chips__clear {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* Совпадение с поиском в таблице. */
mark.hl {
  background: #fff3b0;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  box-shadow: 0 0 0 1px #f4e08a;
}

/* Переключатель масштаба. */
.segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.segmented__btn {
  padding: 4px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.segmented__btn[aria-pressed="true"] {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(16, 30, 54, 0.12);
}

/* --- Главная: живые счётчики, кольцо, карточки-сигналы ------------- */

.kpi__meter-fill,
.donut__seg {
  transform-origin: 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  .kpi__meter-fill {
    animation: meter-in 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) both;
  }

  .donut__seg {
    animation: ring-in 1s cubic-bezier(0.22, 0.8, 0.3, 1) both;
  }
}

@keyframes meter-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ring-in {
  from { stroke-dasharray: 0 999; }
}

.signals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.signal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.signal:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.signal--danger {
  background: linear-gradient(180deg, #fef7f7, #fff 58%);
  border-color: var(--color-danger-border);
}

.signal--warning {
  background: linear-gradient(180deg, #fefaf2, #fff 58%);
  border-color: var(--color-warning-border);
}

.signal__head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.signal__title {
  font-size: 13.5px;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}

.signal__body {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: auto;
}

.signal__meta {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.signal__go {
  margin-left: auto;
  white-space: nowrap;
  padding: 3px 9px;
  border: 1px solid #dbe6fa;
  border-radius: 8px;
  background: #f6f9ff;
  color: var(--color-primary);
  font-size: 12.5px;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.signal:hover .signal__go {
  background: var(--color-primary-soft);
  border-color: #bed4f8;
}

/* Индикатор состояния: точка со свечением. */
.led {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #9aa9bf;
  box-shadow: 0 0 0 3px rgba(154, 169, 191, 0.16);
}

.led--danger {
  background: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(208, 38, 49, 0.16);
  animation: led-pulse 2.4s ease-in-out infinite;
}

.led--warning {
  background: var(--color-warning-led);
  box-shadow: 0 0 0 3px rgba(224, 160, 29, 0.18);
}

.led--info {
  background: var(--color-primary-bright);
  box-shadow: 0 0 0 3px rgba(77, 134, 240, 0.18);
}

@keyframes led-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(208, 38, 49, 0.16); }
  50% { box-shadow: 0 0 0 6px rgba(208, 38, 49, 0.06); }
}

/* --- График в стиле Linear: тонкие полосы, подписи внутри, зум ---- */

.gantt--zoom-2 {
  min-width: 1800px;
}

.gantt--zoom-4 {
  min-width: 3600px;
}

.gantt__track {
  position: relative;
}

.gantt__chart {
  height: 30px;
}

.gantt__labels {
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: none;
}

.gantt__stage-label {
  position: absolute;
  top: 0;
  display: none;
  box-sizing: border-box;
  height: 16px;
  padding: 0 6px;
  overflow: hidden;
  color: #fff;
  font-size: 10.5px;
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(16, 30, 54, 0.5);
}

/* Подпись появляется, когда скрипт задал ей положение (без скрипта её нет). */
.gantt__stage-label[style] {
  display: block;
}

.segmented {
  flex: none;
  white-space: nowrap;
}

.stat__value {
  white-space: nowrap;
  font-size: clamp(1rem, 0.55rem + 1.1vw, 1.625rem);
}

.gantt__bg {
  fill: transparent;
}

.gantt__bar {
  fill: var(--color-primary);
  filter: drop-shadow(0 1px 1px rgba(16, 30, 54, 0.25));
}

.gantt__bar--warning {
  fill: var(--color-warning-led);
}

.gantt__stage {
  fill: rgba(255, 255, 255, 0.18);
}

.gantt__stage--odd {
  fill: rgba(0, 0, 0, 0.16);
}

.gantt__grid {
  fill: var(--color-border-soft);
}

.gantt__today {
  fill: var(--color-primary-bright);
  opacity: 0.9;
}

.gantt__month-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Экран входа: живой фон и карточка ---------------------------- */

.app-shell--plain .app-main {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 20% 0%, #16305a 0%, #0c1929 55%, #08111d 100%);
}

.app-shell--plain .app-header {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora__blob {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}

.aurora__blob--1 {
  top: -20vmax;
  left: -10vmax;
  background: radial-gradient(circle at 30% 30%, #4d86f0, transparent 60%);
  animation: aurora-1 22s ease-in-out infinite alternate;
}

.aurora__blob--2 {
  right: -15vmax;
  top: 10vmax;
  background: radial-gradient(circle at 60% 40%, #2456c9, transparent 62%);
  animation: aurora-2 26s ease-in-out infinite alternate;
}

.aurora__blob--3 {
  left: 25vmax;
  bottom: -25vmax;
  background: radial-gradient(circle at 50% 50%, #23a173, transparent 60%);
  opacity: 0.35;
  animation: aurora-3 30s ease-in-out infinite alternate;
}

.aurora__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation: grid-drift 40s linear infinite;
}

@keyframes aurora-1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(18vmax, 12vmax) scale(1.15); }
}

@keyframes aurora-2 {
  from { transform: translate(0, 0) scale(1.05); }
  to { transform: translate(-16vmax, 14vmax) scale(0.9); }
}

@keyframes aurora-3 {
  from { transform: translate(0, 0); }
  to { transform: translate(-20vmax, -14vmax) scale(1.2); }
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 48px, 48px 0; }
}

.auth-card {
  position: relative;
  width: min(400px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 24px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(77, 134, 240, 0.15),
    0 0 80px -20px rgba(77, 134, 240, 0.45);
  animation: card-rise 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 30%, rgba(122, 168, 247, 0.8), transparent);
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.auth-card .card__body {
  padding: 28px 30px 24px;
}

.auth-card__logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #16305a, #0c1929);
  box-shadow: 0 6px 18px -6px rgba(12, 25, 41, 0.7);
}

.auth-card__logo .emblem {
  width: auto;
  height: 42px;
  animation: emblem-sway 5s ease-in-out infinite;
}

.auth-card__ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(77, 134, 240, 0.6);
  animation: ring-pulse 2.6s ease-out infinite;
}

@keyframes ring-pulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

.auth-card__title {
  font-size: 20px;
  letter-spacing: -0.02em;
}

.auth-card__subtitle {
  margin-bottom: 18px;
}

.auth-form .form-field input {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.auth-form .form-field input:focus {
  border-color: var(--color-primary-bright);
  box-shadow: 0 0 0 4px rgba(77, 134, 240, 0.18);
  outline: none;
}

.auth-form__submit {
  position: relative;
  overflow: hidden;
  min-height: 42px;
  background: linear-gradient(90deg, #2456c9, #4d86f0);
  border-color: transparent;
  letter-spacing: 0.01em;
}

.auth-form__submit::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: shine 3.2s ease-in-out infinite;
}

@keyframes shine {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}

.auth-card__note {
  margin-top: 16px;
  text-align: center;
}

/* Появление главной: карточки лесенкой уже есть (.page > *), счётчики — в скрипте. */

@media (prefers-reduced-motion: reduce) {
  .aurora__blob,
  .aurora__grid,
  .auth-card,
  .auth-card__ring,
  .auth-form__submit::after,
  .led--danger,
  .toast,
  .nav-progress--active,
  .tabs__panel:not([hidden]),
  .modal[open] {
    animation: none !important;
  }
}


/* Объёмное кольцо зон риска на главной: круг в фас, приподнятый над фоном. */
.donut-3d {
  position: relative;
  width: 176px;
  height: 176px;
  flex: none;
}

.donut-3d .donut--3d {
  position: absolute;
  inset: 0;
  width: 176px;
  height: 176px;
  overflow: visible;
}

.donut__gloss {
  fill: none;
  stroke-width: 18;
  pointer-events: none;
}

/* Фаска: тонкий тёмный ободок снаружи и светлый внутри — край читается как грань. */
.donut__bevel {
  fill: none;
  stroke-width: 1.2;
}

.donut__bevel--outer {
  stroke: rgba(16, 30, 54, 0.18);
}

.donut__bevel--inner {
  stroke: rgba(255, 255, 255, 0.85);
}

.donut-3d__mid {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.donut-3d__value {
  font-size: 30px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.donut-3d__caption {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .donut-3d .donut--3d {
    animation: donut-lift 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) both;
  }
}

@keyframes donut-lift {
  from { transform: translateY(6px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}


/* --- Вход: без шапки, заголовок над формой, живой фон v2 ------------ */

.app-shell--plain {
  grid-template-areas: "main";
  grid-template-rows: 1fr;
}

.app-shell--plain .app-header {
  display: none;
}

.app-shell--plain .app-main {
  min-height: 100vh;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.auth {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
}

.auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  text-align: center;
  animation: card-rise 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.auth__brand-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(214, 226, 245, 0.7);
}

.auth__brand-name {
  max-width: 720px;
  font-family: "Unbounded", var(--font-sans);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(90deg, #ffffff 0%, #dbe7ff 45%, #9cc0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 6px 24px rgba(77, 134, 240, 0.35));
}

/* Меш-градиент: три пятна цвета, слой медленно вращается и дышит. */
.aurora__mesh {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(40% 45% at 22% 30%, rgba(77, 134, 240, 0.55), transparent 70%),
    radial-gradient(35% 40% at 78% 25%, rgba(36, 86, 201, 0.5), transparent 70%),
    radial-gradient(45% 45% at 55% 80%, rgba(35, 161, 115, 0.32), transparent 70%),
    radial-gradient(30% 35% at 85% 75%, rgba(111, 84, 220, 0.35), transparent 70%);
  filter: blur(40px) saturate(1.2);
  animation: mesh-turn 28s linear infinite;
  will-change: transform;
}

@keyframes mesh-turn {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.12); }
  to { transform: rotate(360deg) scale(1); }
}

/* Пятна света — быстрее, чем раньше: движение должно быть видно. */
.aurora__blob--1 { animation-duration: 11s; }
.aurora__blob--2 { animation-duration: 13s; }
.aurora__blob--3 { animation-duration: 15s; }

/* Лента сияния проходит по диагонали. */
.aurora__band {
  position: absolute;
  top: -20%;
  left: -30%;
  width: 160%;
  height: 40%;
  background: linear-gradient(90deg, transparent, rgba(122, 168, 247, 0.22) 35%, rgba(35, 161, 115, 0.18) 55%, rgba(122, 168, 247, 0.2) 70%, transparent);
  filter: blur(34px);
  transform: rotate(-14deg);
  animation: band-sweep 16s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes band-sweep {
  from { transform: rotate(-14deg) translate(-8%, 0); opacity: 0.6; }
  to { transform: rotate(-10deg) translate(10%, 45%); opacity: 1; }
}

/* Эмблема водяным знаком: крупная, едва заметная, медленно дышит. */
.aurora__emblem {
  position: absolute;
  right: -6vmax;
  bottom: -10vmax;
  width: 62vmax;
  height: 62vmax;
  animation: emblem-breathe 12s ease-in-out infinite alternate;
}

.aurora__emblem .emblem {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.12;
  filter: blur(0.6px) saturate(0.7);
  animation: none;
}

@keyframes emblem-breathe {
  from { transform: rotate(-3deg) scale(1) translateY(0); }
  to { transform: rotate(3deg) scale(1.06) translateY(-2vmax); }
}

.aurora__grid {
  animation-duration: 18s;
}

.aurora__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(6, 12, 22, 0.55) 100%);
}

.auth-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px) saturate(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .aurora__mesh,
  .aurora__band,
  .aurora__emblem,
  .auth__brand {
    animation: none !important;
  }
}

/* --- Закреплённое меню и кнопка «наверх» --------------------------- */

/* Меню не уезжает при прокрутке: стоит под шапкой на всю высоту окна.
   Раньше при длинной странице колонка заканчивалась и под ней проступал
   светлый фон страницы. */
@media (min-width: 901px) {
  .app-sidebar {
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    align-self: start;
    overflow-y: auto;
  }

  /* Колонка меню на всю высоту страницы — даже если содержимое короче. */
  .app-shell:not(.app-shell--plain) {
    background: linear-gradient(90deg, #122a49 0, #122a49 var(--sidebar-width), transparent var(--sidebar-width));
  }
}

.to-top {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.14s ease, color 0.14s ease;
  backdrop-filter: blur(6px);
}

.to-top--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}

.to-top:focus-visible {
  outline: 2px solid var(--color-primary-bright);
  outline-offset: 2px;
}

.to-top svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* --- Подпись разработчика внизу меню -------------------------------- */

.app-sidebar {
  display: flex;
  flex-direction: column;
}

.app-sidebar .nav {
  flex: 0 0 auto;
}

.sidebar-credit {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding: 18px 12px 14px;
}

.sidebar-credit__line {
  display: block;
  height: 1px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, transparent, rgba(122, 168, 247, 0.55) 40%, rgba(255, 255, 255, 0.25) 70%, transparent);
}

.sidebar-credit__eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #63799a;
}

.sidebar-credit__name {
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--font-weight-medium);
  color: #dce6f5;
  background: linear-gradient(90deg, #ffffff 0%, #cfe0ff 60%, #9cc0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sidebar-credit__year {
  margin-top: 4px;
  font-size: 10.5px;
  color: #63799a;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .sidebar-credit {
    display: none;
  }
}

/* --- Состав плана: позиции построчно, подробности под строкой ------- */

/* Замечание заказчика от 26.08: в плане — перечень позиций построчно, а
   подробности читаются при раскрытии строки. Раскрытие живёт в адресе
   (`?position=`), поэтому это обычная ссылка, а не кнопка со скриптом. */
.plan-position__toggle {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.plan-position__toggle:hover {
  color: var(--color-primary-ink);
}

.plan-position__chevron {
  color: var(--color-text-muted);
}

.plan-position--open .plan-position__chevron {
  color: var(--color-primary-ink);
}

/* Наименование позиции длинное; элементы — второй строкой под ним, чтобы
   перечень оставался в ширину экрана. */
.plan-position__name {
  max-width: 520px;
  white-space: normal;
}

.plan-position__elements {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.plan-position--open > td {
  background: var(--color-primary-soft);
}

.plan-position-details > td {
  padding-top: 0;
  white-space: normal;
  background: var(--color-surface);
}

/* Подробности — справка внутри строки: остаётся на месте, когда перечень
   прокручивается вбок (как история ремонтов в карточке объекта). */
.position-detail {
  position: sticky;
  left: 0;
  max-width: 1100px;
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface-inset);
}

.position-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.position-detail__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Четыре ответа заказчика — что ремонтируем, когда ремонтировали, сколько
   стоит, когда делаем — в две колонки; на узком экране в одну. */
.position-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-3);
}

/* `min-width: 0` обязателен: без него колонка грида не сжимается уже своего
   содержимого, и таблица внутри блока вылезает на соседний. */
.position-detail__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow-x: auto;
}

.position-detail__subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.position-detail__table th,
.position-detail__table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

/* Заголовки таблиц реестров не переносятся; здесь колонка узкая — переносятся. */
.position-detail__table thead th {
  white-space: normal;
}

.position-detail__text {
  font-size: var(--font-size-sm);
}

.position-detail__facts {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.position-detail__facts dt {
  color: var(--color-text-muted);
}

.position-detail__actions {
  margin-top: var(--space-3);
}

@media (max-width: 720px) {
  .position-detail__facts {
    grid-template-columns: 1fr;
  }

  .position-detail__facts dd {
    margin-bottom: var(--space-2);
  }
}

/* Колонка отметок в перечне позиций плана: узкая, галочка по центру. */
.plan-positions__pick {
  width: 1%;
  text-align: center;
}

.plan-positions__bulk {
  align-items: center;
  margin-bottom: var(--space-3);
}