/* Общая шапка личного кабинета клиента — одна на все страницы кабинета
 * (js/cabinet-header.js рендерит разметку в #cabinet-header; здесь только
 * стили, сама разметка не повторяется по страницам).
 *
 * Состав подтверждён по двум независимым источникам: Прототип/TopBro
 * {Мои записи, Профиль, Уведомления, Смена пароля}.dc.html — на всех четырёх
 * экранах разметка шапки идентична, отличается только подсвеченная вкладка —
 * и docs/TopBro_link_map.xlsx, строка 56: «Пункт меню «Мои записи»/«Профиль»
 * (nav кабинета)» помечен как «Повторяющийся nav-элемент» / «Общее меню
 * кабинета клиента». «Уведомления» третьей вкладкой — из кода экранов (в
 * таблице связей это отмечено как непроверенное предположение, строка 71).
 *
 * Кнопки «Войти»/«Регистрация» вместо аватара для гостя — в макете не
 * описаны (макет исходит из того, что в кабинет попадает только вошедший
 * клиент); добавлены по прямому требованию, тем же паттерном, что и на
 * лендинге (landing.css, #auth-actions).
 *
 * Цвета/шрифты/размеры/отступы/скругления — только из ../tokens.css.
 */

.cab-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.cab-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.cab-header-row { height: 64px; display: flex; align-items: center; gap: var(--space-12); }

.cab-logo { flex: none; display: flex; align-items: center; color: var(--color-text); }
.cab-logo-badge {
  width: 30px; height: 30px; border-radius: var(--radius-control);
  background: var(--color-button-bg); color: var(--color-button-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: var(--font-weight-extrabold); font-size: var(--text-caption-size);
}

.cab-identity { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-8); }
.cab-avatar {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-pill);
  background: var(--color-surface-hover); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--text-caption-size-mobile);
  color: var(--color-button-bg);
}
.cab-name {
  font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--text-caption-size);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cab-actions { flex: none; display: flex; align-items: center; gap: var(--space-8); }

.cab-logout-btn {
  display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px;
  border-radius: var(--radius-control); background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: var(--font-weight-semibold); font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}
.cab-logout-btn:hover { background: var(--color-surface); color: var(--color-text); }
.cab-logout-btn svg { stroke: currentColor; }

.cab-guest-btn {
  height: 38px; padding: 0 14px; border-radius: var(--radius-control);
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-body); font-weight: var(--font-weight-semibold); font-size: var(--text-caption-size);
}
.cab-guest-btn-login { color: var(--color-text-muted); border: 1px solid var(--color-border); }
.cab-guest-btn-login:hover { color: var(--color-text); background: var(--color-surface); }
.cab-guest-btn-register { color: var(--color-button-text); background: var(--color-button-bg); font-weight: var(--font-weight-bold); }
.cab-guest-btn-register:hover { background: var(--color-button-bg-hover); }

.cab-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cab-nav a {
  padding: 0 2px 12px; white-space: nowrap;
  font-family: var(--font-body); font-weight: var(--font-weight-semibold); font-size: var(--text-caption-size);
  color: var(--color-text-muted);
}
.cab-nav a:hover { color: var(--color-text); }
.cab-nav a.cab-nav-active {
  font-weight: var(--font-weight-bold); color: var(--color-text);
  box-shadow: inset 0 -2px 0 var(--color-button-bg);
}

/* Счётчик непрочитанных уведомлений рядом с пунктом «Уведомления» — показывается,
 * только когда есть что показать (unreadCount > 0), тем же принципом, что и
 * баннеры пустых состояний в проекте: не рисовать «0», где это не несёт смысла. */
.cab-nav-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  margin-left: 6px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--color-button-bg); color: var(--color-button-text);
  font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: 11px; line-height: 18px;
  vertical-align: middle;
}