/* Air theme · 01-shell.css
   Каркас: топбар/нав/баланс/иконки/дропдаун «Документы» + генерик-кнопки (.primary/.ghost/...).
   Скопировано ДОСЛОВНО из шаблона css/01-header-nav.css (не менять значения без шаблона).
   Единственная правка — селекторы навигации .nav button расширены на a (в Yii навигация = ссылки),
   см. ниже пометки AIR-NAV. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(14px);
}

.topbar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  max-width: 1780px;
  margin: 0 auto;
  padding: 13px clamp(56px, 5.6vw, 112px);
}

.brand,
.nav a, /* AIR-NAV: навигация в Yii = ссылки <a>, не <button> */
.nav button,
footer button,
.plain {
  border: 0;
  background: transparent;
  color: var(--text);
  text-decoration: none; /* AIR-NAV: убрать дефолтное подчёркивание у <a> */
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  text-align: left;
}

.brand img {
  display: block;
  height: 52px;
  max-width: 310px;
}

.nav .drawer-brand {
  display: none;
}

.menu-toggle,
.menu-close,
.menu-backdrop {
  display: none;
}

.nav,
.top-actions,
footer {
  display: flex;
  align-items: center;
}

.nav {
  justify-self: center;
  justify-content: center;
  gap: 18px;
  margin-left: 0;
  min-width: 0;
  max-width: 100%;
}

.top-actions {
  justify-self: end;
  gap: 14px;
  margin-left: 0;
}


.account-balance {
  display: none;
  align-items: center;
  min-height: 44px;
  gap: 9px;
  padding: 6px 14px 6px 7px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(15, 49, 95, 0.06);
}

.account-balance:hover {
  border-color: #cfe0ff;
  box-shadow: 0 10px 24px rgba(44, 107, 237, 0.12);
}

.balance-topup-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--blue);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(44, 107, 237, 0.24);
}

.account-balance b {
  color: var(--blue);
  font-size: 16px;
  font-weight: 800;
}

.icon-action {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--blue);
  background: #fff;
  border: 1px solid #d6e0ee;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(15, 49, 95, 0.06);
}

.icon-action:hover {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

/* Прячем «Войти» у залогиненного. Селектор СПЕЦИФИЧНЕЕ (0,3,1) моста
   `.top-actions a.ghost` ниже (0,2,1): иначе мост (он позже в файле) перебивал бы
   display:none и «Войти» висел бы вместе с балансом/профилем (баг auth-«фарш», 2026-06-24).
   Без `a` в хвосте — чтобы работало и в design-kit, где «Войти» это <button>. */
body.is-authenticated .top-actions .auth-login {
  display: none;
}

body.is-authenticated .account-balance,
body.is-authenticated .icon-action {
  display: inline-flex;
}

.nav a, /* AIR-NAV: ссылки навигации стилизуем как кнопки шаблона */
.nav button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 9px 13px;
  color: var(--label);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.nav a:hover, /* AIR-NAV */
.nav button:hover {
  color: var(--text);
  background: var(--blue-soft);
}

.nav > .menu-close {
  display: none;
}

.nav > [data-target="tracking"] { /* AIR-NAV: было button[...], теперь матчит и <a data-target> */
  grid-area: tracking;
}

.nav > [data-target="receive"] {
  grid-area: recipient;
}

.nav > [data-target="letters"] {
  grid-area: letters;
}

.docs-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  grid-area: docs;
}

.documents-menu {
  position: absolute;
  top: 44px;
  left: 0;
  display: none;
  min-width: 220px;
  padding: 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.documents-menu.is-open {
  display: grid;
  gap: 4px;
}

.documents-menu a, /* AIR-NAV */
.documents-menu button {
  width: 100%;
  text-align: left;
}

@media (min-width: 1181px) and (max-width: 1440px) {
  body.is-authenticated .nav {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-template-areas:
      "tracking recipient"
      "letters docs";
    justify-content: start;
    align-content: center;
    gap: 8px 24px;
  }
}

@media (min-width: 1181px) and (max-width: 1280px) {
  .nav {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-template-areas:
      "tracking recipient"
      "letters docs";
    justify-content: start;
    align-content: center;
    gap: 8px 24px;
  }
}

.primary,
.secondary,
.ghost,
.file-btn {
  align-items: center;
  border: 0;
  border-radius: var(--radius-control);
  justify-content: center;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
}

.primary {
  display: inline-flex;
  gap: 8px;
  color: white;
  background: var(--blue);
  box-shadow: var(--shadow-control);
}

.primary svg {
  flex: 0 0 auto;
}

.primary:hover {
  background: var(--blue-hover);
}

.secondary,
.file-btn {
  color: var(--blue-dark);
  background: var(--blue-soft);
}

.ghost {
  color: var(--text);
  background: white;
  border: 1px solid var(--border);
}

.topbar .ghost {
  padding: 11px 22px;
  border-color: #d6e0ee;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
}

.topbar .primary {
  padding: 12px 22px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(44, 107, 237, 0.28);
}

.large {
  padding: 18px 38px;
}

.wide {
  width: 100%;
}

/* =================================================================
   AIR-NAV bridge: в Yii часть управляющих элементов шапки — ссылки <a>
   (навигация: «Войти», «Отправить», баланс, профиль), а в шаблоне это <button>.
   Приводим <a> к виду кнопок шаблона — значения визуально НЕ меняем, только
   убираем подчёркивание и даём flex-выкладку там, где у <a> её нет по умолчанию.
   (.primary уже display:inline-flex; account-balance/icon-action получают
   inline-flex из правила body.is-authenticated выше — им мост не нужен.)
   ================================================================= */
.topbar a {
  text-decoration: none;
}
.top-actions a.ghost {
  display: inline-flex;
}