/* ══════════════════════════════════════════
   LAYOUT — app shell, topbar, map, botnav, status
══════════════════════════════════════════ */

/* ── App Shell ── */
.app {
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
  background: var(--bg);
}

/* ── TOP BAR ────────────────────────────────
   Top.png задаёт высоту через height:auto,
   контент сидит поверх absolute.
─────────────────────────────────────────── */
.topbar { position: relative; flex-shrink: 0; width: 100%; line-height: 0; }

.topbar-img {
  display: block; width: 100%; height: auto;
  mix-blend-mode: screen;
}

.topbar-content {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 2px 18px 0 18px;
  transform: translateY(1px);
}

/* Бренд (левая часть) */
.tb-brand {
  display: flex; align-items: center; gap: 7px;
  flex-shrink: 0; margin-right: 100px;
  margin-top: -25px; margin-left: 6%;
}
.tb-star {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, #f0c040, #a07820);
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; box-shadow: 0 0 8px rgba(200,162,39,.5);
  flex-shrink: 0;
}
.tb-name {
  font-family: "Rajdhani", sans-serif; font-weight: 700;
  font-size: clamp(11px, 1.1vw, 15px);
  color: var(--gold-hi); letter-spacing: 3px; text-transform: uppercase;
  text-shadow: 0 0 10px rgba(200,162,39,.5); white-space: nowrap;
}

/* Разделитель */
.tb-sep { width: 1px; height: 20px; background: rgba(61,79,99,.8); flex-shrink: 0; margin: 0 8px; }

/* Правая часть (статистика + пользователь) */
.tb-right {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; margin-top: -27px; margin-right: 28px;
  flex-shrink: 0;
}
.tb-stat {
  display: flex; align-items: center; gap: 3px;
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(9px, .9vw, 12px); color: var(--gold-hi); white-space: nowrap;
}
.tb-clock {
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(11px, 1.1vw, 15px); color: var(--gold-hi);
  letter-spacing: 2px; text-shadow: 0 0 8px rgba(200,162,39,.5);
}
.tb-user {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px; border: 1px solid transparent;
  transition: all var(--transition);
}
.tb-user:hover { border-color: var(--steel-hi); background: rgba(61,79,99,.3); }
.tb-user-ava {
  width: 28px; height: 28px;
  clip-path: polygon(6px 0%,100% 0%,100% calc(100% - 6px),calc(100% - 6px) 100%,0% 100%,0% 6px);
  background: var(--steel); border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--gold); flex-shrink: 0;
}
.tb-user-name { font-size: clamp(9px,.9vw,11px); font-weight: 600; color: var(--txt-hi); line-height: 1.2; }
.tb-user-role { font-size: 7px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; }

/* ── MAIN CONTENT ── */
.main-content { flex: 1; position: relative; overflow: hidden; display: flex; min-height: 0; }

/* ── MAP ── */
.map-wrap  { flex: 1; position: relative; overflow: hidden; }
.map-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.map-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 65% at 50% 50%, transparent 38%, rgba(14,21,32,.5) 100%),
    linear-gradient(180deg, rgba(14,21,32,.2) 0%, transparent 12%, transparent 82%, rgba(14,21,32,.45) 100%);
}
.map-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(42,154,176,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,154,176,.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Вкладки на карте */
.map-tabs {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 800; display: flex; align-items: center; gap: 6px;
  background: rgba(8,12,20,.8); border: 1px solid var(--steel-hi);
  padding: 4px 6px;
  clip-path: polygon(10px 0%,100% 0%,100% calc(100% - 10px),calc(100% - 10px) 100%,0% 100%,0% 10px);
}
.map-tabs::before {
  content: ""; position: absolute; top: 0; left: 10px; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.map-tab {
  font-family: "Rajdhani", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 14px;
  background: transparent; border: 1px solid transparent;
  color: var(--txt-lo); transition: all var(--transition); white-space: nowrap;
}
.map-tab:hover  { color: var(--txt-hi); border-color: var(--steel-hi); }
.map-tab.on     { color: var(--gold-hi); border-color: var(--gold); background: rgba(200,162,39,.1); }
.map-tab.danger { color: #ff8888; border-color: rgba(224,64,64,.5); background: rgba(224,64,64,.08); }

/* ── BOTTOM NAV ─────────────────────────────
   Bottom.png задаёт высоту через height:auto.
─────────────────────────────────────────── */
.botnav { position: relative; flex-shrink: 0; width: 100%; line-height: 0; }

.botnav-img {
  display: block; width: 100%; height: auto;
  mix-blend-mode: screen;
}

.botnav-row {
  position: absolute; left: 10px; right: 10px; top: 0; bottom: 0;
  display: flex; align-items: flex-start;
  padding-top: 4px; gap: 6px; z-index: 1;
}

/* Кнопки навигации */
.nav-btn {
  height: 48px; flex-shrink: 0;
  background: none; border: none; padding: 0;
  display: flex; align-items: flex-start; justify-content: center;
  transition: transform .12s, filter var(--transition);
}
.nav-btn img {
  height: 100%; width: auto; display: block;
  mix-blend-mode: multiply;
}
.nav-btn:hover  { transform: translateY(-1px) scale(1.02); filter: brightness(1.08); }
.nav-btn:active { transform: translateY(1px) scale(.985); }
.nav-btn.active { filter: brightness(1.18) drop-shadow(0 0 8px rgba(200,162,39,.45)); }

/* Orders — чёрный фон у изображения → screen */
.nav-btn.orders    img { mix-blend-mode: screen; }
/* Analytics — тоже чёрный фон */
.nav-btn.analytics img { mix-blend-mode: screen; }

.nav-spacer { flex: 1; }

/* Кнопка голосовой связи */
.nav-voice {
  margin-top: 0; margin-right: 37px;
  height: 34px; flex-shrink: 0;
  display: flex; align-items: center; gap: 7px;
  background: rgba(26,34,48,.82); border: 1px solid rgba(115,135,163,.4);
  padding: 0 14px;
  font-family: "Rajdhani", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 3px; color: var(--txt-lo); text-transform: uppercase;
  clip-path: polygon(8px 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 8px);
  transition: all var(--transition);
}
.nav-voice:hover, .nav-voice.on {
  border-color: var(--teal); color: var(--teal);
  background: rgba(42,154,176,.1);
}

/* ── STATUS STRIP ── */
.status-strip {
  background: rgba(8,12,20,.92);
  border-top: 1px solid rgba(42,154,176,.15);
  height: 16px; display: flex; align-items: center;
  padding: 0 12px; gap: 14px; overflow: hidden; flex-shrink: 0;
}
.ss-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 5px var(--green);
  animation: blink 1.5s ease-in-out infinite; flex-shrink: 0;
}
.ss-item {
  font-family: "Share Tech Mono", monospace;
  font-size: 8px; color: var(--txt-lo); letter-spacing: 1px;
  flex-shrink: 0; white-space: nowrap;
}
.ss-item b { color: var(--gold-hi); font-weight: normal; }
.ss-ticker { flex: 1; overflow: hidden; }
.ss-inner {
  display: flex; gap: 30px;
  animation: ticker 28s linear infinite; white-space: nowrap;
}
.ss-event { font-family: "Share Tech Mono", monospace; font-size: 8px; color: var(--txt-lo); }
.ss-event b { color: var(--gold-hi); font-weight: normal; }

/* ── INNER PAGES (Мой отряд, Настройки) ── */
.page-inner {
  flex: 1; background: var(--bg2);
  border-right: 1px solid var(--steel-hi);
  display: flex; flex-direction: column;
  overflow-y: auto; animation: fadein .25s ease-out;
}
.page-hdr { padding: 16px 18px; border-bottom: 1px solid var(--steel-hi); position: relative; }
.page-hdr::after {
  content: ""; position: absolute; bottom: -1px; left: 0; width: 60%; height: 1px;
  background: var(--gold);
}
.page-hdr-ttl {
  font-family: "Rajdhani", sans-serif; font-size: 11px; font-weight: 700;
  color: var(--gold); letter-spacing: 4px; text-transform: uppercase;
}
.page-body { padding: 16px 18px; flex: 1; }
.placeholder {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px; color: var(--txt-lo); letter-spacing: 1px; line-height: 2;
}
.placeholder span { color: var(--gold-hi); }

/* ── Кнопка мессенджера в топбаре ── */
.tb-msg-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; cursor: pointer;
  font-size: 16px; color: var(--txt-lo);
  border: 1px solid transparent; border-radius: 4px;
  transition: all var(--transition);
}
.tb-msg-btn:hover { color: var(--gold); border-color: rgba(200,162,39,.3); background: rgba(200,162,39,.08); }
.tb-msg-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--red); color: #fff;
  font-family: 'Share Tech Mono', monospace; font-size: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 1px solid var(--bg2);
  box-shadow: 0 0 6px rgba(224,64,64,.7);
  animation: pulse 2s infinite;
}

/* ── Оверлей затемнения карты при мессенджере ── */
.map-messenger-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 49; pointer-events: none;
}

/* ── TopBar user — кликабельный ── */
.tb-user-clickable { cursor: pointer; padding: 4px 6px; border-radius: 4px; border: 1px solid transparent; transition: all var(--transition); }
.tb-user-clickable:hover { border-color: rgba(200,162,39,.3); background: rgba(200,162,39,.07); }
.tb-user-arrow { font-size: 10px; color: var(--txt-lo); margin-left: 2px; }

/* ── Analytics nav button ── */
.nav-btn-text {
  display:flex; align-items:center; justify-content:center;
  min-width:64px; padding:0 4px;
  background:none; border:none; cursor:pointer; opacity:.55;
  transition:opacity var(--transition);
}
.nav-btn-text.active { opacity:1; }
.nav-btn-text:hover  { opacity:.85; }
.nav-btn-label {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  font-family:'Share Tech Mono',monospace; font-size:7px;
  color:var(--gold); letter-spacing:1px;
  font-size:18px;
}
.nav-btn-label span {
  font-size:7px; letter-spacing:1.5px; margin-top:-2px; color:var(--txt-lo);
}
.nav-btn-text.active .nav-btn-label span { color:var(--gold); }

/* ── TopBar user open state ── */
.tb-user-open { border-color:rgba(200,162,39,.4) !important; background:rgba(200,162,39,.08) !important; }

/* ── Каталог — emoji кнопка в навбаре ── */
.nav-btn.catalog .nav-btn-emoji {
  font-size: 22px; display: block; line-height: 1;
  filter: grayscale(0.3) opacity(0.7);
  transition: filter .15s;
}
.nav-btn.catalog:hover .nav-btn-emoji,
.nav-btn.catalog.active .nav-btn-emoji {
  filter: grayscale(0) opacity(1);
}