/* Токены дизайн-системы Steep — скопированы из docs/design/steep-style-reference.md
   (раздел «Quick Start — CSS Custom Properties») дословно.
   Адаптация для плотного финансового интерфейса — см. «Замечание по адаптации»
   в том же документе: display/heading-lg и коллаж артефактов здесь не используются,
   потолок заголовков — --text-heading (44px). */
:root {
  /* Colors */
  --color-ink-black: #17191c;
  --color-paper-white: #ffffff;
  --color-mist-gray: #f2f2f3;
  --color-fog-white: #fafafb;
  --color-slate-gray: #777b86;
  --color-ash-gray: #979799;
  --color-smoke-gray: #a3a6af;
  --color-blush-peach: #fbe1d1;
  --color-sienna-brown: #5d2a1a;

  /* Typography — Font Families */
  --font-signifier: 'Signifier', ui-serif, Georgia, 'Times New Roman', serif;
  --font-sohne: 'Sohne', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 15px;
  --leading-caption: 1.5;
  --text-body: 17px;
  --leading-body: 1.35;
  --text-body-lg: 20px;
  --leading-body-lg: 1.35;
  --text-subheading: 22px;
  --leading-subheading: 1.5;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.18;
  --tracking-heading-sm: -0.23px;
  --text-heading: 44px;
  --leading-heading: 1.3;
  --tracking-heading: -0.66px;
  --text-heading-lg: 64px;
  --leading-heading-lg: 1.3;
  --tracking-heading-lg: -0.96px;
  --text-display: 90px;
  --leading-display: 1.3;
  --tracking-display: -2.25px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-w430: 430;
  --font-weight-w450: 450;
  --font-weight-w480: 480;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-124: 124px;
  --spacing-128: 128px;
  --spacing-160: 160px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 20px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-cards: 24px;
  --radius-images: 12px;
  --radius-inputs: 16px;
  --radius-buttons: 9999px;
  --radius-smallcards: 16px;
  --radius-elevatedcards: 20px;

  /* Shadows */
  --shadow-subtle: oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 24px 0px;
  --shadow-subtle-2: oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 40px 0px;
  --shadow-subtle-3: rgba(4, 23, 43, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-card-mist: #f2f2f3;
  --surface-section-fog: #fafafb;
  --surface-accent-blush: #fbe1d1;
  --surface-elevated-white: #ffffff;
}

/* Базовый сброс и фон страницы */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-ink-black);
  font-family: var(--font-sohne);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
}

h1, h2, h3 {
  font-family: var(--font-signifier);
  font-weight: var(--font-weight-regular);
  margin: 0 0 var(--spacing-16);
}

/* Контейнер страницы */
.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-32);
}

/* Карточки */
.card {
  background: var(--surface-card-mist);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: none;
}

.card--accent {
  background: var(--surface-accent-blush);
  color: var(--color-sienna-brown);
}

/* Кнопки-пилюли */
.btn {
  display: inline-block;
  border-radius: var(--radius-buttons);
  padding: 0 var(--spacing-20);
  line-height: 40px;
  font-family: var(--font-sohne);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  background: var(--color-ink-black);
  color: var(--color-paper-white);
  border: 1px solid var(--color-ink-black);
  text-decoration: none;
  cursor: pointer;
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink-black);
  border: 1px solid var(--color-ink-black);
}

/* Денежные суммы: только табличные цифры и выравнивание, без цвета для знака */
.money {
  font-variant-numeric: tabular-nums;
  text-align: right;
  display: inline-block;
  white-space: nowrap;
}

/* Отрицательные суммы: знак минуса + более тяжёлое начертание.
   Цвет (Sienna Brown) не используется — по правилу дизайн-системы он
   допустим только на персиковом фоне (--surface-accent-blush). */
.money--negative {
  font-weight: var(--font-weight-medium);
}

/* Таблицы */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  font-family: var(--font-sohne);
  font-size: var(--text-caption);
  color: var(--color-ash-gray);
  font-weight: var(--font-weight-regular);
  text-align: left;
  padding: var(--spacing-8) var(--spacing-12);
  border-bottom: 1px solid #ececec;
}

td {
  font-family: var(--font-sohne);
  font-size: var(--text-body);
  padding: var(--spacing-8) var(--spacing-12);
  border-bottom: 1px solid #ececec;
}

/* Утилиты типографической шкалы — размер задаётся классом, шрифт и вес по
   умолчанию берёт h1/h2/h3 (Signifier 400) либо body (Sohne), см. правило
   «потолок заголовков — 44px» в steep-style-reference.md, раздел
   «Замечание по адаптации». */
.text-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-ash-gray);
}

.text-heading-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

.text-heading {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

/* Кабинет сотрудника (задача 7): три крупные цифры — начислено/доступно/выплачено. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
  margin: var(--spacing-24) 0 var(--spacing-32);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.stat-card__label {
  margin: 0;
}

.stat-card__value {
  font-family: var(--font-sohne);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-w450);
  width: 100%;
}

.table-wrap {
  overflow-x: auto;
}

.empty-note {
  color: var(--color-slate-gray);
}

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

/* Управление учётками (задача 8): несколько форм-действий в одной ячейке
   таблицы — раскладка, а не новый компонент, поэтому переиспользует .btn/
   .btn--ghost и токены отступов, а не заводит собственную палитру. */
.admin-users-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.admin-users-inline-form {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

/* Шапка (находка 4 финального ревью): «Nav Link» из дизайн-контракта —
   прозрачная полоса без фона, без тени и без разделителя. Ширина и отступы
   повторяют .page, чтобы ссылки шапки стояли на одной вертикали с содержимым. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-20) var(--spacing-32) 0;
  background: none;
  box-shadow: none;
  border: none;
}

.nav__link {
  font-family: var(--font-sohne);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink-black);
  text-decoration: none;
  padding: 2px 0;
}

.nav__link:hover {
  text-decoration: underline;
}

/* Название продукта — единственное, что стоит в шапке до полной
   аутентификации (см. base.html): у анонима и у сессии, застрявшей на
   обязательном шаге, шапка не имеет права называть ни логин, ни роль. */
.nav__brand {
  font-family: var(--font-sohne);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-black);
}

/* Разводит навигацию и блок «кто вошёл · выйти» по краям полосы. */
.nav__spacer {
  flex: 1 1 auto;
}

.nav__user {
  font-family: var(--font-sohne);
}

.nav__logout {
  margin: 0;
}

@media (max-width: 720px) {
  .nav {
    flex-wrap: wrap;
    gap: var(--spacing-12);
    padding: var(--spacing-16) var(--spacing-16) 0;
  }

  .nav__spacer {
    flex-basis: 100%;
  }
}