/*
 * Общая шапка клиента.
 *
 * Одна на все экраны кабинета: Cabinet 01–07, Profile 01–02, Notif 01 —
 * ровно тот список, что стоит в листе «Глобальная навигация» карты связей.
 * Разметку шапка собирает сама (js/client-header.js), странице остаётся
 * поставить пустой <header data-client-header> и вызвать mountClientHeader().
 *
 * Значения — только из tokens.css. Исключение одно и оно обсуждаемое:
 * z-index. Шкалы z-index в дизайн-системе нет (о чём прямо сказано в конце
 * tokens.css), а шапке нужно лежать выше содержимого страницы — поэтому здесь
 * стоит минимальная единица, которой хватает, пока у содержимого своего
 * z-index нет. Появятся модальные окна (Cabinet 06 и 07) — понадобится шкала.
 */

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

[hidden] { display: none !important; }

/* Шрифт и цвета живут на самой шапке и на обёртке содержимого, а не на body:
   этот файл подключается и к черновым страницам, а их оформление трогать
   незачем. */
body { margin: 0; }

.client-page {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  -webkit-font-smoothing: antialiased;
}

/* --- Каркас шапки -------------------------------------------------------------- */

.client-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  -webkit-font-smoothing: antialiased;
}

/* Только подчёркивание: цвет здесь задавать нельзя — правило с тегом
   перебивает классы кнопок, и «Записаться» становится белым на белом.
   Цвет у каждой ссылки шапки свой и стоит в её собственном правиле. */
.client-header a { text-decoration: none; }

.client-header-inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-desktop);
  padding-block: var(--space-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.client-header-left { display: flex; align-items: center; gap: var(--space-48); }
.client-header-right { display: flex; align-items: center; gap: var(--space-16); }

.client-logo {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-on-inverse);
}

/* --- Пункты меню ---------------------------------------------------------------
   Текущий раздел белый, остальные — вторичным цветом на тёмном. */

.client-nav { display: flex; gap: var(--space-24); }

.client-nav a,
.client-nav span {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary-on-inverse);
}
.client-nav a:hover { color: var(--color-text-on-inverse); }
.client-nav .current { color: var(--color-text-on-inverse); }

/* Пункт, за которым ещё нет страницы: показываем, но никуда не ведём */
.client-nav .pending,
.client-menu .pending { color: var(--color-text-secondary); cursor: default; }

/* --- Колокольчик со счётчиком ----------------------------------------------------- */

.client-bell {
  position: relative;
  display: inline-flex;
  color: var(--color-text-on-inverse);
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
}

.client-bell-count {
  position: absolute;
  top: calc(-1 * var(--space-4));
  right: calc(-1 * var(--space-8));
  min-width: var(--space-16);
  height: var(--space-16);
  padding-inline: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-text-inverse);
  color: var(--color-surface-inverse);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: normal;
}

/* --- Человек и меню аватара -------------------------------------------------------- */

.client-user { position: relative; }

.client-user-button {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-on-inverse);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
/* Фон гасим явно: у черновой страницы кабинета свой button:hover с заливкой,
   и он перебивает прозрачный фон из правила выше */
.client-user-button:hover { background: transparent; color: var(--color-text-secondary-on-inverse); }
.client-user-button:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.client-avatar {
  width: var(--space-32);
  height: var(--space-32);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-border-on-inverse);
  color: var(--color-text-on-inverse);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
}
.client-avatar img { width: 100%; height: 100%; object-fit: cover; }

.client-caret { font-size: var(--font-size-caption); color: var(--color-text-secondary-on-inverse); }

/*
 * Выпадающее меню: тень из ступени «выпадающие списки и тултипы».
 *
 * Раскрывается наведением на имя, а не нажатием. Зазора между кнопкой и меню
 * нет намеренно: с зазором курсор по дороге вниз выходил бы за пределы блока
 * и меню закрывалось бы на полпути. :focus-within оставляет меню доступным
 * с клавиатуры и по касанию, где наведения не бывает.
 */
.client-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: var(--container-padding-desktop);
  display: none;
  flex-direction: column;
  padding: var(--space-8);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  box-shadow: var(--shadow-sm);
}

.client-menu a,
.client-menu button,
.client-menu span {
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.client-menu a:hover,
.client-menu button:hover { background: var(--color-surface); }

.client-user:hover .client-menu,
.client-user:focus-within .client-menu { display: flex; }

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

.client-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--button-padding-medium);
  font-family: var(--font-family-base);
  font-size: var(--button-font-size-medium);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
  cursor: pointer;
}

.client-btn-inverse {
  background: var(--color-text-inverse);
  color: var(--color-surface-inverse);
}
.client-btn-inverse:hover { background: var(--color-text-secondary-on-inverse); color: var(--color-surface-inverse); }

.client-btn-outline {
  background: transparent;
  border-color: var(--color-border-on-inverse);
  color: var(--color-text-on-inverse);
}
.client-btn-outline:hover { border-color: var(--color-text-on-inverse); color: var(--color-text-on-inverse); }

.client-btn:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

/* --- Заглушка на время загрузки ------------------------------------------------------
   Пока не пришёл ответ «кто я», на месте человека стоит блок той же формы:
   иначе кнопки гостя мигали бы и сменялись именем. */

.client-user-skeleton {
  width: var(--space-96);
  height: var(--space-32);
  border-radius: var(--radius-pill);
  background: var(--color-border-on-inverse);
}

/* --- Ошибка ответа сервера -------------------------------------------------------
   Правило 7: сбой человек читает на странице. 401 сбоем не считается —
   это обычный гость. */

.client-header-error {
  background: var(--color-danger-surface);
  color: var(--color-danger);
  border-bottom: var(--border-width-hairline) solid var(--color-danger);
  font-size: var(--font-size-body-small);
}

.client-header-error > div {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-desktop);
  padding-block: var(--space-12);
}

/* --- Содержимое страницы кабинета ------------------------------------------------- */

.client-page {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-desktop);
  padding-block: var(--space-48) var(--space-96);
}

/* --- Планшет: 768–1199px ----------------------------------------------------------- */

@media (max-width: 1199px) {
  .client-header-inner,
  .client-header-error > div,
  .client-page { padding-inline: var(--container-padding-tablet); }

  .client-header-left { gap: var(--space-24); }
}

/* --- Мобильный: до 767px ------------------------------------------------------------ */

@media (max-width: 767px) {
  .client-header-inner,
  .client-header-error > div,
  .client-page { padding-inline: var(--container-padding-mobile); }

  /*
   * Шапка сворачивается в три строки, но ничего из неё не пропадает:
   * логотип и человек остаются наверху, меню уходит на свою строку под ними,
   * «Записаться» — во всю ширину третьей. Так до кнопки проще дотянуться
   * большим пальцем, а имя не приходится прятать ради места.
   */
  .client-header-inner { flex-wrap: wrap; gap: var(--space-12); padding-block: var(--space-16); }
  .client-header-left { flex-wrap: wrap; gap: var(--space-12); flex: 1 1 auto; }
  .client-nav { order: 3; width: 100%; gap: var(--space-16); }

  .client-header-right { flex-wrap: wrap; gap: var(--space-12); }
  .client-header-right .client-btn { order: 3; flex: 1 1 auto; }

  /* Меню аватара не должно уезжать за левый край узкого экрана */
  .client-menu { right: auto; left: 0; }
}

/* --- Узкий телефон: до 380px ------------------------------------------------------------
   На самых узких экранах логотип и человек в одну строку уже не встают —
   пусть человек уходит на свою. Ничего при этом не пропадает. */

@media (max-width: 380px) {
  .client-header-left,
  .client-header-right { width: 100%; }
  .client-header-right { justify-content: space-between; }
}