/* =============================================================================
 * Satfino — единый файл стилей интерфейса
 * -----------------------------------------------------------------------------
 * Назначение: единственный источник оформления серверного интерфейса. Сборки нет,
 * фреймворков нет, файл подключается напрямую: <link rel="stylesheet" href="/assets/app.css">.
 *
 * Нормативный документ: docs/UI_SYSTEM.md. Этот файл — его реализация, а не
 * самостоятельное решение. При расхождении прав документ, а не CSS.
 *
 * ПРАВИЛО ДОБАВЛЕНИЯ: новый компонент появляется в этом файле ТОЛЬКО после того,
 * как его роль записана в каталог примитивов docs/UI_SYSTEM.md §4. Копия
 * существующего компонента под другим классом — нарушение контракта (§1, §15).
 * Расширение выполняется вариантом `c-<компонент>--<вариант>`, а не новым классом.
 *
 * Ограничения, заложенные в файл:
 *   - все цвета, отступы, размеры шрифта — только через токены :root (§3);
 *     прямых значений цвета внутри правил компонентов нет;
 *   - светлая тема; тёмная отложена (docs/TASKS.md) и добавляется одним блоком
 *     prefers-color-scheme поверх токенов;
 *   - инструмент финансовый: без градиентов, без свечения, без анимаций дольше 150 мс;
 *   - цвет никогда не единственный носитель смысла (§13);
 *   - страница по горизонтали не прокручивается, прокручиваются таблицы (§14).
 *
 * Порядок секций:
 *   1. Токены
 *   2. Сброс и базовые элементы
 *   3. Каркас страницы
 *   4. Типографика и заголовок страницы
 *   5. Компоненты
 *   6. Утилиты
 *   7. Адаптивность
 *   8. Печать
 * ========================================================================== */


/* =============================================================================
 * 1. ТОКЕНЫ (docs/UI_SYSTEM.md §3)
 * Единственное место в файле, где допустимы конкретные значения цвета и размера.
 * ========================================================================== */

:root {
  /* --- Поверхности и границы ------------------------------------------- */
  --bg:             #f4f5f7;   /* фон страницы — слегка серый */
  --surface:        #ffffff;   /* карточки, таблицы, поля */
  --surface-muted:  #f7f8fa;   /* шапки таблиц, подложки внутри карточки */
  --border:         #e1e5ea;   /* обычная мягкая граница */
  --border-strong:  #c3cad3;   /* граница поля ввода, разделитель с нагрузкой */

  /* --- Текст ------------------------------------------------------------ */
  --text:           #1b2430;   /* основной, контраст к --surface ≈ 15:1 */
  --text-muted:     #58626f;   /* вторичный, контраст к --surface ≈ 5.9:1 */
  --text-inverse:   #ffffff;   /* на заливках --accent/--success/--danger */

  /* --- Смысловые цвета (каждый с подложкой -bg) ------------------------- */
  --accent:         #1f5fa8;   /* сдержанный деловой синий, ≈ 6.5:1 на белом */
  --accent-bg:      #e9f0f9;
  --success:        #1b7a4b;   /* ≈ 5.3:1 на белом */
  --success-bg:     #e6f4ec;
  --warning:        #8a5a00;   /* тёмная охра, ≈ 5.9:1 на белом */
  --warning-bg:     #fdf3e0;
  --danger:         #b3261e;   /* ≈ 6.5:1 на белом */
  --danger-bg:      #fbeae9;
  --info:           #145d7a;   /* ≈ 7.4:1 на белом */
  --info-bg:        #e7f1f6;

  /* --- Отступы, шаг 4px -------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* --- Типографика ------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-display: var(--font-sans);   /* заголовки; тема оформления может задать свой шрифт */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;   /* рабочая плотность CRM, не сайта */
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  clamp(22px, 1.2rem + 0.6vw, 28px);
  --leading-tight:  1.25;
  --leading-normal: 1.55;

  /* --- Скругления и тени (тени плоские, без ореола) ---------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.10);

  /* --- Прочее ------------------------------------------------------------ */
  --container-max: 1360px;
  /* Кольцо фокуса: разрыв цветом поверхности + контрастное кольцо акцента.
     var() внутри токена раскрывается в месте применения — тема остаётся сменной. */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* Служебные величины каркаса (не цвета, вынесены ради одного места правки). */
  --sidebar-width: 248px;
  --control-height: 36px;   /* минимальная область нажатия, §13 */
}


/* =============================================================================
 * 2. СБРОС И БАЗОВЫЕ ЭЛЕМЕНТЫ
 * ========================================================================== */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  /* Страница целиком по горизонтали не прокручивается (§14). clip сохраняет sticky. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: var(--leading-tight);
  font-family: var(--font-display);
}

p, ul, ol, dl, figure, pre, table {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

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

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

img, svg {
  max-width: 100%;
  vertical-align: middle;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

hr {
  height: 1px;
  margin: var(--space-5) 0;
  border: 0;
  background: var(--border);
}

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

/* Видимое кольцо фокуса для всего интерактивного (§13).
   Прозрачный outline оставляет контур в режиме forced-colors. */
:where(a, button, input, select, textarea, summary, dialog, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* Все переходы короче 150 мс — интерфейс не развлекает, а работает. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* =============================================================================
 * 3. КАРКАС СТРАНИЦЫ
 * Разметка: .c-layout > (.c-sidebar, .c-topbar, .c-content).
 * .c-demo-banner размещается выше .c-layout как полоса на всю ширину.
 * ========================================================================== */

.c-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  min-height: 100vh;
}

/* --- Боковое меню ------------------------------------------------------- */

.c-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
}

.c-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms linear, border-color 120ms linear;
}

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

/* Активный пункт: не только цвет — заливка, рамка и полужирное начертание (§13). */
.c-sidebar__link--active,
.c-sidebar__link[aria-current="page"] {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* --- Верхняя панель ------------------------------------------------------ */

.c-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 52px;
  padding: var(--space-2) var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* --- Рабочая область ----------------------------------------------------- */

.c-content {
  grid-area: content;
  min-width: 0;               /* обязательное условие, чтобы таблица не растягивала грид */
  width: 100%;
  max-width: var(--container-max);
  padding: var(--space-6);
  margin-inline: auto;
}

/* --- Переключатель языка -------------------------------------------------- */

/* Виден только текущий язык; остальные — в списке по нажатию. Работает на
   нативном <details>, без JavaScript (§2). Роль компонента та же — вариант, а
   не новый класс (§1). */
.c-lang-switch {
  position: relative;
  margin-inline-start: auto;
}

.c-lang-switch > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.c-lang-switch > summary::-webkit-details-marker {
  display: none;
}

/* Треугольник — признак того, что список раскрывается; цвет наследуется. */
.c-lang-switch > summary::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.c-lang-switch > summary:hover {
  background: var(--surface-muted);
}

.c-lang-switch[open] > summary {
  background: var(--surface-muted);
  border-color: var(--border-strong);
}

.c-lang-switch__menu {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  z-index: 50;
  min-width: 180px;
  margin-top: var(--space-1);
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.c-lang-switch__menu a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
}

.c-lang-switch__menu a:hover {
  background: var(--surface-muted);
  color: var(--text);
}

/* Текущий язык помечен заливкой и словом, а не только цветом (§13). */
.c-lang-switch__menu a[aria-current="true"] {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}

.c-lang-switch__code {
  margin-inline-start: auto;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.c-lang-switch__menu a[aria-current="true"] .c-lang-switch__code {
  color: inherit;
}

/* --- Полоса демонстрационного режима -------------------------------------- */

.c-demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning);
  color: var(--warning);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}


/* =============================================================================
 * 4. ТИПОГРАФИКА И ЗАГОЛОВОК СТРАНИЦЫ
 * ========================================================================== */

.c-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.c-page-header__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.c-page-header__subtitle {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 70ch;
}

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


/* =============================================================================
 * 5. КОМПОНЕНТЫ (каталог docs/UI_SYSTEM.md §4)
 * ========================================================================== */

/* --- 5.1 Карточка --------------------------------------------------------- */

.c-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.c-card + .c-card {
  margin-top: var(--space-4);
}

.c-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-lg);
  font-weight: 600;
}

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

.c-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Акцентная карточка: смысл несёт полоса слева, а не только оттенок. */
.c-card--accent {
  border-color: var(--accent);
  border-left-width: 3px;
}

/* Таблица внутри карточки не должна разрывать скругление. */
.c-card > .c-table-wrap {
  border: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* --- 5.2 Плитка показателя ------------------------------------------------ */

.c-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.c-stat__label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.c-stat__value {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

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

.c-stat--positive { border-left-color: var(--success); }
.c-stat--positive .c-stat__value { color: var(--success); }

.c-stat--negative { border-left-color: var(--danger); }
.c-stat--negative .c-stat__value { color: var(--danger); }

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

/* --- 5.3 Таблица ---------------------------------------------------------- */

/* Обёртка — единственное место горизонтальной прокрутки (§14). */
.c-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

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

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

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

.c-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.c-table thead th a {
  color: inherit;
  text-decoration: none;
}

.c-table thead th a:hover {
  color: var(--accent);
  text-decoration: underline;
}

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

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

.c-table tfoot td {
  background: var(--surface-muted);
  border-top: 1px solid var(--border-strong);
  font-weight: 600;
}

/* Числовая колонка: вправо и моноширинные цифры (§6, §9). */
.c-table__numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.c-table--compact th,
.c-table--compact td {
  padding: var(--space-2) var(--space-3);
}

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

.c-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}

.c-empty__title {
  font-size: var(--text-lg);
  font-weight: 600;
}

.c-empty__text {
  max-width: 60ch;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.c-empty__action {
  margin-top: var(--space-2);
}

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

.c-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.c-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-height);
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.c-pagination__item:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
  color: var(--text);
}

.c-pagination__item--current,
.c-pagination__item[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
  font-weight: 600;
  cursor: default;
}

.c-pagination__item[aria-disabled="true"] {
  background: var(--surface-muted);
  color: var(--text-muted);
  pointer-events: none;
}

/* --- 5.6 Панель фильтров ---------------------------------------------------- */

.c-filters {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.c-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.c-filters__row + .c-filters__row {
  margin-top: var(--space-3);
}

.c-filters__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 180px;
  flex: 1 1 180px;
}

/* Группа с кнопками панели фильтров не растягивается. */
.c-filters__group:has(> .c-btn),
.c-filters__group--actions {
  flex: 0 0 auto;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

/* Подсказка и ошибка под полем не должны влиять на выравнивание строки. Строка выровнена по
   нижней кромке инпутов (align-items: flex-end); помощь под полем вешается вне потока, иначе поле
   с подсказкой поднимает свой инпут над соседними, а кнопки садятся по нижней кромке самой высокой
   группы, а не по линии инпутов (баг на «Курсах валют»). На узком экране строка встаёт колонкой —
   там помощь снова в потоке. */
@media (min-width: 901px) {
  .c-filters__row .c-field { position: relative; margin-bottom: 0; }

  .c-filters__row .c-field__hint,
  .c-filters__row .c-field__error {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    margin-top: var(--space-1);
  }

  /* Резерв под висящую подсказку: и между перенесёнными строками, и под самой строкой. */
  .c-filters__row:has(.c-field__hint),
  .c-filters__row:has(.c-field__error) {
    row-gap: calc(var(--space-5) + 1.2em);
    margin-bottom: calc(var(--space-4) + 1.2em);
  }
}

/* --- 5.7 Кнопки (семантика — docs/UI_SYSTEM.md §5) --------------------------- */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms linear, border-color 120ms linear;
}

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

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

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

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

/* Тона. Заливка — только у действий, меняющих данные; контур — у остальных.
   primary — основное действие экрана, ровно одно (§5).
   danger  — необратимое действие, визуально отделено от прочих (§5). */
.c-btn--primary { background: var(--accent);     border-color: var(--accent);        color: var(--text-inverse); }
.c-btn--success { background: var(--success);    border-color: var(--success);       color: var(--text-inverse); }
.c-btn--danger  { background: var(--danger);     border-color: var(--danger);        color: var(--text-inverse); }
.c-btn--secondary { background: var(--accent-bg);  border-color: var(--accent);      color: var(--accent); }
.c-btn--warning   { background: var(--warning-bg); border-color: var(--warning);     color: var(--warning); }
.c-btn--neutral   { background: var(--surface);    border-color: var(--border-strong); color: var(--text); }

/* Наведение у залитых кнопок — затемнение рамки, тон не «прыгает». */
.c-btn--primary:hover,
.c-btn--success:hover,
.c-btn--danger:hover {
  border-color: var(--text);
  color: var(--text-inverse);
}

.c-btn--primary:hover { background: var(--accent); }
.c-btn--success:hover { background: var(--success); }
.c-btn--danger:hover  { background: var(--danger); }

/* Наведение у контурных кнопок — подложка уходит, тон остаётся. */
.c-btn--secondary:hover { background: var(--surface); color: var(--accent); }
.c-btn--warning:hover   { background: var(--surface); color: var(--warning); }
.c-btn--neutral:hover   { background: var(--surface-muted); color: var(--text); }

/* Навигация, выглядящая текстом. Не для изменяющих действий (§5). */
.c-btn--link {
  min-height: auto;
  padding: 0;
  background: none;
  border-color: transparent;
  color: var(--accent);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-btn--link:hover {
  background: none;
  color: var(--text);
}

/* --- 5.8 Меню действий ------------------------------------------------------ */

/* Строчное меню: действия строки таблицы или карточки. */
.c-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.c-actions > form {
  display: contents;
}

/* Выпадающее меню. Без JS работает на <details>/<summary>,
   с JS — через атрибут hidden. */
.c-actions__menu {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  z-index: 50;
  min-width: 200px;
  margin-top: var(--space-1);
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.c-actions__menu[hidden] {
  display: none;
}

.c-actions__menu a,
.c-actions__menu button {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.c-actions__menu a:hover,
.c-actions__menu button:hover {
  background: var(--surface-muted);
}

.c-actions__menu .c-actions__menu-danger {
  color: var(--danger);
}

.c-actions summary {
  list-style: none;
  cursor: pointer;
}

.c-actions summary::-webkit-details-marker {
  display: none;
}

/* --- 5.9 Поля формы (контракт формы — §10) ----------------------------------- */

.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

/* Подпись видна всегда; плейсхолдер подписью не является (§10). */
.c-field__label {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Маркер обязательности: цвет + сам символ в разметке (§13). */
.c-field__required {
  margin-inline-start: var(--space-1);
  color: var(--danger);
  font-weight: 700;
}

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

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

/* Ошибка рядом с полем, а не только сверху (§10). */
.c-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--danger-bg);
  border-inline-start: 2px solid var(--danger);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: var(--text-xs);
  font-weight: 600;
}

.c-input,
.c-select,
.c-textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-sm);
  transition: border-color 120ms linear;
}

.c-input:hover,
.c-select:hover,
.c-textarea:hover {
  border-color: var(--text-muted);
}

.c-input::placeholder,
.c-textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.c-input:disabled,
.c-select:disabled,
.c-textarea:disabled,
.c-input[readonly],
.c-textarea[readonly] {
  background: var(--surface-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Денежные и числовые значения — моноширинные цифры и выравнивание вправо. */
.c-input[type="number"],
.c-input[inputmode="decimal"],
.c-input[inputmode="numeric"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.c-select {
  padding-inline-end: var(--space-6);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--space-4) center, right var(--space-3) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.c-textarea {
  min-height: 96px;
  line-height: var(--leading-normal);
  resize: vertical;
}

/* Состояние ошибки: цвет + утолщение рамки без сдвига разметки (§13). */
.c-input[aria-invalid="true"],
.c-select[aria-invalid="true"],
.c-textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-bg);
  box-shadow: inset 0 0 0 1px var(--danger);
}

.c-checkbox,
.c-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  font-size: var(--text-sm);
  cursor: pointer;
}

.c-checkbox input,
.c-radio input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.c-checkbox input:disabled,
.c-radio input:disabled,
.c-checkbox:has(input:disabled),
.c-radio:has(input:disabled) {
  color: var(--text-muted);
  cursor: not-allowed;
}

.c-checkbox input[aria-invalid="true"],
.c-radio input[aria-invalid="true"] {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
}

/* --- 5.10 Сообщение --------------------------------------------------------- */

/* Рамка и подложка обязательны: смысл не держится на одном цвете текста (§13). */
.c-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border-strong);
  border-inline-start-width: 3px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--text-sm);
}

.c-alert--info    { background: var(--info-bg);    border-color: var(--info);    color: var(--info); }
.c-alert--success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.c-alert--warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.c-alert--danger  { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger); }

/* --- 5.11 Всплывающее уведомление -------------------------------------------- */

/* .c-flash — фиксированная область (aria-live). Тон задаёт вложенный .c-alert:
   второй компонент той же роли создавать запрещено (§1). */
.c-flash {
  position: fixed;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(380px, calc(100vw - var(--space-8)));
  pointer-events: none;
}

.c-flash > * {
  margin-bottom: 0;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

.c-flash:empty {
  display: none;
}

/* --- 5.12 Статус ------------------------------------------------------------- */

/* Рамка + подложка + текст: цвет не единственный носитель смысла (§8, §13). */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  background: var(--surface-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.c-badge--neutral { background: var(--surface-muted); border-color: var(--border-strong); color: var(--text-muted); }
.c-badge--info    { background: var(--info-bg);       border-color: var(--info);    color: var(--info); }
.c-badge--success { background: var(--success-bg);    border-color: var(--success); color: var(--success); }
.c-badge--warning { background: var(--warning-bg);    border-color: var(--warning); color: var(--warning); }
.c-badge--danger  { background: var(--danger-bg);     border-color: var(--danger);  color: var(--danger); }

/* --- 5.13 Деньги -------------------------------------------------------------- */

/* Сумма и валюта всегда вместе; цифры моноширинные (§6).
   Знак смысла обязан дублироваться подписью в разметке — цветом не ограничиваемся. */
.c-money {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.c-money--debt    { color: var(--danger); }
.c-money--credit  { color: var(--success); }
.c-money--expense { color: var(--danger); }
.c-money--income  { color: var(--success); }

/* Подсказка о конвертации доступна и без наведения — текстом рядом (§6). */
.c-money[title] {
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}

.c-money__rate {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

/* --- 5.14 Дата ---------------------------------------------------------------- */

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

.c-date[title] {
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}

/* --- 5.15 Диалог подтверждения -------------------------------------------------- */

/* Работает на нативном <dialog>. Без JS страница остаётся рабочей:
   тот же сценарий выполняется отдельной страницей подтверждения. */
.c-confirm {
  width: min(480px, calc(100vw - var(--space-8)));
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--text);
}

.c-confirm::backdrop {
  background: color-mix(in srgb, var(--text) 45%, transparent);
}

.c-confirm__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-lg);
  font-weight: 600;
}

.c-confirm__body {
  padding: var(--space-5);
  font-size: var(--text-sm);
}

.c-confirm__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Разрушающее подтверждение отделено визуально, а не только словами (§5). */
.c-confirm--danger {
  border-color: var(--danger);
}

.c-confirm--danger .c-confirm__header {
  background: var(--danger-bg);
  border-bottom-color: var(--danger);
  color: var(--danger);
}

/* --- 5.16 Вкладки ---------------------------------------------------------------- */

.c-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.c-tabs__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

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

/* Активная вкладка: подчёркивание + цвет, не только цвет (§13). */
.c-tabs__item--active,
.c-tabs__item[aria-current="page"],
.c-tabs__item[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* --- 5.17 Описание сущности ------------------------------------------------------ */

.c-dl {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.c-dl dt {
  color: var(--text-muted);
  font-weight: 600;
}

.c-dl dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- 5.18 Индикатор загрузки ------------------------------------------------------ */

/* Статичная заглушка: пульсация нарушила бы ограничение на анимации (§2 этого файла).
   Смысл несут форма и подпись «загружается» в разметке. */
.c-skeleton {
  display: block;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.c-skeleton--line {
  height: 12px;
  margin-bottom: var(--space-2);
}

.c-skeleton--line:last-child {
  width: 60%;
  margin-bottom: 0;
}

.c-skeleton--block {
  height: 120px;
  border-radius: var(--radius-md);
}


/* =============================================================================
 * 6. УТИЛИТЫ (редкие, префикс u-, docs/UI_SYSTEM.md §2)
 * ========================================================================== */

/* Текстовая альтернатива для иконок и служебных подписей (§13). */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-nowrap { white-space: nowrap; }
.u-right  { text-align: right; }
.u-muted  { color: var(--text-muted); }

/* Сетка плиток показателей и карточек. */
.u-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}


/* =============================================================================
 * 7. АДАПТИВНОСТЬ (docs/UI_SYSTEM.md §14)
 * До 900px боковое меню сворачивается в горизонтальную панель под шапкой.
 * Ничто из обязательного (поиск, фильтры, сортировка, пагинация, действия) не скрывается.
 * ========================================================================== */

@media (max-width: 900px) {
  .c-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "sidebar"
      "content";
  }

  .c-sidebar {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
    max-height: none;
    padding: var(--space-2) var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    position: static;
  }

  .c-sidebar__link {
    flex: 0 0 auto;
  }

  .c-topbar {
    padding: var(--space-2) var(--space-4);
  }

  .c-content {
    padding: var(--space-4);
  }

  .c-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .c-page-header__actions .c-btn {
    flex: 1 1 auto;
  }

  .c-filters__group {
    flex-basis: 100%;
  }

  .c-dl {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .c-dl dd + dt {
    margin-top: var(--space-3);
  }

  .c-flash {
    inset-inline: var(--space-3);
    width: auto;
  }

  /* Заголовки колонок не липнут на узком экране: прокрутка идёт внутри обёртки. */
  .c-table thead th {
    position: static;
  }
}

/* Сенсорный ввод: уменьшенный вариант кнопки возвращается к минимальной
   области нажатия — плотность строки не важнее попадания пальцем (§13). */
@media (pointer: coarse) {
  .c-btn--sm,
  .c-lang-switch > summary {
    min-height: var(--control-height);
  }
}

@media (max-width: 560px) {
  .c-card__body,
  .c-card__header,
  .c-card__footer {
    padding: var(--space-4);
  }

  .c-actions {
    width: 100%;
  }

  .c-actions .c-btn {
    flex: 1 1 auto;
  }
}


/* =============================================================================
 * 8. ПЕЧАТЬ (печатная форма счёта и выписки)
 * Скрыты навигация, действия и переключатель языка; убраны тени и заливки;
 * таблица остаётся читаемой на бумаге.
 * ========================================================================== */

@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-muted: #ffffff;
    --border: #999999;
    --border-strong: #333333;
    --text: #000000;
    --text-muted: #333333;
  }

  body {
    background: none;
    font-size: 11pt;
    overflow: visible;
  }

  .c-sidebar,
  .c-topbar,
  .c-lang-switch,
  .c-demo-banner,
  .c-actions,
  .c-page-header__actions,
  .c-pagination,
  .c-filters,
  .c-tabs,
  .c-flash,
  .c-skeleton,
  .c-btn {
    display: none !important;
  }

  .c-layout {
    display: block;
    min-height: 0;
  }

  .c-content {
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .c-card,
  .c-table-wrap,
  .c-stat,
  .c-empty,
  .c-confirm {
    box-shadow: none;
    border-radius: 0;
    background: none;
  }

  .c-card {
    border: 0;
    page-break-inside: avoid;
  }

  .c-card__footer,
  .c-table thead th,
  .c-table tfoot td {
    background: none;
  }

  .c-table-wrap {
    overflow: visible;
    border: 0;
  }

  .c-table {
    width: 100%;
    font-size: 10pt;
    border-collapse: collapse;
  }

  .c-table th,
  .c-table td {
    padding: 4pt 6pt;
    border: 1px solid var(--border);
  }

  .c-table thead th {
    position: static;
    color: var(--text);
    text-transform: none;
  }

  .c-table thead {
    display: table-header-group;
  }

  .c-table tr {
    page-break-inside: avoid;
  }

  .c-badge,
  .c-alert {
    border: 1px solid var(--border-strong);
    background: none;
    color: var(--text);
  }

  .c-money,
  .c-date {
    color: var(--text);
    border-bottom: 0;
  }

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

/* ==========================================================================
   ДОПОЛНЕНИЯ МАКЕТА
   Варианты уже объявленных примитивов (UI_SYSTEM §4): разделы бокового меню,
   публичная страница выписки и страница входа. Новых ролей не вводят.
   ========================================================================== */

.c-sidebar__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-5);
}

.c-sidebar__title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 0 var(--space-3);
    margin-bottom: var(--space-1);
}

.c-lang-switch__menu a.is-active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

.c-content--public {
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

.c-public-footer {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
}

body.is-auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: var(--bg);
}

.c-auth {
    width: min(24rem, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.c-auth h1 {
    margin-top: 0;
    font-size: var(--text-xl);
}

/* Сетка плиток показателей: используется на сводке, в кассе и в экономике проекта. */
.u-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-3);
}

@media (max-width: 900px) {
    .c-sidebar__section {
        flex-direction: row;
        margin-bottom: 0;
        gap: var(--space-1);
    }

    .c-sidebar__title {
        display: none;
    }
}

@media print {
    .c-lang-switch,
    .c-public-footer {
        display: none !important;
    }
}

/* Отступ сверху между блоками одного экрана. */
.u-mt { margin-top: var(--space-3); }

/* --- Настройки: подразделы, группы выбора, логотип ---------------------------- */
.c-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .c-settings { grid-template-columns: 1fr; } }
.c-subnav { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: var(--space-2); }
.c-subnav__link { padding: var(--space-2) var(--space-3); border-radius: 6px; color: var(--text); text-decoration: none; font-size: var(--text-sm); }
.c-subnav__link:hover { background: var(--surface-muted); }
.c-subnav__link--active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.c-choice-group { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.c-choice { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.c-field__preview { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); }
.c-brand-logo { max-height: 48px; max-width: 200px; }
.c-topbar__logo { height: 28px; width: auto; margin-right: var(--space-2); vertical-align: middle; }

/* --- Жизненный цикл: кнопки на карточке и в таблице ---------------------------- */
.c-lifecycle-actions { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.c-lifecycle-actions form, .c-table__actions form { display: inline; margin: 0; }
.c-table__actions { white-space: nowrap; display: flex; gap: var(--space-2); justify-content: flex-end; }
.c-btn--danger { background: var(--danger); color: var(--text-inverse); border-color: var(--danger); }
.c-btn--danger:hover { filter: brightness(0.92); }

/* --- Справочники: архивные строки, многострочные ячейки, две колонки -------------- */
.c-table tr.is-archived td { color: var(--text-muted); }
.u-prewrap { white-space: pre-wrap; }
.u-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .u-grid--2 { grid-template-columns: 1fr; } }

/* --- Быстрые периоды и размер страницы ----------------------------------------- */
.c-filters__presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.c-chip { display: inline-block; padding: 2px var(--space-3); border: 1px solid var(--border-strong); border-radius: 999px; font-size: var(--text-sm); color: var(--text); text-decoration: none; background: var(--surface); }
.c-chip:hover { background: var(--surface-muted); }
.c-chip--active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.c-pagination__size { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 var(--space-4); }
.c-select--sm { padding: 2px var(--space-2); font-size: var(--text-sm); width: auto; }

/* --- Инвойсы: действия, документ, печать ------------------------------------- */
.c-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.c-actions-row form { margin: 0; }
.c-inline-form { display: inline-flex; gap: var(--space-2); align-items: center; }
.c-inline-form .c-input { width: 260px; }
.c-input--num { max-width: 120px; text-align: right; }
.c-lines .c-input { min-width: 0; }
.c-link-issued { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; }
.c-link-issued .c-input { flex: 1; }
/* QR-код второго фактора: сканеры читают его только на светлом фоне — и в тёмной теме тоже. */
.c-qr { display: block; width: 220px; max-width: 100%; height: auto; margin: var(--space-3) 0; padding: var(--space-2); background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.c-codes { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-2) var(--space-6); margin: var(--space-3) 0; padding: 0; list-style: none; }
.c-document { max-width: 860px; margin: 0 auto; background: var(--surface); padding: var(--space-8); border: 1px solid var(--border); border-radius: 8px; }
.c-document__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.c-document__title { margin: 0 0 var(--space-2); font-size: 22px; }
.c-document__parties { margin-bottom: var(--space-6); }
.c-document__lines { margin-bottom: var(--space-6); }
.c-document__total { font-size: var(--text-lg, 16px); }
.c-document__pay { background: var(--surface-muted); padding: var(--space-4); border-radius: 8px; margin-bottom: var(--space-4); }
.c-document__bank { white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--text-sm); margin: var(--space-2) 0; }
@media print {
  .u-no-print, .c-lang-switch, .c-public-footer, .c-demo-banner { display: none !important; }
  .c-document { border: 0; padding: 0; }
  body { background: #fff; }
}

/* --- Редактор переводов ------------------------------------------------------- */
.c-translation__key { font-family: var(--font-mono); font-size: var(--text-sm); }
.c-translation__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.c-translation__row:last-child { border-bottom: 0; }
.c-translation__locale { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.c-translation__source { margin: 0 0 var(--space-1); font-size: var(--text-xs); }
.c-translation__row.is-overridden .c-input { border-color: var(--warning); }

/* Одна кнопка сохранения на всю страницу переводов — липкая внизу, чтобы не искать её после сотни строк. */
.c-actions--sticky { position: sticky; bottom: 0; z-index: 20; margin-top: var(--space-4); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

/* --- Публичный лендинг -------------------------------------------------------- */
body.is-landing { min-height: 100vh; background: var(--bg); }
.c-landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-6);
    gap: var(--space-6);
}
.c-landing__inner { width: min(40rem, calc(100vw - 2 * var(--space-4))); display: flex; flex-direction: column; gap: var(--space-4); }
.c-landing__brand { margin: 0; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-size: var(--text-sm); }
.c-landing__title { margin: 0; font-size: var(--text-2xl); line-height: 1.15; }
.c-landing__lead { margin: 0; color: var(--text-muted); font-size: var(--text-lg); }
.c-landing__actions { margin: var(--space-2) 0 0; }
.c-landing__footer { color: var(--text-muted); font-size: var(--text-sm); }

/* --- Раздел «Оформление»: выбор темы (OD-10) --------------------------------- */
.c-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.c-theme-option {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2) var(--space-3);
    padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
    background: var(--surface);
}
.c-theme-option.is-active { border-color: var(--accent); box-shadow: var(--focus-ring); }
.c-theme-option input { grid-row: 1; }
.c-theme-option__swatch { grid-row: 1; width: 100%; grid-column: 1 / -1; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.c-theme-option__name { grid-column: 2; font-weight: 600; }
.c-theme-option__badge { grid-column: 3; font-size: var(--text-xs); color: var(--accent); }
/* Превью палитр тем: полоса из фона, поверхности, текста и акцента концепции. */
.c-theme-swatch--base { background: linear-gradient(90deg, #f4f5f7 0 40%, #ffffff 40% 70%, #1f5fa8 70% 100%); }
.c-theme-swatch--grossbuh { background: linear-gradient(90deg, #e6e2d9 0 40%, #fbfaf7 40% 70%, #7d2418 70% 100%); }
.c-theme-swatch--terminal { background: linear-gradient(90deg, #ffffff 0 40%, #eef1f4 40% 70%, #111318 70% 100%); }
.c-theme-swatch--reika { background: linear-gradient(90deg, #eef1f4 0 40%, #e3e7ec 40% 70%, #28313d 70% 100%); }


/* =============================================================================
 * 9. ОБНОВЛЕНИЕ ОФОРМЛЕНИЯ (сентябрь 2026)
 * Каркас остаётся общим для всех тем. Здесь то, что раньше выглядело «типовым»:
 * тёмная тема базового пака, шрифт цифр, иконки разделов, нижние вкладки на
 * телефоне и развязка бренда клиента с темой оформления.
 * Все значения — через токены: пак темы меняет значения, но не эти правила.
 * ========================================================================== */

:root {
  /* Шрифт цифр: суммы, даты, номера. Пак темы подменяет одной строкой. */
  --font-numeric: var(--font-mono);
  /* Характер, который раньше был жёстко вписан в компоненты. */
  --stat-value-size: var(--text-xl);
  --stat-value-weight: 600;
  --label-transform: uppercase;
  --badge-radius: var(--radius-sm);
  /* Бренд клиента живёт отдельно от темы: тема эти токены не трогает. */
  --brand-primary: var(--accent);
  --brand-accent: var(--info);
  /* Подложка навигации: по умолчанию обычная поверхность. */
  --sidebar-nav-bg: var(--surface);
  --sidebar-nav-text: var(--text);
}

/* --- 9.1 Тёмная тема базового пака ----------------------------------------- */
:root[data-theme="dark"] {
  --bg:            #10141a;
  --surface:       #171d25;
  --surface-muted: #1e252e;
  --border:        #2a323c;
  --border-strong: #3b4552;
  --text:          #e7ecf2;
  --text-muted:    #98a2b0;
  --text-inverse:  #10141a;
  --accent:        #6fa8e0;
  --accent-bg:     #14293d;
  --success:       #5fbf8c;
  --success-bg:    #123322;
  --warning:       #d6b063;
  --warning-bg:    #332712;
  --danger:        #e08d86;
  --danger-bg:     #3a1c1a;
  --info:          #7fc0d6;
  --info-bg:       #122b33;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .c-qr {
  /* Сканеры читают код только на светлом фоне — подложка остаётся белой. */
  background: #ffffff;
}

/* --- 9.2 Цифры -------------------------------------------------------------- */
.c-stat__value,
.c-money,
.c-date,
.c-table__numeric,
.c-pagination__item,
.c-translation__key {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

.c-stat__value {
  font-size: var(--stat-value-size);
  font-weight: var(--stat-value-weight);
  letter-spacing: -0.01em;
}

.c-stat__label,
.c-table thead th {
  text-transform: var(--label-transform);
}

.c-badge {
  border-radius: var(--badge-radius);
}

/* --- 9.3 Иконки разделов ---------------------------------------------------- */
/* Спрайт /assets/icons.svg, символ i-<data-key> пункта меню. Без иконки пункт
   остаётся рабочим: смысл несёт подпись, иконка помогает узнаванию (§13). */
.c-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.c-sidebar__link--active .c-icon,
.c-sidebar__link[aria-current="page"] .c-icon {
  color: currentColor;
}

/* --- 9.4 Навигация: подложку задаёт тема ----------------------------------- */
.c-sidebar {
  background: var(--sidebar-nav-bg);
}

.c-sidebar__link {
  color: var(--sidebar-nav-text);
}

/* --- 9.5 Телефон: разделы уходят в нижнюю панель вкладок -------------------- */
/* Палец достаёт до низа экрана, шапка остаётся наверху. Ничего не скрывается:
   панель прокручивается по горизонтали, как и боковое меню раньше (§14). */
@media (max-width: 640px) {
  .c-sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    flex-direction: row;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .c-sidebar__section {
    flex-direction: row;
    gap: var(--space-1);
    margin-bottom: 0;
  }

  .c-sidebar__link {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 64px;
    min-height: 52px;
    padding: var(--space-1) var(--space-2);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
  }

  .c-content {
    padding-bottom: 88px;
  }

  /* Заголовок экрана крупнее: на телефоне он единственный ориентир. */
  .c-page-header__title {
    font-size: 26px;
  }
}

/* --- 9.6 Бренд клиента отдельно от темы ------------------------------------ */
/* Тема отвечает за рабочий интерфейс, бренд — за то, что видит получатель.
   Токены --brand-* задаются в макете из настроек компании и нигде не
   перекрывают --accent: смена бренда не ломает контраст темы. */
.c-landing__brand,
.c-document__title {
  color: var(--brand-primary);
}

.c-document__pay {
  border-inline-start: 3px solid var(--brand-accent);
}

.c-brand-logo,
.c-topbar__logo {
  color: var(--brand-primary);
}

/* --- 9.7 Навигация: приглушённый текст отдельным токеном ------------------- */
/* У тёмной рейки --text-muted нечитаем на подложке навигации: контраст 2.3:1.
   Подписи групп и иконки берут свой токен — тема задаёт его вместе с подложкой. */
:root {
  --sidebar-nav-muted: var(--text-muted);
}

.c-sidebar .c-sidebar__title,
.c-sidebar .c-icon {
  color: var(--sidebar-nav-muted);
}

/* --- 9.8 Телефон: шапка переносится, а не уезжает за экран ----------------- */
/* Страница по горизонтали не прокручивается (§14): служебные кнопки и
   переключатель языка переходят во вторую строку, ничего не скрывается. */
@media (max-width: 640px) {
  .c-topbar {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
  }

  .c-topbar strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Слоган на телефоне не нужен: его место занимает заголовок экрана. */
  .c-topbar > .u-muted {
    display: none;
  }

  .c-topbar > .c-lang-switch {
    order: 3;
    margin-inline-start: 0;
  }

  .c-topbar > .c-btn {
    order: 4;
    flex: 1 1 auto;
  }
}

/* --- 9.9 Публичный документ на телефоне ------------------------------------ */
/* Таблица строк инвойса шире экрана, а страница по горизонтали не
   прокручивается (§14) — значит прокручивается таблица. Обёртка
   .c-table-wrap в документе не рисует вторую рамку: границу держит сам лист. */
.c-document .c-table-wrap {
  border: 0;
  border-radius: 0;
  background: none;
}

@media (max-width: 640px) {
  .c-document {
    padding: var(--space-4);
  }

  /* Резерв для печатных форм, где обёртки в разметке нет. */
  .c-document__lines {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Область нажатия служебных контролов — как у остальных органов управления.
     Переключатель языка и «Печать» стоят рядом, поэтому высота у них общая. */
  .c-lang-switch > summary,
  .c-btn--sm {
    min-height: var(--control-height);
  }

  .c-lang-switch > summary {
    padding: 0 var(--space-3);
  }
}


/* =============================================================================
 * 10. ВИЗУАЛИЗАЦИЯ ДАННЫХ
 * Графики рисуются разметкой и CSS: ни библиотек, ни сборки, ни JavaScript —
 * страница обязана работать без сценариев (§2). Значения приходят инлайновыми
 * custom properties (--v, --h, --w, --slices), цвета — только из токенов.
 * Переключатель вида (диаграмма / гистограмма) — нативные radio + CSS.
 * Цвет никогда не единственный носитель смысла (§13): у каждого графика есть
 * легенда с подписями и таблица-источник.
 * ========================================================================== */

:root {
  /* Палитра серий. Порядок = приоритет; тема переопределяет значения. */
  --chart-1: var(--accent);
  --chart-2: var(--info);
  --chart-3: var(--success);
  --chart-4: var(--warning);
  --chart-5: var(--danger);
  --chart-6: var(--text-muted);
  --chart-track: var(--surface-muted);
  --chart-grid: var(--border);
}

/* --- 10.1 Оболочка -------------------------------------------------------- */

.c-chart {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.c-chart__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.c-chart__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.c-chart__hint {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  max-width: 60ch;
}

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

.c-chart__view {
  display: none;
  gap: var(--space-5);
}

/* Единственный вид показывается без переключателя. */
.c-chart__views > .c-chart__view:only-child {
  display: grid;
}

/* --- 10.2 Переключатель вида ---------------------------------------------- */
/* Радиокнопки стоят первыми детьми .c-chart, поэтому и подписи, и панели
   выбираются соседним комбинатором — без JavaScript и без перезагрузки. */

.c-chart__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.c-chart__switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.c-chart__switch label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.c-chart__switch label:hover {
  color: var(--text);
}

.c-chart__radio:nth-of-type(1):checked ~ .c-chart__header .c-chart__switch label:nth-of-type(1),
.c-chart__radio:nth-of-type(2):checked ~ .c-chart__header .c-chart__switch label:nth-of-type(2),
.c-chart__radio:nth-of-type(3):checked ~ .c-chart__header .c-chart__switch label:nth-of-type(3) {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text);
}

.c-chart__radio:nth-of-type(1):focus-visible ~ .c-chart__header .c-chart__switch label:nth-of-type(1),
.c-chart__radio:nth-of-type(2):focus-visible ~ .c-chart__header .c-chart__switch label:nth-of-type(2),
.c-chart__radio:nth-of-type(3):focus-visible ~ .c-chart__header .c-chart__switch label:nth-of-type(3) {
  box-shadow: var(--focus-ring);
}

.c-chart__radio:nth-of-type(1):checked ~ .c-chart__views > .c-chart__view:nth-child(1),
.c-chart__radio:nth-of-type(2):checked ~ .c-chart__views > .c-chart__view:nth-child(2),
.c-chart__radio:nth-of-type(3):checked ~ .c-chart__views > .c-chart__view:nth-child(3) {
  display: grid;
}

/* --- 10.3 Легенда и таблица-источник ------------------------------------- */

.c-chart__legend {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
  font-size: var(--text-sm);
}

.c-chart__legend-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.c-chart__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--chart-track);
}

.c-chart__legend-value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.c-chart__legend-share {
  grid-column: 2 / -1;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.c-chart__data {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  font-size: var(--text-sm);
}

.c-chart__data > summary {
  color: var(--accent);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
}

/* --- 10.4 Пончик ---------------------------------------------------------- */

.c-donut {
  --size: 190px;
  width: var(--size);
  height: var(--size);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--slices, var(--chart-track));
  display: grid;
  place-items: center;
}

.c-donut__hole {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: var(--surface);
  text-align: center;
}

.c-donut__value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.1;
}

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

/* --- 10.5 Гистограмма (вертикальные столбики) ---------------------------- */

.c-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--space-2);
  min-height: 180px;
  padding-top: var(--space-6);
  border-bottom: 1px solid var(--chart-grid);
}

.c-bars__item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-2);
  min-width: 0;
  height: 100%;
  text-align: center;
}

/* Трек столбика — определённая высота: только от неё разрешается процент --h. */
.c-bars__track {
  position: relative;
  height: 100%;
  min-height: 0;
}

.c-bars__stack {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  height: var(--h, 0%);
  min-height: 2px;
}

.c-bars__seg {
  flex: var(--v, 1);
  background: var(--color, var(--chart-1));
  border-radius: 2px 2px 0 0;
}

.c-bars__label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Подпись значения над столбиком: цифра важнее пикселя высоты. */
.c-bars__value {
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--h, 0%) + 3px);
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- 10.6 Рейтинг (горизонтальные полосы) -------------------------------- */

.c-hbars {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.c-hbars__item {
  display: grid;
  grid-template-columns: minmax(96px, 26%) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.c-hbars__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.c-hbars__track {
  height: 14px;
  background: var(--chart-track);
  border-radius: 2px;
}

.c-hbars__fill {
  display: block;
  width: var(--w, 0%);
  min-width: 2px;
  height: 100%;
  background: var(--color, var(--chart-1));
  border-radius: 2px;
}

.c-hbars__value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* --- 10.7 Одна стопка на всю ширину -------------------------------------- */

.c-stack {
  display: flex;
  gap: 2px;
  height: 34px;
  overflow: hidden;
}

.c-stack__seg {
  flex: var(--v, 1);
  min-width: 3px;
  background: var(--color, var(--chart-1));
  border-radius: 2px;
}

/* --- 10.8 Линия и область ------------------------------------------------ */

.c-line {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

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

.c-line__area {
  fill: var(--chart-1);
  opacity: 0.12;
}

.c-line__path {
  fill: none;
  stroke: var(--chart-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.c-line__dot {
  fill: var(--surface);
  stroke: var(--chart-1);
  stroke-width: 2;
}

.c-line__axis {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Спарклайн: тот же примитив в строке таблицы. */
.c-line--spark {
  width: 110px;
  height: 28px;
}

/* --- 10.9 Мера и цель (покрытие, пакеты часов) --------------------------- */

.c-meter {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.c-meter__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.c-meter__value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.c-meter__track {
  position: relative;
  height: 16px;
  background: var(--chart-track);
  border-radius: 2px;
}

.c-meter__fill {
  display: block;
  width: var(--w, 0%);
  min-width: 2px;
  height: 100%;
  background: var(--color, var(--chart-3));
  border-radius: 2px;
}

/* Цель — засечка, а не цвет: её видно и в монохроме. */
.c-meter__target {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--at, 100%);
  width: 2px;
  background: var(--text);
}

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

/* --- 10.10 Водопад (экономика проекта) ---------------------------------- */

.c-waterfall {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-3);
  min-height: 200px;
}

.c-waterfall__item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-2);
  min-width: 0;
  text-align: center;
}

.c-waterfall__col {
  position: relative;
}

.c-waterfall__bar {
  position: absolute;
  inset-inline: 12%;
  top: var(--top, 0%);
  height: var(--h, 10%);
  background: var(--color, var(--chart-1));
  border-radius: 2px;
}

.c-waterfall__cap {
  position: absolute;
  inset-inline: 12%;
  top: var(--top, 0%);
  margin-top: -18px;
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- 10.11 Раскладка «график + легенда» --------------------------------- */

.c-chart__split {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

@media (max-width: 760px) {
  .c-chart__split {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-4);
  }

  .c-chart__legend {
    width: 100%;
  }

  .c-donut {
    --size: 160px;
  }

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

  .c-hbars__track {
    grid-column: 1 / -1;
  }

  .c-bars__value {
    display: none;
  }
}

@media print {
  .c-chart__switch,
  .c-chart__data > summary {
    display: none !important;
  }

  .c-chart__view {
    display: grid !important;
    break-inside: avoid;
  }

  .c-chart__data[open],
  .c-chart__data {
    display: block;
  }
}


/* =============================================================================
 * 11. ПУБЛИЧНАЯ ВЫПИСКА (варианты документа .c-document, UI_SYSTEM §4)
 * Выписка — не экран системы, а документ, который получатель читает и по
 * которому платит. Поэтому: сначала ответ («сколько и почему»), затем разбор,
 * затем движение, затем реквизиты. Новых ролей нет — варианты .c-document
 * и .c-table, плюс карточная раскладка таблицы на телефоне.
 * ========================================================================== */

.c-document--statement {
  max-width: 900px;
}

/* --- 11.1 Шапка документа: кто прислал ------------------------------------ */

.c-document__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.c-document__brand-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.c-document__brand-contacts {
  display: grid;
  gap: 2px;
  margin-inline-start: auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: end;
}

/* --- 11.2 Ответ: главное число и что с ним делать ------------------------- */

.c-document__answer {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.c-document__answer-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.c-document__answer-value {
  font-family: var(--font-numeric);
  font-size: clamp(30px, 1.8rem + 1.2vw, 44px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.c-document__answer-note {
  max-width: 64ch;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.c-document__answer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Смысл несут слово и засечка слева, а не только оттенок (§13). */
.c-document__answer--debt    { border-inline-start-color: var(--warning); }
.c-document__answer--credit  { border-inline-start-color: var(--success); }
.c-document__answer--settled { border-inline-start-color: var(--border-strong); }

/* --- 11.3 Реквизиты документа --------------------------------------------- */

.c-document__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}

.c-document__meta dt {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.c-document__meta dd {
  margin: 0;
  font-weight: 600;
}

/* --- 11.4 Разделы --------------------------------------------------------- */

.c-document__section {
  margin-top: var(--space-7);
}

.c-document__section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.c-document__section-hint {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.c-document__footer {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* --- 11.5 Группы строк в таблице (месяц, проект) -------------------------- */

.c-table__group th {
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  text-transform: var(--label-transform);
}

.c-table__subtotal td {
  border-top: 1px solid var(--border-strong);
  font-weight: 600;
}

/* --- 11.6 Таблица карточками на телефоне ---------------------------------- */
/* Вместо горизонтальной прокрутки строка становится карточкой: подпись поля
   берётся из data-label. Прокрутка остаётся резервом для широких таблиц. */

@media (max-width: 640px) {
  .c-table--stacked thead {
    display: none;
  }

  .c-table--stacked tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
  }

  .c-table--stacked td {
    padding: 0;
    border: 0;
  }

  .c-table--stacked td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--text-muted);
  }

  /* Первая ячейка — заголовок карточки, последняя — итог строки. */
  .c-table--stacked td:first-child {
    font-weight: 600;
  }

  .c-table--stacked td:first-child::before,
  .c-table--stacked td:last-child::before {
    content: none;
  }

  .c-table--stacked td:last-child {
    grid-row: 1;
    grid-column: 2;
    text-align: end;
    font-weight: 600;
  }

  .c-table--stacked .c-table__subtotal td,
  .c-table--stacked .c-table__group th {
    padding: var(--space-2) 0;
  }

  .c-document__answer {
    padding: var(--space-4);
  }
}

@media print {
  .c-document__answer {
    background: none;
  }

  .c-document__section {
    break-inside: avoid;
  }
}

/* --- 11.7 Панель документа ------------------------------------------------- */
/* Язык и печать — служебные действия над документом, а не часть письма.
   Собраны в одну строку внутри листа, по правому краю, и не печатаются. */
.c-document__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.c-document__toolbar .c-lang-switch {
  margin-inline-start: 0;
}

/* --- Отключаемый баннер демо-данных: крестик справа ------------------------- */
.c-demo-banner__close { margin-left: auto; color: inherit; text-decoration: none; font-weight: 600; padding: 0 var(--space-2); line-height: 1; }
.c-demo-banner__close:hover { color: var(--text); }

/* --- Курсы валют в шапке ---------------------------------------------------- */
/* Быстрый взгляд «сколько стоит валюта» рядом с переключателем языка. Значения —
   из справочника курсов (§4), выдумывать нельзя. Прижаты вправо; язык и выход идут
   следом с обычным зазором шапки, поэтому у соседнего .c-lang-switch авто-отступ снят. */
.c-topbar__rates { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.c-topbar__rates ~ .c-lang-switch { margin-inline-start: 0; }
.c-topbar__rate { display: inline-flex; align-items: baseline; gap: var(--space-1); font-size: var(--text-xs); white-space: nowrap; }
.c-topbar__rate-pair { color: var(--text-muted); font-weight: 600; }
.c-topbar__rate .c-money { font-size: var(--text-xs); }
@media (max-width: 900px) { .c-topbar__rates { display: none; } }

/* --- Произвольный диапазон периода выписки --------------------------------- */
.c-statement-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.c-statement-range__field { display: grid; gap: 2px; font-size: var(--text-xs); }