/* shared-header.css — unified navigation header for lobby.html and gm.html */

/* "Account not verified" banner under the header (GM, pending/rejected/suspended). */
.sh-verify-banner {
  background: #1a2a4a;
  border-bottom: 1px solid #3a5ba0;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: #9ecbff;
  flex-shrink: 0;
}
.sh-verify-btn {
  margin-left: auto;
  background: #3a5ba0;
  color: #fff;
  padding: 5px 14px;
  border-radius: 5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sh-verify-btn:hover { background: #4a6cb8; }
.sh-verify-btn:disabled { opacity: 0.6; cursor: default; }
/* Secondary action beside a primary one (Resend, next to Verify). */
.sh-verify-btn-quiet { background: transparent; border: 1px solid #3a5ba0; color: #9ecbff; }
.sh-verify-btn-quiet:hover { background: #22345c; }

/* The 6-digit code box in the email banner. It takes the right-push, so the
   buttons beside it drop the auto margin `.sh-verify-btn` otherwise applies. */
.sh-code-input {
  margin-left: auto;
  width: 7.5em;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #3a5ba0;
  background: #0e1630;
  color: #e0e0e0;
  font-family: monospace;
  font-size: 0.95rem;
  letter-spacing: 3px;
  text-align: center;
}
.sh-code-input:focus { outline: none; border-color: #6f9ee8; }
#sh-email-banner .sh-verify-btn { margin-left: 0; }

/* Inline "Learn more" link that sits before a banner's action button (payout notice).
   It owns the right-push, so the button beside it drops its own auto margin. */
.sh-verify-link {
  margin-left: auto;
  color: #9ecbff;
  text-decoration: underline;
  font-weight: 600;
  white-space: nowrap;
}
.sh-verify-link:hover { color: #cfe4ff; }
#sh-payout-banner .sh-verify-btn { margin-left: 0; }

.sh-header {
  background: #16213e;
  border-bottom: 2px solid #c8a400;
  padding: 0 20px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sh-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #c8a400;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-decoration: none;      /* it's now a link to the lobby */
  cursor: pointer;
  transition: color .12s, opacity .12s;
}
.sh-logo:hover { color: #e3bd13; }
.sh-logo:focus-visible {
  outline: 2px solid #c8a400;
  outline-offset: 3px;
  border-radius: 4px;
}

.sh-spacer { flex: 1; }

/* ── Session bar ──────────────────────────────────────────── */
.sh-session-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.sh-badge.open     { background: #0d2b0d; color: #66cc66; border: 1px solid #1a4a1a; }
.sh-badge.full     { background: #3a1a1a; color: #cc6666; border: 1px solid #663333; }
.sh-badge.draining { background: #2b1a00; color: #e0a030; border: 1px solid #4a3000; }

.sh-session-detail {
  font-size: 0.78rem;
  color: #999;
  white-space: nowrap;
}

.sh-btn-session {
  font-size: 0.78rem;
  padding: 4px 11px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.sh-btn-session.start { background: #4caf50; color: #0a1a0a; }
.sh-btn-session.start:hover { background: #66dd66; }
.sh-btn-session.drain { background: #2b1a00; color: #e0a030; border: 1px solid #4a3000; }
.sh-btn-session.drain:hover { background: #3a2800; }
.sh-btn-session.adjust { background: #0d1f30; color: #88aabb; border: 1px solid #1a3a50; }
.sh-btn-session.adjust:hover { background: #1a3a50; color: #c8d8e8; }
.sh-btn-session.end { background: #1e0808; color: #e94560; border: 1px solid #4a1010; }
.sh-btn-session.end:hover { background: #2e1010; }
.sh-btn-back { background: transparent; color: #88aabb; border: 1px solid #1a3a50; text-decoration: none; }
.sh-btn-back:hover { background: #0d1f30; color: #aaccdd; }
/* "Your boards" — teal CTA back to the live dashboard (replaces the old nav pill). */
.sh-btn-session.boards { background: #0d3a3a; color: #4fd6c8; border: 1px solid #1a5a55; text-decoration: none; }
.sh-btn-session.boards:hover { background: #135050; color: #7fece0; }

/* ── Connection dot (shown next to username when WS is active) ── */
.sh-conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: none;
}
.sh-conn-dot.connected    { display: inline-block; background: #4caf50; }
.sh-conn-dot.disconnected { display: inline-block; background: #e94560; }

/* ── User bar ─────────────────────────────────────────────── */
.sh-user-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-user-name {
  font-size: 0.85rem;
  color: #c8a400;
  font-weight: 600;
  white-space: nowrap;
}
/* ── User dropdown menu ────────────────────────────────────── */
.sh-user-menu-wrap { position: relative; }

.sh-user-menu-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  font-family: inherit;
}
.sh-user-menu-btn:hover { background: rgba(255, 255, 255, 0.06); }
.sh-caret { color: #c8a400; font-size: 0.7rem; line-height: 1; }

.sh-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #1f1f33;
  border: 1px solid #333;
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: 5px;
  z-index: 200;
}
.sh-user-menu.open { display: block; }

.sh-user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 5px;
  color: #ddd;
  font-size: 0.85rem;
  font-family: inherit;
}
.sh-user-menu-item:hover { background: rgba(200, 164, 0, 0.15); color: #f0d040; }

.sh-btn-auth {
  padding: 5px 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}
.sh-btn-signin { background: #c8a400; color: #1a1a2e; }
.sh-btn-signin:hover { background: #f0d040; }

/* ── Mobile status pill + hamburger (hidden on desktop; see the media query) ── */
.sh-mobile-badge { display: none; align-items: center; gap: 6px; }
/* The shared .sh-earnings class has margin-right:auto for its desktop-bar
   context (pushes later siblings right); reset that here, it's a small
   two-item pill, not the full session bar. */
.sh-mobile-badge .sh-earnings { margin: 0; }
.sh-mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: #c8a400;
  padding: 4px 6px;
  border-radius: 5px;
}
.sh-mobile-menu-btn:hover { background: rgba(255, 255, 255, 0.06); }

/* ── Mobile consolidated menu (hamburger → lib/modal.js Modal) ──────────────
   Everything the desktop session bar + username dropdown show inline collapses
   into this one card on mobile: session earnings/detail/management, then the
   account items (history, notifications, profile, stripe, admin, sign out). */
.sh-mm-card {
  background: #16213e;
  border: 1px solid #0f3460;
  border-radius: 12px;
  padding: 16px;
  width: min(360px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}
.sh-mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 700;
  color: #c8a400;
  font-size: 0.95rem;
}
.sh-mm-x {
  background: none;
  border: none;
  color: #8899aa;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 6px;
}
.sh-mm-x:hover { color: #ddd; }
.sh-mm-section {
  padding: 12px 0;
  border-top: 1px solid #22304a;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sh-mm-section:first-of-type { border-top: none; padding-top: 0; }
.sh-mm-info-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #7f92b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.sh-mm-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sh-mm-info-row:last-of-type { border-bottom: none; }
.sh-mm-info-row span:first-child { color: #99a; }
.sh-mm-info-row span:last-child { color: #e0e0e0; font-weight: 600; }
.sh-mm-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  font-family: inherit;
  background: #0d1f30;
  color: #88aabb;
  border: 1px solid #1a3a50;
}
.sh-mm-btn:hover { background: #1a3a50; color: #c8d8e8; }
.sh-mm-btn.item {
  text-align: left;
  background: none;
  border: none;
  color: #ddd;
  padding: 9px 6px;
}
.sh-mm-btn.item:hover { background: rgba(200, 164, 0, 0.12); color: #f0d040; }
.sh-mm-btn.start { background: #4caf50; color: #0a1a0a; border-color: transparent; }
.sh-mm-btn.start:hover { background: #66dd66; }
.sh-mm-btn.danger { background: #1e0808; color: #e94560; border-color: #4a1010; }
.sh-mm-btn.danger:hover { background: #2e1010; }
.sh-mm-btn.boards { background: #0d3a3a; color: #4fd6c8; border-color: #1a5a55; }
.sh-mm-btn.boards:hover { background: #135050; color: #7fece0; }
.sh-mm-btn.signout { color: #e94560; }



/* ── Time control picker (session start modal) ─────────────── */
.tc-group {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.tc-btn {
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid #0f3460;
  background: #0a1628;
  color: #8888aa;
  cursor: pointer;
}
.tc-btn:hover:not(.selected) { border-color: #c8a400; color: #c8a400; }
.tc-btn.selected { background: #c8a400; color: #1a1a2e; border-color: #c8a400; }
.tc-custom {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.tc-custom-field { flex: 1; }
.tc-custom-field label {
  font-size: 0.75rem;
  color: #888;
  display: block;
  margin-bottom: 4px;
}
.tc-custom-field input { width: 100%; }

/* ── Privacy controls (session start modal) ─────────────────── */
.pv-group { margin-top: 6px; }
.pv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}
.pv-row + .pv-row { border-top: 1px solid #17233f; }
.pv-text { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: #dcdcf0; }
/* Pressable info trigger — expands the inline explanation below its row. */
.pv-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; border: none; background: none; border-radius: 50%;
  color: #8fa6c8; font-size: 0.72rem; line-height: 1; cursor: pointer; font-family: inherit;
}
.pv-i:hover, .pv-i:focus { color: #cfe0f7; outline: none; }
.pv-info {
  font-size: 0.74rem; color: #b9c4da; line-height: 1.4;
  margin: -2px 0 6px; padding: 8px 10px;
  background: #0d1b33; border: 1px solid #22406e; border-radius: 6px;
}
.pv-sw { position: relative; display: inline-block; width: 38px; height: 20px; flex: none; }
.pv-sw input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.pv-sl { position: absolute; inset: 0; background: #3a3a52; border-radius: 999px; transition: .15s; }
.pv-sl::before {
  content: ''; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .15s;
}
.pv-sw input:checked + .pv-sl { background: #0f3460; }
.pv-sw input:checked + .pv-sl::before { transform: translateX(18px); }
.pv-sw input:disabled + .pv-sl { opacity: 0.4; cursor: not-allowed; }
.pv-stream { margin: 6px 0 2px; }
.pv-stream input { width: 100%; }
.pv-hint { font-size: 0.72rem; color: #8888aa; margin-top: 4px; }

@keyframes earn-bump {
  0%   { transform: scale(1);    color: #c8a400; }
  18%  { transform: scale(1.45); color: #66ee88; }
  60%  { transform: scale(1.35); color: #88ee88; }
  100% { transform: scale(1);    color: #c8a400; }
}
/* duration set to 3s here; JS counter matches */
.sh-earnings {
  display: inline-block;
  font-size: 0.78rem;
  color: #c8a400;
  font-weight: 600;
  margin-left: 2px;
  margin-right: auto;
  transform-origin: left center;
}
.sh-earnings.bumping {
  animation: earn-bump 3s ease-out forwards;
}

/* ── Mobile (≤ 640px — matches board-view.css and gm.html) ──────
   Plain pages (lobby, history, notifications, admin): the header is allowed to
   wrap, but keeps the same left-to-right visual order as desktop — logo, session
   bar, username (plain DOM/source order; no `order` override here, so nothing
   swaps positions when crossing the breakpoint). It does NOT force a second row
   unconditionally (no flex-basis:100% either) — a lone "Start session" button (or
   even the fuller "Return to your session" + badge + earnings + detail cluster)
   comfortably fits alongside the logo and username on nearly all phone widths, so
   it should stay put; only genuine overflow (a long display name at a very narrow
   width) wraps the trailing item (the username bar, last in source order) down to
   its own naturally-sized, left-aligned second row. */
@media (max-width: 640px) {
  .sh-header {
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
    padding: 6px 12px;
    row-gap: 4px;
  }
  .sh-session-bar {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  /* Readiness banners (verify / email / Stripe): wrap instead of overflowing. */
  .sh-verify-banner { flex-wrap: wrap; }
  .sh-verify-banner .sh-verify-btn { margin-left: 0; }
  /* Wrapped onto its own row, the code box no longer needs the right-push. */
  .sh-verify-banner .sh-code-input { margin-left: 0; }
}

/* ── GM dashboard header: hamburger kicks in earlier than the 640px board/tile
   layout breakpoint ─────────────────────────────────────────────────────────
   The dashboard's session bar (badge, earnings, price/time-control, Set player
   limit, End session) plus the username on the right is a lot of inline content
   — it starts visibly cramping well above 640px (verified at ~880px), long before
   gm.html's own mobile layout switch (tile strip, focused-board sizing, etc. —
   still keyed to 640px, untouched) would kick in. So this override gets its own,
   wider breakpoint, independent of the general one above. `.sh-header.sh-dashboard`
   (two classes) naturally wins over the plain `.sh-header`/`.sh-session-bar` rules
   in the 640px block regardless of which media block is defined first, so no
   ordering trick is needed — this could be inlined into that block, it's split out
   only because the threshold differs. */
@media (max-width: 940px) {
  .sh-header.sh-dashboard { flex-wrap: nowrap; }
  .sh-header.sh-dashboard .sh-session-bar,
  .sh-header.sh-dashboard .sh-user-bar .sh-conn-dot,
  .sh-header.sh-dashboard .sh-user-bar .sh-user-menu-wrap { display: none; }
  .sh-header.sh-dashboard .sh-mobile-badge { display: inline-flex; }
  .sh-header.sh-dashboard .sh-mobile-menu-btn { display: inline-flex; }
}