/* ──────────────────────────────────────────────────────────────
   Poolish Manager — shared responsive stylesheet
   All media-query rules live here; component styles stay inline.
   ────────────────────────────────────────────────────────────── */

/* ── Global Navbar ────────────────────────────────────────── */
.nav-link-main {
  color: rgba(255,255,255,.8);
  padding: .5rem .65rem;
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
  display: inline-block;
  white-space: nowrap;
}
.nav-link-main:hover { color: #fff; }
.nav-link-main.active { color: #fff; border-bottom-color: #7c3aed; }

.user-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255,255,255,.85);
}
.user-dropdown-toggle:hover { color: #fff; }
.user-dropdown-toggle:focus { outline: none; box-shadow: none; }

.user-handle {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .85rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
}

/* ── Context Bar ─────────────────────────────────────────── */
.context-bar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  overflow: visible;
}

.pool-selector-btn {
  background: none;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  padding: .3rem .75rem;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.pool-selector-btn:hover { border-color: #9ca3af; background: #f9fafb; }

.pool-name-static {
  font-size: .875rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

.btn-ask-poolia {
  background: #fff;
  border: 1.5px solid #c4b5fd;
  border-radius: 999px;
  cursor: pointer;
  color: #7c3aed;
  font-weight: 600;
  font-size: .875rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .85rem;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  box-shadow: 0 1px 3px rgba(124,58,237,.08);
}
.btn-ask-poolia:hover {
  background: #f5f3ff;
  border-color: #7c3aed;
  color: #5b21b6;
}

/* ── Context bar: view tabs (Standings) ─────────────────── */
.view-tabs {
  display: flex;
  gap: .1rem;
  flex-shrink: 0;
}
.view-tab {
  padding: .3rem .65rem;
  border-radius: 6px;
  font-size: .85rem;
  text-decoration: none;
  color: #374151;
  white-space: nowrap;
  transition: background .1s;
}
.view-tab:hover { background: #f3f4f6; color: #111; }
.view-tab.active { color: #7c3aed; font-weight: 600; background: #f5f3ff; }

/* ── Context bar: week selector ──────────────────────────── */
.context-week-selector {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  flex-shrink: 0;
}
.context-week-selector label { white-space: nowrap; font-weight: 500; color: #374151; }
.context-week-selector select {
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  padding: .25rem .5rem;
  font-size: .875rem;
  cursor: pointer;
}

/* ── Navbar: collapsed menu on mobile ────────────────────── */
@media (max-width: 991.98px) {
  #navMain.show,
  #navMain.collapsing {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: .5rem 0 .75rem;
  }
  #navMain .nav-item { padding: .1rem 0; }
  .nav-link-main { border-bottom: none; padding: .4rem .65rem; display: block; }
  .nav-link-main.active { color: #7c3aed; font-weight: 600; }
}

/* ── Float compose panel: full-width on phones (below sm = 576 px) ── */
@media (max-width: 575.98px) {
  #float-compose-panel {
    width: calc(100vw - 2rem);
    right: 1rem;
  }
}

/* ── Picks page: game row reflows to 3-col (teams + spread row 1, meta row 2) ── */
@media (max-width: 575.98px) {
  .game-row {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    gap: .3rem .35rem;
    padding: .45rem .6rem;
  }
  /* Team buttons: shrink text and logos */
  .game-row .team-btn {
    font-size: .78rem;
    padding: .35rem .45rem;
  }
  .game-row .team-logo {
    width: 22px;
    height: 22px;
  }
  .game-row .team-city {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Items 4-6 (result, score-col, preview) auto-flow to row 2 */
  .game-row > :nth-child(4),
  .game-row > :nth-child(5),
  .game-row > :nth-child(6) {
    justify-self: center;
    align-self: center;
    font-size: .75rem;
  }
}

/* ── Chat page: full-width feed on mobile (sidebar is a separate overlay) ── */
@media (max-width: 991.98px) {
  .chat-page {
    height: calc(100vh - 110px);
  }
}