/* Sleeper Team Draft Tool - CSS Layout */

#sleeper-team-draft-tool {
  text-align: center;
  margin: 20px auto;
max-width: 1200px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#ownerSelect {
  padding: 8px;
  margin-top: 10px;
  font-size: 16px;
}

/* Grid Setup */
#teamDraftBoard {
  display: flex;
  justify-content: center;
  margin-top: 0px;
  gap: 0;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0px;
  box-sizing: border-box;
}

/* Individual Pick Block */
.draft-box {
  height: 52px;
  width: 400px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin: 0;
  background-color: #f2f2f2;
  box-shadow: none;
  border-radius: 0;
  font-size: 13px;
  text-align: left;
  line-height: 1.1;
  box-sizing: border-box;
  border: none;
  outline: none;
}

/* Pick Label */
.pick-label {
  font-weight: bold;
  margin-right: 8px;
  min-width: 40px;
  color: #081c2f;
}

/* Positional Rank */
.pos-rank {
  font-weight: bold;
  width: 30px; /* fixed width for alignment */
  text-align: center;
  margin-right: 16px;
  color: #081c2f;
}

/* Player Name */
.player-name {
  font-weight: 600;
  font-size: 24px;
  margin-left: 0;
  text-align: left;
  flex-grow: 1;
  color: #081c2f;
}


/* NFL Team */
.nfl-team {
  font-size: 12px;
  color: #081c2f;
  text-align: right;
  margin-left: 8px;
}

/* Color Codes by Position */
.QB { background-color: #fd5a8d; }
.RB { background-color: #00ceb8; }
.WR { background-color: #87bffc; }
.TE { background-color: #fec486; }
.K { background-color: #d490fe; }
.BLANK { background-color: #f8f8f8; color: #aaa; font-style: italic; }

/* Draft Banner */

#draftBanner {
  background-color: #081c2f;
  color: white;
  display: flex;
  align-items: center;
  padding: 16px 24px;
  margin-bottom: 20px;
  width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
}

.banner-left {
  flex-shrink: 0;
}

.banner-logo {
  height: 60px;
  width: 280px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  max-width: 100%;
}


.banner-center {
  flex-grow: 1;
  text-align: center;
}

.team-name {
  font-size: 30px;
  font-weight: bold;
}

.league-name {
  font-size: 18px;
  color: #ccc;
}

#ownerSelect {
  margin-bottom: 24px; /* Adds space below the dropdown */
}

#draftBanner {
  margin-top: 0;         /* Removes space above the banner */
  margin-bottom: 0px;    /* Slight space before the draft board */
}

/* Mobile phone support */
/* Wrapper to allow horizontal scrolling on small screens */
.responsive-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.responsive-scroll-wrapper > * {
  min-width: 800px;
  box-sizing: border-box;
}