/* styles-header-account.css — блок аккаунта в шапке кабинета (правый край).
 *
 * Одна компактная пилюля 36px (чуть ниже кнопок разделов 40px — это служебная
 * строка, не навигация; две строки текста дышат, как подписи в кнопках разделов),
 * четыре сегмента через разделители, слева направо:
 *   [ Фамилия Имя / роль ] [ ⟳ ] [ ⎋ Выйти ] [ ● на связи ]
 * Кружка-аватара нет (фото людей в системе нет), «Обновить» — только стрелка,
 * связь — тот же индикатор, что и раньше (точка + подпись, цвет = состояние), но
 * внутри общей пилюли, а не отдельной плашкой (владелец 17.09.2026: «три вещи
 * должны быть в одной концепции»).
 *
 * Здесь же — правила показа «Обновить» / «Установить»: они обязаны работать даже
 * когда JS не догрузился (кабинет из кэша, сеть моргнула — жалоба 17.08.2026),
 * поэтому медиа-правило display-mode, а не скрипт. `[hidden]` возвращаем силу
 * явно: авторский display у кнопки сильнее браузерного `[hidden]{display:none}`.
 * Разметка — manager/index.html, текст бейджа — app-lead-impersonate.js,
 * состояние связи (.net.slow / .net.offline, подпись) — manager-net-status.js. */

.top-account {
  display: inline-flex;
  align-items: stretch;
  height: 36px;
  border: 1px solid rgba(125, 158, 209, 0.24);
  border-radius: 999px;
  background: rgba(8, 18, 36, 0.42);
  box-shadow: inset 0 1px 0 rgba(233, 241, 253, 0.05);
  overflow: hidden;
}

.top-account > * + * {
  border-left: 1px solid rgba(125, 158, 209, 0.22);
}

/* ── Кто вошёл ── */
.cur-user-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 12px 0 14px;
  white-space: nowrap;
}

.cur-user-name {
  font-size: 11px;
  font-weight: 700;
  color: #e9eef8;
  line-height: 1.2;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cur-user-role {
  font-size: 8px;
  font-weight: 700;
  color: #8ea3c4;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Кнопки-сегменты ── */
.top-account .btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c9d8f0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.top-account .btn-logout svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.top-account .btn-logout:hover {
  background: var(--module-hover, rgba(122, 161, 223, 0.2));
  color: #f2f6ff;
}

/* «Обновить» — только стрелка, подпись в title. */
.top-account .btn-reload {
  padding: 0 10px;
}

/* «Установить» — предложение действия, не служебная кнопка: акцент бренда. */
.top-account .btn-install {
  color: #ffc46e;
}

.top-account .btn-install:hover {
  background: rgba(255, 178, 74, 0.16);
  color: #ffd9a0;
}

/* ── Связь: сегмент той же пилюли; цвет = состояние (зелёная точка — всё
   хорошо, жёлтый фон — сохранение может не дойти, красный — не сохраняется). ── */
.top-account .net {
  border: 0;
  border-left: 1px solid rgba(125, 158, 209, 0.22);
  border-radius: 0;
  padding: 0 12px 0 10px;
  background: transparent;
  color: #cfe0f6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.top-account .net::before {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px rgba(123, 227, 159, 0.14);
}

.top-account .net.slow {
  background: rgba(244, 169, 58, 0.85);
  color: #2a1c00;
}

.top-account .net.slow::before {
  box-shadow: 0 0 0 4px rgba(244, 169, 58, 0.18);
}

.top-account .net.offline {
  background: rgba(214, 69, 69, 0.9);
  color: #fff3f3;
}

.top-account .net.offline::before {
  box-shadow: 0 0 0 4px rgba(224, 85, 85, 0.2);
}

/* ── Показ «Обновить» / «Установить» ── */
#installAppBtn[hidden],
#appReloadBtn[hidden] {
  display: none !important;
}

/* В окне установленного приложения адресной строки с круговой стрелкой нет —
   «Обновить» показываем всегда, «Установить» — никогда. */
@media all and (display-mode: standalone) {
  #appReloadBtn, #appReloadBtn[hidden] { display: inline-flex !important; }
  #installAppBtn, #installAppBtn[hidden] { display: none !important; }
}

@media all and (display-mode: window-controls-overlay) {
  #appReloadBtn, #appReloadBtn[hidden] { display: inline-flex !important; }
  #installAppBtn, #installAppBtn[hidden] { display: none !important; }
}

/* ── Узкий экран: имя короче, у «Выйти» остаётся иконка, связь — только точка. ── */
@media (max-width: 860px) {
  .cur-user-badge {
    padding: 0 10px;
  }

  .cur-user-name {
    max-width: 120px;
  }

  .top-account .btn-logout {
    padding: 0 9px;
  }

  .top-account .btn-logout span {
    display: none;
  }

  .top-account .net {
    padding: 0 10px;
    font-size: 0;
    gap: 0;
  }
}