/* web-v2/css/components/header.css */

.app-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .75rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  height: 40px;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}

.app-header__logo {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  text-shadow: var(--accent-glow);
  white-space: nowrap;
}
.app-header__logo::before { content: '◉ '; }

.app-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .app-header__nav { display: none; }

  /* themeBtn and settingsBtn are accessible via the ⚙ tab in the bottom bar */
  #themeBtn,
  #settingsBtn { display: none; }

  /* langSelect: compact, no border, fits between pill and bell */
  #langSelect {
    padding: .1rem .15rem;
    font-size: .55rem;
    border-color: transparent;
    background: none;
    color: var(--text-muted);
  }

  /* Compact pill — dot + short label, no border box */
  .conn-pill {
    background: none;
    border-color: transparent;
    padding: 0 .15rem;
    font-size: .5rem;
    gap: .2rem;
  }
}

.app-header__nav-tab {
  position: relative;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  padding-bottom: .2rem;
  background: none;
  border: none;
  font-family: var(--font-mono);
  text-decoration: none;
}
.app-header__nav-tab.active {
  color: var(--accent);
  text-shadow: var(--accent-glow);
}
.app-header__nav-tab.active .tab-active-bar { display: block; }
.app-header__nav-tab:not(.active) .tab-active-bar { display: none; }

.app-header__controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

.header-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  color: var(--text-muted);
  font-size: .7rem;
  padding: .15rem .3rem;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: color .15s, border-color .15s;
}
.header-btn:hover { color: var(--accent); border-color: var(--border); }