/*
 * Общая шапка клиента. Разметку строит js/header.js — здесь только её стили.
 *
 * Раньше эти правила лежали в landing.css, а экраны авторизации держали свою
 * урезанную копию в auth.css. Шапка одна на все клиентские страницы, поэтому
 * и стили у неё одни: разъехавшись по файлам, они разойдутся и по виду.
 *
 * ЦВЕТА, ШРИФТЫ И РАЗМЕРЫ — ТОЛЬКО ИЗ tokens.css (правило 4).
 */

/*
 * Шапка остаётся выше содержимого на всех страницах: sticky прижимает её
 * к верху при прокрутке, z-index держит над содержимым — иначе карточки
 * и фотографии проезжают поверх неё.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /*
   * В прототипе шапка полупрозрачная с размытием — rgba(242,242,240,0.92).
   * Значения с альфой в токенах нет, поэтому фон сплошной.
   */
  background: var(--color-background);
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  /* В прототипе шапка 72px; ступени 72 в spacing нет, ближайшая — 64. */
  min-height: var(--space-16);
}

/*
 * Подпись рядом с логотипом — из прототипа («Онлайн-запись» в шапке формы
 * записи и экрана подтверждения). Появляется только там, где страница
 * её задала.
 */
.site-header__tagline {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-neutral-500);
}

/* ============================================================ НАВИГАЦИЯ */

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

.site-nav__link {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-muted);
}

.site-nav__link:hover { color: var(--color-link); }

/* Текущий раздел: подсвечен и не ведёт никуда — это уже открытая страница. */
.site-nav__link[aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/*
 * В панели текущий раздел ещё и подчёркнут акцентом — так он показан
 * в прототипе («Дизайн-система записи.dc.html», раздел «05 — Компоненты ·
 * админ»: `border-bottom: 2px solid` у активного пункта). Толщина взята
 * оттуда же: в токенах она не объявлена, как и у вкладок кабинета.
 */
[data-nav="admin"] .site-nav__link {
  padding-bottom: var(--space-2);
  border-bottom: 2px solid transparent;
}

[data-nav="admin"] .site-nav__link[aria-current="page"] {
  border-bottom-color: var(--color-accent);
}

/* ============================================================ БЛОК ПОЛЬЗОВАТЕЛЯ */

.site-header__user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/*
 * Пока GET /api/auth/me не ответил, на месте блока стоит заглушка: иначе
 * страница успевает показать «Войти» вошедшему человеку и тут же его
 * переставить — заметное мигание на каждой загрузке.
 */
.site-header__skeleton {
  display: block;
  width: var(--measure-xs);
  height: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}

/*
 * Аватар из прототипа (шапка «Подтверждение записи.dc.html»): кружок
 * с инициалами. Фотографии клиента в API нет — в users её попросту нет
 * поля, — поэтому инициалы, а не картинка.
 */
.site-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
}

.site-user:hover { color: var(--color-link); }

.site-user__avatar {
  flex: none;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--color-neutral-500);
  text-transform: uppercase;
}

.site-user__name {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--font-weight-semibold);
}

/*
 * Бейдж роли в шапке панели. Прототип — «Дизайн-система записи.dc.html»,
 * раздел «05 — Компоненты · админ»: пилюля с заливкой primary-50 и текстом
 * primary-700 справа от ссылок.
 *
 * Кегль в прототипе 12px, в шкале такого нет — взят ближайший объявленный
 * label (13px). Подбирать промежуточное значение правило 4 запрещает.
 */
.site-header__badge {
  flex: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* ============================================================ КОЛОКОЛЬЧИК */

/*
 * Экран У-2 по ui-map: иконка с числом непрочитанных, ведёт на У-1.
 * Появляется только у вошедшего и только там, где страница его попросила.
 */
.site-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}

.site-bell:hover {
  background: var(--color-primary-50);
  color: var(--color-link);
}

.site-bell__icon {
  width: var(--space-6);
  height: var(--space-6);
  display: block;
}

.site-bell__count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: var(--space-4);
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-text-on-accent);
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  line-height: var(--space-4);
  text-align: center;
}

/* ============================================================ ОШИБКА ВЫХОДА */

/*
 * Правило 7: ошибку видит человек, а не консоль. Полоса под шапкой, потому
 * что в самой шапке для текста места нет, а привязать сообщение к кнопке
 * важнее, чем к содержимому страницы.
 */
.site-header__error {
  margin: 0;
  padding: var(--space-3) 0;
  background: var(--color-danger-surface);
  border-bottom: var(--border-width) solid var(--color-danger-border);
  color: var(--color-danger-text);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}

/* ============================================================ АДАПТИВ */

/* Брейкпоинт md дизайн-системы (≥768px); переменной он быть не может —
   пользовательские свойства в media-запросах не работают. */
/*
 * Кнопка «Меню» — только для узкого экрана. На широком ссылки стоят в строке,
 * и сворачивать нечего. То же с местом под имя внутри меню.
 */
.site-header__toggle,
.site-nav__user { display: none; }

@media (max-width: 767px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  /*
   * Первая строка шапки: логотип слева, кнопка меню и блок пользователя
   * справа. Логотип и вход остаются на месте при любом состоянии меню.
   */
  .site-header__toggle {
    display: inline-block;
    order: 2;
    margin-left: auto;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-line);
    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-text-body);
  }

  .site-header__toggle[aria-expanded="true"] {
    border-color: var(--color-accent);
    color: var(--color-link);
  }

  .site-header__user { order: 3; margin-left: 0; }

  /*
   * Меню занимает свою строку и по умолчанию свёрнуто. Ничего не теряется:
   * по кнопке «Меню» доступны все те же разделы, что на компьютере.
   */
  .site-nav {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    display: none;
  }

  .site-nav--open { display: flex; }

  /* Ссылка меню — строка во всю ширину: попасть пальцем проще, чем в текст. */
  .site-nav__link {
    display: block;
    width: 100%;
    padding: var(--space-3) 0;
    font-size: var(--text-body-size);
  }

  /* Имя вошедшего, вытесненное из первой строки, — заголовком меню. */
  .site-nav__user {
    display: block;
    width: 100%;
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
    font-size: var(--text-label-size);
    line-height: var(--text-label-line);
    color: var(--color-text-subtle);
  }

  .site-nav__user:empty { display: none; }

  /* Имя дублировать в строке незачем — оно теперь в меню. */
  .site-user__name { display: none; }
}