/* Commissioner's Dashboard: additions on top of the Pick Helper's /shared/app.css. */

/* sign-in */
.login-body { min-height: 100vh; display: grid; place-items: center; }
.login-wrap { width: 100%; max-width: 380px; padding: 16px; }
.login-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; }
.login-card .brand { margin-bottom: 10px; }
.login-card button { margin-top: 8px; padding: 9px; }
.login-error { min-height: 1.2em; font-size: 13px; }
.login-note { font-size: 12px; margin: 8px 0 0; }

/* header */
.user-menu { display: inline-flex; gap: 8px; align-items: center; margin-left: 8px; }
.weeknav select { margin-left: 6px; }
.weeknav.season-only #prevWeek, .weeknav.season-only #nextWeek, .weeknav.season-only #weekLabel { display: none; }
.btn-link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; margin-left: 10px; white-space: nowrap; }
.btn-link:hover { text-decoration: underline; }
button.small { padding: 2px 8px; font-size: 12px; }
button.x { padding: 0 6px; }

/* game day: every card the same height. The odds column is wide enough that nothing wraps, and it
   always has the same five rows; injury alerts sit inside the team cards. */
#tab-gameday .game-main { grid-template-columns: 92px 1fr 1fr 330px; }  /* fits double-digit spreads */
#tab-gameday .odds-grid > span { white-space: nowrap; }
#tab-gameday .side { min-height: 96px; }
.qb-flag { font-size: 10px; padding: 0 6px; }
.odds.move-big { color: var(--warn); }
@media (max-width: 1250px) { #tab-gameday .game-main { grid-template-columns: 1fr 1fr; } }
.side { cursor: default; }
.side.pushed { background: var(--warn-bg); }
.ti-sm { width: 18px !important; height: 18px !important; margin-right: 3px; }
.lg-team { display: inline-flex; align-items: center; }

/* standings */
table.standings td.lp-name { white-space: nowrap; }
table.standings tr.st-lead td { background: var(--good-bg); }
table.standings tr.st-spoon td { background: var(--bad-bg); }
.wk-cell { color: var(--muted); }
.wk-perfect { color: var(--good); font-weight: 800; }

/* pot */
.pot-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat-card .big { font-size: 26px; font-weight: 800; margin: 4px 0; font-variant-numeric: tabular-nums; }
.pot-table td { vertical-align: top; }
table.pot-table td:nth-child(1), table.pot-table td:nth-child(6), table.pot-table td:nth-child(7),
table.pot-table th:nth-child(6), table.pot-table th:nth-child(7) { text-align: left; }
table.pot-table td:nth-child(7) { white-space: normal; min-width: 260px; }
table.pot-table .badge { white-space: nowrap; }
.pot-winner { display: inline-flex; gap: 6px; align-items: center; margin: 0 12px 2px 0; white-space: nowrap; }
.paid-box { font-size: 11px; color: var(--muted); }
.pot-form .row2, .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.inline-form input, .inline-form select, .field input[type=number], .field input[type=date], .field textarea {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.inline-form input[type=number] { width: 120px; }
ul.plain { list-style: none; padding: 0; margin: 6px 0; font-size: 13px; }
ul.plain li { padding: 3px 0; border-bottom: 1px dashed var(--line); }

/* sortable tables */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }

/* prizes */
.prize-table td { white-space: normal; text-align: left; vertical-align: top; }
.prize-table td.num { text-align: right; white-space: nowrap; }
.prize-row { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 6px; }
.stat-card .big .per { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 3px; }

/* sheet check */
a.app-link { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
a.app-link:hover { text-decoration: underline; }
a.sheet-link { color: var(--muted); font-size: 11px; text-decoration: none; white-space: nowrap; margin-left: 4px; }
a.sheet-link:hover { text-decoration: underline; }
tr.is-resolved td { opacity: .55; }
tr.is-resolved td:last-child { opacity: 1; }

/* users */
.users-table td { white-space: normal; text-align: left; }
.users-table button { margin: 1px 2px; }
.temp-pw { font: 700 20px ui-monospace, Consolas, monospace; padding: 10px; background: var(--bg); border-radius: 8px; text-align: center; user-select: all; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal-card { width: 100%; max-width: 420px; }

/* member row opened from a Sheet Check link */
table.lp-table tr.lp-highlight td.lp-name, table.lp-table tr.lp-highlight td.lp-rank { background: var(--warn-bg); color: var(--warn); }
table.lp-table tr.lp-highlight td { animation: lpflash 1.2s ease-in-out 2; }
@keyframes lpflash { 50% { filter: brightness(1.35); } }

/* standings: trophy / wooden spoon slot before each name (empty slot keeps names aligned) */
.st-icon { display: inline-block; width: 1.6em; text-align: center; }

/* standings: Live / Through Week N toggle */
.seg { display: inline-flex; margin-left: 12px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; vertical-align: middle; }
.seg button { border: 0; border-radius: 0; padding: 3px 12px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--card); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
th.wk-live, td.wk-live { background: var(--pick-bg); }
/* names left-aligned (the shared table style right-aligns everything after the first column) */
table.standings th:nth-child(2), table.standings td:nth-child(2) { text-align: left; }

/* Phones in portrait (narrow screens only; desktop and landscape are unchanged): the two team cards
   sit side by side with ~130px each, so show the team code instead of the full name, and use a
   smaller logo and score so everything fits inside the card. */
.team-code { display: none; }
@media (max-width: 600px) {
  main { padding-left: 10px; padding-right: 10px; }
  #tab-gameday .game-main { gap: 8px; padding: 10px; }
  #tab-gameday .side { padding: 7px 8px; min-height: 0; }
  #tab-gameday .side-head { gap: 5px; min-width: 0; }
  #tab-gameday .side .ti-logo { width: 26px; height: 26px; margin: 0; }
  #tab-gameday .side .team { display: none; }
  #tab-gameday .side .team-code { display: inline; font-weight: 800; font-size: 15px; }
  #tab-gameday .side .line { margin-left: 0; font-size: 12px; white-space: nowrap; }
  #tab-gameday .side-score { font-size: 22px; padding-left: 4px; }
  #tab-gameday .side .prob { font-size: 11px; line-height: 1.3; }
  #tab-gameday .odds-grid > span { white-space: normal; }
}