/* ============================================
   SHARED TOP BAR CSS
   ============================================
   Extracted from base.css PR 7/8 (2026-05-15).
   Persistent app top bar. Consumed by SharedTopBar.js. */


/* ============================================
   SHARED TOP BAR - Persistent App Header
   ============================================ */

/* CODENOTE: Shared top bar rendered once in app.js.
   Contains hamburger (mobile), league name, and messages icon.
   Lives OUTSIDE the scroll container — never scrolls.
   Page headers use sticky top:0 within the scroll area below this. */

.app-top-bar {
  flex-shrink: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-sm);
  padding-top: env(safe-area-inset-top);
  min-height: 52px;
  background: var(--color-structure-primary);
  color: var(--text-inverse, #fff);
  /* No box-shadow — blends seamlessly into page header below */
}

.app-top-bar-title {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 22px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.app-top-bar-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  padding: var(--space-xs, 6px);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}

.app-top-bar-btn:active {
  background: var(--scrim-white-medium);
}

.app-top-bar-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-action-primary, #f07c0f);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  line-height: 1;
}

/* Desktop: hide hamburger, wider title */
@media (min-width: 1024px) {
  .app-top-bar-hamburger {
    display: none;
  }

  .app-top-bar-title {
    max-width: none;
  }

  .app-top-bar {
    padding-left: calc(256px + var(--space-md));
  }
}