* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f4f4f4;
  color: #1a1a1a;
}

header.app-header {
  background: #1a4d2e;
  color: #fff;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

header.app-header .team-name {
  flex: 1;
}

.nav-toggle {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 100;
}

.nav-overlay.open {
  display: block;
}

.nav-drawer {
  background: #fff;
  width: 80%;
  max-width: 300px;
  height: 100%;
  padding: 1rem;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
}

.nav-drawer .nav-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

.nav-drawer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-drawer li a {
  display: block;
  padding: 0.9rem 0.5rem;
  font-size: 1.1rem;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.nav-drawer li a.current {
  color: #1a4d2e;
  font-weight: bold;
}

header.app-header .team-name {
  font-weight: bold;
}

header.app-header button {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 1.25rem;
}

.auth-card {
  max-width: 360px;
  margin: 3rem auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.auth-card h1 {
  font-size: 1.25rem;
  margin-top: 0;
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.field input, .field textarea {
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
}

.field textarea {
  resize: vertical;
}

button[type="submit"], .btn-primary {
  display: block;
  width: 100%;
  padding: 0.7rem;
  font-size: 1rem;
  background: #1a4d2e;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.error-message {
  color: #b00020;
  font-size: 0.9rem;
  min-height: 1.2rem;
  margin-top: 0.5rem;
}

.auth-switch {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
}

table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
th { background-color: #f4f4f4; }

/* Cards for match/matchup lists (mobile-first: stacked, no horizontal scroll) */
.card {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.card a.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-title {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.card-sub {
  color: #555;
  font-size: 0.9rem;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #eee;
  color: #333;
  text-transform: uppercase;
}

.badge.complete { background: #d4edda; color: #1a4d2e; }
.badge.pending { background: #fff3cd; color: #7a5b00; }
.badge.lost { background: #f8d7da; color: #842029; }

/* Below-league-minimum warning next to a match card's availability line.
   Native `title` attribute for the tooltip -- no JS/library needed, and it
   works on mobile via long-press same as any other native tooltip. */
.caution-icon {
  color: #b45f06;
  font-weight: bold;
  cursor: help;
  margin-left: 0.25rem;
}

/* Match cards: light green once a captain has set a date, light red while
   still waiting on one. */
.card.match-scheduled { background: #e6f4ea; }
.card.match-unscheduled { background: #fbe9e9; }

/* Compact, tap-to-expand roster rows -- read-only detail with a small edit
   icon, instead of every player's full editable form always on screen. */
.roster-row .row-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.roster-row .row-info {
  flex: 1;
  min-width: 0;
}

.roster-row .row-name {
  font-weight: bold;
}

.roster-row .row-ratings {
  color: #555;
  font-size: 0.85rem;
}

.roster-row .row-caret {
  color: #555;
  font-size: 0.75rem;
  width: 1em;
  text-align: center;
}

.roster-row .row-detail {
  margin-top: 0.75rem;
  position: relative;
}

.roster-row .edit-icon {
  position: absolute;
  top: -0.25rem;
  right: 0;
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: #1a4d2e;
  cursor: pointer;
  padding: 0.25rem;
}

/* Segmented control: round-type tabs, winner picker -- big touch targets */
.segmented {
  display: flex;
  border: 1px solid #1a4d2e;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.segmented button {
  flex: 1;
  padding: 0.65rem 0.5rem;
  font-size: 0.95rem;
  background: #fff;
  color: #1a4d2e;
  border: none;
  border-right: 1px solid #1a4d2e;
  cursor: pointer;
}

.segmented button:last-child { border-right: none; }

.segmented button.active {
  background: #1a4d2e;
  color: #fff;
}

/* Player picker rows -- large tap area for phones */
.player-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.player-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #eee;
}

/* Player card detail, shown on selection (pick.html) -- flex-basis: 100%
   forces it onto its own line below the checkbox/label row regardless of
   available width, without needing to restructure the row itself (also
   used unchanged, without any detail child, by availability.html). */
.player-item .player-detail {
  flex-basis: 100%;
  margin-top: 0.5rem;
  padding-left: 2.05rem;
}

.player-item input[type="checkbox"] {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
}

.player-item label {
  flex: 1;
}

.player-item .rating {
  color: #555;
  font-size: 0.85rem;
}

/* Distinguishes "not available for this match" from the plain greying a
   player already used in an earlier round gets -- both end up disabled and
   greyed via .disabled, but only this one gets a labeled reason. */
.player-item .not-available-tag {
  color: #b00020;
  font-size: 0.8rem;
  font-weight: normal;
}

.player-item.disabled { opacity: 0.4; }

.player-item.sex-m, .roster-row.sex-m { background: #d9edf9; }
.player-item.sex-f, .roster-row.sex-f { background: #fbdce8; }

.section-heading {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #555;
  margin: 1.25rem 0 0.5rem;
}

.matchup-card .players {
  margin-bottom: 0.5rem;
}

.matchup-card .players .side {
  font-size: 0.95rem;
}

.matchup-card .result-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.matchup-card input[type="text"],
.matchup-card input[type="number"] {
  flex: 1;
  min-width: 0; /* inputs don't shrink below their default width in flex layout otherwise, overflowing the card on narrow screens */
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.remove-link {
  color: #b00020;
  font-size: 0.85rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.edit-link, .cancel-link {
  color: #1a4d2e;
  font-size: 0.85rem;
  background: none;
  border: none;
  padding: 0;
  margin-right: 1rem;
  cursor: pointer;
}

.empty-state {
  color: #555;
  text-align: center;
  padding: 2rem 1rem;
}

/* Season Performance page: a genuine player x match matrix has no
   reasonable card-based equivalent, so this is the one page that uses a
   real <table>, contained in its own horizontally-scrolling wrapper (the
   page itself never scrolls sideways) with a sticky first column so the
   player name stays visible while scrolling through matches. */
.table-scroll {
  overflow-x: auto;
  margin-top: 1rem;
  -webkit-overflow-scrolling: touch;
}

#performance-table {
  margin-top: 0;
  font-size: 0.85rem;
}

#performance-table th, #performance-table td {
  padding: 0.5rem 0.6rem;
  white-space: nowrap;
}

#performance-table th:first-child, #performance-table td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}

#performance-table thead th:first-child {
  background: #f4f4f4;
  z-index: 2;
}

.result-win { color: #1a4d2e; font-weight: bold; }
.result-loss { color: #b00020; }
.result-push { color: #7a5b00; }
.result-sit { color: #999; }

/* Wide-screen progressive enhancement -- phone/stacked layout is still the
   unconditional default below this breakpoint (see pick.html/players.html).
   Scoped per-page via a page-specific class so a wider `main` here can't
   leak into pages that haven't opted in. */
@media (min-width: 700px) {
  .pick-main {
    max-width: 900px;
  }

  .pick-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }

  .pick-columns #my-team-heading { grid-column: 1; grid-row: 1; }
  .pick-columns #opponent-heading { grid-column: 2; grid-row: 1; }
  .pick-columns #my-players { grid-column: 1; grid-row: 2; }
  .pick-columns #opponent-players { grid-column: 2; grid-row: 2; }

  /* Roster as a grid -- #add-player-card is a sibling that follows
     #roster-list in source order, so it naturally stays full-width below
     the grid regardless of column count. auto-fit/minmax grows the column
     count on wider screens instead of capping at 2 -- expand/collapse in
     players.html reads the live column count off this rule so opening one
     card opens its whole visual row together, whatever that count is. */
  .players-main {
    max-width: 1400px;
  }

  .roster-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
  }

  .roster-filters .field {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
  }

  #roster-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.75rem;
  }

  #roster-list .roster-row {
    margin-bottom: 0;
  }

  /* Same auto-fit grid pattern as #roster-list, applied to each team's
     availability list -- scoped to .availability-main so pick.html's
     player-list (a plain checkbox list, laid out via .pick-columns instead)
     is unaffected. */
  .availability-main {
    max-width: 1400px;
  }

  .availability-main .player-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.5rem;
  }

  .availability-main .player-item {
    border-bottom: none;
  }

  /* The table already scrolls horizontally on its own when there are more
     matches than fit -- widening main just means fewer matches need that
     scroll before it kicks in. */
  .season-main {
    max-width: 1400px;
  }

  .season-summary {
    display: flex;
    gap: 1rem;
  }

  .season-summary .card {
    flex: 1;
  }
}